Basic.stateswitch - icons/Bilder aus html link anzeigen

[schuma]

Moin, ich habe noch eine kleine Herausvorderung zum Thema Icons anzeigen.

Ich würde gerne auf einem Basic.stateswitch das Icon aus einem html Link darstellen. Jetzt ergibt sich da für mich ein komisches Verhalten. Vielleicht kann mich da jemand unterstützen

Wenn ich ein Basic.stateswitch anlege der das Icon als html angibt funktioniert es wie gewollt:

{{ basic.stateswitch('', 'EG.Raum3.AlexaRadio.Station', '', 2, 'https://cdn-radiotime-logos.tunein.com/s8954g.png') }}

Wenn ich den selben Ausdruck in ein Item packe, um das Ganze etwas dynamischer werden zu lassen, und dann das Item als Icon angebe funktioniert das nicht:

Logo1:
    type: foo
    visu_acl: rw
    cache: 'yes'
    eval: str("https://cdn-radiotime-logos.tunein.com/") + str(sh.EG.Raum3.AlexaRadio.SenderNr(index=0)) + str("g.png")
    eval_trigger: EG.Raum3.AlexaRadio​

{{ basic.stateswitch('', 'EG.Raum3.AlexaRadio.Station', '', 1, 'EG.Raum3.AlexaRadio.SenderNr.Logo1') }}

Ich denke das hat mit der Formatierung als str zu tun bin mir aber unsicher ob ich da in die falsche Richtung laufe…

Hätte dazu jemand eine Idee wie ich die Kuh hier vom Eis bekomme?

Grüße, Marc

[wvhn]

Moin Marc,

mit dem Stateswitch allein geht das nicht. Wenn man ein item verwenden will, muss die Auswertung des items im JavaScript-Teil des Widgets programmiert sein. Man kann also nicht einfach einen Widget-Parameter, in dem ein String erwartet wird, durch ein item ersetzen.

ABER:
Ich empfehle die Lektüre der basic.print Hacks. Damit kannst Du die Bildquelle dynamisch ändern. Ohne Hilfsitem "Logo1" würde das so aussehen:

{{ basic.stateswitch('myStation', 'test.varnum', '', 2, 'https://cdn-radiotime-logos.tunein.com/s8954g.png') }}
{{ basic.print('', 'test.varstr','script','$("#myPage-myStation").siblings("a").find("img.icon").attr("src", "https://cdn-radiotime-logos.tunein.com/s"+VAR1+"g.png");')​ }}

D.h. das Script übernimmt die Aufgabe des Hilfsitems und baut die URL selbst zusammen, wenn das item die Sendernummer enthält. Du kannst natürlich auch das Hilfsitem Logo1 verwenden, das die komplette URL schon enthält. Dann lautet der letzte Ausdruck '.attr("src", VAR1)'.

Wichtig ist, dass Du im basic.print den Seitennamen mit in die ID nimmst, da dem Parameter "id" in allen Widgets immer der Seitenname mit Bindestrich vorangsetellt wird.

Testergebnis aus dem Widget-Assistenten:
station.gif
Gruß
Wolfram

[schuma]

Moin Wolfram,
ok gucke ich mir an.
Das mit dem Item war auch schon nur eine Notlösung, da ich mir dachte, dass das so einfacher ist.
Aber so passt das noch besser.

Ich arbeite mich da ein und berichte dann…

Vielen Dank schon mal!

Grüße, Marc

[schuma]

Hallo Wolfram, ich hab das jetzt mal so wie in Deinem Beispiel, stumpf bei mir eingebaut.
Ich verstehe auch so ungefähr wie es funktioniert.
Das ganze funktioniert auch im Prinzip. Wenn ich das Item mit dem Radiocode ändere ändert sich auch das Icon auf dem Stateswitch.
Nur habe ich mehrere Stateswitches in einer Controlgroup. Und alle Button ändern dann Ihr Icon.
Obwohl ja explizit die ID des ersten Stateswitch angesprochen wird.
Hier komme ich wieder nicht weiter....

<div data-role="controlgroup" data-type="horizontal">
                        
    {{ basic.stateswitch('AStation1', 'EG.Raum3.AlexaRadio.Station', '', 1, 'https://cdn-radiotime-logos.tunein.com/s8954g.png', '', '', '', '#popupsetup1') }}
    {{ basic.print('', 'EG.Raum3.AlexaRadio.Sender.Logo.Logo2','script','$("#EG_Raum3-AStation1").siblings("a").find("img.icon").attr("src", "https://cdn-radiotime-logos.tunein.com/"+VAR1+"g.png");') }}
    {{ basic.stateswitch('AStation2', 'EG.Raum3.AlexaRadio.Station', '', 2, 'https://cdn-radiotime-logos.tunein.com/s8954g.png', '', '', '', '#popupsetup2') }}
    {{ basic.stateswitch('AStation3', 'EG.Raum3.AlexaRadio.Station', '', 3, 'https://cdn-profiles.tunein.com/s56857/images/logod.png', '', '', '', '#popupsetup3') }}
    {{ basic.stateswitch('AStation4', 'EG.Raum3.AlexaRadio.Station', '', 4, 'https://cdn-radiotime-logos.tunein.com/s6642g.png', '', '', '', '#popupsetup4') }}
    {{ basic.stateswitch('AStation5', 'EG.Raum3.AlexaRadio.Station', '', 5, 'https://cdn-radiotime-logos.tunein.com/s25531g.png', '', '', '', '#popupsetup5') }}
</div>​

Kannst Du Dir das noch erklären?

Grüße, Marc

[wvhn]

Moin Marc,

ich habe das gerade nochmal getestet. Innerhalb der Controlgroup werden alle Stateswitches als Geschwister selektiert. Ein .next() hilft dann, das richtige Element unmittelbar nach dem span mit der widget ID zu selektieren:

$("#EG_Raum3-AStation1").next("a").find("img.icon")​

Gruß
Wolfram

[schuma]

Moin Wolfram, das hat wunderbar funktioniert.
Ich finde es echt toll, was Du hier leistest! Und wie Du immer wieder selbstlos hilfst.


Vielen Dank noch einmal!!!

Ich habe nun das Alexa-Radio Widget im Grundsatz fertig. Und werde es demnächst schon mal präsentieren.
Muss noch eine Kleinigkeit klären und das Ganze aufräumen und schließlich in ein wirkliches Widget bringen.

Edit: Hier die ersten Fotos: https://knx-user-forum.de/forum/supp...93#post1950493

Grüße, Marc

[wvhn]

Das Alexa-Radio habe ich gerade schon gesehen. Das sieht sehr cool aus!
Und vielen Dank für das nette Feedback.

Gruß Wolfram

[schuma]

Moin Wolfram wvhn.

Zwei fragen noch...
Wie muss das nun in einem Widget aussehen, damit ich die Page ID mit angeben kann?
Ich muss ja nun die PageID auslesen und als Variable bei EG_Raum3 einfügen. Aber nur wie?

{{ basic.stateswitch('AStation1', item_alexa~'.Station', '', 1, 'https://cdn-radiotime-logos.tunein.com/s255597g.png', '', '', '', '#popupsetup1') }}
{{ basic.print('', item_alexa~'.Sender.SenderNr.Setup1','script','$("#EG_Raum3-AStation1").next("a").find("img.icon").attr("src", "https://cdn-radiotime-logos.tunein.com/"+VAR1+"g.png");') }}​

Und, gibt es eine Möglichkeit innerhalb einer html (Widget) Seite eine Entscheidung aufgrund eines Item Zustandes zu treffen?
In etwa wie hier:

{% if EG.Raum3.AlexaRadio.Sender.SenderNr.Setup1.Art > 0 %}
    {{ basic.print('', 'test') }}
{% endif %}​

[wvhn]

Moin Marc,

für das Verarbeiten des Seitennamens kannst Du die Twig-Variable "page" direkt im Skript von basic.print verwenden

{{ basic.stateswitch('AStation1', item_alexa~'.Station', '', 1, 'https://cdn-radiotime-logos.tunein.com/s255597g.png', '', '', '', '#popupsetup1') }}
{{ basic.print('', item_alexa~'.Sender.SenderNr.Setup1','script','$("#'~page~'-AStation1").next("a").find("img.icon").attr("src", "https://cdn-radiotime-logos.tunein.com/"+VAR1+"g.png");') }}​

Alternativ setzt Du eine eigene Variable für die komplette ID:

{% set idStation1 = uid(page, "AStation1") %}
{{ basic.stateswitch('AStation1', item_alexa~'.Station', '', 1, 'https://cdn-radiotime-logos.tunein.com/s255597g.png', '', '', '', '#popupsetup1') }}
{{ basic.print('', item_alexa~'.Sender.SenderNr.Setup1','script','$(" #'~idStation1~'").next("a").find("img.icon").attr("src", "https://cdn-radiotime-logos.tunein.com/"+VAR1+"g.png");') }}
​​

