Tablet AJAX/JavaScript/HTML GUI

Begonnen von fhem86, 30 Mai 2013, 14:57:15

Vorheriges Thema - Nächstes Thema

fhem86

Hallo Zusammen,

gibt es so eine -> http://www.rainer-rebhan.de/HomeCtrl/HV_Start.htm <- GUI für FHEM?

Diese basiert auf AJAX/JavaScript/HTML und ist daher plattformunabhängig.

Wenn nicht, wird das mein nächstes Projekt :)

Damit das Wandtablet optisch ansprechender wird :)

Gruß

Puschel74

Hallo,

Beam me up Scotty ;-)
Raumschiff Enterprise lässt grüßen.

Aber sieht ganz gut aus.

Grüße
Zotac BI323 als Server mit DBLog
CUNO für FHT80B, 3 HM-Lan per vCCU, RasPi mit CUL433 für Somfy-Rollo (F2F), RasPi mit I2C(LM75) (F2F), RasPi für Panstamp+Vegetronix +SONOS(F2F)
Ich beantworte keine Supportanfragen per PM! Bitte im Forum suchen oder einen Beitrag erstellen.

fhem86

Das erste Design des GUI steht:

(siehe Anhang / see attachement)

Es wurde nur AJAX/JavaScript/HTML/CSS genutzt. Keine Bilder.

Die Menü Buttons und die Status Werte, können über FHEM konfiguriert werden.

Die gezeigten Temp Status Werte, werden alle 10 Sekunden via AJAX aktualisiert.

Die Darstellung, wurde im Firefox und im Android Browser getestet. Auf dem Ipad sollte es aber auch richtig dargestellt werden.

Alle Farben, werden später via FHEM cfg frei konfigurierbar sein.

Wie findet Ihr das GUI bis jetzt?


Jumbo

geil geil geil :-D


wenn du betatester brauchst , stelle mich gerne zur verfügung :-P

Puschel74

Hallo,

wenn das auch auf einem RasPi läuft mit Anleitung was installiert werden muss bin ich auch dabei ;-)
Einen hab ich noch frei zum "testen"

Grüße
Zotac BI323 als Server mit DBLog
CUNO für FHT80B, 3 HM-Lan per vCCU, RasPi mit CUL433 für Somfy-Rollo (F2F), RasPi mit I2C(LM75) (F2F), RasPi für Panstamp+Vegetronix +SONOS(F2F)
Ich beantworte keine Supportanfragen per PM! Bitte im Forum suchen oder einen Beitrag erstellen.

fhem86

So neuer Status :)

(siehe Anhang / see attachement)

Es können Temperatur,Luftfeuchtigkeit und on/off Devices eingebunden werden.
Buttons/Statuswerte, können in frei wählbaren Abschnitten eingebunden werden.
Klicken/Touchen für AN/AUS geht auch schon.

thoweiss

Sieht gut aus,

aber wie setzt Du das um?

Wärst Du ggf. bereit den Quellcode zur Verfügung zu stellen?


Gruß,
Thorsten

fhem86

Zitat von: thoweiss schrieb am Do, 06 Juni 2013 12:53Sieht gut aus,

aber wie setzt Du das um?

Wärst Du ggf. bereit den Quellcode zur Verfügung zu stellen?


Gruß,
Thorsten

html/css <- Darstellung

javascript/ajax <- Daten verarbeiten/senden und Aktionen ausführen bzw reagieren

json <- Schnittstelle zu FHEM z.B. http://fhemipoderhostname:8083/fhem?cmd=jsonlist DEVICENAME&XHR=1

Jeder Browser der die Standards unterstützt, kann diese GUI anzeigen.

Wenn die die Grundversion fertig ist, werde ich diese hier veröffentlichen.

Module für andere Devices werden folgen.

fhem86

So die erste Beta ist da bitte testen!

Anleitung:
  • Entpacken
  • Den Ordner viewFHEM nach "<fhemroot>/www" kopieren
http://fhemip:8083/fhem/viewFHEM/index.html zum Test aufrufen[/list]

fhem.cfg:

#Anpassen ... sind die schon vorhandenen Attribute
attr global userattr ... item1 item2 item3 item4 item5 item6 item7 item8 item9 item10 item11 item12 item13 item14 item15 item16 item17 item18 item19 item20

#Menu Button hinzufügen
#"attr viewFHEM_menu itemNUMMER DummyDeviceFuerDiesenButton|Text des Buttons"
define viewFHEM_menu dummy
attr viewFHEM_menu item1 viewFHEM_status|Status
attr viewFHEM_menu item2 viewFHEM_Keller|Keller
attr viewFHEM_menu item3 viewFHEM_button3|Button3

