[APP][Pro] NEW: Dashboard Studio - A completely free-form dashboard designer

Apps
,
668

Hi Olivier, at the moment I don’t really have the ambition to open up the source code to other developers yet. There are still too many things in the foundation that I want to overhaul or make more modular. For now I prefer to keep all the choices in my own hands. One of the important things I want to guard against is that I want to subtly push DS users towards a consistent style that fits the dashboard. Adding a widget that just dumps html snippets from other sources like websites would create a design that completely deviates from the rest. Every widget should basically be able to adopt the style of the template by default, like the colors, line weights and typography. It often bothers me with conventional dashboards that every developer makes their own widgets with their own explicit style. Individual widgets look fine on their own, but when you tie a full dashboard together with all kinds of different styles it becomes a big patchwork quilt.

Regarding the rtsp support I have been digging through the developer documentation, but I can’t find anywhere how to officially extract those webrtc streams. There is plenty of information on how to add cameras to Homey, but almost nothing on how to actually use those streams. Creating a widget that supports such a stream is probably not a problem, but there has to be a user friendly way to obtain that stream. If this all has to be done with workarounds or hacks, it will end up causing more frustration than fun for end users.

This is also about embedding other sources into homey, not getting this out of Homey :sweat_smile: But if you can provide me with a piece of sample code that extracts the web rtc stream (in a Homey-legal way) that would definitely help development. :slightly_smiling_face:

A calendar is definitely something I want to add, but I want to keep Dashboard Studio as passive and universal as possible at its core. In the Homey backend I also want to keep everything purely focused on passing through data and I don’t want to integrate specialized flowcards for things like iCloud data. What we could do is collaborate. For example, you could expand your calendar app with flows that extract the data, like “the next X appointments” for example, and make it available as csv or json. Preferably in a universal format. I haven’t dived into the world of calendar data formats yet, but I am sure some big company already thought out a smart standard. I shall take a look at what kind of interesting data your Homey widget can pull when I have the time, but right now I am very busy for the coming month.

669

Hi Satoer,

did some screenshots and tested on a second iPad Air (IOS 12.5.8). Same behavior.

The whole button is missing, same for push button and switch. Going to your page with all the button shows also no buttons / switches (screenshot):

IMG_3650
IMG_36502048×1536 219 KB

Screenshot local demo page on homey opened from IOS 12:

IMG_3648
IMG_36482048×1370 250 KB

(missing option to add switch / button in edit mode, of course I use a PC to edit, so not important)

IMG_3649
IMG_36492048×1315 347 KB

(missing button in upper right corner)

IMG_3653
IMG_36532048×1536 398 KB

(missing button in lower left corner)

My test page on IOS 12:

IMG_3652
IMG_36522048×1330 191 KB

Same page on IOS 16 and IOS 26:

IMG_3647
IMG_36472076×1422 189 KB

Hope that helps to identify reason.

670

Thanks for the screenshots. It is so weird though because another user seems to have no problems with the same device:

It would be nice to see the console errors, but I do not think those are accessible on an old iPad. I actually got my hands on a test iPad Air 2 still running iOS 12 (so not the iPad Air 1) from a developer friend of mine to fix previous problems. However, I do not have that device at the moment, so I cannot test it myself. It is funny to see that the Barbie Theme is actually being used by users! :rofl:

671

Did a facroy reset of the iPad Air (A1474) on iOS 12.5.8, still same behavior.

So if it works for @Jos_Stultjens there might be a setting required?

Unfortunately I don’t have an Mac, so I cannot turn on Safari developer mode.

672

Found the original post when I implemented iOS 12 support:

Buttons visible :+1: This is just a stock ipad.

There have been quite a few updates to DS since then. They even overhauled the button widget, so it’s possible that broke things in the meantime. @Jos_Stultjens, are you running the latest version 1.6.0? Just a heads up that if you aren’t, updating might actually break the iPad dashboard :sweat_smile:

@Iceball Can you check out this website? This is the old 1.4.2 version of Dasboard studio. If the buttons are visible there, then I’ll know the issue is definitely related to the latest improvements.

673

I can confirm, working with old 1.4.2 version:

IMG_1587
IMG_15872040×1338 266 KB

674

Thanks, I will try to fix the problem :+1:

675

Follow up question:
Do the menu widgets work?
Can you screenshot this dashboard for me?
The dropdown will probably not work because it is activated by a button, but I’m wondering if you see that horizontal menu.

676

None of the widgets of this page are visible:

IMG_1588
IMG_15882048×1345 316 KB

677

I’m using Raw svg code in 2 images with the following snippet code.

