Neuer ioBroker-Blog online: Monatsrückblick März/April 2026

[ice987]

Hallo zusammen,

aktuell setzte ich das Widget "materialdesign - Icon List" ein um Farben in einer Tabelle wählen zu können. Jede Farbe darf nur einmal vorkommen, d.h. wenn ein Button gedrückt wird (true) sollen alle anderen Farben (Button) auf "false" springen:

Widget-Export

Spoiler

[{"tpl":"tplVis-materialdesign-Icon-List","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"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","wrapItems":"true","vibrateOnMobilDevices":"","listLayout":"standard","itemLayout":"vertical","buttonLayout":"full","listItemDataMethod":"inputPerEditor","countListItems":"3","listType0":"buttonToggle","showValueLabel0":false,"listType1":"buttonToggle","showValueLabel1":false,"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,"maxItemsperRow":"5","itemGaps":"2","labelFontSize":"10","labelFontFamily":"Arial, Helvetica, sans-serif","labelFontColor":"#ffffff","g_listItemCardBackground":false,"titleLayout":"headline6","g_lock":false,"autoLockAfter":"10","lockIconTop":"5","lockIconLeft":"5","lockFilterGrayscale":"30","lockApplyOnlyOnImage":"true","listType2":"text","showValueLabel2":"true","listType3":"text","showValueLabel3":false,"oid0":"0_userdate.0.farbe.gelb","typeButtonToggleValueTrue0":"true","typeButtonToggleValueFalse0":"false","itemBackgroundColor0":"#f59c00","label0":"gelb","listImage0":"check","listImageColor0":"#f59c00","listImageActive0":"check","listImageActiveColor0":"#ff0000","oid1":"0_userdate.0.farbe.orange","typeButtonToggleValueTrue1":"true","typeButtonToggleValueFalse1":"false","label1":"orange","listImage1":"check","listImageActive1":"check","listImageActiveColor1":"#ff0000","listImageActive2":"check","listImageActiveColor2":"#ff0000","typeButtonToggleValueTrue2":"true","typeButtonToggleValueFalse2":"false","label2":"pink","listImageActive3":"check","listImageActiveColor3":"#ff0000","typeButtonToggleValueTrue3":"true","typeButtonToggleValueFalse3":"false","buttonBgColor1":"","listImageColor1":"#ff6600","itemBackgroundColor1":"#ff6600","itemBackgroundColor2":"#e4a7a6","listImageColor2":"#e4a7a6","listImage2":"check","itemBackgroundColor3":"#03933e","label3":"grün","listImage3":"check","listImageColor3":"#03933e","oid2":"0_userdate.0.farbe.pink","oid3":"0_userdate.0.farbe.gruen"},"style":{"left":"52px","top":"341px","width":"275px","height":"55px","z-index":"1"},"widgetSet":"materialdesign"}]

als JS-Script habe ich das nun bisher sehr umständlich umgesetzt:

Spoiler

on({id: "0_userdata.0.farbe.gelb", val: true}, function (obj) {
    setState("0_userdata.0.farbe.orange", false);
    setState("0_userdata.0.farbe.pink", false);
    setState("0_userdata.0.farbe.gruen", false);
});

on({id: "0_userdata.0.farbe.orange", val: true}, function (obj) {
    setState("0_userdata.0.farbe.gelb", false);
    setState("0_userdata.0.farbe.pink", false);
    setState("0_userdata.0.farbe.gruen", false);
});

on({id: "0_userdata.0.farbe.pink", val: true}, function (obj) {
    setState("0_userdata.0.farbe.gelb", false);
    setState("0_userdata.0.farbe.orange", false);
    setState("0_userdata.0.farbe.gruen", false);
});

on({id: "0_userdata.0.farbe.gruen", val: true}, function (obj) {
    setState("0_userdata.0.farbe.gelb", false);
    setState("0_userdata.0.farbe.orange", false);
    setState("0_userdata.0.farbe.pink", false);
});

welches ist die eleganteste Lösung um dies einfacher zu gestalten? Evtl. hat jemand einen guten Input/Denkanstoss?

[Asgothian]

@ice987

Zumindest ein Denkanstoß, mehr ggf. Später, bin gerade unterwegs.

Ein Array mit allen gewünschten Datenpunkten definieren.
Ein trigger auf alle dp‘s, mit change:“gt“ um nur den Wechsel false->true zu fangen.

In der Funktion durch das Array durch gehen. Wenn Eintrag gleich dem Objekt welches den trigger ausgelöst hat nix tun, sonst value auf True setzen.

[paul53]

@Asgothian sagte:

In der Funktion durch das Array durch gehen. Wenn Eintrag gleich dem Objekt welches den trigger ausgelöst hat nix tun, sonst

Etwa so:

const ids = [
    "0_userdata.0.farbe.gelb",
    "0_userdata.0.farbe.orange",
    "0_userdata.0.farbe.pink",
    "0_userdata.0.farbe.gruen"
];

on({id: ids, change: 'gt'}, function (dp) {
    for(let i = 0; i < ids.length; i++) {
        if(dp.id != ids[i]) setState(ids[i], false, true);
    }
});

[Asgothian]

@paul53 sagte in mehrere DP toggeln:

Etwa so:

genau so. Danke @paul53

A.

[ice987]

@paul53
@Asgothian

Vielen Dank für eure Unterstützung!

zu meinem Verständnis (kopieren kann ja jeder):
Es wird ein Array generiert mit dem Namen ids, welches alle DP's beinhaltet. Der Inhalt dieses Arrays dient als Wert für den Trigger. Change: 'gt' (gem. Definition: "(greater) New value must be greater than old value (state.val > oldState.val)"): ist somit "true" grösser als "false". Der auslösende DP wird der Funktion mit "dp" übergeben. In der Schlaufe "for" wird bei jedem Element des Arrays geprüft ob der Arrayeintrag dem Auslöser entspricht. Wenn nein dann "setState vom jeweiligen Element auf "false" sonst "true".

[paul53]

@ice987 sagte:

Wenn nein dann "setState vom jeweiligen Element auf "false" sonst "true".

Richtig: Wenn nein dann "setState vom jeweiligen Element auf "false", der auslösende Datenpunkt bleibt "true" (wird nicht verändert).
Ansonsten alles richtig interpretiert.