Sperre einer Funktion bspw. stateswitch anzeigen

[Sisamiwe]

Hallo,

ich suche nach einer Möglichkeit anzuzeigen, dass eine Funktion aktuell gesperrt ist.

Also Beispiel habe ich einen stateswitch, der eine Leuchte schaltet. Wenn dieser gesperrt ist (Zustand liegt in einem Item in shNG vor), soll bspw. ein kleines Schloß am stateswitch angezeigt werden.

Hab ihr ggf. andere Beispiele, wie ihr eine Sperre visualisiert?

Danke Euch.
Michael

[wvhn]

Moin Michael,

schau mal, ob Du hiermit klar kommst.

Eigentlich wäre es dann auch sinnvoll, den stateswitch zu deaktivieren. Das sehe ich mir mal an. Mit einem Flipswitch habe ich das schonmal gemacht, siehe hier.

Gruß
Wolfram

[Sisamiwe]

Hallo Wolfram,

hiermit klar kommst.

Das funktioniert grundsätzlich. Allerdings hätte ich das Badge gern nur, wenn die Sperre vorliegt. Das Symbol aus basic.symbol ist auch nur bei der Sperre sichtbar. Der rote "Klecks" aber immer.

Flipswitch habe ich das schonmal gemacht

Das habe ich auch versucht. Habe es aber weder mit dem flipswitch noch mit dem stateswitch hinbekommen.

Vielen Dank und beste Grüße
Michael

[wvhn]

Das funktioniert grundsätzlich. Allerdings hätte ich das Badge gern nur, wenn die Sperre vorliegt. Das Symbol aus basic.symbol ist auch nur bei der Sperre sichtbar. Der rote "Klecks" aber immer.

Wie man den roten Klecks loswird, wird in dem Thread auch geklärt. Mit den verschachtelten Widgets ist die Lösung zugegebenermaßen nicht gerade intuitiv und schlank.

Den Code zum Deaktivieren des flipswitch hatte ich ja verlinkt. Anstatt ">50" muss man den Wert des Sperr-items angeben, z.B. "==1"
Und so klappts auch mit dem stateswitch ("myPage" ist durch den Seitennamen zu ersetzen):

{{ basic.stateswitch('myID', 'myItem') }}
{{ basic.print('', 'myLockItem', 'script', 'if (VAR1==1){$("#myPage-myID").next("a").addClass("ui-disabled")}else{$("#myPage-myID").next("a").removeClass("ui-disabled")}') }}

Ich habe gerade schon eine Erweiterung im Test, die einigen Widgets eine "enable"- und eine "disable"-Funktion zur Verfügung stellt. Ich bin aber noch nicht sicher, wie ich dies in die Widgets integrieren soll.

• jedem Widget ein Sperr-item, den Wert des Sperr-items und die Option für das Sperrsymbol zusätzlich mitgeben
• ein neues Widget "status.disable" mit den o.g. Parametern anlegen, das man mittels der ID an das Ziel-Widget koppelt.

Ich tendiere aktuell zur zweiten Lösung, da die erste zusätzliche Parameter in die bestehenden Widgets einfügt und das Zählen von Parametern in den Hauptwidgets eh schon mühsam ist.

Gruß
Wolfram

[Sisamiwe]

Vielen Dank!

("myPage" ist durch den Seitennamen zu ersetzen)

Das hat bei mir gefehlt.

ein neues Widget "status.disable" mit den o.g. Parametern anlegen, das man mittels der ID an das Ziel-Widget koppelt.

Ich würde auch die zweite Lösung favorisieren. Lösung 1 würde alle Widget (unnötig) verkomplizieren.

Gruß
Michael

[Sisamiwe]

Und so klappts auch mit dem stateswitch ("myPage" ist durch den Seitennamen zu ersetzen):

Es klappt nun fast:
- Wenn man von gesperrt auf entsperrt schaltet, passiert genau das Gewünschte: Der Stateswitch ist (wieder) voll zu sehen und kann betätigt werden.
- Wenn man von entsperrt auf gesperrt schaltet, bleibt der stateswitch voll sichtbar und wird erst nach Auffrischen der Seite (F5) halbtransparent.

Ist das bei dir auch so?

[wvhn]

Nein. Poste doch mal Deinen Code und schau mal auf der Konsole, ob die item-Änderung entsperrt -> gesperrt als Update (vor dem Reload) auf dem Websocket übertragen wird.

[wvhn]

Sisamiwe ,

