Tablet AJAX/JavaScript/HTML GUI

[SkyRaVeR]

@infeliz - können wir gerne machen, aber was meinst du mit nur über das Frontend selber?

[Reinhart]

@SkyRaVeR

Danke für die Änderungen, hat nun auf Anhieb funktioniert!
Werde die nächsten Tage ein wenig mit der config.xml experimentieren.

@infeliz

Gute Idee, bei YAF ist das auch so umgesetzt, dort geht alles per Drap & Drop und schreibt die Datensätze direkt  in die fhem.cfg. Mir persönlich gefallen solche Ansätze sehr gut, weil es für jedermann leicht zu konfigurieren ist.

Wollt ihr eure beiden Versionen nicht zu einer Version bringen? Es geht ja um ein und dasselbe Thema, nämlich eine futuristische Gui für Tablet & Co. Den Vorteil der XML Variante sehe ich vor allem in der Übersichtlichkeit und weil die Konfiguration unabhängig von der fhem.cfg ist.

Schöne Grüße
Reinhart

[infeliz]

Hi!

Da muss ich noch etwas hirnen, aber wir werden sicher noch ne Weile brauchen.
Mein Ansatz wäre, weg von divs und hin zu canvas/html5.
Habe da ein paar vielversprechende Ansätze im Netz gefunden.
Das mit der xml hört sich gut an. So brauch man im fhem nichts ändern. Da brauch ich aber noch etwas mehr Input zu.

Das Diagramm habe ich nun seit zwei Tagen laufen. Ein paar Bugs waren noch drin, sollte aber jetzt laufen.
Hier meine Veränderungen:

Code Auswählen Erweitern

define Stecker3Stunde at +*01:00 {\
my ($sec,$min,$hour,$mday,$month,$year,$wday,$yday,$isdst) = localtime(time);;\
my $Now = ReadingsVal("Stecker3Pwr", "energy",0);; \
my $Old = ReadingsVal("Stecker3LastHour", "state", "");; \
my $diffHour = int(100 * ($Now - $Old) + 0.5) / 100;;\
fhem("set Stecker3LastHour $Now");; \
fhem("set Stecker3WattHour $diffHour");; \
fhem("deleteattr Stecker3DiaTag item$hour");;\
if ($hour==0){$hour=24};;\
if ($hour<10){\
fhem("attr Stecker3DiaTag item0$hour $diffHour");;\
}else{\
fhem("attr Stecker3DiaTag item$hour $diffHour");;\
};;\
fhem("save HM_Stecker3.cfg");;\
}
attr Stecker3Stunde alignTime 00:00
attr Stecker3Stunde room 94_Stromkosten

Gruss Heiner

[SkyRaVeR]

hmm - also canvas sind eine nette Sache, aber du wirst nicht von einem Skeleton mit section/div oder wie auch immer weg kommen. Problem bei den canvas ist, dass die ja eigentlich nur für grafische
Elemente gedacht sind. Man kann nette Bildchen mit Effekten zaubern aber ich weiss nicht wie sich das performance technisch auswirkt wenn man alles als gfx rendern lässt. Müsste man mal ausprobieren.

Kurz zur config.xml...
Ich habe das Original etwas "aufgeräumt" und alle möglichen Sachen ausgelagert und versucht es übersichtlicher zu gestalten.
Es gibt ein Grundlayout welches in der Index.html hinterlegt ist(die Balken oben und Unten). Alles andere wie beispielsweise Button/Label/Gruppen habe ich in eigene "Module" ausgelagert.
Ein Modul besteht aus einem .html, .css und .js Anteil.

Um nun z.B. die Temperatur von einem Sensor darzustellen muss zunächst ein "View" angelegt werden.

Code Auswählen Erweitern


  <menu>
    <view id="view_klima">Klima</view>
  </menu>

Dies geschieht in der config.xml durch einen Eintrag im Bereich "menu". Wie der Name schon sagt ist dies auch gleich ein Menüpunkt.
Es reicht jedoch nicht aus nur diesen Eintrag zu machen, da der eigentliche Inhalt des Views noch nicht definiert wurde.
Dies wird durch folgenden Code erreicht:

Code Auswählen Erweitern


<view id="view_klima">
  <device hwid="temp.arbeitszimmer" reading="temperature" unit=" °C" updateInterval="60" displayname="Arbeitszimmer" style="label" />
</view>


Dies wäre eine sehr simple Seite, die nur den Wert eines einzigen Sensors als "Label" (äquivalent zu dem "Label" in der original index.html) darstellt.
Der Aufbau eines "Devices" ist gegliedert in



• hwid - Gerät so wie es in der fhem.cfg heisst
• reading - Name des readings (wie es in fhem bereitgestellt wird)
• unit - optionaler Parameter, der hinter den eigentlichen Wert vom Sensor noch etwas schreibt damit nicht einfach nur steht "20" sondern "20 °C"
• updateInterval - gibt an wie oft der Wert gepolled werden soll (in Sekunden)
• displayname - Anzeigename auf der Seite damit nicht der Name aus der fhem.cfg genommen werden muss
• style - gibt an wie der Wert vom Sensor auf der Seite dargestellt werden soll.
Zum Parameter "style" - das ist ein sehr wichtiger Bestandteil. Hiermit kann man definieren, wie der eigentliche Wert dargestellt werden soll.
Es wird dynamisch zur Laufzeit bestimmt was sich hinter dem "style" versteckt - sprich ein "Modul". Somit lässt sich im Prinzip alles selber customizen,
da man sich nur ein eigenes "Modul" basteln muss bzw. das bestehende abändern.
Wichtig ist, dass es ein Unterverzeichnis im Ordner "modules/<namedesstyles>" mit den 3 Dateien (.html .css und .js) gibt wobei der "Konstruktur" in der .js exakt so heissen muss wie
der Name des Styles, der angegeben wurde (siehe beispielsweise <rootofmyzip>/modules/label/label.*)

Wenn man nun ein eigenes Modul erzeugen will muss man lediglich darauf achten, dass man die Funktionen der "Klasse" device.js in seinem Modul implementiert.
Die Idee ist es im Prinzip von der Basisklasse(device.js) seine eigene abzuleiten und zu erweitern.

Für ein minimales Modul werden die folgenden Methoden benötigt, da diese zur Laufzeit aufgerufen werden:

Code Auswählen Erweitern


string getHTML(); // sollte als return einen validen html string zurück liefern der letztendlich auf die Seite gerendert wird.
void setHWInfo(); // blöder workaround weil oop in Java etwas schlecht funktioniert - man bekommt hier ein Objekt (device) übergeben um Zugriff auf alle HW-Infos zu erhalten -> TODO schöner machen
void addDeviceUpdater(); // der eigentliche Code, der die asynchronen requests auslöst.


Da ich hier wohl den Rahmen sprenge wenn ich noch weiter aushole, ist es sicherlich einfacher bei Interesse in das "Modul" label zu schauen um einen Eindruck zu erhalten wie ich mir das ganze vorgestellt habe.

Noch kurz zur "gruppierten" Darstellung:

Code Auswählen Erweitern


<group id="grptemp.eg" label="Temperaturen im EG" style="group">
<device hwid="temp.arbeitszimmer" reading="temperature" unit=" °C" updateInterval="60" displayname="Arbeitszimmer" style="label" />
<device hwid="temp.hwr" reading="temperature" unit=" °C" updateInterval="60" displayname="HWR" style="label" />
</group>

"Gruppen" sind bei mir eine art Compound-Modul, die aber grundsätzlich gleich aufgebaut sind. 

• id - eindeutiger Name (darf nur 1x vorkommen, sonst werden lustige Sachen  dargestellt!)
• label - Überschrift der Gruppe(werde ich wohl mal in caption umbenennen)
• style - wie auch bei einem device die Darstellungsart

Hier gibt es bereits 2 "Beispiele" in dem .zip (group und group2).

