Neues widget: Nur Aktive "Lampen" anzeigen + ausschalten ermöglichen

[Sisamiwe]

Erledigt

Hallo,

meine Anfrage hat sich erledigt. Es geht doch!

[Tontechniker]

Funktioniert bei mir wunderbar - vielen Dank!
Hans

[Tontechniker]

Habe auf *.svg Icons umgestellt. Nun funktioniert das widget nicht mehr. Ist geplant, die Funktion in ein Plugin umzubauen? Habe mir jetzt erstmal mit einem speziellen Verzeichniss unter icons geholfen, in dem nur die alten png Icons stehen, die ich im Moment benötige.
Gruß Hans

[Mischl]

Das ganze widget funktioniert bei mir grundsätzlich nicht mehr mit 2.8... Kann jemand helfen?

[ErKi]

Hallo Mischl,

ich habe vor längerer Zeit für meine Verwendung das Widget umgeschrieben. Ich versuche die Änderungen zu beschreiben (hoffe ich erwähne alle)

Zuerst habe ich das Widget komplett im Eigenen Pages Verzeichnis untergebracht. Sodass es auch bei einer Kompleten neu Installation (z.B. beim Update) erhalten bleibt.

1. Im eigenen Pages Verzeichnis die Datei visu.js anlegen (sollte sie bereits bestehen den Code am ende der Datei anfügen)

/* =========== lighton ============== */
$(document).delegate('span[data-widget="lighton.test"]',{
    update:function(d,a){
         $("#"+this.id+"  img").attr("src",a==$(this).attr("data-val-on")?$(this).attr("data-pic-on"):$(this).attr("data-pic-off"));
        if (a == $(this).attr('data-val-on')) {
            $('#' + this.id).show();
        } else {
            $('#' + this.id).hide();
        }
    },
    click:function(d){
         $("#"+this.id+"  img").attr("src")==$(this).attr("data-pic-off")?io.write($(this).attr("data-item"),$(this).attr("data-val-on")):io.write($(this).attr("data-item"),$(this).attr("data-val-off"))
    }
});

2. Im eigenen Pages Verzeichnis die Datei widget_lighton.html anlegen

/**
* A switch, build of two pics
*
* @param unique id for this widget
* @param a item
* @param the text, printed when gad has value val (optional)
* @param the pic for the 'on' state (optional)
* @param the pic for the 'off' state (optional)
* @param value send for the 'on' state (optional, default 1)
* @param value send for the 'off' state (optional, default 0)
*/
{% macro test(id, item, txt, pic_on, pic_off, val_on, val_off) %}
    {% set uid = uid(page, id) %}

    <span id="{{ uid }}" data-widget="lighton.test" data-item="{{ item }}"
            data-val-on="{{ val_on|default('1') }}" data-val-off="{{ val_off|default('0') }}"
            data-pic-on="{{ pic_on|deficon('control_on_off.svg') }}" data-pic-off="{{ pic_off|deficon('control_on_off.svg') }}"
            class="switch">
                <a class="icon1">
                    <img class="icon icon1" src="{{ pic_on|deficon('control_on_off.svg') }}" />
                </a>
                {{ txt}} <br>
        </span>


<!-- 
    <span id="{{ uid(page, id) }}" data-widget="lighton.test" data-item="{{ gad }}"
        data-val-on="{{ val_on|default('1') }}" data-val-off="{{ val_off|default('0') }}"
         data-pic-on="{{ pic_on|default('control_on_off.png') }}"  data-pic-off="{{ pic_off|default('control_on_off.png') }}"
         class="switch"><a><img class="icon" src="{{  pic_off|default('control_on_off.png') }}" /></a>{{ txt}}  <br>   </span>
 -->

{% endmacro %}

Verwendung auf den Seiten:

Widget importieren:

{% import "widget_lighton.html" as lighton %}

und Verwendung dann z.B. so:

{{ lighton.test('checkEG.Eingang.Decke', 'EG.Eingang.Decke',  'Decke Eingang', 'light_corridor.svg', 'light_corridor.svg') }}

[Asterix3]

Hallo,

funktioniert perfekt.

Danke nochmal.

Gruß

Stefan

[yachti]

funktioniert perfekt.

habs heute mit einigen Leuchten zum Testen integriert , weil ich die Idee gut finde. Bei mir werden immer alle konfigurierten Leuchten als "ON" dargestellt. Klick ich drauf verschwinden das Icon. Nach Browser reload ist es dann wieder da.

Gruß
Michael

[ErKi]

Hallo Michael,

ist das Item richtig angegeben (in meinem Bsp 'EG.Eingang.Decke' und in sh.py das Item auch schreibbar) sowie die ID (bei mir 'checkEG.Eingang.Decke') bei jeder Leuchte verschieden?

Grüße Erik

[yachti]

ist das Item richtig angegeben