ich habe jetzt erstmal das Widget status.badge um die Darstellung von icons erweitert. Die beiden angehängten Dateien sind mit v3.5 kompatibel und können im Ordner ./widgets ausgetauscht werden (nach Entfernen der Endungen .txt). Zusätzlich kann man in die eigene visu.css noch folgendes aufnehmen, um die Position der Symbole zu verbessern:

/** supplement for status.badge in v3.5 - remove in a later version */
[data-widget="status.badge"] span svg.fx-icon,
[data-widget="status.badge"] span .icon {
   vertical-align: text-bottom;
   width: 20px;
   height: 20px;
}​​

Die icons gibt man als zusätzlichen Parameter in derselben Reihenfolge wie die Farben an. Ein leerer String bedeutet, dass statt des icons der item-Wert angezeigt wird (wie bisher). Die icons müssen im Ordner ./icons/ws vorhanden sein und können ohne Pfad und extension angegeben werden.

{{ status.badge('', 'myItem', [1,4,7], ['hidden','green','orange',''], ['','lock','','control_building_empty']) }}

Die Änderung ist schon im develop branch. Dort dürfen die icons auch in ./dropins/icons/ws liegen.

Zusätzlich sind im develop branch disable- und enable-Methoden für alle Widgets mit Schreibzugriff auf items eingeführt, so dass diese einheitlich verwendet werden können.

{{ basic.stateswitch('myID', 'myItem') }}
{{ basic.print('', 'myLockItem', 'script', 'if (VAR1==1){$("#myPage-myID").widget("disable")}else{$("#myPage-myID").widget("enable")}') }}​

DIes geht bei den schreibenden basic.*, den icon.*, device.roofwindow und device.rtrslider. Alle anderen device-Widgets können das noch nicht.

Gruß
Wolfram

EDIT:
ich hatte ein disable-Widget auf Basis von status.badge gebaut, das alle Widgets abdeckt einschließlich derer, die wiederum die o.g. Basiswidgets verwenden. Es wird dann der badge angezeigt und die Zielwidgets werden deaktiviert. Das hat gut funktioniert, aber ich bin mit dem badge nicht zufrieden. Dieser ist ein eigenes html-Element und wird immer da platziert, wo gerade Platz ist - mal rechts oben hinter dem vorhergehenden Element und mal in der nächsten Zeile (also links unten). Zudem kann man den badge nur einmal anzeigen - braucht also für jedes Widget einen eigenen badge, auch wenn man mehrere Widgets mit einem item sperren kann. Hier braucht es eine bessere Idee für die Umsetzung und die fehlt mir noch. Daher die Entscheidung, badge und disable erstmal getrennt zur Verfügung zu stellen.

[Sisamiwe]

Nein. Poste doch mal Deinen Code und schau mal auf der Konsole, ob die item-Änderung entsperrt -> gesperrt als Update (vor dem Reload) auf dem Websocket übertragen wird.

Hallo Wolfram,

auch mit der Einarbeitung in von heute bleibt bei mir das Verhalten gleich, sprich
- Wenn man von gesperrt auf entsperrt schaltet, passiert genau das Gewünschte: Der Stateswitch ist (wieder) voll zu sehen und kann betätigt werden.
- Wenn man von entsperrt auf gesperrt schaltet, bleibt der stateswitch voll sichtbar und wird erst nach Auffrischen der Seite (F5) halbtransparent.

Mein Code:

                        {{ basic.stateswitch('sw_treppe', 'licht.eg.diele.treppe.onoff', 'icon', '', 'light_uplight.svg') }} treppenauge flur
                        {{ basic.print('', 'licht.eg.diele.treppe.sperren', 'script', 'if (VAR1==1){$("#1_page_licht-sw_treppe").widget("disable")}else{$("#1_page_licht-sw_treppe").widget("enable")}') }}

und ja, das Update des Itemwertes wird ohne reload übertragen:
image.png

Ich bin auf dem develop von grad eben und habe die beiden Dateien von oben nach dem Pull ausgetauscht.

Fällt Dir noch was ein?
Besten Dank

[wvhn]

Moin Michael,

wenn Du auf dem develop branch bist, brauchst Du die beiden Dateien nicht auszutauschen. Das Widget hat eine Suchfunktion für die icons bekommen. Die develop-Version kann die icons in beiden Ordnern suchen (erweiterte functions_twig.html), während die gepostete Version kompatibel zu v3.5 bleiben musste und deshalb nur in ./icons/ws sucht.

Ich habe Deinen Code auf 2 Servern getestet und er tut bei mir, was er soll. Als Client habe ich einen PC mit Firefox und Edge verwendet, sowie ein iPad mit Safari. Bei letzterem funktionierte das Deaktivieren erst nicht, bis ich die Websitedaten gelöscht habe.

