New FHEM Tablet UI

[tomster]

Fangen wir Mal anders an, pnewman:

Auf welchem Gerät läuft dein FHEM? Raspberry Pi, NAS, etc.

Kannst Du mittels SSH auf diesen Rechner zugreifen?

--edit--

OK, RasPi und nano.

Wenn Du die index.html schon Mal ändern kannst, dann musst Du sie noch mit (ich glaub STRG+o) speichern.

Bei Deinem Code oben fehlen glaub ich noch 2 x </div> am Schluß. Bin grad am Handy, da ist mir der Text zu fuzzelig...

[bjoernbo]

Danke für die Rückmeldung setstate. Kann es sein das "ontop" nicht mehr funktioniert? Wenn ich den Zusatz "ontop" verwende wird mir zwar da Circlemenü mit den entspr. Funktionen angeboten nur lassen sich diese nicht mehr auswählen.

[pnewman]

Danke für die schnelle Fehlersuche.

Da ich MAX! Thermostate besitze kann es nicht

Code Auswählen Erweitern

set desired-temp heissen sondern

Code Auswählen Erweitern

set desiredTemperature

Wie ändere ich dies?
Im WIKI steht

Code Auswählen Erweitern

data-set
    command to send to FHEM (set <device> <command> <value>) (default 'desired-temp')

Gruß
Ralf

Trage ich dies direkt in meinen Code ein?

Code Auswählen Erweitern

<div data-type="thermostat" data-device="T_Wohn" data-get="desiredTemperature" data-temp="temperature" data-set "T_Wohn" "desiredTemperature" class="cell"></div>

[pnewman]

Danke,
ich habe es so gelöst:

Code Auswählen Erweitern

<div data-type="thermostat" data-device="HZ_Tuer" data-valve="valveposition" data-get="desiredTemperature" data-temp="temperature" data-set="desiredTemperature" class="cell"></div>

Und es funktioniert!!

Gruß
Ralf

[Nobby1805]

Genau das UI das ich gesucht habe .. und zwar nicht nur für das Tablet sondern auch auf dem Desktop ... nach nur 3 Stunden sieht alles genau so aus wie ich es wollte (und am längsten dauerte noch das Lesen dieses threads)
Dank an alle, die daran mitgearbeitet haben

[setstate]

Danke,
ich habe es so gelöst:

Code Auswählen Erweitern

<div data-type="thermostat" data-device="HZ_Tuer" data-valve="valveposition" data-get="desiredTemperature" data-temp="temperature" data-set="desiredTemperature" class="cell"></div>

Und es funktioniert!!

Gruß
Ralf

Perfekt!!! Schön, dass es jetzt bei dir klappt.
Und vielen Dank für die Info, wie es funktioniert.
Ich werde es für andere zur Nachnutzung gleich in die ReadMe schreiben.

[hyper2910]

Hallo,  sehr nette Sache,  kann man den Quellcode der livedemo irgendwo bekommen?

[rretsiem]

Hallo,

so, vielleicht kann ich ja auch einmal etwas beitragen

Besteht evtl. Interesse daran das das Fronend via WebSockets über geänderte Daten aktualisiert wird und nicht via "longPoll"?
Ich frage, weil ich das nun seit 2 Tagen genau so bei mir am laufen habe, es ist eine Erweiterung im fhem-tablet-ui.js welche dann ähnlich wie jetzt "longpoll=1" in der index.html gesteuert werden kann. Es wird keine Kompatibilität mit der jetzigen Version gebrochen!

Dazu notwendig ist natürlich ein websockets-proxy, der auf dem FHEM-Server läuft. Dazu habe ich im Moment noch eine angepasste Version von Werner Schäfer hier laufen: http://forum.fhem.de/index.php/topic,33755.0.html. Von ihm stammt also die Arbeit am nodejs-proxy, ich habe lediglich ein paar Erweiterungen eingebaut damit die korrekten Daten für die FTUI zur Verfügung gestellt werden.

Das alles läuft bis jetzt sehr stabil und das größte Problem der reconnects nach Standby usw. ist damit zumindest bei mir kein Problem mehr. Da die Steuerung in den aktuellen Browsern eingebaut ist und diese sich selbst wieder auf den websocket-server verbinden.

[setstate]

Danke für die Rückmeldung setstate. Kann es sein das "ontop" nicht mehr funktioniert? Wenn ich den Zusatz "ontop" verwende wird mir zwar da Circlemenü mit den entspr. Funktionen angeboten nur lassen sich diese nicht mehr auswählen.

ich habe den z-index von 1000 auf 1003 angepasst. Passte es jetzt bei dir?

[nesges]

Hallo,  sehr nette Sache,  kann man den Quellcode der livedemo irgendwo bekommen?

Schau mal hier: http://forum.fhem.de/index.php/topic,36063.0.html

[setstate]

Dazu notwendig ist natürlich ein websockets-proxy, der auf dem FHEM-Server läuft. Dazu habe ich im Moment noch eine angepasste Version von Werner Schäfer hier laufen: http://forum.fhem.de/index.php/topic,33755.0.html. Von ihm stammt also die Arbeit am nodejs-proxy, ich habe lediglich ein paar Erweiterungen eingebaut damit die korrekten Daten für die FTUI zur Verfügung gestellt werden.

Hallo rretsiem,

klingt interessant, ich finde longpoll auch etwas schräg, eine ordentliche Socketverbindung würde mir auch gut gefallen.
Ich finde nur, damit es für die Allgemeinheit nutzbar werden kann, sollte so etwas standardmäßig im FHEM nutzbar sein, bzw. als Modul mit einem define verfügbar sein.
Vielleicht können wir das Interface zu FHEM etwas flexibler machen. Je nach Config kann man jeder seine bevorzugte Connection einstellen: longpoll vs. sockets, json2 vs. list

[nesges]

Vielleicht können wir das Interface zu FHEM etwas flexibler machen. Je nach Config kann man jeder seine bevorzugte Connection einstellen: longpoll vs. sockets, json2 vs. list

Dafür!

[rretsiem]

Vielleicht können wir das Interface zu FHEM etwas flexibler machen. Je nach Config kann man jeder seine bevorzugte Connection einstellen: longpoll vs. sockets, json2 vs. list

Das klingt gut. Ich werde mal in den nächsten Abenden das weiter bei mir generalisieren und dann mal mit einem ersten Vorschlag für die Sockets vs Longpolls an die Öffentlichkeit treten

Das Thema Websocket ist eigentlich ein FHEM.pl Thema aber leider tut sich in der Richtung nichts mehr. Und ich kann zu wenig Perl das da was vernünftiges bei rauskommt. Daher die Lösung von Werner Schäfer mit dem Proxy.

[uniqueck]

Guten Abend,

gibt es beim widget symbol ein Problem bei den Farben, oder mache ich einfach nur etwas falsch.

Code Auswählen Erweitern


data-get-on='["incoming","incoming_noconnect","outgoing","outgoing_noconnect","AB"]'
data-icons='["fa-arrow-circle-left","fa-arrow-circle-left","fa-arrow-circle-right","fa-arrow-circle-right","fa-microphone"]'
data-on-colors='["#aa6900","#505050","#aa6900","#505050","#aa6900"]'


Es werden bei mir trotzdem alle Symbole in einer Farbe angezeigt, egal was ich mache.

Gemäß der Beschreibung im Wiki sollte diese Angabe allerdings korrekt sein.

To use multiple icons, data-get-on, data-icons and data-on-colors have to be an array with the same size. The value for one icon can also contain an additional animatation CSS name, e.g. "fa-exclamation-triangle fa-blink" for a blinking symbol.

[hyper2910]

Vielen Dank für die Info zu dem Quellcode.

Soweit steht bei mir alles, jedoch habe ich in einem Raum zwei MiLight, diese werden immer untereinandere im Raum angezeigt, wie bekomme ich diese Nebeneinander?

Code Auswählen Erweitern

<div class="cell left">
<div class="cell">
          <header>STEHLAMPE</header>
        <div data-type="switch" data-device="Stehlampe"  data-set-on="hsv 0,0,10" class="cell mini" ></div>
        <div data-type="label" class="cell">Stehlampe Weiss</div>
        <div data-type="volume" data-device="Stehlampe" data-min="0" data-max="360" data-get="hue" data-set="hue" class="hue-tick mini top-space-3x" ></div>
        <div data-type="label" class="cell">Color</div>
        <div data-type="dimmer" data-device="Stehlampe" data-get-on="on" data-get-off="off" data-set="dim" class="cell" ></div>
        <div data-type="label" class="cell">Hell</div>
  </div>
  <div class="cell right">
</div>
<header>TVLICHT</header>
<div data-type="switch" data-device="TVLicht" data-set-on="hsv 0,0,10" class="cell mini" ></div>
        <div data-type="label" class="cell">TVLicht Weiss</div>
        <div data-type="volume" data-device=TVLicht" data-min="0" data-max="360" data-get="hue" data-set="hue" class="hue-tick mini top-space-3x" ></div>
        <div data-type="label" class="cell">Color</div>
        <div data-type="dimmer" data-device="TVLicht" data-get-on="on" data-get-off="off" data-set="dim" class="cell" ></div>
        <div data-type="label" class="cell">Hell</div>