KWL Widget

[Tom Bombadil]

Code:
kwl_pic_dir~“/kwl_bypass.png"

Guter Einwand, siehe hier. Die Twig-Variablen sind im Zusammenhang mit Hochkommas manchmal tricky ...
/tom

[Cannon]

Das ist immer ziemlich tricky mit den geschweiften Klammern. Anstelle Code:

"{{kwl_pic_dir}}/kwl_bypass.png"
musst Du wahrscheinlich Code:

kwl_pic_dir~“/kwl_bypass.png"
schreiben.

Geht leider auch nicht. Also ich sehe zumindest jetzt klar, wo das Problem liegt. Damit bin ich ja schon einen Schritt weiter. Der TWIG-Code wird nicht umgesetzt. Das hier:

 <img id="{{ id }}kwl_base" src="" alt="Ventilation Unit"/>
{{ basic.print('', bypass_open, 'script', '$("#kwl_base").attr("src", "{{ kwl_pic_dir }}/kwl_bypass.png")') }}

Setzt im Browser auch die src ein, aber wandelt eben das Ganze nicht um. Könnte das an basic.print liegen?

<img id="kwl_base" src="{{ kwl_pic_dir }}/kwl_bypass.png" alt="Ventilation Unit">

Verwende ich "kwl_pic_dir~kwl_bypass.png", bleibt src leer.

[Bonze]

ne du hast doch noch nen Fehller im jQuery Selector , probier mal anstatt

$("#kwl_base")

->

$("kwl_base")

opder du musst das mit der id einbauen

[wvhn]

Bonze Das Hashtag im Selektor ist wichtig. Sonst erkennt er das nicht als ID.

Cannon wenn Du {{id}} aus dem Selektor herausnimmst, dann muss es auch aus der image ID raus. sonst passen die beiden nicht zusammen.
"kwl_pic_dir~kwl_bypass.png" ist nicht richtig. Das erste Anführungszeichen muss hinter die Tilde. sonst erkennt Twig die Variable nicht.

[Cannon]

wenn Du {{id}} aus dem Selektor herausnimmst, dann muss es auch aus der image ID raus. sonst passen die beiden nicht zusammen.

Das ist doch nur zum Testen. So stelle ich sicher, dass ich nicht an 2 Stellen ein Problem habe. Der Teil mit der id funktioniert ja so $("#kwl_base"), solange die id leer ist. Sobald ich das irgendwann mal zum laufen bekomme, muss das natürlich ersetzt werden.

"kwl_pic_dir~kwl_bypass.png" ist nicht richtig. Das erste Anführungszeichen muss hinter die Tilde. sonst erkennt Twig die Variable nicht.

Das kwl_pic_dir~"kwl_bypass" geht genauso wenig. Du glaubst ja nicht, wie viele Versionen ich hier schon probiert habe. Ich habe mir auch den basic.print-Code angeschaut usw., sehe da aber nicht durch. Ich vermute, dass die Variablen im Code nicht umgewandelt werden. Evtl. nen Bug?

[wvhn]

Die Inline-Doku verwendet die Widgets 1:1 im Livebetrieb und zeigt damit, dass die JavaScript-Variablen (VAR) ausgewertet werden. Da ist kein Bug in basic.print.
Wenn Du ein eigenes Widget machst, in dem Du in Twig Variablen definierst, dann musst Du mit der Schreibweise aufpassen. Das scheint aktuell das Hauptproblem zu sein. Der Ansatz, sich im Html-Sourcecode anzusehen, was Twig aus den jeweiligen Formulierungen macht, ist gut. Du kannst das auch direkt im Widget anzeigen lassen, indem Du den Ausdruck kopierst und in doppelt geschweifte Klammern setzt. Das entspricht einer Textausgabe des Variableninhalts im html.

Bei kwl_pic_dir~"kwl_bypass" fehlt jetzt der slash hinter dem Ordnernamen.

[Bonze]

also ich habs jetzt mal getestet...

<div data-role="collapsible" data-collapsed="false">
<h3>RGB STRIPE</h3>
<img id="kwl_base" src="" alt="Ventilation Unit"/>
{{ basic.print('', 'test.value.ist', 'script', '$("#kwl_base").attr("src", (VAR1 < 30 ) ? "bla" :  "dfdf") ')  }}
</div>

solange man den text fix eingibt als string sollte es auch funktionieren..

es könnte sein, das twig da die variable nicht richtig einsetzt..
wie sieht denn der inhalt der genutzten Variablen und das format aus ?

[Tom Bombadil]

Ich vermute, dass die Variablen im Code nicht umgewandelt werden. Evtl. nen Bug?

Nur so eine fixe Idee - weiß aber nicht, ob das die Lösung ist (ich gehe mal davon aus, dass die Schreibweise der Variablen mittlerweile stimmt):

Ich kann mich dunkel erinnern, dass ich damals bei meinem Helios-Widget auch teilweise Probleme hatte, dass im HTML nicht das Gewünschte ankam; insbesondere im Zusammenhang mit 'durchzureichenden' Variablen bzw. deren Inhalten.

In manchen Konstellationen war die Lösung, das Escaping gezielt zu steuern (siehe z.B. hier und hier). Warum, wieso, weshalb bekomme ich aber ohne tieferes Einlesen und Reindenken in die Materie nach all den Jahren auch nicht mehr zusammen. Vielleicht hilft's ja trotzdem ...

/tom

[Cannon]

wie sieht denn der inhalt der genutzten Variablen und das format aus ?

Danke fürs mittesten und rätseln. Hier wird die Variable gesetzt:

{% set kwl_pic_dir  = 'pages/moselstrasse/pics/kwl' %}

solange man den text fix eingibt als string sollte es auch funktionieren..

Macht es auch. Das Problem ist die Umsetzung der Variable.

Nur so eine fixe Idee - weiß aber nicht, ob das die Lösung ist (ich gehe mal davon aus, dass die Schreibweise der Variablen mittlerweile stimmt):

Danke für den Ansatz. Leider auch hier kein Erfolg - egal welche Konstellation true, false ...

Bei kwl_pic_dir~"kwl_bypass" fehlt jetzt der slash hinter dem Ordnernamen.

Das war nur schnell dahin getippt. Ist aber auch nicht so relevant, weil src eben nicht geändert wird. Wenn ich mit der Tilde arbeite bleibt src leer.

Du kannst das auch direkt im Widget anzeigen lassen, indem Du den Ausdruck kopierst und in doppelt geschweifte Klammern setzt. Das entspricht einer Textausgabe des Variableninhalts im html.

Wohin kopieren? Entschuldige bitte, das habe ich nicht verstanden. :-(

[Cannon]

Und vielleicht noch mal ein Test:

Funktioniert: src = "0"

{% set kwl_pic_dir  = 'pages/moselstrasse/pics/kwl' %}
<img id="kwl_base" src="" alt="Ventilation Unit"/>
{{ basic.print('', bypass_open, 'script', '$("#kwl_base").attr("src", VAR)') }}

Funktioniert nicht:

{% set kwl_pic_dir  = 'pages/moselstrasse/pics/kwl' %}
<img id="kwl_base" src="" alt="Ventilation Unit"/>
{{ basic.print('', bypass_open, 'script', '$("#kwl_base").attr("src", kwl_pic_dir)') }}

Dabei ist es unerheblich ob kwl_pic_dir entsprechend angegeben wird:

kwl_pic_dir
kwl_pic_dir~
"{{ kwl_pic_dir }}"

Ich glaube immer noch, dass die Umwandlung von "externen" Variablen nicht funktioniert.

Anmerkung: bypass_open ist kein Item, sondern ein Parameter, wo ein Item übergeben wurde. Deshalb keien Hochkommata.

[Tom Bombadil]

Ich mach jetzt mal auf 'Altklug' - hättest Du die oben vorgeschlagene 'uncoole' Variante mit der for-Schleife genommen, wärst Du schon seit 2 Tagen fertig. Sehen tut das nachher sowieso kein Anwender.

stufe.png

*duck_und_wech* ...

/tom

[Cannon]

Ich mach jetzt mal auf 'Altklug' - hättest Du die oben vorgeschlagene 'uncoole' Variante mit der for-Schleife genommen, wärst Du schon seit 2 Tagen fertig. Sehen tut das nachher sowieso kein Anwender.

Nein das Problem ist ein anderes. Es ist kein Problem ein Icon auszutauschen. Das habe ich ja auch gemacht. Das geht auch in einer Zeile. Z.B. Hier für den Filterstatus:

<div class="kwl_filter_icon">{{ basic.symbol(id~'filter_icon', [filter_lifetime|default(365), filter_remaining_lifetime], '', [kwl_pic_dir~'/filter1.svg', kwl_pic_dir~'/filter2.svg', kwl_pic_dir~'/filter3.svg', kwl_pic_dir~'/filter4.svg'], [33, 66, 99], '>(VAR2/VAR1*100)', '', '', '', 'midi') }}</div>

Aber das Problem ist, dass ich das gesamte Hintergrundbild tauschen muss:

Eine Alternative wäre noch wenn man mit basic-symbol eine fixe Größe ausgeben könnte, dann würde das auch mit basic-symbol gehen. Das scheint aber nicht machbar zu sein.

[Bonze]

bei funktioniert das

 <img id="kwl_base" src="" alt="Ventilation Unit"/>
{{ basic.print('', 'test.value.ist', 'script', '$("#kwl_base").attr("src", VAR) ')  }}

erzeugt folgendes

<img id="kwl_base" src="29" alt="Ventilation Unit">

und 29 entspricht genau dem Wert des items test.value.ist

da sind wir wieder an dem punkt wie in dem parallelthread ..
alls item mit inhalt str funktioniert, als normaler string nicht ..

das liegt meiner Meinung daran, das per definition in einem data-item ein item stehen muss..

[wvhn]

Da kann ich bloß nochmal auf die Inline-Doku verweisen. Da sieht man ja, dass es funktioniert.

Der Wert des items wird anstelle von VAR in das Script eingesetzt und dann wird das Script per eval ausgeführt.

[Cannon]

Der Wert des items wird anstelle von VAR in das Script eingesetzt und dann wird das Script per eval ausgeführt.

Ich habe die offen, sehe aber nicht genau was du meinst. Kannst du genau benennen, wo das so gemacht wird? DANKE!