[Tipp] In HTML-Widget States verarbeiten/anzeigen

[Mic]

Hi,

ich hatte mir einen Wolf gesucht hier im Forum und nun die Lösung.

Ich wollte im VIS anzeigen, ob ein Script regelmäßig einen Datenpunkt updated (in meinem Fall mein Log-Script).
Also: Falls Datenpunkt 0_userdata.0.Log-Script.All.lastTimeUpdated in den letzten 30 Sekunden aktualisiert wurde, dann:

Falls keine Aktualisierung innerhalb 30 Sekunden, dann:

Hier der Code für das HTML-Widget:

Spoiler

Script is <span id="logScriptUpdateCheck"></span>.
<script>
    // Siehe https://forum.iobroker.net/topic/29851/socket-io-state-lesen-und-setzen/
    let objID = '0_userdata.0.Log-Script.All.lastTimeUpdated';
    servConn.getStates(objID, (error, states) => {
        let stateValue = states[objID].val;
        let result;
        if( (parseInt(stateValue)+30000) > Date.now() ) {
            result = '<span style="color:#4fa16c">active</span>'
        } else {
            result = '<span style="color:#ff0000">inactive</span>'
        }
        document.getElementById('logScriptUpdateCheck').innerHTML = result;
    });
</script>

Widget-Export (enthält bereits den Code):

Spoiler

[{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"30000","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"Script is <span id=\"logScriptUpdateCheck\"></span>.\n<script>\n    // Siehe https://forum.iobroker.net/topic/29851/socket-io-state-lesen-und-setzen/\n    let objID = '0_userdata.0..Log-Script.All.lastTimeUpdated';\n    servConn.getStates(objID, (error, states) => {\n        let stateValue = states[objID].val;\n        let result;\n        if( (parseInt(stateValue)+30000) > Date.now() ) {\n            result = '<span style=\"color:#4fa16c\">active</span>'\n        } else {\n            result = '<span style=\"color:#ff0000\">inactive</span>'\n        }\n        document.getElementById('logScriptUpdateCheck').innerHTML = result;\n    });\n</script>","name":"txtScriptStatus","locked":false},"style":{"left":"30px","top":"622px","width":"171px","height":"22px","font-family":"Jura-DemiBold","color":"#8f8f8f","text-align":"left","font-style":"normal","font-variant":"normal","font-weight":"normal","font-size":"14px","z-index":"100"},"widgetSet":"basic"}]

Dies nur als ein Beispiel.
Entscheidende Info von hier: https://forum.iobroker.net/topic/29851/socket-io-state-lesen-und-setzen/

---

Keywords für Forumsuche (Tags sind limitiert hier, warum auch immer): getState() setState() vis.setValue vis.getValue

[sigi234]

@Mic

Da kommt nicht viel?

[Mic]

@sigi234
Hab oben auf den "Standard-Pfad" '0_userdata.0.Log-Script.All.lastTimeUpdated' geändert, damit sollte es gehen. Vorher stand da '0_userdata.0.System.Log-Script.All.lastTimeUpdated'
Hier übrigens auch gepostet: https://forum.iobroker.net/post/384066

[Mic]

Damit öffnet man sich auch andere schöne Spielereien, ohne zusätzlicher Datenpunkte.
Z.B. Ausgabe eines Datums von einem State in "Heute, um 20:15 Uhr" anstatt "25.02.2020, um 20:15 Uhr" usw.
Man kann also mittels JavaScript die State-Daten entsprechend verarbeiten und zur Anzeige bringen, gerade wenn es dafür noch keine Widgets gibt oder diese Optionen nicht bieten.

[GiuseppeS]

@Mic
Hinweis:
Apollon77 hatte in deinem verlinkten Thread folgendes gepostet:

getState liefert den Wert des States. GetObject liefert das Objekt. Und bei getState ist es state.val (wenn state die Variable des response callbacks ist)

Du benutzt in deinem Beispiel oben getStates und greifst im Nachgang auf das eigentliche Objekt des json mit [objID] zu. Dürfte einfacher sein, wenn getState genutzt wird. Habe es selbst nie getestet, da ich nie states auslese.