War mal wieder betriebsblind. Durchgängig nen Fehler bei den Items gemacht.
Sorry und Danke

Michael

[drehm]

Hallo Zusammen,

habe mir nach langem mal endlich Zeit genommen mein ursprüngliches widget mit der smartVISU 2.8 kompatibel zu machen und auf SVG umzustellen.
Dabei habe ich gleichzeitig noch ein paar Optimierungen umgesetzt und ein wenig aufgeräumt.
Der Name den ich letztlich gewählt habe ist: hiddenswitch (ein switch der unter bestimmten Umständen unsichtbar wird). Hoffe das passt euch.

Zu erst einmal der code:
In der basic.html habe ich folgendes hinzugefügt:

/**
* A switch with some descriptive text behind
* Only if the switch has a defined state the switch will be shown.
* Otherwise it will be hidden. In addition the switch can get used to trigger an operation on the switch itself
*
* @param unique id for this widget
* @param a gad/item
* @param the text, printed when gad has value val (optional)
* @param the pic to be shown when filter value is reached
* @param the val_filter in case the item has this value the pic will be shown
* @param value send for the 'on' state (optional, default 1)
* @param value send for the 'off' state (optional, default 0)
* @param the color 'icon1' or e. g. '#f00' for red (default 'icon0' of the design)
*/
{% macro hiddenswitch(id, item, txt, pic, val_filter, val_on, val_off, color) %}

        {% set uid = uid(page, id) %}
        {% import _self as basic %}
        <span id="{{ uid(page, id) }}"
                data-widget="basic.hiddenswitch"
                data-item="{{ item }}"
                data-val-filter="{{ val_filter|default('1') }}"
                data-val-on="{{ val_on|default('1') }}"
                data-val-off="{{ val_off|default('0') }}"
                data-pic="{{ pic|deficon('control_on_off.svg') }}"
                >
                <a>
                        {{ basic._icon(pic|deficon('control_on_off.svg'), color, uid) }}
                </a>
                        {{ txt}} <br>
        </span>

{% endmacro %}

In der widget.js habe ich folgendes ergänzt:

// ----- basic.hiddenswitch --------------------------------------------------------
    $.mobile.activePage.find('span[data-widget="basic.hiddenswitch"]').on({
        update:function(event,response){
                event.stopPropagation();
                $(this).val(response);
                $(this).trigger('draw');
        },

        'draw': function(event) {
                event.stopPropagation();
                if($(this).val() == $(this).attr('data-val-filter')) {
                        $(this).show();
                }
                else {
                        $(this).hide();
                }
        },


        click:function(d){
                io.write($(this).attr('data-item'), ($(this).val() == $(this).attr('data-val-off') ? $(this).attr('data-val-on') : $(this).attr('data-val-off')) );
        }
    });

// ----- basic.hiddenswitch --------------------------------------------------------
    $.mobile.activePage.find('span[data-widget="basic.hiddenswitch"] > a > img', 'hover').on(function (d, a) {
        if (event.type === 'mouseenter') {
            $(this).addClass("ui-focus");
        }
        else {
            $(this).removeClass("ui-focus");
        }
    });

Solltet ihr die Aenderungen in der widget.min.js von hand vornehmen wollen, hier der entsprechende Eintrag für die widget.min.js:

$.mobile.activePage.find('span[data-widget="basic.hiddenswitch"]').on({update:function(event,response){event.stopPropagation();$(this).val(response);$(this).trigger('draw');},'draw':function(event){event.stopPropagation();if($(this).val() == $(this).attr('data-val-filter')){$(this).show();}else{$(this).hide();}},click:function(d){io.write($(this).attr('data-item'),($(this).val()==$(this).attr('data-val-off')?$(this).attr('data-val-on'):$(this).attr('data-val-off')));}}),$.mobile.activePage.find('span[data-widget="basic.hiddenswitch"]>a>img','hover').on(function(d,a){if(event.type==='mouseenter'){$(this).addClass("ui-focus");}else{$(this).removeClass("ui-focus");}}),

In der html Seite meiner VISU habe ich dann folgende Einträge benutzt:

Für Lampen die angezeigt werden sollen wenn sie An sind und die beim Klicken ausgeschaltet werden sollen:

{{ basic.hiddenswitch('OG.Schlafzimmer.Licht.On',  'OG.Schlafzimmer.Licht',  'Schlafzimmer',      'light_light.svg', '1', '1', '0',  'icon1') }}
{{ basic.hiddenswitch('OG.Diele.Licht.On',               'OG.Diele.Licht',                'Diele OG',             'light_light.svg', '1', '1', '0',  'icon1') }}
{{ basic.hiddenswitch('OG.Diele.LichtWand.On',      'OG.Diele.LichtWand',       'Diele OG Wand',   'light_light.svg', '1', '1', '0',  'icon1') }}
...

