[FUIP] Der flexible HTML-View oder auch selbstgebastelte Views

[Thorsten Pferdekaemper]

Hi,
...und wieder eine neue FUIP-Version. Der HTML-View kennt jetzt so etwas ähnliches wie die Variablen der View Templates. Dafür fügt man ins HTML etwas wie z.B. das hier ein:

Code Auswählen Erweitern


<fuip-field fuip-name='device' fuip-type='device'>somedevice</fuip-field>

Das kann man im HTML tatsächlich überall hinschreiben und nicht nur da, wo es normalerweise in HTML möglich wäre. Die Wirkung ist wie folgt:

• Nach dem nächsten Öffnen des Konfigurations-Popups erscheint "device" mit dem Wert "somedevice" als neues Feld unter dem HTML-Teil. Dabei kommt "device" von der Angabe bei "fuip-name" und "somedevice" ist einfach der Inhalt des <fuip-field>-Tags.
• Das neue Feld kann man jetzt ändern wie jedes andere auch. Durch die Angabe "device" bei "fuip-type" weiß FUIP auch, dass es die entsprechende Werthilfe liefern muss. (Momentan geht nur type "device" und "text". Der Rest kommt noch.)
• Beim Rendern des Views (also wenn der Kram angezeigt wird), wird der <fuip-field>-Kram durch den Inhalt des Felds ersetzt. Im obigen Beispiel kann man also das HTML mit einem variablen Device angeben.

Einfach so macht das ganze natürlich keinen Spaß. Das geht aber auch in einem View Template macht, wobei man diese "HTML-Felder" auch als View Template Variablen setzen kann. Das Ergebnis ist, dass man im Prinzip ganz eigene Views zusammenbasteln kann.

Gruß,
    Thorsten

[Thorsten Pferdekaemper]

Hi,
da war grad noch ein Fehler drin, so dass das bei locked=1 nicht ging. Sollte jetzt auch gehen.
Gruß,
   Thorsten

[DasQ]

Hast du da ein wenig plastischeres Beispiel?


Und mal ne grundsätzliche Frage. Tabletui setzt ja auf anfassbare html Dateien. Wie ist das bei FUIP?
Ist das wie php ein preprozessor der das ganze nur interpretiert?

[Thorsten Pferdekaemper]

Hast du da ein wenig plastischeres Beispiel?

Also mal für alle ohne Phantasie...
FUIP hat (bisher) noch nichts vorgefertigtes für Fensterkontakte. Man kann sich das aber mit dem HTML-View z.B. so zusammenbasteln:

Code Auswählen Erweitern


<div data-type="symbol" data-device="HM_5593B0"
     data-states='["open","closed"]'
     data-icons='["oa-fts_window_1w_open","oa-fts_window_1w"]'
     data-colors='["#900","#099"]' >
</div>

Blöd ist dabei aber, dass man das für jedes einzelne Fenster machen muss. Klar, das geht mit Cut&Paste, aber spätestens, wenn man was ändern will, ist es doch etwas lästig.
Inzwischen kann man sich aber ein View-Template mit einem HTML-View bauen, das folgendes enthält:

Code Auswählen Erweitern


<div data-type="symbol" data-device="<fuip-field fuip-name="device" fuip-type="device">HM_5593B0</fuip-field>"
     data-states='["open","closed"]'
     data-icons='["oa-fts_window_1w_open","oa-fts_window_1w"]'
     data-colors='["#900","#099"]' >
</div>

Das macht erst einmal genau dasselbe, aber jetzt kann man das Feld "device" im View-Template als Variable markieren. Dadurch hat man einen neuen View Type mit dem Feld "device", welches man wie andere View Types verwenden kann. Das schließt auch eine Werthilfe für das "device"-Feld mit ein.
Ist es jetzt klarer? Wenn nicht, dann einfach mal ausprobieren.

Und mal ne grundsätzliche Frage. Tabletui setzt ja auf anfassbare html Dateien. Wie ist das bei FUIP?
Ist das wie php ein preprozessor der das ganze nur interpretiert?

Das ist jetzt für mich gar nicht so einfach zu beantworten, da es ein paar Voraussetzungen enthält, die ich für falsch halte bzw. nicht verstehe. Ich versuch's aber trotzdem.
Bei FUIP gibt es im Prinzip keine HTML-Dateien. FUIP beantwortet die Requests des Browsers, indem es die Seiten "on the fly" generiert. Ausgangspunkt ist dabei eine Datenstruktur, die in etwa dem entspricht, was in den FUIP....cfg-Dateien steht, angereichert durch die Angaben in den Attributen des FUIP-Device selbst. Das ist konzeptuell ähnlich wie bei FHEMWEB. Allerdings verwendet FUIP die FTUI-Widgets. Man könnte also sagen, FUIP ist ein on-the-fly FTUI-Generierer. Ich würde nicht sagen, dass FUIP irgend etwas "interpretiert", da das eine (Programmier-)Sprache voraussetzen würde.
Es kann auch durchaus sein, dass sich FUIP in Zukunft von FTUI wegbewegt.
Hilft das jetzt weiter? Falls nicht, dann empfehle ich, erst einmal ein bisschen mit FUIP herumzuspielen und etwas konkreter zu fragen.
Gruß,
   Thorsten

[Devender]

Hallo Torsten,

ich habe seit einigen Tagen ein Problem bei der Ansicht meiner FPUI Seite auf Tablet und Handy Browsern.
Das Betrifft allerdings nur die Bereich in denen ich einen HTML VIEW integriert habe.

Die Ansicht auf dem Tablet wird farblich unterschiedlich (hier weiss) angezeigt und die Ansichten für das PinPad, WebCams oder auch die Bilder z.b das Bild für GAESTEZIMMERSTEUERUNG werden nicht angezeigt bzw. sind weiss.

Auf dem normalen Browser sieht alle so aus wie es soll und ist anklickbar.

Hier auch mal ein Auszug des html-Codes (der ist sehr einfach) von der Bezinpreisansicht:

Code Auswählen Erweitern


  <table>
                <tr>
                <th> <div class="left">Super E5:</th>
                <th><div  class="inline" data-type="label" data-device="Benzinpreis_Nidderau" data-get="SuperE5"
                                data-unit="€" class="small"></div>
                        </th>
                </tr><tr>
                <th> <div class="left">Super E10:</th>
                <th><div  class="inline" data-type="label" data-device="Benzinpreis_Nidderau" data-get="SuperE10"
                                data-unit="€" class="small"></div>
                        </th>
                </tr>
        </table>
</li>


Im Ergebnis wird auf dem Notebook alles korrekt angezeigt. Auf dem Tablet ist diese Kachel dann einfach leer.

Ich habe am 01.01.2019 ein Update gemacht und auch Sourcen von FPUI waren dabei:

Code Auswählen Erweitern

2019.01.01 17:05:08 1: UPD FHEM/42_FUIP.pm
2019.01.01 17:05:09 1: UPD FHEM/lib/FUIP/View.pm
2019.01.01 17:05:09 1: UPD FHEM/lib/FUIP/View/Cell.pm
2019.01.01 17:05:09 1: UPD FHEM/lib/FUIP/View/Dialog.pm
2019.01.01 17:05:09 1: UPD FHEM/lib/FUIP/View/HeatingControl.pm
2019.01.01 17:05:09 1: UPD FHEM/lib/FUIP/View/Html.pm
2019.01.01 17:05:09 1: UPD FHEM/lib/FUIP/View/MenuItem.pm
2019.01.01 17:05:10 1: UPD FHEM/lib/FUIP/View/Page.pm
2019.01.01 17:05:10 1: UPD FHEM/lib/FUIP/View/Select.pm
2019.01.01 17:05:10 1: UPD FHEM/lib/FUIP/View/UpStopDown.pm
2019.01.01 17:05:10 1: UPD FHEM/lib/FUIP/View/ViewTemplInstance.pm
2019.01.01 17:05:10 1: UPD FHEM/lib/FUIP/View/ViewTemplate.pm
2019.01.01 17:05:10 1: UPD FHEM/lib/FUIP/css/fuip-blue-ui.css
2019.01.01 17:05:11 1: UPD FHEM/lib/FUIP/css/fuip-bright-mint-ui.css
2019.01.01 17:05:11 1: UPD FHEM/lib/FUIP/css/fuip-darkblue-ui.css
2019.01.01 17:05:11 1: UPD FHEM/lib/FUIP/css/fuip-darkgreen-ui.css
2019.01.01 17:05:11 1: UPD FHEM/lib/FUIP/css/fuip-default-ui.css
2019.01.01 17:05:11 1: UPD FHEM/lib/FUIP/css/fuip-green-ui.css
2019.01.01 17:05:11 1: UPD FHEM/lib/FUIP/css/fuip-mobil-ui.css
2019.01.01 17:05:12 1: UPD FHEM/lib/FUIP/css/fuipchart.css
2019.01.01 17:05:12 1: UPD FHEM/lib/FUIP/css/theme.blue.css
2019.01.01 17:05:12 1: UPD FHEM/lib/FUIP/css/widget_weatherdetail.css
2019.01.01 17:05:12 1: UPD FHEM/lib/FUIP/js/fuip.js
2019.01.01 17:05:12 1: UPD FHEM/lib/FUIP/js/fuip_htmlview.js


