Micro Web Server App

Hi zusammen,

Dash lokal, super Idee. Aber kann mir einer mal sagen oder Beschreiben wie ich auf den Homey komme um die Pakete rüberzusenden?

LG

@Badamigo wo klemmts? Kann man noch helfen oder ist dein Problem gelöst?

FileZilla, or another FTP program.

Naja was muss ich tun, damit ich mit einem Programm die Dateien auf den homey bekomme…

Ich muss doch bestimmt per CMD mich irgendwie mit dem Teil verbinden oder denke ich zu umständlich

Wahrscheinlich zu kompliziert. Was wir hier gemacht haben ist eine version von homeydash.com lokal auf dem Homey zu installieren. Die links findest du hier im thread. Damit das lokal auf homey läuft haben wir die Micro Web Server app verwendet. Alles was du sonst dazu brauchst ist ein FTP client um die dateien hoch zu laden. FileZilla hat super funktioniert soweit.

Ich glaub ich werd doch mal ein paar screenshots und ne mini anleitung mit auf meine app seite stellen. Aber unter der Woche komm ich nicht zu sonderlich viel.

1 Like

Soweit klar, aber wohin lade ich die Daten?

Was muss ich im FTP Client eingeben? Die Lokale IP?

Die App zeigt dir die host Adresse (IP geht natürlich an der Stelle auch) im Einstellungen Menü an. Dort musst du den FTP auch explizit starten bevor du dich verbinden kannst. Dann einfach im ftp client anonyme Anmeldung verwenden. Standardwert für den ftp Port ist 5081.

Na lieben Dank, so kann ich was damit anfangen.

Werde es zum WE mal austesten und ggf bei Fragen wieder melden…

1 Like

Ich hab es auch aufgegeben. Files sind auf Homey hoch geladen, aber außer “Server hat die Verbindung abgelehnt”, bekomme ich kein Feedback.
Wenn es eine ausführliche Anleitung gibt versuch ich es nochmal, ansonsten bin ich hier raus.

Ich hab eine einfache Anleitung mal mit in die Beschreibung auf der Forum Seite der App eingebaut. Vielleicht erklärt die schon alles @Undertaker @Badamigo

Hallo!
Hab Homeydash auf dem micro web Server laufen um mir mein eigenes Dashboard zu gestalten. So manche Dinge hab ich schon gut umsetzen können, jedoch würde ich gerne noch meine Alarmanlagen Geräte separat anzeigen. So wie eine zweite „favorite devices“ Gruppe nur mit Alarmanlagen Geräten. Kann mir da jemand weiterhelfen oder noch besser einen Code schicken?!
Danke
Stefan

Du meinst HomeyDash auf dem lokalen Webserver?

Und dort willst du solche Gruppierungen machen?

Da kann ich die Beispiele geben. Du müsstest aber mit HTML und JavaScript zurecht kommen.

Danke für die Rückmeldung! Ja genau solche Gruppierungen meine ich. Wäre toll wenn du mir da was zukommen lassen könntest!
Lg

Ich versuch’s mal kurz und knapp. Bei Fragen einfach nochmal melden :wink:

  1. index.html:
    Hier musst du die neuen Panels (div-Elemente) ergänzen mit eindeutiger ID, z.B. “thermostats”
  <div id="row2">

  	<div id="thermostats" class="favorites">
  		<h2><span id="favorite-thermostats"></span></h2>
  		<div id="thermostats-inner" class="devices favorites-inner"></div>
  	</div>

  	<div id="sensors" class="favorites">
  		<h2><span id="favorite-sensors"></span></h2>
  		<div id="sensors-inner" class="devices sensors-inner"></div>
  	</div>

  	<div id="devices" class="favorites">
  		<h2><span id="favorite-devices"></span></h2>
  		<div id="devices-inner" class="devices favorites-inner"></div>
  	</div>
  </div>

  <div id="row1">

  	<div id="flows" class="favorites">
  		<h2><span id="favorite-flows"></span></h2>
  		<div id="flows-inner" class="flows favorites-inner"></div>
  	</div>
  </div>

  <div id="row3">
  	<div id="alarms" class="favorites">
  		<h2><span id="favorite-alarms"></span></h2>
  		<div id="alarms-inner" class="alarms favorites-inner"></div>
  	</div>
  </div>
  1. locales/de.json:
    Hier musst du die Bezeichnung für die Panels eintragen, damit der Text innerhalb der Linie angezeigt wird:
"favoritethermostats": "Thermostate",
"favoritesensors": "Sensoren",
"favoriteflows": "Flows",
"favoritedevices": "Geräte",
  1. js/homeydash.app.js:

3a)
In Methode window.addEventListener(‘load’, function(), nach diesem Block…

try {
$favoriteflows.innerHTML = texts.favoriteflows
$favoritedevices.innerHTML = texts.favoritedevices
$favoritealarms.innerHTML = texts.alarms
} catch(err) {}

…musst du die Referenzen auf die Panels holen:

// ===============================================================================
// Elemente für Thermostate
var $favoritethermostats = document.getElementById(‘favorite-thermostats’);
var $thermostatsInner = document.getElementById(‘thermostats-inner’);
$favoritethermostats.innerHTML = texts.favoritethermostats;
// ROW Elemente für Sensoren
var $favoritesensors = document.getElementById(‘favorite-sensors’);
var $sensorsInner = document.getElementById(‘sensors-inner’);
$favoritesensors.innerHTML = texts.favoritesensors;
// ===============================================================================

3b)
In Methode function renderDevices(devices) musst du folgendes ergänzen:

function renderDevices(devices) {
$devicesInner.innerHTML = ‘’;

// ===============================================================================
// => HTML-Inner leeren
> $thermostatsInner.innerHTML = ‘’;
> $sensorsInner.innerHTML = ‘’;
// <= HTML-Inner leeren
// ===============================================================================

devices.forEach(function(device) {
  if (!device.ready) {return}
  var $deviceElement = document.createElement('div');
  $deviceElement.id = 'device:' + device.id;
  $deviceElement.classList.add('device');
  $deviceElement.classList.toggle('on', device.capabilitiesObj && device.capabilitiesObj[device.ui.quickAction] && device.capabilitiesObj[device.ui.quickAction].value === true);
  if ( device.capabilitiesObj && device.capabilitiesObj.button ) {
    $deviceElement.classList.toggle('on', true)
  }

// $devicesInner.appendChild($deviceElement);
// Originalaufruf auskommentiert
// ===============================================================================
// => Gerätetypen in spezielle Bereiche einfügen
// Devices erweitern um spezielle Anzeige-Werte
extendDevice( device, $deviceElement ).appendChild($deviceElement);
//<= Gerätetypen in spezielle Bereiche einfügen
// ===============================================================================

  if (device.capabilitiesObj && device.capabilitiesObj.alarm_generic && device.capabilitiesObj.alarm_generic.value ||
      device.capabilitiesObj && device.capabilitiesObj.alarm_motion && device.capabilitiesObj.alarm_motion.value ||

Die Methode extendDevice( ) kann nun die einzelnen Geräte anders darstellen oder das zu verwendende Panel zurückliefern.
Beispiel:

function extendDevice( device, $deviceElement ){
// Target-Inner-HTML-Element je Typ zurückgeben
if (device.class == ‘thermostat’){
return $thermostatsInner;
}
else if (
(device.class == ‘sensor’ || device.class == ‘camera’)
&& (device.driverId != ‘surveillanceModeSwitch’ )
){
return $sensorsInner;
}
else{
return $devicesInner;
}
};
});

Die Methode muss vor der schließenden Klammer eingefügt werden.
Hier kannst du abhängig von der DeviceClass oder anderen Eigenschaften bestimme, in welches Panel das Gerät eingefügt werden soll (return $devicesInner; für das Standard Geräte-Panel, return $thermostatsInner; für das Thermostate-Panel).

Viel Erfolg!

Hallo und vielen Dank für deine super Hilfe!
Habe die Schritte wie von dir beschrieben abgearbeitet, jedoch bekomme ich jetzt keine Geräte mehr angezeigt.:thinking: Denke es scheitert an Punkt 4 mit dem zuteilen der Geräte. Vielleicht kannst du mir da nochmal ein Beispiel geben oder so…
Lg

Kann sein, dass ich etwas beim Kopieren vergessen hatte.
Aktiviere mal die Konsole im Browser (ich glaube mit Strg+K) und schau bitte, ob dort Syntaxfehler angezeigt werden.

Hier der Syntaxfehler:

Zeigt mir jetzt den Syntaxfehler in line 1338 an.
Das ist bei dem ^thermostatsInner.innerHtml^

Schau mal bitte nach diesen Inhalten:

index.html:
grafik

Die ID des DIV-Elements wird im JS-Code (siehe Punkt 1.) angegeben.
grafik

Vielleicht passen die Namen bei dir nicht (mehr) und damit kann die Instanz $thermostatsInner nicht erstellt werden.
Mit der Konsole kommt man ganz gut auf die fehlerhaften Stellen. Du kannst auch einen BerakPoint im JS-Code an die Stellen setzen und prüfen, ob die Objekte instanziiert sind. Oder geht dir das jetzt zu tief ins Coding?