FTUI version 3

[Jojo11]

Kurze Frage zum ftui-chart: Kann man in der Tagesansicht die Achseneckpunkte x-min, x-max, y-min und y-max auch per Reading setzen?

Code Auswählen Erweitern

[x-min]="Testdummy"
scheint nicht zu funktionieren.

schöne Grüße
Jo

[juemuc]

Code Auswählen Erweitern

  <ftui-grid-tile row="1" col="6" height="3" width="5">
    <header>Waschmaschine</header>
    <ftui-row [hidden]="Waschmaschine:state | map('running:false, .*:true')">
      <ftui-image height="90px"
            src="../images/default/waschmaschine_03.gif">
      </ftui-image>
      <ftui-label size="4" color="white"
            [text]="HM_ES_PMSw1_Pl_DN_R1_NEQ1662710:2.POWER | fix(2)" unit=" Watt">
      </ftui-label>
    </ftui-row>
    <ftui-row [hidden]="Waschmaschine:state | map('on|done:false, .*:true')">
      <ftui-icon size="5" color="red" class="blink"
            path="../images/openautomation" name="scene_washing_machine">
      </ftui-icon>
      <ftui-label size="4" color="white"
            [text]="Waschmaschine:state | map('done:FERTIG, on:AN')">
      </ftui-label>
    </ftui-row>
    <ftui-icon size="5" color="white" [hidden]="Waschmaschine:state | map('off:false, .*:true')"
          path="../images/fhemSVG" name="general_aus">
    </ftui-icon>
  </ftui-grid-tile>

Viele Grüße
Jürgen

[M.Piet]

Mahlzeit. Baue grad ein wenig Spotify ein und habe eine Verständnisfrage zum Switch.

Das Umschalten klappt. "Set Spotify on" und "off" wird beim Umschalten gesendet.
Aber der Switch zeigt beim Neuladen immer "aus" an, obwohl er an sein müsste.

Das entsprechende Reading:
Spotify:is_playing:1 -> hier sollte der Switch aktiv sein
Spotify:is_playing:0 -> hier sollte der Switch inaktiv sein

Mach ich einen Denkfehler?
Danke für die Hilfe.

Code Auswählen Erweitern

<ftui-switch [value]="Spotify | map('`is_playing.*`:1')" (value)="Spotify" states="pause,resume" color="orange" texts='on,off'></ftui-switch>

[MDietrich]

Moin,
ich frage mich, warum du nicht direkt das Reading nutzen um den "Value" zuzuweisen. Damit würdest du m.E. das Mapping sparen.

Gruß
Matthias

[M.Piet]

Meinst du in dieser Art und Weise?

Code Auswählen Erweitern

<ftui-switch [value]="Spotify:is_playing:1" (value)="Spotify" states="pause,resume" color="error" texts='on,off'></ftui-switch>    So habe ich es auch getestet, aber es geht nicht.

[juemuc]

Hallo zusammen,

habe heute festgestellt, dass durch ein FTUI3-Update über

Code Auswählen Erweitern

update all https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txtkein Event "global:update" erzeugt wird, so wie es beim FHEM-Update erfolgt. Wie kann ich dieses Event beim FTUI3-Update erzeugen?

Viele Grüße
Jürgen

[MDietrich]

@M.Piet

ich hatte es so gemeint, du musst natürlich den Dummy durch dein Gerät ersetzen.

Code Auswählen Erweitern

<ftui-switch [value]="dummy1:is_playing" (value)="dummy1:is_playing" states="0,1" color="error" texts='on,off'></ftui-switch>
Ich hoffe das klappt.
Gruß,
Matthias

[reisner]

Hallo,

ich versuche auf einem Image diverse Elemente zu platzieren, für Labels klappt das, für ein Dropdown Element aber nicht, dieses wird nicht angezeigt

Code Auswählen Erweitern

<ftui-tab-view id="test1">
      <ftui-grid-tile row="1" col="2" height="7" width="9" shape="round">
