HTML Plugin Sammlung für Light-Manager Air , ImperiHome etc.

Hey liebe Forengemeinde !
Wie versprochen starte ich eine neues Thema in Sachen Light Manager Air HTML "Plugins".

Dieser Thread soll eine Plattform darstellen, auf der man seine eigens erstellten HTML "Plugins" vorstellt/erklärt und für die Community hochläd/zur Verfügung stellt, welche man dann auf seinen eigenen Light-Manager Air übertragen kann.
Es würde mich sehr freuen wenn dieser Thread zu einer erfolgreichen, umfangreichen Datensammlung beiträgt um die Funktionen unserer LMs zu erweitern und Jbmedia die Möglichkeit zu geben die ein oder andere Funktion sogar in kommenden Software - Versionen zu integrieren

Ich fange am besten mal mit einem "Hygrometer/Temperatursensor Plugin" für die App ImperiHome an.
Da Imperi Home nur den internen Sensor, nicht aber alle anderen 1-10 zzgl OWM, zur Auswahl stellt, hatte ich mir zur Aufgabe gemacht alle 12 Channel aus dem Webinterface zu extrahieren.
Also den Internen Channel , 1-10 und den Wetter Online Dienst Channel.

Mit Hilfe meines "Plugins" seid ihr nun in der Lage jedem Feld im ImperiHome Layout einen Sensor per http link zuzuweisen.
Diese Sensor Files aktualisieren sich ebenso von selbst wie im eigentlichen LMair Webinterface, im selben Intervall.

Damit Ihr mein "Plugin" auch Plug and Play nutzen könnt, habe ich euch das ganze mal neu aufgesetzt mit einer simplen Ordnerstruktur.

Das Einzige was ihr tun müsst, ist den Ordner "piezoplugins" in html Ordner vom AirStudio zu kopieren und eure Config neu zu übertragen.
( Pfad zum html Ordner C:\Program Files (x86)\airStudio\html )

Enthalten ist momentan der Ordner Hygrometer und die Auswahl zwischen Mobil-Telefon und Tablet.
Beide Ordner besitzen eine unterschiedliche Stylesheet aufgrund der unterschiedlichen Displaygrößen beider Endgeräte.


Die Ordnerstruktur zu den Hygrometer Links für ein Handydisplay lautet dann für


Sensor Channel1

Code:

http://eure-IP/piezoplugins/hygrometer/mobil/hygrochannel1.htm

Sensor Channel2

Code:

http://eure-IP/piezoplugins/hygrometer/mobil/hygrochannel2.htm

Sensor Channel3

Code:

http://eure-IP/piezoplugins/hygrometer/mobil/hygrochannel3.htm

Sensor Channel4

Code:

http://eure-IP/piezoplugins/hygrometer/mobil/hygrochannel4.htm

Sensor Channel5

Code:

http://eure-IP/piezoplugins/hygrometer/mobil/hygrochannel5.htm

Sensor Channel6

Code:

http://eure-IP/piezoplugins/hygrometer/mobil/hygrochannel6.htm

Sensor Channel7

Code:

http://eure-IP/piezoplugins/hygrometer/mobil/hygrochannel7.htm

Sensor Channel8

Code:

http://eure-IP/piezoplugins/hygrometer/mobil/hygrochannel8.htm

Sensor Channel9

Code:

http://eure-IP/piezoplugins/hygrometer/mobil/hygrochannel9.htm

Sensor Channel10

Code:

http://eure-IP/piezoplugins/hygrometer/mobil/hygrochannel10.htm

Sensor Channel 11 (Interner Sensor)

Code:

http://eure-IP/piezoplugins/hygrometer/mobil/hygrochannel-intern.htm

Sensor Channel 12 (Online Wetter Sensor)

Code:

http://eure-IP/piezoplugins/hygrometer/mobil/hygrochannel-owm.htm

Die Ordnerstruktur zu den Hygrometer Links für ein Tabletdisplay lautet dann für

Sensor Channel1

Code:

http://eure-IP/piezoplugins/hygrometer/tablet/hygrochannel1.htm

Sensor Channel2

