Hauptmenü

FTUI version 3

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

Vorheriges Thema - Nächstes Thema

grossmaggul

#2535
Oh, war schon Thema, schnell wieder vergessen. :o
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

meier81

Zitat von: mr_petz am 09 August 2022, 14:16:57
Ok. kannst du die html/den Code zur Verfügung stellen. Da könnte man vielleicht direkt auf den entsprechenden <Tag> gehen.
Oder eine bestehende css im Code austauschen??
LG

Edit: in der Demo von grafana müsste man auf:

<div class="panel-container" aria-label="Histogram panel">

Ist das bei dir auch so??

Edit2:
in der class panel-content kannst du einen Background angeben,
in der class panel-title kannst du einen Background angeben,
in der class panel-container kannst du einen Background angeben und im body.
Sollte alles in der css von grafana zufinden sein...

Hallo mr_petz,

ja das ist alles bei mir auch so wie du es schon beschrieben hast. Habe da auch gestern schon einiges probiert, funktioniert aber alles nicht so einfach da Grafana mit sass arbeitet und ich dann erst kompilieren müsste usw.

Die einfachste Art ist wirklich die die ich gestern schon geschrieben habe mit der eigenen .css Datei und dem anpassen der .html Datei.

Von daher können wir das "Problem" als gelöst ansehen  :D
QNAP NAS mit Debian VM, darauf FHEM, debmatic, influxdb2 und Grafana || HB-RF-ETH || SIGNALduino 433MHz mit Maple mini || WS980 Wetterstation || Xiaomi Mi Robot mit valetudo-FW || Buderus web KM100 || div. Tasmota-Devices

mr_petz

#2537
@meier81

Du hast zwar:
Zitat
Von daher können wir das "Problem" als gelöst ansehen  :D
geschrieben, aber ich möchte gerne noch einen Test mit dir bitte machen.
Ich würde gern eine alternative Lösung für andere aufzeigen. Die Demo von grafana lässt sich leider nicht ins iframe einbinden. Deswegen bist du nochmal gefragt :D
(Ich bin da einwenig hartnäckig... ;))


<iframe id="myiframe" src="http://192.168.179.50:3000/d-solo/SEmMd_zVz/ftui3?orgId=1&refresh=5m&panelId=2&kiosk" width="100%" height="100%" allowtransparency="true">
</iframe>
<script>
  document.querySelector("#myiframe").addEventListener ( "load", function () {
  this.contentWindow.document.head.insertAdjacentHTML('afterend',
  '<style type="text/css">body{background:transparent !important;}'
  +'.panel-container{background:transparent;}'
  +'.panel-title{background:black;color:white;}'
  +'.panel-content{background:yellow;color:green;}'
  +'</style>')
  });
</script>


Danke und LG mr_petz

Edit: Onlinetest im Anhang.

meier81

@mr_petz,

wir können da gerne noch etwas testen, ist bloß wirklich die Frage ob wir hierzu nicht besser ein eigenes Thema aufmachen.

Hab deinen Code mal probiert, funktioniert aber wieder nicht, ich bekomme wieder nur einen weißen Rahmen außen. Hab mal einen Screenshot angefügt.

Zudem habe ich mal den Code von der Grafana-Seite angehängt sowie die index.html wo ja die Änderungen von meinem Link eingefügt werden sollte und die passende grafana.dark.4abbc783977ac5086f80.css, in der ja dann die Farbdefinitionen gemacht sind. Ein ändern dieser Definitionen hatte dann auch Auswirkung auf das Aussehen, aber halt leider auf "globaler" Ebene für mein gesamtes Grafana.

Gruß Markus
QNAP NAS mit Debian VM, darauf FHEM, debmatic, influxdb2 und Grafana || HB-RF-ETH || SIGNALduino 433MHz mit Maple mini || WS980 Wetterstation || Xiaomi Mi Robot mit valetudo-FW || Buderus web KM100 || div. Tasmota-Devices

mr_petz

Ok danke. Schaue ich mir an.
LG

pula

Ich hoffe, die Antwort kam hier noch nicht, hab gesucht, aber so nichts gefunden. Bitte um Verzeihung, falls ich was übersehen haben sollte.
Problemstellung ist folgende:
Die espled-controller können mit set controller on bzw off ein oder ausgeschaltet werden.
Allerdings ist der Status des Lichts dann nicht im state (dort ist der verbindungsstatus des controllers drin), sondern im reading stateLight.
Schön wäre es, einen switch oder button zu haben, bei dem das set einen wert ändert, der Status des switches aber von einem anderen reading kommt.
Geht das? Wie?
fhem (debian auf proxmox), HM-LAN und wired, MySensors, FritzBoxes, Kodi, vdr, Onkyo, squeezeplayers, nanoCUL, wifilight (Ethernet-Bridge), Heizungssteuerung (python/vncdotool), doorpi, ESP/Arduinos/MQTT, Alexa, HomeConnect, Sonoff/Tasmota, espRGBWW, esphome, Telegram

