Tablet AJAX/JavaScript/HTML GUI

[infeliz]

Erste Gehversuche mit Canvas!

[noice]

so jetzt hab ich das problem das die schrift nicht wirklich übernommen wird .. die beschriftung der buttons nicht zentriert ist und ich keine Uhrzeit sehe 

[infeliz]

- Das die Beschriftung nicht zentrisch ist, ist Absicht. Auf Wunsch kann ich das gerne parametrierbar machen.
- Den Bug mit der LCARS-Schrift konnte ich noch nicht lösen. Zur Zeit muss die Schriftart auf dem Anzeige-Device installiert sein, später soll der automatische Download vom Server erfolgen
- Das mit der Uhrzeit werde ich korregieren. Habe wohl ne feste Breite des DIV eingegeben und diesen auf die schmale LCARS-Schrift angepasst. Die Uhrzeit ist da, wird aber in der nicht vorhandenen zweiten Zeile angezeigt. Update kommt die Woche noch.

[noice]

Top.. lass dir Zeit. Eilt nicht.
Danke

--- Mobil erstellt daher kurz gehalten --

[infeliz]

Der leichte Teil ist geschafft.

[SkyRaVeR]

Hallo zusammen,

da ich das Frontend ganz schick finde, aber persönlich den Aufbau etwas suboptimal finde habe ich einen Fork des Projektes erstellt.
Im Gegensatz zum Original wird das Frontend über eine config.xml konfiguriert und aus der monströs großen und unübersichtlichen index.html sind kleinere "Module" geworden.
Styling erfolgt über das jeweilige .css eines Moduls.
Da ich weniger der GUI-Designer bin sondern eher Entwickler benötigen einige Divs noch etwas Finetuning damit es besser ausschaut.
Ich poste dennoch mal einen sehr frühen Entwicklungsstand weil ich mich frage ob überhaupt Interesse an einer umstrukturierten Version besteht und natürlich um Feedback zum Aufbau zu erhalten.
Um es Testweise zum Laufen zu bekommen einfach nach <fhemroot>/www/ entpacken und die config.xml anpassen.
Diese ist sehr nah am Original gehalten und ein Beispiel enthalten.

Ich freue mich auf Feedback...

Gruß

[infeliz]

Cool, das noch jemand mitmacht.

Ja, die index ist monströs. Habe es so geerbt, werde versuchen, es noch zu verbessern. Zur Zeit steht aber die Funktion im Vordergrund.

Ich hab bestimmt mal die ein oder andere Frage. Das Design mit den Div's gefällt mir persönlich nicht so gut. Überlege, ob man das ganze nicht komplett über HTML5/Canvas besser gestalten könnte.

Gruss Heiner

PS: bei mir ist irgendwie Chaos.

[noice]

Erstmal super das nicht nur einer basteln muss
@skyraver ... tolle sache das mit der config. Ich denke aber in zukunft wäre es für viele leichter das ganze in ein Fhem modul zu packen von deraus ich die config editieren kann. So wie es momentan noch ist hat man halt immer irgendwie 2 baustellen. einmal fhem und eimal die cfg. Wenn man das irgendwie vereinen könnte wäre das siche ne super sache für andere die dieses fontend nutzen möchten sicher auch einfacher ...

Ich bin leider zu blöd für programmierungen allgemein .... sonst würde ich mich schon mit reinhängen

[noice]

okay .. das kaos schein folgender Eintrag zu sein:

Code Auswählen Erweitern

<device hwid="dummy" reading="dummy" updateInterval="0" displayname="" style="simplespace"></device>

[elfrinjo]

Hallo zusammen,

ich habe hier noch zwei LCARS / JS Frameworks gefunden. Vielleicht ist ja was interessantes dabei.
http://lcarsui.herokuapp.com/
http://garrett-.github.io/lcars/#

[SkyRaVeR]

okay .. das kaos schein folgender Eintrag zu sein:

Code Auswählen Erweitern

<device hwid="dummy" reading="dummy" updateInterval="0" displayname="" style="simplespace"></device>

Gut möglich. Ich habe evtl einen kaputten Stand erwischt vorhin. Mein lokales svn-repo von dem Projekt ist irgendwie kaputt gespielt -.-
Ich versuche nicht mit absoluten Pixel-Angaben zu arbeiten um einen hohen Freiheitsgrad für andere Entwickler zu behalten...
Das "Dummy device" hier verwende ich für einen Zeilenumbruch. Werde ich aber versuchen noch eleganter zu lösen.

Habe vorhin ganz vergessen den Aufbau zu erklären...
Also eigentlich braucht man für meine Version nur die config.xml anfassen und nicht die fhem.cfg.
Die einzige Bedingung ist, dass alle Devices bereits in FHEM angelernt und bekannt sind.
Grund dafür ist, dass ich bei meinen ersten Gehversuchen die Syntax und etwas eigentümliche Verschachtelung in der fhem.cfg als verwirrend empfunden habe.
Ich habe versucht "Design" und Funktion so gut wie möglich zu trennen.

Nun aber noch einmal kurz zum Aufbau:
config.xml

Code Auswählen Erweitern


  <menu>
    <view id="view_status">View 1</view>
    <view id="view_klima">View 2</view>
  </menu> 

Die id kann frei gewählt werden (allerdings darf der Name nicht doppelt vergeben werden) und wird verwendet um einzelnen Geräte auf einer Seite darzustellen

Code Auswählen Erweitern


  <views>
    <view id="view_status">
      <device hwid="temp.wohnzimmerr" reading="temperature" updateInterval="3600" displayname="Wohnzimmer" style="label" />
    </view
    ...
</views>

In diesem Bereich werden die einzelnen Elemente einer Seite zur Darstellung angegeben. In diesem Beispiel wird die Temperatur eines Sensors dargestellt in einem "Label"

• hwid - Gerätename wie er in FHEM definiert wurde
• reading - Wert der gelesen werden soll (hier z.B: Temperatur)
• updateInterval - Aktualisierungsrate in Sekunden
• displayname - Name wie er auf der Seite dargestellt werden soll
• style - "Modulname" der die Darstellung und evtl. erweiterte Funktionalität mit sich bringt

Das war es im Großen und Ganzen.
Das Aussehen und Verhalten des Label kann unter ../modules/label/label.html / label.css und /label.js beliebig angepasst werden.
Beim Anpassen ist lediglich zu beachten, dass der "Konstruktor" in label.js genauso geschrieben wird wie beim device angegeben, da diese sachen dynamisch gecasted werden.

Wenn ich morgen Zeit finde werde ich mal das Basis layout auf html5 flex boxen umstellen damit neu eingefügte Sache immer korrekt angeordnet werden und nicht mehr so wirr wie in den Screenshots...

Ein konfigurieren via Modul ist kein Problem und "schnell" geschrieben, allerdings muss ich erstmal den grundlegenden "Designpart" fertig machen und noch ein paar mehr Basis-Module bereit stellen.

Die beiden Designs die gepostet wurden finde ich auch gar nicht schlecht

[infeliz]

Ich verzweifle langsam. Verstehe einfach nicht, wie die Daten einlegen werden.

[casc]

Ich freue mich auf Feedback...

Moin,

sehr gerne. Für einen Neueinsteiger ist die große index.html erstmal abschreckend und unübersichtlich. Die XML-Variante gefällt mir daher eigentlich ganz gut, man findet schnell rein und bekommt seine gewünschte Darstellung. Funktion ist bei mir allerdings noch nicht gegeben, obwohl er die Daten per JSON korrekt anfragt und auch geliefert bekommt zeigt er rechts neben dem Namen nichts an.

Ein paar Pfade sind hardcoded:
modules/simplespace/simplespace.js:     new Ajax.Request('/fhem/skyTrek1/modules/simplespace/simplespace.html', {
modules/togglebutton/togglebutton.js:   new Ajax.Request('/fhem/skyTrek1/modules/togglebutton/togglebutton.html', {

Kann also nicht klappen, wenn nach /fhem/skyTrekW/ entpackt wurde. Das allein hat bei mir aber auch noch keinen Erfolg gebracht. Breche für heute erstmal ab, wollte dich aber ermutigen dran zu bleiben und ggf. nochmal eine alternative Version anzuhängen.

Top Arbeit! Gruß
Carsten

[infeliz]

Hi!

Eigentlich muss man an die index.html gar nicht ran, aber ich werde das Erbstück mal bei Gelegenheit etwas aufräumen.
Hab mich ja am Anfang auch etwas schwer damit getan.

Nach ein paar verzweifelten Versuchen hab ich nun auch eine Lösung zum Einlesen von .log-Dateien gefunden, um Diagramme füttern zu können. Sollte also nicht mehr all zu lange dauern, bis ich euch das Ergebnis präsentieren kann.

Gruss Heiner

[infeliz]

boah! Endlich geschafft!