New FHEM Tablet UI

[setstate]

FTUI - FHEM Tablet UI

Stand März 2018: Version 2.6
FHEM Tablet UI ist ein leichtgewichtiges und funktionsreiches Framework zum Erstellen von eigenen Userinterfaces für die Steuerung und Visualisierung von in FHEM integrierten Geräten. Ein Verständnis für HTML Code ist Voraussetzung, um sich die gewünschten Widgets zu konfigurieren. Aber mit einem Texteditor und etwas Copy&Paste  ist man schnell am Ziel. Kein Scripten notwendig. Nur HTML Blöcke einfügen und die Parameter anpassen.
Mittlerweile gibt es ein großes Interesse an diesem FHEM User Interface und eine sehr nette und absolut kreative Usergemeinschaft mit viel KnowHow.  Es gibt inzwischen viele weitere Widgets-Plugins und fast täglich werden es mehr.

Projekt-URL
https://github.com/knowthelist/fhem-tablet-ui

FHEM-Wiki
http://www.fhemwiki.de/wiki/FHEM_Tablet_UI

FAQ
https://github.com/knowthelist/fhem-tablet-ui/wiki/FAQ

Live-Demo
http://knowthelist.github.io/fhem/tablet/demo_widgets.html

Tutorials/Blogs
http://voizchat.de/fhem-tutorial-serie-teil-5-tablet-ui-installieren-und-konfigurieren
http://raspberrypi.crmvy3qiisdstf8c.myfritz.net/wordpress/?p=355
http://www.juergenstechnikwelt.de/smarthome-2/smarthome-mit-fhem-meine-beispielkonfiguration-ueber-google-drive-verfuegbar/
https://blog.moneybag.de/fhem-alternatives-frontend-fuer-fhem-tablet-ui/
https://www.van-porten.de/blog/2016/01/fhem-installation-on-raspberry-pi/
http://www.benjaminroesner.com/blog/fhem-tablet-ui-1/

Installation

Kein PHP, MySQL oder andere zusätzliche Frameworks notwendig. Läuft in jedem Standard-Browser, jedes Betriebssystem und im Webviewcontrol

In der FHEM Kommandozeile folgenden Befehl eingeben (oder im FHEMWEB Eingabefenster)

Code: [Auswählen]

update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt
Oder von Hand:

• Dateien herunterladen: Zip
• alle Dateien gemäß der Ordnernamen auf den FHEM Server kopieren /<fhem-Pfad>/www/tablet/*

Das UI ist nun über "http://<fhem-url>:8083/fhem/tablet/<myfile>.html" aufrufbar.

Folgende Seiten sind als Grundlage für eigene Seiten inklusive.

"http://<fhem-url>:8083/fhem/tablet/index-example.html"    ->   Demo UI (Achtung: benutzte Devices evtl. ändern)
"http://<fhem-url>:8083/fhem/tablet/index_empty.html"    ->     leeres Layout-Gerüst, als minimal Basis
"http://<fhem-url>:8083/fhem/tablet/index_layout.html"    ->     Demo für die Möglichkeiten der Platzierung von Widgets
"http://<fhem-url>:8083/fhem/tablet/icons_table.html"    ->       Tabelle aller verfügbaren Icons
"http://<fhem-url>:8083/fhem/tablet/ftui_check.html"    ->     Debugging-Seite für 2.ten Tag

Jetzt kann man sich eigene Seiten gestalten. z.B. flurtab.html welche dann über "http://<fhem-url>:8083/fhem/tablet/flurtab.html" aufgerufen werden kann.

Standard Widgets
- thermostat
- switch
- label
- symbol
- push
- volume
- homestatus
- dimmer
- slider
- weather
- circlemenu
- image
- select
- pagetab
- pagebutton
- level
- rotor
- swiper
- progress
- simplechart
- chart
- highchart
- popup
- readinggroup
- datetimepicker
- eventmonitor
- checkbox
- range
- spinner
- swiper
- tts

Zusätzliche Widgets Quellen
nesges: https://github.com/nesges/Widgets-for-fhem-tablet-ui
 Achtung: Seit dem 06.09.2016 sind die nesges Widgets nicht mehr kompatible mit der aktuellen Version

Aber: einige der nesges Widgets sind jetzt im Haupt-Repository verfügbar

- klimatrend
- button
- clock
- weather
- wind_direction
- iframe

User Widgets Threads
- chart (eki)
  https://forum.fhem.de/index.php/topic,48562.0.html
- todoist (pula)
  https://forum.fhem.de/index.php/topic,82883.0.html
- weekdaytimer (eki/svenson08)
  https://forum.fhem.de/index.php/topic,48106.0.html
- scrolllabel (eki)
  https://forum.fhem.de/index.php/topic,73497.0.html
- imagecover (Reinerlein)
  https://forum.fhem.de/index.php/topic,70265.0.html
- fullcalview (h3llsp4wn)
  https://forum.fhem.de/index.php/topic,48562.0.html
- weekprofile (Thorsten Pferdekaemper)
  https://forum.fhem.de/index.php/topic,48562.0.html
- pinpad (Syrex-o)
  https://forum.fhem.de/index.php/topic,79283.msg712855.html#msg712855
- gmaps (eki)
  https://forum.fhem.de/index.php/topic,78379.0.html

Eigene Widgets erstellen

- https://wiki.fhem.de/wiki/FTUI_eigene_Widgets

User Tools

- FUIP - Fhem User Interface Painter (Thorsten Pferdekaemper)
  https://forum.fhem.de/index.php/topic,85869.0.html

User-Demos
Screenshots und vollständige HTMLs zur Inspiration oder als Kopiervorlage
https://github.com/ovibox/fhem-ftui-user-demos

User-Demos-Thread
http://forum.fhem.de/index.php/topic,34233.0.html

Alte 1.5er Version
https://github.com/knowthelist/fhem-tablet-ui/archive/v1.5.1.zip

Screenshots:
Hier ein paar aktuelle Beispiele, was andere User mit diesem UI Framework schon gebaut haben:

(http://forum.fhem.de/index.php?action=dlattach;topic=34233.0;attach=29336;image)

(http://forum.fhem.de/index.php?action=dlattach;topic=34233.0;attach=29057;image)

(http://forum.fhem.de/index.php?action=dlattach;topic=34233.0;attach=29061;image)

[Doggiebert]

Schön langsam würde sich mal eine Diplomarbeit rentieren - verschiedene Frontendansätze, Vorteile/Nachteile, Entwicklungsstand, Verbreitung, lebendig ja/nein 

[Mitch]

Nachdem ich auch noch auf der Suche nach "DEM" Fronten für mein Wand-Tablet bin, sag ich schon mal Danke und werde heute Abend mal testen.

[Mitch]

So, habs mal grob eingerichtet, bekomme aber ein

Code: [Auswählen]

Error: Connection refused (111)
Kann das am Port liegen? Nutze nicht den 8083

[setstate]

FHEM muss per telnet ansprechbar sein. D.h. in der fhem.cfg muss so was ähnliches stehen

Code: [Auswählen]

define telnetPort telnet 7072 global

[domii666]

Schaut cool aus, werde es auch testen

Gesendet von meinem HTC One mit Tapatalk

[Mitch]

Ok, telnet, aber auch da habe ich einen anderen Port.
Kann ich den irgendwo eintragen?
In der index hinter localhost?

[schka17]

In der send.php, zeile 7


Sent from my iPad using Tapatalk

[Mitch]

Okay, Verbindung scheint zu stehen, allerdings funktioniert mein Thermostat nicht, obwohl ich den Namen entsprechend geändert habe.

[drdownload]

Coole Optik, genau meins

[setstate]

@Mitch: Wie sieht die Zeile für das Thermostat Device aus, wenn man bei FHEM eine "list" Abfrage macht? Dazu im FHEM Web in die Command-Eingabe Box folgendes eintippen und Enter drücken: list
Ich erwarte den Status in folgender Form, da ich bis jetzt nur HomeMatic  Thermostate kenne

Code: [Auswählen]

WohnzimmerHeizung_Clima (T: 22.7 desired: 21.0 valve: 9)

[Mitch]

Nutze auch HM und habe einfach in "Deiner" index den Namen durch mein Device geändert.

[setstate]

Aber bitte vom Thermostat nur den CHANNEL_04 (****_Clima) hinterlegen.

http://www.fhemwiki.de/wiki/HM-CC-RT-DN_Funk-Heizkörperthermostat

[Mitch]

Ok, dann geht das Wandthermo nicht, allerdings habe ich auch ein Ventil mit "_Clima" eingetragen?

Werde heute Abend noch mal testen.

[setstate]

Oh, mein Wandthermo ist noch im Schrank. Den müsste ich auch mal FHEM einbinden ...
Aber wie gesagt, du kannst mir gerne das Reading für State für dein Gerät schicken, ich sehe mir das dann an und erweitere den Parser.