Ankündigung

Einklappen
Keine Ankündigung bisher.

Device Widget erweitert mit smallshut

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    [Codebeispiel] Device Widget erweitert mit smallshut

    Hallo,
    ich habe das device widget mit dem Smallshutter erweitert und die Doku angepasst.
    Ich nutze es für eine Rolloübersicht.
    shutter.JPG

    Doku und Widget sind angefügt.
    Gruß
    Michael
    Angehängte Dateien
    Meine Installation: VM Debian Stretch SH NG 1.6, SmartVISU 2.9, KNX, DMX, 1-wire, Cisco ASA 5512X IPS, VMware vSphere 6.7

    #2
    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

    Kommentar


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

      Kommentar


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

        Angehängte Dateien
        Meine Installation: VM Debian Stretch SH NG 1.6, SmartVISU 2.9, KNX, DMX, 1-wire, Cisco ASA 5512X IPS, VMware vSphere 6.7

        Kommentar


          #5
          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.
          Meine Installation: VM Debian Stretch SH NG 1.6, SmartVISU 2.9, KNX, DMX, 1-wire, Cisco ASA 5512X IPS, VMware vSphere 6.7

          Kommentar


            #6
            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

            Kommentar


              #7
              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

              Kommentar


                #8
                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, '', '', '','') }}

                Kommentar


                  #9
                  cool. Danke!

                  Kommentar


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

                    Kommentar


                      #11
                      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
                      Zuletzt geändert von wvhn; 03.01.2020, 23:36.

                      Kommentar


                        #12
                        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
                        Meine Installation: VM Debian Stretch SH NG 1.6, SmartVISU 2.9, KNX, DMX, 1-wire, Cisco ASA 5512X IPS, VMware vSphere 6.7

                        Kommentar


                          #13
                          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?
                          Zuletzt geändert von Misanthrop; 19.02.2020, 10:43.

                          Kommentar


                            #14
                            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.

                            Kommentar


                              #15
                              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.

                              Kommentar

                              Lädt...
                              X