New FHEM Tablet UI

setstate · 06 März 2015, 19:11:46

Zitat von: Brockmann am 06 März 2015, 09:02:39
Beim longpoll ist mir aufgefallen, dass der längst nicht so zügig reagiert wie bei der FHEM-Web-GUI, wo die Änderungen ja praktisch sofort sichtbar werden. Nach ein paar Tests ist es bei mir so, dass die Werte real zweimal pro Minute aktualisiert werden (also exakt alle 30 Sekunden). Ist das so vorgesehen oder läuft da bei mir etwas schief?

Ein 30 Sekunden Refresh ist definitiv shortpoll!
Mit longpoll sollten Änderungen in Echtzeit angezeigt werden.
Hast du longpoll in der index.html aktiviert? Das ist per default noch aus.

Code Auswählen

<meta name="longpoll" content="1">

Dann sieht man auch die entsprechenden Logs in der Script Console zappeln.

Also
logpoll an -> einzelne Änderungen in Echtzeit + aller 15 Minuten ein voller Refresh zur Sicherheit
logpoll aus -> aller 30 Sekunden Minuten ein voller Refresh

Brockmann · 06 März 2015, 23:19:41

Zitat von: setstate am 06 März 2015, 19:11:46
Hast du longpoll in der index.html aktiviert? Das ist per default noch aus.

Das hatte ich so nicht verstanden, ich dachte, das wäre standardmäßig aktiviert und man könnte es per meta deaktivieren. Jetzt klappts dann auch.

Gridster muss ich mir noch mal in Ruhe anschauen. Drag&Drop brauche ich nicht. Ich wollte nur wissen, ob es funktionieren sollte. Also ob man ein Widget am Header erfassen und dann seine Position verändern kann. Bei mir flutschen die einfach immer wieder an die alte Stelle zurück.
Mehr stört mich aber, dass ich momentan das Layout, wie ich es mir vorstelle, nicht realisieren kann. Ab einem bestimmten Punkt werden die Widgets scheinbar willkürlich platziert, obwohl ich mich exakt an die Grid-Systematik halte. Irgendeine Logik kann ich darin noch nicht erkennen. Ein ganz simples Beispiel, was bei mir nicht geht, hatte ich ja schon geliefert.

Vielleicht gewinnen wir gemeinsam noch ein paar Erkenntnisse zu dem Thema. Nur im Moment ist das für mich ein ziemlicher Showstopper.

Mitch · 06 März 2015, 23:43:28

So, erstmal vielen Dank für die geniale Oberfläche!!

Hier mal ein Bild, wie es im Moment noch aussieht.
Es fehlt mir noch die Unterschrift der Fenster, aber die bekomme ich im Moment nicht hin (sonst sind die icons nicht mehr nebeneinander).

mit der Grid-Systematik bin ich auch erst verzweifelt. Habe dann auf der Gridster Seite etwas gelesen und es mir einfach mal aufgezeichnet

Danach war es einfach und logisch

setstate · 07 März 2015, 10:07:35

Deine Oberfläche sieht ja fantastisch aus. Cool zu sehen, was andere für Ideen dazu haben und wie unterschiedlich die Sortierung sein kann.
Wie man noch etwas mehr Text einfügen, schaue ich mir an. Da ist noch etwas Bedarf an erweiterten Styles.

Bei Gridster habe ich feststellen können, wenn man leere Elemente vermeidet und es keine einzige Überlappung gibt, hält sich das Grid an das gewünschte Layout.

Brockmann · 07 März 2015, 13:51:36

Zitat von: Mitch am 06 März 2015, 23:43:28
mit der Grid-Systematik bin ich auch erst verzweifelt. Habe dann auf der Gridster Seite etwas gelesen und es mir einfach mal aufgezeichnet
Danach war es einfach und logisch

Magst Du vielleicht die dazugehörende index.html hier posten (evtl. mit ausgeXXXten Details)?
Dann könnte man sich das mal genau anschauen und vielleicht verstehe ich dann, was ich falsch mache...

Mitch · 07 März 2015, 16:32:00

Klar:

Code Auswählen

<html>
<title>FHEM</title>
<head>
	<!-- 
	 /* FHEM tablet ui */
	 /*
	 * Just another dashboard for FHEM
	 *
	 * Version: 1.1.0
	 * Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
	 * URL: https://github.com/knowthelist/fhem-tablet-ui
	 *
	 * Copyright (c) 2015 Mario Stephan <mstephan@shared-files.de>
	 * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
	 *
	 * - create a new folder named 'tablet' in /<fhem-path>/www
	 * - copy all files incl. sub folders into /<fhem-path>/www/tablet
	 * - add 'define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
	 * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
	 */
	-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="widget_base_width" content="125">
	<meta name="widget_base_height" content="122">
        <meta name="longpoll" content="1">
	
	<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
	
	<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
	<script type="text/javascript" src="/fhem/pgm2/jquery.knob.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>
	
	<!-- Enable this lines for usage with WebViewControl -->
	<script type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script>
	<script type="text/javascript" src="/fhem/js/webviewcontrol.js"></script>
	<script type="text/javascript">var wvcDevices = {'12345': 'Nexus'}; var wvcUserCssFile="webviewcontrol.css"</script>
	<!-- End for WebViewControl -->
</head>
<body>

<div class="gridster">
<ul>
    
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
        <header>HOMESTATUS</header>
        <div type="homestatus" device='homestatus' class="" ></div>
</li>    
    
<li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
        <header>KEYMATIC</header>
          <div class="center">
                <div type="switch" device="CUL_HM_HM_SEC_KEY_23DB96" data-on="lock" data-off="unlock" data-icon="fa-lock" class="cell"></div>
                <div type="label" device="CUL_HM_HM_SEC_KEY_23DB96" class="cell" ></div>
          </div>        
</li>

<li data-row="2" data-col="3" data-sizex="1" data-sizey="1">
        <header>GAST</header>
            <div class="center">
                <div type="switch" device="Gast.Dummy" data-on="Anwesend" data-off="Abwesend" data-icon="fa-user" class="cell" ></div>
            </div>
</li>


<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">
        <header>MUELL</header>
            <div class="center">
                <div type="label" device="Abfallkalender" data-icon="" class="cell" ></div>
            </div>
</li>    

<li data-row="2" data-col="4" data-sizex="1" data-sizey="1">
        <header>ROLLO</header>
           <div class="center">
                <div type="switch" device="Rollo.Alle" data-on="Zu" data-off="Auf" data-icon="fa-bars" class="cell" ></div> 
           </div>
</li>

<li data-row="1" data-col="5" data-sizex="1" data-sizey="1">
        <header>HEIZUNG</header>
           <div class="center">
             <div type="switch" device="HCAutomatik" data-on="on" data-off="off" data-icon="fa-fire" class="cell" ></div>
           </div>
</li>

<li data-row="2" data-col="5" data-sizex="1" data-sizey="1">
        <header>ALARM</header>
           <div type="switch" device="Alarmanlage" data-on="scharf" data-off="unscharf" data-icon="fa-exclamation-triangle"></div>
</li>

<li data-row="1" data-col="7" data-sizex="1" data-sizey="2">
        <header>AUSSEN</header>
           <div class="center">
             <div type="label" device="Wetterstation" data-get="temperature" data-unit="%B0C%0A" class="cell big"></div>
             <div type="label" class="cell">Temperatur</div>
             <div type="label" device="Wetterstation" data-get="humidity" data-unit="%" class="cell big"></div>
             <div type="label" class="cell">Luftfeuchte</div>
             <div type="label" device="Wetterstation" data-get="pressure" data-unit="hPa" data-fix="0" class="cell big"></div>
             <div type="label" class="cell">Luftdruck</div>
           </div>
</li>

<li data-row="1" data-col="6" data-sizex="1" data-sizey="2">
        <header>FLUR</header>
           <div class="center">
             <div type="switch" device="CUL_HM_FlurOben" class="cell"></div>
             <div type="label" class="cell">oben</div>
             <div type="switch" device="CUL_HM_FlurUnten" class="cell"></div>
             <div type="label" class="cell">unten</div>
           </div>
</li>

