Comparing python value in HTML

[tfinell]

Hello,

I would like to change the color of temperature value when heating status changes. I have problem to compare python value to True or False in HTML. How can I compare the value of python variable. If I put value 1 or 0 to variable instead of eka_ker_temp_ohjaus.arki_et.state it works. I have also checked that 'eka_ker_temp_ohjaus.arki_et.state' get values 1 and 0, but comparing doesn't work.

KNX.yaml:

eka_ker_temp_ohjaus:
  et:
    state:
      type: bool
      knx_dpt: 1
      knx_cache: 11/2/1

HTML:

{{ ov.float ('eka_ker_temp_ohjaus.arki_et.temperature1', 'Arkieteinen lämpötila', '71%', '35%', 'arki_et_popup', 'eka_ker_temp_ohjaus.arki_et.temperature', '°', 1, [MARKIEREN]'eka_ker_temp_ohjaus.arki_et.state'[/MARKIEREN]) }}

HTML:

/**
* Float: Displays a value as float
*
* @param unique id for this widget
* @param popup-info of the float value (optional)
* @param icon position from left side
* @param icon position from top side
* @param unique id for the popup
* @param a gad/item
* @param a unit, tries to get the format for that unit from the language-file (optional)
* @param hide on mobile displays (optional value 1)
* @param item_state changes color of float
*/
{% macro float (id, info, left, top, id_popup, gad, unit, hide, [MARKIEREN]item_state[/MARKIEREN]) %}
    <a id="{{ uid(page, id) }}-overview" {% if info %}title="{{ info }}"{% endif %}
     {% if hide %}class="hide-mobile"{% endif %}
     {% if id_popup %}data-rel="popup" href="#{{ uid(page, id_popup) }}" {% endif %}
    
     style="display: block; position: absolute; top: {{ top }}; left: {{ left }}; text-align: center;[MARKIEREN]{% if item_state == 1 %} color:red {% endif %};[/MARKIEREN]"
    
     <span id="{{ uid(page, id) }}" data-widget="basic.float" data-item="{{ gad }}" data-unit="{{ unit }}">-.- {{ unit }}</span>
    </a>
    <script type="text/javascript">
        $(document).on("pageshow",function() {
            $("#{{ uid(page, id) }}-overview").css("margin-top", Math.round($("#{{ uid(page, id) }}-overview").height() / 2) * -1);
            $("#{{ uid(page, id) }}-overview").css("margin-left", Math.round($("#{{ uid(page, id) }}-overview").width() / 2) * -1);
        });
    </script>
{% endmacro %}

[Tom Bombadil]

First shot, based on your item definition: Instead of eka_ker_temp_ohjaus.arki_et.state try eka_ker_temp_ohjaus.et.state?
/tom

[tfinell]

That was my mistake here. I have many rooms and I took code example from wrong place. Still comparing does not work. So I have also in knx.yaml:

knx.yaml:

eka_ker_temp_ohjaus:
  arki_et:
    state:
      type: bool
      knx_dpt: 1
      knx_cache: 11/1/1

[bmx]

Which version of SmartVISU are you using? 2.8 or already 2.9?

[Tom Bombadil]

Two recommendations then:

1. Try to comment out the knx lines, and add 'Value: True' to the item to force a known value (requires shNG restart). Check in Backend if it is really set to 'True'.
2. Instead of if item_state == 1, compare with True (not sure what kind of value is handed over here).

/tom

[smai]

There is a big misconception in your code:
SmartHomeNG item values (you call it python value) are not available as Twig arguments.
The communication between SmartHomeNG and smartVISU takes place in client browser using JavaScript Websocket, not at server side.

You have to add the name of the item to a data-item attribute in HTML tag.
smartVISU then triggers an 'update' event in JavaScript with the item's value as parameter. So you have to implement an event handler to handle the event and set the the css property.

You may have a look at other widget implementations in widgets/widget.js.

To answer the initial question: SHNG sends 0 and 1, but as false and true gets implicit casted to 0/1 in JavaScript they would work as well.