<header>Temperaturen</header>
<ftui-image src    = "../images/1.png"
height = "100%"
top    = "0%"
left   = "0%">
<ftui-dropdown list="17.0,17.5,18.0,18.5,19.0,19.5,20.0,20.5,21.0" [(value)]="Raum_Absenk_temp" unit="°C" left="90%" top="30%" class="size-2"></ftui-dropdown>
<ftui-label [text]="ws_data:temp1" text="-" left="6%" top="8%" size="4" unit="°C" bold  color=yellow"></ftui-label>
<ftui-label [text]="ws_data:hum1" text="-" left="6%" top="13%" size="4" unit="%" bold  color=yellow"></ftui-label>
<ftui-label left="15%" top="40%" bold color=black size="4">Raum: </ftui-label>
<ftui-label [text]="cmi:T.Raum" text="-" left="26%" top="40%" size="4" unit="°C" bold  color=white></ftui-label>
<ftui-label left="47%" top="30%" bold color=black size="4">Boiler: </ftui-label>
<ftui-label [text]="COE_Node_RSM610_32:T.Warmwasser" text="-"  left="48%" top="40%" size="4" unit="°C" bold  color=white></ftui-label>
<ftui-label left="15%" top="67%" bold color=black size="4">Raum   Soll: </ftui-label>
<ftui-label [text]="Raum_Soll_temp" text="-"  left="20%" top="72%" size="4" unit="°C" bold  color=blue></ftui-label>
<ftui-label left="15%" top="78%" bold color=black size="4">Raum Absenk: </ftui-label>
<ftui-label [text]="Raum_Absenk_temp" text="-"  left="20%" top="83%" size="4" unit="°C" bold  color=blue></ftui-label>
<ftui-label left="49%" top="68%" bold color=black size="4">Soll: </ftui-label>
<ftui-label [text]="Wasser_Soll" text="-"  left="48%" top="73%" size="4" unit="°C" bold  color=blue></ftui-label>
<ftui-label left="65%" top="30%" bold color=black size="4">Ofen: </ftui-label>
<ftui-label [text]="COE_Node_RSM610_32:T.Kessel_VL" text="-"  left="65%" top="40%" size="4" unit="°C" bold  color=white></ftui-label>
<ftui-label left="77%" top="30%" bold color=black size="4">Speicher: </ftui-label>
<ftui-label [text]="COE_Node_RSM610_32:T.Speicher_oben" text="-"  left="79%" top="40%" size="4" unit="°C" bold  color=white></ftui-label>
<ftui-label left="55%" top="78%" bold color=black size="4">Systemdruck (0.8 - 2 bar): </ftui-label>
<ftui-label [text]="cmi:Systemdruck" text="-"  left="68%" top="83%" size="4" unit="°C" bold  color=white></ftui-label>
<ftui-label left="55%" top="90%" bold color=black size="4">Keller: </ftui-label>
<ftui-label [text]="cmi:T.Keller" text="-"  left="68%" top="90%" size="4" unit="°C" bold  color=white></ftui-label>
</ftui-image>   
      </ftui-grid-tile>
    </ftui-tab-view>Mache ich etwas falsch, oder geht es mit einem Dropdown nicht?
Darüber hinaus ist die Positionierung der Elemente ein Problem, wenn ich dieses View in ein separates HTML auslagere und per Content in ein Swiper platziere, dann gehen die Positionen verloren (siehe Anhang). Kann mir jemand helfen und sagen, wie ich dieses besser umsetze?

Danke!
Ralph

[juemuc]

HILFE !!

Ich habe ein Update von FTUI3 durchgeführt:

Code Auswählen Erweitern

