smartVISU
07:20 v3.3.1

Beispiel - eigene oder angepasste Widgets erstellen


Rollosteuerung

Wohnen Süd ---
Wohnen Nord ---
Wohnen beide
Manchmal ist es durchaus sinnvoll "eigene" Widgets zu erstellen. Dies um vieleicht abseits der Standartwidgets auf sich selber zugeschnittene Layouts oder Bedienmöglichkeiten zu realisisieren. Das Thema ist jedoch sehr komplex, und wir möchten diese Anleitung nach wie vor möglichst einfach erklärt halten. Daher werde ich hier nur ein kleines Beispiel aufzeigen.
Ziel soll es sein, ein einfaches Widget zur Rollosteuerung zu erstellen. Dabei sollen unter anderem mehrere Rollos bedient werden können (Auf/Stop/Ab). Weiterhin soll der Positions-Status der Rollos angezeigt werden. Um dies zu realisieren, bedienen wir uns der Standardwidgets "basic.stateswitch" und "basic.print".
Als erstes erstellen wir in unserem Pages-Verzeichnis eine html-Seite die unseren Widget-Code beinhaltet. Vorzugsweise nennen wir diese Datei "widget_my_rollo.html"
Was brauchen wir als erstes?
Wir brauchen zum einen:
  • eine Bezeichnungsmöglickeit für die Rollos
  • einen Button für Auf
  • einen Button für Stop
  • einen Button für Ab
  • ein Feld für den Positions-Status
Als erstes legen wir in unsere "widget_my_rollo.html" die notwendigen Parameter fest. Weiterhin legen wir den Namen fest, mit dem das Widget aufgerufen werden soll ("rollobedienung")
Zuletzt müssen alle innerhalb eines Widgets verwendeten Widgets explizit importiert werden. Da sich ab smartVISU v3.2.c die Importmethode ändert, machen wir das gleich versionsabhängig.

widget_my_rollo.html - PartI

/**
* Mein Rollo-Widget
*
* @param       eindeutige ID für dieses Widget
* @param       der Name des Rollos
* @param       das gad/item für den Fahr-Befehl
* @param       das gad/item für den Stop-Befehl
* @param       das gad/item für den Positionsstatus
*
*/
{% macro rollobedienung(id, txt, gad_move, gad_stop, gad_position) %}
{% import config_version_full >= "3.2.c" ? "@widgets/basic.html" : "basic.html" as basic %} {% set uid = uid(page, id) %}


Als nächstes bestimmen wir via html noch die Anordnung der Texte, Buttons und Statusmeldungen und binden die entsprechenden Standartwidgets mit ein.
Dazu erweitern wir unser Widget entsprechend und schließen das ganze mit endmacro.

widget_my_rollo.html - PartII

/** Design */
<div id="{{ uid }}" class="rollobedienung">
    <table style="width:100%; text-align: left;">
        <tr>
            <th width="35%">{% if txt %} {{ txt }} {% endif %}</th>
            <td width="15%">
                {% if gad_move %}
                    {{ basic.stateswitch(id~'up', gad_move, 'mini', 0, 'arrow-u') }}
                {% endif %}
            </td>
            <td width="15%">
                {% if gad_stop %}
                    {{ basic.stateswitch(id~'stop', gad_stop, 'mini', 1, icon0~'audio_stop.svg') }}
                {% endif %}
            </td>
            <td width="15%">
                {% if gad_move %}
                    {{ basic.stateswitch(id~'down', gad_move, 'mini', 1, 'arrow-d') }}
                {% endif %}
            </td>
            <td width="20%">
                {% if gad_position %}
                   {{ basic.print(id~'position', gad_position, '%') }}
                {% endif %}                   
            </td>
        </tr>
    </table>
</div>
{% endmacro %}


Letztendlich sieht der komplette Widget-Code wie folgt aus:

widget_my_rollo.html - komplett (klick mich)

/**
* Mein Rollo-Widget
*
* @param {id=} eindeutige ID für dieses Widget (optional)
* @param {text=} der Name des Rollos (optional)
* @param {item((bool,num)} das gad/item für den Fahr-Befehl
* @param {item((bool,num)} das gad/item für den Stop-Befehl
* @param {item((num)} das gad/item für die Position
*
*/
{% macro rollobedienung(id, txt, gad_move, gad_stop, gad_position) %}
{% import config_version_full >= "3.2.c" ? "@widgets/basic.html" : "basic.html" as basic %}
{% set uid = uid(page, id) %}

/** Design */
<div id="{{ uid }}" class="rollobedienung">
    <table style="width:100%; text-align: left;">
        <tr>
            <th width="35%">{% if txt %} {{ txt }} {% endif %}</th>
            <td width="15%">
                {% if gad_move %}
                    {{ basic.stateswitch(id~'up', gad_move, 'mini', 0, 'arrow-u') }}
                {% endif %}
            </td>
            <td width="15%">
                {% if gad_stop %}
                    {{ basic.stateswitch(id~'stop', gad_stop, 'mini', 1, icon0~'audio_stop.svg') }}
                {% endif %}
            </td>
            <td width="15%">
                {% if gad_move %}
                    {{ basic.stateswitch(id~'down', gad_move, 'mini', 1, 'arrow-d') }}
                {% endif %}
            </td>
            <td width="20%">
                {% if gad_position %}
                   {{ basic.print(id~'position', gad_position, '%') }}
                {% endif %}                   
            </td>
        </tr>
    </table>
</div>
{% endmacro %}


Kommen wir zur Einbindung unseres Widgets in unsere html-Seite.
Wenn wir das Widget in einen der dafür vorgesehenen Ordner ./dropins/widgets oder ./pages/<eigene Seiten >/widgets ablegen, importiert smartVISU dieses automatisch. Widgets, die mit smarthomeNG-Plugins ausgeliefert werden, werden bei automatischer Seitenerstellung in den von smarthomeNG verwalteten Ordner ./dropis/shwidgets kopiert und von dort ebenfalls automatisch eingelesen.
Nur wenn man andere Ordner verwendet, z.B. den Ordner der eigenen Seiten, muss man sich selbst um den Import kümmern:
{% import "widget_my_rollo.html" as widget_my_rollo %}

In der Seite wird dann der Aufruf des Widgets mit unserem erstellten Macro "rollobedienung" inkl. der verwendeten Items platziert:
{{ widget_my_rollo.rollobedienung('Rollo1', 'Wohnen Süd', 'Rollo.Wohnen.Sued.fahren', 'Rollo.Wohnen.Sued.stop', 'Rollo.Wohnen.Sued.position') }}

Zusammenfassend sieht das obige Beispiel somit wie folgt aus: