Ankündigung

**masterjost** · 31.12.2019, 09:27

Sehr gut mal jemand der mitmacht. In ähnlicher Form hatte ich mir das auch gebaut. wobei bei mir der Stop-Button gleichzeitig zum Sperbutton wird.
Unbenannt.jpg

**henfri** · 31.12.2019, 09:39

Wäre es vielleicht sinnvoll in GitHub von der smartvisu einen Ordner mit User widgets anzulegen?
Das das könnte Doppelarbeit verhindern.

**yachti** · 31.12.2019, 09:41

Ich habe es am Code noch etwas verbessert. Vielleicht schaut da mal ein Profi rüber und macht es schick.

Angehängte Dateien

smallshut.zip (4,7 KB, 14x aufgerufen)

**yachti** · 31.12.2019, 09:48

Ich weiss auch nicht von wem der Ursprung des smallshut widget war. Ist noch mit dem obsoleten basic.button geschrieben gewesen und war einige Jahre so bei mir im Einsatz. Habe es jetzt auf basic.stateswitch angepasst, Doku ergänzt und im device.html eingefügt.

**masterjost** · 31.12.2019, 19:50

Der Ursprung war in irgendeiner Beispielvisu mit dabei auf ner Unterseite. Ich hab das Ganze auch mit Stateswitch, da es aber bis auf die Anpassung des Stopbuttons, der bei mir direkt eine Sperre auslöst das Gleiche und ohne Dokumentation ist, macht es glaube ich wenig Sinn das Auch noch zu posten.

Hab das nur gemacht, weil meine physischen MDT Taster nunmal 4 Buttons (hoch, runter, Sonnenschutzposition anfahren, stop/sperre) haben und ich das in der VISU so abbilden wollte.

Wenn Interesse besteht hab ich sowas kleines auch noch vom Raumtemperaturregler (MDT Glasttaster 2) mit Temperaturverschiebung und einem Button der die 4 Komfortmodi durchschaltet und dabei sein aussehen entsprechend anpasst, möglichst platzsparend eben damit es auch auf dem Smartphone in eine Zeile passt und bedienbar bleibt.

Läuft allerdings alles mit FHEM als Backend.

Grüße

**wvhn** · 02.01.2020, 13:48

masterjost, Könntest Du mir das einmal zugänglich machen? Ich arbeite gerade an der Modernisierung der Beispielseiten für V2.9 und hänge noch bei den Shutter-widgets bzw. popups im overview-design.

Wenn jemand noch ein fertiges popup für das Color-widget mit integriertem Ein-/Aus-Schalter hat, würde mir das auch weiterhelfen und mein Schlafdefizit reduzieren :-)

Gruß
Wolfram

**masterjost** · 02.01.2020, 14:39

Bitteschön ;-)

Ich habe 4 Macros für meine Rollos. Je zwei für die Raumansicht inkl. Slider zum Verfahren und je zwei für die kompakte Tabellenform. Ich unterscheide in bodentiefe Fenster und "normale" Fenster, weil ich meine Sonnenschutzposition über die Laufzeiten des Motors anfahre und bei den Fensterarten einen identischen unteren Spalt haben will. Diese sind bei den unterschiedlichen Rollolängen zeitlich verschieden. Dafür ist auch ein Button im KNX angelegt.

Macro:

Code:

/**
* Standard shutter
*
* @param {id=} unique id for this widget (optional)
* @param {text=} name of the shutter
* @param {item=} an item for the up and down movement (optional, value_top/value_bottom will be sent to item_pos if omitted)
* @param {item=} an item for stopping the movement (optional)
* @param {item} an item for the absolute position of the blinds
* @param {item=} an item for increase and decrease of the blade (optional, for future use)
* @param {item=} an item for the absolute angle of the blade (optional)
* @param {item=} an item for some saved positions (optional)
* @param {value=0} the value for opened (optional, default 0)
* @param {value=255} the value for closed (optional, default 255)
* @param {value=5} step between two values (optional, default 5)
* @param {text(half,full)=} 'half' blade turns from -1 to +1, 'full' blade turns from 0 to +1 (optional, default 'half')
* @param {image=} a background image url (relative to smartVISU directory or absolute); optimal size is 100px x 180px (optional)
* @param {value=0} the value to send for position 1 (optional, default 0)
* @param {value=1} the value to send for position 2 (optional, default 1)
*
* @info inspired by Jörg Gutowski
*/

/***********************************************************************
*        Macro für bodentiefe Fenster
*        Wert für Sonnenschutz im UZSU bei 60%
*        Prozentwerte (0%, 100%, 60%) sind ohne Prozentzeichen angegeben
************************************************************************/
{% macro one_bodentief(id, txt, item_move, item_stop, item_pos, item_shift, item_angle, item_saved, value_top, value_bottom, step, mode, background, value_pos_1, value_pos_2) %}
    {% import "basic.html" as basic %}
    {% import "device.html" as device %}
    <div class="blind"{% if not id is empty %} id="{{ uid(page, id) }}"{% endif %}>
        <table align="center" cellpadding="5px">
            <tr>
                <td align="left" >
                    <div data-role="controlgroup" data-type="horizontal">
                    {{ basic.stateswitch(id|_('down'), item_move, 'mini', '1', 'control_arrow_down.svg', '', '', '') }}
                    {{ basic.stateswitch(id|_('up'), item_move, 'mini', '0', 'control_arrow_up.svg', '', '', '') }}
                    </div>
                </td>
                <td rowspan="3" align="left" class="pos">
                    {{ basic.shutter(id|_('shutter'), item_pos, '', 0, 100, 1) }}
                </td>
                <td rowspan="3" valign="center" class="Beschriftung">
                    <h1>{% if txt %} <div class="outer"><div class="inner rotate">{{ txt }}</div></div> {% endif %}</h1>
                </td>    
            </tr>
            <tr>
                <td align="left" >{{ device.uzsuicon(id|_('uzsu'), id|_('uzsuitem'), 'Automatik', '', '', 'list',['Hoch:0','Runter:100', 'Sonnenschutz:60', 'Katzenspalt:65'], '', '', '0')}}</td>
            </tr>
            <tr>
                <td align="left" >
                <div data-role="controlgroup" data-type="horizontal">
                    {% if item_saved %} {{ basic.stateswitch(id|_('saved'), item_saved, 'mini', [1,0], 'fts_shutter_50.svg', '', 'icon0', '') }} {% endif %}
                    {% if item_stop %} {{ basic.stateswitch(id|_('stop'), item_stop, 'mini', [1,0], ['secur_locked.svg', 'audio_stop.svg'], '', ['icon1', 'icon0'], '') }} {% endif %}
                </div>
                </td>
            </tr>    
        </table>        
    </div>
{% endmacro %}
/** -------------------------------------------------------------------------------------------------------------------------------------------------- */

/***********************************************************************
*        Macro für normaltiefe Fenster
*        Wert für Sonnenschutz im UZSU bei 50%
*        Prozentwerte (0%, 100%, 50%) sind ohne Prozentzeichen angegeben
************************************************************************/
{% macro one_normal(id, txt, item_move, item_stop, item_pos, item_shift, item_angle, item_saved, value_top, value_bottom, step, mode, background, value_pos_1, value_pos_2) %}
    {% import "basic.html" as basic %}
    {% import "device.html" as device %}
    <div class="blind"{% if not id is empty %} id="{{ uid(page, id) }}"{% endif %}>
        <table align="center" cellpadding="5px">
            <tr>
                <td align="left" >
                    <div data-role="controlgroup" data-type="horizontal">
                    {{ basic.stateswitch(id|_('down'), item_move, 'mini', '1', 'control_arrow_down.svg', '', '', '') }}
                    {{ basic.stateswitch(id|_('up'), item_move, 'mini', '0', 'control_arrow_up.svg', '', '', '') }}
                    </div>
                </td>
                <td rowspan="3" align="left" class="pos">
                    {{ basic.shutter(id|_('shutter'), item_pos, '', 0, 100, 1) }}
                </td>
                <td rowspan="3" valign="center" class="Beschriftung">
                    <h1>{% if txt %} <div class="outer"><div class="inner rotate">{{ txt }}</div></div> {% endif %}</h1>
                </td>    
            </tr>
            <tr>
                <td align="left" >{{ device.uzsuicon(id|_('uzsu'), id|_('uzsuitem'), 'Automatik', '', '', 'list',['Hoch:0','Runter:100', 'Sonnenschutz:50'], '', '', '0')}}</td>
            </tr>
            <tr>
                <td align="left" >
                <div data-role="controlgroup" data-type="horizontal">
                    {% if item_saved %} {{ basic.stateswitch(id|_('saved'), item_saved, 'mini', [1,0], 'fts_shutter_50.svg', '', 'icon0', '') }} {% endif %}
                    {% if item_stop %} {{ basic.stateswitch(id|_('stop'), item_stop, 'mini', [1,0], ['secur_locked.svg', 'audio_stop.svg'], '', ['icon1', 'icon0'], '') }} {% endif %}
                </div>
                </td>
            </tr>    
        </table>        
    </div>
{% endmacro %}
/** -------------------------------------------------------------------------------------------------------------------------------------------------- */