#DummyDeviceFuerDiesenButton Module hinzufügen
#define DummyDeviceFuerDiesenButton dummy
#"attr DummyDeviceFuerDiesenButton itemNUMMER SensorOderOnOffDevicezBDummyOderSteckdose|reading_zB_state_oder_temperature_oder_humidity_oder_onoff_fuer_click_button|Beschreibungs Text|Position_1_2_3_oder_4"
define viewFHEM_status dummy
attr viewFHEM_status item1 Temp_Wohnung|temperature|Temperatur Wohnung in °C|1
attr viewFHEM_status item2 Temp_Wohnung|humidity|Luftfeuchtigkeit Wohnung in %|2
attr viewFHEM_status item3 Temp_Terrasse|temperature|Temperatur Terrasse in °C|1
attr viewFHEM_status item4 Temp_Terrasse|humidity|Luftfeuchtigkeit Terrasse in %|2
attr viewFHEM_status item5 Deckenstrahler|onoff|Deckenstrahler|2
attr viewFHEM_status item6 Bett_LED|onoff|Bett LED|3

define viewFHEM_Keller dummy
attr viewFHEM_Keller item1 Waschmaschine_Status|state|Waschmaschine|1


thoweiss

Prima,
danke - werde ich gleich einmal ausprobieren.

Gruß,
Thorsten

Rince

Sehr cool.
Wenn wieder zu Hause bin, werde ich es ausprobieren :-)
Wer zu meinen Posts eine Frage schreibt und auf eine Antwort wartet, ist hiermit herzlich eingeladen mich per PN darauf aufmerksam zu machen. (Bitte mit Link zum betreffenden Thread)

Carsten

Hallo,

vielen Dank dafür!

Funktioniert schon gut bei mir. Gefällt mir gut. Auch die Struktur der Definitionen finde ich nicht schlecht.

Bei mir taucht aus mir unbekannten Gründen derzeit immer noch ein zusätzlicher Menüpunkt "undefined" auf und jedes Reading, das 3-4 Zeichen überschreitet passt nicht ins dafür vorgesehen Feld, aber ansonsten schön gemacht. Bitte weitermachen!

Da es über JSON läuft, müsste das mit angepassten Pfaden ja auch außerhalb des FHEM-Servers funktionieren, oder?

Gruß

Carsten

fhem86

Zitat von: Carsten schrieb am Fr, 07 Juni 2013 22:52Hallo,

vielen Dank dafür!

Funktioniert schon gut bei mir. Gefällt mir gut. Auch die Struktur der Definitionen finde ich nicht schlecht.

Bei mir taucht aus mir unbekannten Gründen derzeit immer noch ein zusätzlicher Menüpunkt "undefined" auf und jedes Reading, das 3-4 Zeichen überschreitet passt nicht ins dafür vorgesehen Feld, aber ansonsten schön gemacht. Bitte weitermachen!

Da es über JSON läuft, müsste das mit angepassten Pfaden ja auch außerhalb des FHEM-Servers funktionieren, oder?

Gruß

Carsten


Kannst du deine viewFHEM_menu Config hier mal posten? Was für Readings meinst du die größer 4 zeichen sein?

Ein screenshot wäre auch nicht schlecht.

fhem86

Neu
  • Farben für on off state -> für jeden Button festlegbar
  • Schriftgröße für jeden Button festlegbar

Anleitung:
Optionen hinter onoff:

[on:left>backcolor:00FF00]


(siehe Anhang / see attachement)


[off:left>backcolor:00FF00]


(siehe Anhang / see attachement)


[on:state>color:00FF00>size:1em]


(siehe Anhang / see attachement)


[off:state>color:FF0000>size:1em]


(siehe Anhang / see attachement)


Für diese Bilder war kein Upload Slot Frei
[on:label>backcolor:00FF00>color:000000>size:1.2em]
[off:label>backcolor:FF0000>color:000000>size:1.2em]


z.B.

attr DummyDeviceFuerDiesenButton itemNummer DeviceName|onoff[on:left>backcolor:00FF00][off:left>backcolor:FF0000]|Deckenstrahler|2


Alle Einstellungen sind frei kombinierbar einfach [...][...][...] usw. hintereinander

Carsten

Zitat von: fhem86 schrieb am Sa, 08 Juni 2013 09:33Kannst du deine viewFHEM_menu Config hier mal posten? Was für Readings meinst du die größer 4 zeichen sein?

Ein screenshot wäre auch nicht schlecht.

Hi,

so sieht derzeit meine Testeinrichtung aus:

define viewFHEM_menu dummy
attr viewFHEM_menu item1 viewFHEM_status|Status
attr viewFHEM_menu item2 viewFHEM_Heizung|Heizung
attr viewFHEM_menu room ViewTest

define viewFHEM_status dummy
attr viewFHEM_status item1 Carsten|state|Carsten|1
attr viewFHEM_status room ViewTest

define viewFHEM_Heizung dummy
attr viewFHEM_Heizung item1 bd_Therme|state|Therme|1
attr viewFHEM_Heizung item2 wz_Heizung|measured-temp|Wohnzimmer|1
attr viewFHEM_Heizung item3 bd_Heizung|measured-temp|Bad|2
attr viewFHEM_Heizung room ViewTest


Ich hab zum Testen auch nur die userattribute item1 - item3 angelegt. Das sollte aber doch eigentlich keinen Unterschied machen, oder?

Auf dem Screenshot sieht man beides. Sowohl den Undefined-Eintrag als auch das Reading, dass nicht ins Feld passt.

(siehe Anhang / see attachement)