FTUI version 3

Superposchi · 03 Mai 2023, 18:30:56

Hast du nur die Popup-ID mit dem Content-Aufruf in die index.html kopiert oder den gesamten Code des Popup's?

Ich glaube bei mir ist es etwas anders aufgebaut.
Ich habe einfach eine Seite die ich über zwei verschiedene Wege aufrufen will.
Zum einen über das Menü und zum anderen über ein Icon auf der Hauptseite als Popup - welche aber selbst bereits aus einem Unterverzeichnis mit ftui-content eingebunden ist.

Über das menü sieht der aufruf grob dann so aus (Content aus Content heraus):
index.html -> ftui-tab (Menü) -> ftui-content (Seite mit Untermenü) -> ftui-content (Unterseiteninhalt) -> Seiteninhalt
Und über das Icon sieht es so aus (Content aus Popup heraus):
index.html -> ftui-content (Unterseiteninhalt) -> ftui-popup -> Seiteninhalt
Alle Seiten außer der index.html liegen in einem Unterordner.

Bei letzterem bleibt die Anzeige einfach leer und ich weiß nicht ob es an der Verschachtelung liegt oder an einem Codefehler wie zb der Pfadangabe.

Eisix · 03 Mai 2023, 21:36:48

Hallo,

einfach das ganze popup in den body der index.html

Code Auswählen

...
...
<ftui-popup id="popup_a6408518c243" height="650px" width="650px" position="page" timeout="120">
<header>AV Receiver</header>
        <ftui-row height="10%">
                <ftui-column width="15%" align-items="left" margin="0.5">
                        <ftui-label text="Eingang:" color="white" class="bold size-2"></ftui-label>
                </ftui-column>
...
...
</ftui-popup>

</body>
</html>

Die Schachtelung ist bei mir ähnlich.

index.html ---> Tabview (contentfile) im gleichen Ordner --> alle anderen contentfiles in einem Ordner darunter.

Gruß
Eisix

Superposchi · 03 Mai 2023, 22:36:40

Dann ist der Effekt von ftui-content aber praktisch gesehen hinfällig oder findest du nich?

Eisix · 03 Mai 2023, 22:42:43

Für das Popup ja, aber anders habe ich es nicht hingekriegt.

Superposchi · 03 Mai 2023, 23:01:01

Frage an alle:
Hat denn überhaupt schon mal jemand ein externes File per ftui-content in ein ftui-popup angezeigt bekommen?

Oder gibt es da eventuell ein generelles Problem in der Kombination?

Vielleicht macht es ja etwas das im ausgelagerten File im Code stehen muss unmöglich.

Adimarantis · 04 Mai 2023, 12:53:08

Man kann schon mehrere Popups mit einem content file abbilden - einfach die Popup ID parametrisieren. Siehe mein Lösung fürs Wetter:
https://forum.fhem.de/index.php?topic=115259.msg1246816#msg1246816

Gasmast3r · 09 Mai 2023, 09:43:24

Hy hab da ein Problem,
habe ein PI 3B A+ mit 'nem Display im Kiosk Modus am Laufen, nach ner weile kann ich drücken was ich möchte aber es werden keine befehle an FHEM weitergegeben erst wenn ich die Seite neu lade geht es wieder, Änderungen von FHEM kommen an (z.b. licht wird an oder aus geschaltet), jemand ein Tipp was das sein kann ?

Code Auswählen

<!DOCTYPE html>
<html>

<head>
  <!--
    /* FHEM tablet ui - FTUI */
    /**
    * UI builder framework for FHEM
    *
    * Version: 3.0.0
    *
    * Copyright (c) 2015-2021 Mario Stephan <mstephan@shared-files.de>
    * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
    * https://github.com/knowthelist/ftui
    */
    -->
  <script src="ftui.js"></script>

  <link href="ftui.css" rel="stylesheet">
  <link href="themes/ftui-theme.css" rel="stylesheet">
  <link href="favicon.ico" rel="icon" type="image/x-icon" />

  <!-- avoid 300ms delay on click-->
  <meta name="viewport" content="width=device-width">

  <meta name="mobile-web-app-capable" content="yes">
  <meta name="toast_position" content="topLeft">


  <!-- verbose level 0-4 -->
  <meta name="debug" content="0">


  <title>FTUI Example</title>
</head>

M.Piet · 09 Mai 2023, 16:09:28

Moin,

ich habe nun schon einige Popups eingebaut.

