Status grafisch darstellen

[kroko4000]

Hi,

wie kann ich in smartVISU am besten einen einfachen Status (0 oder 1) grafisch darstellen?
Also Zustand=0 -> Icon1/Farbe1 und Zustand=1 -> Icon2/Farbe2.
Praktisch eine Art read-only basic.switch, also ohne Schaltfunktion nur mit Statusanzeige.

Ergänzende Frage:
Kann ich es bei basic.switch (oder einer anderen, ähnlichen Komponente) einstellen, dass er den dargestellten Status bzw. Farbe nicht sofort, sondern erst nach dem Empfang des Statuses vom ausführenden Aktor ändren soll?
Zur Erläuterung ein Beispiel:
Wenn ich auf den Switch für "Licht an im Bad" drücke, sendet er das 1er Telegramm und ändert sofort die Farbe von schwarz (aus) auf orange (an).
Habe ich jedoch gerade kein WLAN-Empfang, geht erstmal kein Lich im Bad an, sondern erst, wenn ich wieder im WLAN Bereich bin.
Ich möchte, also dass der Switch auch erst dann von schwarz (aus) auf orange (an) wechselt, wenn das Licht im Bad tatsächlich angegangen ist und der Status 1 vom Aktor gekommen ist.

Danke und Gruss

[smai]

Hallo Stefan

Du kannst zwei basic.symbol verwenden, einmal für Status 0 und einmal für Status 1:

{{ basic.symbol('bad_aus', 'bath.light.switch', '', 'light_light.svg', 0) }}
{{ basic.symbol('bad_an', 'bath.light.switch', '', 'light_light.svg', '', '', 'icon1') }}

Da ich das ebenfalls mühsam finde, habe ich bereits begonnen, für die kommende Version etwas wie ein read-only switch zu implementieren.

Zur zweiten Frage: Verwendest du SmartHomeNG als Backend?
Um damit den Status vom Aktor nutzen zu können, musst du diesen als separates Item mit der entsprechenden GA bei knx_listen anlegen.

Gruss
Stefan

[kroko4000]

Hallo Stefan,

ok, das mit den beiden Symbolen ist eine Möglichkeit, aber dann habe ich natürlich zwei items (Platzverschwendung und schlechtere Interpretierbarkeit), die eigentlich den selben Status ausdrücken.
Kann man die items vielleicht auch konditional anzeigen, also sinngemäß:

if sh.bath.light.status() then
  {{ basic.symbol('bad_an', 'bath.light.switch', '', 'light_light.svg', '', '', 'icon1') }}
else
  {{ basic.symbol('bad_aus', 'bath.light.switch', '', 'light_light.svg', 0) }}

Dieses Feature fände ich sowieso nicht schlecht, weil ich einige items nur in bestimmten Situationen anzeigen möchte.
Z.B. Status einer gestörten Meldegruppe von der Alarmanlage nur dann, wenn er 1 ist.
Wenn er 0 ist, also Meldegruppe nicht gestört, ist das item uninteressant und sollte gar nicht angezeigt werden.

Zweite Frage:
Ja ich verwende smarthomeNG als Backend und die Stati werden an die entsprechenden items übermittelt.
Mir geht es jedoch darum, dass der switch nicht sofort nach dem Auslösen die Farbe wechselt, sondern erst nach dem Empfang des echten Status vom Aktor.
Hat smartVisu/smarthomeNG nämlich kurzzeitig keine Verbindung zum KNX-Bus, weil z.B. WLAN kurz abgerissen ist, so wird die Farbe des switches sofort geändert, obwohl das Licht vielleicht erst in ein paar Sekunden angeht und der Aktor den Status=1 meldet.
Ich hoffe, ich habe mich einigermaßen verständlich ausgedrückt.

[smai]

basic.symbol ist bereits konditional, es wird also nur angezeigt, wenn das Item den entsprechenden Wert aus dem 5. Parameter hat (Standardwert ist 1).
Die Doku dazu findest du unter http://docu.smartvisu.de/2.8/index.p...t_basic.symbol.