Falls noch Fragen oder Vorschläge sind wie man das ganze noch sinnvoller aufteilen, einfacher machen oder besser umsetzen kann einfach bescheid geben oder selber machen (und bitte hier bereitstellen

Grüsse

[noice]

Man ihr macht es ja richtig professionell .. top

--- Mobil erstellt daher kurz gehalten --

[infeliz]

@SkyRaVeR

Wir müssten uns man zusammen ein Konzept ausdenken. Dein Idee mit der xml finde ich Klasse. Da lässt sich leichter etwas aus der Index heraus was verändern, wenn man eine Konfigurationsmöglichkeit, wie ein Kontextmenü hätte. Ich würde mich am Design versuchen. würdest du den Hintergrund, spricht Datenverarbeitung übernehmen?

Konzeptfragen:
- Was soll alles manipulierbar sein?
- Parametrierung/Erstellung der Widget?
- Verschiebbare Widget per Drag&Drop? (Rasteroberfläche)
- Verschiedene Designs? (nicht jeder mag StarTrek)
- Konfiguration des fhem aus dem Fronend heraus? Ist das möglich?
- sauberes HTML für alle Browser!

Fragen über Fragen!

Gruss Heiner

[Reinhart]

@infelix

Du sprichst mir aus der Seele, vor allem was den letzten Punkt dem Browser angeht.
Mein Tablett ist ein Surface 2 und hier läuft Windows RT drauf, da gibt es keine alternativen Browser, nur den hauseigenen IE 11.

@SkyRaVeR
habe nun schon einige Seiten mit der XML erstellt, ist wirklich eine sehr einfache und schnelle Sache. Was mir dabei auffällt, bei 2 x maligem Klicken des selben Menüpunktes verschwinden die Messwerte und können erst wieder durch F5 angezeigt werden. (Opera).
Leider hat der IE das bekannte Anzeigeproblem und ist so für mein Tablett nicht brauchbar. Ich müsste alles im Style "tablerow" darstellen, dieser funktioniert auch im IE. Danke für die Doku!

LG
Reinhart

[infeliz]

Wetter Widget mit Icons?

[SkyRaVeR]

@infeliz

Wenn das ganze wirklich noch dynamischer werden soll müssen in der Tat ein paar Konzeptfragen mehr geklärt werden...

-> Projektname ?
lcarsFHEM?


- Was soll alles manipulierbar sein?
Am Besten so wenig wie möglich. Je mehr Optionen zur Verfügung stehen desto komplizierter wird es.
Ich denke hier immer an meine bessere Hälfte die auch mit der Oberfläche klar kommen muss

- Parametrierung/Erstellung der Widget?
Das würde ich weiterhin stupide über die config.xml oder einen ähnlichen Mechanismus lösen und das Look & Feel der Widgets wie gehabt in html vorgeben.
Bin aber offen für Ideen.

- Verschiebbare Widget per Drag&Drop? (Rasteroberfläche)
Ist ein nettes Feature über das man in der Tat nachdenken kann.

- Konfiguration des fhem aus dem Fronend heraus? Ist das möglich?
Das ist bestimmt möglich, aber an was genau denkst du da?

- sauberes HTML für alle Browser!
Sehe ich genauso - ist allerdings ein riesen Aufwand die ganzen Browser abzutesten.
Würde hier nur für die gängigsten (chrome, firefox, ie und safari) optimieren.

> - Verschiedene Designs? (nicht jeder mag StarTrek)
Da würde ich zunächst einmal "strikt" sein und diesen Punkt weiter hinten anstellen.
Es gibt im Forum bereits mehrere html UIs die andere Designs bieten. Sicherlich kann man in der Zukunft daran denken sich damit zu beschäftigen, dennoch
sollte erst einmal eine Version fliegen bevor wir uns auf skinning einstellen.

Zusätzlich sollten wir ein GIT-Repo aufsetzen um eine Versionierung zu haben und nicht per Anhang hier updates auszutauschen und uns auf Technologien einigen.
Ich werde morgen mal eins bei github anlegen.

Ansonsten fand ich es eigentlich sehr entspannt den integrierten httpd von fhem zu nutzen anstatt einen anderen zu verwenden.
Auf der anderen Seite bieteten natürlich ein andere Webserver(nginx/apache etc) viel mehr Möglichkeiten durch php, servlets und co.

Ich übernehme gerne den Backend-Anteil, da ich beim Designen immer graue Haare bekomme wenn mal wieder die ganzen divs nicht so wollen wie ich

Was genau meinst du mit einem Kontext-Menü?

@Reinhart
Ich kenne den Bug und werde ihn die Tage beheben. Das dürfte eigentlich nicht am IE liegen, sondern an einem dummen Fehler von mir. Ich cache die gerenderte Seite ohne vorher auf die ausgelesenen Werte zu warten
Arbeite gerade noch an einer (hoffentlich) besseren Lösung der Klassen um neue "widgets" noch einfacher bzw. übersichtlicher erstellen zu können.
Der alte Code ist zu etwas späterer Zeit entstanden und leider etwas unübersichtlich.

[Reinhart]

Super Danke,

das gleiche Problem habe ich natürlich auch am Handy (Winphone), hier gibt es zwar einen alternativen Browser (UC Browser) aber der zeigt den selben Fehler.

- Konfiguration des fhem aus dem Fronend heraus? Ist das möglich?
Das ist bestimmt möglich, aber an was genau denkst du da?

schaut euch einmal diese Funktion im YAF an, die machen den umgekehrten Weg. Es wird direkt aus der Weboberfläche die Liste der Devices angezeigt und man braucht den benötigten Device aus einer Dropdown Listenfeld nur auswählen. Im YAF wird der Eintrag dann direkt in die fhem.cfg zurück geschrieben, was in eurem Fall die XML wäre. Die benötigten Routinen sind auch alle in JS geschrieben und müssten nicht mehr neu erfunden werden.

so sieht der Eintrag dann aus, der mit einem Mausklick erstellt wurde:

Code Auswählen Erweitern

attr Schrankbeleuchtung yaf_1 id=106,name=iteasylamp,showicon=1,fhemname=Schrankbeleuchtung,showlabel=1,x_pos=515,y_pos=463,labeltype=Name
Ebenfalls enthalten sind die X, Y Koordianten wo das Objekt dann am Bildschirm liegt. Jedesmal wenn mit der Maus das Objekt verschoben wird, werden die X und Y Koordinaten einfach korrigiert.

Ich will euch natürlich hier nichts aufzwingen, ist nur so eine Idee um die Sache eventuell zu vereinfachen.

LG
Reinhart

[infeliz]

Zwischenstand:

Noch ein paar Icons und ich bin fertig.

Gruss

[infeliz]

Fertig!

Parameter:

Code Auswählen Erweitern

attr viewFHEM_config item44 weatherviewborder_top_bottom|color|000000
attr viewFHEM_config item45 weatherviewtitle|size|1.5em
attr viewFHEM_config item45 weatherviewtext|size|1.2em

Icons in einen Ordner "icons" packen.

Gruss

[noice]

Sch... Wetter bei dir *gg*

[infeliz]

kannste laut sagen!

[SkyRaVeR]

soo - ich hab noch ein bissl gebastelt und bräuchte nochmal wen, der mir einen Gefallen tut und kurz mit einem Windows-Tablet testet ob
a) die Werte bei einem Wechsel zwischen den einzelnen Menüpunkten noch vorhanden sind
b) ob sich dort die gruppierten Werte mit dem Style "group" frei platzieren lassen (anclicken und Finger bewegen)

Es hat sich ansonsten auch sehr viel geändert. Die "Klassen" sind überarbeitet und ich habe das Framework in jQuery geändert.

Wenn das soweit funktioniert (also Werte bleiben erhalten und Items lassen sich frei bewegen) müssen wir mal anfangen die Konzepte zu erstellen.

Danke für Testen