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

                        Lädt...
                        X