FTUI version 3

[Wolfgang Hochweller]

Hat jemand versucht, FTUI3 auf einem aelteren iPad mit iOS 10.3 laufen zu lassen ?

Kriege es nicht hin, FTUI laeuft dagegen noch problemlos.

Liegt wohl am WebKit, habe alle gaengigen Browser mal probiert.

[StephanFHEM]

Hatte das gleiche Problem mit einem älteren Kindle. Es lag am zu alten Webview und das konnte man nicht aktualisieren. Am Ende hab ich das Tablet gegen ein neueres getauscht

[StephanFHEM]

Gibt es eigentlich eine Art Countdown in Ftui3? Vielleicht kann man da bei FTUI-clock etwas einbauen (lesen aus einem Device:Reading und sekündlich runterzählen? Oder kann Label sich sekündlich aktualisieren wenn man ein Device in FHEM bastelt welches jede Sekunde das Reading ändert?

[ToM_ToM]

@ToM_ToM

Anscheind muss man nix escapen...

Hi tomster, danke für deinen Tipp. Jetzt habe ich es. Hier der Code falls es noch jemand braucht:

Code Auswählen Erweitern


<ftui-button shape="round" fill="solid" [value]="VacuumCleaner_Roborock:state | map('Cleaning|Zoned Clean:start, Paused|Sleeping:pause')" (value)="VacuumCleaner_Roborock" states="start, pause" [color]="VacuumCleaner_Roborock:state | map('Cleaning:red, Paused|Sleeping:green')">
<span class="big"><ftui-label [text]="VacuumCleaner_Roborock:state | map('Cleaning|Zoned Clean:Pause, Paused|Sleeping:Fortsetzen')"></ftui-label></span>
</ftui-button>


[Dracolein]

Ich möchte mich auch langsam an FTUI version 3 wagen.
Wie installiere ich FTUI 3 parallel zu meinem produktiv laufenden FTUI?

Meine bisherigen Files liegen in /opt/fhem/www/tablet und der Browseraufruf erfolgt mittels http://ip:8083/fhem/ftui/index.html

[meier81]

Ich möchte mich auch langsam an FTUI version 3 wagen.
Wie installiere ich FTUI 3 parallel zu meinem produktiv laufenden FTUI?

Meine bisherigen Files liegen in /opt/fhem/www/tablet und der Browseraufruf erfolgt mittels http://ip:8083/fhem/ftui/index.html

Du holst dir die Files wie hier beschrieben: https://github.com/knowthelist/ftui

also in FHEM mit

Code Auswählen Erweitern

update all https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt

die Dateien liegen dann unter /opt/fhem/ww/ftui

Dann definierst du dir ein 2. HTTPSRV-Device mit z.B.

Code Auswählen Erweitern

define TabletUI3 HTTPSRV ftui3/ ./www/ftui/ Tablet-UI3

Und dann hast du beide parallel laufen.

[Dracolein]

Mega, vielen Dank. Hat geklappt. Ich hab mir glaube ich sogar das zukünftige Updaten vereinfach, indem ich hinten drauf noch

Code Auswählen Erweitern

update add https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt
gepackt habe.

Dann werde ich die nächsten Wochenenden mal loslegen und versuchen, mein oldschool FTUI nachzubauen.

[meier81]

Mega, vielen Dank. Hat geklappt. Ich hab mir glaube ich sogar das zukünftige Updaten vereinfach, indem ich hinten drauf noch

Code Auswählen Erweitern

update add https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt
gepackt habe.

Dann werde ich die nächsten Wochenenden mal loslegen und versuchen, mein oldschool FTUI nachzubauen.

Ja das "add" fügt es als feste Datenquelle für Updates hinzu.

Wünsche dir auf jeden Fall viel Spaß, ist echt toll was machbar ist, und ich bin erst (wenn überhaupt) halb fertig 

[StephanFHEM]

ich finde es auf jeden Fall viel viel schneller...

@setstate: Da es sich bei FTUI3 quasi um ein neues System handelt welches nicht kompatibel mit FTUI2 ist und sich die Beiträge ja jetzt anfangen zu häufen, würde es da nicht Sinn ergeben dafür einen neuen Sub-Bereich im Forum zu nutzen? Aufgrund der hohen Arbeitslast beim Umbau gehe ich mal davon aus, dass es beide Systeme noch länger parallel geben wird...

[Dracolein]

Moin zusammen,
die ersten Schritte habe ich gemacht, mein Grid steht und wird Stück um Stück mit Inhalt gefüllt. Fast alle meine Fragen fanden tatsächlich in den zahlreichen Beispielcodes ihre Antworten, echt klasse.
Auch die Möglichkeit mit Tabs / id=view1 usw. zu arbeiten, ist wirklich toll.
An folgenden 2 Dingen bin ich bisher hängen geblieben, bei denen ich mir nicht zu helfen vermag:

1.) Text über einem Bild an beliebiger Stelle darstellen
(Hintergrund: Regenradar-Bild des DWD, über den ich meine Stadt punktgenau per ".Stadtname" markieren möchte). Das hatte ich in der alten FTUI so gelöst:

Code Auswählen Erweitern

<div class="ontop tall white" data-type="label" style="left: 833px; top: 245px">.</div>

2.) Ein Element anzeigen lassen in Abhängigkeit eines Device-Readings
(Hintergrund: die Uhrzeit der nächsten Aktorschaltung soll dargestellt werden, aber nur, wenn diese Schaltautomatik aktiviert ist. Sonst soll an dieser Stelle "inaktiv" angezeigt werden)
Habe ich bisher im alten FTUI so gelöst:

Code Auswählen Erweitern

<div data-type="classchanger" data-device="Nachtlichtautomatikschalter" data-get="state" data-get-on="off"  data-on-class="hide"> 

3.) Einbindung Kalender
Ich fand per Suche hier im Forum dieses Posting ( https://forum.fhem.de/index.php/topic,115259.msg1103009.html#msg1103009 )
Leider konnte ich den Code bei mir nicht wirklich brauchen, es funktioniert nichts. Wo finde ich dazu etwas Doku?
So sieht das ganze bei mir im alten FTUI aus

Code Auswählen Erweitern


<div data-type="calview"
                    data-device="FamilyCal"
                    data-get="all"
                    data-header='["Datum:","Zeit:","Terminbeschreibung:"]'
                    data-header-color="white"
                    data-header-class="bold"
                    data-daysleft-values='[0,5]'
                    data-daysleft-colors='["#aa6900"]'
                    class="bigger darker"
                    data-detail='["bdate","btime","summary"]'
                    data-detailwidth='["20","10","70"]'
                    data-showempty="Derzeit keine Termine"
                    data-oneline="yes"></div>
                </div>


[meier81]

2.) Ein Element anzeigen lassen in Abhängigkeit eines Device-Readings
(Hintergrund: die Uhrzeit der nächsten Aktorschaltung soll dargestellt werden, aber nur, wenn diese Schaltautomatik aktiviert ist. Sonst soll an dieser Stelle "inaktiv" angezeigt werden)
Habe ich bisher im alten FTUI so gelöst:

Code Auswählen Erweitern

<div data-type="classchanger" data-device="Nachtlichtautomatikschalter" data-get="state" data-get-on="off"  data-on-class="hide"> 

Morgen,

bei Punkt 2 kann ich dir helfen, das geht mit dem Parameter

Code Auswählen Erweitern

[hidden], hier mal ein Beispiel von mir, da schalte ich bei mir das badge am Müllsymbol um zwischen Zahlen und text:

Code Auswählen Erweitern

      <ftui-column>
        <ftui-icon name="trash" color="blue" [class-name]="NN_xx_SW_Abfall:PapierinBadDuerkheim_days | step('0:hop,1:')"></ftui-icon>
        <ftui-badge [text]="NN_xx_SW_Abfall:PapierinBadDuerkheim_days | step('0:Heute, 1:Morgen')"
                    [color]="NN_xx_SW_Abfall:PapierinBadDuerkheim_days | step('0:red, 1:yellow')"
                    [hidden]="NN_xx_SW_Abfall:PapierinBadDuerkheim_days | step('0:false, 1:false, 2:true')" class="size-0">
        </ftui-badge> <!-- Heute und Morgen -->
        <ftui-badge [text]="NN_xx_SW_Abfall:PapierinBadDuerkheim_days"
                    [hidden]="NN_xx_SW_Abfall:PapierinBadDuerkheim_days | step('0:true, 1:true, 2:false')" class="size-0">
        </ftui-badge> <!-- alles groesser 1 -->
      </ftui-column>

Das heißt wenn das Attribut [hidden] erfüllt ist blendest du das Element aus. Mapping machst du bei dir ja dann "map" und nicht wie bei mir mit "step", du hast ja nur zwei Zustände[/code]

Zu Punkt 3, hast du hier schonmal geschaut: https://forum.fhem.de/index.php/topic,120379.0.html

Gruß Markus

[Dracolein]

Vielen Dank.

Punkt 2.) = gelöst 

Punkt 1.) = nicht so dramatisch wichtig

Punkt 3.) = habe im separaten Thread gefragt

Punkt 4.) Einbindung eines Live-Videostreams, geht das schon irgendwie?
Über das bekannte Modul SSCAM sind meine zwei Livecams in FHEM eingebunden; in FTUI 2 gibts dafür ein Widget, eingebunden bei mir bisher so:

Code Auswählen Erweitern


<div data-type="sscamstrm" data-device="SSCamSTRM.CamCarport.generic" class="center"></div>

Vermutlich ist das in FTUI Version 3 ohne Weiteres nicht mehr nutzbar, oder?

[grossmaggul]

Vermutlich ist das in FTUI Version 3 ohne Weiteres nicht mehr nutzbar, oder?

Kommt drauf an, wie Deine Kamera den Stream zur Verfügung stellt.

Meine Cam binde ich in FTUI3 so ein:

Code Auswählen Erweitern

<ftui-grid-tile row="7" col="7" height="2" width="2" shape="round" class="semitransparent">
            <ftui-image src="https://DEINE_CAM_IP/videostream.cgi" width="160px">
            </ftui-image> 
</ftui-grid-tile>

[Dracolein]

Tja gute Frage...
Also auf der klassischen FHEMWEB Oberfläche - dank des SSCAM-Moduls - sehe ich die Livestreams eingebunden und funktionsfähig laufen.
Irgendwie muss es möglich sein.  Leider laufen bei mir die Links nicht in einem img-Element (obwohl der jew. Link in einem sep. Browser-Tap ebenfalls läuft!)

edit:
hier ist die Lösung:

https://forum.fhem.de/index.php/topic,45671.msg1183917.html#msg1183917





Davon ab, eine weitere Frage:
Lassen sich weitere Icons irgendwie nutzen und falls ja, wie ? (z.B. die Font-Awesome Sammlung, auf die man auch in FTUI 2 Zugriff hat).
Hintergrund: mir fehlen so einige Icons, auf die ich nicht mehr verzichten möchte, wie z.B. mehr unterschiedliche Shutter-Status-Icons oder Door-open / -cloed usw.

[Dracolein]

Wie gebe ich einem Button entsprechend seines Status unterschiedliche Befehle mit?

Das hier funktioniert soweit schon

Code Auswählen Erweitern


                              <ftui-button [value]="HUEGroup2:any_on" shape="circle"
                                           [color]="HUEGroup2:any_on | map('1:brown, 0:dark')"
                                           (value)="set HUEGroup2 pct 20">
                                  <ftui-icon [namce]="HUEGroup2:any_on | map('1:lightbulb-on, 0:lightbulb')"
                                           [color]="HUEGroup2:any_on | map('1:dark, 0:light')"></ftui-icon>
                              </ftui-button>

jedoch kann ich erwartungsgemäß die Lampengruppe lediglich mit Helligkeit=20 einschalten; aber sie nicht mehr ausschalten.

Hier das Ganze funktional aus FTUI 2.x:

Code Auswählen Erweitern


<div data-type="switch" data-get="any_on" data-get-on="1" data-get-off="0" data-set="pct" data-set-on="20" data-set-off="0" data-device="HUEGroup2" data-off-color="lightgray" data-on-color="#282828"></div>