FTUI version 3

grossmaggul · 28 Februar 2022, 22:25:57

ZitatIch denke das liegt irgendwie am ftui-button in Kombination mit Icon.

Davon gehe ich auch aus, bis vor einigen Versionen war das aber kein Problem und alles war in einer Linie, da wurde wohl was geändert.

Ich habe bisher noch keine anderen Klimmzüge gemacht um das wieder ins Lot zu bringen, außer size=-2 was aber nix gebracht hat.

Werde es mal mit @click realisieren, danke Dir!

Medel · 28 Februar 2022, 22:47:29

Habe es jetzt durch einfügen von {{device}} hinbekommen damit jedes popup eine eindeutige id hat.
index.html:

Code Auswählen


...
<ftui-content class="no-ftui-content" file="template_Heizung.html" name="Bad Handt." device="Bad_Handtuchheizkoerper"></ftui-content>
<ftui-content class="no-ftui-content" file="template_Heizung.html" name="Esszimmer" device="Heizung_Esszimmer"></ftui-content>
...

template_Heizung.html:

Code Auswählen


...
<ftui-label @click="popup{{device}}.open()">{{name}}</ftui-label>
...
<ftui-popup id="popup{{device}}" timeout="0">
  <header>Popup</header>
      <ftui-knob has-scale has-arc has-scale-text has-value-text has-needle
                 (value)="{{device}}:control" min="15" max="25"
                 [value]="{{device}}:4.SET_TEMPERATURE"
      </ftui-knob>
  <ftui-button @click="popup{{device}}.close()</ftui-button>
</ftui-popup>

mr_petz · 28 Februar 2022, 22:48:30

So ging es bei mir:

Code Auswählen


<ftui-label popup-target="{{name}}">{{name}}</ftui-label>
...
<ftui-popup id="{{name}}" timeout="0">
  <header>{{name}}</header>
      <ftui-knob has-scale has-arc has-scale-text has-value-text has-needle
                 (value)="{{device}}:control" min="15" max="25"
                 [value]="{{device}}:4.SET_TEMPERATURE">
      </ftui-knob>
</ftui-popup>

Edit: dir fehlt noch das > hinter 4.SET_TEMPERATURE"

Medel · 28 Februar 2022, 23:01:31

Zitat
Edit: dir fehlt noch das > hinter 4.SET_TEMPERATURE"

Ist beim umkopieren verloren gegangen.

grossmaggul · 01 März 2022, 09:37:38

Daß mit dem "aus der Reihe tanzen" der Buttons hat mir jetzt ja doch keine Ruhe gelassen und ich habe mir mal die "button.component.css" zur Brust genommen.

Ich habe dort mal bei dieser Definition das padding von 0.9em auf 0.8em geändert und bei <ftui-button> size="small" angegeben, dann passt's wieder.

Code Auswählen

/* size */

:host([size="small"]) {
  --border-radius: 6px;
  --padding-top: 0;
  --padding-start: 0.9em;
  --padding-end: 0.9em;
  --padding-bottom: 0;
  height: 2em;
  font-size: 0.9em;
}

Ob das irgendwelche negativen Nebeneffekte hat muss sich noch zeigen.

Nachtrag: Gerade noch festgestellt, daß sich nach der Änderung auch die Icons in der Größe ändern lassen ohne, daß das Label verschoben wird.

christian.71 · 01 März 2022, 17:53:38

Hallo zusammen, bin nun auch dabei meine grafische Oberfläche auf FTUI3 umzustellen. Klappt auch soweit ganz gut.
Im Moment bekomme ich aber bei jedem neu laden der Seite auf meinem Ipad folgende Fehlermeldung:

Code Auswählen

slider.component.js:49 ,ReferenceError: Can´t find variable: ResizeObserver

Seltsamerweise nur auf meinem Ipad. In einem Windows Browser erscheint nichts. Kennt das jemand?
aktuelle Version ist installiert.

Edit: Ich denke, ich habe die Lösung gefunden. Ich habe folgende Zeile in die slider.component.js geschrieben und danach war die Fehlermeldung verschwunden.

Code Auswählen

if (!window.ResizeObserver) install();

stefan-dd · 02 März 2022, 20:28:14

