New FHEM Tablet UI

[bert]

Hier findest du entsprechende Hilfe. http://www.fhemwiki.de/wiki/FHEM_Tablet_UI Schau dir mal das "CSS" an und darin "narrow", auch ich kann kein HTML. Alles nur copy and paste, und lesen.
Auflösung 1024x768 10" Bildschirm.

[setstate]

Da musst du etwas an den CSS Klassen schrauben.
- lasse "cell" weg unter class="...", das erzwingt extra Platz noch oben und links
- füge "narrow" unter class="..." beim Switch und/oder beim Label ein, das spart Platz
Vllt. hilft schon ein Punkt oder nimm beide

[tomster]

Wegen (gefühlt) ewiger Absenz hier im Thread Mal eine kurze Nachfrage zum "Abfallkalender", bzw. der "warn-class":

Gibt es eigentlich schon jemanden, der ein Szenario am Laufen hat, bei dem neben dem Mülltonnen-Icon die Tage bis zur nächsten Leerung innerhalb der warn-class im roten Kreis anzeigt wird?

[ChrisK]

Hier im Thread wurde ein "responsive" Layout schon ein paar Mal angesprochen deswegen wollte ich mal nachfragen, ob sich jemand schon mal konkreter damit befasst hat?

Hier ist ein einfacher Ansatz, das gridster Layout automatisch je nach Display-Breite anzupassen.
Ich habe es mal auf die schnelle ausprobiert und mit folgendem css geht es einen Schritt in Richtung "Tablet UI mit 6 Spalten auch von Handy aus bedienbar":

Code Auswählen Erweitern

/*Just add this css for responsive gridster */
.gridster > * {
padding: 0;
width: 100% !important;
}
.gridster .gs-w {
list-style: none;
}
.gridster .gs-w[data-sizex="1"] {
width: 14%;/*8.34091%;*/
}
.gridster .gs-w[data-col="1"] {
left: 0%;
}
.gridster .gs-w[data-sizex="2"] {
width: 28%;/*17.43182%;*/
}
.gridster .gs-w[data-col="2"] {
left: 14.5%;/*9.09091%;*/
}
.gridster .gs-w[data-sizex="3"] {
width: 42%;/*26.52273%;*/
}
.gridster .gs-w[data-col="3"] {
left: 29%;/*18.18182%;*/
}
.gridster .gs-w[data-sizex="4"] {
width: 56%;/*35.61364%;*/
}
.gridster .gs-w[data-col="4"] {
left: 43.5%;/*27.27273%;*/
}
.gridster .gs-w[data-sizex="5"] {
width: 70%;/*44.70455%;*/
}
.gridster .gs-w[data-col="5"] {
left: 58%;/*36.36364%;*/
}
.gridster .gs-w[data-sizex="6"] {
width: 84;/*53.79545%;*/
}
.gridster .gs-w[data-col="6"] {
left: 62.5%;/*45.45455%;*/
}
.gridster .gs-w[data-sizex="7"] {
width: 98%;/*62.88636%;*/
}
.gridster .gs-w[data-col="7"] {
left: 77%;/*54.54545%;*/
}
.gridster .gs-w[data-sizex="8"] {
width: 100%;/*71.97727%;*/
}
.gridster .gs-w[data-col="8"] {
left: 91.5%;/*63.63636%;*/
}
.gridster .gs-w[data-sizex="9"] {
width: 100%;/*81.06818%;*/
}
.gridster .gs-w[data-col="9"] {
left: 72.72727%;
}
.gridster .gs-w[data-sizex="10"] {
width: 100%;/*90.15909%;*/
}
.gridster .gs-w[data-col="10"] {
left: 81.81818%;
}
.gridster .gs-w[data-sizex="11"] {
width: 100%;/*99.25%;*/
}
.gridster .gs-w[data-col="11"] {
left: 90.90909%;
}

/Work around for devices less than 768px/
@media screen and (max-width: 767px) {
.gridster > * {
padding: 0;
width: 100% !important;
}
.gridster .gs-w {
list-style: none;
}
.gridster .gs-w[data-sizex="1"] {
width: 100%!important;
}
.gridster .gs-w[data-col="1"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="2"] {
width: 100%!important;
}
.gridster .gs-w[data-col="2"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="3"] {
width: 100%!important;
}
.gridster .gs-w[data-col="3"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="4"] {
width: 100%!important;
}
.gridster .gs-w[data-col="4"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="5"] {
width: 100%!important;
}
.gridster .gs-w[data-col="5"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="6"] {
width: 100%!important;
}
.gridster .gs-w[data-col="6"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="7"] {
width: 100%!important;
}
.gridster .gs-w[data-col="7"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="8"] {
width: 100%!important;
}
.gridster .gs-w[data-col="8"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="9"] {
width: 100%!important;
}
.gridster .gs-w[data-col="9"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="10"] {
width: 100%!important;
}
.gridster .gs-w[data-col="10"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="11"] {
width: 100%!important;
}
.gridster .gs-w[data-col="11"] {
left: 0%!important;
}
}
Da muss noch einiges dran gemacht werden (im Moment werden ja nur die einzelnen gridster-Boxen dynamisch in der Breite angepasst). Ich wollte nur mal vorabfragen, ob nicht schon mal jemand was in diese Richtung gemacht hat.

[kleinerDrache]

Bei mir läuft der Müllkalender wie du es haben möchtest. Hab den Code aus einer der User-Demos übernommen und angepasst läuft gut.

[mc-hollin]

Wegen (gefühlt) ewiger Absenz hier im Thread Mal eine kurze Nachfrage zum "Abfallkalender", bzw. der "warn-class":

Gibt es eigentlich schon jemanden, der ein Szenario am Laufen hat, bei dem neben dem Mülltonnen-Icon die Tage bis zur nächsten Leerung innerhalb der warn-class im roten Kreis anzeigt wird?

Schau mal hier http://forum.fhem.de/index.php/topic,34233.msg296730.html#msg296730

[Gunther]

Danke für Eure Tipps bzgl. CSS. Habe einen ersten Wurf hinbekommen.

Ebenfalls danke für den Link zum Müllkalender Code. Klappt soweit gut.
Allerdings bekomme ich beim Reading vom Müllalert ein "" obwohl ich einen Mülltermin für morgen eingestellt habe. Auf der Übersichtsseite, wo die Mülltonne angezeigt wird, verändert sich der Button folglich nicht (sollte dieser blinken?). Mache ich etwas falsch, oder muss das System auf 18 Uhr springen um den Alert auszulösen?

[Nobby1805]

Vielleicht hätte ich ergänzen sollen: klappt aber trotzdem nicht

Ok, ich glaube ich habe es jetzt verstanden 
Als Trigger wird die Kombination von data-device und data-get (Default=STATE) verwendet ... jetzt ist beim HM-TC-IT-WM-W-EU der STATE aber CMDs_done und der wird eher selten geändert ... eigentlich müsste als data-device der Climate-Channel angegeben werden, aber das wird nicht akzeptiert.

Ich habe jetzt als Workaround data-get = "measured_temp" verwendet ... auch bei der Luftfeuchte

[Stril]

Hallo!

Hat von euch jemand TabletUI mit mod_proxy im Einsatz? Durch den dazwischengeschalteten Apache ist die Oberfläche richtig schön schnell, ABER:

Manchmal werden keine Befehle ausgeführt!

--> Ich drücke auf einen Swtich in der TabletUI und sehe aber im FHEM-Log, dass nichts ausgeführt wird.

Das Problem habe ich bisher nur bei "structures". Lasse ich mod_proxy weg, funktionieren sie wieder. Problem: _manchmal_ funktioniert es, _manchmal_ nicht.

Kennt ihr das Problem?

Gruß
Phil

[tomster]

Schau mal hier http://forum.fhem.de/index.php/topic,34233.msg296730.html#msg296730

Jetzt wo Du's schreibst fällt's mir wieder ein...
Ich bin daran verzweifelt, Phils/ Dein Script von einem Google Kalender auf das im Wiki vorgestellte, FHEM-eigene Müllscript umzuschreiben. Schätze, ich hab dafür code-seitig den Ar... zu weit unten. Vielleicht schau ich dann doch lieber, dass ich unseren Abfall-Entsorger dazu überrede eine .ics-Datei bereitzustellen

[viegener]

Vermutlich bin ich aber nicht der einzige, der sich immer wieder wünscht wiederverwendbare Gruppen von Widgets zu haben, aber jeweils mit unterschiedlichen Devicenamen (und anderen Teilen). Oder die einfach nur auf verschiedenen Seiten auftauchen.
Beispiele:
- Sonos-devices bestehend aus unzähligen widgets
- Rolladensteuerung bestehend aus 3 Buttons einem Slider und einem Label
- Thermostate bei denen Temperatur und Luftfeuchtigkeit gross angezeigt werden
- Wetteranzeige
...

Da ich aber keinen getrennten Server vor mein UI setzen will, habe ich mir überlegt, ob das nicht innerhalb von FHEM mit einem modifizierten HTTPSrv gehen könnte, bei dem man Includes und Ersetzungen hat.

Meine Vorstellung:
- Wenn ich an der Gestaltung meiner Gruppen (z.B. Sonos-Anzeige) etwas ändere möchte ich nur an einer Stelle eingreifen.
- Keine Änderung am FTUI selbst (also am Frontend)

Später sollte es vielleicht möglich sein, das UI dynamisch zusammenzubauen, in dem man eine grosse Seite für Mobildevices in mehrere kleine Pagetabs aufteilt oder je nach Benutzern umgruppiert oder oder oder...

Da ich wg. Erkältung sowieso im Bett lag, habe ich gestern mal angefangen etwas zu bauen, vielleicht gibt es ja Interesse?

Johannes

[Stril]

Hallo!

Nutzt von euch jemand Tablet-UI mit vorgeschaltetem Apache (mod_proxy)?
Hier scheint das Longpoll nicht zu funktionieren - zumindest aktualisiert sich die Oberfläche nicht, wenn sich etwas ändert.

Gibt es da irgendeinen Trick?

Gruß
Phil

[mrbreil]

Ich habe einen Vorschlag.

Dieser Thread ist jetzt ganze 178 Seiten lang, da blickt doch keiner mehr durch, auch nicht mit der Suche.
Es ist für Tablet UI Anfänger wie mich wirklich schwer in diesem Thread irgendwie die Übersicht zu behalten und für Problemchen, die andere vielleicht schon gelöst haben, eine Lösung zu finden.
Warum nicht noch ein Unterforum angelegt?
In FHEM Forum » FHEM » Frontends » tablet ui  könnte man diesen Thread anpinnen und auch einen neuen erstellen, der nur noch eine Art Changelog ist. Jeder könnte seine Problemchen in dieser Sektion posten. So könnte man viel besser auf die einzelnen Probleme eingehen und vor allem würde es der Übersichtlichkeit dienen. Bereits besprochene Lösungen könnten viel schneller und einfacher gefunden werden.
Es müsste nicht immer wieder das gleiche auseinanderklamüsern werden, ist das nicht das Ziel dieses Forums?
Das zu meiner Idee  .

[ChrisK]

Das zu meiner Idee  .

Finde die Idee sehr gut, genau das habe ich mir in den letzten Wochen auch ein paar Mal gedacht.
Im Wiki findet man zwar einige Infos wieder, aber wenn es fragen gibt, dann wird das in diesem Thread schon unübersichtlich.

[swinni]

Gute Idee!
Und falls Unterstützung benötigt wird, bspw. in Form eines Moderators, gebt bescheid.

Grüße,
Sven