Für Steckdosen die angezeigt werden sollen wenn sie aus sind und beim Klicken eingeschlatet werden sollen:

{{ basic.hiddenswitch('OG.Schlafzimmer.Steckdose.Off',  'OG.Schlafzimmer.Steckdose',  'Schlafzimmer',  'message_socket.svg', '0', '1', '0', 'icon0') }}
{{ basic.hiddenswitch('OG.Arbeitszimmer.Steckdose.Off', 'OG.Arbeitszimmer.Steckdose', 'Arbeitszimmer', 'message_socket.svg', '0', '1', '0', 'icon0') }}
{{ basic.hiddenswitch('OG.Leo.Steckdose.Off',                  'OG.Leo.Steckdose',                  'Leo',                  'message_socket.svg', '0', '1', '0', 'icon0') }}
...

Zur Benutzung:
1. Parameter ist die UID
2. gibt das item an, das überwacht/gesteuert werden sollen, also den identifier für den switch zum Beispiel
3. gibt den Text an, der hinter dem Icon angezeigt werden soll
4. gibt das icon an, welches angezeigt werden soll, fall der switch einen bestimmten wert hat.
5. gibt den Wert des switches an, bei dem das icon angezeigt werden soll.
6. gibt den Wert an, der für den status ein steht und der zum Einschalten gesendet werden soll.
7. gibt den Wert an, der für den status aus steht und der zum Ausschalten gesendet werden soll.
8. gibt die Farbe an, die das Icon haben soll, wenn der Wert aus 5 erreicht ist.

Was bedeutet das für den ersten hiddenswitch aus obigem Beispiel.
1. Als UID habe ich OG.Schlafzimmer.Licht.On verwendet.
2. Als item verwende ich von smarthome.py das Objekt OG.Schlafzimmer.Lich
3. hinter dem Icon soll der Text "Schlafzimmer" angezeigt werden.
4. als icon verwende ich das svg der Glühbirne
5. der switch soll angezeigt werden, wenn das Licht im Schlafzimmer im OG eingeschaltet ist
6. der Wert 1 bedeutet, dass das Licht eingeschaltet ist. Zum Einschalten soll ebenfalls 1 gesendet werden
7. der Wert 0 bedeutet, dass das Licht ausgeschaltet ist. Zum Ausschalten sollebenfalls 0 gesendet werden
8. Wenn das Licht eingeschaltet ist soll das icon angezeigt werden und die Farbe orange bekommen.

Viel spass beim Testen.
Falls ihr denkt, dass dieses feature in die nächste Release mit einfliessen sollte, habe ich absolut nichts dagegen, würde mich umgekehrt sehr darüber freuen und geehrt fühlen. Habe versucht die Aenderungen auf den development branch auf github zu pushen, aber ich habe hier leider keine Berechtigungen, vielleicht kann mir hier ja einer von euch weiter helfen.

Danke euch nochmal für eure erstklassige Arbeit an smartHome.py und smartVISU.

Dominik

[Mischl]

Ich muss sage, da finde ich die Variante von ErKi besser. Im eigenen Page-Verzeichnis eine widget-Datei anlegen und benutzen. Schreibt man die Sache in die widget.js oder min-Widget.js läuft man immer wieder Gefahr durch Änderungen oder Updates die Funktion zu verlieren.

[drehm]

Der Grund es in die widget.ja und widget.min.js zu schreiben ist der, dass ich angefragt wurde, ob dieses feature in die nächste release könne. Um es demjenigen der es in der master merged nicht zu umständlich zu machen wollte ich schon so viel wie möglich vorbereiten.

[Onkelandy]

drehm , kann es sein, dass da irgendwas defekt ist oder bei mir was fehlt?
Ich habe deinen Code unten bei den entsprechenden Files angefügt und es zerschießt mir die Visu. Die Variante von ErKi hat hingegen sofort funktioniert..

[smai]

Der Grund es in die widget.ja und widget.min.js zu schreiben ist der, dass ich angefragt wurde, ob dieses feature in die nächste release könne. Um es demjenigen der es in der master merged nicht zu umständlich zu machen wollte ich schon so viel wie möglich vorbereiten.

So wie es jetzt implementiert ist, stehen die Chancen gut für eine Integration (sofern es denn funktioniert, nicht wie bei Onkelandy).
Auch den Name hiddenswitch finde ich passender als activelist.

Die widget.min.js kann übrigens (wie alle anderen .min.js) gebildet werden, indem man make.php im Wurzelverzeichnis der SV aufruft.
Ausserdem wird es voraussichtlich im nächsten Release keine .min.js mehr geben, weil diese on-the-fly generiert und im Page Cache abgelegt werden.

[Onkelandy]

smai könntest du das mal testen und in den develop branch stecken? Vielleicht habe ich ja wirklich nur beim Copy Pasten was verbockt - was ich allerdings nicht glaube... Vielleicht liegt es am Quad Design