New FHEM Tablet UI

[setstate]

Die offiziell unterstütze Parameternutzung wäre auch so gewesen:

Code Auswählen Erweitern


<div data-type="push"
                   data-cmd="attr"
                   data-device="Heizung.Regler.HM.Wohnzimmer"
                   data-set="heizung_hightemp"
                   data-set-on="18.0">
                          </div>


Dann klappt es.

Was zur Zeit nicht klappt ist die Nutzung von: data-fhem-cmd.
Das benutze ich bei mir nicht und wurde deswegen von mir übersehen.
Wird aber gleich repariert ...

[setstate]

Hallo zusammen,
habe gerade das slider widget eingebaut; funktioniert einwandfrei!

Leider gehen aber meine pushbuttons nicht mehr?

Code Auswählen Erweitern


<div data-type="swiper" data-height="130px" data-width="300px" class="top-space-1x">
        <ul>
            <li>
               <div class="left">
                  <div data-type="symbol" data-device="Waschen_30" data-get-on='["on","off"]' data-icons='["oa-scene_washing_machine shake shake-constant shake-little","oa-scene_washing_machine"]' data-on-colors='["green","red"]'> </div>
                  <div data-type="push" data-icon="fa-play" data-cmd="set Waschen_30 on-for-timer 6840"></div>
                     jetzt 30°:&nbsp;
                  </div>
                </li>
</ul>
    </div>
</li>


data-cmd ist wirklich nur für das Command wie 'set', 'setstate', 'setreading' nicht für die ganze Commandzeile:

So würde es funktionieren:

Code Auswählen Erweitern

<div data-type="push" data-icon="fa-play" data-device="Waschen_30" data-set-on="on-for-timer 6840"></div>

[fhem-challenge]

Die offiziell unterstütze Parameternutzung wäre auch so gewesen:

Code Auswählen Erweitern


<div data-type="push"
                   data-cmd="attr"
                   data-device="Heizung.Regler.HM.Wohnzimmer"
                   data-set="heizung_hightemp"
                   data-set-on="18.0">
                          </div>


Dann klappt es.

Was zur Zeit nicht klappt ist die Nutzung von: data-fhem-cmd.
Das benutze ich bei mir nicht und wurde deswegen von mir übersehen.
Wird aber gleich repariert ...

Prima: mit dem Update heute (jetzt) funktioniert es. Das komplette Command:

data-cmd="attr Heizung.Regler.HM.Wohnzimmer heizung_hightemp 16.0

... läuft wieder.


Viele Grüße!

Andreas

[MichaelT]

bei mir hat das Weglassen einiger "center" sowie das Weglassen der "left" Classes geholfen.

Vorher (beispielhaft): <div class="cell left ">

Nachher: <div class="cell"> ... damit war die Formatierung (zumindest bei mir) wieder korrekt.

Hallo fhem-challenge,

hilft leider nicht. Es sieht fast so aus, als wenn irgendetwas breiter geworden ist und somit ein Umbruch ins Layout kommt.
Komischer Weise ist die Darstellung im Chrome (PC) gegenüber Chrome (android) immer noch korrekt.

Ist es möglich, das Layout von "vorher" anders zu erreichen?
Ich hab's mit dem Layout noch nicht so richtig verstanden.

[tomster]

Hier eine Demo-Page zum Widget:  http://knowthelist.github.io/fhem/tablet/demo_range.html

Schaut echt fein aus! Man kann aber noch keine Skaleneinteilung festlegen, oder?
Vielleicht hab ich's auch einfach noch nicht gefunden...

[ChrisK]

Ist es möglich, das Layout von "vorher" anders zu erreichen?

Bei mir war es so, dass das wiederherstellen der css-Datei gereicht hat.
In dem Ordner restoreDir/DATUM/www/tablet/css (innerhalb des fhem-Installationsordners) findest Du das Backup von den Dateien vor dem Update.
Ich habe mir bisher nicht die Mühe gemacht, die alte mit der neuen fhem-tablet-ui.css zu vergleichen, weil ich noch nicht dazu kam. Wenn Du aber die alte Datei nimmst und die neue überschreibst, hast Du css-Technisch den Stand von vor dem Update. Beim nächsten Update wird die dann natürlich wieder überschrieben.

@setstate:
Evtl. wäre es besser alte css-Klassen nicht einfach zu streichen bzw. anzupassen, da einige wohl alles mit den bestehenden Klassen ausgerichtet/optimiert haben. Das war das erste Mal, dass mir das aufgefallen ist, und es war vielleicht ein Ausnahmefall. Ich habe aber noch nicht so viele Updates hinter mir

[SvenJust]

Hallo,

eigene Einstellungen am css gehören in eine eigene Datei. FTUI hat dafür die folgende Zeile in der Datei index-example.html.

Code Auswählen Erweitern

    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />

Diese Zeile in Head der hmtl-Dateien hinterlegen und die eigenen Änderungen am css dann in der Datei fhem-tablet-ui-user.css schreiben. So bleiben die Änderungen beim Update erhalten.

VG
Sven

[jehu]

Hallo Zusammen,

Habt ihr zufällig eine Idee, ob man so eine Art Codeschloss über das UI abbilden kann?
Ehrlich gesagt habe ich aber auch noch keine Idee, wie der Backend dazu in FHEM aussehen soll.
Ich sammel gerade Ideen. Danke.

Diese Idee würde ich gern nochmal aufgreifen. Ich würde so ein Codeschloss-Widget auch gern zur Unscharfschaltung einer Alarmanlage nutzen.
D.h. wenn jemand in den den gesicherten Bereich kommt, ertönt ein Signal und auf dem Tablet und es könnte per popup-widget ein Codeschloss eingeblendet werden.