<li data-row="3" data-col="1" data-sizex="2" data-sizey="2">
        <header>WOHNZIMMER</header>
        <div class="center">
                <div type="thermostat" device="HZ_Wohnzimmer_Climate" data-get="desired-temp" data-temp="measured-temp" class="cell" ></div>
                <div type="label" device="HZ_Wohnzimmer_Climate" data-get="humidity" data-unit="%" class="cell"></div>
                <div type="contact" device="Fenster_Terrasse" class="cell"></div>
                <div type="contact" device="Fenster_Wohnzimmer_Ost " class="cell"></div>
                <div type="contact" device="Fenster_Kueche" class="cell"></div>
        </div>
</li>

<li data-row="3" data-col="3" data-sizex="2" data-sizey="2">
        <header>WOHNZIMMER</header>
            <div class="left">
                <div type="switch" device="FS20_Hydra" class="cell"></div>
                <div type="label" class="cell">Hydra</div>
                <div type="switch" device="FS20_Trompete" class="cell"></div>
                <div type="label" class="cell">Trompete</div>
            </div>
            <div class="right">
                <div type="switch" device="FBDECT_Barlicht" class="cell"></div>
                <div type="label" class="cell">Bar</div>
                <div type="switch" device="FS20_Spot_Kueche" class="cell"></div>
                <div type="label" class="cell">Spot</div>
            </div>
</li>

<li data-row="3" data-col="5" data-sizex="2" data-sizey="2">
        <header>FENSTER</header>
                <div type="contact" device="Fenster_Klo" class="cell"></div>
                <div type="contact" device="Fenster_Buero" class="cell"></div>
                <div type="contact" device="Fenster_Flur_oben" class="cell"></div>
                <div type="contact" device="Fenster_Bad" class="cell"></div>
                <div type="contact" device="Fenster_Leoni" class="cell"></div>
                <div type="contact" device="Fenster_Carlotta" class="cell"></div>            
                <div type="contact" device="CUL_FHTTK_Schlafzimmer" class="cell"></div>
                <div type="contact" device="CUL_FHTTK_Hobbyraum_links" class="cell"></div>
                <div type="contact" device="CUL_FHTTK_Hobbyraum_rechts" class="cell"></div>
                <div type="contact" device="CUL_FHTTK_Kellerflur" class="cell"></div>
                <div type="contact" device="CUL_FHTTK_Waschkeller" class="cell"></div>
                <div type="contact" device="CUL_FHTTK_Apfelbaum" class="cell"></div>
</li>

<li data-row="3" data-col="7" data-sizex="1" data-sizey="2">
        <header>GARTEN</header>
           <div class="center">
                <div type="switch" device="CUL_HM_Gartenlicht" class="cell"></div>
                <div type="label" class="cell">Licht</div>
                <div type="switch" device="abc" data-on="Raus" data-off="Rein" data-icon="fa-sun-o" class="cell"></div>
                <div type="label" class="cell">Markise</div>
           </div>
</li>

</ul>
</div>
</body>
</html>

nesges · 07 März 2015, 19:22:45

fhem-tablet-ui.js, Zeile 23f:

Code Auswählen

wx = 1*$("meta[name='widget_base_width']").attr("content");
wy = 1*$("meta[name='widget_base_height']").attr("content");

Die Multiplikation mit 1 macht aus den Strings(!) numerische Werte und dann funktioniert auch das Verschieben und Anordnen im Grid.

wex_storm · 07 März 2015, 22:57:32

Hallo,