/***********************************************************************
*        Platzsparende Macros in Tabellenform
*        Macro für bodentiefe Fenster
*        Wert für Sonnenschutz im UZSU bei 60%
*        Prozentwerte (0%, 100%, 60%) sind ohne Prozentzeichen angegeben
************************************************************************/
{% macro two_bodentief(id, txt, item_move, item_stop, item_pos, item_shift, item_angle, item_saved, value_top, value_bottom, step, mode, background, value_pos_1, value_pos_2) %}
    {% import "basic.html" as basic %}
    {% import "device.html" as device %}
    {% import "icon.html" as icon %}
    <div class="blind"{% if not id is empty %} id="{{ uid(page, id) }}"{% endif %}>
       <table>
            <tr>
                <td width=80>
                    <div class="set">{{ basic.stateswitch(id|_('down'), item_move, 'mini', '1', 'control_arrow_down.svg', '', '', '') }}</div>
                </td>
                <td width=80>
                    <div class="set">{{ basic.stateswitch(id|_('up'), item_move, 'mini', '0', 'control_arrow_up.svg', '', '', '') }}</div>
                </td>
                <td width=80>
                    <div class="set">{{ basic.stateswitch(id|_('saved'), item_saved, 'mini', [1,0], 'fts_shutter_50.svg', '', 'icon0', '') }}</div>
                </td>
                <td width=80>
                    <div class="set">{% if item_stop %} {{ basic.stateswitch(id|_('stop'), item_stop, 'mini', [1,0], ['secur_locked.svg', 'audio_stop.svg'], '', ['icon1', 'icon0'], '') }} {% endif %}</div>
                </td>
                <td width=80>
                    <div class="set">{{ device.uzsuicon(id|_('uzsu'), id|_('uzsuitem'), 'Automatik', '', '', 'list',['Hoch:0','Runter:100', 'Sonnenschutz:60', 'Katzenspalt:65'], '', '', '0')}}</div>
                </td>
                <td width=80>
                    <div class="pos">{{ icon.shutter(id|_('pos'), '', item_pos, '', 100 ) }}
                </td>
            </tr>
        </table>
    </div>
{% endmacro %}
/** -------------------------------------------------------------------------------------------------------------------------------------------------- */


/***********************************************************************
*        Platzsparende Macros in Tabellenform
*        Macro für normaltiefe Fenster
*        Wert für Sonnenschutz im UZSU bei 50%
*        Prozentwerte (0%, 100%, 50%) sind ohne Prozentzeichen angegeben
************************************************************************/
{% macro two_normal(id, txt, item_move, item_stop, item_pos, item_shift, item_angle, item_saved, value_top, value_bottom, step, mode, background, value_pos_1, value_pos_2) %}
    {% import "basic.html" as basic %}
    {% import "device.html" as device %}
    {% import "icon.html" as icon %}
    <div class="blind"{% if not id is empty %} id="{{ uid(page, id) }}"{% endif %}>
       <table>
            <tr>
                <td width=80>
                    <div class="set">{{ basic.stateswitch(id|_('down'), item_move, 'mini', '1', 'control_arrow_down.svg', '', '', '') }}</div>
                </td>
                <td width=80>
                    <div class="set">{{ basic.stateswitch(id|_('up'), item_move, 'mini', '0', 'control_arrow_up.svg', '', '', '') }}</div>
                </td>
                <td width=80>
                    <div class="set">{{ basic.stateswitch(id|_('saved'), item_saved, 'mini', [1,0], 'fts_shutter_50.svg', '', 'icon0', '') }}</div>
                </td>
                <td width=80>
                    <div class="set">{% if item_stop %} {{ basic.stateswitch(id|_('stop'), item_stop, 'mini', [1,0], ['secur_locked.svg', 'audio_stop.svg'], '', ['icon1', 'icon0'], '') }} {% endif %}</div>
                </td>
                <td width=80>
                    <div class="set">{{ device.uzsuicon(id|_('uzsu'), id|_('uzsuitem'), 'Automatik', '', '', 'list',['Hoch:0','Runter:100', 'Sonnenschutz:50'], '', '', '0')}}</div>
                </td>
                <td width=80>
                    <div class="pos">{{ icon.shutter(id|_('pos'), '', item_pos, '', 100 ) }}
                </td>
            </tr>
        </table>
    </div>
{% endmacro %}
/** -------------------------------------------------------------------------------------------------------------------------------------------------- */

Und hier der Aufruf in kompakter Tabellenform:

Code:

{{ shutter.two_bodentief ('EG_Kue_Rol_2', 'Richtung: Garage', 'EG_Kue_Rollo_2.mov', 'EG_Kue_Rollo_2.sper', 'EG_Kue_Rollo_2.pos', '', '', 'EG_Kue_Rollo_2.Sonnensch', 0, 100, 5, '', '', '','') }}

**wvhn** · 02.01.2020, 14:50

cool. Danke!

**masterjost** · 02.01.2020, 15:05

Ich sehe gerade da ist noch der Katzenspalt auf Wunsch einer einzelnen Dame im UZSU drin. Den könnte man natürlich rausnehmen :-D

**wvhn** · 03.01.2020, 23:01

Vielen Dank Euch. Ich habe jetzt mal beide Versionen in das neue "Example3.graphic" übernommen, das (hoffentlich) ins Release der V2.9 kommt:
Graphic_overview.jpg

Habe vorerst beide Versionen leicht modifiziert integriert, da die Version von Michael die einfachen Shutter bedient, während die von masterjost den vollen Parametersatz von device.shutter unterstützt. Letzteres ist m.E. bei Jalousien wichtig, bei denen sich der Winkel der Lamellen automatisch beim Fahren verändert.

Gruß Wolfram

Angehängte Dateien

Graphic_overview.jpg (107,1 KB, 219x aufgerufen)

**yachti** · 03.01.2020, 23:08

Zitat von wvhn Beitrag anzeigen

Ich habe jetzt mal beide Versionen in das neue "Example3.graphic" übernommen, dass (hoffentlich) ins Release der V2.9 kommt:

Hallo Wolfram,
danke für Deinen Einsatz. super

schönen Abend

**Misanthrop** · 19.02.2020, 10:22

Sorry für die Frage, aber kann jemand ganz kurz erklären, wie ich so ein Custom Widget einbinde? Wo müssen die Dateien aus dem zip hin? Muss dann noch was gemacht werden, oder können die widgets dann direkt aufgerufen werden?

Lösung gefunden: man muss den entsprechenden Teil einfach in die original device.html packen (zu finden in der Visu im widgets Ordner) Allerdings keine Ahnung, ob das Best practice ist... funktioniert aber.

Jetzt hat sich allerdings eine weitere Fragen aufgetan: yachti hat in seinem Ursprungspost in der selben Zeile noch das UZSU Icon? Gibt es eine Möglichkeit das über die Item Definition von SHNG zu machen & wenn ja, wie?

**wvhn** · 19.02.2020, 12:50

Also mit dem Einbinden in die device.html funktioniert das natürlich. Ist aber IMHO keine gute Idee, weil die die device.html mit dem nächsten Update wieder überschrieben wird und Du Deine Änderungen dann jedes Mal wieder nachziehen musst.

Besser ist es, die Widgets in das Verzeichnis "dropins" zu legen, das ab V2.9 (develop) angelegt ist. Alle dort vorhandenen widgets werden automatisch importiert und stehen dann zum Aufruf in den html-Seiten zur Verfügung. Aufruf dann mit z.B.

Code:

{{ shutter.line ('shutter_eg', 'Erdgeschoss', 'zentral.haus.rollladen.eg.fahren', 'zentral.haus.rollladen.eg.stopp', 'zentral.haus.rollladen.eg.position', 'zentral.haus.rollladen.eg.beschatten') }}

anstelle von {{ device.line (...) }}, das Du vermutlich jetzt verwendest. Beispiele für die neuen shutter-widgets wirst Du im Release finden. Aktuell sind sie noch hier (das ist die oben im Bild gezeigte Seite).

Das UZSU-Icon habe ich rausgeschmissen, weil wir mit smai eine Diskussion hatten, dass die smartVISU "neutral" bleiben sollte und nicht zu sehr SmartHomeNG-spezifische Erweiterungen fest verankert werden. Der Version von yachti entspricht "shutter.line". Dort kannst Du den Aufruf des UZSU-Icon entsprechend des oben geposteten Codes einbauen. In "shutter.table" (Version von masterjost ) habe ich den Aufruf des UZSU-Icons nur auskommentiert. Dort muss man aber noch im Aufruf von device-uzsuicon mit der Namensgebung für das item aufpassen. In beiden widgets musst Du dann natürlich einen weiteren Paramter für das uzsu-item definieren und übergeben.

**Misanthrop** · 19.02.2020, 13:34

wvhn Danke für den Hinweis, macht natürlich sinn, deshalb hab ich auch nicht gedacht, dass das best practice ist.

Hatte die Diskussion von euch irgendwo auf github gesehen. Ich finde das macht auch soweit Sinn... Allerdings fänd ich es irgendwie auch sinnvoll dass man dann ggf. 2 unterschiedliche widgets bauen würde, eins mit uzsu eins ohne. Wenn ich mal soweit bin, dass ich mir selbst widgets ausdenke, dann werde ich diese ja für mich zurecht schustern und mir wäre dann relativ egal, ob das jetzt ein spezielles plugin nutzt oder nicht. Wer es nicht brauchen kann, muss es ja nicht benutzen oder kann es für seine eigenen Ansprüche anpassen. Ich denke dass durch so eine Einschränkung eher leute davon abgeschreckt werden sich zu beteiligen.

Ankündigung

Device Widget erweitert mit smallshut

[Codebeispiel] Device Widget erweitert mit smallshut

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar