FTUI version 3

Eisix · 02 Januar 2025, 16:38:26

Mit etwas Einarbeitung über die Beispiele kriegt man fast alles in V3 hin. Einzig das Chart Widget von Eki vermisse ich. Hole ich mir aber über iFrame von der v2.6.

Denke iFrame ist generell ein ganz guter Ansatz um Seite für Seite auf v3 umzustellen.

Gruß
Eisix

Eisix · 02 Januar 2025, 17:16:32

Im Anhang ein Video das die gleiche Funktionalität wie Pageview zeigt. Echtes Widget wäre einfacher aber so geht es auch.

Gruß
Eisix

MDietrich · 03 Januar 2025, 16:23:42

ich möchte gerne die Scenen der HUE-Bridge mittels einer Art von Radiobutton auswählen.
Dabei soll jeder aktivierte = eingeschaltete Button allen anderen jeweils deaktivieren = ausschalten und dann die jeweils ausgewählte Scene starten bzw. auch ausschalten.

Button 1: aus
Button 2: Scene 1 aus der setList
Button 3: Scene 2 aus der setList
usw.

Dazu wäre es zusätzlich hilfreich, wenn sich die zuletzt gesetzte Scene gemerkt würde. Gibt es eine Alternative zu einem DOIF bzw. der Nutzung von Dummies.
Ich bin für jeden Tip dankbar!
Gruß,
Matthias

grossmaggul · 03 Januar 2025, 20:08:22

Wüsste nicht, daß es Radio Buttons in FTUI3 gibt. Evtl. lässt sich sowas mit <ftui-dropdown> realisieren.

MDietrich · 04 Januar 2025, 07:29:57

Im Moment benutze ich ja schon ein Dropdown, damit klappt das schon. Ich brauche halt immer zwei Mausklicks um eine Auswahl zu treffen. Außerdem habe ich noch ein paar andere Anwendungen im Sinn - ich schau mit auch noch mal das Thema Medialist an.

Gruß,
Matthias

grossmaggul · 04 Januar 2025, 09:08:44

ZitatIm Moment benutze ich ja schon ein Dropdown

Gut, das konnte ich ja nicht wissen.

tobi01001 · 04 Januar 2025, 10:50:04

Zitat von: MDietrich am 04 Januar 2025, 07:29:57Im Moment benutze ich ja schon ein Dropdown, damit klappt das schon. Ich brauche halt immer zwei Mausklicks um eine Auswahl zu treffen. Außerdem habe ich noch ein paar andere Anwendungen im Sinn - ich schau mit auch noch mal das Thema Medialist an.

Gruß,
Matthias

Entspräche nicht Segmented Button so ziemlich deinem Begehr?

yersinia · 04 Januar 2025, 15:02:01

Zitat von: MDietrich am 04 Januar 2025, 07:29:57Im Moment benutze ich ja schon ein Dropdown, damit klappt das schon. Ich brauche halt immer zwei Mausklicks um eine Auswahl zu treffen. Außerdem habe ich noch ein paar andere Anwendungen im Sinn - ich schau mit auch noch mal das Thema Medialist an.

Vielleicht kannst du einige switche untereinander setzen; jeder switch reagiert auf eine Scene aus der SetList. Hast du ein Reading, dass immer die aktuelle Scene anzeigt? Dann müsstest du im value mit zB

Code Auswählen

map('`Scene Muschebubu`:on, `.*`:off')auf die gesetzten Scenen reagieren können. Wenn die event-on-change-reading vernünftig im FHEM Device gesetzt ist, müssten sich alle anderen Switche entsprechend umstellen.

Eisix · 04 Januar 2025, 15:58:06

Wie wäre es mit einem Circlemenue. Nutze ich bei meiner Lüftung. Ist aber auch mit dummys.

Code Auswählen


<ftui-row>
        <ftui-circlemenu direction="top-half">
                <ftui-icon class="size-3"
                        path="../images/openautomation" 
                        [name]="Luefter:state | map('auto:vent_ventilation_level_automatic, man:vent_ventilation_level_manual_m, off:power-off')"
                        [color]="Luefter:state  | map('auto:mygreen, man:mygreen, off:grey')"
                ></ftui-icon>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter off;setreading Luefter stufe 0;set Steuerung.Luefter checkall">
                                <ftui-icon name="power-off" color="mygreen"></ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 1">
                                <ftui-icon class="size-5" color="mygreen">1</ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 2">
                                <ftui-icon class="size-5" color="mygreen">2</ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 3">
                                <ftui-icon class="size-5" color="mygreen">3</ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 4">
                                <ftui-icon class="size-5" color="mygreen">4</ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter auto; set Steuerung.Luefter checkall">
                                <ftui-icon class="size-2"
                                        path="../images/openautomation" 
                                        name="vent_ventilation_level_automatic" 
                                        color="mygreen"
                                ></ftui-icon>
                        </ftui-button>
        </ftui-circlemenu>
        <ftui-badge
                backgroundcolor="secondary" 
                [text]="Luefter:stufe">
        </ftui-badge>
</ftui-row>

Gruß
Eisix

Eisix · 04 Januar 2025, 16:07:58

Andere Variante mit Buttons

Code Auswählen


<ftui-column align-items="top" width="90%" class="homebox">
        <ftui-row>
                <ftui-button height="5em" width="2em" fill="" (value)="set rgr_Residents" states="gotosleep" [class-name]="rgr_Residents:state | map('home:homebuttons, gotosleep:homebuttonsok, absent:homebuttons, gone:homebuttons')">
                        <ftui-icon class="size-4" name="bed" color="mywhite"></ftui-icon>
                </ftui-button>
                <ftui-button height="5em" width="2em" fill="" (value)="set rgr_Residents" states="absent" [class-name]="rgr_Residents:state | map('home:homebuttons, gotosleep:homebuttons, absent:homebuttonsok, gone:homebuttons')">
                        <ftui-icon class="size-4 my-top-10" name="car" color="mywhite"></ftui-icon>
                </ftui-button>
                <ftui-button height="5em" width="2em" fill="" (value)="set rgr_Residents" states="gone" [class-name]="rgr_Residents:state | map('home:homebuttons, gotosleep:homebuttons, absent:homebuttons, gone:homebuttonsok')">
                        <ftui-icon class="size-3" name="suitcase" color="mywhite"></ftui-icon>
                </ftui-button>
        </ftui-row>
        <ftui-row>
                <ftui-button height="6em" width="6em" fill="" (value)="set rgr_Residents" states="home" [class-name]="rgr_Residents:state | map('home:homebuttonsok, gotosleep:homebutton, absent:homebutton, gone:homebutton')">
                        <ftui-icon class="size-3" name="home1" 
                                color="mywhite"
                        ></ftui-icon>
                </ftui-button>
        </ftui-row>
</ftui-column>
</ftui-row>

Gruẞ
Eisix

MDietrich · 04 Januar 2025, 18:44:47

Hallo Eisix,
danke für die Idee, ich glaube da kann ich etwas draus machen.
Wenn ich es richtig verstehe nutzt du dafür 'RESIDENDS' - da muss ich mich erst mal einlesen, wie ich die Szenen da reinkriege.

Gruß,
Matthias

Eisix · 04 Januar 2025, 19:37:44

Dieser Teil steuert und zeigt bei mir den Residents Status an über das Residents Modul.
Bei dir sollte es das Reading mit den Szenarien der Hue-Bridge sein. Falls das nicht geht kannst du immer noch über dummy und Doif basteln.

Gruß
Eisix

MDietrich · 05 Januar 2025, 08:33:58

Moin,
zwei Fragen:

- kann man einen "segmentedButton" auch vertical anordnen?
- kann man mit dem "Button" auch gleichzeitig mehrere values verschiedenen Devices schalten?

Danke,
Matthias

Eisix · 05 Januar 2025, 10:14:57

Moin,

Zu SegmentedButton kann ich nicht viel sagen da ich es nicht nutze. Beispiele hast du gecheckt?

Mehrere devices schalten sollte gehen. Beispiel von weiter oben mit Button:

Code Auswählen


<ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter off;setreading Luefter stufe 0;set Steuerung.Luefter checkall">
                                <ftui-icon name="power-off" color="mygreen"></ftui-icon>
                        </ftui-button>

Die verschiedenen set Kommandos mit ; trennen.

Gruß
Eisix

MDietrich · 08 Januar 2025, 05:09:11

Moin,
nachdem ich mit 'SegmentedButton' und 'Checkbox' meiner Wunschlösung nicht näher gekommen bin, habe ich mir mal eine Lösung gebaut.
Im Moment werden nur die Schaltzustände der Dummies gesetzt, aber noch keine Aktion ausgelöst, damit fange ich jetzt an um Szenen aus der HUE-Bridge zu setzen.

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
    */
    -->
    <!-- 
    /* Radio-Button for FTUI 3 by Matthias
    /* 2025-01-08
    /* Prerequisites: 
    /* - 4 dummies need to be defined in FHEM, named d_radioButton01 to d_radioButton04
    /* - the icons 'radio_button_checked' and 'radio_button_unchecked' need to be available in the standard icon folder -->
  <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="bottomLeft">


  <!-- verbose level 0-4 -->
  <meta name="debug" content="0">
  <title>FTUI Radio-Button</title>
</head>

<body>
<ftui-grid base-width="90" base-height="72">
    <ftui-grid-tile row="1" col="1" height="5" width="3">
        <ftui-grid-header>FTUI-intern</ftui-grid-header>
        <ftui-row>
            <ftui-button id="rButton1" states="on,off" fill="none" size="large"
                [value]="d_radioButton01"
                [color]="d_radioButton01 | map('on:success, off:light')"
                (value)="set d_radioButton01 on; set d_radioButton02 off; set d_radioButton03 off; set d_radioButton04: off"> 
                <ftui-icon type= "svg" size= "3" [name]="d_radioButton01 | map('on:radio_button_checked, off:radio_button_unchecked')"></ftui-icon>Text für Button 1
            </ftui-button>
        </ftui-row>
        <ftui-row>
            <ftui-button id="rButton2" states="on,off" fill="none" size="large"
                [value]="d_radioButton02"
                [color]="d_radioButton02 | map('on:success, off:light')"
                (value)="set d_radioButton01 off; set d_radioButton02 on; set d_radioButton03 off; set d_radioButton04 off">
                <ftui-icon type= "svg" size= "3"                
                    [name]="d_radioButton02 | map('on:radio_button_checked, off:radio_button_unchecked')"></ftui-icon>Text für Button 2 
            </ftui-button>
        </ftui-row>
        <ftui-row>
            <ftui-button id="rButton3" states="on,off" fill="none" size="large"
                [value]="d_radioButton03"
                [color]="d_radioButton03 | map('on:success, off:light')"
                (value)="set d_radioButton01 off; set d_radioButton02 off; set d_radioButton03 on; set d_radioButton04 off">
                <ftui-icon type= "svg" size= "3" [name]="d_radioButton03 | map('on:radio_button_checked, off:radio_button_unchecked')"></ftui-icon>Text für Button 3
            </ftui-button>
        </ftui-row>
        <ftui-row>
            <ftui-button id="rButton4" states="on,off" fill="none" size="large"
                [value]="d_radioButton04"
                [color]="d_radioButton04 | map('on:success, off:light')"
                (value)="set d_radioButton01 off; set d_radioButton02 off; set d_radioButton03 off; set d_radioButton04 on">
                <ftui-icon type= "svg" size= "3" [name]="d_radioButton04 | map('on:radio_button_checked, off:radio_button_unchecked')"></ftui-icon>Text für Button 3
            </ftui-button>
        </ftui-row>
    </ftui-grid-tile>
</ftui-grid>
</body>
<html>

Vielleicht kann diese Lösung jemand gebrauchen oder sie inspiriert zu anderen Lösungen.

Ich verweise auf den Thread: https://forum.fhem.de/index.php?topic=136972.msg1304770#msg1304770
Es wäre toll, wenn sich hier mehr Beispiele für Lösungen - auch ungefragt finden lassen würden.

Gruß,
Matthias