Ich betreibe ein Tablet mit Linux/Chrom und FTUI3 ohne Probleme.
Für die mobilen Geräte habe ich eine mobile Seite, dort liegt das Problem, dass Readings werden nur beim neu laden der Seite aktualisiert.
Auf Windows Geräten funktioniert alles, auf iOS Safari bleibt der Status hängen. Auch die Tabletseite funktioniert auf dem iPhone nicht richtig.
Bei FTUI2 gab es das Problem nie. An fhem liegt es nicht, weil es nur in der Kombination FTUI3 und iPhone nicht funktioniert.
Was kann man da machen?

Code Auswählen

<head>
  <link rel="apple-touch-icon" href="icons/apple.png"/>
  <script src="ftui.js"></script>
  <link href="ftui.css" rel="stylesheet">
  <link href="themes/mobile-dark-theme.css" rel="stylesheet">
  <link href="themes/mobile-theme.css" rel="stylesheet" ftui-binding [disabled]="local:dark | toBool()">
  <link href="favicon.ico" rel="icon" type="image/x-icon" />
  <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">
  <title>FTUI Mobile</title>
</head>

Stonemuc · 03 März 2022, 07:43:34

Gibt es mittlerweile eine möglichkeit eine readingsgroup anzeigen zu lassen bzw. leicht einzubinden? Oder muss ich es selbst über eine Tabelle lösen in die ich alle Werte einbinde?

mr_petz · 03 März 2022, 15:04:41

Zitat von: Stonemuc am 03 März 2022, 07:43:34
Gibt es mittlerweile eine möglichkeit eine readingsgroup anzeigen zu lassen bzw. leicht einzubinden? Oder muss ich es selbst über eine Tabelle lösen in die ich alle Werte einbinde?

Hi. Wurde nicht in Ftui2 die HTML von der ReadingsGroup gelesen?
Dann sollte es doch mit ftui-content gehen.?
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/content2.html
Habe es aber auch noch nicht getestet...
Hier noch der Link zum Beitrag:
https://forum.fhem.de/index.php/topic,115259.msg1184952.html#msg1184952

LG mr_petz

Edit: gerade mal getestet. geht leider nur mit reinen html-code.

moonsorrox · 03 März 2022, 15:21:36

Wie war das nochmal mit der Monatsanzeige in FTUI 3, ich finde es gerade nicht was in welcher Datei geändert werden muss.
Da gerade März wiedere so "M&au21I;r7" aussieht

mr_petz · 03 März 2022, 16:09:57

Hatte das nicht setstate jetzt erst gefixt?
Hast du die letzte Version?
LG

moonsorrox · 03 März 2022, 18:49:54

Ok das muss dann aber ganz aktuell sein, habe gerade nochmal ein Update gefahren und nun ist es es wieder OK.Mein letzter Stand war irgendwie letzte Woche Mittwoch.

mr_petz · 03 März 2022, 20:17:15

@moonsorrox
Fix war vor 8 Tagen am 24.2.
LG

Stonemuc · 03 März 2022, 21:53:52

Zitat von: mr_petz am 03 März 2022, 15:04:41
Hi. Wurde nicht in Ftui2 die HTML von der ReadingsGroup gelesen?
Dann sollte es doch mit ftui-content gehen.?
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/content2.html
Habe es aber auch noch nicht getestet...
Hier noch der Link zum Beitrag:
https://forum.fhem.de/index.php/topic,115259.msg1184952.html#msg1184952

LG mr_petz

Ich glaube jetzt bin ich überfordert...ich check nix....

Hier mal meine readingsgroup - Ansicht siehe Grafik im Anhang:

Code Auswählen