Könnte das mit der Änderung und dem flexiblen html zusammenhängen?

Danke und liebe Grüße,
Dirk

[Thorsten Pferdekaemper]

Hi,
als erstes solltest Du mal das HTML ganz genau betrachten und die Fehler rausmachen. Da fehlen mindestens zwei schließende </div> und das </li> am Ende ist auch etwas seltsam.
Ansonsten vermute ich mal, dass Deine "Tablet und Handy Browser" kein modernes HTML bzw. Javascript unterstützen. Kannst Du das mal auf dem Handy/Tablet mit Chrome versuchen? Solche Sachen wie z.B. Internet Explorer funktionieren wahrscheinlich nicht richtig.
Gruß,
   Thorsten

[Devender]

Hallo Torsten,

schande über mein Haupt mit dem html Codschnipsel. Ich hatte das mal zum Test aus dem TabletUI übernommen und weil es funktioniert hatte nicht mehr angepasst.
Habe ich aber jetzt gemacht. 

Bezüglich Browser und Javascript ist es durchaus möglich, ja. Allerdings funktioniert die Ansicht auf einem GalaxyTab 6A mit Android Browser einwandfrei. Auf einem GalaxyTab 10 (etwas älter aber auch gerootet) mit dem gleichen Browser und dem FullyBrowser nicht mehr nach dem besagten Update.

Nach dem ich vorhin dann mal eine Sicherung meiner /lib/FUIP zurückgespielt hatte ohne das 42_FUIP.pm Modul zurückzusetzen (das ist Stand Januar 2019) läuft die Ansicht auf allen Geräten wieder so wie vorher.

Daher würde ich das Problem doch eher in Richtung Anpassung der html-Schicht vermuten.

Was denkst du?

Grüße,
Dirk

[Thorsten Pferdekaemper]

Nach dem ich vorhin dann mal eine Sicherung meiner /lib/FUIP zurückgespielt hatte ohne das 42_FUIP.pm Modul zurückzusetzen (das ist Stand Januar 2019) läuft die Ansicht auf allen Geräten wieder so wie vorher.

Ich finde es ziemlich erstaunlich, dass das so überhaupt funktioniert. Du hast Dir da nämlich einen ziemlich inkonsistenten Zustand hingebastelt.

Daher würde ich das Problem doch eher in Richtung Anpassung der html-Schicht vermuten.

Die "html-Schicht" aha... Keine Ahnung, was Du damit meinst. Ich bin mir ziemlich sicher, dass es am JavaScript liegt. Da verwende ich seit Kurzem ein paar Sachen, die ich auch erst gelernt habe. Ältere Browser (bzw. ältere Versionen bestimmter Browser) können das halt noch nicht.
Du kannst mal spaßeshalber die angehängte Datei in den diversen Browsern/Versionen aufrufen und hier zeigen, was dabei rauskommt.
Gruß,
   Thorsten