Hast Du irgend etwas am Treiber geändert, oder besonderen Code in der visu.js? Wenn Du von entsperrt auf gesperrt schaltest, kannst Du vorher und hinterher jeweils "widget.buffer" in der Konsole aufrufen? Dort stehen alle items mit Werten der aktuellen Seite. Was wird für die beiden items angezeigt?

Gruß
Wolfram

[Sisamiwe]

Hallo Wolfram,

Hast Du irgend etwas am Treiber geändert, oder besonderen Code in der visu.js?

Ich habe keine (bewußten) Änderungen vorgenommen. Die visu.js ist noch "jungfräulich".

Ich muss aber meine Beobachtung korrigieren, da ich bislang immer nur abends getestet habe. Da ist das Licht immer an gewesen.

Wenn das Licht aus ist, funktioniert alles wie gewollt. Wenn gesperrt, ist das Icon halbtransparent und kann nicht geclickt werden.
Ist das Licht aber an, und es wird gesperrt, wechselt das Schalticon auf 0 und das Sperritem auf 1. Beide Änderungen kommen in der Visu an.

Zustand AN:

image.png
und nun Setzten der Sperre in shNG:
image.png--> hie wird nur das Icon auf "AUS" gestellt, aber nicht Gesperrt. Kann es sein, dass der zweite "Befehl" den ersten wieder überschreibt?

Zustand AUS:
image.pngund nun Setzten der Sperre in shNG:
image.png--> Hier passt alles.

Vielen Dank.
Beste Grüße
Michael

[wvhn]

Moin Michael,

jetzt kann ich das nachvollziehen. Ich bin davon ausgegangen, dass sich das Schaltitem nicht ändert, wenn das Sperritem aktiv ist - also dass der Aktor gesperrt ist und das Widget dies nachbilden soll.

Der Stateswitch hat ein spezielles Handling der aktiven und inaktiven Elemente. Durch das Ändern des Schaltitems wird das gesperrte aktive Element gegen ein bisher inaktives ausgetauscht, das nicht gesperrt ist. Das muss im Widget tatsächlich angepasst werden, wenn im gesperrten Kanal eine Änderung zulässig sein soll.

Gruß
Wolfram

[wvhn]

Ich bin gerade unterwegs und kann das nicht selbst testen. Im Javascript Widget gibt es beim basic.stateswitch in der disable-Methode die Zeile

this.element.next('a').addClass('ui-state-disabled');

Dahinter kannst Du zusätzlich folgende Zeile einfügen:

this.element.find('a[data-widget]').addClass('ui-state-disabled');

Analog in der enable-Methode.

Gruß
Wolfram

[Sisamiwe]

Dahinter kannst Du zusätzlich folgende Zeile einfügen:

mit dem Code:

 _enable: function(){
this.element.next('a').removeClass('ui-state-disabled');
        this.element.find('a[data-widget]').removeClass('ui-state-disabled');
},

_disable: function(){
this.element.next('a').addClass('ui-state-disabled');
        this.element.find('a[data-widget]').addClass('ui-state-disabled');
}

funktioniert es perfekt.
DANKE

[wvhn]

Sisamiwe

Es gibt jetzt im develop branch ein neues Widget "status.disable". Dieses deaktiviert beliebige Widgets. Dazu müssen den Widgets eindeutige IDs gegeben werden und diese an status.disable übergeben werden:

{{ status.disable(['myID1', 'myID2', 'myID3'], 'myDisableItem', '1')  }}

Die IDs werden automatisch mit dem Seitennamen verknüpft, wie alle Widget-IDs, so dass die ID des Ziel-Widgets 1:1 übernommen werden muss.

Da in manchen Designs die inaktiven buttons schwer von den aktiven zu unterscheiden sind, wird an den buttons zusätzlich ein badge mit Schloss angezeigt.
grafik.png
Bei den device-Widgets mit vielen Buttons sieht das nicht gut aus. Deshalb werden die badges dort ausgeblendet und durch einen zentralen badge ersetzt. Dies alles lässt sich bei Bedarf in der visu.css auf eigene Bedürfnisse anpassen. Alternativ kann man mit dem erweiterten status.badge eigene badges mit Symbolen hinzufügen.

Bei den device-Widgets kann man anstelle des gesamten Widgtes auch einzelne Elemente deaktivieren. Die neue Doku-Seite in der inline(!)-Doku enthält Beispiele.

Für Tests bin ich dankbar.

Gruß
Wolfram