OdfFhem

@pula

Meintest Du in etwa so - am Beispiel Sonos:

<ftui-button fill="outline" shape="circle"
                   [value]="Sonos_Kueche:transportState | map('PLAYING: play, PAUSED_PLAYBACK|STOPPED: pause')"
                   (value)="Sonos_Kueche" states="play, pause">
        <ftui-icon [name]="Sonos_Kueche:transportState  | map('PLAYING: stop, PAUSED_PLAYBACK|STOPPED: play');
              Sonos_Kueche:state | map('play: stop, pause: play')">
        </ftui-icon>
      </ftui-button>


- transportState gibt den aktuellen Zustand zurück
- die set-Aktionen legen einen Folgezustand fest

Weitere Beispiele im FTUI3 - button-example ...

mr_petz

Zitat von: meier81 am 11 August 2022, 21:22:42
@mr_petz,

wir können da gerne noch etwas testen, ist bloß wirklich die Frage ob wir hierzu nicht besser ein eigenes Thema aufmachen.

Hab deinen Code mal probiert, funktioniert aber wieder nicht, ich bekomme wieder nur einen weißen Rahmen außen. Hab mal einen Screenshot angefügt.

Zudem habe ich mal den Code von der Grafana-Seite angehängt sowie die index.html wo ja die Änderungen von meinem Link eingefügt werden sollte und die passende grafana.dark.4abbc783977ac5086f80.css, in der ja dann die Farbdefinitionen gemacht sind. Ein ändern dieser Definitionen hatte dann auch Auswirkung auf das Aussehen, aber halt leider auf "globaler" Ebene für mein gesamtes Grafana.

Gruß Markus

Ich glaube das können wir vergessen...
Da scheint noch ein iframe drin zustecken.
Ist schon sehr komplex... sorry.
Deine Lösung ist ja erstmal nicht schlecht....
LG mr_petz

pula

Zitat von: OdfFhem am 12 August 2022, 10:59:05
@pula

Meintest Du in etwa so - am Beispiel Sonos:

<ftui-button fill="outline" shape="circle"
                   [value]="Sonos_Kueche:transportState | map('PLAYING: play, PAUSED_PLAYBACK|STOPPED: pause')"
                   (value)="Sonos_Kueche" states="play, pause">
        <ftui-icon [name]="Sonos_Kueche:transportState  | map('PLAYING: stop, PAUSED_PLAYBACK|STOPPED: play');
              Sonos_Kueche:state | map('play: stop, pause: play')">
        </ftui-icon>
      </ftui-button>


- transportState gibt den aktuellen Zustand zurück
- die set-Aktionen legen einen Folgezustand fest

Weitere Beispiele im FTUI3 - button-example ...
Hallo,

vielen Dank! ist schon besser. ich hab jetzt in einem content folgendes:
<ftui-switch
        (value)="{{device}}"
        [value]="{{device}}:stateLight"
        texts='I,O'>

der status von dem switch wird jetzt richtig gesetzt, danke schön.
Hab grad das für mich nächste Rätsel entdeckt:
In einem content-file habe ich folgenden Code:
<ftui-button
   shape="circle"
   [(value)]="{{device}}"
   [color]="{{device}}:state | map('on:primary, off:dark, 1:primary, 0:dark')">
   <ftui-icon [name]="{{device}}:state | map('on:lightbulb-on, off:lightbulb, 0:lightbulb, 1:lightbulb-on')"></ftui-icon>
</ftui-button>

Klappt soweit wunderbar, danke schön! ftui3 ist einigermassen anders als ftui2, da muss man erst reinwachsen....
fhem (debian auf proxmox), HM-LAN und wired, MySensors, FritzBoxes, Kodi, vdr, Onkyo, squeezeplayers, nanoCUL, wifilight (Ethernet-Bridge), Heizungssteuerung (python/vncdotool), doorpi, ESP/Arduinos/MQTT, Alexa, HomeConnect, Sonoff/Tasmota, espRGBWW, esphome, Telegram

pula

Aber ein hab ich noch ;-)
Hatte in ftui2 mit circlemenu und data-icons eine recht nette Steuerung für Rolladen gebaut (oder geklaut, weiss ich nicht mehr).
Das sah so aus:
<div data-type="symbol" class="big narrow" data-device="par01" data-get="state"
               data-icons='["oa-fts_window_2w","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40",
                          "oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80",
                      "oa-fts_shutter_90","oa-fts_shutter_100","oa-fts_shutter_100"]'
               data-get-on='["off","10","20","30","40","50","60","70","80","90","100","on"]' data-on-color="#2A2A2A"
               data-on-background-color="#aa6900" data-background-icon="">
</div>