Twig ist eine Template-Sprache, die serverseitig die html-Seiten mit den Widget-Macros zusammenbaut, bevor sie an den Client ausgeliefert werden. Diese Inhalte sind statisch und Twig kennt nur Variablennamen, aber keine item-Inhalte. Man kann in Twig daher keine dynamischen Bedingungen für item-Werte verarbeiten. Das muss in JavaScript erfolgen.

Um Inhalte wertabhängig einzublenden gibt es die Schwellwerte ("thresholds") z.B. in basic.print und basic.symbol und es gibt status.collapse und status.customstyle um ganze Abschnitte / Widgets wertabhängig anzuzeigen und zu stylen. Die Formel in basic.print kann man auch dafür nutzen.

Gruß
Wolfram

[schuma]

Moin Wolfram.
Ok, super. Dann ist das auch erledigt.
Es nähert sich dem vorläufigen Ende ;-)
Mit Page direkt in dem Script hatte ich schon ungefähr 20 Versionen, die ich mir so vorstellen konnte ausprobiert. Aber auf ‚~page~‘ bin ich nicht gekommen…

Das Problem mit dem Item auswerten werde ich dann auch wieder über die Logik dazu lösen.

Nur müsste ich die Items in der Logik ja auch noch dem Widget Pfad anpassen. Das macht mir noch etwas Sorgen. Aber das wird auch schon noch…

Grüße und Danke,
Marc

[wvhn]

Was willst Du denn genau machen? Vielleicht fällt mir ja noch etwas ein, wie man das lösen kann. Wenn Du eh ein Widget machst, kann das natürlich auch einen eignen JavaScript-Teil mitbringen.

Gruß
Wolfram

[schuma]

Hallo Wolfram, ich habe die gesamte Funktionalität in eine Logik gepackt. Das funktioniert eigentlich sehr gut.
Das Prinzip:
Ein Button in der Visu wird mit einem Wert getriggert und löst damit die Logik aus. Den Wert werte ich dann aus und führe dann dementsprechend die Funktion aus.

So funktioniert zum Beispiel das speichern der Sender Namen, Nummer mit Logo.

Wenn man auf speichern drückt, werden in der Logik die entsprechenden anderen Items mit befüllt und der Logopfad zusammengebaut.

Oder halt entsprende Funktionen ausgelöst. So wie Play aber nur wenn nicht gesperrt etc.

„Problem“ ist jetzt nur, das die Items in der Logik „fest (sh.EG.Raum3.AlexaRadio())„ sind. Und ich die ja eigentlich mit dem Widgetpfad abgleichen/angleichen müsste.
Sonst müsste man in jedem Raum wo das Widget zum Einsatz kommt, eine eigene Logik anlegen.

Ich müsste eigentlich so etwas machen können:
widgetpfad~‘Radio.Sender()‘

Da wäre ein JavaScript bestimmt besser. Wenn man keine Lösung zu der Logik findet.

Grüße, Marc

[schuma]

Ach so, noch eine Frage ;-)
wenn ich das .next einsetze, funktioniert das mit den Logos in der Controlgroup unter Windows/Chrom perfekt. Aber unter IOS auf dem Handy wird immer der letzte Button in die nächste Zeile umgebrochen. Wobei es auch egal ist wieviele Button im Einsatz sind.

Ich hab das jetzt erstmal so gelöst, dass ich die Button aus der Controlgroup genommen habe. Das funktioniert auf beiden Systemen.

Hast Du dazu eine Lösung?

Grüße, Marc

[wvhn]

Moin Marc,

wenn ich das richtig interpretiere, gibst Du die Werte in input-Widgets ein. D.h. sie werden sofort an die Hilfsitems in shNG übertragen, sobald die Maus das Feld verlässt. Mit basic.trigger "sendest" Du die Werte, d.h. Du löst damit eine Logik aus, die die bereits gesendeten Werte verarbeitet. Diesem basic.trigger kann man auch noch einen Wert mitgeben, der direkt an die Logik übergeben wird. Darin könntest Du z.B. den Seitennamen oder andere Infos aus Deiner item-Struktur übertragen, so dass die Logik dann den richtigen item-Pfad verwendet.

Gruß
Wolfram

[schuma]

Ja, genau so mache ich das.
Nur das das sendende Element ein Stateswitch ist, da ich hier mehr auf die Icons auf dem Button eingehen kann.
Das wäre super wenn das so funktioniert. Das wäre genau das was ich suche.
Aber wie setze ich das dann in der Logik um. Wenn in der Logik ein Wert kommt wie verbinde ich das dann mit den vorhandenen Items.
Und was müsste dann mit übermittelt werden?
Als Wert ein str mit dem Namen des Itempfad?

Grüße, Marc