Code:

http://eure-IP/piezoplugins/hygrometer/tablet/hygrochannel2.htm

Sensor Channel3

Code:

http://eure-IP/piezoplugins/hygrometer/tablet/hygrochannel3.htm

Sensor Channel4

Code:

http://eure-IP/piezoplugins/hygrometer/tablet/hygrochannel4.htm

Sensor Channel5

Code:

http://eure-IP/piezoplugins/hygrometer/tablet/hygrochannel5.htm

Sensor Channel6

Code:

http://eure-IP/piezoplugins/hygrometer/tablet/hygrochannel6.htm

Sensor Channel7

Code:

http://eure-IP/piezoplugins/hygrometer/tablet/hygrochannel7.htm

Sensor Channel8

Code:

http://eure-IP/piezoplugins/hygrometer/tablet/hygrochannel8.htm

Sensor Channel9

Code:

http://eure-IP/piezoplugins/hygrometer/tablet/hygrochannel9.htm

Sensor Channel10

Code:

http://eure-IP/piezoplugins/hygrometer/tablet/hygrochannel10.htm

Sensor Channel 11 (Interner Sensor)

Code:

http://eure-IP/piezoplugins/hygrometer/tablet/hygrochannel-intern.htm

Sensor Channel 12 (Online Wetter Sensor)

Code:

http://eure-IP/piezoplugins/hygrometer/tablet/hygrochannel-owm.htm

Änderung des Raum Namens
Um den Namen des Sensors zu ändern müsst ihr die jeweilige htm des Channels öffnen und in Zeile 3 den Titel "Temperatur Name" ändern und das Textfeld "Name" in Zeile 16.

Code:

Temperatur Name

und

Code:

Name

Mein Tipp, für die Mobile Version kurze Sensornamen vergeben.

Änderung der Hintergrundfarbe
Die Hintergrundfarbe lässt sich ganz einfach in der Zeile 13 in der jeweiligen HTM ändern und nennt sich bgcolor="#fffef4" .
#fffef4 ist aktuell die von mir ausgewählte Background Farbe. Diese würde ich euch für die Hintergrundfarbe des Buttons in der ImperiHome App empfehlen, damit die http Seite im Feld der App harmoniert.


Diesen Farbcode könnt ihr natürlich beliebig abändern um es eurem ImperiHome Design anzupassen
Evtl wollt ihr ja noch die Schriftgröße anpassen, welche bei Tablet und Mobil jeweils unterschiedlich ist.
Diese findet Ihr in meiner Stylesheet ImperHome.css in Zeile 3 ist der Titel und Zeile 9 ist die Temperatur/Feuchtigkeitsanzeige.

Ich hoffe ich konnte euch aufklären wie ihr meine Dateien anwenden müsst und auf Wunsch ändern könnt.
Zur Datei habe ich euch noch zusätzlich zwei Bilder mit angefügt

Als nächstes Plugin werde ich euch noch meine extrahierten Marker hier einstellen um jeden x-beliebigen Marker in ImperiHome einzubinden.


*Updated 09.11.2019

[ATTACHMENT NOT FOUND]


Beste Grüße und viel Spaß damit
Piezo

Habe die Dateien noch etwas angepasst und den Ordnerpfad neu strukturiert, die Datei habe ich im ersten Post aktualisiert.

Beste Grüße

Piezo

Klasse Arbeit.
Die Einbindung in ImperiHome klappt bei mir.
Was ich allerdings nicht hinbekomme, ist die Änderung der Schriftgrößen etc..
Die Änderung der Werte in der ImperHome.css zeigen keinen Effekt.
Die Änderung der Farbe will auch nicht so recht klappen.
Ich möchte als Farbe ein dunkles Grau haben.
In ImperiHome ist das FF272727, bei der Temperaturanzeige kommt aber Orange raus.

Wenn es eine css ist, dann muss eine Gitter/ Hashtag rein
FF272727

#272727

Hey,

Das Plugin habe ich im ersten Post gegen ein Neues ausgetauscht, bitte neu laden und ersetzen.
Die Stylesheet wurde nun um die Angabe der Schriftfarbe erweitert und die Anzeige besser ausgerichtet.

