Betatest NSPanel-lovelace-ui v0.7.x

bembelstemmer

@ticaki Jo, alles klar. Wird gemacht.
Hab den Fehler auch gefunden. Ich hatte nirgends die Info bzgl:
"jenachdem wie State: nspanel-lovelace-ui.0.panels.A0_B7_65_54_C2_60.cmd.detachLeft / Right aussehen"

Jetzt weiß ich dass man das dort setzen muss. Oder ist es vorgesehen das irgendwo anders zu konfigurieren und es wird dann automatisch gesetzt?

ticaki

Soll in den states gesetzt werden.

Oder da wo Tom sagt

TT-Tom

@bembelstemmer
Wie schon anfangs geschrieben hatte in den Serviceseiten unter Relais. Da kannst du es bequem einstellen

ticaki

bitte lesen

Betrifft nicht Screensaver-Doppelklick

0.9.0 (2025-11-21)

(armilar) HMI: long press added (v5.1.1)
(ticaki) Replace double-click with long press
(ticaki) pageItem type=button long press added
(ticaki) custom pageitem added
(ticaki) script ID is found uniquely

Solle da mal mehr rein schreiben:

Doppleklick ist weg - dafür gibts jetzt längers gedrückt halten. In blätterbaren cardGrids usw. springt man so direkt auf die nächste Seite
gibt eine neue Scriptoption für Pageitems: targetPageLongPress - die geht bei jedem Pageitem das ein button ist (button, light, socket z.B.) - bei einem langen Druck auf das PageItem springt man auf diese Seite
neues PageItem hinzugefügt: type: 'custom' - da kann man eine direkte ID angeben auf einen Datenpunkt. Muß jedoch alles definieren da die defaults alle Mist sind.

Details - nur bei Interesse lesen

Die Types für das neue PageItems sind so:

der type: 'custom' definiert das id kein Channel sondern ein Datenpunkt ist.

    {
        type: 'custom';
        id: string; // auf einen boolean datenpunkt
        navigate?: boolean | null | undefined;
        targetPage?: string | null | undefined;
        targetPageLongPress?: string | null | undefined;
        icon?: string;
        icon2?: string;
        name?: string;
        onColor?: RGB | string;
        offColor?: RGB | string;
        colorScale?: IconScaleElement;
        buttonText?: string;
    };

targetPageLongPress: Ich verwende das um einem start knopf für meinen Saugroboter eine Optionsseite hinzuzufügen mit der ich Saugleistung und Wischleistung einstellen kann - das ändere ich nicht und die Seite wo der Knopf ist hat schon 8 Items und ist damit voll :)

danny_v1

Hallo, ich bin seit langem mal wieder hier und echt erstaunt was sich alles im Adapter getan hat. Ich habe jetzt ein neues Panel und damit habe ich jetzt gleich mal den Adapter genutzt und bin an Aufbau meiner Seiten muss ja alles etwas angepasst werden wenn man vom "alten" Skript kommt.

Da habe ich auch schon die ersten Fragen:

ich habe im Skript viel solche Sachen verwendet

*PageItem*/{ id: "alias.0.Wohnzimmer.Sensoren.BWM", icon: "motion-sensor", icon2: "motion-sensor-off", offColor:  Blue, onColor: Green, prefixName:"Wohnz.: ", name: "getState('alias.0.Wohnzimmer.Sensoren.BWM.SECOND').val", suffixName: " Lux" },

wie kann ich das jetzt hier umsetzen?

gibt es irgendwo eine zusammenhängende Erklärung wie die Navigation funktioniert, bzw was wird im Adapter festgelegt und was im Skript?

let Obergeschoss: PageType =

{
    "type": "cardGrid",
    "heading": "Obergeschoss",
    "useColor": true,
    "subPage": false,
    'prev': 'AlarmSeite',
    'next': 'Untergeschoss',
    'prevIcon': 'shield-alert',
    'nextIcon': 'home-floor-0',
    "items": [
            /*PageItem*/{ navigate: true, id: null, targetPage: "Wohnzimmer1", icon: "sofa-outline", onColor: White, name: "Wohnzimmer"},
            /*PageItem*/{ navigate: true, id: null, targetPage: "Balkon", icon: "balcony", onColor: White, name: "Balkon"},
            /*PageItem*/{ navigate: true, id: null, targetPage: "Flur_OG", icon: "stairs", onColor: White, name: "Flur"}
    ]

};

so wird es ja nicht mehr funktionieren?!

Gibt es vielleicht sowas wie ein Beispielskript wo mal alle Seiten als Vorlage drin sind?
Gibt es eine Seite für WLED?