{
  "snippetHeader": "Dashboard Studio Snippet",
  "snippetType": "widget-snippet",
  "snippetFormatVersion": 1,
  "version": "1.6.3",
  "source": {
    "dashboardName": "Dash3",
    "page": 1,
    "createdAt": "2026-04-10T15:28:53.239Z"
  },
  "master": {
    "currentPage": 1
  },
  "widgets": {
    "image_799582892": {
      "type": "image",
      "overrides": {
        "x": 240,
        "y": 410,
        "width": 710,
        "height": 60,
        "zIndex": 1,
        "page": "1",
        "sourceType": "svg",
        "url": "images/placeholder.png",
        "svgRaw": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 730 20\" width=\"730\" height=\"20\">\n    <defs>\n        <linearGradient id=\"rainbowGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n            <stop offset=\"0%\" stop-color=\"hsl(0, 100%, 50%)\" />\n            <stop offset=\"16.67%\" stop-color=\"hsl(60, 100%, 50%)\" />\n            <stop offset=\"33.33%\" stop-color=\"hsl(120, 100%, 50%)\" />\n            <stop offset=\"50%\" stop-color=\"hsl(180, 100%, 50%)\" />\n            <stop offset=\"66.67%\" stop-color=\"hsl(240, 100%, 50%)\" />\n            <stop offset=\"83.33%\" stop-color=\"hsl(300, 100%, 50%)\" />\n            <stop offset=\"100%\" stop-color=\"hsl(360, 100%, 50%)\" />\n        </linearGradient>\n        <filter id=\"glow\">\n            <feGaussianBlur stdDeviation=\"6\" result=\"blur\"/>\n            <feMerge>\n                <feMergeNode in=\"blur\"/>\n                <feMergeNode in=\"SourceGraphic\"/>\n            </feMerge>\n        </filter>\n    </defs>\n    <rect x=\"0\" y=\"0\" width=\"730\" height=\"20\" rx=\"0\" ry=\"0\" fill=\"url(#rainbowGradient)\" filter=\"url(#glow)\"/>\n</svg>",
        "moveX": 0,
        "moveY": 0,
        "label": "",
        "liveRefresh": false,
        "refreshInterval": 1,
        "intervalUnit": "seconds",
        "metaName": "Second"
      },
      "bindings": {}
    },
    "image_436964341": {
      "type": "image",
      "overrides": {
        "x": 240,
        "y": 340,
        "width": 710,
        "height": 60,
        "zIndex": 1,
        "page": "1",
        "sourceType": "svg",
        "url": "images/placeholder.png",
        "svgRaw": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 730 20\" width=\"730\" height=\"20\">\n    <defs>\n        <linearGradient id=\"rainbowGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n            <stop offset=\"0%\" stop-color=\"#cce7f6\" />\n            <stop offset=\"100%\" stop-color=\"#ffbf00\" />\n        </linearGradient>\n    </defs>\n    <rect x=\"0\" y=\"0\" width=\"730\" height=\"20\" rx=\"0\" ry=\"0\" fill=\"url(#rainbowGradient)\"/>\n</svg>\n",
        "moveX": 0,
        "moveY": 0,
        "label": "",
        "liveRefresh": false,
        "refreshInterval": 1,
        "intervalUnit": "seconds",
        "metaName": "First"
      },
      "bindings": {}
    }
  }
}

One image should be this:
image
And the other one like this:
image

Somehow these svg images are linked, so I see two times the same image, depending on the defining order. It sounds strange and it is strange to me. I would like to know what is happening, and how to solve this.

EDIT:
The solution is: both had a linearGradient called “rainbowGradient”. When I change this name in one of the svg’s the problem has solved.
Apparently, these SVG codes do not work completely independently of each other.

678

Another thing to keep in mind: SVG IDs and variables are shared across the entire dashboard page, regardless of which page you are on. They aren’t bound to a specific widget. In the first version, I actually wrote code to make them unique to every widget, but in the final build, I decided against it. I deemed it unnecessary and thought making it optional would be a bit too nerdy. Plus, it would probably just confuse users who actually want those IDs to work dashboard-wide and can’t figure out why they aren’t syncing up.

679

I did update the dashboard before I read this message and now it indeed does not show the buttons anymore.

680

Don’t worry, already found the problem. Next (test) update it will be fixed.

681

Satoer, Is it possible to invert the boolean value without a homey value, but in the dashboard? For example I use sometimes the visable of disabled state, but from the device I have the allowed or enabled state. Now I have a flow to invert these, but it feels as overkill.

Edit: But I also understand that your UI will get complexer and harder to maintain.

682

Not possible right now, but I understand the problem. Had the same annoyance a couple of times also. Did not found a neat solution for it though. seems overkill to add an invert option for every boolean setting, and only do the most used settings also feels a bit inconsistent. Maybe add support for an /invert or -invert behind the topic? Not sure about that though, might clash with MQTT standards. :thinking: Also this would be a bit “insider” knowledge. Then again, local topics are also a bit hidden. Well… that are my thoughts so far, any ideas?

1 Like
683

In code NOT is used, but also ! or ~. But I see the change/ extend the MQTT topic string feels not ok.

684

When I enable locked then I can change the output topic from a switch for example, but when I leave (Tab) then all the switch options are gone and only the widget info options are there. Then I have to unlock again so I can edit again.

Change directly when I lock (so no edits can be made).

The other way around also, when I unlock I can’t still make edits. I have to unselect the widget and come back and then it’s OK.

685

It would be nice if I can block/ lock the switch action from a user (based on a state) in runtime, not in dev mode. I still want to show it, but don’t allow the trigger/ on click.

686

Hi @Satoer I’ve been less involved for a while, so maybe my question was already discussed.
I know you built a menu feature that allows dropdown menus etc. I like to build an option where I can press a button that opens kind of a dropdown menu, but not with menu options/buttons, but with my own custom controls. Kind of a “hidden” option menu for secondary controls.
I could of course have all the controls in the option menu to respond to the logic state of the button that opens them (hide/show), but I was wondering if there is an easier solution. Unfortunately, I cannot control the visibility of a group. That would be a solution for me.

687

Same kind of question here:
I have an air conditioner with 5 modes in a single capability, one at the time. I would like to configure one of those modes using a drop-down menu. I also want to be able to see the current mode. Do I need to create various flows, or is there a smarter way? What is the best practice?

In the Demo dashboard, I see an example of a Dropdown menu, but without the underlying functionality.