[Thorsten Pferdekaemper]

Hi,
so, der HTML-View kann jetzt bei den Felddefinitionen alles, was FUIP auch bei den anderen Views kann. Innerhalb von fuip-field gehen jetzt außer fuip-name folgende "Attribute":

fuip-type gibt den Typ des Felds an. Folgende Werte sind möglich.

• text: Einfach ein Feld, ohne besondere Semantik.
• device: Ein FHEM-Device. Als Werthilfe wird eine Liste aller Devices angezeigt.
• reading: Ein Reading eines FHEM-Device. Wenn zusätzlich fuip-refdevice gesetzt ist, dann wird eine Liste der Readings des betreffenden Device als Werthilfe angeboten.
• set: Ein set-Befehl eines FHEM-Device. Wenn zusätzlich fuip-refdevice gesetzt ist, dann wird eine Liste der set-Befehle des betreffenden Device als Werthilfe angeboten.
• setoption: (Ein) Parameter zu einem set-Befehl. (Also z.B. das "22" in "set <device> desired-temp 22".) Wenn zusätzlich fuip-refset angegeben ist, dann werden die möglichen Werte als Werthilfe angeboten.
• setoptions: Wie setoption, nur dass mehrere Werte auswählbar sind.
• icon: Ein Icon, in der "üblichen" FTUI-Codierung. Als Werthilfe wird eine Liste aller verwendbaren Icons angeboten.

fuip-refdevice enthält den Namen eines Felds, das den Device-Namen enthält. Dies wird benötigt für Felder vom Typ reading und set.

