Hauptmenü

FTUI version 3

Begonnen von Bunnu, 25 Oktober 2020, 09:25:41

Vorheriges Thema - Nächstes Thema

Superposchi

Welchen Colorpicker nutzt ihr um eure HUE-Lampen zu steuern?

Ich habe für sat, bri, ct(Kelvin) die Slider genutzt und es funktioniert auch mit unmittelbarer Reaktion in der jeweiligen Lampe.
Allerdings bekomme ich es nicht hin, die Farbe zu direkt zu ändern. Alle Colorpicker setzen zwar den RGB-Wert aber zeigen logischerweise keine direkte Auswirkung auf die Lampe. Es muss mindestens erstmal eine zweite Änderungsmöglichkeit betätigt werden.

Einzige Ausnahme davon sind die RBG-Slider, aber das ist ehrlich gesagt zu umständlich um da eine Farbe einzustellen.

twinFHEM

#3301
Hallo zusammen!

Ist es möglich, mit einem Button ein View, z.B. View1 zu öffnen?
<ftui-tab-view id="View1">...</ftui-tab-view>

Ich habe es mal naiv mit Folgendem probiert, funktionierte aber wie zu erwarten nicht. ;D

<ftui-button @click="view1.open()">View 1</ftui-button>
<ftui-button view="1">View 1</ftui-button>
<ftui-button @click="onClicked('View 1')">View 1</ftui-button>


Ich kann mir mit einem zum Button umgestalteten ftui-tab <ftui-tab view="View1" fill="solid" color="primary" timeout="5">Tab1</ftui-tab> helfen, aber zu wissen, ob es mit einem Button geht oder nicht, würde mir weiterhelfen.


LuGu

Hallo twinFHEM,

ja das geht. Kann man sich ganz gut im Beispiel ansehen.

https://knowthelist.github.io/ftui/www/ftui/examples/tab.html

Gruß LuGu
FHEM mit RPi3 (Visu über FTUI)
HMCCU mit piVCCU3 / MQTT2 mit zigbee2mqtt

twinFHEM

Hi LuGu,

mmmh...
Was meinst Du genau?

Dass es mit einem <ftui-tab> geht, weiß ich (s. mein Beispiel).
Aber gibt es tatsächlich die Möglichkeit, dies mit einem nativen <ftui-button> zu erledigen?

Viele Grüße

mr_petz

#3304
@twinFHEM

ftui-tab kannst du mit value steuern.
Bsp.:
ftui-tab:

<ftui-tab view="View1" direction="vertical" active [value]="local:ftuitest">
  <ftui-icon name="home1"></ftui-icon>
  <ftui-label>Home</ftui-label>
</ftui-tab>

button:

<ftui-button (value)="local:ftuitest" states="on">View1</ftui-button>

Hier im Bsp. nehme ich local. Da wird nix an fhem gesendet.

Was @LuGu bestimmt meinte ist das:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/tab.html#L46

LG mr_petz

Edit:
Alternativ mit id und @click:

<ftui-tab view="View1" id="ViewHome" direction="vertical" active>
  <ftui-icon name="home1"></ftui-icon>
  <ftui-label>Home</ftui-label>
</ftui-tab>

hier darf in der id= aber nicht die aus view= stehen und darf auch nur einmal vorkommen...


<ftui-button @click="ViewHome.value='on'">View1</ftui-button>

LuGu

Zitat von: twinFHEM am 16 März 2023, 14:44:25
Hi LuGu,

mmmh...
Was meinst Du genau?

Dass es mit einem <ftui-tab> geht, weiß ich (s. mein Beispiel).
Aber gibt es tatsächlich die Möglichkeit, dies mit einem nativen <ftui-button> zu erledigen?

Viele Grüße

Deine ursprüngliche Frage war:
,,Ist es möglich, mit einem Button ein View, z.B. View1 zu öffnen?"

Hätte ich wohl genauer lesen müssen. Sorry für mich ist ein ftui-tab mit einem ftui-Icon auch ein Button.

Gruß LuGu
FHEM mit RPi3 (Visu über FTUI)
HMCCU mit piVCCU3 / MQTT2 mit zigbee2mqtt

twinFHEM

Wow, mr_petz!
Besten Dank für die präzise und informative Veranschaulichung.
So klar habe ich es noch nicht gesehen.

Vielen Dank euch beiden!

Superposchi

#3307
Ich möchte in einer Handy-Version für FTUI3 gerne eine Auswahl der Lichter mit Link zur entsprechenden Detailseite einrichten.
Für jedes Licht soll erst ein Symbol, dann der Lampenname und am Ende ein Symbol für die Lampeneigenschaften mit dem ">" dahinter angezeigt werden.

Das Symbol am Ende soll entsprechend der Leuchtstärke und Farbe formatiert werden. Es will mir aber nicht gelingen.
Da ich bisher keine echte Dokumentation der Tag-Eigenschaften finden konnte ist der folgende Code als Versuch eher zusammen geraten:
<header class="size-2" margin="2">&nbsp;&nbsp;Lichter:</header>
<ftui-view-item target="Licht_Schlafzimmer_Decke">
<ftui-icon name="hue2019_archetypesDoubleSpot" slot="start" color="gray"></ftui-icon>Deckenlicht
<ftui-icon [name]="HUEGroup21:pct | step('[0-9]:light_light_dim_00, 1[0-9]:light_light_dim_10, 2[0-9]:light_light_dim_20, 3[0-9]:light_light_dim_30, 4[0-9]:light_light_dim_40, 5[0-9]:light_light_dim_50, 6[0-9]:light_light_dim_60, 7[0-9]:light_light_dim_70, 8[0-9]:light_light_dim_80, 9[0-9]:light_light_dim_90, 100:light_light_dim_100')"
[color]="HUEGroup21:rgb"></ftui-icon>
</ftui-view-item>

<ftui-view-item target="Licht_Schlafzimmer_PC">
<ftui-icon name="hue2019_archetypesSingleSpot" slot="start" color="gray"></ftui-icon>PC-Licht
<ftui-icon [name]="HUEDevice9:pct | map('[0-9]:light_light_dim_00, 1[0-9]:light_light_dim_10, 2[0-9]:light_light_dim_20, 3[0-9]:light_light_dim_30, 4[0-9]:light_light_dim_40, 5[0-9]:light_light_dim_50, 6[0-9]:light_light_dim_60, 7[0-9]:light_light_dim_70, 8[0-9]:light_light_dim_80, 9[0-9]:light_light_dim_90, 100:light_light_dim_100')"
[color]="HUEDevice9:rgb"></ftui-icon>
</ftui-view-item>

<ftui-view-item target="Licht_Schlafzimmer_Lese">
<ftui-icon name="hue_filled_lightstrip" slot="start" color="y"></ftui-icon>Leselicht
<ftui-icon [name]="HUEDevice14:pct | map('[0-9]:light_light_dim_00, 1[0-9]:light_light_dim_10, 2[0-9]:light_light_dim_20, 3[0-9]:light_light_dim_30, 4[0-9]:light_light_dim_40, 5[0-9]:light_light_dim_50, 6[0-9]:light_light_dim_60, 7[0-9]:light_light_dim_70, 8[0-9]:light_light_dim_80, 9[0-9]:light_light_dim_90, 100:light_light_dim_100')"
[color]="HUEDevice14:ct"></ftui-icon>
</ftui-view-item>


Wie man sehen kann habe ich es sowohl mit map als auch step probiert. Auch feste Zahlen habe ich ausprobiert.

Auf dem beigefügten Screenshot habe ich ein Platzhaltersymbol an der Stelle des Icons eingefügt.
Kann mir jemand helfen?

Problem gelöst!

Superposchi

#3308
Ich versuche einer HUE-Lampe per colorpicker einen Farbwert zuzuweisen, doch irgendwie klappt das nicht.
Ich nutze folgenden Code:
<ftui-colorpicker margin="0.5" [hex]="HUEGroup21:rgb" (hex)="set HUEGroup21 rgb $value"></ftui-colorpicker>
Soweit ich das im Frontend sehen kann wird auch ein "set HUEGroup21 rgb #??????" als Befehl abgesetzt. Die Fragezeichen stehen für einen Farbcode im Hex-Format. Doch die Lampe wird nicht umgestellt, Manchmal wechselt das colorpicker nach dem Befehl sogar zu einer völlig anderen Farbe.

Wo ist der Fehler?

P.S. Der Fehler liegt darin, dass vor dem Hex-Wert eine # mitgesendet wird. Im Set-Befehl darf natürlich keine # vor dem Farbwert stehen.

Die # wird aber aus dem $value automatisch generiert. Die Frage ist also wie bekomme ich die # vor dem Farbwert gelöscht?

P.S. Lösung gefunden

setstate

Zitat von: Superposchi am 15 März 2023, 22:58:41Ok, jetzt hab ich den Ansatz verstanden.
Du meinst also für jedes Handy einen eigenen Wegzugang mit separatem Port zur Identifikation.

Ist die Frage wie und ob man das in FTUI3 auslesen und darauf reagieren kann. Denke mal das ist eine Frage für setstate.

Man könnte Elemente, die man ausblenden will, mit einer ID ausstatten und dann per <Script> nach dem Laden der Seite verstecken.

<ftui-grid-tile id="papa"

Im Header:

  <script>
    document.addEventListener("DOMContentLoaded", () => {
     mama.hidden = window.location.host.includes('8084');
     papa.hidden = window.location.host.includes('8083');
    });
 </script>

