# \[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:** 14

<div class="post-metadata">

**Author:** ![Rob\_G](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/rob_g/32/79108_2.png) [@Rob\_G](https://community.homey.app/u/Rob_G)\
**Post date:** [March 11, 2026, 5:58pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/266 "2026-03-11T17:58:43Z")

</div>

Sure! I want to be able to show weather data from online sources. I found a nice one, that output SVG. If that would be supported, you could use this:

 ![.png](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/0/2/02dac673e7c618b5b65e147ff76f3eebee7ab9e8.png)

More info: [Yr - Roermond - Graph](https://www.yr.no/en/forecast/graph/2-2748000/The%20Netherlands/Limburg/Roermond%20Municipality/Roermond)

---

<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:** [March 11, 2026, 6:11pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/267 "2026-03-11T18:11:59Z")

</div>

> [@Amersfoort](#):
>
> Weren’t they jealous at Athom that they didn’t come up with such an app themselves? Or is their strategy to keep it as simple (and perhaps therefore limited) as possible?

Haha, I haven’t heard much from them. Only a question about whether I’d considered a security system; since it was already on my roadmap, I went ahead and implemented it. They won’t be jealous. If I were Athom, I would also implement a rigid, foolproof and simple dashboard system, it aligns with their overall philosophy. Tested apps, dedicated widgets, and no complex logic required.

To be fair, I’m actually surprised by how many users have picked up Dashboard Studio so quickly. It’s not that complicated to attach properties to dynamic values, but the sheer amount of adjustability can definitely be overwhelming for a beginner. Anyhow, I’m just glad I could transform my project into a highly customizable dashboard alternative for everyone.

I have plans to make it more user-friendly, like adding widget presets and video tutorials… but everything takes time 😅

---

<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:** [March 11, 2026, 6:17pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/268 "2026-03-11T18:17:35Z")

</div>

Wow, I have never seen a weather graph like that with all the icons! 😮

Is this something you’re looking to create? I’m curious how you’d approach this using an image widget with SVG support. Looking at it, I think it’s doable in Dashboard Studio, though it would probably require some pretty clever scripting to pull off. This is no beginner stuff. 😅

---

<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:** [March 11, 2026, 6:30pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/269 "2026-03-11T18:30:27Z")

</div>

See my post [146](https://community.homey.app/t/app-pro-test-new-dashboard-studio-a-completely-free-form-dashboard-designer/151169/149) about SVG. Integration with Homey data (variables and json arrays) to draw graphs needed.

---

<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:** [March 11, 2026, 6:38pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/270 "2026-03-11T18:38:37Z")

</div>

But would you like to have some kind of edit box where you can paste (or connect and send dynamically) svg data, or just as Rob\_G want the image widget to be compatible with an url pointing to an svg file?

---

<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:** [March 11, 2026, 6:40pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/271 "2026-03-11T18:40:31Z")

</div>

> [@Satoer](#):
>
> I have plans to make it more user-friendly, like adding widget presets and video tutorials

This type of flexible software will differ from original video in no time. I think the documentation you have now will be informative and manageable in less time with more accuracy.

---

<div class="post-metadata">

**Author:** ![Rob\_G](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/rob_g/32/79108_2.png) [@Rob\_G](https://community.homey.app/u/Rob_G)\
**Post date:** [March 11, 2026, 6:43pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/272 "2026-03-11T18:43:54Z")

</div>

Anybody interested in showing Buienradar rain forcast in a graph? I figured it out.

---

<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:** [March 11, 2026, 6:47pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/273 "2026-03-11T18:47:45Z")

</div>

A svg image with an url reference is already available with external icons.  
Advanced graphs with svg and Homey data is what I mean, could be done with a line editor. Question is: how to integrate svg with Homey data?

---

<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:** [March 11, 2026, 7:04pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/274 "2026-03-11T19:04:20Z")

</div>

> [@Satoer](#):
>
> I’m also open to suggestions on how a group option should look and how the user interaction should feel. Would a simple Group and Ungroup button suffice?

Make an additional reference to an existing container for each component. The condition is that all components are located within the coordinates of the container. If the container moves a number of x or y positions, the related components are moved by the same amount. This can already be used to a limited extent by manually selecting several components at the same time.

---

<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:** [March 11, 2026, 7:32pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/275 "2026-03-11T19:32:32Z")

</div>

A svg-made weather graph in my older (non Dashboard Studio) dashboard . Not possible with standard graph options.

 ![capture_temp](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/f/6/f6e1299d3e2a23cb4d29b36203a3fa378361d5a5.jpeg)

---

<div class="post-metadata">

**Author:** ![Rob\_G](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/rob_g/32/79108_2.png) [@Rob\_G](https://community.homey.app/u/Rob_G)\
**Post date:** [March 11, 2026, 7:32pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/276 "2026-03-11T19:32:49Z")

</div>

@Satoer A question: can I send JSON formatted data like “Send Insights”, also manually to a widget?  
I just fetched rain forecast data from the web and I converted it to this:

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

It works when I convert it to a Graph widget. However, if I switch on the y-axis, I get an error:

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/a/b/ab5ca133e2eeff0b7b2e8ebe99659625c6b232ba.png)

Toggling it a few times, will crash Dashboard Studio completely…

This is the array I’m sending:  
[{“t”:“2026-03-11T20:25:00Z”,“v”:0},{“t”:“2026-03-11T20:30:00Z”,“v”:0},{“t”:“2026-03-11T20:35:00Z”,“v”:0},{“t”:“2026-03-11T20:40:00Z”,“v”:0},{“t”:“2026-03-11T20:45:00Z”,“v”:0},{“t”:“2026-03-11T20:50:00Z”,“v”:0},{“t”:“2026-03-11T20:55:00Z”,“v”:0},{“t”:“2026-03-11T21:00:00Z”,“v”:0},{“t”:“2026-03-11T21:05:00Z”,“v”:0},{“t”:“2026-03-11T21:10:00Z”,“v”:0},{“t”:“2026-03-11T21:15:00Z”,“v”:0},{“t”:“2026-03-11T21:20:00Z”,“v”:0},{“t”:“2026-03-11T21:25:00Z”,“v”:0},{“t”:“2026-03-11T21:30:00Z”,“v”:0},{“t”:“2026-03-11T21:35:00Z”,“v”:0},{“t”:“2026-03-11T21:40:00Z”,“v”:0},{“t”:“2026-03-11T21:45:00Z”,“v”:0},{“t”:“2026-03-11T21:50:00Z”,“v”:0},{“t”:“2026-03-11T21:55:00Z”,“v”:0},{“t”:“2026-03-11T22:00:00Z”,“v”:0},{“t”:“2026-03-11T22:05:00Z”,“v”:0},{“t”:“2026-03-11T22:10:00Z”,“v”:0},{“t”:“2026-03-11T22:15:00Z”,“v”:0},{“t”:“2026-03-11T22:20:00Z”,“v”:0}]

---

<div class="post-metadata">

**Author:** ![Rob\_G](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/rob_g/32/79108_2.png) [@Rob\_G](https://community.homey.app/u/Rob_G)\
**Post date:** [March 11, 2026, 7:34pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/277 "2026-03-11T19:34:21Z")

</div>

Nice!

---

<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:** [March 11, 2026, 7:58pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/278 "2026-03-11T19:58:22Z")

</div>

> [@Rob\_G](#):
>
> This is the array I’m sending:  
> [{“t”:“2026-03-11T20:25:00Z”,“v”:0},{“t”:“2026-03-11T20:30:00Z”,“v”:0},{“t”:“2026-03-11T20:35:00Z”,“v”:0},{“t”:“2026-03-11T20:40:00Z”,“v”:0},{“t”:“2026-03-11T20:45:00Z”,“v”:0},{“t”:“2026-03-11T20:50:00Z”,“v”:0},{“t”:“2026-03-11T20:55:00Z”,“v”:0},{“t”:“2026-03-11T21:00:00Z”,“v”:0},{“t”:“2026-03-11T21:05:00Z”,“v”:0},{“t”:“2026-03-11T21:10:00Z”,“v”:0},{“t”:“2026-03-11T21:15:00Z”,“v”:0},{“t”:“2026-03-11T21:20:00Z”,“v”:0},{“t”:“2026-03-11T21:25:00Z”,“v”:0},{“t”:“2026-03-11T21:30:00Z”,“v”:0},{“t”:“2026-03-11T21:35:00Z”,“v”:0},{“t”:“2026-03-11T21:40:00Z”,“v”:0},{“t”:“2026-03-11T21:45:00Z”,“v”:0},{“t”:“2026-03-11T21:50:00Z”,“v”:0},{“t”:“2026-03-11T21:55:00Z”,“v”:0},{“t”:“2026-03-11T22:00:00Z”,“v”:0},{“t”:“2026-03-11T22:05:00Z”,“v”:0},{“t”:“2026-03-11T22:10:00Z”,“v”:0},{“t”:“2026-03-11T22:15:00Z”,“v”:0},{“t”:“2026-03-11T22:20:00Z”,“v”:0}]

The " quotes are messing with the internal javascript logic. You need to use regular “straight” quotes like this:

```auto
[{"t":"2026-03-11T20:25:00Z","v":0},{"t":"2026-03-11T20:30:00Z","v":0},{"t":"2026-03-11T20:35:00Z","v":0},{"t":"2026-03-11T20:40:00Z","v":0},{"t":"2026-03-11T20:45:00Z","v":0},{"t":"2026-03-11T20:50:00Z","v":0},{"t":"2026-03-11T20:55:00Z","v":0},{"t":"2026-03-11T21:00:00Z","v":0},{"t":"2026-03-11T21:05:00Z","v":0},{"t":"2026-03-11T21:10:00Z","v":0},{"t":"2026-03-11T21:15:00Z","v":0},{"t":"2026-03-11T21:20:00Z","v":0},{"t":"2026-03-11T21:25:00Z","v":0},{"t":"2026-03-11T21:30:00Z","v":0},{"t":"2026-03-11T21:35:00Z","v":0},{"t":"2026-03-11T21:40:00Z","v":0},{"t":"2026-03-11T21:45:00Z","v":0},{"t":"2026-03-11T21:50:00Z","v":0},{"t":"2026-03-11T21:55:00Z","v":0},{"t":"2026-03-11T22:00:00Z","v":0},{"t":"2026-03-11T22:05:00Z","v":0},{"t":"2026-03-11T22:10:00Z","v":0},{"t":"2026-03-11T22:15:00Z","v":0},{"t":"2026-03-11T22:20:00Z","v":0}]

```

Funny thing… I was testing this corrected code and couldn’t find out why it flatlined. Turns out that al the data is actually “0” 🤣

---

<div class="post-metadata">

**Author:** ![Rob\_G](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/rob_g/32/79108_2.png) [@Rob\_G](https://community.homey.app/u/Rob_G)\
**Post date:** [March 11, 2026, 8:13pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/279 "2026-03-11T20:13:46Z")

</div>

haha, yes indeed. Sorry for that. It doesn’t rain, that’s why….

OK, I’ll give it a go!

Actually, the original quotes look ok. I think it changed when I posted it.

---

<div class="post-metadata">

**Author:** ![Rob\_G](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/rob_g/32/79108_2.png) [@Rob\_G](https://community.homey.app/u/Rob_G)\
**Post date:** [March 11, 2026, 8:19pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/280 "2026-03-11T20:19:39Z")

</div>

This is what my inspection console says:

`widget-base.js:613 Widget graph_3162 crashed: RangeError: Invalid array length`  
` at Array.push (<anonymous>)`  
` at GraphWidget._renderSpecific (graph.js:975:66)`  
` at GraphWidget.render (widget-base.js:610:18)`  
` at dashboard.js:1719:23`  
` at Array.forEach (<anonymous>)`  
` at HomeyDriver.onMessageCallback (dashboard.js:1716:41)`  
` at HomeyDriver.dispatchMessage (data-driver-base.js:89:42)`  
` at Socket.<anonymous> (homey.js:292:18)`  
` at Socket.<anonymous> (index.js:136:20)`  
` at Socket.emitEvent (socket.js:552:20)`

Is it because I send a data format that should be used by a Send Insight card? If so, is it possible to send extra metadata to mimic the sender being Insight?

---

<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:** [March 11, 2026, 8:32pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/281 "2026-03-11T20:32:02Z")

</div>

Weird. What happens if you dump that json data directly into a “Data (String/JSON)” edit box (so not connected to a topic)

> [@Rob\_G](#):
>
> Is it because I send a data format that should be used by a Send Insight card? If so, is it possible to send extra metadata to mimic the sender being Insight?

No, this should not make a difference. You can see exactly the data what an Insight card sends if you look in the Data Stream Explorer. The `{ }` copies the data. Paste it in nodepad and you can investigate it. When I tried the corrected data it worked fine.

 ![afbeelding](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/7/8/784171326f3e63f3ae0e572c491e9e9a22f7e6fe.png)

---

<div class="post-metadata">

**Author:** ![Rob\_G](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/rob_g/32/79108_2.png) [@Rob\_G](https://community.homey.app/u/Rob_G)\
**Post date:** [March 11, 2026, 8:36pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/282 "2026-03-11T20:36:50Z")

</div>

It Looks ok to me:  
THis is the explorer:  
[{“t”:“2026-03-11T21:35:00Z”,“v”:0},{“t”:“2026-03-11T21:40:00Z”,“v”:0},{“t”:“2026-03-11T21:45:00Z”,“v”:0},{“t”:“2026-03-11T21:50:00Z”,“v”:0},{“t”:“2026-03-11T21:55:00Z”,“v”:0},{“t”:“2026-03-11T22:00:00Z”,“v”:0},{“t”:“2026-03-11T22:05:00Z”,“v”:0},{“t”:“2026-03-11T22:10:00Z”,“v”:0},{“t”:“2026-03-11T22:15:00Z”,“v”:0},{“t”:“2026-03-11T22:20:00Z”,“v”:0},{“t”:“2026-03-11T22:25:00Z”,“v”:0},{“t”:“2026-03-11T22:30:00Z”,“v”:0},{“t”:“2026-03-11T22:35:00Z”,“v”:0},{“t”:“2026-03-11T22:40:00Z”,“v”:0},{“t”:“2026-03-11T22:45:00Z”,“v”:0},{“t”:“2026-03-11T22:50:00Z”,“v”:0},{“t”:“2026-03-11T22:55:00Z”,“v”:0},{“t”:“2026-03-11T23:00:00Z”,“v”:0},{“t”:“2026-03-11T23:05:00Z”,“v”:0},{“t”:“2026-03-11T23:10:00Z”,“v”:0},{“t”:“2026-03-11T23:15:00Z”,“v”:0},{“t”:“2026-03-11T23:20:00Z”,“v”:0},{“t”:“2026-03-11T23:25:00Z”,“v”:0},{“t”:“2026-03-11T23:30:00Z”,“v”:0}]

This is when I link it to a text box:

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/7/a/7a5fcb1bab6ffeed5041b2ef26af293e8e81237f.jpeg)

(the text box put everything in UPPERCASE)

---

<div class="post-metadata">

**Author:** ![Rob\_G](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/rob_g/32/79108_2.png) [@Rob\_G](https://community.homey.app/u/Rob_G)\
**Post date:** [March 11, 2026, 8:49pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/284 "2026-03-11T20:49:54Z")

</div>

@Satoer I think I found it. It happens when all values are 0 (zero).  
The problem is the Auto MAx setting. When that is on, and all Y values are 0, then the widget crashes. Wen auto max is off, or there is at least one non-zero value, then it is ok.

---

<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:** [March 11, 2026, 8:59pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/285 "2026-03-11T20:59:43Z")

</div>

> [@Rob\_G](#):
>
> I think I found it. It happens when all values are 0 (zero).

Oh shit, nice debugging Rob. Thanks.  
I can recreate the problem over here.  
I will solve this problem in the next version.

---

<div class="post-metadata">

**Author:** ![fmb](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/fmb/32/27097_2.png) [@fmb](https://community.homey.app/u/fmb)\
**Post date:** [March 11, 2026, 9:17pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/286 "2026-03-11T21:17:59Z")

</div>

Great news!  
Looking forward to all future developments and nice things on the todo list.

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

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