2024.01.17 11:55:47 1: Downloading https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt
2024.01.17 11:55:48 1: UPD www/ftui/components/grid/grid-tile.component.css
2024.01.17 11:55:48 1: UPD www/ftui/components/label/label.component.js
2024.01.17 11:55:48 1: UPD www/ftui/components/popup/popup.component.js
2024.01.17 11:55:48 1: UPD www/ftui/components/swiper/swiper.component.js
2024.01.17 11:55:48 1: UPD www/ftui/examples/chart2.html
2024.01.17 11:55:48 1: UPD www/ftui/examples/colorpicker.html
2024.01.17 11:55:49 1: UPD www/ftui/examples/contents/mobile-power.html
2024.01.17 11:55:49 1: UPD www/ftui/examples/contents/mobile-solar.html
2024.01.17 11:55:49 1: UPD www/ftui/examples/icon.html
2024.01.17 11:55:49 1: UPD www/ftui/examples/mobile_full.html
2024.01.17 11:55:49 1: UPD www/ftui/examples/popup.html
2024.01.17 11:55:50 1: UPD www/ftui/examples/swiper.html
2024.01.17 11:55:50 1: UPD www/ftui/ftui.css
2024.01.17 11:55:50 1: UPD www/ftui/modules/ftui/ftui.binding.js
2024.01.17 11:55:50 1: UPD www/ftui/modules/ftui/ftui.helper.js
2024.01.17 11:55:50 1: saving fhem.cfgund schon passt oder funktioniert in vielen Fällen die Formatierung nicht mehr. Wie kann ich die Formatierungen anpassen? Hier einige Beispiele:

Die Formatierung im Content-File (text-align="left") wird ignoriert:

Code Auswählen Erweitern

  GNU nano 7.2                                                                          Rollo.html                                                                                   
    <ftui-row width="100%">
      <ftui-row width="39%">
        <ftui-label text-align="left" style="position:relative;" margin="1" color="white" size="3" @click="pop_{{Rollo_pop}}.open()"
              [text]="{{Rollo}}:alias">
        </ftui-label>
      </ftui-row>
...

oder "span" im Content-File um nur zwei Beispiel zu nennen.

Code Auswählen Erweitern

    <span>
      <ftui-label size="2" color="green" top="-20px" style="position:relative;" class="bold"
            text="Gültig vom ">
      </ftui-label>
      <ftui-label size="2" color="green" top="-20px" style="position:relative;" class="bold"
            [text]="DWD:{{Warn_NR}}_onset | toDate() | format('DD.MM.YYYY hh:mm')">
      </ftui-label>
      <ftui-label size="2" color="green" top="-20px" style="position:relative;" class="bold"
            text="Uhr">
      </ftui-label>
      <ftui-label size="2" color="green" top="-20px" style="position:relative;" class="bold"
            text="bis zum">
      </ftui-label>
      <ftui-label size="2" color="green" top="-20px" style="position:relative;" class="bold"
            [text]="DWD:{{Warn_NR}}_expires | toDate() | format('DD.MM.YYYY hh:mm')">
      </ftui-label>
      <ftui-label size="2" color="green" top="-20px" style="position:relative;" class="bold"
            text="Uhr">
      </ftui-label>
    </span>
Wer kann helfen?

Viele Grüße
Jürgen

PS: Das Update ist zum Glück nur auf dem Testsystem erfolgt 

[Superposchi]

Gibt es für ftui3 ein widget für die weekprofile der Heizkörperthermostate?
Für FTUI2 gab es ja ein passendes.

[MDietrich]

Hallo Jürgen,
zur Ausrichtung eines Labels verwende ich immer "align-items" im Eltern-Element, vermutlich aus Gewohnheit, aber es funktioniert 'immer'.
Hinsichtlich <span> schau einmal in den Entwicklertools, was aus dem <span> gemacht wird.

Gruß,
Matthias

[juemuc]

Hallo Matthias,

danke für die Info. Ich habe genau so angefangen umzustellen. <span> habe ich durch <ftui-row> ersetzt und mi height bzw. wight ergänzt.
Aktuell habe ich nur noch ein Problem mit einer Tabelle:

Code Auswählen Erweitern

  <ftui-grid-tile row="1" col="11" height="3" width="7">
    <header>RASPBERRY PI 3</header>

      <table align="center" style="border:1px solid grey">
        <tr>
          <td style="border:2px solid grey;">
            <ftui-label color="white" size="3" margin="1"
                  text="Uptime">
            </ftui-label>
          </td>
          <td style="border:2px solid grey;">
            <ftui-label color="white" size="3" margin="1"
                  [text]="pi_Sys:uptime_text">
            </ftui-label>
          </td>
        <tr>
        <tr>
          <td style="border:2px solid grey;">
            <ftui-label color="white" size="3" margin="1"
                  text="Letzter reboot">
            </ftui-label>
          </td>
          <td style="border:2px solid grey;">
            <ftui-label color="white" size="3" margin="1"
                  [text]="pi_Sys:starttime_text">
            </ftui-label>
          </td>
        <tr>
        <tr>
          <td style="border:2px solid grey;">
            <ftui-label color="white" size="3" margin="1"
                  text="Temperatur">
            </ftui-label>
          </td>
          <td style="border:2px solid grey;">
            <ftui-label color="white" size="3" margin="1"
                  [text]="pi_Sys:cpu_temp" unit=" °C">
            </ftui-label>
          </td>
        <tr>
      </table>

  </ftui-grid-tile>

Viele Grüße
Jürgen

[MDietrich]

Hallo Jürgen,
ich versuche in einem FTUI3 Layout nicht zu mischen.
Hier eine Idee für den Weg:

Code Auswählen Erweitern

<ftui-grid-tile row="1" col="11" height="3" width="7">
<ftui-grid-header>
<ftui-label text="RASPBERRY PI 3"></ftui-label>
</ftui-grid-header>
<ftui-row  style="border:1px solid grey" height="33%">
<ftui-column style="border:2px solid grey" align-items ="left" width="60%">
<ftui-label color="white" size="3" margin="0 0 0 20px" text="Uptime">
</ftui-label>
</ftui-column>
<ftui-column style="border:2px solid grey" align-items ="left">
<ftui-label color="white" size="3" margin="0 0 0 20px" [text]="pi_Sys:uptime_text">123
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row  align-items ="center" style="border:1px solid grey" height="33%">
<ftui-column style="border:2px solid grey" align-items ="left" width="60%">
<ftui-label color="white" size="3" margin="0 0 0 20px" text="Letzter reboot">
</ftui-label>
</ftui-column>
<ftui-column style="border:2px solid grey" align-items ="left">
<ftui-label color="white" size="3" margin="0 0 0 20px" [text]="pi_Sys:starttime_text">
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row  align-items ="center" style="border:1px solid grey" height="33%">
<ftui-column style="border:2px solid grey" align-items ="left"width="60%">     
<ftui-label color="white" size="3" margin="0 0 0 20px" text="Temperatur">
</ftui-label>
</ftui-column>
<ftui-column style="border:2px solid grey" align-items ="left">   
<ftui-label color="white" size="3" margin="0 0 0 20px" [text]="pi_Sys:cpu_temp" unit=" °C">
</ftui-label>
</ftui-column>
</ftui-row>
</ftui-grid-tile>

Es ist sicher einen Versuch wert, welche Eigenschaften man den Eltern-Objekten zuweisen kann um sich Aufwand zu sparen (ist auf meiner ToDo, da ich bequem bin)
Gruß,
Matthias

P.S.: Die Info zu Margin findest du hier: https://forum.fhem.de/index.php?topic=115259.msg1269692#msg1269692

[juemuc]

Hi Matthias,

super. Vielen Dank. Ich musste zwar noch ein bisscgen nachjustieren, aber das "Grundgerüst" hat sehr gut geholfen.

Viele Grüße
Jürgen

[Bruttolers]

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.

Wenn wir keinen Nutzen und/oder Mehrwert erlangen, ist es Sinnlos.

Mewus, Nils