fuip-refset enthält den Namen eines Felds, das einen set-Befehl enthält (also ein Feld vom Type set). Dies wird benötigt für Felder vom Typ setoption und setoptions. (Es kann aber auch sinnvoll sein, fuip-refset wegzulassen, insbesondere falls fuip-options angegeben wird.

fuip-options enthält eine Komma-separierte Liste der möglichen Werte, also z.B. "on,off,5,15,25". Wenn fuip-options verwendet wird, dann sollte man fuip-refset weglassen.

fuip-default-type zeigt an, dass es für das Feld einen Default-Wert gibt. Mögliche Werte sind "const" für einen konstanten Wert und "field", wenn der Wert aus einem anderen Feld übernommen werden soll.

fuip-default-value enthält den Default-Wert bzw. den Namen des Felds, von dem der Wert übernommen werden soll. Für Felder des Typs setoptions können mehrere Werte durch Komma getrennt angegeben werden.

fuip-default-suffix kann verwendet werden wenn fuip-default-type "field" ist. Dann wird der Suffix an den Wert gehängt.

Beispiele

Code Auswählen Erweitern


<div
data-type="thermostat"
data-device="<fuip-field fuip-name='device' fuip-type='device'>somedevice</fuip-field>"
data-valve="<fuip-field fuip-name="valveposition" fuip-type="reading" fuip-refdevice="device" fuip-default-type="const" fuip-default-value="ValvePosition">ValvePosition</fuip-field>">
</div>

Dies ergibt einen View mit zwei Feldern (zusätzlich zu den Feldern, die der HTML-View sowieso anbietet): "device" und "valveposition". Das erste Feld ist ein FHEM-Device, also wird die Liste aller Devices als Werthilfe angeboten.
Das zweite Feld ist ein Reading des Device im Feld "device". Als Default wird "ValvePosition" benutzt.

Code Auswählen Erweitern


<div><fuip-field fuip-name="label" fuip-type="text" fuip-default-type="field" fuip-default-value="device" fuip-default-suffix=" OG">fillmeout</fuip-field></div>

Das ist ein Textfeld, wobei als Default der Inhalt des Felds "device" benutzt wird. Zusätzlich wird " OG" angehängt.

Code Auswählen Erweitern


<div data-type="push"
data-device="<fuip-field fuip-name='device' ></fuip-field>"
data-set="<fuip-field fuip-name="command" fuip-type="set" fuip-refdevice="device"></fuip-field>"
data-set-on='<fuip-field fuip-name="value" fuip-type="setoption" fuip-refset="command"></fuip-field>'
</div> 
Dies definiert einen Pushbutton mit einem konfigurierbaren Kommando "set <device> <command> <value>".

Vielleicht will der ein oder andere so etwas verwenden. Über Feedback würde ich mich freuen.

Gruß,
   Thorsten

[greewoo]

mal wieder ein Danke, diesmal für die Templates, echt top!

Ich hab mir eins für die Dimmfunktion zur Lichtsteuerung gebaut (kurz vor deiner Doku):

Code Auswählen Erweitern

<div data-type="label"><fuip-field fuip-name="text" fuip-type="device">Decke Warm</fuip-field>
</div>
<div data-type="controller"
data-height="240px"
data-device="<fuip-field fuip-name="device" fuip-type="device">wz_DeckeWarm</fuip-field>"
data-get="pct"
data-color="#ffffff"
data-background-color="transperent"
data-set="pct"
data-icon="fa-sun-o"
data-max="100"
class="fullsize"
>
<div data-type="label"
  data-device="<fuip-field fuip-name="device" fuip-type="device">wz_DeckeWarm</fuip-field>"
  data-get="pct"
  data-unit="%"
  class="white bold"
>
</div></div>

Das Template wird dann 5 mal aufgerufen.

fuip-type text und device funktionieren, siehe Screenshots

[Devender]

Ich finde es ziemlich erstaunlich, dass das so überhaupt funktioniert. Du hast Dir da nämlich einen ziemlich inkonsistenten Zustand hingebastelt. Die "html-Schicht" aha... Keine Ahnung, was Du damit meinst. Ich bin mir ziemlich sicher, dass es am JavaScript liegt. Da verwende ich seit Kurzem ein paar Sachen, die ich auch erst gelernt habe. Ältere Browser (bzw. ältere Versionen bestimmter Browser) können das halt noch nicht.
Du kannst mal spaßeshalber die angehängte Datei in den diversen Browsern/Versionen aufrufen und hier zeigen, was dabei rauskommt.
Gruß,
   Thorsten

Hi Torsten,

glükcklich bin ich mit dem Zustand jetzt auch nicht  . Ich wollte aber mal den Fehler bei mir eingrenzen. Aktuell lasse ich es halt so wie es ist damit eine Bedienbarkeit über das Tablet möglich ist.
Den Chromebrowser nutze ich nicht, weder auf dem Tablet/Handy noch auf dem Rechner. Ich werde wohl aber mal den FF auf dem Tabelt versuchen. Er braucht halt sehr viel Speicher und dann mal schauen, ob ich das FPUI wieder unter aktuellem Stand laufen lassen kann.

Die FPUI Version die ich im Moment dann nutze ist: # $Id: 42_FUIP.pm 00099 2018-09-24 15:00:00Z Thorsten Pferdekaemper $ - die hatte ich dann auch noch zurückgesetzt.

Eine Möglichkeit die neuen JavaSkript implementierungen zu deaktivieren (Attribute in FHEMWEB o.Ä) siehst du nicht?

Die Testseite bringt mir auf dem PC folgende Ausgabe:

Code Auswählen Erweitern


Ein kleiner Test...

let: ... bestanden

() => ...: ... bestanden


Auf dem Handy siehe Screenshot.

Mit HTML-Schicht hatte ich mich auf deine ersten Satz des Threads bezogen  [...und wieder eine neue FUIP-Version. Der HTML-View].

Danke für deine Hilfe und schönen Sonntag!

Dirk

[Thorsten Pferdekaemper]

Ich hab mir eins für die Dimmfunktion zur Lichtsteuerung gebaut (kurz vor deiner Doku):

Hübsch. Zwei Anmerkungen/Fragen dazu:
1. Gibt es einen Grund, warum Du dem Feld für den Text (mit Namen "text") den Typ "device" gegeben hast? Es ist ja nicht schlimm, aber wozu?
2. Du hast irgendwo "transperent" statt "transparent" stehen.
Gruß,
   Thorsten

[Thorsten Pferdekaemper]

Hi Torsten,

Ich heiße "Thorsten" wie Thor, Der Donnergott (https://de.wikipedia.org/wiki/Thor) und nicht wie in "der Tor" (https://www.duden.de/suchen/dudenonline/der%20Tor).
Außerdem heißt es "FUIP" und nicht "FPUI". Letzteres klingt irgendwie wie "Pfui".
Etwas Konzentration bitte! (SCNR, badischer Grauburgunder)

Den Chromebrowser nutze ich nicht, weder auf dem Tablet/Handy noch auf dem Rechner.

Meiner Meinung nach ist es der einzige Browser, der die Standards einigermaßen aktuell und korrekt umsetzt. Ich entwickle immer zuerst für Chrome und beachte die anderen eigentlich nur, wenn sich jemand beschwert.

Die FPUI Version die ich im Moment dann nutze ist: # $Id: 42_FUIP.pm 00099 2018-09-24 15:00:00Z Thorsten Pferdekaemper $ - die hatte ich dann auch noch zurückgesetzt.

Die Version hat nichts zu sagen. Ich ändere das seit dem 24.September nicht mehr...

Eine Möglichkeit die neuen JavaSkript implementierungen zu deaktivieren (Attribute in FHEMWEB o.Ä) siehst du nicht?

Da muss man nichts deaktivieren. Ich hab das jetzt so geändert, dass auch betagtere Browser zumindest die Anzeige (also mit locked = 1) hinbekommen müssten. D.h. die Oberfläche bearbeiten kann man nur mit einem modernen Browser, aber benutzen sollte auch mit älteren möglich sein. Ich werde versuchen, das so beizubehalten.

Gruß,
   Thorsten

[Devender]

Hallo Thorsten,

ich entschuldige mich für das fehlende "h" in Namen. Wenn man nur mit Torsten(s) ohne "h" zu tun hat, dann denkt man beim Schreiben dann irgendwann nicht immer drüber nach.
Warum dann auch noch FPUI anstelle von FUIP geschrieben habe  . - das es spät gewesen ist, kann ich als Ausrede nicht gelten lassen 


Daher ein dickes Danke  , dass du meine Anmerkung berücksichtigt hast und ich dir gerne die Rückmeldung gebe, dass es nun bei mir nach einem Update auch wieder funktioniert.  Änderungen mache ich grundsätzlich auch nur über den PC auf einem aktuellen Browser. Von daher dürfte das kein Problem darstellen.

Nochmals vielen Dank!

Grüße,
Dirk

[Devender]

Hallo Thorsten,

ich habe mich heute auch mal mit der eigentlichen Thema der flexiblen HTML VIEW beschäftigt und mir auch eine schöne Anzeige für meine Fenster und Rollos zusammengeklickt.
Dazu hätte ich eine Frage:
Ich hab das Template mit einem Popup erweitert. Sprich wenn ich im FUIP auf ein Fenster oder Rollo tippe öffnet sich ein Popup mit z.b Steuerung des Rollladens.
Dies habe ich so auch im Template hinterlegt und die Haken für die Variable "device" auch gesetzt.
Sobald ich das Popup im Template Editor schliesse wird der Haken aber wieder entfernt und somit auch der Variablenname.

Im popup_template_view_edit Anhang habe ich den Haken für das device gesetzt. Dann schliesse ich das Fenster und öffne es erneut.
Ergebnis im popup_template_view_kontrolle ist der Haken wieder weg.
Das gleiche passiert auch bei z.b der VIEW_Shutter_Control.

Diesen Inhalt hat das Popup

Code Auswählen Erweitern

<div data-type="symbol" class="big narrow"
data-device="<fuip-field fuip-name="device"
                   fuip-type="device"></fuip-field>"
data-get="level"
       data-icons='["oa-fts_window_2w","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40",
        "oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80",
  "oa-fts_shutter_90","oa-fts_shutter_100"]'
       data-get-on='["0","10","20","30","40","50","60","70","80","90","100"]' data-on-color="#2A2A2A"
       data-on-background-color="#aa6900" data-background-icon="fa-circle">
</div>



Danke und Grüße,
Dirk