Internals:
   DEF        Mythz:<Schaltprogramm_aktiv>,SwitchingProg Mythz:<Verdichter>,Compressor Mythz:<Heizen>,HeatingHC Mythz:<Warmwasserbereitung>,HeatingDHW Mythz:<Nachheizstufen>,BoosterHC Mythz:<Filterwechsel>,FilterBoth Mythz:<Lüftungsstufe_manuell>,VentStage Mythz:<Lüftungsstufe_aktuell>,fanstage Mythz:<Heizkreispumpe>,PumpHC Mythz:<Abtauen>,Defrost Mythz:<Störung>,Service
   FUUID      5c51c5c4-f33f-6467-999a-ca96fc1d8e1ed243
   NAME       rg_thz_stat
   NR         87
   NTFY_ORDER 50-rg_thz_stat
   STATE      Initialized
   TYPE       readingsGroup
   changed    0
   mayBeVisible 1
   CONTENT:
     Mythz      1
   CONTENT2:
   DEVICES:
     ARRAY(0x6177cb0)
     ARRAY(0x5d4e738)
     ARRAY(0x676adb8)
     ARRAY(0x3dd5368)
     ARRAY(0x67e0828)
     ARRAY(0x64d2bc0)
     ARRAY(0x5d66520)
     ARRAY(0x6561388)
     ARRAY(0x67b9108)
     ARRAY(0x6178e10)
     ARRAY(0x67df368)
   fhem:
     lastDefChange 4
     last_update 1646229944.78328
   helper:
     DEF        
     positions:
       Mythz.BoosterHC 5:2
       Mythz.Compressor 2:2
       Mythz.Defrost 10:2
       Mythz.FilterBoth 6:2
       Mythz.HeatingDHW 4:2
       Mythz.HeatingHC 3:2
       Mythz.PumpHC 9:2
       Mythz.Service 11:2
       Mythz.SwitchingProg 1:2
       Mythz.VentStage 7:2
       Mythz.fanstage 8:2
     valueIcon:
       BoosterHC.0 sani_heating_level_0
       BoosterHC.1 sani_heating_level_60@red
       BoosterHC.2 sani_heating_level_80@red
       BoosterHC.3 sani_heating_level_100@red
       Compressor.0 sani_garden_pump
       Compressor.1 sani_garden_pump@red
       Defrost.0  frost
       Defrost.1  frost@red
       FilterBoth.0 recycling
       FilterBoth.1 recycling@red
       HeatingDHW.0 sani_water_hot
       HeatingDHW.1 sani_water_hot@red
       HeatingHC.0 sani_heating
       HeatingHC.1 sani_heating@red
       PumpHC.0   sani_pump
       PumpHC.1   sani_pump@red
       Service.0  hue_room_garage
       Service.1  hue_room_garage@red
       SwitchingProg.0 hourglass
       SwitchingProg.1 hourglass@red
       VentStage.0 vent_ventilation_level_manual_m
       VentStage.1 vent_ventilation_level_manual_m@red
       fanstage.0 vent_ventilation_level_0@red
       fanstage.1 vent_ventilation_level_1@green
       fanstage.2 vent_ventilation_level_2@blue
       fanstage.3 vent_ventilation_level_3@red
     values:
       formated:
         undef
         undef
         ARRAY(0x64d59c8)
       orig:
         undef
         undef
         ARRAY(0x65d9dc0)
       prefixsuffix:
         undef
         undef
         ARRAY(0x6438c00)
Attributes:
   alias      Status
   group      Heizungsstatus
   nonames    1
   room       Heizung
   sortby     1
   valueIcon  {'SwitchingProg.1'=>'hourglass@red',
 'SwitchingProg.0'=>'hourglass', 
 'Compressor.1'=>'sani_garden_pump@red',
 'Compressor.0'=>'sani_garden_pump', 
 'HeatingHC.1'=>'sani_heating@red',
 'HeatingHC.0'=>'sani_heating', 
 'HeatingDHW.1'=>'sani_water_hot@red',
 'HeatingDHW.0'=>'sani_water_hot', 
 'BoosterHC.3'=>'sani_heating_level_100@red',
 'BoosterHC.2'=>'sani_heating_level_80@red',
 'BoosterHC.1'=>'sani_heating_level_60@red',
 'BoosterHC.0'=>'sani_heating_level_0', 
 'FilterBoth.1'=>'recycling@red',
 'FilterBoth.0'=>'recycling', 
 'VentStage.1'=>'vent_ventilation_level_manual_m@red',
 'VentStage.0'=>'vent_ventilation_level_manual_m', 
 'fanstage.3'=>'vent_ventilation_level_3@red', 
 'fanstage.2'=>'vent_ventilation_level_2@blue', 
 'fanstage.1'=>'vent_ventilation_level_1@green', 
 'fanstage.0'=>'vent_ventilation_level_0@red', 
 'PumpHC.1'=>'sani_pump@red',
 'PumpHC.0'=>'sani_pump', 
 'Defrost.1'=>'frost@red',
 'Defrost.0'=>'frost', 
 'Service.1'=>'hue_room_garage@red',
 'Service.0'=>'hue_room_garage', 

}

Binde ich es jetzt so ein?

Code Auswählen

<ftui-content [content]="rg_thz_stat:html"></ftui-content>
Soe infach kann es doch nicht sein?

mr_petz · 03 März 2022, 22:14:50

Hatte eben auch getestet und es geht nur mit reinem html-code oder einem state-Format.
Sorry hatte vielleicht auch zu einfach gedacht, aber es wird ja erst alles in der Readingsgroup erstellt und ist kein Reading mit html-code.
LG