Code:

.roomTitle
{
    font-size: 10px;
    color: #000000;
    vertical-align:text-top;
}

.ztemp
{
    font-size: 17px;
    color: #000000;
    padding-left: 0px;
    vertical-align:middle;

}

Einfach den Wert nach dem # mit der gewünschten Farbe austauschen.
Wichtig, nicht das ";" dabei entfernen

Um die Schriftgröße zu ändern jeweils die font-size abändern.

roomTitle ist der Raum Name und ztemp steht für die Tempertur

Nach abändern der CSS müsst ihr eure Config neu hochladen, damit die veränderte Datei neu hochgeladen wird.

Wie Dos schon richtig sagt musst du die ersten zwei stellen, in deinem Fall FF weglassen und mit einem # austauschen.


Eine Bitte an euch wenn ihr die Stylesheets abändert und sie sich in der App nicht aktualisiert!
Bitte überprüft eure Änderungen erstmal per direktlink im Browserfenster, ImperiHome arbeitet nämlich mit einem Cache , dieser zeigt trotz Änderung die alte Stylesheet an.
Deshalb ändert bitte erst einmal im Browserfenster alles soweit ab wie ihr es haben wollt und löscht dann anschließend den Cache von der App und eures Browsers im Tablet.
Die App benutzt nämlich den internen wie auch den Cache des Standartbrowsers in eurem Tablet/Handy.
Cache geht zu löschen indem ihr auf Einstellungen und alle installierten Apps geht.
Dort den Browser und danach auch Imperi Home auswählen und den Cache löschen.
Anschließend ImperiHome neustarten und das jeweilige Feld welches verändert wurde per Konfiguration ( lange gedrückt halten --> Konfiguration) neu laden.


Beste Grüße
Piezo

Ein ganz dickes DANKE :!: von mir.
Hab gerade eines testweise ausprobiert. Klappt prima. Musste zwar für das Tablet die Schriftgrösse noch anpassen und die Farbe (graues grau wie im Thread schon beschrieben), klappt aber alles ohne Probleme....

So, nun schaue ich mal, ob ich mein Mini-Tablet über IH so zum laufen bekomme, dass es nicht wie sonst immer in den standby geht - leider habe ich bis dato noch keinen Weg gefunden, trotz Motion Detector, Wake up lock und "hasse nicht gesehen", das Ding am laufen zu halten wie mein 12" Tablet.... da hatte ich aber IH nicht genutzt gehabt...

/edit

1 (kleine) Sache habe ich jedoch

Ich hätte gerne die Namen der Sensoren grösser, wobei, wenn ich das anpasse, eben die Temperatur nach rechts geschoben wird....auch tritt das auf, wenn der Sensornamen selbst recht lang ist wie Wohnzimmer z.B.
Passe ich hier die Temperatur in der Grösse an, wirkt das Ganze nun zu klein und auch nicht mittig.....

Ach ja, und wäre es möglich das rote Thermometersymbol aus IH einzubinden? Wäre super



[ATTACHMENT NOT FOUND]

Hey, habe dir für die Mobile Ansicht kurz einen kleinen Fix geschrieben den kannst du einfach über deinen Mobilordner spielen.

Für die Tablet Version lade ich dann nochmal alles zusammen neu hoch , wird heute aber warscheinlich nichts mehr ^^

[ATTACHMENT NOT FOUND]

Danke für die prompte Hilfe :!:

Jetzt passt alles.

Ein kleiner Fehlerteufel hat sich bei Sensor 7 und 8 eingeschlichen. Dort waren Codezeilen doppelt.... hab durch Kopieren eines and. Sensors das Ganze einfach angepasst.... :mrgreen:

Gerne,

meine Empfehlung ist aber auf jeden fall nochmal die geänderte Version aufzuspielen sobald ich sie online stelle, werde da auch nochmal die CSS etwas anpassen.
Mein Problem ist aktuell wirklich nur die mangelnde Zeit

Beste Grüße
Piezo

Das auf jeden Fall. 8-)