Leider fehlt mir absolut das Know-How ein Widget zu erstellen. Idealerweise würde man in Zusammenarbeit mit dem Residentsmodul ein PIN pro Bewohner hinterlegen und mit dem Codschloss-Widget verarbeiten. Aber auch die einfachere Variante mit einem Code auf einem Dummydevice wäre sehr hilfreich.

Hat jemand eine Idee dazu wie man das lösen könnte ?

Schöne Grüße
Jens

[Skusi]

Hallo,
na da hätte ich mal früher hier lesen sollen.
Ich habe nun auch etliche Stunden damit zugebracht mein Layout wieder herzustellen. Warum wurden den die css-Classen verändert ?
Ist das auch irgendwo dokumentiert, damit man das nächste mal vorher weiß was so ein Update für Arbeit machen kann ?

Nebei nochmal ein Push Problem:

Code Auswählen Erweitern

<div data-type="push" data-device="Spion" data-cmd="get" data-set-on="image" data-icon="fa-camera"
data-off-color="#FFFFFF" data-doubleclick="0" data-on-color="#00FF00" style="font-size:40px" class="left"> </div>

Warum setzt dieser Button zwar laut Einblendung richtigerweise ein "get Spion image" ab, aber es kommt in fhem nicht an !
Der Event Monitor zeigt mir den Befehls Empfang nicht an. Und die "Spion-Webcam" reagiert natürlich auch nicht. Wenn ich in fhem dann "get Spion image" absetzte ist alles chick !

Hängt das auch mit dem update der push.js zusammen ?

---Skusi

[setstate]

Hallo fhem-challenge,

hilft leider nicht. Es sieht fast so aus, als wenn irgendetwas breiter geworden ist und somit ein Umbruch ins Layout kommt.
Komischer Weise ist die Darstellung im Chrome (PC) gegenüber Chrome (android) immer noch korrekt.

Ist es möglich, das Layout von "vorher" anders zu erreichen?
Ich hab's mit dem Layout noch nicht so richtig verstanden.

Schick mir mal den <li> Teil der nicht passt und Deine Werte bei widget_base_width und widget_base_height, dann kann ich das bei mir nachstellen.

Die alte Version vom CSS zurückspielen ist keine gute Lösung, besser ist, die zu viel benutzen Klassen zu entrümpeln.

[ChrisK]

Hallo,

eigene Einstellungen am css gehören in eine eigene Datei. FTUI hat dafür die folgende Zeile in der Datei index-example.html.

Code Auswählen Erweitern

    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />

Diese Zeile in Head der hmtl-Dateien hinterlegen und die eigenen Änderungen am css dann in der Datei fhem-tablet-ui-user.css schreiben. So bleiben die Änderungen beim Update erhalten.

VG
Sven

Da bin ich ganz bei Dir und so mache ich das auch, bloß dass in diesem Fall nicht eigene Änderungen sondern css-Klasse geändert wurden, die vorher im Standard drin waren:

Ich glaube, du musst statt big jetzt large nehmen. Das habe ich vertauscht, damit es zu der Anstufung bei den Fonts passt. Die nutzen die gleichen Begriffe.

class="...large..."

[setstate]

Nebei nochmal ein Push Problem:

Code Auswählen Erweitern

<div data-type="push" data-device="Spion" data-cmd="get" data-set-on="image" data-icon="fa-camera"
data-off-color="#FFFFFF" data-doubleclick="0" data-on-color="#00FF00" style="font-size:40px" class="left"> </div>

Warum setzt dieser Button zwar laut Einblendung richtigerweise ein "get Spion image" ab, aber es kommt in fhem nicht an !
Der Event Monitor zeigt mir den Befehls Empfang nicht an. Und die "Spion-Webcam" reagiert natürlich auch nicht. Wenn ich in fhem dann "get Spion image" absetzte ist alles chick !

Hängt das auch mit dem update der push.js zusammen ?

---Skusi

Kommt bei mir im FHEM log an:

2015.12.09 17:04:06 4: HTTP FHEMWEB:xxx.xxx.xxx.xxx:xxxxx GET /fhem/?cmd=get+Spion++image&XHR=1

Stört evtl. das doppelte Leerzeichen zwischen Spion und image?

send to FHEM: get Spion  image

[Skusi]

Kommt bei mir im FHEM log an:

2015.12.09 17:04:06 4: HTTP FHEMWEB:xxx.xxx.xxx.xxx:xxxxx GET /fhem/?cmd=get+Spion++image&XHR=1

Bei mir ist nix dergleichen zu verzeichnen. Woran kann das nun liegen ? Alles andere funktioniert ja. Also ein globales Problem schließe ich aus.

Ist die definition also so korrekt !?

Stört evtl. das doppelte Leerzeichen zwischen Spion und image?

Ich denke schon das das stört. Aber wo kommt das nun wieder her. In meiner def Zeile ist doch auch keins versteckt !

[MichaelT]

Schick mir mal den <li> Teil der nicht passt und Deine Werte bei widget_base_width und widget_base_height, dann kann ich das bei mir nachstellen.

Die alte Version vom CSS zurückspielen ist keine gute Lösung, besser ist, die zu viel benutzen Klassen zu entrümpeln.

Hallo Mario,

anbei meine reduzierte index.html. Hiermit ist mein Problem auch auf dem Chrome (PC) sichtbar.
Habe ...user.css auskommentiert.

Gruß Michael

[netbus]

Ich habe leider heute auch upgedatet.
Seitdem sind ein paar Icons leer.
Wie kann man das beheben?