KWL Widget

[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.

[Tom Bombadil]

Code:
kwl_pic_dir~“/kwl_bypass.png"

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

[wvhn]

Das ist immer ziemlich tricky mit den geschweiften Klammern. Anstelle

"{{kwl_pic_dir}}/kwl_bypass.png"

musst Du wahrscheinlich

kwl_pic_dir~“/kwl_bypass.png"

schreiben.

[Cannon]

Ich habe das Problem jetzt noch weiter eingegrenzt:

{{ basic.print('', bypass_open, 'script', '$("#kwl_base").attr("src", "pages/moselstrasse/pics/kwl/kwl_bypass.png")') }}

So geht es. Die Variablen werden einfach an keiner Stelle umgesetzt und ohne die ist das kaum vernünftig lösbar. Man sieht das auch im Inspektor, dass die Variablen mit dem {{}} nicht umgewandelt werden.

P.S.: Ich habs stark vereinfacht, um andere Fehler auszuschließen.

[Cannon]

Code:

(VAR == 1)
sollte passen. Ansonsten stimmt die Syntax.

Ich hatte das auch vermutet und habe dazu mal bei Javascript gelesen. Aber da war das if nur mit einem Gleichheitszeichen, deshalb hatte ich das gelassen. Am Ende müsste dann zwar nur der Vergleich nicht stimmen, aber immerhin was angezeigt werden. Funktioniert aber nicht.

Dies dient der 'Schachtelung' von Ausdrücken in Ausdrücken --> alert('alert("text")').

Das heißt ich kann das schachteln, wierum ich will? Beispiele:

<img id='{{id}}kwl_base' src="" alt="Ventilation Unit"/>

<img id="{{id}}kwl_base" src="" alt="Ventilation Unit"/>

alert('alert("text")')

alert("alert('text')")

Wäre alles richtig?

Kommt mir irgendwie bekannt vor. Viel Erfolg!

Ja ist auch von dir übernommen. Das neue Widget läuft auch, bis auf den Umstand hier mit diesem dynamischen Bild.

[Tom Bombadil]

Verwirrung stiftet der Unterschied zwischen Anführungszeichen und Hochkommas

Dies dient der 'Schachtelung' von Ausdrücken in Ausdrücken --> alert('alert("text")').

HTML-Code:
{{ basic.print(id~'kwl_outdoor_temp', outdoor_temp, '%d °C', 'Math.round(VAR)') }}

Kommt mir irgendwie bekannt vor. Viel Erfolg!

/tom

[wvhn]

Das Hashtag ist wichtig, um den Selector als ID zu kennzeichnen.

(VAR1 = True)

ist falsch, weil ein = fehlt und "True" SV-intern als "1" geführt wird.

(VAR == 1)

sollte passen. Ansonsten stimmt die Syntax.

[Cannon]

Ich hab auch nicht die Zeit, alles bis zum letzten Detail selbst zu entwerfen und durchzutesten. Deshalb kann ich nur Hilfe zur Selbsthilfe leisten.

Das verstehe ich natürlich. Danke für die Hilfe!

Es wird dann ein Leerer Bild rahmen im Html teil eingefügt und die src änderst du zur Laufzeit..

Das Prinzip ist mir jetzt klar, Danke dafür!

Ich habe das jetzt mal probiert und ein paar Korrekturen vorgenommen, dennoch in etlichen Varianten getestet. Es werden aber immer nur "---" angezeigt und der alternative Text anstatt des Bildes. Das heißt der Austausch findet nicht statt.

Die Konditionsabfrage könnte man ja auch erst mal kürzen. So sollte es ja sein. So kenne ich das aus anderen Sprachen.

Kondition ? bei wahr : bei falsch

{% set kwl_base_dir = 'pages/moselstrasse/widgets' %}
<img id='{{id}}kwl_base' src="" alt="Ventilation Unit"/>
{{ basic.print('', bypass_open, 'script', '$("{{id}}kwl_base").attr("src", (VAR1 = True) ? "{{kwl_pic_dir}}/kwl_bypass.png" : "{{kwl_pic_dir}}/kwl_normal.png" )') }}

@wvhn: Du hast da immer noch eine Route # vor. Ist das richtig so?

bypass_open ist übrigens nicht das Item, sondern nur ein Parameter, der das Item enthält. Die Hochkommas müssten also wegfallen. So wie hier:

{{ basic.print(id~'kwl_outdoor_temp', outdoor_temp, '%d °C', 'Math.round(VAR)') }}

Verwirrung stiftet der Unterschied zwischen Anführungszeichen und Hochkommas und der Einsatz der Variablen. Aber selbst wenn ich es direkt eingebe (ohne Variablen bei den Bildern), geht es nicht.

Müsste es nicht auch VAR heißen, anstatt VAR1, wenn nur ein Parameter angegeben wurde?

[Bonze]

Es wird dann ein Leerer Bild rahmen im Html teil eingefügt und die src änderst du zur Laufzeit..

<img id='{{id}}-kwl-base' src="" alt="Ventilation Unit Bild"/>
{{ basic.print('', 'bypass_open', 'script', '$("{{id}}-kwl-base").attr("src", (VAR1 = True) ? "urlbild1" : (VAR1 = False) ? "Urlbidl2" )) ') }}

so in der art, is aber ungetestet..

[wvhn]

Ich hab auch nicht die Zeit, alles bis zum letzten Detail selbst zu entwerfen und durchzutesten. Deshalb kann ich nur Hilfe zur Selbsthilfe leisten.
"bypass_open" ist Dein item. Also muss das auch das item in basic.print sein.

<img id='{{id}}-kwl-base' src=""/>
{{ basic.print('', 'bypass_open', 'script', '$("#{{id}}-kwl-base").attr("src", " Ausdruck ") ') }}

Statt des Worts Ausdruck musst Du jetzt noch den konditionalen Ausdruck einsetzen, der wenn VAR = true (1) ist, das eine Bild einsetzt und sonst das andere. VAR ist der Wert des items.

Aus der Doku zeigt das Beispiel ganz gut, wie das geht:

{{ basic.print('', 'bath.trigger', 'script', '$("#bathval").css("color", (VAR1 < 400 && VAR1 > 300) ? "#33FF33" : (VAR1 < 200) ? "#FF6600" : "#FFFFFF")') }}

[Cannon]

Entschuldige bitt, aber irgendwie kriege ich das nicht hin. Ich werde aus der Doku nicht schlau. So geht das aber nicht:

 <img id='{{id}}-kwl-base' src=""/>
{{ basic.print('', kwl_pic_dir~'/kwl_normal.png', 'script', $('{{id}}-kwl-base').attr("src", VAR)') }}

[wvhn]

Bonze hat recht. Das geht so nicht. Twig rendert den statischen Teil der Visu-Seiten. Da kannst Du keine Abhängigkeiten von dynamischen Daten realisieren.

Der Hinweis auf basic.print ist ebenfalls richtig. Dort kannst Du ein Script definieren, das der ID {{id}}-kwl-base dynamisch das entsprechende icon zuweist. Schau Dir in der Doku die Beispiele im Abschnitt “Advanced Scripting“ an.

Der Selector ist

$('#{{id}}-kwl-base')

und statt 'css' musst Du 'attr' verwenden.

Gruß
Wolfram

[Cannon]

glaub das geht so nicht.. du musst vl das basic.print mit dem javascript zusatz nutzen..
twig wird nur beim erstellen der seite genutzt, alles was danach passiert bekommt es nicht mit..

Ich habe das auch schon befürchtet... Im Prinzip geht es darum den Hintergrund zu ändern, dass ist nämlich das Bild mit dem Haus usw. Das funktioniert leider nicht mit basic.print.

{% if bypass_open %}
    <img id='{{id}}-kwl-base' src="{{kwl_pic_dir}}/kwl_bypass.png" alt="Ventilation Unit">
{% else %}
    <img id='{{id}}-kwl-base' src="{{kwl_pic_dir}}/kwl_normal.png" alt="Ventilation Unit">
{% endif %}

Noch eine andere Idee?

Sonst für den späteren Teil des Widgets brauche ich allerdings basic.print, da kann ich mir anschauen, ob ich das da verwenden kann.

[Bonze]

Ich glaub das geht so nicht.. du musst vl das basic.print mit dem javascript zusatz nutzen..
twig wird nur beim erstellen der seite genutzt, alles was danach passiert bekommt es nicht mit..

Edit: https://docu.smartvisu.de/2.9/index....et_basic.print hier unter advanced..

[Cannon]

Jetzt brauche ich noch mal Hilfe, um die letzten Details umzusetzen. Ich kriege einen if-Vergleich nicht so recht hin:

{% if bypass_open %}

bypass_open wird über die Parameter des Makros im Widget übergeben. Die Übergabe erfolgt dann entsprechend als Item.In diesem Fall ist das Item true/false. Aber ich bin nicht sicher, ob der Vergleich so richtig ist. Denn es funktioniert nicht richtig. Alternativen mit "== true" funktionieren auch nicht.