@danny_v1
puh das ist aber viel verstreuter Code und sicher noch nicht fehlerfrei. Ich versuch mal zumindest den NSPanel teil zu erklären und poste.

Also damit die Liste aufgeht habe ich einen passenden Button Channel in den Objekten unter userdata angelegt:

let mainConfig =  <PageGrid>
{
    'type': 'cardGrid',
    'heading': 'Einstellungen',
    'useColor': true,
    'items': [
        <PageItem>{ id: '0_userdata.0.NSPanel.1.warning.showAlertInfo', icon: 'alert', name: 'Warnings', offColor: Yellow, onColor: Yellow},
}

Ich triggere einfach auf das umschalten und zeige anschließen das Notify an. Die Daten sind in mehrere Listen von den jeweiligen Überwachungsscripten aufgeteilt. Und jede liste ist als JSON in einem State der ebenfalls unter userdata gespeichert ist abgelegt. Bei jeder Änderung einer dieser Listen sammle ich alle daten ein sortiere Sie und aktualisiere die Anzeige. Das mach folgender code:

// warn system
createState(NSPanel_Path + 'warning.cnt');
createState(NSPanel_Path + 'warning.aktiv');

let warnPageNo;
let warnPageCnt;
let warnSubscribeHandler;
let warningList :warningItem[];
let warnItemsPerPage = 4;

let warningListIds = [
    {id: '0_userdata.0.sensorSuperVisor.missingSensors', icon: 'connection', prefix: 'Verloren: ', postfix: ' vor '},
    {id: '0_userdata.0.batteryMonitor.batterLow', icon: 'battery-alert-variant-outline', prefix: 'Batterie schwach: ', postfix: ' vor '}
]
function updateWarnings(aObj: iobJS.ChangedStateObject<any,any>)
{
    warningList = [];

    warningListIds.forEach(listEle => {
        JSON.parse(getState(listEle.id).val).forEach((e :warningItem) => {
            e.source = listEle.id; warningList.push(e);
        });
    });

    console.log(JSON.stringify(warningListIds));
    console.log(JSON.stringify(warningList));

    let listLen = warningList.length;

    warningList.sort((a, b) => a.time - b.time);

    warnPageCnt = (listLen == 0) ? 1 : ((listLen + warnItemsPerPage-1) / warnItemsPerPage | 0);

    console.log('warnPageCnt: ' + warnPageCnt + ', listLen: ' + listLen);

    setState(NSPanel_Path + 'warning.cnt', warningList.length);
    setState(NSPanel_Path + 'warning.aktiv', (warningList.length) > 0);
}
updateWarnings(null);
warningListIds.forEach(e => on({id: e.id, change: 'any'}, updateWarnings));

function showAlert(aObj: iobJS.ChangedStateObject<any,any>)
{
    warnPageNo = 0;
    console.log('show Alert: ' + aObj.state.val);

    warnSubscribeHandler = on({id: '0_userdata.0.NSPanel.1.popupNotify.popupNotifyAction', change: 'any'}, switchPage);
    showAlarmPage();

    if(Debug) {
        console.log('show Alarmpage');
    }
}

function switchPage(aObj: iobJS.ChangedStateObject<any,any>)
{
    if(aObj.state.val) {
        if(warningList.length != 0 && warnPageCnt != warnPageNo + 1) {
            warnPageNo = warnPageNo + 1;
        }
    }
    else
    {
        if(warnPageCnt != 0) {
            warnPageNo = warnPageNo - 1;
        }
    }
    showAlarmPage();

    if(Debug) {
        console.log('switch Alarmpage');
    }
}
on({id: '0_userdata.0.NSPanel.1.warning.showAlertInfo.SET', change: 'any'}, showAlert);

function showAlarmPage()
{
    let itemIndex = 0;
    let timeNow = Date.now();

    let popupText :string[] = [];

    if(warningList.length > 0)
    {
        for(let i = warnPageNo * warnItemsPerPage; i < (warnPageNo + 1)* warnItemsPerPage; i++) {
            if(i < warningList.length) {
                let deltaTime = (timeNow - warningList[i].time)/1000 | 0;
                let deltaTimeStr :string;

                if(deltaTime < 60) {
                    deltaTimeStr = deltaTime + 's';
                } else {
                    deltaTime = deltaTime/60 | 0;
                    if(deltaTime < 60) {
                        deltaTimeStr = deltaTime + 'm';
                    } else {
                        deltaTime = deltaTime/60 | 0;
                        if(deltaTime < 24) {
                            deltaTimeStr = deltaTime + 'h';
                        } else {
                            deltaTime = deltaTime/24 | 0;
                            deltaTimeStr = deltaTime + 'd';
                        }
                    }
                }

                let sourceList = warningListIds.find(e => e.id == warningList[i].source);

                popupText.push(Icons.GetIcon(sourceList.icon) + ' ' + sourceList.prefix + warningList[i].objId + sourceList.postfix + deltaTimeStr);
            }
        }
    }
    else
    {
        popupText.push('No Warnings');
    }

    setStateAsync(popupNotifyHeading, <iobJS.State>{ val: 'Warnungsliste (' + (warnPageNo + 1) + '/' + warnPageCnt + ')', ack: false });
    setStateAsync(popupNotifyHeadingColor, <iobJS.State>{ val: rgb_dec565(Yellow).toString(), ack: false });
    setStateAsync(popupNotifyButton1Text, <iobJS.State>{ val: warnPageNo != 0 ? 'up' : '', ack: false });
    setStateAsync(popupNotifyButton1TextColor, <iobJS.State>{ val: rgb_dec565(White).toString(), ack: false });
    setStateAsync(popupNotifyButton2Text, <iobJS.State>{ val: (warnPageNo + 1) != warnPageCnt ? 'down' : '', ack: false });
    setStateAsync(popupNotifyButton2TextColor, <iobJS.State>{ val: rgb_dec565(White).toString(), ack: false });
    setStateAsync(popupNotifySleepTimeout, <iobJS.State>{ val: getState('0_userdata.0.NSPanel.1.Config.Screensaver.timeoutScreensaver').val, ack: false });
    setStateAsync(popupNotifyInternalName, <iobJS.State>{ val: '', ack: false });
    setStateAsync(popupNotifyLayout, <iobJS.State>{ val: 1, ack: false });
    setStateAsync(popupNotifyFontIdText, <iobJS.State>{ val: 1, ack: false });
    setStateAsync(popupNotifyText, <iobJS.State>{ val: popupText.join('\r\n\r\n'), ack: false });
}

type warningItem = {
    objId: string,
    time: number,
    source: (string | undefined)
};

@TT-Tom
Danke das war genau der hinweis den ich gebraucht habe.

@armilar said in SONOFF NSPanel mit Lovelace UI:

@bergi84

Wenn ich ein Notify Popup verwende, wie bekomme ich mit das der Nutzer auf das schließen X in der rechten oberen Ecke gedrückt hat oder der timeout abgelaufen ist. Für die unteren zwei Buttons kann ich ja auf den State "popupNotify.popupNotifyAction" triggern. Das Problem ist ja das mein Trigger scharf bleibt und wenn zufällig ein anderes Notify Popup reinspringt dann passiert irgend was.

weil die HMI bei dem "x" ein bExit sendet und bei den beiden Buttons ein Event mit b1 oder b2, welches ausgewertet werden kann:

Somit wird nicht explizit ein "false" gesendet, wenn das "x" gedrückt wird. Das popUp wird durch die HMI beendet.

Das meine ich ja. Wenn ich das Popup verwende bekomme ich eben nicht mit das es geschlossen wurde. Und das ist ungünstig da ja mein Subscribe auf ACTION auch nicht gelöscht wird und sobald ein anderes Popup wie zB Tasmota update hinein springt und ich dort auf Ja drücke wird auch das andere Script fälschlicherweise getriggert. Ich glaube es wäre besser das über ACTION als String die Werte 'true', 'false', 'exit' und 'timeout' kommuniziert werden. Mir ist natürlich klar das dass nicht einfach ist weil es inkompatibel ist.

Warum kann man nur dann die Schriftart des Textes im Popup ändern wenn man auf Layout 2 umschaltet? Das funktioniert mit dem Standard Layout prinzipiell auch und die Standard Schriftart des Popups ist arg klein und ich kann keine Icons im Text verwenden.

Weil die HMI vor einiger Zeit bereits eine neue zusätzliche Version des popupNotify bekam. Sollte eigentlich die alte ablösen. Wir wollten die alte Version jedoch weiter benutzen (wird aber nicht mehr weiterentwickelt) und haben die daher Layout 1und 2 genannt. In der älteren Version berücksichtigt die Nextion HMI keine Schriftarten...

Ich möchte kurz erklären für was ich das verwende. Ich hab mir im ioBroker ein Warningsystem geschrieben das unter anderem überwacht ob alle nötigen Sensoren verfügbar sind und ob der Batteriestand bei batteriebetriebenen Geräten über einen gewissen Grenzwert ist. Alle Warnung werden in einer Liste gesammelt. Da es in der NSPanel UI keine geeignete Page für sowas gibt verwende ich das Layout 1 des Notify Popups. Ich zeige pro Seite 3 Warnungen an und verwende eben auch Symbole damit es auf einen Blick erkennbar ist, was das Problem ist gefolgt von dem überwachten State. Wenn es mehr als 3 Warnungen gibt nutze ich die unteren zwei Tasten zum blättern. Damit die Symbole angezeigt werden muss entsprechend die richtige Schriftart gewählt werden. Die aktuelle Firmware des Nextion Displays entscheidet anhand der Anwesenheit des ICON ob es Layout 1 oder Layout 2 verwendet. Die gewählte Schriftart wird auf beide Layouts angewendet. Das hab ich auch schon ausprobiert in dem ich die Variabel v_popupNotifyFontIdText inde folgendem Codeabschnitt vor das If gezogen habe.

            notification = 'entityUpdateDetail' + '~'
                + getState(popupNotifyInternalName).val + '~'
                + getState(popupNotifyHeading).val + '~'
                + v_popupNotifyHeadingColor + '~'
                + getState(popupNotifyButton1Text).val + '~'
                + v_popupNotifyButton1TextColor + '~'
                + getState(popupNotifyButton2Text).val + '~'
                + v_popupNotifyButton2TextColor + '~'
                + getState(popupNotifyText).val + '~'
                + v_popupNotifyTextColor + '~'
                + getState(popupNotifySleepTimeout).val;

            if (getState(popupNotifyLayout).val == 2) {
                notification = notification + '~'
                + v_popupNotifyFontIdText + '~'
                + Icons.GetIcon(v_popupNotifyIcon) + '~'
                + v_popupNotifyIconColor;
            }

@Bergi84

kam keine Antwort mehr...

Ich habe die Änderungen in die v4.3.1.6 gesetzt...

Wer die Funktionalität der erweiterten Alias-Gerätetypen in der Navi verwenden möchte, kann den unteren Teil des NSPanelTs.ts austauschen.

Siehe Post von @Bergi84

@all
Übrigens hab ich gleich auch noch einen Verbesserungswunsch den ich hier zur Diskussion stellen wollte. Und zwar geht es darum dass ich gerne hätte wenn ich zB auf auf einer GridPage auf die Temperatur vom zB. Wohnzimmer drücke dass sich dann eine subPage öffnet. Durch hinzufügen entsprechenden cases in der Funktion CreateEntity in der switch abfrage für die dynamischen navi icons hab ich das mal ausprobiert und in meinem Fall funktioniert das.

geänderte Config damit es auch funktioniert:

let NSPanel_Temp = <PageGrid>
{
    'type': 'cardGrid',
    'heading': 'Temperaturen',
    'useColor': true,
    'items': [
        <PageItem>{ navigate: true, targetPage: 'NSPanel_TestSub', id: 'alias.0.devices.TempSchlafzimmer', unit: '°C', name: 'Schlafzimmer', offColor: MSRed, onColor: MSGreen, useValue: true, colorScale: {'val_min': 20, 'val_max': 25, 'val_best': 23} },
    ]
};

Ansonsten hat das Update keine Auswirkungen auf bisherige Funktionalität...

Sorry das ich nicht geantwortet habe. Mir fehlt leider ein wenig die zeit mich um das regelmäßig zu kümmern. Verzeihung.

Danke für die Änderung, Somit kann ich das Script ohne Modifikation einsetzen.

Ich habe diese Wochenende wieder ein wenig an meinem Script gebastelt und dabei sind zwei Fragen aufgekommen:

1. Wenn ich ein Notify Popup verwende, wie bekomme ich mit das der Nutzer auf das schließen X in der rechten oberen Ecke gedrückt hat oder der timeout abgelaufen ist. Für die unteren zwei Buttons kann ich ja auf den State "popupNotify.popupNotifyAction" triggern. Das Problem ist ja das mein Trigger scharf bleibt und wenn zufällig ein anderes Notify Popup reinspringt dann passiert irgend was.

2. Warum kann man nur dann die Schriftart des Textes im Popup ändern wenn man auf Layout 2 umschaltet? Das funktioniert mit dem Standard Layout prinzipiell auch und die Standard Schriftart des Popups ist arg klein und ich kann keine Icons im Text verwenden.

Na bevor man daraus einen Pull Request macht sollte sich das wer ansehen der sich auskennt. Daher hier mal die Funktion:

function CreateEntity(pageItem: PageItem, placeId: number, useColors: boolean = false): string {
    try {
        let iconId = '0';
        let iconId2 = '0';
        if (pageItem.id == 'delete') {
            return '~delete~~~~~';
        }

        let name: string;
        let buttonText: string = 'PRESS';
        let type: string;

        // ioBroker
        if (existsObject(pageItem.id) || pageItem.navigate === true) {

            let iconColor = rgb_dec565(config.defaultColor);
            let optVal = '0';
            let val = null;

            let o:any
            if (pageItem.id != null && existsObject(pageItem.id)) {
                o = getObject(pageItem.id);
            } 

            // Fallback if no name is given
            name = pageItem.name !== undefined ? pageItem.name : o.common.name.de;
            let prefix = pageItem.prefixName !== undefined ? pageItem.prefixName : '';
            let suffix = pageItem.suffixName !== undefined ? pageItem.suffixName : '';

            // If name is used with changing values
            if (name.indexOf('getState(') != -1) {
                let dpName: string = name.slice(10, name.length -6);
                name = getState(dpName).val;
                RegisterEntityWatcher(dpName);
            }
            name = prefix + name + suffix;

            if (existsState(pageItem.id + '.GET')) {
                val = getState(pageItem.id + '.GET').val;
                RegisterEntityWatcher(pageItem.id + '.GET');
            }
            if(pageItem.monobutton != undefined && pageItem.monobutton == true){
                if (existsState(pageItem.id + '.ACTUAL')) {
                    val = getState(pageItem.id + '.ACTUAL').val;
                    RegisterEntityWatcher(pageItem.id + '.ACTUAL');
                }
            } else {
                if (existsState(pageItem.id + '.ACTUAL')) {
                    val = getState(pageItem.id + '.ACTUAL').val;
                    RegisterEntityWatcher(pageItem.id + '.ACTUAL');
                }
                if (existsState(pageItem.id + '.SET')) {
                    val = getState(pageItem.id + '.SET').val;
                    RegisterEntityWatcher(pageItem.id + '.SET');
                }
            }
            if (existsState(pageItem.id + '.ON_ACTUAL')) {
                val = getState(pageItem.id + '.ON_ACTUAL').val;
                RegisterEntityWatcher(pageItem.id + '.ON_ACTUAL');
            } 
            if (existsState(pageItem.id + '.ON_SET')) {
                val = getState(pageItem.id + '.ON_SET').val;
                RegisterEntityWatcher(pageItem.id + '.ON_SET');
            }
            if (existsState(pageItem.id + '.ON')) {
                val = getState(pageItem.id + '.ON').val;
                RegisterEntityWatcher(pageItem.id + '.ON');
            }
            
            if (pageItem.navigate) {

                if (pageItem.id == null && pageItem.targetPage != undefined) {
                    buttonText = pageItem.buttonText !== undefined ? pageItem.buttonText : 'PRESS';
                    type = 'button';
                    iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('gesture-tap-button');
                    iconColor = GetIconColor(pageItem, true, useColors);

                    if (Debug) console.log('CreateEntity statisch Icon Navi  ~' + type + '~' + 'navigate.' + pageItem.targetPage + '~' + iconId + '~' + iconColor + '~' + pageItem.name + '~' + buttonText)
                    return '~' + type + '~' + 'navigate.' + pageItem.targetPage + '~' + iconId + '~' + iconColor + '~' + pageItem.name + '~' + buttonText;

                } else if (pageItem.id != null && pageItem.targetPage != undefined) {

                    type = 'button';

                    switch (o.common.role) {
                        case 'socket':
                        case 'light':
                            iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : o.common.role == 'socket' ? Icons.GetIcon('power-socket-de') : Icons.GetIcon('lightbulb');
                            iconId2 = pageItem.icon2 !== undefined ? Icons.GetIcon(pageItem.icon2) : iconId;

                            buttonText = pageItem.buttonText !== undefined ? pageItem.buttonText : existsState(pageItem.id + '.BUTTONTEXT') ? getState(pageItem.id + '.BUTTONTEXT').val : 'PRESS';
                            if (existsState(pageItem.id + '.COLORDEC')) {
                                iconColor = getState(pageItem.id + '.COLORDEC').val;
                            } else {
                                if (val === true || val === 'true') {
                                    iconColor = GetIconColor(pageItem, false, useColors);
                                } else {
                                    iconColor = GetIconColor(pageItem, true, useColors);
                                }
                            }
                            if (val === true || val === 'true') { iconId = iconId2 };
                            break;

                        case 'blind':
                            iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('window-open');
                            iconColor = existsState(pageItem.id + '.COLORDEC') ? getState(pageItem.id + '.COLORDEC').val : GetIconColor(pageItem, existsState(pageItem.id + '.ACTUAL') ? getState(pageItem.id + '.ACTUAL').val : true, useColors);
                            buttonText = pageItem.buttonText !== undefined ? pageItem.buttonText : existsState(pageItem.id + '.BUTTONTEXT') ? getState(pageItem.id + '.BUTTONTEXT').val : 'PRESS';
                            break;

                        case 'door':
                        case 'window':
                            iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : o.common.role == 'door' ? Icons.GetIcon('door-open') : Icons.GetIcon('window-open-variant');
                            iconId2 = pageItem.icon2 !== undefined ? Icons.GetIcon(pageItem.icon2) : o.common.role == 'door' ? Icons.GetIcon('door-closed') : Icons.GetIcon('window-closed-variant');

                            buttonText = pageItem.buttonText !== undefined ? pageItem.buttonText : existsState(pageItem.id + '.BUTTONTEXT') ? getState(pageItem.id + '.BUTTONTEXT').val : 'PRESS';
                            if (existsState(pageItem.id + '.COLORDEC')) {
                                iconColor = getState(pageItem.id + '.COLORDEC').val;
                            } else {
                                if (val === true || val === 'true') {
                                    iconColor = GetIconColor(pageItem, false, useColors);
                                } else {
                                    iconColor = GetIconColor(pageItem, true, useColors);
                                }
                            }
                            if (val === true || val === 'true') { iconId = iconId2 };                       
                            break;

                        case 'info':
                            iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('gesture-tap-button');
                            iconId2 = pageItem.icon2 !== undefined ? Icons.GetIcon(pageItem.icon2) : iconId;

                            buttonText = pageItem.buttonText !== undefined ? pageItem.buttonText : existsState(pageItem.id + '.BUTTONTEXT') ? getState(pageItem.id + '.BUTTONTEXT').val : 'PRESS';
                            if (existsState(pageItem.id + '.COLORDEC')) {
                                iconColor = getState(pageItem.id + '.COLORDEC').val;
                            } else {
                                if (val === true || val === 'true') {
                                    iconColor = GetIconColor(pageItem, false, useColors);
                                } else {
                                    iconColor = GetIconColor(pageItem, true, useColors);
                                }
                            }
                            if (val === true || val === 'true') { iconId = iconId2 };
                            break;

                        case 'humidity':

                        case 'temperature':

                        case 'value.temperature':

                        case 'value.humidity':

                        case 'sensor.door':

                        case 'sensor.window':

                        case 'thermostat':
                            type = 'text';

                            iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : o.common.role == 'value.temperature' || o.common.role == 'thermostat' ? Icons.GetIcon('thermometer') : Icons.GetIcon('information-outline');
            
                            let unit = '';
                            optVal = '0';

                            if (existsState(pageItem.id + '.ON_ACTUAL')) {
                                optVal = getState(pageItem.id + '.ON_ACTUAL').val;
                                unit = pageItem.unit !== undefined ? pageItem.unit : GetUnitOfMeasurement(pageItem.id + '.ON_ACTUAL');
                            } else if (existsState(pageItem.id + '.ACTUAL')) {
                                optVal = getState(pageItem.id + '.ACTUAL').val;
                                unit = pageItem.unit !== undefined ? pageItem.unit : GetUnitOfMeasurement(pageItem.id + '.ACTUAL');
                            } 
                            
                            if (o.common.role == 'value.temperature') {
                                iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('thermometer');
                            }
                            
                            iconColor = GetIconColor(pageItem, parseInt(optVal), useColors);

                            if (pageItem.colorScale != undefined) {
                                let iconvalmin = (pageItem.colorScale.val_min != undefined) ? pageItem.colorScale.val_min : 0 ;
                                let iconvalmax = (pageItem.colorScale.val_max != undefined) ? pageItem.colorScale.val_max : 100 ;
                                let iconvalbest = (pageItem.colorScale.val_best != undefined) ? pageItem.colorScale.val_best : iconvalmin ;
                                let valueScale = val;

                                if (iconvalmin == 0 && iconvalmax == 1) {
                                    iconColor = (getState(pageItem.id).val == 1) ? rgb_dec565(colorScale0) : rgb_dec565(colorScale10);
                                } else {
                                    if (iconvalbest == iconvalmin) {
                                        valueScale = scale(valueScale,iconvalmin, iconvalmax, 10, 0);
                                    } else {
                                        if (valueScale < iconvalbest) {
                                            valueScale = scale(valueScale,iconvalmin, iconvalbest, 0, 10);
                                        } else if (valueScale > iconvalbest || iconvalbest != iconvalmin) {
                                            valueScale = scale(valueScale,iconvalbest, iconvalmax, 10, 0);
                                        } else {
                                            valueScale = scale(valueScale,iconvalmin, iconvalmax, 10, 0);
                                        }
                                    }
                                    let valueScaletemp = (Math.round(valueScale)).toFixed();
                                    iconColor = HandleColorScale(valueScaletemp);
                                }
                            }

                            if (existsState(pageItem.id + '.USERICON')) {
                                iconId = Icons.GetIcon(getState(pageItem.id + '.USERICON').val);
                                if (Debug) console.log('iconid von ' + pageItem.id + '.USERICON: ' + getState(pageItem.id + '.USERICON').val);
                                RegisterEntityWatcher(pageItem.id + '.USERICON');
                            }

                            if (pageItem.useValue) {
                                if (pageItem.fontSize != undefined) {
                                    iconId = optVal + '¬' + pageItem.fontSize; 
                                } else {
                                    iconId = optVal; 
                                }
                            }

                            if (Debug) console.log('CreateEntity Icon role info, humidity, temperature, value.temperature, value.humidity, sensor.door, sensor.window, thermostat');
                            if (Debug) console.log('CreateEntity  ~' + type + 'navigate.' + pageItem.targetPage + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal + ' ' + unit);
                            return '~' + type + '~' + 'navigate.' + pageItem.targetPage + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal + ' ' + unit;

                        case 'warning':
                            iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('gesture-tap-button');
                            iconColor = pageItem.onColor !== undefined ? GetIconColor(pageItem, true, useColors) : getState(pageItem.id + '.LEVEL').val;
                            name = pageItem.name !== undefined ? pageItem.name : getState(pageItem.id + '.INFO').val;
                            break;

                        default:
                            buttonText = pageItem.buttonText !== undefined ? pageItem.buttonText : existsState(pageItem.id + '.BUTTONTEXT') ? getState(pageItem.id + '.BUTTONTEXT').val : 'PRESS';
                            iconColor = pageItem.onColor !== undefined ? GetIconColor(pageItem, true, useColors) : existsState(pageItem.id + '.COLORDEC') ? getState(pageItem.id + '.COLORDEC').val : 65535;
                            iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('gesture-tap-button');
                            break;
                        //      return '~delete~~~~~';
                    }

                    if (Debug) console.log('CreateEntity Dynamische Icon Navi  ~' + type + '~' + 'navigate.' + pageItem.targetPage + '~' + iconId + '~' + iconColor + '~' + name + '~' + buttonText)
                    return '~' + type + '~' + 'navigate.' + pageItem.targetPage + '~' + iconId + '~' + iconColor + '~' + name + '~' + buttonText;

                } else {
                    type = 'button';
                    iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('gesture-tap-button');
                    iconColor = GetIconColor(pageItem, true, useColors);
                    buttonText = pageItem.buttonText !== undefined ? pageItem.buttonText : 'PRESS';

                    if (Debug) console.log('CreateEntity Standard ~' + type + '~' + 'navigate.' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + buttonText)
                    return '~' + type + '~' + 'navigate.' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + buttonText;
                }
            }
 
            switch (o.common.role) {
                case 'socket':
                case 'light':
                    type = 'light';
                    iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : o.common.role == 'socket' ? Icons.GetIcon('power-socket-de') : Icons.GetIcon('lightbulb');
                    iconId2 = pageItem.icon2 !== undefined ? Icons.GetIcon(pageItem.icon2) : o.common.role == 'socket' ? Icons.GetIcon('power-socket-de') : Icons.GetIcon('lightbulb');
                    optVal = '0';

                    if (val === true || val === 'true') {
                        optVal = '1';
                        iconColor = GetIconColor(pageItem, true, useColors);
                    } else {
                        iconColor = GetIconColor(pageItem, false, useColors);
                        if (pageItem.icon !== undefined) {
                            if (pageItem.icon2 !== undefined) {
                                iconId = iconId2;
                            }
                        }
                    }
                    
                    if (Debug) console.log('CreateEntity Icon role socket/light ~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal);
                    return '~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal;

                case 'hue':
                    type = 'light';
                    iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('lightbulb');
                    optVal = '0';

                    if (val === true || val === 'true') {
                        optVal = '1';
                        iconColor = GetIconColor(pageItem, existsState(pageItem.id + '.DIMMER') ? getState(pageItem.id + '.DIMMER').val : true, useColors);
                    } else {
                        iconColor = GetIconColor(pageItem, false, useColors);
                        if (pageItem.icon !== undefined) {
                            if (pageItem.icon2 !== undefined) {
                                iconId = iconId2;
                            }
                        }
                    }

                    if (pageItem.interpolateColor != undefined && pageItem.interpolateColor == true && val) {
                        if (existsState(pageItem.id + '.HUE')) {
                            if (getState(pageItem.id + '.HUE').val != null) {
                                let huecolor = hsv2rgb(getState(pageItem.id + '.HUE').val, 1, 1);
                                let rgb = <RGB>{ red: Math.round(huecolor[0]), green: Math.round(huecolor[1]), blue: Math.round(huecolor[2]) };
                                iconColor = rgb_dec565(pageItem.interpolateColor !== undefined ? rgb : config.defaultOnColor);
                            }
                        }
                    }

                    if (Debug) console.log('CreateEntity Icon role hue ~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal);
                    return '~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal;

                case 'ct':
                    type = 'light';
                    iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('lightbulb');
                    optVal = '0';

                    if (val === true || val === 'true') {
                        optVal = '1';
                        iconColor = GetIconColor(pageItem, existsState(pageItem.id + '.DIMMER') ? getState(pageItem.id + '.DIMMER').val : true, useColors);
                    } else {
                        iconColor = GetIconColor(pageItem, false, useColors);
                        if (pageItem.icon !== undefined) {
                            if (pageItem.icon2 !== undefined) {
                                iconId = iconId2;
                            }
                        }
                    }

                    if (Debug) console.log('CreateEntity Icon role ct ~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal);
                    return '~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal;

                case 'rgb':
                    type = 'light';
                    iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('lightbulb');
                    optVal = '0';

                    if (val === true || val === 'true') {
                        optVal = '1';
                        iconColor = GetIconColor(pageItem, existsState(pageItem.id + '.DIMMER') ? getState(pageItem.id + '.DIMMER').val : true, useColors);
                    } else {
                        iconColor = GetIconColor(pageItem, false, useColors);
                        if (pageItem.icon !== undefined) {
                            if (pageItem.icon2 !== undefined) {
                                iconId = iconId2;
                            }
                        }
                    }

                    if (existsState(pageItem.id + '.RED') && existsState(pageItem.id + '.GREEN') && existsState(pageItem.id + '.BLUE') && val) {
                        if (getState(pageItem.id + '.RED').val != null && getState(pageItem.id + '.GREEN').val != null && getState(pageItem.id + '.BLUE').val != null) {
                            let rgbRed = getState(pageItem.id + '.RED').val;
                            let rgbGreen = getState(pageItem.id + '.GREEN').val;
                            let rgbBlue = getState(pageItem.id + '.BLUE').val;
                            let rgb = <RGB>{ red: Math.round(rgbRed), green: Math.round(rgbGreen), blue: Math.round(rgbBlue) };
                            iconColor = rgb_dec565(pageItem.interpolateColor !== undefined ? rgb : config.defaultOnColor);
                        }
                    } 

                    if (Debug) console.log('CreateEntity Icon role rgb ~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal);
                    return '~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal;

                case 'cie':
                case 'rgbSingle':
                    type = 'light';
                    iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('lightbulb');
                    optVal = '0';

                    if (val === true || val === 'true') {
                        optVal = '1'
                        iconColor = GetIconColor(pageItem, existsState(pageItem.id + '.DIMMER') ? getState(pageItem.id + '.DIMMER').val : true, useColors);
                    } else {
                        iconColor = GetIconColor(pageItem, false, useColors);
                        if (pageItem.icon !== undefined) {
                            if (pageItem.icon2 !== undefined) {
                                iconId = iconId2;
                            }
                        }
                    }

                    if (existsState(pageItem.id + '.RGB') && val) {
                        if (getState(pageItem.id + '.RGB').val != null) {
                            let hex = getState(pageItem.id + '.RGB').val;
                            let hexRed = parseInt(hex[1] + hex[2], 16);
                            let hexGreen = parseInt(hex[3] + hex[4], 16);
                            let hexBlue = parseInt(hex[5] + hex[6], 16);
                            let rgb = <RGB>{ red: Math.round(hexRed), green: Math.round(hexGreen), blue: Math.round(hexBlue) };
                            iconColor = rgb_dec565(pageItem.interpolateColor !== undefined ? rgb : config.defaultOnColor);
                        }
                    } 

                    if (Debug) console.log('CreateEntity Icon role cie/rgbSingle ~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal);
                    return '~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal;

                case 'dimmer':
                    type = 'light';
                    iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('lightbulb');
                    optVal = '0';

                    if (val === true || val === 'true') {
                        optVal = '1';
                        iconColor = GetIconColor(pageItem, existsState(pageItem.id + '.ACTUAL') ? getState(pageItem.id + '.ACTUAL').val : true, useColors);
                    } else {
                        iconColor = GetIconColor(pageItem, false, useColors);
                        if (pageItem.icon !== undefined) {
                            if (pageItem.icon2 !== undefined) {
                                iconId = iconId2;
                            }
                        }
                    }

                    if (Debug) console.log('CreateEntity Icon role dimmer ~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal);
                    return '~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal;

                case 'blind':
                    type = 'shutter';
                    iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('window-open');
                    iconColor = GetIconColor(pageItem, existsState(pageItem.id + '.ACTUAL') ? getState(pageItem.id + '.ACTUAL').val : true, useColors);

                    if (Debug) console.log('CreateEntity Icon role blind ~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~');
                    return '~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~';

                case 'gate':
                    type = 'text';
                    let gateState: string;
                    if (existsState(pageItem.id + '.ACTUAL')) {

                        if (getState(pageItem.id + '.ACTUAL').val == 0 || getState(pageItem.id + '.ACTUAL').val === false) {
                            iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('garage');
                            iconColor = GetIconColor(pageItem, false, useColors);
                            gateState = findLocale('window', 'closed');
                        } else {
                            iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('garage-open');
                            iconId = pageItem.icon2 !== undefined ? Icons.GetIcon(pageItem.icon2) : Icons.GetIcon('garage-open');
                            iconColor = GetIconColor(pageItem, true, useColors);
                            gateState = findLocale('window', 'opened');
                        }

                    }

                    if (Debug) console.log('CreateEntity Icon role gate ~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + gateState);
                    return '~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + gateState;

                case 'door':
                case 'window':
                    type = 'text';
                    let windowState;

                    if (existsState(pageItem.id + '.ACTUAL')) {
                        if (getState(pageItem.id + '.ACTUAL').val) {
                            iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : o.common.role == 'door' ? Icons.GetIcon('door-open') : Icons.GetIcon('window-open-variant');
                            iconColor = GetIconColor(pageItem, false, useColors);
                            windowState = findLocale('window', 'opened');
                        } else {
                            iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : o.common.role == 'door' ? Icons.GetIcon('door-closed') : Icons.GetIcon('window-closed-variant');
                            iconId = pageItem.icon2 !== undefined ? Icons.GetIcon(pageItem.icon2) : iconId;
                            iconColor = GetIconColor(pageItem, true, useColors);
                            windowState = findLocale('window', 'closed');
                        }
                    }

                    if (Debug) console.log('CreateEntity Icon role door/window ~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + windowState);
                    return '~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + windowState;

                case 'motion': 
                    type = 'text';
                    if (val === true) {
                        optVal = 'On';
                        iconColor = GetIconColor(pageItem, true, useColors);
                        iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('motion-sensor');
                    } else {
                        optVal = 'Off';
                        iconColor = GetIconColor(pageItem, false, useColors);
                        iconId = pageItem.icon2 !== undefined ? Icons.GetIcon(pageItem.icon2) : Icons.GetIcon('motion-sensor');
                    }

                    if (Debug) console.log('CreateEntity Icon role motion ~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal);
                    return '~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal;

                case 'info':

                case 'humidity':

                case 'temperature':

                case 'value.temperature':

                case 'value.humidity':

                case 'sensor.door':

                case 'sensor.window':

                case 'thermostat':
                    type = 'text';

                    iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : o.common.role == 'value.temperature' || o.common.role == 'thermostat' ? Icons.GetIcon('thermometer') : Icons.GetIcon('information-outline');
     
                    let unit = '';
                    optVal = '0';

                    if (existsState(pageItem.id + '.ON_ACTUAL')) {
                        optVal = getState(pageItem.id + '.ON_ACTUAL').val;
                        unit = pageItem.unit !== undefined ? pageItem.unit : GetUnitOfMeasurement(pageItem.id + '.ON_ACTUAL');
                    } else if (existsState(pageItem.id + '.ACTUAL')) {
                        optVal = getState(pageItem.id + '.ACTUAL').val;
                        unit = pageItem.unit !== undefined ? pageItem.unit : GetUnitOfMeasurement(pageItem.id + '.ACTUAL');
                    }

                    if (o.common.role == 'value.temperature') {
                        iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('thermometer');
                    }

                    iconColor = GetIconColor(pageItem, parseInt(optVal), useColors);

                    if (pageItem.colorScale != undefined) {
                        let iconvalmin = (pageItem.colorScale.val_min != undefined) ? pageItem.colorScale.val_min : 0 ;
                        let iconvalmax = (pageItem.colorScale.val_max != undefined) ? pageItem.colorScale.val_max : 100 ;
                        let iconvalbest = (pageItem.colorScale.val_best != undefined) ? pageItem.colorScale.val_best : iconvalmin ;
                        let valueScale = val;

                        if (iconvalmin == 0 && iconvalmax == 1) {
                            iconColor = (getState(pageItem.id).val == 1) ? rgb_dec565(colorScale0) : rgb_dec565(colorScale10);
                        } else {
                            if (iconvalbest == iconvalmin) {
                                valueScale = scale(valueScale,iconvalmin, iconvalmax, 10, 0);
                            } else {
                                if (valueScale < iconvalbest) {
                                    valueScale = scale(valueScale,iconvalmin, iconvalbest, 0, 10);
                                } else if (valueScale > iconvalbest || iconvalbest != iconvalmin) {
                                    valueScale = scale(valueScale,iconvalbest, iconvalmax, 10, 0);
                                } else {
                                    valueScale = scale(valueScale,iconvalmin, iconvalmax, 10, 0);
                                }
                            }
                            let valueScaletemp = (Math.round(valueScale)).toFixed();
                            iconColor = HandleColorScale(valueScaletemp);
                        }
                    }

                    if (existsState(pageItem.id + '.USERICON')) {
                        iconId = Icons.GetIcon(getState(pageItem.id + '.USERICON').val);
                        if (Debug) console.log('iconid von ' + pageItem.id + '.USERICON: ' + getState(pageItem.id + '.USERICON').val);
                        RegisterEntityWatcher(pageItem.id + '.USERICON');
                    }

                    if (pageItem.useValue) {
                        if (pageItem.fontSize != undefined) {
                            iconId = optVal + '¬' + pageItem.fontSize; 
                        } else {
                            iconId = optVal; 
                        }
                    }

                    if (Debug) console.log('CreateEntity Icon role info, humidity, temperature, value.temperature, value.humidity, sensor.door, sensor.window, thermostat');
                    if (Debug) console.log('CreateEntity  ~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal+ ' ' + unit);
                    return '~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal + ' ' + unit;

                case 'buttonSensor':

                    type = 'input_sel';
                    iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('gesture-tap-button');
                    iconColor = GetIconColor(pageItem, true, useColors);
                    let inSelText = pageItem.buttonText !== undefined ? pageItem.buttonText : 'PRESS';

                    if (Debug) console.log('CreateEntity  Icon role buttonSensor ~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + inSelText);
                    return '~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + inSelText;

                case 'button':
                    type = 'button';
                    iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('gesture-tap-button');
                    iconColor = GetIconColor(pageItem, true, useColors);
                    let buttonText = pageItem.buttonText !== undefined ? pageItem.buttonText : 'PRESS';

                    if (Debug) console.log('CreateEntity  Icon role button ~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + buttonText);
                    return '~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + buttonText;

                case 'level.timer':
                    type = 'timer';
                    iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('gesture-tap-button');
                    iconColor = GetIconColor(pageItem, true, useColors);
                    let timerText = pageItem.buttonText !== undefined ? pageItem.buttonText : 'PRESS';

                    if (existsState(pageItem.id + '.STATE')) {
                        val = getState(pageItem.id + '.STATE').val;
                        RegisterEntityWatcher(pageItem.id + '.STATE');
                    }

                    if (Debug) console.log('CreateEntity  Icon role level.timeer ~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + timerText);
                    return '~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + timerText;

                case 'level.mode.fan':

                    type = 'fan';
                    iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('fan');
                    optVal = '0';

                    if (val === true || val === 'true') {
                        optVal = '1';
                        iconColor = GetIconColor(pageItem, true, useColors);
                    } else {
                        iconColor = GetIconColor(pageItem, false, useColors);
                        if (pageItem.icon !== undefined) {
                            if (pageItem.icon2 !== undefined) {
                                iconId = iconId2;
                            }
                        }
                    }

                    if (Debug) console.log('CreateEntity  Icon role level.mode.fan ~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal);
                    return '~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal;                
                    
                case 'lock':
                    type = 'button';
                    iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('lock');
                    iconColor = GetIconColor(pageItem, true, useColors);
                    let lockState;

                    if (existsState(pageItem.id + '.ACTUAL')) {
                        if (getState(pageItem.id + '.ACTUAL').val) {
                            iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('lock');
                            iconColor = GetIconColor(pageItem, true, useColors);
                            lockState = findLocale('lock', 'UNLOCK');
                        } else {
                            iconId = pageItem.icon2 !== undefined ? Icons.GetIcon(pageItem.icon2) : Icons.GetIcon('lock-open-variant');
                            iconColor = GetIconColor(pageItem, false, useColors);
                            lockState = findLocale('lock', 'LOCK');
                        }
                        lockState = pageItem.buttonText !== undefined ? pageItem.buttonText : lockState;
                    }

                    if (Debug) console.log('CreateEntity  Icon role lock ~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + lockState);
                    return '~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + lockState;

                case 'slider':
                    type = 'number';
                    iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('plus-minus-variant');

                    iconColor = GetIconColor(pageItem, false, useColors);

                    if (Debug) console.log('CreateEntity  Icon role slider ~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + val + '|' + pageItem.minValue + '|' + pageItem.maxValue);
                    return '~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + val + '|' + pageItem.minValue + '|' + pageItem.maxValue;

                case 'volumeGroup':
                case 'volume':
                    type = 'number';
                    iconColor = GetIconColor(pageItem, false, useColors)
                    if (existsState(pageItem.id + '.MUTE')) {
                        getState(pageItem.id + '.MUTE').val ? iconColor = GetIconColor(pageItem, false, useColors) : iconColor = GetIconColor(pageItem, true, useColors);
                        RegisterEntityWatcher(pageItem.id + '.MUTE');
                    }

                    if (val > 0 && val <= 33 && !getState(pageItem.id + '.MUTE').val) {
                        iconId = Icons.GetIcon('volume-low');
                    } else if (val > 33 && val <= 66 && !getState(pageItem.id + '.MUTE').val) {
                        iconId = Icons.GetIcon('volume-medium');
                    } else if (val > 66 && val <= 100 && !getState(pageItem.id + '.MUTE').val) {
                        iconId = Icons.GetIcon('volume-high');
                    } else {
                        iconId = Icons.GetIcon('volume-mute');
                    }

                    if (Debug) console.log('CreateEntity  Icon role volumeGroup/volume ~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + val + '|' + pageItem.minValue + '|' + pageItem.maxValue);
                    return '~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + name + '~' + val + '|' + pageItem.minValue + '|' + pageItem.maxValue;

                case 'warning':
                    type = 'text';
                    iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('alert-outline');
                    iconColor = getState(([pageItem.id, '.LEVEL'].join(''))).val;
                    let itemName = getState(([pageItem.id, '.TITLE'].join(''))).val;
                    let itemInfo = getState(([pageItem.id, '.INFO'].join(''))).val;

                    RegisterEntityWatcher(pageItem.id + '.LEVEL');
                    RegisterEntityWatcher(pageItem.id + '.INFO');

                    if (pageItem.useValue) {
                        iconId = itemInfo; 
                    }

                    if (Debug) console.log('CreateEntity  Icon role warning ~' + type + '~' + pageItem.id + '~' + iconId + '~' + iconColor + '~' + itemName + '~' + itemInfo);
                    return '~' + type + '~' + itemName + '~' + iconId + '~' + iconColor + '~' + itemName + '~' + itemInfo;

                case 'timeTable':
                    type = 'text';
                    let itemFahrzeug:string = getState(pageItem.id + '.Fahrzeug').val;
                    let itemUhrzeit:string = getState(pageItem.id + '.ACTUAL').val;
                    let itemRichtung:string = getState(pageItem.id + '.Richtung').val;
                    let itemVerspätung:boolean = getState(pageItem.id + '.Verspätung').val;
    
                    if (Icons.GetIcon(itemFahrzeug) != "") {
                        iconId = Icons.GetIcon(itemFahrzeug)
                    }else {
                        iconId=''
                    };
    
                    iconColor = (!itemVerspätung) ? rgb_dec565(colorScale0) : rgb_dec565(colorScale10);
    
                    if (Debug) console.log('CreateEntity  Icon role timeTable ~' + type + '~' + itemRichtung + '~' + iconId + '~' + iconColor + '~' + itemRichtung + '~' + itemUhrzeit);
                    return '~' + type + '~' + itemRichtung + '~' + iconId + '~' + iconColor + '~' + itemRichtung + '~' + itemUhrzeit;
    
                default:
                    if (Debug) console.log('CreateEntity Icon keine passende Rolle gefunden');
                    return '~delete~~~~~';
            }
            
        }
        if (Debug) console.log('CreateEntity  return ~delete~~~~~');
        return '~delete~~~~~';
    } catch (err) {
        if (err.message == "Cannot read properties of undefined (reading 'common')") {
            console.warn('Found Alias without channel: ' + pageItem.id + '! Please correct the Alias');
        } else {
            console.warn('error at function CreateEntity: ' + err.message);
        }
    }
}

Danke für die schnelle Antwort und auch danke für das Tolle Script.

@Armilar
Ich hab prinzipiell gesehen das es auch möglich ist eine Feuchtigkeitsgerät zu verwenden aber ich dachte mir wenn es im Script auch vorgesehen ist direkt die Datenpunkte zu verwenden dann mach ich das. Somit brauchte ich nur ein Alias Gerät statt zwei Anlegen. Das dieser Scriptteil nicht vorgesehen ist für die Nutzung wusste ich nicht.

Das mit dem updaten spielt bei dem Grid View vermutlich nur untergeordnete Rolle da die Werte beim Aufruf so wie ich das gesehen habe eh neu geladen werden. Nach ein paar Sekunden springt eh der Screensaver rein.

Hab jetzt meine Konfiguration auf die vorgeschlagene weise geändert.

@TT-Tom
Das habe ich verstanden aber ich hab im Script gesehen das es möglich ist auch direkt die datenpunkte zu nutzen wenn die Rolle stimmt. Dadurch bin ich überhaupt erst auf die Idee gekommen das zu verwenden. Dachte das ist eine alternative Konfigurationsmöglichkeit.

@all
Übrigens hab ich gleich auch noch einen Verbesserungswunsch den ich hier zur Diskussion stellen wollte. Und zwar geht es darum dass ich gerne hätte wenn ich zB auf auf einer GridPage auf die Temperatur vom zB. Wohnzimmer drücke dass sich dann eine subPage öffnet. Durch hinzufügen entsprechenden cases in der Funktion CreateEntity in der switch abfrage für die dynamischen navi icons hab ich das mal ausprobiert und in meinem Fall funktioniert das.

geänderte Config damit es auch funktioniert:

let NSPanel_Temp = <PageGrid>
{
    'type': 'cardGrid',
    'heading': 'Temperaturen',
    'useColor': true,
    'items': [
        <PageItem>{ navigate: true, targetPage: 'NSPanel_TestSub', id: 'alias.0.devices.TempSchlafzimmer', unit: '°C', name: 'Schlafzimmer', offColor: MSRed, onColor: MSGreen, useValue: true, colorScale: {'val_min': 20, 'val_max': 25, 'val_best': 23} },
    ]
};

Hinzugefügte cases in der Funktion CreateEntity in dem switch für die dynamischen navi icons.

                        case 'humidity':

                        case 'temperature':

                        case 'value.temperature':

                        case 'value.humidity':

                        case 'sensor.door':

                        case 'sensor.window':

                        case 'thermostat':
                            type = 'text';

                            iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : o.common.role == 'value.temperature' || o.common.role == 'thermostat' ? Icons.GetIcon('thermometer') : Icons.GetIcon('information-outline');
            
                            let unit = '';
                            optVal = '0';

                            if (existsState(pageItem.id + '.ON_ACTUAL')) {
                                optVal = getState(pageItem.id + '.ON_ACTUAL').val;
                                unit = pageItem.unit !== undefined ? pageItem.unit : GetUnitOfMeasurement(pageItem.id + '.ON_ACTUAL');
                            } else if (existsState(pageItem.id + '.ACTUAL')) {
                                optVal = getState(pageItem.id + '.ACTUAL').val;
                                unit = pageItem.unit !== undefined ? pageItem.unit : GetUnitOfMeasurement(pageItem.id + '.ACTUAL');
                            } 
                            
                            if (o.common.role == 'value.temperature') {
                                iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('thermometer');
                            }
                            
                            iconColor = GetIconColor(pageItem, parseInt(optVal), useColors);

                            if (pageItem.colorScale != undefined) {
                                let iconvalmin = (pageItem.colorScale.val_min != undefined) ? pageItem.colorScale.val_min : 0 ;
                                let iconvalmax = (pageItem.colorScale.val_max != undefined) ? pageItem.colorScale.val_max : 100 ;
                                let iconvalbest = (pageItem.colorScale.val_best != undefined) ? pageItem.colorScale.val_best : iconvalmin ;
                                let valueScale = val;

                                if (iconvalmin == 0 && iconvalmax == 1) {
                                    iconColor = (getState(pageItem.id).val == 1) ? rgb_dec565(colorScale0) : rgb_dec565(colorScale10);
                                } else {
                                    if (iconvalbest == iconvalmin) {
                                        valueScale = scale(valueScale,iconvalmin, iconvalmax, 10, 0);
                                    } else {
                                        if (valueScale < iconvalbest) {
                                            valueScale = scale(valueScale,iconvalmin, iconvalbest, 0, 10);
                                        } else if (valueScale > iconvalbest || iconvalbest != iconvalmin) {
                                            valueScale = scale(valueScale,iconvalbest, iconvalmax, 10, 0);
                                        } else {
                                            valueScale = scale(valueScale,iconvalmin, iconvalmax, 10, 0);
                                        }
                                    }
                                    let valueScaletemp = (Math.round(valueScale)).toFixed();
                                    iconColor = HandleColorScale(valueScaletemp);
                                }
                            }

                            if (existsState(pageItem.id + '.USERICON')) {
                                iconId = Icons.GetIcon(getState(pageItem.id + '.USERICON').val);
                                if (Debug) console.log('iconid von ' + pageItem.id + '.USERICON: ' + getState(pageItem.id + '.USERICON').val);
                                RegisterEntityWatcher(pageItem.id + '.USERICON');
                            }

                            if (pageItem.useValue) {
                                if (pageItem.fontSize != undefined) {
                                    iconId = optVal + '¬' + pageItem.fontSize; 
                                } else {
                                    iconId = optVal; 
                                }
                            }

                            if (Debug) console.log('CreateEntity Icon role info, humidity, temperature, value.temperature, value.humidity, sensor.door, sensor.window, thermostat');
                            if (Debug) console.log('CreateEntity  ~' + type + 'navigate.' + pageItem.targetPage + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal + ' ' + unit);
                            return '~' + type + '~' + 'navigate.' + pageItem.targetPage + '~' + iconId + '~' + iconColor + '~' + name + '~' + optVal + ' ' + unit;

Ich beschäftige mich seit ein paar Tagen mit Lovelace UI auf dem NS Panel und glaube eine Fehler im Script gefunden zuhaben. Ich bin ganz neu in der Materie daher ist die Wahrscheinlichkeit groß das ich falsch liege.

Ich verwende die Version v4.3.1.5 von dem Script. Ich wollte auf einer Grid Page die gemessene Feuchtigkeit von meinen Temperatursensoren anzeigen lassen welche im Alias Device unter SECOND verfügbar ist. Das sollte so wie es verstanden habe ja so funktionieren:

let NSPanel_Humi = <PageGrid>
{
    'type': 'cardGrid',
    'heading': 'Feuchtigkeit',
    'useColor': true,
    'items': [
        <PageItem>{ id: 'alias.0.devices.TempSchlafzimmer.SECOND', name: 'Schlafzimmer', offColor: MSRed, onColor: MSGreen, useValue: true, colorScale: {'val_min': -20, 'val_max': 40, 'val_best': 20} },
    ]
};

Ich bekam aber immer den Wert 0 angezeigt. Der Grund, dass das nicht funktioniert liegt in der function CreateEntity in folgendem CodeTeil:

                case 'info':

                case 'humidity':

                case 'temperature':

                case 'value.temperature':

                case 'value.humidity':

                case 'sensor.door':

                case 'sensor.window':

                case 'thermostat':
                    type = 'text';

                    iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : o.common.role == 'value.temperature' || o.common.role == 'thermostat' ? Icons.GetIcon('thermometer') : Icons.GetIcon('information-outline');
     
                    let unit = '';
                    optVal = '0';

                    if (existsState(pageItem.id + '.ON_ACTUAL')) {
                        optVal = getState(pageItem.id + '.ON_ACTUAL').val;
                        unit = pageItem.unit !== undefined ? pageItem.unit : GetUnitOfMeasurement(pageItem.id + '.ON_ACTUAL');
                    } else if (existsState(pageItem.id + '.ACTUAL')) {
                        optVal = getState(pageItem.id + '.ACTUAL').val;
                        unit = pageItem.unit !== undefined ? pageItem.unit : GetUnitOfMeasurement(pageItem.id + '.ACTUAL');
                    }

// Hier gehört noch:
                    else if (o.common.role == 'value.temperature' || o.common.role == 'value.humidity') {
                        optVal = getState(pageItem.id).val;
                        unit = pageItem.unit !== undefined ? pageItem.unit : GetUnitOfMeasurement(pageItem.id);
                    }
// ende Ergänzung

                    if (o.common.role == 'value.temperature') {
                        iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon('thermometer');
                    }

// ist übrigens redundant: 
                    iconColor = GetIconColor(pageItem, parseInt(optVal), useColors);

Mit dieser kleine Ergänzung funktioniert es bei mir.

Bitte korrigiert mich falls ich falsch liege.