New FHEM Tablet UI

masterpete23 · 09 Dezember 2015, 22:31:24

Habe nochmal weiter oben gelesen und mein Prob gefunden

<meta name="fhemweb_url" content="http:///wdqwfegegwegewwegewfwwefwef.no-ip.info/fhem33">
das hat mir geholfen.
ich kann das jetzt entweder auf meine lokalen adresse oder die dyndns legen.
Es geht nicht beides oder?

CaptainHook · 09 Dezember 2015, 22:38:34

Zitat von: setstate am 09 Dezember 2015, 22:07:06
ja, genau so geht das. Nur die data-sizex="4" data-sizey="4" braucht es nicht. Das ist nur für die <li> der Gridster Auflistung nötig.

Ich habe jetzt 3 Varianten Ausprobiert

Code Auswählen


        <li data-template="http://x.x.x.x:8083/fhem/ftui/bricks/FC_Wetter_0_34.html"></li>

Code Auswählen


        <li data-template="./bricks/FC_Wetter_0_34.html"></li>

Code Auswählen


        <li data-template="FC_Wetter_0_34.html"></li>

Keine davon klappt

Wenn ich den Inhalt der Dateien direkt zwischen <li></li> kopiere funktioniert es super ... Dann hat die Datei aber 2078 Zeilen

Irgendeine Idee was ich falsch mache?

Grüße,
Stephan

setstate · 09 Dezember 2015, 22:54:48

Variante 2 (File ist im gleichen Folder) und 3 (File ist im Subfolder) sollten funktionieren. Macht es bei mir, gerade probiert.
Wie sieht die Template Datei aus?
Das was zwischen die <li></li> soll, muss im Template zwischen <html><body></body></html>

setstate · 10 Dezember 2015, 01:03:01

Bei der Template-Funktion fehlte immer noch die Möglichkeit, Parameter zu übergeben, das würde das Template noch generischer machen. Überlegt - getan.
Templates können jetzt auch Placeholder für Parameter enthalten.

Beispiel:

Code Auswählen


<div data-type="swiper" data-height="250px" data-width="450px">
<ul>
    <li data-template="templates/wetter.html" data-parameter='{"par01":"fc0_tempMax","par02":"fc0_weatherDay","par03":"fc0_tempMin","par04":"fc0_date"}'></li>
    <li data-template="templates/wetter.html" data-parameter='{"par01":"fc1_tempMax","par02":"fc1_weatherDay","par03":"fc1_tempMin","par04":"fc1_date"}'></li>
    <li data-template="templates/wetter.html" data-parameter='{"par01":"fc2_tempMax","par02":"fc2_weatherDay","par03":"fc2_tempMin","par04":"fc2_date"}'></li>
    <li data-template="templates/wetter.html" data-parameter='{"par01":"fc3_tempMax","par02":"fc3_weatherDay","par03":"fc3_tempMin","par04":"fc3_date"}'></li>
 </ul>
 </div>

Das Template:

Code Auswählen


<html>
<body>
    <div class="left">
       <div data-type="label" data-device="AgroWeather" data-get="par01" data-unit="°C&nbsp;" class="bottom gigantic inline verticalLine"></div>
       <div class="inline">
          <div data-type="label" data-device="AgroWeather" data-get="par02" class="large cell"></div>
          <div data-type="weather" data-device="AgroWeather" data-get="par02" class="bigplus thin"></div>
          min:&nbsp;<div data-type="label" data-device="AgroWeather" data-get="par03" data-unit="%B0C%0A" class="inline medium"></div>
       </div>
    </div><div class="row"></div>
    <div class="left">
        <div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().eeee()+','" class="left large cell darker"></div>
        <div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().ddmm()" class="left large cell darker"></div>
    </div>
</body>
</html>

chris1284 · 10 Dezember 2015, 06:30:27

Zitat von: masterpete23 am 09 Dezember 2015, 22:31:24
Es geht nicht beides oder?

geht beides. du kannst entweder eine 2. TUI in fhem definieren die ein anderes verzeichnis hat (Nachteil du musst 2 pflegen) oder
du erstellst eine 2. index.html mit der externen definition. so musst du nur 2 index pflegen und von innen index.html aufrufen und von außen index2.html .
du kannst aber auch einen apache installieren und einen reverseproxy konfigurieren der alle anfragen von außen intern umlenkt. dann brauchts du nur die lokale adresse in der ui
http://fhemwiki.de/wiki/Apache_Authentication_Proxy quasi nur step 2 und 3.
absichern dann einfach über apache mit htaccess

masterpete23 · 10 Dezember 2015, 07:13:11

Zitat von: chris1284 am 10 Dezember 2015, 06:30:27
geht beides. du kannst entweder eine 2. TUI in fhem definieren die ein anderes verzeichnis hat (Nachteil du musst 2 pflegen) oder
du erstellst eine 2. index.html mit der externen definition. so musst du nur 2 index pflegen und von innen index.html aufrufen und von außen index2.html .
du kannst aber auch einen apache installieren und einen reverseproxy konfigurieren der alle anfragen von außen intern umlenkt. dann brauchts du nur die lokale adresse in der ui
http://fhemwiki.de/wiki/Apache_Authentication_Proxy quasi nur step 2 und 3.
absichern dann einfach über apache mit htaccess

Danke das dachte ich mir schon.
Ich habe nginx im Einsatz und dachte auch das es klappt. Aber das ist nicht so wild da komm ich später mal ran.
Ist es nur die index.html?
ich muss das doch in den möglichen Unterseiten auch setzen oder?

CaptainHook · 10 Dezember 2015, 08:17:05

Zitat von: setstate am 09 Dezember 2015, 22:54:48
Variante 2 (File ist im gleichen Folder) und 3 (File ist im Subfolder) sollten funktionieren. Macht es bei mir, gerade probiert.
Wie sieht die Template Datei aus?
Das was zwischen die <li></li> soll, muss im Template zwischen <html><body></body></html>

Hi ,
Vielen Dank für deine Hilfe

Das "./" war das Problem ... so funktioniert es DANKE

Code Auswählen

<li data-template="bricks/FC_Wetter_0_34.html"></li>

Die Idee mit dem parametrierbaren Templates finde ich super!

Ich hätte noch eine Idee diese noch generischer zu machen:
Wäre es auch möglich nur einen Teil des Readings als Parameter zu übergeben?

€dit: --Anpassung --
So in der Art:

Code Auswählen

<div data-type="swiper" data-height="250px" data-width="450px">
<ul>
    <li data-template="templates/wetter.html" data-parameter='{"#!par01#!":"fc0", ..... }'></li>

 </ul>
 </div>

Und genutzt wird es so :

Code Auswählen


       <div data-type="label" data-device="AgroWeather" data-get="#!par01!#_tempMax" data-unit="°C&nbsp;".... />
       <div data-type="label" data-device="AgroWeather" data-get="#!par01!#_tempMin" data-unit="°C&nbsp;".... />
       <div data-type="label" data-device="AgroWeather" data-get="#!par01!#_tempAvg" data-unit="°C&nbsp;".... />

Der Teil zwischen #! !# und die Zeichen selbst werden durch den Parameter ersetzt. Das spart Parameter und es wurd übersichtlicher

Grüße,
Stephan

€dit:
Wenn dich die Änderung auf github richtig verstehe, würde meine Idee schon funktionieren.
Du ersatz einfach alle vorkommen von 'par01' durch den gewünschten Wert.

Code Auswählen

data = data.replace(new RegExp(key, 'g'), parValues[key]);

Wenn ich also als key "#!par01!# nutze sollte das Problemlos Funktionieren

... SEHR GEIL!!!!

BasWeg · 10 Dezember 2015, 08:22:22

Zitat von: setstate am 09 Dezember 2015, 20:25:39
Hier ein neues DEMO, wie man mit Link-Widget und Swiper-Widget eine Alternative zum Pagetab bauen kann.

Hi,
danke für die Demo, ist schon klasse was hier so alles geht.
Beim Spielen in der Demo ist mir aufgefallen, dass wenn man die Temperatur verstellen will mit der Maus, der anfängt zu swipen wenn man direkt mit gedrückter Maustaste links-rechts bewegt. Fährt man als erstes bei gedrückter Maustaste etwas hoch/runter und dann links/rechts beim Thermostat passts.

Aktuell bin ich bei meinen ersten Schritten mit der GUI und noch in der Konzeptphase. Bei dem Thema mit den "leeren" Buttons bei fa-icons bin ich auch vorgestern reingefallen - und es war die Hintergrund-/Textfarbe.

Danke für die tolle Arbeit!
Viele Grüße

PatrickR · 10 Dezember 2015, 09:30:48

Zitat von: setstate am 10 Dezember 2015, 01:03:01
Bei der Template-Funktion fehlte immer noch die Möglichkeit, Parameter zu übergeben, das würde das Template noch generischer machen. Überlegt - getan.
Templates können jetzt auch Placeholder für Parameter enthalten.

Herrlich!
Jetzt kann ich endlich mein Generatorskript in die Tonne werfen.

Von unterwegs gesendet.

tomster · 10 Dezember 2015, 10:17:23

Übrigens, was mir beim Swipe-Widget aufgefallen ist:
Wenn man ein "autoplay" definiert und dann manuell durch die Seiten swipet, dann hört danach das Autoplay auf.
Ich weiß zwar nicht, ob das ein Feature sein soll, aber bei meinem Setup ist das ein bissl unglücklich. Ich hab einen RasPi mit Touchscreen, der beim Booten einen Browser im Kiosk-Mode startet. Wenn ich nun manuell eingreife, dann stoppt das Autoplay. Auf meiner FTUI-Seite (ist nur 1 Seite, keine Untermenüs) ist jedoch kein Page-Reload-Button (will ich aus optischen Gründen eigentlich auch nicht). Somit bleibt mir nix anderes übrig, als den Pi neu zu starten.

setstate, meinst man kann das ändern? Ich hab leider von der Systematik vom FTUI, bzw. JS zu wenig Plan, um die autoplay-Schleife, bzw. deren Trigger zu verstehen. Vermutlich durch irgendwas wie onload(), oder? Wäre da nicht z.B. ein Retrigger bei vielleicht onmouseout() oder so sinnvoll?

Frage 2:
Beim Range-Widget könnte ich mir auch ein paar weitere Features vorstellen:
- Eine definierbare Skaleneinteilung.
- Ein Parameter um anzugeben, ob die Skaleneinteilung links oder rechts vom Balken oder "unsichtbar" stehen soll. Damit könnten man z.B. auch zwischen 2 Balken mittig die Skala layouten.
- eine "warn"-class, bei der Unterschreitung eines Werts der Balken zu Blinken beginnt.

So, wieder einmal nur Forderungen, Forderungen, Forderungen, ich weiß. Ich geh dann Mal lieber schnell ein bissl was "Donieren". Gehört sich so!

Nobby1805 · 10 Dezember 2015, 11:09:01

Zitat von: tomster am 10 Dezember 2015, 10:17:23
- Ein Parameter um anzugeben, ob die Skaleneinteilung links oder rechts vom Balken oder "unsichtbar" stehen soll. Damit könnten man z.B. auch zwischen 2 Balken mittig die Skala layouten.

wo ist der Unterschiede zwischen "unsichtbar" und "keine"?

ChrisK · 10 Dezember 2015, 11:19:21

Zitat von: setstate am 09 Dezember 2015, 16:58:04
Die alte Version vom CSS zurückspielen ist keine gute Lösung, besser ist, die zu viel benutzen Klassen zu entrümpeln.

Da stimme ich Dir definitiv zu, dass ein Entrümpeln sauberer wäre.

Ich hatte aber bisher nicht die Zeit bei mir nach den einzelnen Unterschieden zu suchen. Da das Layout nach dem Update ziemlich verbogen aussah und ich keine Ahnung hatte, was alles angepasst/korrigiert werden muss, war das Einspielen der alten CSS die schnellere Lösung.

PS: Respekt, was für eine Geduld Du haben musst, so lange wie das Posten eines Beitrags hier im Thread dauert

tomster · 10 Dezember 2015, 11:21:56

Zitat von: Nobby1805 am 10 Dezember 2015, 11:09:01
wo ist der Unterschiede zwischen "unsichtbar" und "keine"?

Momentan wird durch die Angabe der Min-/Max-Werte auch eine farbliche Visualisierung der Grenzwerte definiert. Dann werden aber zugleich auch die Skalenwerte angezeigt. Ich dachte mir eben, dass z.B. durch ein Parameter "invisible" zwar die Visualisierung beibehalten kann, aber keine Skala angezeigt bekommt.
Hab ich das verständlich hinbekommen?

Skusi · 10 Dezember 2015, 11:32:17

Mann, mann, mann....
Ich glaube langsam wird es zur Sucht. Diese UI ist wirklich das gilste was mir untergekommen ist. Leider hat die Sache einen riesen Nachteil: Man hat nie genug Zeit um alles auszubrobieren.

Aber krank im Bett gehts dann schon...

Also riesen Log @ setstate !!!

Nun aber zum Thema:
Ich habe mich mal mit dem genialen swipe beschäftigt, und die tolle Idee gehabt meine switch Gruppe zu swipen. Geht auch , aber bedienen kann man sie nicht mehr !

Schade wäre ne super Geschichte auf kleinstem Raum sich durch viele Schalter zu swipen.

Hab ich nur was übersehen, oder ist das noch geplant, oder einfach nicht machbar (kurz tippen=Switch schalten, lang touch=swipen zur nächsten Seite )

---Skusi

Nobby1805 · 10 Dezember 2015, 12:40:07

Zitat von: tomster am 10 Dezember 2015, 11:21:56
Momentan wird durch die Angabe der Min-/Max-Werte auch eine farbliche Visualisierung der Grenzwerte definiert. Dann werden aber zugleich auch die Skalenwerte angezeigt. Ich dachte mir eben, dass z.B. durch ein Parameter "invisible" zwar die Visualisierung beibehalten kann, aber keine Skala angezeigt bekommt.
Hab ich das verständlich hinbekommen?

Nö, ich habe immer noch den Unterschied zum existierenden und von mir verwendeten "nolabels" nicht verstanden ...