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

[Satoer]

Dashboard Studio is for users who want absolute control over how their dashboard looks and what device it runs on. Whether it is a wall-mounted iPad, an Android phone, a Raspberry Pi touchscreen, an e-reader, or a desktop browser, it will work. If it can display a modern website, it can run this.

I should be honest right from the start. If you are looking for a dashboard that automatically generates itself in five minutes, this app is probably not for you. But if you are someone who likes to tweak every little detail and wants absolute freedom, you will feel right at home. Regular dashboards lock you into fixed grids, set columns, and rigid widgets. Dashboard Studio is different. It functions much more like design software. You have a blank canvas where you can place, resize, and layer elements anywhere you want with pixel-perfect precision.

If you want a massive slider that only adjusts the brightness of a single light, you can do that. Want to layer multiple graphs on top of each other? You can combine dynamic energy prices, current usage, solar yields, and battery charge/discharge times all in the exact same view.

It goes a bit further, too. You can bind almost any device property to almost any UI setting. For example, you can link the color of a physical LED strip in your room to the background color or highlight color of the dashboard itself. There’s a built-in color corrector to fine-tune it or create gradients. This allows the interface to physically blend into the ambient lighting of your room.

You can create unlimited dashboards (each gets its own URL), and each dashboard can have unlimited pages. It comes with lots of visual style presets, but you can build your own from scratch.

Showcase
Here is my personal setup:

The display is built into a floating oak wall with a backlight. Because of the color-binding feature I mentioned above, the dashboard perfectly matches the color of the wall’s lighting.

The main focus is the clock, but underneath, it tracks all kinds of sensor values and dynamic energy prices. We use the thick bars in the graph to time our energy-heavy tasks. The thin bars show our consumption (red) and grid return (green), the green curve is the solar yield, and it also shows planned home battery cycles (green charging, red discharging) .

When someone rings the doorbell, it switches to a camera feed (currently using an image URL feed updated every 0.5s, though I might look into true video streams later).

Getting Started

It might look complicated at first glance because every widget has a lot of adjustability, but getting started is pretty straightforward:

• Install the app (note: this app doesn’t create any Homey devices).
• Go to the app configuration and enable the specific data sources/devices you want to control.
• Open the generated local website link.
• Check out the example dashboard to see how things work.
• Click the cogwheel in the bottom right to open the editor and clear the canvas to start building your own dashboard.
• Save your creation as “dashboard” so it becomes the default when you open the URL.

(Fun side note: This graph was drawn inside Dashboard Studio)

There is also a help file included with a full Homey guide. Open the editor in Dashboard Studio and click the help file on top of the sidebar editor. Or click “documentation” on top of the Dashboard Studio | The Ultimate Smart Home Interface website.

The Backstory
This started entirely as a personal project. I originally coded a similar dashboard from scratch using Node-RED’s UI builder, but it was a pain to adjust or update. Eventually, fueled by a lot Red Bull, I built a complete WYSIWYG (What You See Is What You Get) editor around it.

At first, it only worked with Node-RED via MQTT. Then I made it compatible with standard MQTT. Finally, I realized I should just build a native Homey app for it. For this Homey release, I disabled the Node-RED specific driver, but standard MQTT over WebSockets is still available as a data source option (You can even use it in the online demo version). This means you can use the same dashboard with data from Home Assistant or other MQTT peripherals. Just keep in mind that a single dashboard can only listen to one data platform at a time (so either Homey OR MQTT).

Dashboard Studio is designed to run exclusively on your local home network, so it is naturally hidden from the internet. If you want to access your dashboard from outside your home, you can enable the Security Token in settings. You will then need to open a port on your router or securely connect back home using a VPN. If you plan to set this up, please read this guide on security first.

The app is currently in review, but you can install the test version over here:

Dashboard Studio | Homey

Or you can try the full (non Homey) demo version over here, if you have MQTT over websockets enabled you can connect it to your home data:

Dashboard Studio | The Ultimate Smart Home Interface

I hope you find it useful. If you build something cool, or create a great template, please share a screenshot below. I’d love to see what you come up with and might add it to the gallery.

Dashboard Studio is completely free. It took a tremendous amount of time to develop, so if you end up using it regularly and want to support the project, a donation is incredibly appreciated. It’s not required, but it keeps the motivation (and the caffeine levels) high.
(Please include your Homey community username in the donation comment so I know who it’s from )

Donate to Michel Satoer

[Satoer]

[reserved]

[SunBeech]

This looks really promising !

[micke_011]

Indeed, VERY promising!

[SunBeech]

The number of (formatting) options is really overwhelming at first , but I am starting to understand the logic behind it. Also with help of your very useful documentation .

I am able to show sensor/capability values on the dashboard by linking the capability/topic in the data section of the widget.

However I am unable to use the switch and progress bar to switch on a light (onoff capability) or set the dimming level (though I can read the current dim level). I am not sure which options to set/how to link the capabilities to the widgets so that the control works. I tried to link the onoff capability of a light to the switch’s on & off values, but that does not control the light. Same for the progress bar. Perhaps those links are only for reading the current value/state.

How can I control the on/off and dimming capabilities of lights using a switch/progress bar?
Do I perhaps have to use the flowcards that act on ‘output topic’?

[Satoer]

Hi, you need to enable every item you want to control or read in the Homey Configuration.
Then on the Dashboard Studio website you should see data from it in the Data Stream Explorer.
Use the Copy Topic Name to copy that topic.

If you want to control that device, in this example controlling a light on / off, you need to paste that topic inside an output topic setting.

But you can also connect the “initial state” to the same topic:

This way the buttons state is controlled by Homey also. If the light is turned on (inside Homey), the switch will visually be turned on also.

Same for sliders and devices that accept and send number information. Note: Slider values like brightness and curtains are usually values between 0 and 1. So you need to configure the slider to have a min and max of 0 and 1, and enable the “Fractions” option.

[Kringloper]

Wow, browsing through the demo dasboard gives a lot of inspiration. And very nice how you can combine widgets like the gauge and slider in my test.

Wondering how i can change the color of the icon from within Homey. I sent an event to the dashboard which is visible in the studio, but don’t know what value i need to send to be linked to the colorfield. The idea is to show a different color while heating.

[Satoer]

You can do it like this. Now, my thermostat app does not have a “heating” parameter but I assume if the real temperature is lower than the set temperature, it must be heating:

If it is heating it sends a color value to the topic name “TherrmosatColor” (This can be any name you invent yourself, but make sure you do not duplicate it for another function)
This color value is just a basic CSS hex value (#RED GREEN BLUE). You can look up these values up here:

Color Picker

When you run the flow, you can see the data pop-up in the Dashboard Studios data stream explorer:

Copy the topic name (the tag button)

And link the icon color to it by clicking the chain icon above it and filling in the topic:

You can also just fill in the “ThermostatColor” without the “homey/event/” before it. If you know the name you do not have to look at the data stream explorer at all, but it is nice to check if there is data coming in.

These are the basic color formats it accepts (see help file => “Data Types and Formats”)

If I look at your design, I think it it would benefit a bit of padding (Moves the items a bit from the edges of the container):
Global Defaults => Def Padding: 10
And I would reduce the gap between the label / value and the gauge:
Click gauge widget => Appearance (left in the editor) => Gap (reduce, to bring it closer)

Try to adjust the design in the global defaults first this way every other widget gets updated also. But you can overrule every design choice also individually in every widget.

[Kringloper]

Thanks for the tips. For now i was just ‘playing arround’, but good to know about the endless posibilities to make it better looking .

[SunBeech]

@Theo_de_Koning: Perhaps this new dashboard app is something for you?

[SunBeech]

Thanks this is really helpful!

I (wrongly) assumed that you could only refer to topics when the field has a link icon. But know I understand that you can also use topics in the other fields.

[Satoer]

Happy to help, and thanks for the feedback, it’s really useful. It’s interesting to see how someone with a fresh perspective uses the app. I’ll probably rewrite the help file based on these conversations to make it clearer. Also it sounds logical the output field should have a link icon to make it more clear. It has no dual purpose (data or a link) so it is just a link field for a topic. I think ill make it blue like the linked fields in a future version.

[EdP]

@Satoer

When someone rings the doorbell, it switches to a camera feed (currently using an image URL feed updated every 0.5s, though I might look into true video streams later)

I’m able to show my camera snapshot, but how can I make it refresh every second?

[Satoer]

These are things you should do in Homey. I use the app Chronograph for it to create loops:

Chronograph | Homey

There are also other specialised loop apps, but I had this already installed.

My flow looks like this:

It’s in Dutch, but here is the breakdown. First, you need a trigger to start the stream. In this example, I’m using a boolean variable called CameraOn. You could also use a virtual device if that’s more your style.

How it works:

• Visibility: When CameraOn is true, it sends a ShowCamera command to the dashboard. Link this to the VIS (Visible) property of your image node so the feed pops up automatically.

• Pro Tip: You can also connect variables directly to Dashboard Studio by enabling them in the config, just like any other device.

• The Loop: Once triggered, a 1-second timer starts (I actually use 0.5s and it works perfectly). When the timer hits zero, it sends a snapshot to the camera_stream topic, which should be linked to your image widget’s Image Source URL.

• Repeat: It then checks if CameraOn is still true. If it is, it loops back and sets a new timer for the next frame. If not, it stops.

The “Refresh” Trick

There’s one little catch: the filename is usually the same every time (e.g., http://192.168.1.10/snap.jpg). Most browsers will see the same URL and won’t bother refreshing the image.

The workaround is simple: add a ? followed by a random number at the end of the URL. This tricks the browser into thinking it’s a brand-new image every time. That’s exactly what this HomeyScript handles

// Define your base string
const prefix = “http://[cameraIP]/snap.jpg”;

// Generate a random integer between 1 and 1000
const randomNumber = Math.floor(Math.random() \* 1000) + 1;

// Combine them
const result = prefix + randomNumber;

// Log to console (for testing) and return for use in Flow tags
console.log(“Generated String:”, result);

return result;

(use Homeyscript: Run [code] and return text tag)

Extra tip: If your camera stream snapshot requires a password and login name: you could add this to the url like:
Username:Password@192.168.1.10(:port)/snap.jpg``

[Satoer]

Just noticed the background behind your slider. If you layer element on top of each other, you can disable the background container in every widget.

[zakraket]

nice nice… I’m going to try this in the coming days

[Satoer]

@Kringloper & @EdP I have added solutions to your questions to a new tips and tricks section in the upcoming help file (need to get this first version approved first). But you can read it here online already:

Dashboard Studio | The Ultimate Smart Home Interface

[Yann_Liqueur]

Nice work

I know how I’m going to spend my weekend.

regards.

[Olex]

Many thanks for this nice app!

Just playing around to learn how to use this and is now testing how to control a thermostat.
If I want to set the thermostat with 0.5 degrees intervals, is the only possible way to achieve this to enable the fractions with 1 decimal?
No big deal, but it could be nice to have fixed 0.5 degrees step.
Thanks!

[Satoer]

That is a good suggestion, I shall replace the “decimals” option for a “Fraction Step” option. In the next update. (First need to wait to get the current version approved)

In the mean time you could let Homey correct the value like this
Homey flow:

Dashboard studio setting:

You can add calculations to values. In this case
{{ round([number tag] * 2) / 2 }}
The one second delay is because the slider ignores changing the slider values after controlling it for one second.
Put the same calculation in the thermostat (or do it through a number variable if the thermostat does not accept calculations).