# Micro Web Server App

**URL:** <https://community.homey.app/t/micro-web-server-app/26790>\
**Category:** Apps (DE)\
**Created:** [March 5, 2020, 7:03pm UTC](https://community.homey.app/t/micro-web-server-app/26790 "2020-03-05T19:03:58Z")\
**Posts on this page:** 20\
**Page:** 3

<div class="post-metadata">

**Author:** ![Badamigo](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/badamigo/32/53738_2.png) [@Badamigo](https://community.homey.app/u/Badamigo)\
**Post date:** [March 10, 2020, 10:44am UTC](https://community.homey.app/t/micro-web-server-app/26790/42 "2020-03-10T10:44:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Shakesbeard](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/shakesbeard/32/15112_2.png) [@Shakesbeard](https://community.homey.app/u/Shakesbeard)\
**Post date:** [March 10, 2020, 5:39pm UTC](https://community.homey.app/t/micro-web-server-app/26790/43 "2020-03-10T17:39:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Rocodamelshekima](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/rocodamelshekima/32/8209_2.png) [@Rocodamelshekima](https://community.homey.app/u/Rocodamelshekima)\
**Post date:** [March 10, 2020, 5:53pm UTC](https://community.homey.app/t/micro-web-server-app/26790/44 "2020-03-10T17:53:13Z")

</div>

FileZilla, or another FTP program.

---

<div class="post-metadata">

**Author:** ![Badamigo](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/badamigo/32/53738_2.png) [@Badamigo](https://community.homey.app/u/Badamigo)\
**Post date:** [March 10, 2020, 8:56pm UTC](https://community.homey.app/t/micro-web-server-app/26790/45 "2020-03-10T20:56:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Shakesbeard](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/shakesbeard/32/15112_2.png) [@Shakesbeard](https://community.homey.app/u/Shakesbeard)\
**Post date:** [March 10, 2020, 9:28pm UTC](https://community.homey.app/t/micro-web-server-app/26790/46 "2020-03-10T21:28:40Z")

</div>

Wahrscheinlich zu kompliziert. Was wir hier gemacht haben ist eine version von [homeydash.com](http://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.

---

<div class="post-metadata">

**Author:** ![Shakesbeard](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/shakesbeard/32/15112_2.png) [@Shakesbeard](https://community.homey.app/u/Shakesbeard)\
**Post date:** [March 10, 2020, 9:30pm UTC](https://community.homey.app/t/micro-web-server-app/26790/47 "2020-03-10T21:30:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Badamigo](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/badamigo/32/53738_2.png) [@Badamigo](https://community.homey.app/u/Badamigo)\
**Post date:** [March 10, 2020, 9:42pm UTC](https://community.homey.app/t/micro-web-server-app/26790/48 "2020-03-10T21:42:14Z")

</div>

Soweit klar, aber wohin lade ich die Daten?

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

---

<div class="post-metadata">

**Author:** ![Shakesbeard](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/shakesbeard/32/15112_2.png) [@Shakesbeard](https://community.homey.app/u/Shakesbeard)\
**Post date:** [March 11, 2020, 6:23am UTC](https://community.homey.app/t/micro-web-server-app/26790/49 "2020-03-11T06:23:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Badamigo](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/badamigo/32/53738_2.png) [@Badamigo](https://community.homey.app/u/Badamigo)\
**Post date:** [March 11, 2020, 6:37am UTC](https://community.homey.app/t/micro-web-server-app/26790/50 "2020-03-11T06:37:00Z")

</div>

Na lieben Dank, so kann ich was damit anfangen.

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

---

<div class="post-metadata">

**Author:** ![Undertaker](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/undertaker/32/53278_2.png) [@Undertaker](https://community.homey.app/u/Undertaker)\
**Post date:** [March 11, 2020, 12:01pm UTC](https://community.homey.app/t/micro-web-server-app/26790/51 "2020-03-11T12:01:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Shakesbeard](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/shakesbeard/32/15112_2.png) [@Shakesbeard](https://community.homey.app/u/Shakesbeard)\
**Post date:** [March 11, 2020, 5:49pm UTC](https://community.homey.app/t/micro-web-server-app/26790/52 "2020-03-11T17:49:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Stefan\_Richter](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/stefan_richter/32/17177_2.png) [@Stefan\_Richter](https://community.homey.app/u/Stefan_Richter)\
**Post date:** [January 20, 2021, 4:17pm UTC](https://community.homey.app/t/micro-web-server-app/26790/53 "2021-01-20T16:17:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RonnyW](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/ronnyw/32/10879_2.png) [@RonnyW](https://community.homey.app/u/RonnyW)\
**Post date:** [January 21, 2021, 6:38pm UTC](https://community.homey.app/t/micro-web-server-app/26790/54 "2021-01-21T18:38:56Z")

</div>

Du meinst HomeyDash auf dem lokalen Webserver?

Und dort willst du solche Gruppierungen machen?

 ![grafik](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/9/b/9ba4262c092f136a88a49d50f5550e2c5d0e5ae0.png)

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

---

<div class="post-metadata">

**Author:** ![Stefan\_Richter](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/stefan_richter/32/17177_2.png) [@Stefan\_Richter](https://community.homey.app/u/Stefan_Richter)\
**Post date:** [January 22, 2021, 5:04am UTC](https://community.homey.app/t/micro-web-server-app/26790/55 "2021-01-22T05:04:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RonnyW](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/ronnyw/32/10879_2.png) [@RonnyW](https://community.homey.app/u/RonnyW)\
**Post date:** [January 22, 2021, 3:41pm UTC](https://community.homey.app/t/micro-web-server-app/26790/56 "2021-01-22T15:41:03Z")

</div>

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

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 ||
> 
> ```
> 
> …

1. 

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!

---

<div class="post-metadata">

**Author:** ![Stefan\_Richter](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/stefan_richter/32/17177_2.png) [@Stefan\_Richter](https://community.homey.app/u/Stefan_Richter)\
**Post date:** [January 22, 2021, 5:10pm UTC](https://community.homey.app/t/micro-web-server-app/26790/57 "2021-01-22T17:10:09Z")

</div>

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.🤔 Denke es scheitert an Punkt 4 mit dem zuteilen der Geräte. Vielleicht kannst du mir da nochmal ein Beispiel geben oder so…  
Lg

---

<div class="post-metadata">

**Author:** ![RonnyW](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/ronnyw/32/10879_2.png) [@RonnyW](https://community.homey.app/u/RonnyW)\
**Post date:** [January 22, 2021, 5:41pm UTC](https://community.homey.app/t/micro-web-server-app/26790/58 "2021-01-22T17:41:28Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Stefan\_Richter](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/stefan_richter/32/17177_2.png) [@Stefan\_Richter](https://community.homey.app/u/Stefan_Richter)\
**Post date:** [January 22, 2021, 5:55pm UTC](https://community.homey.app/t/micro-web-server-app/26790/59 "2021-01-22T17:55:44Z")

</div>

Hier der Syntaxfehler:

---

<div class="post-metadata">

**Author:** ![Stefan\_Richter](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/stefan_richter/32/17177_2.png) [@Stefan\_Richter](https://community.homey.app/u/Stefan_Richter)\
**Post date:** [January 22, 2021, 6:04pm UTC](https://community.homey.app/t/micro-web-server-app/26790/60 "2021-01-22T18:04:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RonnyW](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/ronnyw/32/10879_2.png) [@RonnyW](https://community.homey.app/u/RonnyW)\
**Post date:** [January 22, 2021, 6:15pm UTC](https://community.homey.app/t/micro-web-server-app/26790/61 "2021-01-22T18:15:10Z")

</div>

Schau mal bitte nach diesen Inhalten:

index.html:  
 ![grafik](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/2/0/203bef4b8c8912525b55ce98bd0ca561d4d9b03d.png)

Die ID des DIV-Elements wird im JS-Code (siehe Punkt 1.) angegeben.  
 ![grafik](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/0/f/0f08b77aa4ad28bfb35590ce685fc136fcb8ebd3.png)

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?

[Previous page](https://community.homey.app/t/micro-web-server-app/26790.md?page=2)

[Next page](https://community.homey.app/t/micro-web-server-app/26790.md?page=4)