Monatsrückblick Oktober 2026 ist online!

[Foradh 0]

Hallo zusammen,
ich würde gerne von einer vorhanden Installation "NSPanel Lovelace UI" ohne Adapter mit TS Script auf den neuen Adapter wechseln.
Ist es möglich die bestehende Konfiguration zu migrieren?
Diese sah bisher folgendermaßen aus

let NSPanel_Seite1: PageGrid =
            {
                'type': 'cardGrid',
                'heading': 'Home',
                'useColor': true,
                'items': [
                    <PageItem>{ navigate: true, id: 'Thermostat', icon: 'thermostat',offColor: White, onColor: White, name: 'Thermostat'},
                    <PageItem>{ navigate: true, id: 'NSPanel_Licht1', icon: 'lightbulb-group',offColor: White, onColor: White, name: 'Licht'},
                    <PageItem>{ navigate: true, id: 'NSPanel_Fenster', icon: 'window-closed-variant',offColor: White, onColor: White, name: 'Fenster/Türen'},
                    <PageItem>{ navigate: true, id: 'NSPanel_Abfall', icon: 'trash-can',offColor: White, onColor: White, name: 'Abfall'},
                    <PageItem>{ navigate: true, id: 'NSPanel_Energie', icon: 'home-lightning-bolt-outline',offColor: White, onColor: White, name: 'Energie'},
                    <PageItem>{ navigate: true, id: 'NSPanel_WLAN', icon: 'wifi',offColor: White, onColor: White, name: 'Gäste WLAN'},
           
                ]
            };

    let Thermostat: PageThermo =
    {
    'type': 'cardThermo',
    'heading': 'Solltemperatur',
    'subPage': true,
    'parent': NSPanel_Seite1,
    'home': 'NSPanel_Seite1',
    'items': [<PageItem>{ 
                id: 'alias.0.NSPanel.Thermostat.Thermostat_Buero_OG', 
                minValue: 100, 
                maxValue: 250,
                stepValue: 5
             }]
    };

    let NSPanel_Licht1: PageGrid =
    {
    'type': 'cardGrid',
    'heading': 'Licht',
    'useColor': true,
    'subPage': true,
    'parent': NSPanel_Seite1,
    'home': 'NSPanel_Seite1',
    'items': [
        <PageItem>{id: 'alias.0.NSPanel.Geräte.Gartenbeleuchtung', icon: 'lightbulb', offColor: White, onColor: Yellow, name: 'Garten', monobutton: true},
        <PageItem>{id: 'alias.0.NSPanel.Geräte.Poolbeleuchtung', icon: 'lightbulb', offColor: White, onColor: Yellow, name: 'Pool', monobutton: true},
        <PageItem>{id: 'alias.0.NSPanel.Geräte.Saunaraumbeleuchtung', icon: 'lightbulb', offColor: White, onColor: Yellow, name: 'Saunaraum', monobutton: true},
        <PageItem>{id: 'alias.0.NSPanel.Geräte.WLED_Wohnzimmer', icon: 'lightbulb', offColor: White, onColor: Yellow, name: 'Wohnzimmer', monobutton: true},
    ]
    };

    let NSPanel_Fenster: PageGrid =
    {
    'type': 'cardGrid',
    'heading': 'Fenster/Türen',
    'useColor': true,
    'subPage': true,
    'parent': NSPanel_Seite1,
    'home': 'NSPanel_Seite1',
    'items': [
        <PageItem>{id: 'alias.0.NSPanel.Geräte.Noel_Tür', icon: 'window-open-variant', icon2: 'window-closed-variant', offColor: MSGreen, onColor: MSRed, name: 'Noel'},
        <PageItem>{id: 'alias.0.NSPanel.Geräte.Schlafzimmertür', icon: 'window-open-variant', icon2: 'window-closed-variant', offColor: MSGreen, onColor: MSRed, name: 'Schlafzimmer'},
        <PageItem>{id: 'alias.0.NSPanel.Geräte.Badfenster_OG', icon: 'window-open-variant', icon2: 'window-closed-variant', offColor: MSGreen, onColor: MSRed, name: 'Bad OG'},
        <PageItem>{id: 'alias.0.NSPanel.Geräte.Bandfenster_EG', icon: 'window-open-variant', icon2: 'window-closed-variant', offColor: MSGreen, onColor: MSRed, name: 'Bad EG'},
        <PageItem>{id: 'alias.0.NSPanel.Geräte.Heizung_Fenster', icon: 'window-open-variant', icon2: 'window-closed-variant', offColor: MSGreen, onColor: MSRed, name: 'Heizung'},
        <PageItem>{id: 'alias.0.NSPanel.Geräte.Wohnzimmertür', icon: 'window-open-variant', icon2: 'window-closed-variant', offColor: MSGreen, onColor: MSRed, name: 'Wohnzimmertür'},
    ]
    };

    let NSPanel_Abfall: PageEntities =
    {
    'type': 'cardEntities',
    'heading': 'Abfallkalender',
    'useColor': true,
    'subPage': true,
    'parent': NSPanel_Seite1,
    'home': 'NSPanel_Seite1',
    "items": [
        <PageItem>{ id: 'alias.0.NSPanel.Abfall.event_1', icon: 'trash-can'},  
        <PageItem>{ id: 'alias.0.NSPanel.Abfall.event_2', icon: 'trash-can'},  
        <PageItem>{ id: 'alias.0.NSPanel.Abfall.event_3', icon: 'trash-can'},  
        <PageItem>{ id: 'alias.0.NSPanel.Abfall.event_4', icon: 'trash-can'}  
    ]
    };

    var NSPanel_Energie: PagePower =
    {
    'type': 'cardPower',
    'heading': 'Energie',
    'subPage': true,
    'parent': NSPanel_Seite1,
    'home': 'NSPanel_Seite1',
    "items": [
 //       <PageItem>{  }, //Demomode
        <PageItem>{ id: "alias.0.NSPanel.Geräte.CardPower",
                    alwaysOnDisplay: true }
    ]
};

    let NSPanel_WLAN: PageQR =
    {
     'type': 'cardQR',
     'heading': 'Gäste WLAN',
    'subPage': true,
    'parent': NSPanel_Seite1,
    'home': 'NSPanel_Seite1',
     'items': [
         <PageItem>{ id: 'alias.0.NSPanel.Geräte.Gäste_WLAN', hidePassword: false }
     ]
    };