Noch ein Hinweis zum Wording: Die "Items" (also Visu-Elemente) heissen Widget, items sind die Datenlieferanten aus SmartHomeNG.

Den zweiten Teil habe ich schon richtig verstanden.
Du musst ein zweites Item in SmartHomeNG anlegen. Wenn du z.B. sowas hast:

[bath]
[[light]]
[[[switch]]]
knx_send = 1/1/1
knx_listen = 1/1/2 # das ist die Status-GA
...

erweiterst du das zu:

[bath]
[[light]]
[[[switch]]]
knx_send = 1/1/1
knx_listen = 1/1/2 # das ist die Status-GA
...
[[[[status]]]]
knx_listen = 1/1/2 # das ist die Status-GA
​​​​​​​...

und verwendest in der Visu bath.light.switch.status im basic.symbol.

[kroko4000]

Ok, dass das symbol Widget konditional ist, habe ich übersehen. Das is schonmal super.
Kann man die Position und Grösse des optionalen Textes von dem Widget beeinflussen?
Wenn nicht, kann ich die vorhanden SVG-Icon-Dateien editieren und als neue, eigene abspeichern?

Im zweiten Teil geht es mir nicht um das symbol, sondern um das switch Widget.
Ich möchte also, dass der switch nur die "echten", vom Aktor kommenden Stati anzeigt statt des sofortigen Zustandwechsels nach der Betätigung.

Gruss

[smai]

Die Position des Textes kann man nur per CSS beeinflussen. Das SVG kannst du natürlich editieren.

OK, ich sehe nun das zweite Problem. Leider sehe ich dafür keine Lösung.
Der switch wechselt ja direkt beim Betätigen den Zustand. Das liesse sich allenfalls noch verhindern. Aber spätestens wenn der Wert durch SmartHomeNG bestätigt ist, kann die Visu das nicht mehr unterscheiden.

Man müsste dem Switch ein zweites Status-Item mitgeben können. Aber sinnvollerweise müsste das dann bei allen sendenden Widgets möglich sein.
Und z.B. beim Slider oder einer Checkbox wirkt das dann auch eigenartig, wenn das Control erst wieder zurückspringt um kurz darauf wieder am richtigen Ort zu landen.
Im Moment kann ich mir das nicht so richtig vorstellen, obwohl ich den Sinn durchaus sehe. Ich bin deshalb gerne offen für konkrete Ideen zur Umsetzung.

[kroko4000]

Na ja, das Status-Item könnte ja optional sein bei den sendenden Widgets.
Wenn es angegeben ist, dann zeigt das Widget den Status nur entsprechend dem Status-Item an (und verhindert dadurch auch ein hin und her Schalten des Widgets, ohne eine echte Aktion).
Wenn es nicht angegeben ist, dann alles wie gehabt.
Dann könnte jeder selbst entscheiden, was ihm je nach Situation besser zusagt.

