FTUI version 3

[mr_petz]

Mach mal ne rechte Maus auf das Icon und dann untersuchen.
Dann solltest du die Eigenschaften des Icon und des ganzen popupinhalts sehen.

Edit. Es wird eben der komplette html+css einfach so Übernommen von fhem.

[Dracolein]

komplex. soviele Screenshots kann ich kaum machen 

[mr_petz]

jetzt machst du eine rechte Maus auf ftui-content und speicherst (copy Element) den Text und postest ihn. (copy/paste)
hier in deinem screen sieht man schon svg.weather_cloudy ist riesig...

[Dracolein]

editiert, siehe Anhang,.

[mr_petz]

Das ist wohl zuviel des guten.
Schiebe es in eine Datei (Text oder HTML) und lade diese hoch.

Edit: Man sieht die ganzen svg´s werden so groß dargestellt width="468pt" height="390pt" und besitzen eine eigene class...
Wenn du jetzt einen style Eintrag in deiner css machst:

Code Auswählen Erweitern


svg{
width:50px;
height:50px;
}

Siehst du den Unterschied.
Am besten noch dem ftui-content eine eindeutige, eigene id mitgeben und den svg eintrag darauf beziehen..

Code Auswählen Erweitern


#ftui_content_draco svg{
width:50px;
height:50px;
}


[Dracolein]

obiges Posting editiert.

[Dracolein]

Wow krass, langsam nicht so schnell   

css Datei = ftui.css ?  (ich hab bewusst bislang auf jegliche manuelle Dateimodifikationen verzichtet, damit mir bei einem Update nichts überschrieben wird)

Und wie sähe der <ftui-content> Parameter aus für eine individuelle ID ?

(nach Änderung an *.css Files ist ein Neustart erforderlich?)

[mr_petz]

content:

Code Auswählen Erweitern


<ftui-content id="ftui_content_draco" [content]="PVVorschau | sendCommand('get PVVorschau html')"></ftui-content>

theoretisch sollte das auch gehen:

Code Auswählen Erweitern


<ftui-content id="ftui_content_draco" [content]="PVVorschau | getHTML('PVVorschau')"></ftui-content>


user.css :

Code Auswählen Erweitern


#ftui_content_draco svg{
width:50px;
height:50px;
}

mehr brauch da nicht rein. Legst die einfach im themes Ordner an und bennenst sie user.css
Diese wird nicht überschrieben!

im ftui bindest du sie auf deiner Seite so unter dem ftui.css <link> ein:

Code Auswählen Erweitern


<link href="themes/user.css" rel="stylesheet">


alternativ machst du einen <style> eintrag im head:

Code Auswählen Erweitern


<style>
#ftui_content_draco svg{
width:50px;
height:50px;
}
</style>


LG

Edit:
Interaktionen gehen so in richtung fhem aber noch nicht. Die Funktions im content sind fhem-functions.
Scheint hier bei dir zu gehen...
Bei SonosReadingsGroup gingen keine Befehle raus...

Ein Neustart ist nicht erforderlich. Höchstens ein leeren des cache und refresh der Seite.

Edit2:
Interaktionen gehen so noch nicht in Richtung fhem durch die hinterlegte fhem function FW_cmd().
Bsp aus deinem HTML:

Code Auswählen Erweitern


onclick="FW_cmd('/fhem?XHR=1&cmd=set PVVorschau consumerAction set ShellyPlug5 off')"


Ich hatte mir da eine gebaut und integriert. Geht vielleicht auch noch eleganter...aber naja.

Code Auswählen Erweitern


<script>
function FW_cmd(dev) {
  ftuiApp.fhemService.sendCommand(dev.replace('/fhem?XHR=1&cmd=',''));
  ftuiApp.toast(dev.replace('/fhem?XHR=1&cmd=',''));
}
</script>

könnte bei dir funzen... und somit du kannst deine Befehle aus dem content senden.
Ich hatte mir die für Sonos gebaut:
https://forum.fhem.de/index.php/topic,115259.msg1212174.html#msg1212174

[Dracolein]

Tja, da bleibt mir nur ein offen stehender Mund als Geste der Unfassbarkeit für Deine selbstlose Hilfe (wie schon so oft in diesem Thread).
Herzlichen Dank 
(Muss auch mal gesagt werden, weil ganz ehrlich.... das ist nicht selbstverständlich.)

Abschließendes Fazit: habe Deine Anweisungen 1:1 befolgt und die Darstellung im Popup funktioniert sehr gut.
Ich werde im SolarForecast-Thread ein Crossposting zu Deiner Lösung machen, vielleicht hilft es dort irgend jemandem noch weiter.

[mr_petz]

Danke dir. Immer wieder gern.
Die Größe der svg´s im css musst du deinen Bedürfnissen anpassen.
Prozentangabe würde auch gehen:

Code Auswählen Erweitern


    width: 60%;
    height: auto;


LG

ps. in der heutigen Zeit muss man sich gegenseitig helfen...
Der eigentliche Dank muss aber an setstate gehen. Ohne diese Basis/Grundlage könnten wir alle nicht darauf aufbauen...

sehe ich da einen KussSmilie....

Edit: Habe eins oben was ergänzt wegen der Befehle die gesendet werden können aus deinem content...

[Dracolein]

Habe kürzlich mal wieder FHEM update all gemacht. Scheinbar hat sich der Hexcode für die Farbe "blue" etwas geändert.
Ich meine das Problem hatte ich bei mir schon einmal. Um der Sache für mich Herr zu werden, nach allem was ich gelernt habe, müsste ich die Definition für "blue" in der user.css eintragen, wessen Farbcode das Wort zugeordnet werden soll. Wäre das richtig?

Was müsste ich dort eintragen? In der ftui-theme.css finde ich die Definition

Code Auswählen Erweitern

  --blue: #436D8D;

[Dracolein]

Guten Morgen zusammen,

"Notfall" am Sonntag bei mir:
Ich bemerke auf meiner FTUI3 Oberfläche, dass diverse dargestellte <ftui-label> Text-Readings nicht mehr aktualisiert werden. Ich muss die Browserseite neu laden, damit aktulle Werte dargestellt werden.
Dies betrifft den Chromebrowser auf dem Raspi genauso wie den Safari-Browser auf meinem MacBook.

In FTUI-Web, also der Standardoberfläche, aktualisieren sich die Readings innerhalb der Devices aber weiterhin wie gewohnt.
Am Beispiel meiner PV-Anlage, dessen Werte sich momentan im 10-Sekunden Takt ändern, lässt sich dies reproduzieren.

Habe ein "update all" gefolgt von einem shutdown restart gemacht, sowie den gesamten raspberry hart neugestartet, auf dem FHEM drauf läuft.
Keine Änderung. Wurde irgendwas in FTUI3 verändert, sodass ich die dargestellten <ftui-label> Parameter eventuell verändern muss ?

Hier ein Beispiel, was sich nicht aktualisiert:

Code Auswählen Erweitern


       <ftui-label [text]="SMATripower6:PV_Gesamterzeugung | fix(0)"  class="size-4"
                [color]="SMATripower6:PV_Gesamterzeugung | step('1: green, 4000: orange, 6000: red')">
                <span class="size-0" slot="unit">W</span></ftui-label>


Die Darstellung statusabhängiger <ftui-icon> Icons funktioniert beispielsweise weiterhin problemlos. (z.B. Tür offen/zu, Fenster auf/zu...)

Ich muss das Ganze leider verallgemeinern. Das ursprüngliche Problem besteht weiterhin sporadisch und ich finde keine Ursache.
Entgegen anfänglicher Vermutungen beschränkt es sich nicht auf <ftui-label> oder ähnliches, sondern weitgehend auf die ganze laufende FTUI-Darstellung.
Icons oder Buttons, die z.B. einen Lampenzustand darstellen, ändern sich ebenfalls nicht mehr.

Nach einem Neustart des Raspberry Pi und Darstellung wie immer mittels Chromium läuft alles normal für einige Stunden.
Dann, grundlos, stockt die Darstellung.  Erst bei einer aktiven Eingabe, also dem Klick auf z.B. einen Button scheint sich alles zu fangen und dann werden auch Zustände grafisch aktualisiert, die bis dahin niciht aktuell waren. Aber auch das ist nicht immer reproduzierbar. Bei Klick auf einen Button wird das Device (Lampe) zwar geschaltet, das grafische Feedback in Form geänderter Buttonfarbe hingegen bleibt aus.
FHEM im Hintergrund läuft weiter und verrichtet seinen Job.

Done:
- kompletter Neustart
- FHEM komplett aktualisiert
- Raspbian komplett aktualisiert
- Cache geleert vom Chromium Browser

Ich könnte meine letzten FTUI3-Änderungen noch rückgängig machen und schauen was passiert...
(die letzte Änderung war das Hinzufügen eines Charts als " dynamische Hintergrundgrafik" in einem Element)

[mr_petz]

Du meinst also content war/ist der Übeltäter?

[Dracolein]

Nein keineswegs. Aber ich habe jetzt dennoch die Änderungen im Code auskommentiert sowie weitere Kleinigkeiten, die ich kürzlich hinzugefügt hatte.

Vielleicht hat es auch hiermit direkt oder indirekt etwas zu tun, ich tappe im dunkeln
https://forum.fhem.de/index.php/topic,129619.msg1239216.html#msg1239216

[mr_petz]

Da scheint ja was im System im Argen zu sein und nicht in ftui?