[FHEM-Tablet-UI] User-Demos

[Esjay]

Hab am Wochenende aus dem iOS UI Template hier:
http://mercury.io/blog/free-ios-9-3-iphone-ui-kit-for-illustrator-and-sketch

Die iOS Wetter Icons extrahiert und etwas angepasst.
Sind benannt für die Nutzung mit dem Wunderground Modul.

Evtl. kann es ja jemand brauchen.

Ich finde deine komplette Visualisierung sieht sehr gut aus. Würdest du die oder teile davon bereitstellen?

Danke.

Da würde ich fast für ein eigenes Thema plädieren. Titel "So macht man es richtig: Meine mobile Darstellung der Tablet-UI"
Sieht sehr gut aus.

[gloob]

Ich dachte wir sind hier extra im Thread für Beispiele:

[FHEM-Tablet-UI] User-Demos

[moonsorrox]

Ich finde deine komplette Visualisierung sieht sehr gut aus. Würdest du die oder teile davon bereitstellen?

Danke.

das kannst du ganz einfach selber finden...! klicke auf seinen Namen -> dann auf Profilinformationen/ Beiträge anzeigen -> und dann auf Dateianhänge -> somit findest du von jedem User etwas von Thyraz findest du "ftui-thyraz.zip" da sollte alles drin sein... 

Aber das Teil ist nichts für FTUI, HTML und CSS Anfänger   

[Thyraz]

Werde das dunkle Layout sicher auch bald mal hochladen.
Bin aber noch am Basteln.

Falls ich zuviel Langeweile habe, kann ich das Ganze auch ausdünnen und den Code etwas kommentieren.
Ist aber sicher nicht jedermanns Sache, da ich auf Bootstrap als responsive CSS Framework gesetzt habe.
Muss man sich halt auch erstmal wieder reinfuchsen.

[kalleknx]

Hab am Wochenende aus dem iOS UI Template hier:
http://mercury.io/blog/free-ios-9-3-iphone-ui-kit-for-illustrator-and-sketch

Die iOS Wetter Icons extrahiert und etwas angepasst.
Sind benannt für die Nutzung mit dem Wunderground Modul.

Evtl. kann es ja jemand brauchen.

Bin auch von dem template begeistert und wuerde mich freuen, wenn Du eine aktuelle Version bereitstellen koenntest.

[PingPong]

Hallo Paul,

bin gerade dabei, Dein Seiten ein wenig für mich anzupassen.
Aber erstmal vielen Dank für Deine Arbeit und vor allem dafür, dass Du sie mit uns teilst.
Jetzt zu meinem Problem:
Die Meldungen der Unwetterzentrale werden bei mir nicht so schön, wie auf Deinem Screenshot angezeigt.

Kannst Du mir sagen, wo der Fehler liegt?

Vielen Dank und viele Grüße
Marc

[paul79]

Hallo Paul,

bin gerade dabei, Dein Seiten ein wenig für mich anzupassen.
Aber erstmal vielen Dank für Deine Arbeit und vor allem dafür, dass Du sie mit uns teilst.
Jetzt zu meinem Problem:
Die Meldungen der Unwetterzentrale werden bei mir nicht so schön, wie auf Deinem Screenshot angezeigt.

Kannst Du mir sagen, wo der Fehler liegt?

Vielen Dank und viele Grüße
Marc

Hallo, ich nehme an du sprichst das Widget von chris1284 an, ich habe aber ein eigenes widget_uwz_paul79.js

zu finden hier update_widget_paul79.zip:
https://forum.fhem.de/index.php/topic,37378.msg591642.html#msg591642

Aufruf so:

Code Auswählen Erweitern

<div data-type="uwz_paul79"  data-device="UWZ" data-count="9" data-icon="mini" class="normal shadow"></div>

Gruß Paul

[PingPong]

Hallo,

ok, da habe ich wohl mit Informationen gegeizt. Sorry dafür.
Ich meinte schon Dein Widget. Das verlinkte hatte ich auch eingebunden.
Habe jetzt gerade aber noch einen Fehler in der Benennung gefunden. Vielleicht war es das ja schon:-)
Kann es gerade nicht sicher sagen, da es heute keine Wetterwarnung gibt.

Falls das Problem nochmal auftritt, meld ich mich nochmal.
Ansonsten Danke.

VG
Marc

[Thyraz]

Bin mit meinem Design wohl noch nicht wirklich fertig,
aber aufgrund einiger Afragen über PN lade ich einfach mal den aktuellen Stand hoch

Screenshot sieht man hier:
https://forum.fhem.de/index.php/topic,37378.msg672292.html#msg672292

Edit: Eine Info noch dazu.

Bei dem "template_dimmer.html" wird ganz am Anfang ein Bild für die aktuelle Lampe angezeigt.
Das Image Widget holt sich dafür vom Device im FHEM den Inhalt des Readings "ftuiIcon".
Bei mir hat das jede Lampe, welche in FTUI angezeigt werden soll, als Userreading.

Dieses Userreading wählt je nachdem ob die Lampe gerade an oder aus ist einen Bildernamen wie z.B. "bulb_on" oder "bulb_off".
Zu finden sind die Bilder im Zip im Unterverzeichnis "img".

Edit2: Damit man sich das besser vorstellen kann, hab ich mal noch ein Screenshot von dem Inhalt aus "template_dimmer.html" hier am Post angehängt.

[gloob]

Vielen dank für die Daten. Jetzt suche ich nur noch ein paar Icons von dir 

Der Footer sieht sehr leer aus ohne:

Code Auswählen Erweitern

data-icon="thyraz-office" und so weiter



thyraz-ftui-font ist leider auch nur 0 KB groß.

[Thyraz]

Ups, da hat es wohl irgendwas beim Transfer zerschossen.

Das sollte eigentlich auch ein Verzeichnis und keine Datei sein.
Hab es nochmal neu gezippt und am obigen Post angehängt.

[paul79]

Edit: Eine Info noch dazu.

Bei dem "template_dimmer.html" wird ganz am Anfang ein Bild für die aktuelle Lampe angezeigt.
Das Image Widget holt sich dafür vom Device im FHEM den Inhalt des Readings "ftuiIcon".
Bei mir hat das jede Lampe, welche in FTUI angezeigt werden soll, als Userreading.

Dieses Userreading wählt je nachdem ob die Lampe gerade an oder aus ist einen Bildernamen wie z.B. "bulb_on" oder "bulb_off".
Zu finden sind die Bilder im Zip im Unterverzeichnis "img".

Edit2: Damit man sich das besser vorstellen kann, hab ich mal noch ein Screenshot von dem Inhalt aus "template_dimmer.html" hier am Post angehängt.

Hallo Thyraz, cooles Design fürs Handy 

Kannst du bitte noch zu den Userreading und Icon ein Beispiel aus deiner fhem.cfg geben.

Gruß Paul

[Thyraz]

Klaro:

Code Auswählen Erweitern


ftuiIcon:pct.* {
  my $state = ReadingsVal($name,"pct",0);
 
  if ($state == 0) {
    return "bulb_off";
  } else {
    return "bulb_on";
  }
}


Hatte das am Anfang mit dem Switch Widget gemacht,
aber so sind eben auch mehrfarbige Icons möglich.

[Fixel2012]

@Thyraz

Darf man fragen, wie viel Arbeit in dem Frontend steckt (geschätzte Zeit in Stunden)?

Hattest du dabei schon vorher Erfahrung mit HTML und CSS?

Ist nur rein Interesse halber, da ich für mein (immer noch nicht fertiges) UI bestimmt gute 50 Stunden gebraucht habe. Und meins lang nicht so hübsch aussieht wie deins!

[moonsorrox]

ich hatte das schon einmal erwähnt dieses Design ist Super Klasse, aber nichts für HTML Anfänger.
Im Paket fehlen z.B. die ganzen "bootstrap.css" Dateien ich denke ohne diese geht gar nichts...!

Guckt euch erst einmal die index.html an da sieht man eine "lib/bootstrap.min.css"  es sind aber ich glaube ca. 4 *.css Dateien und noch weitere bootstrap-*.css.map Dateien.
Kenne ich gar nicht.... also erst einmal richtig mit beschäftigen... ich habe Stunden verbracht und es aufgegeben