New FHEM Tablet UI

[moorjunge]

Guten Morgen,

vielen Dank auch von meiner Seite für dieses tolle UI.
Ich bin echt begeistert von Zeit und Kraft, die in dieses Projekt gesteckt wird.

Zur Zeit versuch ich, über das hier gezeigte Beispiel eine Anzeige für den Müll zu realisieren.
Allerdings gelingt es mir nicht, eigene Icons einzubinden.

Von mir gibt es heute das verbesserte contact Widget: symbol widget

Es kann jetzt nicht nur mit einem Icon den Status eines Devices anzeigen, sondern kann optional auch mehrere Status anzeigen.

Dafür gibt es zwei neue Array Attribute
Beispiel:

Code Auswählen Erweitern

<div data-type="symbol" data-device="dummy1"
  data-get-on='["Wert1","Wert2","Wert3"]'
  data-icons='["fa-arrow-up","fa-arrow-right","fa-arrow-down"]'
  data-on-colors='["#32a054","#6666cc","#ad3333"]' >
</div>

Ich habe es schon mit diversen Pfaden und Dateinamen versucht.
Die Icons habe ich in einem Unterverzeichnis der Webseite hinterlegt.

Pfad /opt/fhem/www/tablet/icons

Folgende Angaben habe ich schon versucht:

1. "http://xxx.xxx.xxx.xxx:8083/fhem/tablet/icons/GelbeTonneIn.1.png"
2. "./icons/GelbeTonneIn.1.png"
3. "/icons/GelbeTonneIn.1.png"

Allerdings wird das Icon nie angezeigt.

Hier mein "Test"-Code

Code Auswählen Erweitern

<div data-type="symbol" data-device="Muell_Sammler"
  data-get-on='["nichts","GSack_Morgen","Wert3"]'
  data-icons='["fa-arrow-up","/icons/GelbeTonneIn.1.png","fa-arrow-down"]'
data-on-colors='["#32a054","#6666cc","#ad3333"]' >
</div>


Hat vielleicht jemand einen Rat für mich?

Danke

[setstate]

@moorjunge: Leider geht das so nicht, mit keiner Pfadvariante. Die Icons sind keine Images, es wird ein Font dafür benutzt -> Font Awesome http://fortawesome.github.io/Font-Awesome/icons. Das ist sehr flexibel und die Piktogramme sind zudem sehr zeitgemäß.

Ich würde fa-recycle  benutzen und eine gelbe Farbe: #FFD700

Code Auswählen Erweitern

<div data-type="symbol" data-device="Muell_Sammler"
  data-get-on='["nichts","GSack_Morgen","Wert3"]'
  data-icons='["fa-arrow-up","fa-recycle","fa-arrow-down"]'
data-on-colors='["#32a054","#FFD700","#ad3333"]' >
</div>

Auch größer ist möglich: class="bigger"

[moorjunge]

OK, dass ist schon mal gut zu wissen.

Auf das Icon war ich auch schon gestoßen, was mir dann noch fehlt ist der Hinweis, ob die Abholung "Heute" oder "Morgen" ist. Lässt sich das ganze noch um einen Text unter dem Icon ergänzen?

Gruß
Thiemo

[aliate]

Hallo aliate,

ja, es liegt an der Formatierung. Das °C muss beachtet werden. Mit einem RegEx kann man das im Code wegfiltern. Die Lösung habe ich schon fast eingebaut. Muss nur noch getestet werden. Im Laufe des Tages wird es ein Update des Thermostaten geben.

Update ist oben. Alle Interessierte können mal die widget_thermostat.js aktualisieren. Ich hoffe es hat keine negativen Seiteneffekte.

Hallo setstate,

wow, danke für die schnelle Hilfe

Also das Anzeigen der gesetzten Temperatur im thermostat geht jetzt, auch measured-temp wird angezeigt.
Mir ist jetzt aber aufgefallen, dass longpoll nicht mehr zu gehen scheint, außerdem werden Temperatureinstellungen welche ich im frontend mache nicht mehr weitergegeben (data-set="value"). Das hat vorher schon super funktioniert, jetzt passiert nichts mehr :-/
Bei "Eingaben" im frontend kam ja immer diese "toast-message" diese kommt bei mir nicht mehr.

Vielleicht kannst Du mir ja bei Gelegenheit weiterhelfen

[setstate]

OK, dass ist schon mal gut zu wissen.

Auf das Icon war ich auch schon gestoßen, was mir dann noch fehlt ist der Hinweis, ob die Abholung "Heute" oder "Morgen" ist. Lässt sich das ganze noch um einen Text unter dem Icon ergänzen?

Gruß
Thiemo

Ein Label, was einfach den STATE anzeigt ... So etwa:

Code Auswählen Erweitern


<div class="cell right">
<div data-type="symbol" data-device="Muell_Sammler"
                 data-get-on='["nichts","GSack_Morgen","Wert3"]'
                 data-icons='["fa-arrow-up","fa-recycle","fa-arrow-down"]'
                 data-on-colors='["#32a054","#FFD700","#ad3333"]' >
        </div>
<div data-type="label" data-device="Muell_Sammler" class=""></div>
</div>


bei class kann man mit 'narrow' 'darker' 'small' experimentieren.

[bjoernbo]

Wetter Wetter Wetter

So ....nun mit Vorhersage
.... unter dem aktuellem Wetter kommt noch das Regenradar und die Windrose .

... aber jetzt muss der Papa erstmal in den Zoo 

(//)

[nesges]

Nicht dass ich auf meiner Lösung bestehen würde, aber ich denke im Wiki ist es besser aufgehoben, da es dort vlt. eher gefunden wird.

Am fhemwiki gefällt mir nicht, dass man erst nen Account beantragen muss - aber offenbar wird die Einstiegshürde dort gebraucht. Aber es stimmt schon, dass Artikel dort eher gefunden werden. Ich hab die FAQ auf jeden Fall jetzt auch dorthin geschoben: http://www.fhemwiki.de/wiki/FHEM_Tablet_UI/FAQ

[setstate]

@aliate: Mmmm, schade. Das klingt nach Fehler. Was sagt die Webconsole im Browser, wenn DEBUG an ist (im index.html muss <meta name="debug" content="1"> stehen)?

[moorjunge]

Ein Label, was einfach den STATE anzeigt ... So etwa:

Da "GSack_Morgen" usw nicht ganz so sexy als Text unter dem Icon ist habe ich nun einen weiteren Dummy erzeugt. Dessen state "-","Heute" und "Morgen" wird dann in dem Header des Feldes geschrieben, in dem das Icon auftaucht.
Damit bin ich ganz zufrieden.

Vielen Dank für die schnelle Hilfe !!

Frohe Ostern
Gruß
Thiemo

[aliate]

@aliate: Mmmm, schade. Das klingt nach Fehler. Was sagt die Webconsole im Browser, wenn DEBUG an ist (im index.html muss <meta name="debug" content="1"> stehen)?

Hoffe dass sind die Daten die Du brauchst.

Wenn ich in fhem die Temperatur auf 16,4° einstelle kommt in der Console

Code Auswählen Erweitern

2015-04-03 13:24:54 / Studio_Hermann_SollTemp / STATE / 16.39 °C
fhem-tablet-ui.js:193 update done for device:Studio_Hermann_SollTemp parameter:STATE
fhem-tablet-ui.js:294 2015-04-03 13:24:54 / Studio_Hermann_SollTemp / STATE / 16.39 °C
fhem-tablet-ui.js:193 update done for device:Studio_Hermann_SollTemp parameter:STATE
fhem-tablet-ui.js:294 2015-04-03 13:24:54 / Studio_Hermann_SollTemp / measured-temp / 18.56 °C
fhem-tablet-ui.js:193 update done for device:Studio_Hermann_SollTemp parameter:measured-temp
fhem-tablet-ui.js:294 2015-04-03 13:24:54 / Studio_Hermann_SollTemp / STATE / 16.39 °C
fhem-tablet-ui.js:193 update done for device:Studio_Hermann_SollTemp parameter:STATE
fhem-tablet-ui.js:294 2015-04-03 13:24:54 / Studio_Hermann_SollTemp / STATE / 16.39 °C
fhem-tablet-ui.js:193 update done for device:Studio_Hermann_SollTemp parameter:STATE
fhem-tablet-ui.js:294 2015-04-03 13:24:54 / Studio_Hermann_SollTemp / measured-temp / 18.56 °C
fhem-tablet-ui.js:193 update done for device:Studio_Hermann_SollTemp parameter:measured-temp
fhem-tablet-ui.js:228 start longpoll

Die Anzeige des widgets bleibt aber auf dem alten Wert von 17,6° stehen. Aktualisiere ich die Seite manuell dann wird der richtige Wert angezeigt. Alternativ mit shortpoll geht es nach den 30 Sekunden.

Wenn ich im UI die Temperatur verstelle kommt das:

Code Auswählen Erweitern

send to FHEM: set Studio_Hermann_SollTemp value 18.2
fhem-tablet-ui.js:294 2015-04-03 13:27:44 / Studio_Hermann_SollTemp / STATE / 18.2 °C
fhem-tablet-ui.js:193 update done for device:Studio_Hermann_SollTemp parameter:STATE
fhem-tablet-ui.js:294 2015-04-03 13:27:44 / Studio_Hermann_SollTemp / STATE / 18.2 °C
fhem-tablet-ui.js:193 update done for device:Studio_Hermann_SollTemp parameter:STATE
fhem-tablet-ui.js:294 2015-04-03 13:27:44 / Studio_Hermann_SollTemp / measured-temp / 18.56 °C
fhem-tablet-ui.js:193 update done for device:Studio_Hermann_SollTemp parameter:measured-temp
fhem-tablet-ui.js:294 2015-04-03 13:27:45 / Studio_Hermann_SollTemp / STATE / 18.2 °C
fhem-tablet-ui.js:193 update done for device:Studio_Hermann_SollTemp parameter:STATE
fhem-tablet-ui.js:294 2015-04-03 13:27:45 / Studio_Hermann_SollTemp / STATE / 18.2 °C
fhem-tablet-ui.js:193 update done for device:Studio_Hermann_SollTemp parameter:STATE
fhem-tablet-ui.js:294 2015-04-03 13:27:45 / Studio_Hermann_SollTemp / measured-temp / 18.56 °C
fhem-tablet-ui.js:193 update done for device:Studio_Hermann_SollTemp parameter:measured-temp
fhem-tablet-ui.js:228 start longpoll

Und Zack, jetzt hats natürlich geklappt. Wert wurde übertragen und auch die toast-message war wieder da. Keine Ahnung warum?!   Edit: Nach einem Refresh der Seite werden die Änderungen, die ich im UI mache wieder nicht weitergegeben = keine toast-message UND in der console tut sich nichts?!

Diese Einträge kommen beim Aufruf des UI

Code Auswählen Erweitern


fhem-tablet-ui.js:126 Please rename widget "contact" into "symbol" in http://192.168.178.36:8083/fhem/tablet device: SchlafzimmerFenster - Details below:
fhem-tablet-ui.js:127 [div.narrow, context: div.narrow, jquery: "1.11.1", constructor: function, selector: "", toArray: function...]
fhem-tablet-ui.js:126 Please rename widget "contact" into "symbol" in http://192.168.178.36:8083/fhem/tablet device: KinderzimmerFenster - Details below:
fhem-tablet-ui.js:127 [div.narrow, context: div.narrow, jquery: "1.11.1", constructor: function, selector: "", toArray: function...]
fhem-tablet-ui.js:126 Please rename widget "contact" into "symbol" in http://192.168.178.36:8083/fhem/tablet device: KuechenFenster - Details below:
fhem-tablet-ui.js:127 [div.cell, context: div.cell, jquery: "1.11.1", constructor: function, selector: "", toArray: function...]
fhem-tablet-ui.js:126 Please rename widget "contact" into "symbol" in http://192.168.178.36:8083/fhem/tablet device: TerrassenTuer - Details below:
fhem-tablet-ui.js:127 [div.narrow, context: div.narrow, jquery: "1.11.1", constructor: function, selector: "", toArray: function...]
jquery.min.js:4 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
fhem-tablet-ui.js:40 Loaded plugin: widget_symbol
fhem-tablet-ui.js:40 Loaded plugin: widget_label
fhem-tablet-ui.js:40 Loaded plugin: widget_switch
fhem-tablet-ui.js:40 Loaded plugin: widget_weather
fhem-tablet-ui.js:40 Loaded plugin: widget_thermostat
fhem-tablet-ui.js:40 Loaded plugin: widget_homestatus
fhem-tablet-ui.js:40 Loaded plugin: widget_push
fhem-tablet-ui.js:40 Loaded plugin: widget_volume
fhem-tablet-ui.js:40 Loaded plugin: widget_slider
fhem-tablet-ui.js:40 Loaded plugin: widget_dimmer
fhem-tablet-ui.js:142 Collecting required readings
fhem-tablet-ui.js:158 Get current values of readings
jquery.min.js:4 Resource interpreted as Font but transferred with MIME type text/woff2: "http://192.168.178.36:8083/fhem/tablet/fonts/fontawesome-webfont.woff2".m.fn.extend.offset @ jquery.min.js:4t.o._xy @ jquery.knob.min.js:23t.o.run @ jquery.knob.min.js:23(anonymous function) @ jquery.knob.min.js:23m.extend.each @ jquery.min.js:2m.fn.m.each @ jquery.min.js:2e.fn.dial.e.fn.knob @ jquery.knob.min.js:23(anonymous function) @ VM571:158m.extend.each @ jquery.min.js:2m.fn.m.each @ jquery.min.js:2widget_thermostat.init @ VM571:143$.ajax.success @ fhem-tablet-ui.js:43m.Callbacks.j @ jquery.min.js:2m.Callbacks.k.fireWith @ jquery.min.js:2x @ jquery.min.js:4m.ajaxTransport.send.b @ jquery.min.js:4m.ajaxTransport.send @ jquery.min.js:4m.extend.ajax @ jquery.min.js:4plugins.load @ fhem-tablet-ui.js:33(anonymous function) @ fhem-tablet-ui.js:140m.Callbacks.j @ jquery.min.js:2m.Callbacks.k.fireWith @ jquery.min.js:2m.extend.ready @ jquery.min.js:2J @ jquery.min.js:2
VM571:67 Resource interpreted as Font but transferred with MIME type text/woff: "http://192.168.178.36:8083/fhem/tablet/fonts/meteocons-webfont.woff".widget_thermostat.drawDial @ VM571:67t.o._draw @ jquery.knob.min.js:23t.o.run @ jquery.knob.min.js:23(anonymous function) @ jquery.knob.min.js:23m.extend.each @ jquery.min.js:2m.fn.m.each @ jquery.min.js:2e.fn.dial.e.fn.knob @ jquery.knob.min.js:23(anonymous function) @ VM571:158m.extend.each @ jquery.min.js:2m.fn.m.each @ jquery.min.js:2widget_thermostat.init @ VM571:143$.ajax.success @ fhem-tablet-ui.js:43m.Callbacks.j @ jquery.min.js:2m.Callbacks.k.fireWith @ jquery.min.js:2x @ jquery.min.js:4m.ajaxTransport.send.b @ jquery.min.js:4m.ajaxTransport.send @ jquery.min.js:4m.extend.ajax @ jquery.min.js:4plugins.load @ fhem-tablet-ui.js:33(anonymous function) @ fhem-tablet-ui.js:140m.Callbacks.j @ jquery.min.js:2m.Callbacks.k.fireWith @ jquery.min.js:2m.extend.ready @ jquery.min.js:2J @ jquery.min.js:2
fhem-tablet-ui.js:228 start longpoll
VM571:221 thermo dev:* par:* change:clima.desired
VM571:228 thermo dev:* par:* change:clima.temp
fhem-tablet-ui.js:364 Uncaught TypeError: Cannot read property 'match' of null

Code Auswählen Erweitern

ncaught TypeError: Cannot read property 'match' of nullgetPart @ fhem-tablet-ui.js:364widget_thermostat.getClimaValues @ VM571:12(anonymous function) @ VM571:209m.extend.each @ jquery.min.js:2m.fn.m.each @ jquery.min.js:2widget_thermostat.update @ VM571:207(anonymous function) @ fhem-tablet-ui.js:50m.extend.each @ jquery.min.js:2plugins.update @ fhem-tablet-ui.js:48update @ fhem-tablet-ui.js:191(anonymous function) @ fhem-tablet-ui.js:351m.Callbacks.j @ jquery.min.js:2m.Callbacks.k.fireWith @ jquery.min.js:2x @ jquery.min.js:4m.ajaxTransport.send.b @ jquery.min.js:4

Gruß

[schka17]

Du nicht, aber irgendwo ist in der Übertragung was schief gelaufen, die Umlaute sind doppelt kodiert im Repository. Kannst du bitte einmal mit der Version von https://github.com/nesges/Widgets-for-fhem-tablet-ui/blob/master/js/widget_weather.js testen und - bei Umlautwetterlage - Rückmeldung geben, ob's damit funktioniert? Danke!

Hallo Nesges,

gerade ausprobiert, leider negativ, muss die Umlaute eintragen damit es funktioniert.

Gruß
Karl

[michiatlnx]

Hallo setstate,

bei der letzen Änderung im widget_thermostat kommt es zu einem fehler, was auch das widget weather und wind_direction beeinflusst.
Beim Thermostat werden die Werte nicht angezeigt bzw. erst nach einer Zeit.
Beim weather icon wird keins Angezeigt
Beim wind_direction auch erst nach einer Zeit.

Daher habe ich erstmal die vorige Version eingespielt.

gruss

[setstate]

Hallo setstate,

bei der letzen Änderung im widget_thermostat kommt es zu einem fehler, was auch das widget weather und wind_direction beeinflusst.
Beim Thermostat werden die Werte nicht angezeigt bzw. erst nach einer Zeit.
Beim weather icon wird keins Angezeigt
Beim wind_direction auch erst nach einer Zeit.

Daher habe ich erstmal die vorige Version eingespielt.

gruss

Danke, ich weiß auch schon was ich ändern muss, bin nur gerade unterwegs. Update folgt. Sorry

Update: Der Fehler trat primär auf, wenn data-device="xyz" in der index.html existieren, die keine Werte liefern. Also wenn aus der Vorlage Sachen nicht geändert wurden. Ich habe das jetzt wieder sicherer gemacht. Sollte also wieder alles laufen ...

[bmwfan]

Möchte gerade ein array für die Stati einrichten, aber es geht nicht. Mein Code:

Code Auswählen Erweitern

<div class="left">
<div data-type="symbol" data-device="rr_Petra" data-get-on='["zuhause","schläft","bettfein"]' data-icons='["fa-user","fa-arrow-up","fa-arrow-down"]' class="cell big"></div>
<div type="label" class="cell">Petra</div>
</div>

Status wird nicht erkannt und es wird immer das Icon angezeigt, das an erster Stelle im Array der Icons steht. Mir scheint, dass er a) immmer nur die erste Stelle abfragt und b) auch den gültigen Status nicht mehr erkennt, sobald ein Array definiert ist. Ohne Array wird der Status sofort erkannt und auch farbig angezeigt.

Dieses Beispiel kam in einem vorhergehende Thread zum Thema Müll. Dachte deswegen, ich richte es "kurz" ein. Denkfehler. Beschäftigt mich nun schon eine Weile.

Hat jemand eine Idee, wo der Fehler liegt?

Gruß Jürgen

[michiatlnx]

Danke, ich weiß auch schon was ich ändern muss, bin nur gerade unterwegs. Update folgt. Sorry

Update: Der Fehler trat primär auf, wenn data-device="xyz" in der index.html existieren, die keine Werte liefern. Also wenn aus der Vorlage Sachen nicht geändert wurden. Ich habe das jetzt wieder sicherer gemacht. Sollte also wieder alles laufen ...

Damit ist es gelöst, danke.
Ja das stimmt ich hatte einige Defaults aus der Vorlage noch drin.