Gibt es auch die Möglichkeit sendende Widgets, also z.B. switch oder button auch konditional anzuzeigen?
Hintergrund: Ich möchte den switch zum scharf/unscharf Schalten der Alarmanlage nur dann anzeigen, wenn keine Meldegruppe gestört ist.
Sonst wird halt konditional die gestörte Meldergruppe über symbol angezeigt (konnte ich ja schon dank Deines Tipps lösen -.

Könntest Du vielleicht ein Beispiel in CSS für die Position/Grösse des Textes im symbol Widget angeben?

Danke

[smai]

Optinal müsste es sicher sein.
Aber springen würde es trotzdem. Beispiel Checkbox: Du hakst diese an, der Haken fliegt aber wieder raus, weil ja noch kein Status da ist. Kommt dann der Status, geht der Haken wieder rein.
Noch hässlicher beim Slider: Du ziehst ihn irgendwohin und er springt zurück. Im extremfall ziehst du schneller, als der Status kommt. Dann wird er praktisch unbedienbar.
Dasselbe kann selbst beim Switch vorkommen: Du klickst und vor der Status da ist klickst du nochmal. Soll er nun aus- oder einschalten?

Der Switch kann sich in der aktuellen Version 2.8 nicht selbst ausblenden, aber es gibt noch das Widget status.collapse.
In der kommenden Version wird es auch der Switch können.

Ein passendes CSS-Beispiel habe ich leider grad nicht, aber ich weiss ja auch gar nicht, was du mit dem Text machen möchtest.

[kroko4000]

Ok danke, ich verstehe Deine Bedenken beim "echten" Status. Ist auch vielleicht nicht ganz so wichtig, denn der geschaltete/gedrückte Status dürfte wirklich nur in sehr seltenen Situation kurzzeitig vom echten abweichen.

Ich werde es mit status.collapse ausprobieren, danke für den Tipp.

Ich möchte den Text in relativ kleinem Schriftsatz unterhalb vom symbol und nicht rechts daneben ausgeben.
Also soetwas wie das CSS, welches ich für Tabellentexte definiert habe:

<STYLE TYPE="text/css">
<!--
TH{text-align: center;}
TD{text-align: center; font-size: 8pt;}
--->
</STYLE>

Die Frage ist, welchen HTML tag muss ich da ansprechen?

[smai]

Wenn du das für jedes basic.symbol so haben willst, funktioniert folgendes (in der visu.css deiner pages eingetragen):

span[data-widget="basic.symbol"] {
  display: inline-block;
  width: 48px;
  text-align: center;
  font-size: 8pt;
}

Falls du es nur für einzelne Symbole willst, ersetzt du die erste Zeile durch #ID1, #ID2, ... {
Die ID bildet sich dabei aus der ID der Seite und des Widgets, verbunden mit einem Bindestrich.
Also z.B. deinepage-bad_an

Oder wenn es alle Symbole auf einer spezifischen Seite sein sollen: #deinepage span[data-widget="basic.symbol"] {

[kroko4000]

Super, vielen Dank.
Die generelle Variante funktioniert schon mal.
Was ist die ID der page? Wo kann ich die ablesen?

Ich habe auch status.collapse ausprobiert, aber es versteckt immer die beiden betroffen widgets, unabhängig vom ausgewerteten item:

{{status.collapse('w1', 'alarmanlage.melder.ungestoert')}}
<div class="hide" data-bind="w1">
  {{basic.switch('intern_schalten','alarmanlage.intern_schalten','secur_locked.svg','secur_open.svg')}}
  {{basic.switch('extern_schalten','alarmanlage.extern_schalten','secur_alarm_enabled.svg','secur_alarm_disabled.svg')}}
</div>

Ist die Syntax ok?
Die beiden switches sollten sichtbar werden, wenn alarmanlage.melder.ungestoert=true ist.

[kroko4000]

Sorry, vergiss meine Frage bzgl. Page ID. Habe es schon im Quellcode selbst gefunden.

[smai]

So müsste das collapse meines Wissens funktionieren.
Hast du irgendwelche JavaSCript-Fehler in der Browser-Konsole?

[kroko4000]

Ich bekomme einen error und zwei warnings:

Error
Uncaught TypeError: Cannot read property 'attr' of undefined
    at Object.listeners (base.min.js:22)
    at Object.monitor (io_smarthome.py.min.js:7)
    at WebSocket.io.socket.onopen (io_smarthome.py.min.js:5)

Warning
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

Warning
This page includes a password or credit card input in a non-secure context. A warning will be added to the URL bar in Chrome 56 (Jan 2017). For more information, see https://goo.gl/zmWq3m.

Das auszuwertende item ist auf jeden Fall ok. Habe es noch zur Kontrolle separat ausgegeben.

[greentux]

Je nach DALI Gateway kann so eine Statusrückmeldung mehrere Sekunden dauern. Ich hatte das am Anfang auch mal vor, habe es dann aber aufgegeben und mir ein Extrastatuswidget gegönnt.