//-- Seite 2 
let NSPanel_Seite2: PageGrid =
            {
                'type': 'cardGrid',
                'heading': 'Home',
                'useColor': true,
                'items': [
                    <PageItem>{ navigate: true, id: 'NSPanel_Maehroboter', icon: 'robot-mower',offColor: White, onColor: White, name: 'Mähroboter'},
                    <PageItem>{ navigate: true, id: 'NSPanel_Pool', icon: 'pool',offColor: White, onColor: White, name: 'Pool'},
                    <PageItem>{ navigate: true, id: 'NSPanel_GoogleKalender', icon: 'calendar',offColor: White, onColor: White, name: 'Kalender'},
           
                ]
            };

    let NSPanel_Maehroboter: PageEntities =
    {
    'type': 'cardEntities',
    'heading': 'Mähroboter',
    'useColor': true,
    'subPage': true,
    'parent': NSPanel_Seite2,
    'home': 'NSPanel_Seite1',
    'items': [
        <PageItem>{ id: 'alias.0.NSPanel.Geräte.Mähroboter_Status', icon: 'robot-mower', offColor: White, onColor: White, name: 'Status'},
        <PageItem>{ id: 'alias.0.NSPanel.Geräte.Mähroboter_Batterie', icon: 'battery', offColor: White, onColor: White, name: 'Batterie'},
        <PageItem>{ id: 'alias.0.NSPanel.Geräte.Mähroboter_Messer', icon: 'box-cutter', offColor: White, onColor: White, name: 'Messerqualität'},
    ]
    };

    let NSPanel_Pool: PageEntities =
    {
    'type': 'cardEntities',
    'heading': 'Pool',
    'useColor': true,
    'subPage': true,
    'parent': NSPanel_Seite2,
    'home': 'NSPanel_Seite1',
    'items': [
        <PageItem>{ id: 'alias.0.NSPanel.Geräte.Pool_PH', icon: 'water', offColor: White, onColor: White, name: 'PH Wert'},
        <PageItem>{ id: 'alias.0.NSPanel.Geräte.Pool_Chlor', icon: 'water', offColor: White, onColor: White, name: 'Redox Wert'},
        <PageItem>{ id: 'alias.0.NSPanel.Geräte.Pool_Temp', icon: 'water-thermometer', offColor: White, onColor: White, name: 'Temperatur'},

    ]
    };

    let NSPanel_Waschmaschine: PageEntities =
    {
    'type': 'cardEntities',
    'heading': 'Waschmaschine',
    'useColor': true,
    'subPage': true,
    'parent': NSPanel_Seite1,
    'home': 'NSPanel_Seite1',
    'items': [
        <PageItem>{ id: 'alias.0.NSPanel.Geräte.Waschmaschine_Status', icon: 'washing-machine', offColor: White, onColor: Yellow, name: 'Status'},
        <PageItem>{ id: 'alias.0.NSPanel.Geräte.Waschmaschine_Restzeit', icon: 'timer', offColor: White, onColor: Yellow, name: 'Restzeit'},
    ]
    };
   
    let NSPanel_GoogleKalender: PageEntities =
    {
    'type': 'cardEntities',
    'heading': 'Kalender',
    'useColor': true,
    'subPage': true,
    'parent': NSPanel_Seite2,
    'home': 'NSPanel_Seite1',
    "items": [
        <PageItem>{ id: 'alias.0.NSPanel.GoogleKalender.event_1', icon: 'calendar'},  
        <PageItem>{ id: 'alias.0.NSPanel.GoogleKalender.event_2', icon: 'calendar'},  
        <PageItem>{ id: 'alias.0.NSPanel.GoogleKalender.event_3', icon: 'calendar'},  
        <PageItem>{ id: 'alias.0.NSPanel.GoogleKalender.event_4', icon: 'calendar'}  
    ]
    };

Ich habe im Adapter zum Test eine Menüseite erstellt und verstehe leider nicht ganz wie ich die im Adapter erstellen Seiten in das TS Skript vom Adapter einpflegen muss.

Beste Grüße
Foradh

[MichaelF]

@Foradh-0

Hi, im prinzip genauso wie in dem alten script.

Der Adaper erzeugt diese scripte:

und hier werden dann die Seiten angelegt:

    /**************************************************************************************
     **                                                                                  **
     ** https://github.com/ticaki/ioBroker.nspanel-lovelace-ui/wiki/Adapter-Installation **
     **                                                                                  **
     *************************************************************************************/



    /***********************************************************************
     **                                                                   **
     **                       Page Configuration                          **
     **                                                                   **
     ***********************************************************************/


    // Beispiel Hauptseite / Mainpage
    // Diese Seite ist die Hauptseite, sie wird immer als erstes angezeigt und hat den uniqueName 'main'.
    // uniqueName 'main' muß mindestens einmal vorkommen, damit die Navigation funktioniert.
    const main: PageType = {
        type: 'cardThermo2',
        uniqueName:'main',
        heading: 'Bad',
        thermoItems:[
            {name: 'Bad', id:'alias.0.NSPanel.Thermostat_Bad', minValue: 10.0, maxValue:30.0, stepValue: 0.5, unit: "°C" modeList:['Manuell','Automatik'], modeId:'alias.0.NSPanel.Thermostat_Bad.MODE', thermoId1:'alias.0.NSPanel.Thermostat_Bad.ACTUAL', set:'alias.0.NSPanel.Thermostat_Bad.SET', thermoId2:'alias.0.NSPanel.Thermostat_Bad.HUMIDITY'}],
            items:[
        { id: 'alias.0.NSPanel.TemperaturWassserSpeicher', name: 'TemperaturSpeicher', useValue: true, suffixName: '°C', fontSize: 0 },
        { id: 'alias.0.NSPanel.Dachfenster', name: 'Dachfenster', icon: 'window-open-variant', icon2: 'window-closed-variant', onColor: MSRed, offColor: MSGreen},
        { id: 'alias.0.NSPanel.Heizung', icon: 'heat-wave', offColor: MSRed, onColor: MSGreen, name: 'Heizung'},
        //{ navigate: true, id: null, targetPage: 'Abfall', onColor: White, name: 'Abfallkalender', icon: 'trash-can'},
        { id: 'alias.0.NSPanel.Heizung_Spiegel', icon: 'heat-pump-outline', offColor: MSRed, onColor: MSGreen, name: 'Speigelheizung'},
        { id: 'alias.0.NSPanel.Endstufe', icon: 'soundbar', offColor: MSRed, onColor: MSGreen, name: 'Endstufe'},
        { id: 'alias.0.NSPanel.Lüfter',name: 'Ventilator', icon: 'fan', onColor: On, offColor: HMIOff},
        { id: 'alias.0.NSPanel.Fussbodenheizung', icon: 'heating-coil', offColor: MSRed, onColor: MSGreen, name: 'Fussbodenheizung'},
        { id: 'alias.0.NSPanel.Deckenbeleuchtung_Klein', icon: 'lightbulb', offColor: MSRed, onColor: MSGreen, name: 'Licht'}
            ],
    };

        const powerGrid: ScriptConfig.PagePower = {
        uniqueName: 'Solar', // muss mit dem Namen im Admin übereinstimmen
        type: 'cardPower'
    };

const Bad1: ScriptConfig.PageEntities ={
    type: 'cardEntities',
    uniqueName: 'Bad1',
    heading: 'Bad',
    useColor: true,
    items: [
        { id: 'alias.0.NSPanel.Deckenbeleuchtung_Gross', interpolateColor: true, name: 'Licht Gross'},
        { id: 'alias.0.NSPanel.Deckenbeleuchtung_Klein', interpolateColor: true, name: 'Licht Klein'},
        { id: 'alias.0.NSPanel.Lüfter', icon: 'power', offColor: MSRed, onColor: MSGreen, name: 'Lüfter'},
        { id: 'alias.0.NSPanel.Endstufe', icon: 'power', offColor: MSRed, onColor: MSGreen, name: 'Endstufe'},
    ]
};

const Bad2: ScriptConfig.PageEntities ={
    type: 'cardEntities',
    uniqueName: 'Bad2',
    heading: 'Bad',
    useColor: true,
    items: [
        { id: 'alias.0.NSPanel.Heizung_Spiegel', icon: 'power', offColor: MSRed, onColor: MSGreen, name: 'Speigelheizung'},
        { id: 'alias.0.NSPanel.Dachfenster', onColor: White, name: 'Dach Kuppel'},
        { id: 'alias.0.NSPanel.Heizung', icon: 'power', offColor: MSRed, onColor: MSGreen, name: 'Heizung'},
        { id: 'alias.0.NSPanel.Fussbodenheizung', icon: 'power', offColor: MSRed, onColor: MSGreen, name: 'Fussbodenheizung'}
    ]
};

Alternativ lassen sich auch Seiten in dem Adapter selbst anlegen, ist in der Doku gut beschrieben. Ich bin auch von dem Scrip zum Adapter gewechselt hat ein wenig gedauert ist dann aber wesentlich komfortabler.

Grüße

[TT-Tom]

@Foradh-0 sagte:

Ich habe im Adapter zum Test eine Menüseite erstellt und verstehe leider nicht ganz wie ich die im Adapter erstellen Seiten in das TS Skript vom Adapter ein pflegen muss.

Welche Version hast du Installiert?
Hast du die Anleitung im Wiki gelesen?
Wo ist dein aktueller Stand?

Du benötigst im Script mindestens eine main - Seite. Die restlichen Seiten können über den Adapter erstellt werden. Es befindet sich auf jedem Tab in der Adapter Config ein Link ins Wiki. Dort ist alles dann beschrieben, sollten Fragen offen sein, hier melden.

Im Abschnitt ScriptConfig https://github.com/ticaki/ioBroker.nspanel-lovelace-ui/wiki/ScriptConfig#seiten-konfiguration ist auch die neue Schreibweise beschrieben, ich würde dir aber zur Config der Seiten im Adapter raten. Wichtig erst Seiten anlegen, dann die Navigation zu den Seiten.

[ticaki]

v1.0.0

mit Unterstützung für admin8 - und Mindestanforderung admin8

[MichaelF]

@ticaki

Kann ich dann nicht updaten?

Meine Version:

[ticaki]

Ja, die version ist für admin 8 - admin 8 ist breaking. Ich mußt dafür auch hoch gehen, wollte ich eigentlich nicht aber geht ja nicht anders

[teletapi]

@ticaki sagte:

Ja, die version ist für admin 8 - admin 8 ist breaking. Ich mußt dafür auch hoch gehen, wollte ich eigentlich nicht aber geht ja nicht anders

läuft aber alles

[ticaki]

ja geht alles, zum Glück. Aber vorher ging auch alles ;)

[patricknitsch]

Hi,

ich wollte gerade im Adapter eine Seite mit Navigation anlegen. Das Dropdown-Menü wird nicht geöffnet. Stattdessen kommt eine Fehlermeldung:

Die benutzerdefinierte Komponente "AdminComponentTemplateSet/Components/PageConfigManager" kann nicht angezeigt werden
Sie wurde vermutlich für eine ältere Admin-Version erstellt. Bitte den Adapter aktualisieren.
Cannot read properties of null (reading 'removeAttribute')

[TT-Tom]

@patricknitsch

Welche Adapter Version?
Welche Admin Version?
Welches dropdown?

Bitte nachreichen, danke.

[patricknitsch]

Sorry, natürlich.

Adapter Version 1.0.0
Admin Version 8.0.8
Ich habs unten im Bild dargestellt. Zeigts besser.

Laut Dokumentation sollte da ja ein Dropdown "Zielseite" sein.

[TT-Tom]

@patricknitsch

Wenn ich dich jetzt richtig verstanden habe, wird mit der Tab Pageconfig nicht angezeigt oder nur das Dropdown-Menü nicht.

[patricknitsch]

Der Tab Pageconfig wird angezeigt(siehe erstes Bild). Das Dropdown-Menü nicht(ist einfach nur eine Spalte). Wenn ich in der Spalte, wo das Menü sein müsste, eine Pfeiltaste drücke, kommt dann die Fehlermeldung.

[TT-Tom]

@patricknitsch
Okay, ich Check das mal.

[TT-Tom]

@patricknitsch

Fehler gefunden, fix kommt mit dem release. Wenn du nicht warten kannst / willst, kannste auch von GitHub laden.

[patricknitsch]

@tt-tom Hab ich gestern in Github schon gesehen und getestet. Sah gut aus. Danke für die schnelle Lösung!

[patricknitsch]

Ich habe mal eine Frage zur Seiten-Konfiguration in der Instanz-Config. Pages können ja sehr gut erstellt und verknüpft werden. Wie sieht das mit „Main“-Pages aus? Kann man die automatisch im Script erstellten löschen und eigene Pages als Main definieren? Oder geht das nur im Script?

[ticaki]

Das geht aktuelle noch nicht - aber das wird noch eingebaut, habs nur vergessen.

[patricknitsch]

@ticaki Danke für die Info. Dann gedulde ich mich noch :) Ich kann dafür aber auch gerne ein Issue anlegen.

[ticaki]

Das wäre natürlich die bessere lösung, dann vergessen wir es nicht mehr :)