New FHEM Tablet UI

setstate · 27 April 2015, 20:20:39

Zitat von: rizo am 27 April 2015, 20:02:27
Klasse danke für die schnelle Antwort.

Nur weiß ich nicht wie es genau geht.

Also das Abfragen schon, nur hält WVC den Wert nur aktuell wenn ich als url beispiel: 192.168.10.1:8083/fhem nutze. Ich möchte aber gerne
192.168.10.1:8083/fhem/tablet nutzen.

Ne Idee?

so könnte man das rein mit Text machen, ohne Icons

Code Auswählen


    <div data-type="label" data-device='Tablet'  data-get='powerLevel'
            data-limits='[0,50,99]'
            data-colors='["#cc7733","#AA6900","#66cc33"]'
            class="cell big"></div>
    <div data-type="label" class="cell">Tablet Power</div>

Das Tablet UI muss dann im WVC laufen und dieses eingebunden sein:

Code Auswählen

 
   <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': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>

stromer-12 · 27 April 2015, 20:30:39

Zitat von: rizo am 27 April 2015, 20:02:27
Nur weiß ich nicht wie es genau geht.

Also das Abfragen schon, nur hält WVC den Wert nur aktuell wenn ich als url beispiel: 192.168.10.1:8083/fhem nutze. Ich möchte aber gerne
192.168.10.1:8083/fhem/tablet nutzen.

Ne Idee?

Du musst in deiner html-Datei am Anfang den Eintrag zum WVC den Kommentar entfernen und deine ID anpassen.

rizo · 27 April 2015, 20:38:17

super danke hat alles wunderbar geklappt.

Mitch · 27 April 2015, 20:39:54

So, habe alles gelöscht und nochmal neu runtergeladen.

Genau das gleiche Problem wie vorher $:-\$

setstate · 27 April 2015, 20:52:33

Zitat von: Mitch am 27 April 2015, 20:39:54
So, habe alles gelöscht und nochmal neu runtergeladen.

Genau das gleiche Problem wie vorher $:-\$

Ich vermute, dein Format beim FHEM Command 'list' ist etwas anders:
Wir brauchen aber dann für die Suche deine Console Logs mithilfe von
Zeile 356: //console.log('line: '+line);
Zeile 365: //console.log('paraname',paraname,'date:',date,'val',val);

Stril · 27 April 2015, 21:46:20

Hallo!

Ich versuche mich jetzt schon länger an einem einfachen Dimmer, aber komme nicht weiter:

Es geht um einen Eltako FUD Enocean-Dimmer. Kommando für an/aus: set on/off. Kommando für Dimmen: set dim

<div data-type="dimmer" data-device='aLd_EG_Esszimmer_LichtLinks' data-get="dim" data-get-on="!0" data-get-off="0" data-set="dim" class="cell"></div>

--> Ich muss data-set="dim" machen, damit das Dimmen funktioniert.

Schalte ich danach wieder ein, führt FHEM ein set dim 0 aus. Damit bleibt die Lampe aber einfach aus.

Gibt es hier eine Möglichkeit, statt dessen einen data-set-on-Befehl zu hinterlegen?

Grüße
Phil

Mitch · 27 April 2015, 22:01:18

Zitat von: setstate am 27 April 2015, 20:52:33
Ich vermute, dein Format beim FHEM Command 'list' ist etwas anders:
Wir brauchen aber dann für die Suche deine Console Logs mithilfe von
Zeile 356: //console.log('line: '+line);
Zeile 365: //console.log('paraname',paraname,'date:',date,'val',val);

So, habe die zwei Zeilen "aktiviert".
Und nun?

setstate · 27 April 2015, 22:21:54

Zitat von: Mitch am 27 April 2015, 22:01:18
So, habe die zwei Zeilen "aktiviert".
Und nun?

Sehr gut! Jetzt brauchen wir die Ausgaben der Webconsole. Geöffnet wird die im Firefox mit alt+cmd+k
Mehr Info dazu hier: https://developer.mozilla.org/de/docs/Tools/Web_Konsole

Ein paar Beispielszeilen reichen ...

Mitch · 27 April 2015, 22:35:28

Hab kein Firefox, nur Safari (ist ein Mac)

Code Auswählen

[Warning] Unexpected CSS token: : (font-awesome.min.css, line 4, x5)

Code Auswählen

