NSPanel Configurator

A visual web-based editor for nspanel-lovelace-ui AppDaemon configurations. Edit your NSPanel setup without manually writing YAML.

---

Requirements

• NSPanel (EU or US) with Tasmota firmware
• nspanel-lovelace-ui running via AppDaemon
• Home Assistant with AppDaemon app

---

Features

• Import existing nspanel-*.yaml files via file picker or paste
• Edit all configuration sections visually:
  • Basic settings (MQTT topics, brightness, sleep timeout, locale)
  • Sleep brightness schedule with visual preview
  • Screensaver entities with icon and color editors
  • Jinja template colors with syntax-highlighted textarea
  • State-mapped icons and colors
  • All card types: cardGrid, cardMedia, cardPower, cardThermo, cardEntities, cardQR
• Live preview using actual Home Assistant state data
• Entity autocomplete from your HA instance
• Export downloads with the original filename preserved
• Auto-save to browser localStorage
• Multiple panels manageable in one session

---

Setup

Option A — Host on Home Assistant (recommended)

No CORS configuration needed — the page runs on the same origin as HA.

1. Copy nspanel_configurator.html to /config/www/
2. Open in your browser: http://YOUR_HA_IP:8123/local/nspanel_configurator.html
3. The active HA session is detected automatically — no manual token entry required

Option B — Open as a local file

1. Open nspanel_configurator.html directly in your browser (file://)
2. Add to configuration.yaml and restart Home Assistant:

http:
  cors_allowed_origins:
    - "null"

Option A is preferred. The "null" origin allows any local HTML file to access your HA API.

---

Home Assistant Connection

Connecting to HA enables entity autocomplete across all input fields.

1. Open 🔗 HA Verbindung in the sidebar
2. Enter your HA URL (e.g. http://192.168.1.100:8123)
3. Create a Long-Lived Access Token: HA → Profile → Security → Long-Lived Access Tokens
4. Click Verbinden & Entities laden

When using Option A, the active session is detected automatically — no token needed.

Entity data is cached in localStorage and restored on next visit.

---

Workflow

Import → Edit → Preview → Export → Deploy

1. Import — Click ⬆ Import, select your nspanel-*.yaml file
2. Edit — Use the sidebar sections to modify your configuration
3. Preview — Open 👁 Preview, optionally click 🔄 Live-Daten laden for actual entity states and evaluated Jinja colors
4. Export — Click ⬇ Export, the file downloads with the original filename

Deploying

Copy the exported file to your AppDaemon apps directory:

/config/appdaemon/apps/nspanel-<room>.yaml

AppDaemon detects file changes and reloads automatically.

---

YAML Format

The configurator reads and writes the standard nspanel-lovelace-ui AppDaemon format:

---
nspanel-<room>:
  module: nspanel-lovelace-ui
  class: NsPanelLovelaceUIManager
  config:
    panelRecvTopic: "tele/nspanel-<room>/RESULT"
    panelSendTopic: "cmnd/nspanel-<room>/CustomSend"
    model: eu
    screenBrightness: 100
    sleepTimeout: 30
    # ...

Jinja templates in color fields are fully supported and preserved on export:

color: >
  {% if states('sensor.temperature') | int < 20 %}
  [0, 0, 255]
  {% else %}
  [255, 0, 0]
  {% endif %}

---

Live Preview

The preview renders a scaled replica of the NSPanel display.

Without HA connection, Jinja-colored entities appear in gray. After 🔄 Live-Daten laden:

• Sensor values are shown with units (e.g. 22.3 °C)
• Jinja color templates are evaluated via the HA template API
• Tile states reflect live entity states
• Weather forecast is fetched via weather.get_forecasts

---

Limitations

• No direct file access to HA — exported files must be copied manually
• Preview is an approximation; exact icon sizes and positions may differ from the Nextion display

---

License

MIT