Man könnte auch versuchen per Navigator Objekt Unterschiede der Telefone auszunutzen.
https://developer.mozilla.org/en-US/docs/Web/API/Navigator

  <script>
    document.addEventListener("DOMContentLoaded", () => {
     mama.hidden = navigator.userAgent.includes('Android');
     papa.hidden = navigator.userAgent.includes('iPhone');
    });
 </script>

Einer könnte sein Telefon auf eine andere Sprache zu stellen

  <script>
    document.addEventListener("DOMContentLoaded", () => {
     mama.hidden = navigator.language.includes('en');
     papa.hidden = navigator.language.includes('de');
    });
 </script>



tomster

Zitat von: Superposchi am 15 März 2023, 17:41:19Nein eben nicht.
Dann muss jede Änderung in beiden Dateien nachgeholfen werden was es alles andere als einfach macht.
Nicht aber, wenn Du die "gemeinsamen" Widgets/Inhalte/etc. über
<ftui-content file="bla.html"></ftui-content> als Template in beide HTML-Seiten einbindest, oder?

Wenn es sich bei den "personalisierten Inhalten" dann noch jeweils um die gleichen Typen von readings handelt, könnte man zudem auch Variablen in die content-Seiten übergeben.

Ich habe das mit den Wetterdaten in meiner Anzeige so gemacht:
index.html
<ftui-content file="content_wx.html" devicefc="AerisWeather:response_01_periods_01"></ftui-content>
<ftui-content file="content_wx.html" devicefc="AerisWeather:response_01_periods_02"></ftui-content>
<ftui-content file="content_wx.html" devicefc="AerisWeather:response_01_periods_03"></ftui-content>

content_wx.html dann z.B.
<ftui-row align-items="center">
<ftui-label size-8" [text]="{{devicefc}}_minTempC"><span slot="unit" size-8">°</span></ftui-label>
<ftui-label size-8" [text]="{{devicefc}}_maxTempC"><span slot="unit" size-8">°</span></ftui-label>
</ftui-row>

Damit bekomme ich in die max/min-Temperatur für die 3 "periods" in jeweils einer Zeile angezeigt, ohne dass ich den kompletten Code 3 Mal einfügen muss.

cotecmania

Hallo,

wie kann ich in ftui3 ein Datum wie z.B. "21.03.2023 14.10" umformatieren mit z.B. nur noch 2-stelliger Jahreszahl.
Mit "toDate" und "format" habe ich es nicht geschafft, weil es beim "format" keine Platzhalter dafür gibt, oder ?
Anzeige des Wochentages wäre auch ein Wunsch.

Gruss
Joe
FHEM auf RaspberryPI B (buster)
2xCUL868 für MAX/Slow_RF, HM-LAN, JeeLink
MAX!/HM-Thermostate, FS20/HM-Rolladenschalter, FS20-EM, LevelJet-Ölstandsmessung, PCA301, IT, KM271, IPCAM, FireTAB10 FTUI

yersinia

#3312
Müsste eigtl mit YY gehen:
<ftui-label [text]="device:reading | toDate() | format('eeee, D. MMMM YY')"></ftui-label>Ergibt sowas wie Donnerstag, 23. März 2023
Allerdings scheint YY genauso wie YYYY zu funktionieren, man könnte sich hier mit replace behelfen:
<ftui-label [text]="device:reading | toDate() | format('eeee, D. MMMM YY') | replace(' 202',' 2')"></ftui-label>ergibt Donnerstag, 23. März 23.
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

cotecmania

"YY" geht leider nicht, das hatte ich schon getestet.

Der Replace schaffts aber das ist natürlich sehr speziell ...

Danke
Joe
FHEM auf RaspberryPI B (buster)
2xCUL868 für MAX/Slow_RF, HM-LAN, JeeLink
MAX!/HM-Thermostate, FS20/HM-Rolladenschalter, FS20-EM, LevelJet-Ölstandsmessung, PCA301, IT, KM271, IPCAM, FireTAB10 FTUI

yersinia

#3314
Zitat von: cotecmania am 23 März 2023, 15:11:37"YY" geht leider nicht, das hatte ich schon getestet.
Das wäre was für @setstate; es ist spezifiziert aber funktioniert nicht wie gedacht - im Prinzip spuckt es genau das aus, was YYYY liefert.
@setstate: ggf solltest du den substring in Zeile 234 anpassen:
const YY = date.getFullYear().toString().substr(-2);
Zitat von: cotecmania am 23 März 2023, 15:11:37Der Replace schaffts aber das ist natürlich sehr speziell ...
Ja, es schneidet einfach die 20 von 2023 raus; und in der ersten Version sogar etwas zuviel (es würde am 20. auch das Tagesdatum rausfiltern); daher hier eine angepasste Version die zumindest bis 2029 funktionieren sollte:
<ftui-label [text]="device:reading | toDate() | format('eeee, D. MMMM YY') | replace(' 202',' 2')"></ftui-label>
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl