[FTUI3] Browser mit FTUI von FHEM aus "steuern"

[roedert]

Hier gab es schon mal einen Beitrag wo jemand ein Popup im Browser öffnen lassen wollte, wenn ein Rauchmelder auslöst ... allerdings ohne Lösung.

Die Frage ist wie man die Browseranzeige von FHEM aus beeinflussen kann. Klar kann ich das hidden-attribut in einem FTUI-Element an einen Wert in FHEM binden und somit das Element von FHEM aus ein- oder ausblenden.

Aber habe ich auch die Möglichkeit, durch eine Werteänderung in FHEM einen script-Teil auszuführen der dann wirklich ein Popup öffnet oder auch den Browser auf eine andere Seite umlenkt.
D.h. kann ich die Ausführung dieser Befehle irgendwie an einen Wert in FHEM koppeln?

Code Auswählen Erweitern

POPUPNAME.open()oder

Code Auswählen Erweitern

javascript:window.location.href='neueseite.html'

[andreas_r]

Ich habe das bei mir mit Tabs gelöst. Man kann die "active" Eigenschaft an ein Reading binden. Bei mir ist es zum Beispiel so, dass das Tab mit dem Kamerabild der Haustür aufgeht, sobald jemand klingelt.

Geht aber auch mit einem popup: Hier ein Beispiel:

Code Auswählen Erweitern

<ftui-popup id="id_des_popups" [active]="device_das_das_popup_steuert:state">

Das Device sollte true oder false im state zurückgeben.

[roedert]

ok, schon mal ein prima Ansatz, wusste gar nicht dass sich ein Popup über "active" steuern lässt statt nur über open und close.

Jetzt noch die Frage ob man die Ausführung eines bestimmten javascript-codes (eben um zB eine neue Seite aufzurufen) noch an ein FHEM-Reading binden kann?

[andreas_r]

braucht man eben nicht. In dem Moment, in dem das Reading sich auf True ändert, führt FTUI3 den Code, der das Popup öffnet, "von selbst" aus. Oder habe ich die Frage falsch verstanden?

[roedert]

Ja, klar - hab ich schon verstanden. Das Thema Popup ist also geklärt.

Aber die 2. Frage bezog sich ja auf das Wechseln der html-Seite gesteuert aus FHEM. Zb durch Aktivieren dieses js-codes:

Code Auswählen Erweitern

javascript:window.location.href='neueseite.html'

[andreas_r]

Ich hatte verstanden, dass das Popup die Seite ist, die du damit aufrufen willst?
Um Dir besser helfen zu können: Was genau möchtest Du denn erreichen bzw. was ist Dein konkreter Anwendungsfall?

[roedert]

Ich stehe noch am Anfang bzw. in der Plaungsphase mit FTUI. Die Hausautomatisierung läuft schon seit etlichen Jahren, seit 4 Jahren nun auch im eigenen Haus wo sie durch die ganz anderen Möglichkeiten gegenüber einer Mietwohnung auch wesentlich umfangreicher geworden is (Jalousiesteuerung, Heizungssteuerung etc.) 
Nun habe ich auch endlich mal 3 "alte" iPads an diversen Stellen zur Information/Bedienung an die Wand geschraubt und baue gerade die FTUI(3)-Oberfläche dazu.

Es gibt diverse Screens für Heizung, Licht, Jalousien, Musik etc.
Anfangs hatte ich dies alles in einer html-Seite mit Tabs gemacht, was mir aber bald zu unübersichtlich wurde und außerdem immer die Tableiste mir Platz aufm Bildschirm belegte.

Daher nun die Idee mit der Index-Seite die nur einige wenige Hauptinformationen enthält und dann auf diverse komplett eigenständige Unterseiten verweist, die oben links nur noch einen kleinen Homebutton zur Rückkehr auf die Indexseite haben. Gefällt mir soweit auch gut und kommt mir auch performanter vor.

Allerdings möchte ich dass zB wenn jemand an der Tür klingelt die Kameraseite eingeblendet wird.
Bei der alten Tab-Lösung ginge das wie ich jetzt von dir gelernt habe über das active-Flag.

Wenn ich nun aber bei meiner "Mehrseitenlösung" bleibe muss ich ja statt einen Tab zu aktivieren die Webseite wechseln - wofür ich bis jetzt noch keine Lösung habe.

Ich bin also momentan noch am Ausloten der Möglichkeiten.... 

PS: Ich habe auch schon versucht die Hauptseite mit den Tabs klein zu halten und die einzelnen Tabs in extra html-Dateien auszulagen und diese mit ftui-content einzubinden. Das ging aber leider mit der Formatierung nicht gut, die ftui-grids waren total durcheinandergekommen.
PS2: iPad Air2 oder Mini 4 sind für ca 70 Euro zu bekommen, das letzte unterstütze OS installiert und Kiosker pro als Fullscreen-Browser installiert hat sich bei mir absolut bewährt. Ein sonoff oder Shelly-Display ist teurer, kleiner und längst nicht so flexibel.
 


 
 

[andreas_r]

