Custom Button mit Momentanverbrauchanzeige

[kingolli]

Hallo!

Ich habe mir relativ früh während der Entwicklung meiner Visu einen Custom-Button erzeugt, der auf der ganzen Zeile klickbar ist. Jetzt wollte ich den Momentanverbrauch mit anzeigen, allerdings wird jetzt das Icon nicht mehr als aktiv (orange) gekennzeichnet.

Hier der Code:

* DM 28.12.2013
* A switch with to states displayed as a button for the whole row
*
* @param unique id for this widget
* @param a gad/item
* @param the pic for the 'on' state (optional)
* @param the pic for the 'off' state (optional)
* @param the text, printed on the button 
* @param the power gad (optional)
{% macro dual2row(id, gad, pic_on, pic_off, txt, gad_power) %}
    {% import "widgets_custom.html" as custom %}
    {% import "basic.html" as basic %}
    {% set uid = uid(page, id) %}

    <table style="width:100%; text-align: left;">
    <tr>
        <td width="100%" style="">
            <a id="{{ uid(page, id) }}" style="text-align: left;width: 100%;" data-widget="basic.dual" data-item="{{ gad }}"
                data-val-on="{{ val_on|default('1') }}" data-val-off="{{ val_off|default('0') }}"
                data-pic-on="{{ pic_on|default(icon1~'control_on_off.png') }}" data-pic-off="{{ pic_off|default(icon0~'control_on_off.png') }}"
                class="ui-{{ type|default('midi') }}" data-role="button" data-inline="true" data-iconpos="center">

                <img class="icon" style="padding:0 10px 0 10px" src="{{ pic_off|default(icon0~'control_on_off.png') }}"> {{ txt }}
                {% if gad_power %}
                    <div class="ui-li-aside">
                        {{ basic.float(uid(page, id)~'_power', gad_power, '0fw') }} 
                    </div>
                {% endif %}
            </a>
        </td>
    </table>
{% endmacro %}

Aussehen tut das Ganze so:
knx3.jpg

Wie man sieht ist die Waschmaschine an, d.h. eigentlich muss auch das Icon Orange sein (wie beim Deckenlicht), das funktioniert aber nicht mehr, sobald ich den Momentanverbrauch mit anzeigen lasse.

Hat jemand eine Idee dazu? Wie kann ich sowas debuggen, die Console im Browser zeigt keine Fehler.

Danke und Grüße
David

[Apollo]

Versuch mal die .svgs zu verwenden, da kannst du mit einer css-Klasse die Farbe einstellen.

Gruss