[Log] Please rename widget attribute "type" into "data-type" in http://192.168.0.5:8084/fhem/tablet - Details below: (fhem-tablet-ui.js, line 191)
[Log] [ (fhem-tablet-ui.js, line 192)
<div data-on="scharf" data-off="unscharf" data-icon="fa-exclamation-triangle" data-type="switch" data-device="Alarmanlage" class="fa-stack fa-2x">...</div>
]
[Log] Please rename widget attribute "device" into "data-device" in http://192.168.0.5:8084/fhem/tablet device: CUL_HM_HM_SEC_KEY_23DB96 - Details below: (fhem-tablet-ui.js, line 199)
[Log] [ (fhem-tablet-ui.js, line 200)
<div data-type="label" class="cell" data-device="CUL_HM_HM_SEC_KEY_23DB96"></div>
]
[Log] Please rename widget attribute "device" into "data-device" in http://192.168.0.5:8084/fhem/tablet device: Alarmanlage - Details below: (fhem-tablet-ui.js, line 199)
[Log] [ (fhem-tablet-ui.js, line 200)
<div data-on="scharf" data-off="unscharf" data-icon="fa-exclamation-triangle" data-type="switch" data-device="Alarmanlage" class="fa-stack fa-2x">...</div>
]
[Log] Please rename widget "contact" into "symbol" in http://192.168.0.5:8084/fhem/tablet device: Fenster_Flur_oben - Details below: (fhem-tablet-ui.js, line 204)
[Log] [ (fhem-tablet-ui.js, line 205)
<div data-type="symbol" data-device="Fenster_Flur_oben" data-icon="oa-fts_window_2w" class="narrow fa-stack fa-2x">...</div>
]
[Log] Please rename widget "contact" into "symbol" in http://192.168.0.5:8084/fhem/tablet device: Fenster_Bad - Details below: (fhem-tablet-ui.js, line 204)
[Log] [ (fhem-tablet-ui.js, line 205)
<div data-type="symbol" data-device="Fenster_Bad" data-icon="oa-fts_window_2w" class="narrow fa-stack fa-2x">...</div>
]
[Log] Please rename widget "contact" into "symbol" in http://192.168.0.5:8084/fhem/tablet device: Fenster_Leoni - Details below: (fhem-tablet-ui.js, line 204)
[Log] [ (fhem-tablet-ui.js, line 205)
<div data-type="symbol" data-device="Fenster_Leoni" data-icon="oa-fts_window_2w" class="narrow fa-stack fa-2x">...</div>
]
[Log] Please rename widget "contact" into "symbol" in http://192.168.0.5:8084/fhem/tablet device: Fenster_Carlotta - Details below: (fhem-tablet-ui.js, line 204)
[Log] [ (fhem-tablet-ui.js, line 205)
<div data-type="symbol" data-device="Fenster_Carlotta" data-icon="oa-fts_window_2w" class="narrow fa-stack fa-2x">...</div>
]
[Log] Please rename widget "contact" into "symbol" in http://192.168.0.5:8084/fhem/tablet device: Fenster_Schlafzimmer - Details below: (fhem-tablet-ui.js, line 204)
[Log] [ (fhem-tablet-ui.js, line 205)
<div data-type="symbol" data-device="Fenster_Schlafzimmer" data-icon="oa-fts_window_2w" class="narrow fa-stack fa-2x">...</div>
]
[Log] Please rename widget "contact" into "symbol" in http://192.168.0.5:8084/fhem/tablet device: CUL_FHTTK_Kellerflur - Details below: (fhem-tablet-ui.js, line 204)
[Log] [ (fhem-tablet-ui.js, line 205)
<div data-type="symbol" data-device="CUL_FHTTK_Kellerflur" data-icon="oa-fts_window_2w" class="narrow fa-stack fa-2x">...</div>
]
[Log] Please rename widget "contact" into "symbol" in http://192.168.0.5:8084/fhem/tablet device: CUL_FHTTK_Waschkeller - Details below: (fhem-tablet-ui.js, line 204)
[Log] [ (fhem-tablet-ui.js, line 205)
<div data-type="symbol" data-device="CUL_FHTTK_Waschkeller" data-icon="oa-fts_window_2w" class="narrow fa-stack fa-2x">...</div>
]
[Log] Please rename widget "contact" into "symbol" in http://192.168.0.5:8084/fhem/tablet device: CUL_FHTTK_Hobbyraum_links - Details below: (fhem-tablet-ui.js, line 204)
[Log] [ (fhem-tablet-ui.js, line 205)
<div data-type="symbol" data-device="CUL_FHTTK_Hobbyraum_links" data-icon="oa-fts_window_2w" class="narrow fa-stack fa-2x">...</div>
]
[Log] Please rename widget "contact" into "symbol" in http://192.168.0.5:8084/fhem/tablet device: CUL_FHTTK_Hobbyraum_rechts - Details below: (fhem-tablet-ui.js, line 204)
[Log] [ (fhem-tablet-ui.js, line 205)
<div data-type="symbol" data-device="CUL_FHTTK_Hobbyraum_rechts" data-icon="oa-fts_window_2w" class="narrow fa-stack fa-2x">...</div>
]
[Log] Please rename widget "contact" into "symbol" in http://192.168.0.5:8084/fhem/tablet device: CUL_FHTTK_Hobbyraum_ost - Details below: (fhem-tablet-ui.js, line 204)
[Log] [ (fhem-tablet-ui.js, line 205)
<div data-type="symbol" data-device="CUL_FHTTK_Hobbyraum_ost" data-icon="oa-fts_window_2w" class="narrow fa-stack fa-2x">...</div>
]
[Log] line:  (fhem-tablet-ui.js, line 356, x14)

Die Fehler verstehe ich nicht.
Die Dinge sind alle so nicht (mehr) in der index.html:
z.B.

