Hauptmenü

New FHEM Tablet UI

Begonnen von setstate, 22 Februar 2015, 23:37:24

Vorheriges Thema - Nächstes Thema

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)

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  :o
SW: FHEM 5.5, Raspian, XBMC, Testinstallation auf Win7
HW: Raspi B, 32GB SD, enocean Pi, RFXTRX433E, BSC - MwC-32, Onkyo TX-NR709, Samsung UE55F8090, Jung LS-Eno, permundo SmartPlug, KDG-FB 6490cable (ohne FHEM)

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.
FHEM im Proxmox Container

Mitch

So, habs mal grob eingerichtet, bekomme aber ein Error: Connection refused (111)

Kann das am Port liegen? Nutze nicht den 8083
FHEM im Proxmox Container

setstate

FHEM muss per telnet ansprechbar sein. D.h. in der fhem.cfg muss so was ähnliches stehen
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?
FHEM im Proxmox Container

schka17

In der send.php, zeile 7


Sent from my iPad using Tapatalk
M: Thinclient x64 Debian | CUL FS20, HMS100WD, HMS100TF, HMS100T, HMS100CO, S300, S555TH | OWServer DS1420, DS18B20, DS2408 | RFXCOM UVN128, THWR800, THGR228N,RTGR328, PCR800 |Jeelink PCA301 EC3000|CUNO+IR|HMLAN|HMUSB|CUL433 Somfy|mySensors|espEasy
S1:Raspberry mit BPM810, Jeelink EC3000

Mitch

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

FHEM im Proxmox Container

drdownload

CUL 868 Slow-RF (FS20 Aktoren, Sender, FHT8V), CUL 868 (WMBUS-Empfang), Jeelink (PCA301), WS3600 (WH3080 über USB-Basis), Bewässerung mit ESP-Easy und Proplanta, RFXTRX433 Home-Easy Empfang und Senden, Oregon TH, WS001 TH), Blackbean IR, Mopidy-Snapcast MR Audio, Kodi, Forum-LED-Controller,

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

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.
FHEM im Proxmox Container

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.
FHEM im Proxmox Container

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.