# \[APP\]\[Pro\] Dashboard Studio - A completely free-form dashboard designer

**URL:** <https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169>\
**Category:** Apps\
**Tags:** dashboard, homey-pro\
**Created:** [February 15, 2026, 7:45pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169 "2026-02-15T19:45:30Z")\
**Posts on this page:** 20\
**Page:** 56

<div class="post-metadata">

**Author:** ![Hakan\_Carlsson](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/hakan_carlsson/32/11380_2.png) [@Hakan\_Carlsson](https://community.homey.app/u/Hakan_Carlsson)\
**Post date:** [June 18, 2026, 6:18am UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/1111 "2026-06-18T06:18:28Z")

</div>

Hi,

I think I may have found an issue with the Switch/Button widget in v1.10.2.

I tested with both Yale locks and Hue lights.

- Homey topic updates correctly
- Data Stream Explorer updates correctly
- Text widget updates correctly
- Switch/Button widget does not update when the topic changes externally (Homey Flow or device state change)

Example:

Topic:  
`kontor/locked`

When the lock is changed by a Homey Flow, the topic value changes immediately in Data Stream Explorer, but the Switch/Button widget keeps its previous visual state until I click it myself.

I can reproduce the same behavior with Hue on/off topics.

Is this a known issue or am I missing a setting?

---

<div class="post-metadata">

**Author:** ![Amersfoort](https://avatars.discourse-cdn.com/v4/letter/a/94ad74/32.png) [@Amersfoort](https://community.homey.app/u/Amersfoort)\
**Post date:** [June 18, 2026, 6:53am UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/1112 "2026-06-18T06:53:16Z")

</div>

I was curious if I could put an iframe widget in an SVG, but then I ran into all kinds of browser security measures.  
A small prototype of what this might look like in Dashboard Studio.

The weather widget was generated by Gemini as a Homey script that generates an SVG file.

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/5/c/5c5a9028a2c2b5ebefa430918edc5e402868ee05.jpeg)

---

<div class="post-metadata">

**Author:** ![Amersfoort](https://avatars.discourse-cdn.com/v4/letter/a/94ad74/32.png) [@Amersfoort](https://community.homey.app/u/Amersfoort)\
**Post date:** [June 18, 2026, 7:06am UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/1113 "2026-06-18T07:06:38Z")

</div>

Have you entered the device’s on/off variable in State (on/off)?

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/1/0/10c65386ac54d24f378cd9af80286dd1be44543e.png)

---

<div class="post-metadata">

**Author:** ![Hakan\_Carlsson](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/hakan_carlsson/32/11380_2.png) [@Hakan\_Carlsson](https://community.homey.app/u/Hakan_Carlsson)\
**Post date:** [June 18, 2026, 8:05am UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/1114 "2026-06-18T08:05:17Z")

</div>

Thank you, that did it 😊

---

<div class="post-metadata">

**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\
**Post date:** [June 18, 2026, 10:23am UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/1115 "2026-06-18T10:23:11Z")

</div>

# NEW Stable version v1.10.3/4

- Improved: Light Grid widget - Item Height (px), Item Width (px), and Item Spacing (px) in Grid Layout (0 = auto; same defaults as before).
- New: Light Grid widget - per-light Output Mode (Light or Switch). Switch mode toggles on click and sends On/Off values to output topics (optional Go to Page or Open URL actions).
- Improved: Text widget markdown now supports sizing of images and icons.
- Fixed: Text widget inline topics now parse icons and special markdown syntax.
- Fixed: Icon Style slideout - Style dropdown no longer clips at the slideout boundary.

## Light Grid:

> [@widameista](#):
>
> What would be the best option to have same layout as light grid but for shutters. So 10 shutters in a row with open/close button.

> [@Crazy\_Avocado](#):
>
> Yes I am using Light Grid but looking to change lightning and heating to buttons only

Light Grid items can now be configured as a regular toggle switch:

 ![afbeelding](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/2/c/2cf2bbf1c0d9a82bac2d6beb6f77b3b62c820b10.jpeg)

> [@widameista](#):
>
> Is there a way to reduze the size of the lights grid? Condense …

You can now change the Item Height, Width and Item Spacing in the Grid Layout slideout 👍

 ![afbeelding](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/2/9/29df2676b08f54f406f4909d38b1822191869880.jpeg)

## Text Widget:

> [@Amersfoort](#):
>
> Size, color (no “tint with icon color” option) and position differ from the default Phosphor icons. I have to define the complete SVG myself, including format and color, which is challenging with dynamic icons.

It now possible to change the size of the icons and images inside [the text widget markdown](https://satoer.com/dashboardstudio/?docs=Data+Types+%26+Formats&widget=markdown-formatting#icon-and-image-sizing). No tinting though.

---

<div class="post-metadata">

**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\
**Post date:** [June 18, 2026, 11:18am UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/1116 "2026-06-18T11:18:11Z")

</div>

> [@widameista](#):
>
> The weather widget is just an iframe. Is that possible?

> [@Satoer](#):
>
> No, sorry. To be honest, a big part of that decision is to protect the visual style of the dashboard.

> [@Satoer](#):
>
> Anyway, I think it is perfectly doable to create a nice weather “widget” with the exact same data using a Homey script and a text widget. I shall make an example tutorial for you on how to create something like that without butchering the style.

 ![afbeelding](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/a/d/add09482f81070c0f716fc597513730ccd3bef74.png)

This is generated with a Homeyscript that passes markdown data to a Text widget.

I did not write the script myself, it is entirely coded by Gemini. LLM Ai chat (Like Gemini, ChatGPT, Claude) models are incredibly skilled to write Homey scripts, and if you feed it also with the help file it can perfectly generate the markdown for such a widget. In this case I created two Homeyscripts one that generates the 7 day forecast, and one that generates the coming 6 hours.

This was the AI prompt I did for the 7 day forecast:

> I am using the Homey app dashboard studio and want to create a 7 day weather widget for “Heidenheim an der Brenz”. Could you help me with the Homeyscript code to generate a horizontal markdown table for the text widget? Inside each cell, I need the day in German, a weather icon like a cloud or sun, the max temperature as just a number with no label, and the min temperature as just a number with no label. This is the help file with the specialised markdown that can be used: [Help file snippet]

In the online [help file](https://satoer.com/dashboardstudio/?docs=Data+Types+%26+Formats&widget=markdown-formatting)you can copy all the markdown with the copy button (if you hover above the titles):

 ![afbeelding](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/e/c/ec94c6ba8fa470b14f9a02c8ef5454096738afd5.png)

I copied this and pasted it below above prompt.  
Gemini generated working homeyscript first try, but after some follow up requests (Like adjustable icon size and able to set a location name instead of longitude and latitude) this was the final code for the 7 day forecast:

```auto
// --- Configuration ---
const LOCATION = "Heidenheim an der Brenz";
const ICON_SIZE = 50; // Size in pixels
const TIMEZONE = "Europe/Berlin";

try {
  const geoUrl = `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(LOCATION)}&count=1&format=json`;
  const geoResponse = await fetch(geoUrl);
  if (!geoResponse.ok) throw new Error(`Geocoding fetch failed: ${geoResponse.status}`);
  
  const geoData = await geoResponse.json();
  if (!geoData.results || geoData.results.length === 0) throw new Error(`Location not found: ${LOCATION}`);
  
  const lat = geoData.results[0].latitude;
  const lon = geoData.results[0].longitude;

  const url = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&daily=weather_code,temperature_2m_max,temperature_2m_min&timezone=${encodeURIComponent(TIMEZONE)}`;
  const response = await fetch(url);
  if (!response.ok) throw new Error(`Weather fetch failed: ${response.status}`);
  
  const data = await response.json();
  const daily = data.daily;
  
  const daysGerman = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
  
  function getWeatherIcon(code) {
    let iconName = "cloud";
    if (code === 0) iconName = "sun"; 
    if ([1, 2, 3].includes(code)) iconName = "cloud-sun"; 
    if ([45, 48].includes(code)) iconName = "cloud-fog"; 
    if ([51, 53, 55, 56, 57].includes(code)) iconName = "cloud-snow"; 
    if ([61, 63, 65, 66, 67, 80, 81, 82].includes(code)) iconName = "cloud-rain"; 
    if ([71, 73, 75, 77, 85, 86].includes(code)) iconName = "snowflake"; 
    if ([95, 96, 99].includes(code)) iconName = "cloud-lightning"; 
    
    return `:ph-${iconName}|${ICON_SIZE}:`;
  }

  let rowDays = "|";
  let rowSeps = "|";
  let rowIcons = "|";
  let rowMax = "|";
  let rowMin = "|";
  
  for (let i = 0; i < 7; i++) {
    const date = new Date(daily.time[i]);
    const dayName = daysGerman[date.getDay()];
    const icon = getWeatherIcon(daily.weather_code[i]);
    const maxTemp = Math.round(daily.temperature_2m_max[i]) + "°C";
    const minTemp = Math.round(daily.temperature_2m_min[i]) + "°C";
    
    rowDays += ` ${dayName} |`;
    rowSeps += ` :---: |`; 
    rowIcons += ` ${icon} |`; 
    rowMax += ` ${maxTemp} |`;
    rowMin += ` ${minTemp} |`;
  }
  
  return `${rowDays}\n${rowSeps}\n${rowIcons}\n${rowMax}\n${rowMin}\n`;
  
} catch (error) {
  return `Error: ${error.message}`;
}

```

And with a similar prompt This was the final Homeyscript code for the 6 hour forecast:

```auto
// --- Configuration ---
const LOCATION = "Heidenheim an der Brenz";
const ICON_SIZE = 50; // Size in pixels
const TIMEZONE = "Europe/Berlin";

try {
  const geoUrl = `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(LOCATION)}&count=1&format=json`;
  const geoResponse = await fetch(geoUrl);
  if (!geoResponse.ok) throw new Error(`Geocoding fetch failed: ${geoResponse.status}`);
  
  const geoData = await geoResponse.json();
  if (!geoData.results || geoData.results.length === 0) throw new Error(`Location not found: ${LOCATION}`);
  
  const lat = geoData.results[0].latitude;
  const lon = geoData.results[0].longitude;

  const url = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&current=temperature_2m,relative_humidity_2m,wind_speed_10m,surface_pressure&hourly=temperature_2m,weather_code&timezone=${encodeURIComponent(TIMEZONE)}`;
  const response = await fetch(url);
  if (!response.ok) throw new Error(`Weather fetch failed: ${response.status}`);
  
  const data = await response.json();
  const current = data.current;
  const hourly = data.hourly;
  
  function getWeatherIcon(code) {
    let iconName = "ph-cloud"; 
    if (code === 0) iconName = "sun"; 
    if ([1, 2, 3].includes(code)) iconName = "cloud-sun"; 
    if ([45, 48].includes(code)) iconName = "cloud-fog"; 
    if ([51, 53, 55, 56, 57].includes(code)) iconName = "cloud-snow"; 
    if ([61, 63, 65, 66, 67, 80, 81, 82].includes(code)) iconName = "cloud-rain"; 
    if ([71, 73, 75, 77, 85, 86].includes(code)) iconName = "snowflake"; 
    if ([95, 96, 99].includes(code)) iconName = "cloud-lightning"; 

    return `:ph-${iconName}|${ICON_SIZE}:`;
  }

  const now = new Date();
  let startIndex = 0;
  for (let i = 0; i < hourly.time.length; i++) {
    const d = new Date(hourly.time[i]);
    if (d.getTime() > now.getTime() - 60 * 60 * 1000) {
      startIndex = i;
      break;
    }
  }

  const currentTemp = Math.round(current.temperature_2m) + "°C";
  const windSpeed = current.wind_speed_10m.toFixed(1);
  const humidity = current.relative_humidity_2m;
  const pressureMmHg = Math.round(current.surface_pressure * 0.750062);
  
  let markdown = `:ph-thermometer: ${currentTemp} &nbsp;&nbsp;&nbsp;&nbsp; :ph-wind: ${windSpeed} m/s &nbsp;&nbsp;&nbsp;&nbsp; :ph-drop: ${humidity}% &nbsp;&nbsp;&nbsp;&nbsp; :ph-gauge: ${pressureMmHg} mmHg\n---\n`;

  let rowHours = "|";
  let rowSeps = "|";
  let rowIcons = "|";
  let rowTemps = "|";

  for (let i = 0; i < 6; i++) {
    const idx = startIndex + i;
    if (idx >= hourly.time.length) break;

    const d = new Date(hourly.time[idx]);
    const hours = String(d.getHours()).padStart(2, '0');
    const minutes = String(d.getMinutes()).padStart(2, '0');
    const timeStr = `${hours}:${minutes}`;

    const icon = getWeatherIcon(hourly.weather_code[idx]);
    const temp = Math.round(hourly.temperature_2m[idx]) + "°C";

    rowHours += ` ${timeStr} |`;
    rowSeps += ` :---: |`;
    rowIcons += ` ${icon} |`; 
    rowTemps += ` ${temp} |`;
  }

  return `${markdown}${rowHours}\n${rowSeps}\n${rowIcons}\n${rowTemps}\n`;

} catch (error) {
  return `Error: ${error.message}`;
}

```

Then create the following Homey Flow and add the code to the two Homeyscripts (that returns text tags):

 ![afbeelding](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/e/d/ed473a314e1dd19e9c6baac2cd8c1f6035df056c.png)

Right click the day and time node and press “execute from here” to let it update the topics.  
Save and Open the Dashboard studio editor. (Make sure you are on the latest v1.10.3 version, you can see this in the top of the editor)  
You can make the “Text Content” setting dynamic and add the topic in there, but since these are two topics, you can also add inline topics inside the text content:

```auto
# :ph-thermometer-simple: 7 Tage Wetterdaten für Heidenheim an der Brenz
---
{{weather7day}}

{{weather5hr}}

```

 ![afbeelding](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/c/2/c20d6d68b64e843ddb5e874b173ce10688e51986.png)

I also changed these settings:

 ![afbeelding](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/2/f/2f3b5a32ace4b0b83cc6ae7e15eaee44207a77d7.png)

And… “Zack die Bohne!” A beautiful weather forecast that completely fits the theme of the dashboard. And when you switch themes it completely blends with the theme:

 ![afbeelding](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/8/6/86cacc00525a673d1f225fda2f4b76e739fdf372.jpeg)

Nice weather over there! 😎 🌞

---

<div class="post-metadata">

**Author:** ![widameista](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/widameista/32/23333_2.png) [@widameista](https://community.homey.app/u/widameista)\
**Post date:** [June 18, 2026, 11:37am UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/1117 "2026-06-18T11:37:50Z")

</div>

WOW, i see you like challenges 🙂 now i do not have any reason not to switch, only thing i need is time!

---

<div class="post-metadata">

**Author:** ![widameista](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/widameista/32/23333_2.png) [@widameista](https://community.homey.app/u/widameista)\
**Post date:** [June 18, 2026, 1:55pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/1118 "2026-06-18T13:55:56Z")

</div>

started to play around…  
question: what is the widget “label” got for. I can do the same (and more) with text, right?  
And how do i realize things like this:

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/4/9/49724f8d4a655a2f5d2aa00a8649525fc0ab7f1a.png)

---

<div class="post-metadata">

**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\
**Post date:** [June 18, 2026, 3:20pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/1119 "2026-06-18T15:20:45Z")

</div>

> [@widameista](#):
>
> question: what is the widget “label” got for. I can do the same (and more) with text, right?

The text widget is way more heavy with the full markdown engine it is using. Sometimes you just need a simple label somewhere, than it is way more efficient to use the label widget. So yes, the text widget can do the same, but uses more system resources.

> [@widameista](#):
>
> And how do i realize things like this:
> 
> ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/4/9/49724f8d4a655a2f5d2aa00a8649525fc0ab7f1a.png)

Easiest way is probably just the text widget:

```auto
### 🚙 Wohnmobil 🚙

| | |
| :--- | ---: |
| :ph-thermometer: Temp Womo | 27.7 °C |
| :ph-thermometer-cold: Temp Kühli | 5.7 °C |
| :ph-drop: Wasser | 132 L |
| :ph-gas-pump: Gas vorne | 100 % |
| :ph-gas-pump: Gas hinten | 0 % |
| :ph-battery-charging: Batterie | 199 Ah |
| :ph-solar-panel: Solar heute | 10 Ah |

```

 ![afbeelding](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/d/d/dd8de13eb972339a5a5f41bc346adcdac168d308.png)

Replace the values for topics like: `{{temperature_womo}} `  
Play a bit with the table styles and the Table Text typography Vertical Spacing and Line Height.

---

<div class="post-metadata">

**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\
**Post date:** [June 18, 2026, 3:45pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/1121 "2026-06-18T15:45:56Z")

</div>

> [@widameista](#):
>
> how did you manage to get the first row left and the second row right aligned.

> [@Satoer](#):
>
> `| :--- | ---: |`

This is the syntax how to align rows. All available options are explained in is in the [Markdown reference help file](https://satoer.com/dashboardstudio/?docs=Data+Types+%26+Formats&widget=markdown-formatting) and more regular info about the text widget [in this help section.](https://satoer.com/dashboardstudio/?docs=Widgets&widget=text)

I also just written the methods how to create that weather widget in the [tips section of the documentation](https://satoer.com/dashboardstudio/?docs=Tips+%26+Tricks&widget=weather-widget-ai). (Not yet available in the help file inside the editor)

---

<div class="post-metadata">

**Author:** ![widameista](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/widameista/32/23333_2.png) [@widameista](https://community.homey.app/u/widameista)\
**Post date:** [June 18, 2026, 3:51pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/1122 "2026-06-18T15:51:37Z")

</div>

after asking i found out myself 🙂 you are really brilliant

---

<div class="post-metadata">

**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\
**Post date:** [June 18, 2026, 5:08pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/1123 "2026-06-18T17:08:06Z")

</div>

Well… that credit goes to user @Amersfoort, Column alignment was his request and idea to do it this way. 🤣

---

<div class="post-metadata">

**Author:** ![widameista](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/widameista/32/23333_2.png) [@widameista](https://community.homey.app/u/widameista)\
**Post date:** [June 19, 2026, 8:50pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/1124 "2026-06-19T20:50:04Z")

</div>

![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/c/4/c4b3beefdaedc8d8bef7522233ea9b2ccdd98d7b.png)

could you have a look at the two widgets with the titel “Lampen”.  
the left one is a light grid, the right one a simple container.  
all paddings are set to 0 and text settings for the widget label are identic, but space between top border and text is different.

any idea?

---

<div class="post-metadata">

**Author:** ![Amersfoort](https://avatars.discourse-cdn.com/v4/letter/a/94ad74/32.png) [@Amersfoort](https://community.homey.app/u/Amersfoort)\
**Post date:** [June 20, 2026, 7:31am UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/1125 "2026-06-20T07:31:06Z")

</div>

> [@Satoer](#):
>
> And before you ask the question @Amersfoort 😆 … No sorry, Markdown tables do not support cell coloring 😅 , so I am afraid you are still stuck with the svg method for that.

> [@Satoer](#):
>
> Cell coloring is now possible in a markdown grid! use [cell #hex] or [cell@themeToken] at the start of a cell.

> [@Satoer](#):
>
> ## Text Widget:
> 
> > [@Amersfoort](#):
> >
> > Size, color (no “tint with icon color” option) and position differ from the default Phosphor icons. I have to define the complete SVG myself, including format and color, which is challenging with dynamic icons.
> 
> It now possible to change the size of the icons and images inside [the text widget markdown](https://satoer.com/dashboardstudio/?docs=Data+Types+%26+Formats&widget=markdown-formatting#icon-and-image-sizing). No tinting though.

My custom icons are black in a Markdown table. Hopefully, it is possible to set a color (“tinting”) for external icons in a table. Sometimes things that seem impossible are actually possible with some DS magic, as can be read above.

---

<div class="post-metadata">

**Author:** ![Jean\_S](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jean_s/32/172119_2.png) [@Jean\_S](https://community.homey.app/u/Jean_S)\
**Post date:** [June 20, 2026, 1:28pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/1126 "2026-06-20T13:28:34Z")

</div>

Hi Satoer,

I’ve only just started playing around with the app, but I already wanted to say: impressive work. It’s clear that a lot of effort and passion has gone into this project.

Thanks for sharing it with the Homey community!

Best regards, Jan

---

<div class="post-metadata">

**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\
**Post date:** [June 20, 2026, 2:53pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/1127 "2026-06-20T14:53:49Z")

</div>

# [NEW TEST version 1.10.5](https://homey.app/a/com.satoer.dashboardstudio/test/):

- **Fixed:** Widget labels line up with the container when padding is zero, and label settings are named and organised the same way on every widget.

> [@widameista](#):
>
> ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/c/4/c4b3beefdaedc8d8bef7522233ea9b2ccdd98d7b.png)
> 
> could you have a look at the two widgets with the titel “Lampen”.  
> the left one is a light grid, the right one a simple container.  
> all paddings are set to 0 and text settings for the widget label are identic, but space between top border and text is different.

This was indeed a bug. I have fixed this. and released as test version this time. The problem is that all current dashboards Container widget labels will shift by this change. I could add a migration rule that adds an X/Y correction to the Typography section, but it is a kind of ugly fix. Better to change the padding. Lets see what the backlash is in the testing community 😅

> [@Amersfoort](#):
>
> Sometimes things that seem impossible are actually possible with some DS magic, as can be read above.

I have never said it is impossible, I just mentioned that it is not supported in the released version (Because I know you requested it and will remind me to it 😛 ). Same as the tinting of images. Never said is is impossible. But I only partially fulfilled your request.

> [@Jean\_S](#):
>
> I’ve only just started playing around with the app, but I already wanted to say: impressive work. It’s clear that a lot of effort and passion has gone into this project.
> 
> Thanks for sharing it with the Homey community!

Thanks Jan. Glad you like it. 😊

---

<div class="post-metadata">

**Author:** ![Amersfoort](https://avatars.discourse-cdn.com/v4/letter/a/94ad74/32.png) [@Amersfoort](https://community.homey.app/u/Amersfoort)\
**Post date:** [June 20, 2026, 3:34pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/1128 "2026-06-20T15:34:49Z")

</div>

> [@Satoer](#):
>
> Lets see what the backlash is in the testing community

At first glance, no problems with my screens.

---

<div class="post-metadata">

**Author:** ![Pablo\_Saiz](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/pablo_saiz/32/120806_2.png) [@Pablo\_Saiz](https://community.homey.app/u/Pablo_Saiz)\
**Post date:** [June 20, 2026, 9:50pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/1129 "2026-06-20T21:50:15Z")

</div>

Hi!!! wowww amazing job!!  
Ho did you do to get the album image? I am getting crazy and I cannot get it..

I am using Wiim by the way … please! help me!

---

<div class="post-metadata">

**Author:** ![Amersfoort](https://avatars.discourse-cdn.com/v4/letter/a/94ad74/32.png) [@Amersfoort](https://community.homey.app/u/Amersfoort)\
**Post date:** [June 21, 2026, 7:04am UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/1131 "2026-06-21T07:04:00Z")

</div>

Retrieving a media player (such as a Wiim) image is quite tricky:  
Steps:

- start music with album art via the Homey Wiim app
- check in the [Homey developer app](https://tools.developer.homey.app/tools/images) if you can see the album art
- retrieve the album art using a Homey script; see my [previous script](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/138) suitable for Sonos, but the essence is the same.

If you have never created a Homey script or JavaScript before, it might not be wise to tackle this case first.

If you need more help, please let me know.

My latest version of the player in Dashboard Studio:

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/8/1/81bd82e4929293f01d0cd968920eefec4501549a.jpeg)

---

<div class="post-metadata">

**Author:** ![Amersfoort](https://avatars.discourse-cdn.com/v4/letter/a/94ad74/32.png) [@Amersfoort](https://community.homey.app/u/Amersfoort)\
**Post date:** [June 21, 2026, 10:42am UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/1132 "2026-06-21T10:42:41Z")

</div>

This is a more generic Sonos (I don’t own other devices) script for retrieving the album art. I think other media players have similar functionality:

Note:

- fill in your own Sonos\_id or media player id in const SONOS\_ID
- fill in your own Homey cloud id in HOMEY\_API\_ID
- variations in settings in various media players are possible.

The result is an url with album art, which can be used in a Dashboard Studio image.  
The media player has to play to see the image.

```auto
// 1. Configuration (Constants outside of the logic)
const SONOS_ID = 'your media player id';
// Unique Homey cloud ID used for the API endpoint
const HOMEY_API_ID = 'homey cloud id found in Homey developer tools -> system -> cloudid';
const BASE_URL = "https://" + HOMEY_API_ID + ".homey.athom-prod-euwest1-001.homeypro.net/api/image/";

// 2. Retrieve the specific device
// This object contains extensive metadata and must be cleaned up at the end
let sonos = await Homey.devices.getDevice({ id: SONOS_ID });

// 3. Validation and early exit strategy (Guard Clauses)
if (!sonos) {
    console.error("Configuration error: Sonos device not found.");
    sonos = null; // Clean up immediately upon early exit
    return null;
}

// 4. Check status and retrieve ID directly
// We stop immediately if nothing is playing, which saves system resources.
const isPlaying = sonos.capabilitiesObj?.speaker_playing?.value;
const imageId = isPlaying ? sonos.images[0]?.imageObj?.id : null;

if (!imageId) {
    console.log("No active image available (Sonos is paused or no ID found).");
    sonos = null; // Clean up immediately upon early exit
    return "";
}

// 5. Generate URL via an Array builder to prevent unnecessary string allocations
let urlBuilder = [];
const cacheBuster = Math.floor(Math.random() * 10000) + 1;

urlBuilder.push(BASE_URL);
urlBuilder.push(imageId);
urlBuilder.push("?rand=");
urlBuilder.push(cacheBuster);

// Single concatenation of the URL string
const finalUrl = urlBuilder.join('');
console.log("Generated URL: " + finalUrl);

// 6. EXPLICIT CLEANUP FOR THE GARBAGE COLLECTOR
// Set the heavy device object and temporary array directly to null
sonos = null;
urlBuilder = null;

// 7. Return result
return finalUrl;

```

[Previous page](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169.md?page=55)

[Next page](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169.md?page=57)