Code Auswählen

<header>WOHNZIMMER</header>
        <div class="center">
                <div data-type="thermostat" data-device="HZ_Wohnzimmer_WT_Climate" data-get="desired-temp" data-step="0.5"></div>
                <div data-type="label" data-device="HZ_Wohnzimmer_WT_Climate" data-get="humidity" data-fix="0" data-unit=" %" class="small"></div>
                <div data-type="label" data-device="Wohnzimmer.Airsensor" data-get="voc" data-fix="0" data-unit=" CO2" class="small"></div>
                <div class="container">
                     <div class="cell left">
                     <div data-type="symbol" data-get="state" data-device="Fenster_Terrasse" data-icon="oa-fts_window_2w" class="narrow"></div>
                     <div data-type="label" class="narrow darker small">Terrasse</div>
                     </div>
                     <div class="cell left">                     
                     <div data-type="symbol" data-device="Fenster_Wohnzimmer_Ost " data-icon="oa-fts_window_2w" class="narrow"></div>
                     <div data-type="label" class="narrow darker small">Ost</div>
                     </div>
                     <div class="cell left">   
                     <div data-type="symbol" data-device="Fenster_Kueche" data-icon="oa-fts_window_2w" class="narrow"></div>
                     <div data-type="label" class="narrow darker small">Kueche</div>
                </div>  
        </div>
</li>

Als ob alte Daten aus irgend einem Cache geholt werden?

setstate · 27 April 2015, 22:43:19

Zitat von: Stril am 27 April 2015, 21:46:20
Hallo!
Ich versuche mich jetzt schon länger an einem einfachen Dimmer, aber komme nicht weiter:
Es geht um einen Eltako FUD Enocean-Dimmer. Kommando für an/aus: set on/off. Kommando für Dimmen: set dim
<div data-type="dimmer" data-device='aLd_EG_Esszimmer_LichtLinks' data-get="dim" data-get-on="!0" data-get-off="0" data-set="dim" class="cell"></div>
--> Ich muss data-set="dim" machen, damit das Dimmen funktioniert.
Schalte ich danach wieder ein, führt FHEM ein set dim 0 aus. Damit bleibt die Lampe aber einfach aus.
Gibt es hier eine Möglichkeit, statt dessen einen data-set-on-Befehl zu hinterlegen?
Grüße
Phil

Hallo Phil,
mit data-get-on="!0" wolltest du sicherlich erreichen, dass alles ausser 0 als on gesehen wird. Das geht leider nicht so. Entweder mit Regex data-get-on="[^0]" oder mit dem eingebauten Literal "!off" also so: data-get-on="!off"

Code Auswählen

        
<div data-type="dimmer" data-device='aLd_EG_Esszimmer_LichtLinks' 
       data-get="dim"  
       data-get-on="!off" 
       data-get-on 
       data-get-off="0" 
       data-set="dim" 
       class="cell"></div>

setstate · 27 April 2015, 22:53:15

Kleines Beispiel für eine Playersteuerung als Kopiervorlage oder zu Einbinden als Template.

als Template

Code Auswählen

<li data-row="1" data-col="1" data-sizex="2" data-sizey="1" data-template="template_player.html"></li>

oder einfach die DIVs aus der Datei examples/template_player.html als Vorlage nutzen.

(https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/examples/template_player.png)

setstate · 27 April 2015, 22:59:09

Hallo Mitch,

das sieht nach einem Cache-Problem aus. Kannst du mit cmd+r das kpl. Neuladen erzwingen. Ansonsten Browsercache löschen.

Aber die Meldungen sind nur Warnungen, wegen alten Attributen-Namen.

Interessanter wären die 14 Zeilen "[Log] line: (fhem-tablet-ui.js, line 356, x14)"
Kann man das noch aufklappen, um die Details zu lesen?

Mitch · 27 April 2015, 23:02:07

Also Browser Cahce kann es nicht sein, pasiert auf zwei Rechnern, einem Android Pad und einem iPad.
Habe Cache geleert und Reload erzwungen.

Diese Zeile

Code Auswählen

[Log] line: (fhem-tablet-ui.js, line 356, x14) zeigt leider nur genau das.

matzemoerk · 28 April 2015, 00:35:41

Zitat von: setstate am 27 April 2015, 22:53:15
Kleines Beispiel für eine Playersteuerung als Kopiervorlage oder zu Einbinden als Template.

Das wollte ich mir für morgen Abend vornehmen und du nimmst mir einfach so die Arbeit weg

Danke!

nesges · 28 April 2015, 00:47:04

Zitat von: Mitch am 27 April 2015, 23:02:07
Diese Zeile
Code Auswählen Erweitern
[Log] line: (fhem-tablet-ui.js, line 356, x14) zeigt leider nur genau das.

Würde ich dann als Leerzeilen interpretieren

Füge mal bitte nach Zeile 350 (.done (function( data ) {) ein:

Code Auswählen

console.log('data',data.replace(/\r/g, '--CR--\r').replace(/\n/g, '--LF--\n'));