Verstehe. Was ich mir vorstellen könnte: Vielleicht gibt es ja bei Kiosker eine Möglichkeit, die angezeigte Seite per API zu ändern. Dann könntest Du die angezeigte Seite durch FHEM selbst ändern lassen.

Wenn Kiosker das nicht kann, wäre immer noch eine Möglichkeit, das Ganze wie beschrieben über Tabs zu machen. Die funktionieren sogar, wenn das Auswahlmenü nicht auf der Seite angezeigt wird.

Hier ein Beispiel:

Code Auswählen Erweitern

<ftui-tab view="View1" active hidden></ftui-tab>
<ftui-tab view="View2" [(value)]="camPageVisible" hidden></ftui-tab>

<ftui-tab-view id="View2">
... hier ist die Kamera-Seite
</ftui-tab-view>

<ftui-tab-view id="View1">
... hier steht die "normale" Seite
</ftui-tab-view>

Die Seite reagiert dann auf den Status des FHEM Dummies mit dem Namen "camPageVisible". Wert des Readings ist dann "on" oder "off".
Den ftui-tab Teil brauchst du zwar im Code, um das Ganze anzusprechen, aber der ist mit hidden ausgeblendet.

Ich würde am Ende eh empfehlen, alles in einer Seite zu machen und das Ganze mit der content Funktion zu strukturieren, siehe hier bzw. hier.

[roedert]

Vielleicht gibt es ja bei Kiosker eine Möglichkeit, die angezeigte Seite per API zu ändern.

Keine Ahnung, glaube ich eher nicht. Außerdem möchte ich unabhängig bleiben und keine Abhängigkeit von den Clients schaffen.

Die funktionieren sogar, wenn das Auswahlmenü nicht auf der Seite angezeigt wird.

Das ist wieder eine prima Idee von dir! Um nicht permanent Platz für das Tab-Menü zu verschwenden, kann ich dies ja über einen kleinen Button oben links (den habe ich ja momentan ja auch auf jeder Seite um auf die Index-Seite zurückzukommen) ein- und ausblenden.

Jetzt wäre nur noch der Übersichtlichkeit halber prima die einzelnen Tabs in extra html-Seiten auszulagen ... was ja leider Probleme bei der Formatierung bereitet hat. Hier ein "Leidensgenosse" ...

Ich glaube ich setze mich da nochmal dran und versuche diesen Weg zu gehen.

[andreas_r]

Noch als letzte Hinweis: Wenn Du evtl. eh keine andere Funktion von Kiosker verwendest, als die Fullscreen Darstellung, kannst du es evtl auch als iOS WebApp anzeigen lassen.

Dazu folgende Infos im Head der Seite verwenden:

Code Auswählen Erweitern

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-title" content="FHEM">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <link rel="apple-touch-icon" href="apple-touch-icon-57x57.png" />
  <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png" />
  <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png" />
  <link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png" />

Die Apple Icons kannst Du Dir hier generieren lassen.

[roedert]

So, ich habe jetzt ein wenig rumprobiert und eine funktionierende Lösung gefunden:

index.html:
Hier ist nur noch der Menübutton (per style fest positioniert und im z-index nach oben gebracht) und ein Popup welches die Tab-View-Auswahl enthält.
Alle Tab-Inhalte sind in einzelnen Dateien und werden per ftui-content eingebunden.
Auf ein ftui-grid in der index.html habe ich bewusst verzichtet, da dies mit dem Einbinden der Tab-Dateien nicht mehr funktioniert hat. Die komplette ftui-grid struktur ist in jeder Tab-Datei enthalten.

index.html

Code Auswählen Erweitern

  <ftui-content file="tab_1.html"></ftui-content>
  <ftui-content file="tab_2.html"></ftui-content>
  ....

 <!-- Button zum Popup-Menu öffnen-->
  <ftui-button style="position:fixed; top:2px; left:2px; z-index:99" shape="circle" color="dark" @click="tabmenu.open()">
    <ftui-icon name="bar" color="white"></ftui-icon>
  </ftui-button>

  <!-- Popup zur Seitenauswahl -->
  <ftui-popup id="tabmenu" width="600px" height="400px" shape="round" timeout="0">
    <ftui-row>
      <ftui-column>
        <ftui-tab view="tab_1" active @click="tabmenu.close()">
          <ftui-button shape="circle" width="80px" height="80px" color="medium"><ftui-icon class="size-2"
              name="tab1_icon"></ftui-icon></ftui-button>
        </ftui-tab>
      </ftui-column>

      <ftui-column>
        <ftui-tab view="tab_2" @click="tabmenu.close()">
          <ftui-button shape="circle" width="80px" height="80px" color="medium"><ftui-icon class="size-2"
              name="tab2_icon"></ftui-icon></ftui-button>
        </ftui-tab>
      </ftui-column>
      ....
    </ftui-row>
  </ftui-popup>

Die einzelnen Tab-Dateien sehen dann so aus:

Code Auswählen Erweitern

<ftui-tab-view id="tab_1">
  <ftui-grid .....>
    <ftui-grid-tile ...>
       ...
    </ftui-grid-tile>
  </ftui-grid>
</ftui-tab-view>