Vielen Lieben dank schon mal

TT-Tom

@danny_v1

es gibt eine Wiki Seite zum Adapter, wo viele Sachen schon erklärt sind. Link siehe meine Signatur. Bitte lese Sie dir durch und gehen wir speziell auf einzelne Problem ein.

getState wird nicht mehr benötigt, einfach den DP einsetzen.
Sie funktioniert wie im Script. Was sich änder sind die Seiten die über PageConfig im Aadmin erstellt werden. Das besprechen wir dann separat.
Der Adapter legt ein Script schon an in einem eigenen Ordner, siehe javascript.
ist auch nur eine cradGrid.

Also lese mal im Wiki und dann alles weitere

danny_v1

Ja die Wiki Seite habe ich schon durchgeschaut und damit habe ich auch schon den Anfang umsetzen können.

zb meine Hauptseite:

const Hauptseite: PageType = {
        type: 'cardThermo2',
        uniqueName:'main',
        heading: 'egal wird eh nicht angezeigt',
        thermoItems:[
            {name: 'Wohnzimmer',
            set:'alias.0.Wohnzimmer.Temperaturen.Thermostat.Thermostat.SET', // Der Einstellwert der Heizung
                thermoId1:'alias.0.Wohnzimmer.Temperaturen.Thermostat.Thermostat.ACTUAL', // Aktuelle Raumtemperatur (oberer Wert in der Anzeige)
                thermoId2:'alias.0.Wohnzimmer.Temperaturen.Thermostat.Thermostat.HUMIDITY',
                modeId:'alias.0.Wohnzimmer.Temperaturen.Thermostat.Thermostat.MODE', modeList:['OFF', 'AUTO', 'COOL', 'HEAT', 'ECO', 'FAN', 'DRY']}],

        //    {name: 'test2', modeList:['aus','kaputt', 'falsch'], modeId:'0_userdata.0.Einzelne_Geräte.Thermostat.MODE' ,iconHeatCycle:'home', iconHeatCycleOffColor:Red, thermoId1:'alias.0.Wohnzimmer.Temperaturen.Thermostat.ACTUAL', set:'alias.0.Wohnzimmer.Temperaturen.Thermostat.SET', thermoId2:'alias.0.Wohnzimmer.Temperaturen.Thermostat.HUMIDITY'}],
        items:[
            {id: 'alias.0.Wohnzimmer.Lampe.Schreibtisch.Schreibtischlampe', name: 'Schreibtisch', icon: 'desk-lamp', interpolateColor: true},
            {id: 'alias.0.Wohnzimmer.Lampe.Laterne.Laterne', name: 'Laterne', icon: 'lamp', icon2: 'lamp-outline',interpolateColor: true},
            {id: 'alias.0.Wohnzimmer.Lampe.Stehlampe.Stehlampe', icon: 'floor-lamp-outline', onColor: White, offColor: Gray, interpolateColor: true},
            {id: 'alias.0.Wohnzimmer.Deckenlampe.Gross.GruppeNSP', icon: 'ceiling-light-multiple'},

            {navigate: true, targetPage: 'WZ_Lampen', icon: 'lamp'},
            {navigate: true, targetPage: 'WZ_Status', icon: 'state-machine'},
            {navigate: true, id: null, targetPage: 'WZ_Alexa', icon: 'music', onColor: White, name: 'Alexa'},
            {id: 'alias.0.Wohnzimmer.Lampe.Schreibtisch.Schreibtischlampe', name: 'Schreibtisch', icon: 'desk-lamp', interpolateColor: true},
            {id: 'alias.0.Wohnzimmer.Temperaturen.Thermostat.Thermostat.Batterie', name: 'Batterie', icon: 'battery', interpolateColor: true}
            ]
    };

Die funktioniert auch soweit, nur die Batterie anzeige Item9 funktioniert noch nicht.

Die anderen Seiten funktionieren soweit auch. Nur mit der Navigation (next, parent, prev, home) weiß ich noch nicht, macht man das wie im alten Skript oder in den Adapter einstellungen?

Zu zweitens wie muss das Item denn Aussehen, wenn der Name aus einem String und dann den Wert anzeigen soll, also zB Name: +Wert aus DP +Einheit

Gibt es irgendwo noch eine Zusammenfassung wann man bei den Items icon, icon2, onColor, offColor und interpolateColor verwenden kann?

ticaki

useColor kannste löschen, wird nicht verwendet.
interpolateColor gibts ebenfalls nicht.

wird wahrscheinlich ein Alias/Channel problem sein
next und prev icons gibts aktuell nicht. Kann wahrscheinlich bei Bedarf eingebaut werden.
Navigation für Seiten die im Skript eingerichtet werden ist im Skript, welche die im Admin unter PageConfig sind im Admin.
Das hab wir nicht drin, name sollte auch als Datenpunkt gehen. Kannst ihn in einem Alias selbst bauen und diesen Alias-dp dann als name angeben
Ich glaube die ist nur in unseren Köpfen.

EDIT: Ich weiß das meiste was drin ist, ist natürlich möglich das es bei einzelnen channels fehlt, dann reporten.

danny_v1

Ok vielen Dank schon mal, mit der Navigation komm ich nun schon mal klar.

Ich habe viele Sachen drin, mit denen ich ein paar Einstellungen mit dem LightControl Adapter über die Panel mache. In der Skript Version lief das alles sehr gut. Wenn ich jetzt die DP hier einfüge werden sie nicht erkannt. Ich habe da eigentlich nur die Schalter und ein paar Slider in Verwendung.

const Wohnzimmer_LC: PageType = {
    type: 'cardEntities',
    uniqueName: 'Wohnzimmer_LC',
    heading: 'Wohnz. Lightcontrol',
    subPage: true,
    items: [

              { id: 'alias.0.Wohnzimmer.LC.Komplett.AutoOnMotionEnable', name:'BWM', icon: 'lightbulb-off-outline'},
              { id: 'alias.0.Wohnzimmer.LC.Komplett.AutoOnMotionMinLux', name:'BWM MinLux"', icon: 'sun-wireless-outline', minValue: 0, maxValue: 25}]
}

So sieht die Seite aus.

{
  "type": "state",
  "common": {
    "name": "SET",
    "role": "switch",
    "type": "boolean",
    "read": true,
    "write": true,
    "alias": {
      "id": "lightcontrol.0.Wohnzimmer.autoOnMotion.enabled"
    },
    "custom": {
      "lovelace.0": {
        "enabled": true,
        "entity": "switch",
        "name": "Wohnzimmer_LC_Komplett_AutoOnMotionEnable_SET",
        "attr_assumed_state": false,
        "attr_device_class": "switch"
      }
    },
    "smartName": {
      "de": "Wohnzimmer Bewegungsmelder",
      "smartType": "socket"
    }
  },
  "_id": "alias.0.Wohnzimmer.LC.Komplett.AutoOnMotionEnable.SET",
  "native": {},
  "acl": {
    "object": 1636,
    "state": 1636,
    "owner": "system.user.admin",
    "ownerGroup": "system.group.administrator"
  },
  "from": "system.adapter.admin.0",
  "user": "system.user.admin",
  "ts": 1764265292669
}

So der DP für den Schalter.

{
  "type": "state",
  "common": {
    "name": "SET",
    "role": "level",
    "type": "number",
    "read": true,
    "write": true,
    "alias": {
      "id": "lightcontrol.0.Wohnzimmer.autoOnMotion.minLux"
    },
    "max": 50
  },
  "_id": "alias.0.Wohnzimmer.LC.Komplett.AutoOnMotionMinLux.SET",
  "native": {},
  "from": "system.adapter.admin.0",
  "user": "system.user.admin",
  "ts": 1712775080349,
  "acl": {
    "object": 1636,
    "state": 1636,
    "owner": "system.user.admin",
    "ownerGroup": "system.group.administrator"
  }
}

Und so der für den Slider.

Und iobroker schmeißt im log folgendes aus

[config-manager] Required: SET: alias.0.Wohnzimmer.LC.Komplett.AutoOnMotionMinLux, channel role: slider - missing - searching for dp: alias.0.Wohnzimmer.LC.Komplett.AutoOnMotionMinLux.SET, type: "number", role: "level", common.write: true

Was mache ich da nur falsch?

Achso, das mit den Namen und Werten aus DPs geht so:

prefixName:"BWM: ", name: 'alias.0.Wohnzimmer.Sensoren.BWM.SECOND', suffixName: " Lux"

ticaki

Ich hab keinen channel mit role=slider im Einsatz daher weiß ich nicht ob es richtig eingebaut ist, jedoch heißt die Warnmeldung das der channel nicht richtig angelegt ist. Hier findest du die Definitionen dazu https://github.com/ticaki/ioBroker.nspanel-lovelace-ui/blob/main/ALIAS.md

danny_v1

Ja genaulaut der Tabelle sollte das so auch passen, komischerweise geht einer und die anderen nicht, obwohl ich alle auf die gleiche Weiße im Geräte Adapter erstellt habe.

Ich habe jetzt auch mal etwas mit dem Slider im Licht PopUp herumgespielt und da stürzt der Adapter ab mit folgenden Einträgen im Log


host.iobrokerserver
2025-11-27 23:10:05.036	info	instance system.adapter.nspanel-lovelace-ui.0 in version "0.9.0" (non-npm: ticaki/ioBroker.nspanel-lovelace-ui#de12b19c803e62c1a8e4837f1df2afd4de351da7) started with pid 477383

host.iobrokerserver
2025-11-27 23:09:34.681	info	Restart adapter system.adapter.nspanel-lovelace-ui.0 because enabled

host.iobrokerserver
2025-11-27 23:09:34.680	error	instance system.adapter.nspanel-lovelace-ui.0 terminated with code 6 (UNCAUGHT_EXCEPTION)

nspanel-lovelace-ui.0
2025-11-27 23:09:33.864	error	Cannot read properties of undefined (reading 'replaceAll')

nspanel-lovelace-ui.0
2025-11-27 23:09:33.863	error	TypeError: Cannot read properties of undefined (reading 'replaceAll') at /opt/iobroker/node_modules/iobroker.nspanel-lovelace-ui/src/lib/const/tools.ts:1151:25 at Array.map (<anonymous>) at Object.getPayloadRemoveTilde (/opt/iobroker/node_modules/iobroker.nspanel-lovelace-ui/src/lib/const/tools.ts:1151:14) at PageItem.getDetailPayload (/opt/iobroker/node_modules/iobroker.nspanel-lovelace-ui/src/lib/pages/pageItem.ts:813:30) at PageItem.GeneratePopup (/opt/iobroker/node_modules/iobroker.nspanel-lovelace-ui/src/lib/pages/pageItem.ts:1916:21) at PageItem.onStateTrigger (/opt/iobroker/node_modules/iobroker.nspanel-lovelace-ui/src/lib/pages/pageItem.ts:2761:25) at PageItem.onStateTriggerSuperDoNotOverride (/opt/iobroker/node_modules/iobroker.nspanel-lovelace-ui/src/lib/classes/baseClassPage.ts:171:9) at StatesControler.onStateChange (/opt/iobroker/node_modules/iobroker.nspanel-lovelace-ui/src/lib/controller/states-controller.ts:773:25) at NspanelLovelaceUi.onStateChange (/opt/iobroker/node_modules/iobroker.nspanel-lovelace-ui/src/main.ts:611:17)

Ich habe in der ThermoCard2 eine Lampe die nur dimmbar ist und wenn ich diese mit längerem Druck öffne also das PopUp und da den Slider hin und her bewege kommt es zum Absturz.
Das ist auch reproduzierbar.

ticaki

@danny_v1 sagte in Betatest NSPanel-lovelace-ui v0.7.x:

Achso, das mit den Namen und Werten aus DPs geht so:
prefixName:"BWM: ", name: 'alias.0.Wohnzimmer.Sensoren.BWM.SECOND', suffixName: " Lux"

Jetzt wo ich es sehe weiß ich auch wieder das ich es eingebaut habe.

Zu dem Crash:
Das muß ich mal testen - lt. Fehlermeldung ist das ein popupTimer, da das nicht stimmen kann, ist dort wohl ein eher schwer zufindender Fehler.

Zeige bitte mal

Die Definitionszeile aus dem Script
den Channel mit Datenpunkten als Screenshot (damit ich die rolen checken kann)

EDIT: Ich kann im Moment wegen merkwürdigen Zahn/Kieferschmerzen nicht so richtig schlafen. Denke ich übersehe gerade was - sollte am Dienstag wieder besser sein. (Montag Arzt Termin)
@TT-Tom kannst du dir das mal angucken

danny_v1

 {id: 'alias.0.Wohnzimmer.Lampe.Stehlampe.Stehlampe', icon: 'floor-lamp', icon2: 'floor-lamp-outline', onColor: White, offColor: Gray},

{
  "_id": "alias.0.Wohnzimmer.Lampe.Stehlampe.Stehlampe.ACTUAL",
  "native": {},
  "type": "state",
  "common": {
    "alias": {
      "id": "zigbee2mqtt.0.0x7cb03eaa0a04b9cd.brightness"
    },
    "name": "ACTUAL",
    "role": "value.dimmer",
    "write": false,
    "type": "number",
    "unit": "%"
  },
  "acl": {
    "object": 1636,
    "state": 1636,
    "owner": "system.user.admin",
    "ownerGroup": "system.group.administrator"
  },
  "from": "system.adapter.admin.0",
  "user": "system.user.admin",
  "ts": 1713430455067
}

Hoffe das hilft weiter. Dann erst mal gute Besserung.

TT-Tom

@ticaki
@danny_v1

bin am gucken, melde mich

EDIT: was ich bis jetzt testen konnte crasht der Adapter bei der Rolle Dimmer und CT, wenn der Adapter den Wert zurückbekommt.
Bei Dimmer über Actual und bei CT über Dimmer.
Was noch nicht passt ist das Popup von CT, da wird nur der Dimmer, dargestellt kein Temp.

Weiteres werde ich mit @ticaki besprechen.

ticaki

0.9.1 (2025-11-29)

(ticaki) Fixed: Under certain circumstances, the adapter crashes when a pop-up is called.

ticaki

@danny_v1

Hallo,

Bin etwas wacher als gestern daher gehe ich es nochmal alles durch und versuche alles zu beantworten - für doppelte Antworten sorry :)

hast du ja schon rausgefunden (prefixName usw.)
(Navigation) Ich weiß nicht ob wir das zusammenhängend erklärt haben. Skriptpages werden im Skript konfiguriert, Adminpages im Admin. Seiten die im array pages werden zirkulär Verlinkt und als letztes werden die Servicepages angehangen. Bedeutet von main ist links immer die ServicePage. Die Hauptseite muß main heißen, wenn im Adapter was in der navigation schief läuft wird auf main gesprungen.(als letzter Rettungsanker) Andernfalls müsste ich im Code einen Crash auslösen.
(BeispielSkript) In sehr einfacher Form gibts im Adapterrepo ein Testscript - ich glaube aber Tom hat da nicht viele optionen eingebaut.
(wled) Nein die gibt es nicht, kann ich aber einbauen und testen. Ich benutze wled ohne Nutzerinteraktion. Daher benötige ich das nicht. Mache am besten ein Issue auf und schlage mal vor wie du es gerne hättest.
(batterie) Dazu fehlen infos - müsste wissen welche channel.role das hat und müsstest mal checken ob der alias richtig ist.
Einzelne Optionen
a) das kann bei jedem normalen PageItem benutzt werden.
b) interpolateColor gibts nicht mehr
c) dafür gibt es jetzt colorScale und Erweiterung dazu - siehe unten bei A1
Den Fehler für den nicht funktionierenden Slider hab ich noch nicht gefunden, konnte es auch noch nicht reproduzieren.
(slider crash) gefixt 0.9.1
noch nicht release - slider die als navi benutzt wurden haben nicht ordentlich funktioniert.

A1

https://github.com/ticaki/ioBroker.nspanel-lovelace-ui/wiki/screensaver#iconscaleelement---erweiterte-icon-skalierung

triGrad und quadriGrad ignorieren onColor und offColor. trigrad ist ein normale Ampel, quadri hat noch blau vor dem grün für Kälte zu Hitze

{
        val_min: number;
        val_max: number;
        val_best?: number;
        /**
         * The 3. color for color best. Only with val_best.
         */
        color_best?: RGB;/**
    /**
     * The color mix mode. Default is 'mixed'.
     * ‘mixed’: the target colour is achieved by scaling between the two RGB colours. 2 colours are required.
     * 'cie': the target colour is achieved by mixing according to the CIE colour table. 2 colours are required.
     * 'hue': the target colour is calculated by scaling via colour, saturation and brightness. 2 colours are required.
     * 'triGrad': the target colour is interpolated in a three-color gradient from red to green. Colours are ignored
     * 'triGradAnchor': the target colour is interpolated in a three-color gradient from red to green, Yellow is anchored to val_best. Colours are ignored
     * 'quadriGrad': the target colour is interpolated in a four-color gradient from red to yellow, green and blue. Colours are ignored.
     * 'quadriGradAnchor': the target colour is interpolated in a four-color gradient from red to yellow, green and blue. green is anchored to val_best. Colours are ignored.
     */
        mode?: 'mixed' | 'hue' | 'cie' | 'triGrad' | 'triGradAnchor' | 'quadriGrad' | 'quadriGradAnchor';
        /**
         * The logarithm scaling to max, min or leave undefined for linear scaling.
         */
        log10?: 'max' | 'min';
        valIcon_min?: number;
        valIcon_max?: number
    };

@TT-Tom
Die Infos her stimmen zwar aber es sollte nicht iconScaleElement: { sondern colorScale: { dort stehen damit ein nicht programmierender Nutzer die Beispiele besser versteht.

Community Forum

NEWS

Betatest NSPanel-lovelace-ui v0.7.x

0.9.0 (2025-11-21)

0.9.1 (2025-11-29)

Support us

790

32.4k

81.5k

1.3m