gefällt mir auch sehr gut. Ich fänd einige Änderungen wiklich wichtig:
- Automatische Anordnung der Element (á la isotope http://isotope.metafizzy.co/)
- Konfiguration über eine json-Datei (habe das mal mit Bootstrap V3 und meinen im Moment NUR Steckdosen probiert)
- Keine Verwendung von invaliden html-Attributen, dafür eher custom-data-Attribute (Beispiel <div type="switch"> -> <div data-type="switch">), damit das HTML valide bleibt

Vielleicht forke ich mal Dein Projekt und mache nen merge-Request.

Gruß

Björn

setstate · 07 März 2015, 23:36:15

Zitat von: nesges am 07 März 2015, 19:22:45
fhem-tablet-ui.js, Zeile 23f:
Code Auswählen Erweitern
wx = 1*$("meta[name='widget_base_width']").attr("content"); wy = 1*$("meta[name='widget_base_height']").attr("content");

Die Multiplikation mit 1 macht aus den Strings(!) numerische Werte und dann funktioniert auch das Verschieben und Anordnen im Grid.

Genial und so einfach gelöst. Wieder das leidige Thema Daten Typ ...
Hab's übernommen.
Vielen Dank für deine Unterstützung

setstate · 08 März 2015, 00:27:10

Zitat von: wex_storm am 07 März 2015, 22:57:32
- Automatische Anordnung der Element (á la isotope http://isotope.metafizzy.co/)
- Konfiguration über eine json-Datei (habe das mal mit Bootstrap V3 und meinen im Moment NUR Steckdosen probiert)
- Keine Verwendung von invaliden html-Attributen, dafür eher custom-data-Attribute (Beispiel <div type="switch"> -> <div data-type="switch">), damit das HTML valide bleibt

Hallo Björn,
willkommen im Thread.
- Isotope sieht sehr interessant aus. Ich kann mir vorstellen, damit könnte man gut Tabs realisieren "Oben", "Unten", "Garten" und die Elemente würden entsprechend angezeigt. Mit Gridster Namespaces könnte man das aber auch realisieren. Denkst du eher an eine eigene Erweiterung aufbauend auf Gridster oder auf ein Umswitchen auf Isotope als Layout Basis?
- Konfiguration über eine json-Datei, klingt auch interessant, besonders für User, die mit HTML nicht so viel am Hut haben. Mein Ziel bei diesem Projekt ist die Einfachheit und das man mit wenig Aufwand schnell zum einem passablen Ergebnis kommt. KISS-Prinzip eben. Deshalb sollte jegliche Konfiguration selbsterklärend und minimalistisch bleiben ...
- html-Attribute: Das habe ich befürchtet, dass das nicht so ideal ist, einfach eigene Attribute zu benutzen. Bis jetzt hat sich aber noch kein Browser beschwert. Wo könnte das Probleme machen? Ich denke aber, jetzt alles zu ändern, wäre machbar. Sooo viel wäre nicht zu korrigieren, wenn man das gerade ziehen möchte.

wex_storm · 08 März 2015, 01:08:25

Hallo zurück,

ich habe gerade mal zum Spaß ein wenig rumporgrammiert.
Wie gesagt, der Stil gefällt mir super und ich denke, das könnte die Grundlage für ein super geniales Frontend werden.
Was ich getan habe:
- HTML korrigeit/aufgeräumt
- Laden der Daten aus eine Konfigurationsdatai (JSON)
- Anordnung der "Views" (Räume usw.) mit masonry (ist wie Isotope)

Dadurch kann man das Frontend sogar auf Telefonen usw. nutzen.

Kannst es Dir ja mal gerne ansehen. Die Konfiguration in der JSON-Datei sollte sich fast selbst erklären.
https://github.com/wexstorm/fhem-tablet-ui

Noch ein paar Anmerkungen:
- Es sollte einen Modus wie "Aus FHEM laden" geben, so dass das Erstellen einer JSON-Konfiguration unnötig ist
- Bei mir werden momentan die Stati nicht abgefragt, d.h. wenn ich die Seite lade, dann sind alle Lampen aus (Obwohl der Status in FHEM korrekt ist)
- Die einzelnen Views sollten (wie bei Bootstrap) Größen haben, die sich voneinander ableiten (z.B. 100, 200, 300 px), so dass masonry besser funktioniert (wird aber denke ich schwer)

Ansonsten höchsten Respekt nochmal meinerseits! Wirklich ein tolles Projekt und sieht dazu noch gut aus. Biete hiermit gerne meine Unterstützung an

Gruß und (jetzt endlich) gute Nacht

Björn

miot · 08 März 2015, 12:34:33

Hallo Bjoern,

die Idee die einzelnen Grids mit masonry der auf dem jeweiligen Device zur Verfuegung stehenden Groesse dynamisch anzuordnen finde ich persoenlich enorm reizvoll hat jedoch - nach einer kurzen vergleichenden Demo bei meiner Frau - dort kein Verstaendnis gefunden. Meine Frau bevorzugt die statische Variante alleine schon deswegen, weil dann die Icons fuer beispielsweise das Wohnzimmerlicht immer an derselben Stelle zu finden ist.

Nach einiger Zeit wird jeder Nutzer, der ueber die UI Funktionen schaltet, nicht mehr genau hinsehen und schon gar nicht lesen wollen, was fuer ein Schalter das ist. Erfahrungsgemaess sieht das in der Praxis so aus: Ein kurzer Blick, der zweite von links oben ist Wohnzimmer Licht. Klick. Nichts tut sich... -> klick, klick, klick, geht nicht -> Mist -> Schatz: Die Fernbedienung funktioniert nicht mehr. Spaetestens beim dritten Mal in der Art kann ich das Projekt komplett vergessen.

Sollte die Option mit masonry fix eingebaut werden faende ich es gut, wenn man zwischen beide Optionen mittels CFG-Option waehlen koennte sofern das technisch umsetzbar ist.

Meine Familie ist sicher kein Masstab fuer die Allgemeinheit aber ich faende es auch nicht gut, wenn meine Frau meine Klamotten in meinem Schrank umherraeumen wuerde und ich jeden Morgen alles erst durchsuchen muesste.

Ja es sieht wirklich gut aus aber es ist und bleibt eine Spielerei.

Gruss
Michael

setstate · 08 März 2015, 13:32:48

Hallo Björn, hallo Michael,

gesten habe ich mich auch noch die wexstorm Version angesehen und bin geteilter Meinung. Der dynamische Ansatz ist schon interessant und flexibler, aber das Ergebnis muss 100% immer den Erwartungen entsprechen. Also festgelegte Größe und Position der Boxen und Inhalt und Lage der Elemente ist sehr wichtig, wie Michael auch schon schreibt. Auch die Elemente direkt aus FHEM zu holen klingt verführerisch, aber bei den meisten wäre das einfach zuviel. Was auf dem Dashboard dann letztendlich angezeigt werden soll, ist nur ein Bruchteil. Also sortier man wieder aus.
Das JSON File habe ich mir auch angesehen, aber als Config-File finde ich das ungeeignet. Zur Datenübertragung und zum Speichern ist JSON ideal, aber ich möchte keinem User zumuten, sein Layout in dieser Art definieren zu müssen. Dann wäre der nächste folgerichtige Schritt, einen Layout Designer anzubieten, was aber viel Aufwand bedeuten würde. Ich will mich derzeit erst einmal auf die Elemente konzentrieren. Ein Dimmer-Slider für 0-100% + On/Off fehlt noch, den will ich auf Grundlage der Pushbuttons bauen, aber zusätzlich mit up/down slide Feature.
Aber jetzt geht's erst einmal in die Sonne ...

Mitch · 08 März 2015, 13:35:29

Erstmal und nochmal vielen Dank für die tolle "GUI".
Ich finde es auch toll, dass hier noch andere aufspringen und optimieren/verbessern wollen.

Aber bitte, macht es nicht komplexer und komplizierter.
Ich habe endlich eine Oberfläche gefunden, die genau das macht, was ich schon länger suche.
Sehr einfach und doch alles drin, was man (ich) brauche.
Gerade die Einfachheit macht doch die Oberfläche aus.

Klar, ein paar Verbesserungen und Änderungen, immer gerne.
Aber dynamisch, drag and drop und Co braucht doch kein Mensch (meine Meinung).

Für was ist die GUI gedacht? Anzeige auf einem Tablet und die Möglichkeit, ein paar Schalter zu drücken.
Ich denke nicht, dass jemand sein komplettes fhem darüber steuern möchte. Dafür gibt es genügend andere Dinge.

Wie gesagt, ein paar Feinheiten noch, wie z.B. die Änderung eines Icons, wenn geschalten oder der state einen bestimmten Wert, ansonsten bitte so lassen.

Man könnte ja einfach ein zweites Projekt kreieren, oder eine Art Pro Version?

Jewo · 08 März 2015, 14:01:23

Hallo,

funktioniert alles prima, Frau ist auch begeistert.

Was mir noch fehlt, ist die Anzeige der Termine aus dem Calendar Modul (Google-Kalender).
Diese möchte ich gerne in einer Box darstellen:

08.03.15 08:45 Termin 1
09.03.15 20:00 Termin 2
10.03.15 20:00 usw.
12.03.15 13:00 usw.

New FHEM Tablet UI

wex_storm

wex_storm

Jewo