New FHEM Tablet UI

DJ_SAMMY190 · 06 April 2015, 14:06:27

Cool probiere ich heute abend mal direkt aus, wenn ich zu hause bin. Danke schön

Gesendet von meinem Z30 mit Tapatalk

setstate · 06 April 2015, 15:44:59

Zitat von: Markus Hermann am 06 April 2015, 13:21:52
Danke, aber ohne Dein geniales UI wäre das nicht möglich.

Und danke für den data-part-Tipp, klappt super. Hast Du auch vielleicht eine Idee warum beim IPad die "desired-temp"-Anzeige so verschoben ist?

Gruß
Markus

ich vermute, das liegt an der Breite. Dadurch wird das Input Element verschoben. Versuche spasseshalber mal, die Basis eines Feldes breiter zu machen:

Zitat<meta name="widget_base_width" content="140">

bmwfan · 06 April 2015, 16:42:40

Zu den Links:
Wenn ich das Frontend durch Eingabe des Browserpfades im Browser eingebe (http://192.168.178.1:8083/fhem/www/tablet/index.html), gehen alle weiteren Links zu Unterseiten, allerdings lädt es keinerlei Inhalte aus fhem (Zustände, Werte..). Da stimmt dann anscheinend ein interner Pfad nicht.
Rufe ich das Frontend aus FHEM auf, Werden die Inhalte geladen aber, da das root-Verzeichnis /fhem ist, geht kein Link. Ändere ich in der index.html den Pfad zum Link ab

Code Auswählen

<div class="container">
				<a id="room_index" href="index.html" class="cell fa-stack fa-2x">
					<i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(111,69,0);"></i>
					<i id="fg" class="fa fa-stack-1x fa-home" style="color: rgb(42, 42, 42);"></i>
				</a>
				<a id="room_eg" href="./www/tablet/eg.html" class="cell fa-stack fa-2x">
					<i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(111,69,0);"></i>
					<i id="fg" class="fa fa-stack-1x fa-film" style="color: rgb(42, 42, 42);"></i>
				</a>
</div>

geht der Einsprung und seltsamerweise auch der Rücksprung zur index.html, aber der 2.te Aufruf von eg.html geht nicht, da dann /fhem/www/tablet/www/tablet/eg.html angesprochen wird.

Ich habe auch schon versucht, in der fhem-tablet-ui.js die Pfade in Zeilen 180, 214, 295 anzupassen.

Code Auswählen

$.ajax({
		async: true,
		url: $("meta[name='fhemweb_url']").attr("content") || "../fhem/www/tablet/",
		data: {
			cmd: cmdline,
			XHR: "1"
		}
	})

Hatte aber keine Auswirkugn (zumindest nichts bemerkt).

Hat noch jemand eine Idee. Da ich Beispiele gesehen habe mit verteilten html-Seiten, muss es ja gehen.

Gruß Jürgen

bmwfan · 06 April 2015, 17:05:22

Icon wird nicht angezeigt.

Der Code ist meiner Meinung nach korrekt, aber das icon wird trotzdem nicht angezeigt. Ich zeige hier den Status meines Müllkalenders an. Die state sind "Nichts", "Papier", "Gelber Sack" und "Restmüll" und damit strings. Da dies die einzigen strings sind, die ich anzeigen will, vermute ich, dass das Problem damit zusammenhängt.

Code Auswählen

<li data-row="3" data-col="4" data-sizex="1" data-sizey="1">
	<header>M&Uuml;LL</header>
	<div data-type="label" data-device="du_abfallkalender" data-get="state" data-icon="fa-trash-o" class="cell"></div>
</li>

Hat jemand einen Ansatz?

setstate · 06 April 2015, 17:41:36

Zitat von: bmwfan am 06 April 2015, 17:05:22
Icon wird nicht angezeigt.

Der Code ist meiner Meinung nach korrekt, aber das icon wird trotzdem nicht angezeigt. Ich zeige hier den Status meines Müllkalenders an. Die state sind "Nichts", "Papier", "Gelber Sack" und "Restmüll" und damit strings. Da dies die einzigen strings sind, die ich anzeigen will, vermute ich, dass das Problem damit zusammenhängt.

Code Auswählen Erweitern
<li data-row="3" data-col="4" data-sizex="1" data-sizey="1"> <header>MÜLL</header> <div data-type="label" data-device="du_abfallkalender" data-get="state" data-icon="fa-trash-o" class="cell"></div> </li>

Hat jemand einen Ansatz?

Hallo bmwfan,

Label hat keine Eigenschaft "Icon". Da musst du ein Symbol-Widget nehmen, zusätzlich zum Label.
Das Label zeigt deine Werte aus state an und das Symbol ist statisch, d.h. ohne Einfluss durch eine state-Änderung.

Code Auswählen

 
   <div data-type="symbol"  data-icon="fa-trash-o" class="cell"></div>
   <div data-type="label" data-device="du_abfallkalender" data-get="state" class=""></div>

Wenn sich das Icon noch nach dem State Werte farblich (oder vom Symbol her) ändern soll, musst du noch die data-icons, data-get-on und data-on-colors setzten (alle drei)

Code Auswählen


<div data-type="symbol" data-device="du_abfallkalender" data-icons='["fa-arrow-up","fa-arrow-right","fa-arrow-down"]'   data-on-colors='["#32a054","#6666cc","#ad3333"]' data-get-on='["Wert1","Wert2","Wert3"]' class=""></div>
    <div data-type="label" data-device="du_abfallkalender" data-get="state" class=""></div>

jual · 06 April 2015, 18:56:00

Zunächst einmal möchte ich allen beteiligten Entwicklern an diesem genialen und einfach zu konfigurierenden Frontend gratulieren. Bisher hatte ich versucht, eine Oberfläche mittels Dashboard zu erstellen. Nachdem ich nun alle Infos für eine Übersicht zusammen hatte, wollte ich mich an die Optimierung des Designs begeben.

Nachdem ich allerdings auf dieses tolle Frontend für Tablets aufmerksam geworden bin, habe ich das erstmal zurück gestellt und auch die geplanten Versuche mit SmartVisu erst einmal zurück gestellt. Zunächst stand für dieses Wochenende allerdings erst einmal der Umzug von meinem alten Raspi auf das 2er Raspi an. Danach habe ich mich nur noch mit diesem Frontend beschäftigt und muss das Ergebnis nun nur noch von meiner Frau freigeben lassen

Als Ergänzung füge ich mal mein bisheriges Dashboard und das neu erstellte Frontend als Screenshots hinzu. Ein paar Optimierungen bzw. Ergänzungen fehlen natürlich noch. Ganz unten ist noch ein wenig Platz und bei Verwendung von WebviewControl kann ich wahrscheinlich noch ein paar Texte vergrößern. Außerdem fehlen noch weitere Detailseiten zu den Räumen bzw. die Einstellungsseite. Spannend dürfte die Realisierung eines Weckers werden, den ich auf dem Dahboard bereits umgesetzt habe. Hier kann ich für jeden Tag eine andere Weckzeit definieren.

Natürlich habe ich auch noch ein paar Anmerkungen bzw. Ideen/Wünsche.

Wäre es zum Beispiel möglich, die Formatierung von Icons mittels der vordefinierten Klassen (z.B. "fa-rotate-90") zu nutzen. Idealerweise sogar in Abhängigkeit von den Werten. Also so etwas wie data-css oder data-css-array. Ein Hinweis auch noch zur Doku auf der Projektseite. Hier ist bei "label" tatsächlich auch "Icon" als Einstellung angegeben. Ähnlich, wie bei einem vorherigen Beitra hier, habe ich eine Weile damit gekämpft, in der Hoffnung über das Icon den Text legen zu können

.

Ansonsten erstmal VIELEN DANK!!!!!

setstate · 06 April 2015, 18:59:39

Zitat von: bmwfan am 06 April 2015, 16:42:40
Zu den Links:
...

Gruß Jürgen

Hallo Jürgen,

leider kann ich deine Link-Problematik theoretisch und praktisch nicht nachvollziehen.
Aber, wenn die Links relativ nicht gehen, dann hinterlege sie doch statisch, so wie sie bei der Eingabe in der Browser URL-Eingabe ordentlich funktionieren. Der lokale Pfad auf einem Webserver sieht meist nur so ähnlich aus, wie dann die URL. Lass dich dadurch nicht all zu sehr verwirren. ./www ist der lokale Pfad, den der Webserver dir unter xyz:8083/fhem anbietet. Wenn du zwei Tablet-Seiten im Browser aufrufen kannst, übernimm einfach die URLs in den Link.

Seite index.html

Code Auswählen


 <div data-type="button" data-url="http://192.168.178.1:8083/fhem/www/tablet/index2.html"></div>

Seite index2.html

Code Auswählen


 <div data-type="button" data-url="http://192.168.178.1:8083/fhem/www/tablet/index.html"></div>

setstate · 06 April 2015, 19:19:22

Hallo Jual,

vielen Dank für dein Posting. Die Umsetzung ist doch toll gelungen und relativ schnell, denke ich!!!
Wecker wäre natürlich nochmal ein schönes Widget Projektvorhaben

Zum Thema fa- Formatierung geht bestimmt was zu machen, da gibt es ja einige schöne Gimmiks.

Ihr habe Recht, das steht wirklich was von Icon beim Label in der Readme. Peinlich! Ist jetzt angepasst. Vielen Dank für den Hinweis.

mw_fhem · 06 April 2015, 21:34:55

Ein Aufruf an alle, die hier fleißig schreiben, testen, neues hinzuschreiben: Bitte auch im Wiki mitarbeiten! Marios tolle Arbeit wird damit noch ein Stück mehr gewürdigt wie ich finde. Ich habe zwar angefangen, aber Mario hat ja jeden Tag mindestens ein Update. Da komme ich nicht nach. Gemeinsam wird das aber

bjoernbo · 06 April 2015, 22:46:34

Hallo Jual,

mich interessieren deine Einträge "Spritpreise" und die "Pollenvorhersage". Kannst du dazu entsprechenden Output liefern, sprich wie hast Du das in FHEM umgesetzt? Danke.

bjoernbo · 07 April 2015, 08:59:07

Hallo,

ich möchte gerne für meinen Kalender, dass in einer Zelle die Beginnuhrzeit und Enduhrzeit ausgewiesen wird. Zwischen den Zeiten soll ein "bis" bzw. ein "-" stehen.

Zitat....
<td class="tg-031e"><div type="label" device="Kalenderview" data-get="today_001_btime">
<div data-type="label" class="cell">bis
<div type="label" device="Kalenderview" data-get="today_001_etime"></div>
</div>
</div>
</td>

###

Zitat....
<td class="tg-031e"><div type="label" device="Kalenderview" data-get="today_001_btime">
bis
<div type="label" device="Kalenderview" data-get="today_001_etime">
</div>
</div>

</td>

Wie muss hierfür der Code richtig aussehen $:-\$

nesges · 07 April 2015, 09:55:41

Zitat von: setstate am 03 April 2015, 17:53:04
Danke nesges für die Idee. Ich habe die Funktionalität übernommen, aber in etwas geänderter Form.
Mit dieser Änderung kommt das circleMenu jetzt als eigenständiges Widget.

Sehr cool! Danke!

Was hier in den letzten Tagen wieder passiert ist... Klasse!

setstate · 07 April 2015, 10:36:34

Zitat von: bjoernbo am 07 April 2015, 08:59:07
Hallo,

ich möchte gerne für meinen Kalender, dass in einer Zelle die Beginnuhrzeit und Enduhrzeit ausgewiesen wird. Zwischen den Zeiten soll ein "bis" bzw. ein "-" stehen.

###Wie muss hierfür der Code richtig aussehen $:-\$

Hallo bjoernbo,

was soll rauskommen? Drei Zeilen? dann wäre das so richtig:

Code Auswählen


<div id="container">
  <div id="widget1"></div> 
  bis
  <div id="widget2"></div> 
</div>

Oder soll alles in eine Zeile? Dann muss das Gridster-Panel natürlich breit genug sein. Ist das gegeben?
Und dann bedarf es noch einer bestimmten CSS Klasse, die ich noch anlegen werde.

Brockmann · 07 April 2015, 10:43:25

Zitat von: setstate am 05 April 2015, 21:51:24
Das werde ich demnächst angehen, das gefällt mir auch nicht so gut. Größer machen will ich das Thermostat-Widget aber auch nicht, als Anzeige reicht die Größe mir völlig.
Ich will versuchen, dass sich dann das Soll-Temp-Label beim Bedienen raus bewegt und damit sichtbar bleibt.

Das Design des Thermostat-Widgets finde ich auch etwas suboptimal, weil beim Verstellen eben immer der eigene Finger im Weg ist.
Nur mal als Anregung: Es würde schon viel helfen, wenn die Skala quasi einmal von unten nach oben gespiegelt wäre, also unten geschlossen und oben offen. Meist bewegt man sich ja ohnehin im mittleren Bereich, und dann wäre der Finger unterhalb der Zahlenanzeige und nicht genau drüber. Wenn man die Soll-Anzeige dann vielleicht noch ein Stück nach oben schiebt, müsste sie eigentlich auch beim Ändern jederzeit zu sehen sein.

bjoernbo · 07 April 2015, 10:49:53

ZitatOder soll alles in eine Zeile? Dann muss das Gridster-Panel natürlich breit genug sein. Ist das gegeben?
Und dann bedarf es noch einer bestimmten CSS Klasse, die ich noch anlegen werde.

Alles in einer Zelle. Also

"12:00:00 bis 18:00:00"

<t001_btime> bis <t001_etime>

Die breite sollte nicht das Problem sein. Habe die Werte einfach mal so eingetragen und es passte.
Hast Du schon einen Zeitpunkt in Aussicht?