smartVISU
11:46, 12.10, v2.7

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 können wir uns der standartwidgets "basic.button" und "basic.float".
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" nun die notwendigen Parameter fest. Weiterhin legen wir hier fest, mit welchen "Komando" das Widget aufgerufen werden soll (rollobedienung)

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 "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.button(id~'up', gad_move, '', 'arrow-u', '0', 'mini') }}
                {% endif %}
            </td>
            <td width="15%">
                {% if gad_stop %}
                    {{ basic.button(id~'stop', gad_stop, '', icon0~'audio_stop.png', '1', 'mini') }}
                {% endif %}
            </td>
            <td width="15%">
                {% if gad_move %}
                    {{ basic.button(id~'down', gad_move, '', 'arrow-d', '1', 'mini') }}
                {% endif %}
            </td>
            <td width="20%">
                {% if gad_position %}
                   {{ basic.float(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       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 "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.button(id~'up', gad_move, '', 'arrow-u', '0', 'mini') }}
                {% endif %}
            </td>
            <td width="15%">
                {% if gad_stop %}
                    {{ basic.button(id~'stop', gad_stop, '', icon0~'audio_stop.png', '1', 'mini') }}
                {% endif %}
            </td>
            <td width="15%">
                {% if gad_move %}
                    {{ basic.button(id~'down', gad_move, '', 'arrow-d', '1', 'mini') }}
                {% endif %}
            </td>
            <td width="20%">
                {% if gad_position %}
                   {{ basic.float(id~'position', gad_position, '%') }}
                {% endif %}                   
            </td>
        </tr>
    </table>
</div>
{% endmacro %}


Kommen wir zur Einbindung unseres Widgets in unsere html-Seite.
Hier müssen wir in unserer html-Seite den Code in dem sich unser Widget befindet "bekanntgeben" und weiterhin sagen wie wir diesen aufrufen.
Dies geschieht einmal z.B. mit:
{% import "widget_my_rollo.html" as irgentetwas %}

und weiterhin mit unserem erstellten Macroaufruf "rollobedienung" inkl. der Items die wir verwenden wollen.
{{ irgentetwas.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: