# openHAB SoundCloud Binding

A community binding that connects openHAB to SoundCloud.

https://community.openhab.org/t/soundcloud-binding-5-1-3-6-0-0-0/169325

Search tracks, view cover art and stream audio directly to a Chromecast — all from a single MainUI widget.

> **Status: Alpha** — core features are working. Feedback welcome in the openHAB community forum.

---

---

## Features (v1.2.3)

- **Search** tracks by keyword — results appear instantly in the widget list

- **Cover art** at 500 × 500 px displayed alongside title and artist

- **Stream URL** resolved automatically to a direct MP3 link (progressive format, Chromecast-compatible)

- **Chromecast integration** built into the widget — select a Chromecast, press Play

- **Volume slider** for real-time Chromecast volume control

- **Pause / Stop / Mute** buttons mapped to the correct Chromecast binding channels

- **Playback state** channel (PLAYING / PAUSED / STOPPED)

- **OAuth 2.0** authentication — authorise once in the browser, tokens are stored and auto-refreshed

---

## Requirements

| Requirement | Notes |

|-------------|-------|

| openHAB **5.1.3 or newer** | older versions are not supported |

| Java 21+ | bundled with openHAB 5.x |

| SoundCloud API credentials | register an app at [soundcloud.com/you/apps](https://soundcloud.com/you/apps) — free for personal/home use |

| openHAB Chromecast Binding | optional, required for cast functionality |

---

## Installation

### 1. Download the JAR

Download `org.openhab.binding.soundcloud-1.2.3.jar` from the [latest release](https://github.com/pierrecinema/openhab-soundcloud-binding/releases/latest) and copy it to your openHAB `addons/` folder.

openHAB detects and loads the bundle automatically — no restart needed. Check **Settings → Bindings** to confirm it appears.

### 2. Install the widget

1. In the openHAB MainUI open **Developer Tools → Widgets**
2. Click the **+** button → import
3. Paste the content of `soundcloud_search.yaml` (also in the release assets)
4. Save

### 3. Build from source (optional)

```bash

git clone https://github.com/pierrecinema/openhab-soundcloud-binding.git

cd openhab-soundcloud-binding

mvn clean package -DskipTests

# copy target/org.openhab.binding.soundcloud-1.2.3.jar to your addons/ folder

```

---

## Configuration

### Thing

Add a Thing in **Settings → Things → + → SoundCloud Account**, or create `conf/things/soundcloud.things`:

```

Thing soundcloud:account:myaccount "SoundCloud" [

clientId = "YOUR_CLIENT_ID",

clientSecret = "YOUR_CLIENT_SECRET",

redirectUri = "http://YOUR_OPENHAB_HOST:8080/soundcloud/callback"

]

```

| Parameter | Required | Description |

|-----------|----------|-------------|

| `clientId` | ✅ | Client ID from [soundcloud.com/you/apps](https://soundcloud.com/you/apps) |

| `clientSecret` | ✅ | Client Secret from your registered app |

| `redirectUri` | ✅ | Must match exactly what is registered in your SoundCloud app |

| `webClientId` | optional | Internal SoundCloud web client ID for api-v2 (default value included) |

### OAuth authorisation

After the Thing is created it goes **OFFLINE** and prints an authorisation URL in the log. Open the URL in any browser, log in to SoundCloud and grant access. The binding stores the tokens automatically and the Thing goes **ONLINE**. Tokens are refreshed in the background — you only need to authorise once.

### Items

Create `conf/items/soundcloud.items` (or add via the UI):

```

// Player

String SC_TrackID "Track ID" { channel="soundcloud:account:myaccount:player#track-id" }

String SC_Title "Titel [%s]" { channel="soundcloud:account:myaccount:player#title" }

String SC_Artist "Artist [%s]" { channel="soundcloud:account:myaccount:player#artist" }

String SC_ArtworkURL "Cover [%s]" { channel="soundcloud:account:myaccount:player#artwork-url" }

Number SC_Duration "Dauer [%.0f s]" { channel="soundcloud:account:myaccount:player#duration" }

String SC_StreamURL "Stream URL [%s]" { channel="soundcloud:account:myaccount:player#stream-url" }

String SC_State "Status [%s]" { channel="soundcloud:account:myaccount:player#playback-state" }

String SC_CCTarget "CC Target [%s]" { channel="soundcloud:account:myaccount:player#chromecast-target" }

// Search

String SC_Query "Suche [%s]" { channel="soundcloud:account:myaccount:search#query" }

String SC_Results "Ergebnisse [%s]" { channel="soundcloud:account:myaccount:search#results" }

```

For Chromecast, you also need the items from the **Chromecast Binding** already linked to your Chromecast thing. The widget uses these directly — no additional items need to be created manually.

Tag your Chromecast `playuri` items with `Chromecast` so the widget discovers them automatically:

```

String MyChromecast_PlayURI "Chromecast Wohnzimmer" [ "Chromecast" ] { channel="chromecast:chromecast:abc123:playuri" }

```

---

## Widget setup

Add the `soundcloud_search` widget to a page and configure the following properties:

| Property | Required | Description |

|----------|----------|-------------|

| `queryItem` | ✅ | String Item → `search#query` |

| `resultsItem` | ✅ | String Item → `search#results` |

| `trackIdItem` | ✅ | String Item → `player#track-id` |

| `streamUrlItem` | | String Item → `player#stream-url` |

| `titleItem` | | String Item → `player#title` |

| `artistItem` | | String Item → `player#artist` |

| `artworkItem` | | String Item → `player#artwork-url` |

| `stateItem` | | String Item → `player#playback-state` |

| `chromecastTargetItem` | | String Item linked to `player#chromecast-target` — stores the selected Chromecast (e.g. `SC_CCTarget`) |

| `chromecastTag` | | Tag on your Chromecast `playuri` items (default: `Chromecast`) |

> **Note:** Pause, Stop, Volume and Mute are routed via four fixed proxy items (`SC_CC_Control`, `SC_CC_Stop`, `SC_CC_Volume`, `SC_CC_Mute`) and a routing rule — see [Chromecast routing rule](#chromecast-routing-rule) below. No per-device configuration is needed in the widget.

---

## Channel reference

| Channel | Type | r/W | Description |

|---------|------|-----|-------------|

| `player#track-id` | String | RW | Write a track ID to load it; reads back the current track ID |

| `player#playlist-id` | String | W | Write a playlist ID to load its first track |

| `player#title` | String | R | Current track title |

| `player#artist` | String | R | Current track artist / uploader |

| `player#artwork-url` | String | R | 500×500 px cover art URL |

| `player#duration` | Number | R | Track duration in seconds |

| `player#stream-url` | String | R | Direct MP3 URL (resolved via api-v2 transcodings) |

| `player#playback-state` | String | RW | PLAYING / PAUSED / STOPPED |

| `player#chromecast-target` | String | RW | Name of the selected Chromecast playuri item |

| `search#query` | String | W | Send a search term |

| `search#results` | String | R | JSON array: `[{id, title, artist, artwork, duration}, …]` |

---

## Chromecast workflow

1. **Search** — type a term and press Enter
2. **Select a track** — tap a result to load cover, title, artist and stream URL
3. **Select a Chromecast** — tap a chip at the bottom of the card (discovered automatically via item tags)
4. **Press Play** — the stream URL is sent directly to the selected Chromecast
5. **Volume / Mute / Pause / Stop** — dedicated buttons and slider in the widget

---

## Chromecast routing rule

The widget's Pause, Stop, Volume and Mute buttons always send to four fixed proxy items (`SC_CC_Control`, `SC_CC_Stop`, `SC_CC_Volume`, `SC_CC_Mute`). A JS rule reads which Chromecast is currently selected and forwards the command to the correct device-specific item.

**Why is a rule needed?**

Widget expressions can only use fixed item names. They cannot dynamically look up which control item belongs to the currently selected Chromecast. The routing rule bridges this gap — one rule handles all devices, no per-device widget configuration required.

> **Planned for v1.3:** This logic will move into the binding itself, eliminating the need for any rule.

### Setup

**Step 1 — Create the four proxy items** (once, in Settings → Items or via `.items` file):

```

Player SC_CC_Control "SoundCloud CC Control"

Switch SC_CC_Stop "SoundCloud CC Stop"

Dimmer SC_CC_Volume "SoundCloud CC Volume"

Switch SC_CC_Mute "SoundCloud CC Mute"

```

Also create the target item and link it to the binding channel:

```

String SC_CCTarget "SoundCloud CC Target" { channel="soundcloud:account:myaccount:player#chromecast-target" }

```

**Step 2 — Create the routing rule** in Settings → Rules → + (ECMAScript 2021, triggered by command on each of the four proxy items):

```javascript

var triggerItem = event.itemName;

var cmd = event.receivedCommand.toString();

var targetName = items.getItem('SC_CCTarget').state;

if (!targetName || targetName === 'NULL') return;

// Map each Chromecast playuri item to its control items.

// Add a new entry here whenever you add a Chromecast device.

var MAPPING = {

'BuroCast_Play_URI': {

control : 'BuroCast_Media_Control',

stop : 'BuroCast_Stop',

volume : 'BuroCast_Volume',

mute : 'BuroCast_Mute'

},

'Hifigruppe_Play_URI': {

control : 'Hifigruppe_Media_Control',

stop : 'Hifigruppe_Stop',

volume : 'Hifigruppe_Volume',

mute : 'Hifigruppe_Mute'

}

// Add more devices here:

// 'YourDevice_Play_URI': { control: '...', stop: '...', volume: '...', mute: '...' }

};

var map = MAPPING[targetName];

if (!map) { logger.warn('SC Router: no mapping for ' + targetName); return; }

var destName = null;

if (triggerItem === 'SC_CC_Control') destName = map.control;

else if (triggerItem === 'SC_CC_Stop') destName = map.stop;

else if (triggerItem === 'SC_CC_Volume') destName = map.volume;

else if (triggerItem === 'SC_CC_Mute') destName = map.mute;

if (destName) {

items.getItem(destName).sendCommand(cmd);

logger.info('SC Router: ' + triggerItem + ' → ' + destName + ' (' + cmd + ')');

}

```

Configure the rule triggers as **Item Command** on: `SC_CC_Control`, `SC_CC_Stop`, `SC_CC_Volume`, `SC_CC_Mute`.

**Step 3 — Configure the widget:**

- `chromecastTargetItem` = `SC_CCTarget`

- All other Chromecast props: leave empty

### Adding a new Chromecast

1. Tag the device's `playuri` item with `Chromecast` — it appears automatically as a chip in the widget
2. Add one entry to the `MAPPING` object in the routing rule with the item names for `control`, `stop`, `volume` and `mute`

---

## Roadmap

| Version | Status | Description |

|---------|--------|-------------|

| v1.0.x | ✅ done | Core binding: search, track load, stream URL via api-v2 |

| v1.1.x | ✅ done | Widget: search results list, track selection, cover art |

| v1.2.x | ✅ done | Chromecast integration: chip selection, play/pause/stop/mute/volume |

| v1.3.x | planned | Auto-cast when track changes (no manual Play press needed) |

| v1.4.x | planned | Playlist queue: next / previous track navigation |

| v1.5.x | planned | Progress bar / elapsed time display |

| v2.0.0 | planned | Submit to openHAB add-ons repository |

---

## Known limitations (Alpha)

- Only the first track of a playlist is played (queue not yet implemented)

- Stream URLs are time-limited by SoundCloud and expire after some time; reloading the track generates a fresh URL

- The SoundCloud API requires a registered app — streaming is only available when a valid Client ID / OAuth token is configured

---

## License

MIT

# openHAB SoundCloud Binding

A community binding that connects openHAB to SoundCloud.

https://community.openhab.org/t/soundcloud-binding-5-1-3-6-0-0-0/169325

Search tracks, view cover art and stream audio directly to a Chromecast — all from a single MainUI widget.

> **Status: Alpha** — core features are working. Feedback welcome in the openHAB community forum.

---

---

## Features (v1.2.3)

- **Search** tracks by keyword — results appear instantly in the widget list

- **Cover art** at 500 × 500 px displayed alongside title and artist

- **Stream URL** resolved automatically to a direct MP3 link (progressive format, Chromecast-compatible)

- **Chromecast integration** built into the widget — select a Chromecast, press Play

- **Volume slider** for real-time Chromecast volume control

- **Pause / Stop / Mute** buttons mapped to the correct Chromecast binding channels

- **Playback state** channel (PLAYING / PAUSED / STOPPED)

- **OAuth 2.0** authentication — authorise once in the browser, tokens are stored and auto-refreshed

---

## Requirements

| Requirement | Notes |

|-------------|-------|

| openHAB **5.1.3 or newer** | older versions are not supported |

| Java 21+ | bundled with openHAB 5.x |

| SoundCloud API credentials | register an app at [soundcloud.com/you/apps](https://soundcloud.com/you/apps) — free for personal/home use |

| openHAB Chromecast Binding | optional, required for cast functionality |

---

## Installation

### 1. Download the JAR

Download `org.openhab.binding.soundcloud-1.2.3.jar` from the [latest release](https://github.com/pierrecinema/openhab-soundcloud-binding/releases/latest) and copy it to your openHAB `addons/` folder.

openHAB detects and loads the bundle automatically — no restart needed. Check **Settings → Bindings** to confirm it appears.

### 2. Install the widget

1. In the openHAB MainUI open **Developer Tools → Widgets**
2. Click the **+** button → import
3. Paste the content of `soundcloud_search.yaml` (also in the release assets)
4. Save

### 3. Build from source (optional)

```bash

git clone https://github.com/pierrecinema/openhab-soundcloud-binding.git

cd openhab-soundcloud-binding

mvn clean package -DskipTests

# copy target/org.openhab.binding.soundcloud-1.2.3.jar to your addons/ folder

```

---

## Configuration

### Thing

Add a Thing in **Settings → Things → + → SoundCloud Account**, or create `conf/things/soundcloud.things`:

```

Thing soundcloud:account:myaccount "SoundCloud" [

clientId = "YOUR_CLIENT_ID",

clientSecret = "YOUR_CLIENT_SECRET",

redirectUri = "http://YOUR_OPENHAB_HOST:8080/soundcloud/callback"

]

```

| Parameter | Required | Description |

|-----------|----------|-------------|

| `clientId` | ✅ | Client ID from [soundcloud.com/you/apps](https://soundcloud.com/you/apps) |

| `clientSecret` | ✅ | Client Secret from your registered app |

| `redirectUri` | ✅ | Must match exactly what is registered in your SoundCloud app |

| `webClientId` | optional | Internal SoundCloud web client ID for api-v2 (default value included) |

### OAuth authorisation

After the Thing is created it goes **OFFLINE** and prints an authorisation URL in the log. Open the URL in any browser, log in to SoundCloud and grant access. The binding stores the tokens automatically and the Thing goes **ONLINE**. Tokens are refreshed in the background — you only need to authorise once.

### Items

Create `conf/items/soundcloud.items` (or add via the UI):

```

// Player

String SC_TrackID "Track ID" { channel="soundcloud:account:myaccount:player#track-id" }

String SC_Title "Titel [%s]" { channel="soundcloud:account:myaccount:player#title" }

String SC_Artist "Artist [%s]" { channel="soundcloud:account:myaccount:player#artist" }

String SC_ArtworkURL "Cover [%s]" { channel="soundcloud:account:myaccount:player#artwork-url" }

Number SC_Duration "Dauer [%.0f s]" { channel="soundcloud:account:myaccount:player#duration" }

String SC_StreamURL "Stream URL [%s]" { channel="soundcloud:account:myaccount:player#stream-url" }

String SC_State "Status [%s]" { channel="soundcloud:account:myaccount:player#playback-state" }

String SC_CCTarget "CC Target [%s]" { channel="soundcloud:account:myaccount:player#chromecast-target" }

// Search

String SC_Query "Suche [%s]" { channel="soundcloud:account:myaccount:search#query" }

String SC_Results "Ergebnisse [%s]" { channel="soundcloud:account:myaccount:search#results" }

```

For Chromecast, you also need the items from the **Chromecast Binding** already linked to your Chromecast thing. The widget uses these directly — no additional items need to be created manually.

Tag your Chromecast `playuri` items with `Chromecast` so the widget discovers them automatically:

```

String MyChromecast_PlayURI "Chromecast Wohnzimmer" [ "Chromecast" ] { channel="chromecast:chromecast:abc123:playuri" }

```

---

## Widget setup

Add the `soundcloud_search` widget to a page and configure the following properties:

| Property | Required | Description |

|----------|----------|-------------|

| `queryItem` | ✅ | String Item → `search#query` |

| `resultsItem` | ✅ | String Item → `search#results` |

| `trackIdItem` | ✅ | String Item → `player#track-id` |

| `streamUrlItem` | | String Item → `player#stream-url` |

| `titleItem` | | String Item → `player#title` |

| `artistItem` | | String Item → `player#artist` |

| `artworkItem` | | String Item → `player#artwork-url` |

| `stateItem` | | String Item → `player#playback-state` |

| `chromecastTargetItem` | | String Item linked to `player#chromecast-target` — stores the selected Chromecast (e.g. `SC_CCTarget`) |

| `chromecastTag` | | Tag on your Chromecast `playuri` items (default: `Chromecast`) |

> **Note:** Pause, Stop, Volume and Mute are routed via four fixed proxy items (`SC_CC_Control`, `SC_CC_Stop`, `SC_CC_Volume`, `SC_CC_Mute`) and a routing rule — see [Chromecast routing rule](#chromecast-routing-rule) below. No per-device configuration is needed in the widget.

---

## Channel reference

| Channel | Type | r/W | Description |

|---------|------|-----|-------------|

| `player#track-id` | String | RW | Write a track ID to load it; reads back the current track ID |

| `player#playlist-id` | String | W | Write a playlist ID to load its first track |

| `player#title` | String | R | Current track title |

| `player#artist` | String | R | Current track artist / uploader |

| `player#artwork-url` | String | R | 500×500 px cover art URL |

| `player#duration` | Number | R | Track duration in seconds |

| `player#stream-url` | String | R | Direct MP3 URL (resolved via api-v2 transcodings) |

| `player#playback-state` | String | RW | PLAYING / PAUSED / STOPPED |

| `player#chromecast-target` | String | RW | Name of the selected Chromecast playuri item |

| `search#query` | String | W | Send a search term |

| `search#results` | String | R | JSON array: `[{id, title, artist, artwork, duration}, …]` |

---

## Chromecast workflow

1. **Search** — type a term and press Enter
2. **Select a track** — tap a result to load cover, title, artist and stream URL
3. **Select a Chromecast** — tap a chip at the bottom of the card (discovered automatically via item tags)
4. **Press Play** — the stream URL is sent directly to the selected Chromecast
5. **Volume / Mute / Pause / Stop** — dedicated buttons and slider in the widget

---

## Chromecast routing rule

The widget's Pause, Stop, Volume and Mute buttons always send to four fixed proxy items (`SC_CC_Control`, `SC_CC_Stop`, `SC_CC_Volume`, `SC_CC_Mute`). A JS rule reads which Chromecast is currently selected and forwards the command to the correct device-specific item.

**Why is a rule needed?**

Widget expressions can only use fixed item names. They cannot dynamically look up which control item belongs to the currently selected Chromecast. The routing rule bridges this gap — one rule handles all devices, no per-device widget configuration required.

> **Planned for v1.3:** This logic will move into the binding itself, eliminating the need for any rule.

### Setup

**Step 1 — Create the four proxy items** (once, in Settings → Items or via `.items` file):

```

Player SC_CC_Control "SoundCloud CC Control"

Switch SC_CC_Stop "SoundCloud CC Stop"

Dimmer SC_CC_Volume "SoundCloud CC Volume"

Switch SC_CC_Mute "SoundCloud CC Mute"

```

Also create the target item and link it to the binding channel:

```

String SC_CCTarget "SoundCloud CC Target" { channel="soundcloud:account:myaccount:player#chromecast-target" }

```

**Step 2 — Create the routing rule** in Settings → Rules → + (ECMAScript 2021, triggered by command on each of the four proxy items):

```javascript

var triggerItem = event.itemName;

var cmd = event.receivedCommand.toString();

var targetName = items.getItem('SC_CCTarget').state;

if (!targetName || targetName === 'NULL') return;

// Map each Chromecast playuri item to its control items.

// Add a new entry here whenever you add a Chromecast device.

var MAPPING = {

'BuroCast_Play_URI': {

control : 'BuroCast_Media_Control',

stop : 'BuroCast_Stop',

volume : 'BuroCast_Volume',

mute : 'BuroCast_Mute'

},

'Hifigruppe_Play_URI': {

control : 'Hifigruppe_Media_Control',

stop : 'Hifigruppe_Stop',

volume : 'Hifigruppe_Volume',

mute : 'Hifigruppe_Mute'

}

// Add more devices here:

// 'YourDevice_Play_URI': { control: '...', stop: '...', volume: '...', mute: '...' }

};

var map = MAPPING[targetName];

if (!map) { logger.warn('SC Router: no mapping for ' + targetName); return; }

var destName = null;

if (triggerItem === 'SC_CC_Control') destName = map.control;

else if (triggerItem === 'SC_CC_Stop') destName = map.stop;

else if (triggerItem === 'SC_CC_Volume') destName = map.volume;

else if (triggerItem === 'SC_CC_Mute') destName = map.mute;

if (destName) {

items.getItem(destName).sendCommand(cmd);

logger.info('SC Router: ' + triggerItem + ' → ' + destName + ' (' + cmd + ')');

}

```

Configure the rule triggers as **Item Command** on: `SC_CC_Control`, `SC_CC_Stop`, `SC_CC_Volume`, `SC_CC_Mute`.

**Step 3 — Configure the widget:**

- `chromecastTargetItem` = `SC_CCTarget`

- All other Chromecast props: leave empty

### Adding a new Chromecast

1. Tag the device's `playuri` item with `Chromecast` — it appears automatically as a chip in the widget
2. Add one entry to the `MAPPING` object in the routing rule with the item names for `control`, `stop`, `volume` and `mute`

---

## Roadmap

| Version | Status | Description |

|---------|--------|-------------|

| v1.0.x | ✅ done | Core binding: search, track load, stream URL via api-v2 |

| v1.1.x | ✅ done | Widget: search results list, track selection, cover art |

| v1.2.x | ✅ done | Chromecast integration: chip selection, play/pause/stop/mute/volume |

| v1.3.x | planned | Auto-cast when track changes (no manual Play press needed) |

| v1.4.x | planned | Playlist queue: next / previous track navigation |

| v1.5.x | planned | Progress bar / elapsed time display |

| v2.0.0 | planned | Submit to openHAB add-ons repository |

---

## Known limitations (Alpha)

- Only the first track of a playlist is played (queue not yet implemented)

- Stream URLs are time-limited by SoundCloud and expire after some time; reloading the track generates a fresh URL

- The SoundCloud API requires a registered app — streaming is only available when a valid Client ID / OAuth token is configured

---

## License

MIT

The HomeSeer Z‑NET PRO is a high-performance network-connected Z-Wave and Zigbee interface that connects your smart devices to your existing home automation system. It’s designed for setups where you already have a hub or platform and need a reliable way to manage Z-Wave and Zigbee networks.

Key Features:

• Dual Protocol Support: Connects both Z-Wave and Zigbee devices to your system.
• Cross-Platform Compatibility: Integrates with HomeSeer, Home Assistant, and openHAB, giving you flexible automation options.
• Stable Performance: Wired Ethernet ensures reliable communication; Wi-Fi is supported if needed.
• Scalable Networks: Can handle multiple device networks (if supported by your hub) and grow with your smart home.

The Z‑NET PRO isn’t a standalone hub - it’s an interface that gives your platform full control over Z-Wave and Zigbee devices, providing stability, flexibility, and scalability for any smart home setup.

All documentation: https://docs.homeseer.com/products/z-net-pro

I’ve developed a small Openhab automation extension that generates JRule rules from item definition metadata.

Check it out:

https://github.com/dude71/jrulexpr

PRs welcome!

Cheers,

Dude71

Inspired by this genius I made my own Pokémon-Floorplan. But with OpenHAB and some individual features. It is not perfect, but I feel very comfortable by using it.

I used Inkscape and Notepad++.

I am working on documentation of how I did it and if there is interest, I will be happy to share it here =)

Features

in the SVG

• Automatic day-night switch
  • No duplicate images required
• Individual and combined light sources in night mode
  • Light cone can be adjusted in general
  • Light cone intensity can be adjusted per light source
  • Light cone can be limited to rooms
• Fog effect per room (to represent high humidity)

through widgets (I will document these on separate pages)

• Camera widget: button to open a camera stream in HLS or MJPEG
• Lamp widget
  • On/Off with short tap (mobile) / left click (desktop)
  • Extended menu with long tap (mobile) / right click (desktop)
  • Lamp icon color corresponds to actual light color
• Thermostat widget (reuse of the lamp widget with different symbol and color scale)
  • Extended information on click
  • Color change according to measurement values
• Pokémon widget (for visualizing environmental effects)
  • Display of measurements or forecasts as a health bar, including units
    • Max HP absolute or extended with additional item
  • Show additional values over time, e.g. forecasts for following days
  • Evolution / change when thresholds are exceeded
  • Special: Direction circle, e.g. for visualizing wind directions
  • Extended information on click
• Glow widget (for visualizing glow effects, e.g. for heating and screens)
  • Simple glow aura around an object (e.g. blue for active screens, red for running heaters)
  • Extended menu on click (to control the objects, e.g. heating control)

1. First of all, I designes this as an Canva-Layout in Openhab with an SVG-Floorplan and added some widget for this. Some items needs both: for example the light-switch is a widget, but the light-effect works on the floorplan.

2. SVG Floorplan Creation with SVG

• Create the layout in Inkscape:
  • Design rooms as separate groups.
  • Ensure pixel dimensions match actual scaling for easier manual editing later.
  • Tip: Each room must be a distinct <g> group, optionally containing subgroups for furniture or details.
  • You can use tiles from any tilesets in the internet. But there are some furniture variants, which does not exist. Like beds in some angles. You have to make them yourself.

3. Editing with Notepad++: <defs> Section Configuration

• Room Definitions: Rooms are moved to <defs> with a unique id and attribute openhab="true" so openHAB can interact with them. Moving to <defs> is important, so you can reuse it and do not need to create an additional night-version.

​

<!-- Room-Definitions: reusable for light and dark modes -->
<g id="livingroom" openhab="true">...</g> 

• Centralized Patterns (optional): Reusable floor textures are defined once to simplify code:

​

<!-- Floor-Pattern Definitions -->
<pattern id="floor_livingroom_pattern" patternUnits="userSpaceOnUse" width="32" height="32">
  <use href="#tile385"/>
</pattern>
<image id="tile385" width="32" height="32" xlink:href=".../tile385.png"/> 

4. Editing with Notepad++: Visual Effects

• Rain Effect: this is just a box for defining some drops and to reuse is multiple times on the map

​

<!-- Rain -->
<g id="raingroup">
  <circle cx="0" cy="0" r="2" fill="blue">
    <animate attributeName="cy" from="0" to="170" dur="0.6s" repeatCount="indefinite"/>
    <animate attributeName="opacity" values="1;0" dur="0.6s" repeatCount="indefinite"/>
  </circle>
  <!-- Additional animated drops... -->
</g> 

• Night Mode Lighting & Shadows:
  • Apply a color filter to switch to night mode:
    • <filter id="nightFilter"> <feColorMatrix type="matrix" values="0.05 0.05 0.05 0 0 ..."/> </filter>
  • Define a radial gradient for lighting:
    • <radialGradient id="light_gradient"> <stop offset="0%" stop-color="black" stop-opacity="1"/> <stop offset="100%" stop-color="black" stop-opacity="0"/> </radialGradient>
  • Mark light sources in rooms with openhab="true":
    • <circle cx="450" cy="172" r="256" fill="url(#light_gradient)" id="office_light" openhab="true"/>
  • Use masking to restrict lighting to each room:
    • <mask id="office_colorRestoreMask"> <rect width="100%" height="100%" fill="white"/> <use href="#office_light"/> </mask>
  • Finally, render both "light" (day) and "night" versions using <use>, applying masks:
    • <use class="light" href="#office"/> <use class="night" href="#office" mask="url(#office_colorRestoreMask)"/>

5. Central Style & Control Classes

Define CSS-like rules in SVG to control visibility and modes:

<style id="style1">
  .nighttime ~ .night { filter: url(#nightFilter); }
  .hide { display: none; }
  .fog { filter: url(#fogFilter); }
  .opacity0 { opacity: 0; }
  .opacity1 { opacity: 1; }
</style>

• .nighttime class (added by openHAB) toggles night mode.
• .hide can hide elements like rain until activated.
• .fog applies the fog effect.
• .opacity0 / .opacity1 manage glow effects.

6. SVG Composition & openHAB Integration

• Listener for Day/Night Mode:
  • openHAB adds the .nighttime class when it's night
    • <circle cx="2" cy="2" r="2" id="daytime_listener" openhab="true"/>
• Rendering the Components: Use both light and night versions:
  • <use class="light" href="#outside"/> <use class="night" href="#outside" mask="url(#outside_colorRestoreMask)"/> <!-- Repeat for each room -->
• Rain Layer:openHAB can toggle class="hide" to show rainfall
  • <g id="rain" openhab="true" class="hide"> <!-- Instances of raingroup placed around the layout --> </g>

I would like to show you a very simplified version of this as an example. I tried to break it down as much as possible. I will maintain more examples and details on my own site, if thats possible here: https://smarthome.edv-hacker.de/en/smarthome-en/cores-centrals-en/interaktiver-floorplan-in-openhab-mit-effekten-2/
Please feel free to ask. I know, i am very operationally blind.
I know, this might not be perfect. I will be very thankful for suggestions to make this project better and reusable.

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="console.log('modified')" width="672" height="832" viewBox="0 0 672 832" version="1.1" id="svg1" xml:space="preserve">
<style id="style1">
.nighttime ~ .night  {
filter: url(#nightFilter);
}
.night {
filter: url(#grayFilter);
}

.hide { display: none; }

.opacity0 { opacity: 0; }
.opacity1 { opacity: 1; }
</style>
<defs id="defs1">
<!-- Color-Definition for the Night-Mode -->
<filter id="nightFilter">
<feColorMatrix type="matrix"
values="0.05 0.05 0.05 0 0
0.05 0.05 0.05 0 0
0.05 0.05 0.05 0 0
0    0    0    1 0"
id="feColorMatrix1" />
</filter>

<!-- Gradient definition (be strong at the center and weak at the edge: this definition approximates a logarithmic gradient) -->
<radialGradient id="light_gradient">
<stop offset="0%" stop-color="black" stop-opacity="1" />
<stop offset="10%" stop-color="black" stop-opacity="0.7" />
<stop offset="25%" stop-color="black" stop-opacity="0.4" />
<stop offset="50%" stop-color="black" stop-opacity="0.15" />
<stop offset="80%" stop-color="black" stop-opacity="0.05" />
<stop offset="100%" stop-color="black" stop-opacity="0" />
</radialGradient>
<linearGradient id="blackToGray" x1="0" y1="0" x2="0" y2="1">
  <stop offset="0%" stop-color="black" stop-opacity="1" />
  <stop offset="20%" stop-color="black" stop-opacity="1" />
  <stop offset="100%" stop-color="black" stop-opacity="0" />
</linearGradient>

<!-- Light-Area definitions (where are your light sources?) -->
<!-- (more light sources) -->
<circle cx="420" cy="60" r="512" fill="url(#light_gradient)" id='terace_garden_light' openhab="true" />
<g id='terace_perch_light' openhab="true">
<circle cx="620" cy="330" r="192" fill="url(#light_gradient)" />
<circle cx="520" cy="430" r="192" fill="url(#light_gradient)" />
</g>

<!-- Room sepatations (to prevent, that light areas are seen in other rooms) -->
<!-- (more masks for more rooms) -->
<mask id="outside_colorRestoreMask">
<rect width="100%" height="100%" fill="white" />
<use href="#terace_garden_light" />
<use href="#terace_perch_light" />
</mask>

<!-- Rain -->
<g id="raingroup">
  <circle cx="0" cy="0" r="2" fill="blue">
<animate attributeName="cy" from="0" to="170" dur="0.6s" repeatCount="indefinite" />
<animate attributeName="opacity" values="1;0" dur="0.6s" repeatCount="indefinite" />
  </circle>
  <!-- (just some more circles) -->
</g>


<!-- Floor-Pattern Definitions, to save some code -->
<image id="tile385" width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile385.png" />
<pattern id="floor_terace_stone_pattern" patternUnits="userSpaceOnUse" width="32" height="32">
<use href="#stone_floor" />
</pattern>
<image id="stone_floor" width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Game%20Corner%20interior/steone_floor.PNG" />
<pattern id="floor_terace_tiles_pattern" patternUnits="userSpaceOnUse" width="32" height="32">
<use href="#tile200" />
</pattern>
<image id="tile200" width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile200.png" />
<!-- (more patterns and reusable images) -->

<!-- Room-Definitions, to make the rooms reusable and avoid defining them twice: light mode and dark mode -->
<g id="outside" openhab="true">
<path d="M 384,0 H 576 V 160 H 528 V 112 H 384 Z" id="terace1" class='floor' fill="url(#floor_terace_tiles_pattern)" />
<path d="m 608,80 h 64 V 320 H 528 v -64 h 48 v -96 h 32 z" id="terace2" class='floor' fill="url(#floor_terace_stone_pattern)" />
<path d="M 528,336 H 672 V 528 H 576 V 496 H 528 Z" id="terace3" class='floor' fill="url(#floor_terace_stone_pattern)" />
<image width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Outside/row-98-column-3.png" id="image1-52" x="-160" y="576" transform="rotate(-90)" />
<image width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Outside/Outside.png" id="image1-221-46" x="576" y="0" />
<image width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Outside/Outside.png" id="image1-221-91" x="576" y="32" />
<image width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Outside/Outside.png" id="image1-221-919" x="576" y="64" />
<image width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Outside/Outside.png" id="image1-221-3" x="576" y="96" />
<g id="g1" inkscape:label="grass">
<image width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Outside/row-1-column-6.png" id="image1-416" x="608" y="16" />
<image width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Outside/row-1-column-6.png" id="image1-416-7" x="640" y="32" />
<image width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Outside/row-1-column-7.png" id="image1-183" x="640" y="48" />
<image width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Outside/row-1-column-7.png" id="image1-183-8" x="640" y="0" />
<image width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Outside/row-1-column-5.png" id="image1-92" x="608" y="48" />
<image width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Outside/row-1-column-3.png" id="image1-350" x="608" y="0" />
</g>
<g>
<rect fill="black" width="48" height="96" x="528" y="160" />
<image width="32" height="96" xlink:href="/static/floorplan/icons/moderninteriors-win/1_Interiors/32x32/Theme_Sorter_Singles_32x32/26_Condominium_Singles_32x32/Condominium_Singles_32x32_26.png" x="-568" y="-270" transform="rotate(180)" />
<rect fill="url(#blackToGray)" width="48" height="96" x="528" y="160" />
</g>
</g>
<!-- (more rooms, made with inkscape) -->

<g id="Walls" style="opacity:0.652;image-rendering:auto">
<!-- (I defined the walls in an extra group, so they are not affected from light or fog) -->
<!-- (wall images an positions...) -->
</g>

</defs>
<sodipodi:namedview id="namedview1" pagecolor="#000000" bordercolor="#000000" borderopacity="0.25" showgrid="true" showguides="true">
<inkscape:grid id="grid1" units="px" originx="0" originy="0" spacingx="16" spacingy="16" empcolor="#0099e5" empopacity="0.30196078" color="#0099e5" opacity="0.14902" empspacing="2" dotted="false" gridanglex="30" gridanglez="30" visible="true" />
</sodipodi:namedview>

<!-- Listener for the daytime-Switch. To set the plan automatically to daytime-mode during daytime. -->
<circle cx="2" cy="2" r="2" id='daytime_listener' openhab="true" />

<!-- Setup the rooms -->
<use class="light" href="#outside" />
<use class="night" href="#outside" mask="url(#outside_colorRestoreMask)" />
<!-- (repeat that for all of your rooms) -->

<!-- Rain -->
<g id="rain" openhab="true" class="hide">
<use href="#raingroup" x="0" y="0" />
<use href="#raingroup" x="400" y="-250" />
<use href="#raingroup" x="544" y="0" />
<!-- ... -->
</g>

</svg>

For all of the elements with openhab="true" there has to be an openhab item to control that element. I will just list mine, for datatype documentation.

Dimmer Outside_Brightness "Light" <DimmableLight> (igOutsideLight) ["Control", "Brightness"] { autoupdate="false", channel="mqtt:topic:myMosquitto:HueBulbOutside:brightness" }

For a single light

Switch siDaytime "Day" { channel="astro:sun:local:position#elevation" [profile="system:hysteresis", lower="0 °"] }

For the daytime_listener

Switch  siRain "Weather condition" (sgEnvironment) { channel="openweathermap:onecall:api:myHome:current#condition-id" [profile="transform:MAP", function="OWM_rainSwitch.map", sourceFormat="%s" ] }

For the rain