Nun möchte ich aber gerne in meinem knob ein Popup einbauen. Ich fürchte das geht nicht. Oder gibt es einen Weg?

Das war mein Versuch, aber es passiert nichts:

Code Auswählen

<ftui-knob @click="pop_Pegelstände.open()" [value]="Readings_heizoel:Liter"
Danke schon mal.

Code Auswählen

<ftui-knob [value]="Readings_heizoel:Liter" 
min="0" 
max="6000" 
ticks="10" 
type="scale" 
unit="Liter" 
readonly 
has-value-text 
value-size="22px" 
has-scale-text></ftui-knob>

mr_petz · 10 Mai 2023, 19:13:56

Zitat von: M.Piet am 09 Mai 2023, 16:09:28Moin,

ich habe nun schon einige Popups eingebaut.

Nun möchte ich aber gerne in meinem knob ein Popup einbauen. Ich fürchte das geht nicht. Oder gibt es einen Weg?

Das war mein Versuch, aber es passiert nichts:
Code Auswählen Erweitern
<ftui-knob @click="pop_Pegelstände.open()" [value]="Readings_heizoel:Liter"
Danke schon mal.

Code Auswählen Erweitern
<ftui-knob [value]="Readings_heizoel:Liter" min="0" max="6000" ticks="10" type="scale" unit="Liter" readonly has-value-text value-size="22px" has-scale-text></ftui-knob>

Hi,
durch das readonly sind pointerevents (auch @click) ohne Funktion.
Durch eine cell geht es dann doch. Bsp.:

Code Auswählen

<ftui-cell @click="pop_Pegelstände.open()">
<ftui-knob [value]="Readings_heizoel:Liter"
min="0"
max="6000"
ticks="10"
type="scale"
unit="Liter"
readonly
has-value-text
value-size="22px"
has-scale-text></ftui-knob>
</ftui-cell>

LG mr_petz

Adimarantis · 15 Mai 2023, 09:21:49

Gibt es eine Möglichkeit bei einem Knob mehr als einen Wert anzuzeigen?
Mein Anwendungsfall wäre jetzt der momentane Stromverbrauch brutto (echter Verbrauch ohne PV) und netto (Abzüglich PV).
Ich könnte mir aber auch vorstellen dass man min, max , avg oder ähnliches mit anzeigen will.

Option scheint zu sein die "desired value" zu missbrauchen, aber dass ist dann ja nur ein Punkt.
Evtl. eine nützliche Erweiterungsidee.

juemuc · 21 Mai 2023, 20:32:13

Hallo zusammen,

ich benötige etwas Unterstützung bei der Formatierung. Ich lasse mir aktuelle die Wettervorhersage für die nächsten 7 Tage anzeigen. Dies funktioniert auch fast immer. Nur wenn bei der Vorhersage die Texte etwas länger sind (s. Wetter-1 für den 22.05.), habe ich ein Darstellungsproblem. Ich wollte deshalb den Text über "scroll" darstellen (s. Wetter-2). Allerdings sieht es so aus, als ob immer eine Leerzeile am Anfang eingefügt wird. Ich muss also immer erst eine Zeile nach unten scrollen (s. Wetter-3). Wie kann ich den "einzeiligen" Text so darstellen, dass dieser direkt oben angezeigt wird?

Hier das Coding:

Code Auswählen

    <ftui-label 
          [text]="WetterProplanta:{{VHS_NR}}_date | toDate() | t=>(t.toLocaleDateString()===(new Date()).toLocaleDateString())?'Heute':ftuiHelper.dateFormat(t,'eeee - DD.MM.YYYY')" color="white" class="bold" margin="-1">
    </ftui-label>
    <ftui-row height="50%">
      <ftui-column>
        <ftui-label 
              text="morgens" size="2">
        </ftui-label>
        <ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG" 
              [condition]="WetterProplanta:{{VHS_NR}}_weatherMorningIcon">
        </ftui-weather>        
        <ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp06 | step('-73:violet, -9:blue, 10:green, 25:orange, 32:red')" margin="0.5"
              [text]="WetterProplanta:{{VHS_NR}}_temp06" unit="°C"> 
        </ftui-label>
        <ftui-label margin="0.4" scroll padding="1" height="3px" 
              [text]="WetterProplanta:{{VHS_NR}}_weatherMorning">
        </ftui-label>
        <ftui-row>
          <ftui-label text-align="left" left="55px" style="position:relative;"
               text="Max:">
          </ftui-label>
          <ftui-label text-align="right" left="-55px" style="position:relative;"
                [text]="WetterProplanta:{{VHS_NR}}_tempMax" unit="°C">
          </ftui-label>
        </ftui-row>
        <ftui-row>
          <ftui-label text-align="left" left="55px" style="position:relative;"
                text="Min:">
          </ftui-label>
          <ftui-label text-align="right" left="-55px" style="position:relative;"
                [text]="WetterProplanta:{{VHS_NR}}_tempMin" unit="°C">
          </ftui-label>
        </ftui-row>
      </ftui-column>
     <ftui-column>
        <ftui-label
              text="Mittags" size="2">
        </ftui-label>
        <ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG"
              [condition]="WetterProplanta:{{VHS_NR}}_weatherDayIcon">
        </ftui-weather>
        <ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp12 | step('-73:violet, -9:blue, 10:green, 25:orange, 32:red')" margin="0.5"
              [text]="WetterProplanta:{{VHS_NR}}_temp12" unit="°C">
        </ftui-label>
        <ftui-label margin="0.4" scroll padding="1" height="3px" 
              [text]="WetterProplanta:{{VHS_NR}}_weatherDay">
        </ftui-label>
        <ftui-row>
          <ftui-label text-align="left" left="45px" style="position:relative;" 
                text="Regen:">
          </ftui-label>
          <ftui-label text-align="right" left="-40px" style="position:relative;"
                [text]="WetterProplanta:{{VHS_NR}}_chOfRainDay" unit="%">
          </ftui-label>
        </ftui-row>
        <ftui-row>
          <ftui-label text-align="left" left="45px" style="position:relative;" 
                text="Sonne:">
          </ftui-label>
          <ftui-label text-align="right" left="-40px" style="position:relative;" 
                [text]="WetterProplanta:{{VHS_NR}}_sun" unit="%">
          </ftui-label>
        </ftui-row>
      </ftui-column>
      <ftui-column>
        <ftui-label
              text="Abends" size="2">
        </ftui-label>
        <ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG"
              [condition]="WetterProplanta:{{VHS_NR}}_weatherEveningIcon">
        </ftui-weather>
        <ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp18 | step('-73:violet, -9:blue, 10:green, 25:orange, 32:red')" margin="0.5"
              [text]="WetterProplanta:{{VHS_NR}}_temp18" unit="°C">
        </ftui-label>
        <ftui-label margin="0.4" scroll padding="1" height="3px" 
              [text]="WetterProplanta:{{VHS_NR}}_weatherEvening">
        </ftui-label>
        <ftui-row>
          <ftui-label left="20px" style="position:relative;"
                text="UV:">
          </ftui-label>
          <ftui-label [color]="WetterProplanta:{{VHS_NR}}_uv | step('0:green, 3:yellow, 6:orange, 8:red, 11:violet')" left="-20px" style="position:relative;"
                [text]="WetterProplanta:{{VHS_NR}}_uv">
          </ftui-label>
        </ftui-row>
        <ftui-label 
              [text]="">
        </ftui-label>
      </ftui-column>
    </ftui-row>

Viele Grüße
Jürgen

Adimarantis · 22 Mai 2023, 06:50:30

Die selbe Frage hatte ich schon mal weiter oben. Der Tipp war, den String mit "slice" abzuschneiden.
Schaut bei mir so aus:

Code Auswählen

<ftui-label class="size-2" [text]="{{Device}}:fc{{Day}}_weatherDay | slice(0,16)"></ftui-label>

juemuc · 22 Mai 2023, 10:26:51

Die Lösung finde ich nicht so gut da ja die Info einfach abgeschnitten wird.

Bei meiner Lösung wird alles angezeigt. Ich würde aber gerne die Darstellung noch etwas optimieren. Habe aber noch keine Lösung gefunden. Wie sieht es denn bei Dir aus, wenn Du auf "scroll" umstellst?

Viele Grüße
Jürgen

mr_petz · 22 Mai 2023, 18:18:53

Hi Jürgen,
teste mal das mit fester Höhe.
Musst du dann für alle label der Reihe anwenden...
https://forum.fhem.de/index.php?topic=115259.msg1223426#msg1223426
LG

juemuc · 22 Mai 2023, 23:03:33

Hi mr_petz,

ich teste das morgen einmal mit einer anderen Höhenangabe. Bisher hatte ich als feste Höhe immer "3px" angegeben.

Viele Grüße
Jürgen