[Glasfaser]

@Mic

Danke für die Idee .

oder mit Emoji den Zustand anzeigen ...

Spoiler

Script is <span id="logScriptUpdateCheck"></span>
<script>
// Siehe https://forum.iobroker.net/topic/29851/socket-io-state-lesen-und-setzen/
let objID = '0_userdata.0.Log-Scriptalpha.All.lastTimeUpdated';
servConn.getStates(objID, (error, states) => {
let stateValue = states[objID].val;
let result;
if( (parseInt(stateValue)+30000) > Date.now() ) {
result = '<span >✅</span>'
} else {
result = '<span >❌</span>'
}
document.getElementById('logScriptUpdateCheck').innerHTML = result;
});
</script>

[Mic]

@GiuseppeS sagte in [Tipp] In HTML-Widget States verarbeiten/anzeigen:

@Mic
Hinweis:
Apollon77 hatte in deinem verlinkten Thread folgendes gepostet:

getState liefert den Wert des States. GetObject liefert das Objekt. Und bei getState ist es state.val (wenn state die Variable des response callbacks ist)

Du benutzt in deinem Beispiel oben getStates und greifst im Nachgang auf das eigentliche Objekt des json mit [objID] zu. Dürfte einfacher sein, wenn getState genutzt wird. Habe es selbst nie getestet, da ich nie states auslese.

Danke für den Hinweis. Ich hatte kurz getState() getestet, aber hatte nicht funktioniert bei mir, daher blieb ich bei getObject.

@Glasfaser sagte in [Tipp] In HTML-Widget States verarbeiten/anzeigen:

oder mit Emoji den Zustand anzeigen ...

Auch schön.

[GiuseppeS]

@Mic
Vielleicht würde es so auch funktionieren...

servConn.getStates(objID, (error, states) => {
        let stateValue = states[objID].val;

// evtl so funktioniert es auch

servConn.getState(objID, (error, state) => {
        let stateValue = state.val;

[Mic]

@GiuseppeS sagte in [Tipp] In HTML-Widget States verarbeiten/anzeigen:

@Mic
Vielleicht würde es so auch funktionieren...

Geht leider nicht, Widget bleibt dann komplett leer.

[Glasfaser]

@Mic

Wollte nur mal erwähnen , habe mir letztens ein Wolf gesucht !

Hat ein Nachteil , sperrt die Funktion "View export" im Vis Editor .

[Mic]

@Glasfaser sagte in [Tipp] In HTML-Widget States verarbeiten/anzeigen:

Wollte nur mal erwähnen , habe mir letztens ein Wolf gesucht !

So gings mir auch

Hat ein Nachteil , sperrt die Funktion "View export" im Vis Editor .

Grad getestet, das ist bei mir leider auch so. Du hast ja hier auch gepostet, wo ein Widget-JS die Export-Funktion sperrt: https://forum.iobroker.net/post/433242
Vielleicht machst du am besten im VIS-Adapter ein Issue auf? Danke.

[Glasfaser]

@Mic

Ist mir letztens aufgefallen , da ich mein View auf Logparser komplett umgestellt habe .

( Ja ... ich habe es jetzt komplett umgestellt )

[Förster]

@Mic
Hallo Mic, könntest du erläutern, wie das mit dem Umwandeln in "heute, um 20:15 Uhr" funktioniert ?

Ich weiß, es passt nicht ganz zum eigentlichen Thema ... aber genau diese Funktion suche ich schon länger, habe aber bisher nichts dazu gefunden

[Mic]

@Förster sagte in [Tipp] In HTML-Widget States verarbeiten/anzeigen:

Ich weiß, es passt nicht ganz zum eigentlichen Thema ... aber genau diese Funktion suche ich schon länger, habe aber bisher nichts dazu gefunden

Passt nun wirklich gar nicht hier rein Daher nur kurze Antwort: Umsetzung kannst du dir im Adapter-Code ansehen:
https://github.com/Mic-M/ioBroker.logparser/blob/master/lib/mic-functions.js#L104
Zu weiteren Fragen machst du am besten separaten Thread auf mit genauer Beschreibung, Use Case, usw.