wie kann man so was in ftui3 nachbauen?
sorry, falls ich nerve, aber trotz suche hab ich nix ordentliches gefunden....
fhem (debian auf proxmox), HM-LAN und wired, MySensors, FritzBoxes, Kodi, vdr, Onkyo, squeezeplayers, nanoCUL, wifilight (Ethernet-Bridge), Heizungssteuerung (python/vncdotool), doorpi, ESP/Arduinos/MQTT, Alexa, HomeConnect, Sonoff/Tasmota, espRGBWW, esphome, Telegram

meier81

Zitat von: mr_petz am 12 August 2022, 15:02:50
Ich glaube das können wir vergessen...
Da scheint noch ein iframe drin zustecken.
Ist schon sehr komplex... sorry.
Deine Lösung ist ja erstmal nicht schlecht....
LG mr_petz

Hallo mr_petz,

trotzdem vielen Dank für´s drüberschauen, hätte ja sein können das es doch recht einfach geht.

Gruß Markus
QNAP NAS mit Debian VM, darauf FHEM, debmatic, influxdb2 und Grafana || HB-RF-ETH || SIGNALduino 433MHz mit Maple mini || WS980 Wetterstation || Xiaomi Mi Robot mit valetudo-FW || Buderus web KM100 || div. Tasmota-Devices

mr_petz

Zitat von: pula am 12 August 2022, 16:04:30
Aber ein hab ich noch ;-)
Hatte in ftui2 mit circlemenu und data-icons eine recht nette Steuerung für Rolladen gebaut (oder geklaut, weiss ich nicht mehr).
Das sah so aus:
<div data-type="symbol" class="big narrow" data-device="par01" data-get="state"
               data-icons='["oa-fts_window_2w","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40",
                          "oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80",
                      "oa-fts_shutter_90","oa-fts_shutter_100","oa-fts_shutter_100"]'
               data-get-on='["off","10","20","30","40","50","60","70","80","90","100","on"]' data-on-color="#2A2A2A"
               data-on-background-color="#aa6900" data-background-icon="">
</div>

wie kann man so was in ftui3 nachbauen?
sorry, falls ich nerve, aber trotz suche hab ich nix ordentliches gefunden....

Hi, kleiner Denkanstoss...:

<ftui-circlemenu keep-open style="height:3em">
  <ftui-button fill="none">
     <ftui-icon class="size-3" name="window-shutter" [name]="Rolladen_WZ_mitte:position | map('0:fts_window_2w, 25:fts_shutter_30, 50:fts_shutter_50, 75:fts_shutter_80, 100:fts_shutter_100')"></ftui-icon>
  </ftui-button>
  <ftui-label>Steuerung</ftui-label>
  <ftui-button (value)="Rolladen_WZ_mitte:position" states="opens">Auf</ftui-button>
  <ftui-button (value)="Rolladen_WZ_mitte:position" states="25">25</ftui-button>
  <ftui-button (value)="Rolladen_WZ_mitte:position" states="50">50</ftui-button>
  <ftui-button (value)="Rolladen_WZ_mitte:position" states="75">75</ftui-button>
  <ftui-button (value)="Rolladen_WZ_mitte:position" states="closes">Zu</ftui-button>
</ftui-circlemenu>


Stammt aus diesen Thread (von mir einwenig angepasst):
https://forum.fhem.de/index.php/topic,115259.msg1121887.html#msg1121887

LG mr_petz

pula

Hi mr_petz!

Danke für die rasche Antwort! tut soweit, nur einen kleinen schönheitsfehler hab ich noch:
da das (homematic) device auch Werte wie zb 35 zurückliefert, während der Rolladen sich bewegt, kommt dann in ftui3 anstatt des icons der fehler, daß 35.svg nicht gefunden wird (logisch, gibts ja nicht).
Kann man irgendwie verhindern, daß Werte, die nicht in der map sind dargestellt werden?
fhem (debian auf proxmox), HM-LAN und wired, MySensors, FritzBoxes, Kodi, vdr, Onkyo, squeezeplayers, nanoCUL, wifilight (Ethernet-Bridge), Heizungssteuerung (python/vncdotool), doorpi, ESP/Arduinos/MQTT, Alexa, HomeConnect, Sonoff/Tasmota, espRGBWW, esphome, Telegram

mr_petz

Da nimmst du die pipe step() statt map().
LG

pula

Ist ja genial. Tut! DANKE!
cheers,
Pula
fhem (debian auf proxmox), HM-LAN und wired, MySensors, FritzBoxes, Kodi, vdr, Onkyo, squeezeplayers, nanoCUL, wifilight (Ethernet-Bridge), Heizungssteuerung (python/vncdotool), doorpi, ESP/Arduinos/MQTT, Alexa, HomeConnect, Sonoff/Tasmota, espRGBWW, esphome, Telegram