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

[Satoer]

NEW TEST Version V1.11.0

• Numeric fields - Numeric Payload Formula in Binding Options transforms incoming numerical values with math (invert, scale, clamp, round, threshold). Includes presets.
• New: Boolean fields (switch state, visibility, and similar) - Binding Options add Transform Mode: Boolean Payload Mapping or Numeric Payload Formula. Formula mode converts numerical values to on/off with Threshold 50 and Round to 0 or 1 presets.
• New: Formulas can reference other live topics with Insert Topic ({{topic/path}} tags). Boolean logic functions and, or, not, xor, and nor combine topic values and comparisons. Referenced topics update widgets automatically when their data changes.
• Improved: Binding Options formula editor with Value and topic tag chips, default Value placeholder, Insert Value and Insert Topic rows, and yellow active icons for mapping, formulas, and color correction in light and dark mode.
• Improved: Help adds a Binding Options and Payload Formulas guide with topic references, logic functions, value coercion, and worked examples.
• Fixed: Binding Options popup no longer closes when picking Transform Mode or Insert Topic.
• Fixed: Formula field caret placement between tags and at the insert position for Insert Topic and Insert Value.
• Fixed: Master typography defaults for Light Grid and Icon widgets apply correctly.
• Fixed: Custom Google Fonts with plus signs in the name (e.g. Henny+Penny) now save and load correctly.

Binding Options got a serious upgrade.

@Jean_S

• Another thing I came across concerns solar power readings from HomeWizard kWh meters. I prefer to read my solar production from these meters directly, but that means the power is initially reported as a negative value. I worked around this using a Homey Flow, but would it be possible to add an option to invert a value (effectively multiplying it by -1)? I can imagine that being useful in a few other scenarios as well.

When you make a setting dynamic, you can now add a formula to the incoming data. You can even create simple if/then/else formulas and reference values from other topics. This update will likely eliminate a lot of external Homey flows that were previously needed to adjust data before sending it to the dashboard.

Click the faders icon next to any bound field to open the new formula dialog.

You can set default values for empty topics, map custom strings to boolean states, or use basic math to transform numeric data (such as scaling 0–255 to a percentage, inverting signs, clamping, rounding, averaging, or setting thresholds). For example, you can now show a warning icon when a certain value goes over a threshold, just by adding a formula to “Visible” enabled / disabled setting of an icon widget. if(value >= 50, 1, 0)

The current topic payload is represented by a “Value” chip. You can even use other live data from other topics, click “Insert Topic” and select an item from your dashboard to add it as a distinct topic tag. A dropdown includes presets for common use cases, alongside a link to the complete syntax reference for logic functions and comparisons.

Field-specific behaviors:

• Checkbox bindings toggle between text-mapping mode and numeric formula mode.
• Color bindings consolidate default values and HSB corrections into this single popup, replacing the previous separate color correction dialog.

Existing data structures remain unchanged; current Binding Options for defaults and boolean mappings function exactly as before.

Anyway, please read the documentation for a complete list of syntax, possibilities and examples.

Fixes:

@widameista

setting within the widget

setting in the typography defaults:

The default font settings of the Light Widget is now correctly linked

@widameista

this is the setting in the widget itself resetted to default

this is the default in the light grid

Also the 0 setting is now correctly transferred to the light grid settings.

[Jean_S]

@Satoer

When you make a setting dynamic, you can now add a formula to the incoming data. You can even create simple if/then/else formulas and reference values from other topics. This update will likely eliminate a lot of external Homey flows that were previously needed to adjust data before sending it to the dashboard.

This is a great addition Michel, thanks for that! The if/then/else formulas will definitely save me and others a number of Homey flows. Looking forward to trying it out.

Best regards, Jan

[Satoer]

NEW TEST Version V1.11.1

• New: Text widget - inline text color anywhere in your markdown with [color #34FF1C]…[/color] or a theme token like [@accentSoftaccentSoftolor @accentSoft]…[/color].
• New: Text widget - headings (#, ##, ###) now work inside table cells, so a cell can have its own title above the value.
• Improved: Full editor - a Text color swatch in the toolbar colors the selected text, and it is now possible to add headers inside tables.
• New: Text widget - tint a PNG or SVG image to any color directly in your markdown, just like icons.
• New: Text widget - choose how links open (follow each link, always a new tab, or always the same tab).

Text widget:

This version mostly has improvements in the text widgets. It is now possible to colourise text and images with markdown. Also headers can be added inside markdown tables. New option is to override all links if they are opened in a new tab or the current tab. Also made it possible to adjust the typography Vertical Spacing (px) to negative values to bring things like headers closer to paragraph text.

*Homeyscript that parses an rss feed to text widget markdown

@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.

This is now possible. ![alt|#RRGGBB](url) or ![alt|@token](url) Please read the updated documentation for the syntax

[widameista]

What is the easiest way to achieve the following:
in my dashboard i would like to click at a button or similar and then a window should open (second page?) where a grafana web page is displayed. THis window should be closable.

Thanks

[Amersfoort]

Nice! Thank you.

[Satoer]

@widameista

in my dashboard i would like to click at a button or similar and then a window should open (second page?) where a grafana web page is displayed. THis window should be closable.

hmmm Dashboard Studio does not support embedding iframes because of reasons I explained earlier. You can create a button that opens the grafana website though:

(optionally open it in a new tab). But there won’t be a close button to go back. You need to close the tab (if it is openened in a new tab) or use the “back” button from the browser. What kind of Grafana data are you trying the show inside the dashboard? You could probably recreate this using Dashboard Studio elements. (and make it match the theme )

[Satoer]

Just checked out Grafana, and it turns out you can actually generate direct images from specific Grafana elements to use in an image widget.

Here is the generated image code:
https://play.grafana.org/render/d-solo/ktMs4D6Mk/bar-charts-and-pie-charts?orgId=1&panelId=2&width=550&height=250&theme=dark

It is based on this page:
https://play.grafana.org/d/ktMs4D6Mk/bar-charts-and-pie-charts?orgId=1&from=now-6h&to=now&timezone=utc

Honestly though, I wouldn’t recommend doing this. Smushing in external elements with completely different styles, colors, and typography always looks terrible

[Bert_Onraedt]

@Satoer

• New: Text widget - inline text color anywhere in your markdown with [color #34FF1C]…[/color] or a theme token @accentSoftaccentSoftoloraaccentSoftaccentSoftolora@accentSoftcentSoftacce@accentSoftaccentSoftolortSoftolori@accentSofte [@accentSoftaccentSoftolor @accentSoft]…[/color].

Thank you !! (Wanting this since Calendar widget…)

I’m very very very busy until mid august, but I will definitely implement calender-dependant-icon-colors

[Satoer]

@Bert_Onraedt

(does not work in Headings ## ?)

It works on my end?

[Bert_Onraedt]

Yes, sorry, it did on my second try… Probably a typo… I edited my post

[widameista]

another question:
i adapted colours and so on to my needs and saved as a new template.
In the dropdown list of templates it does not appear!
is this by design?

[Satoer]

@widameista

is this by design?

This originally stems from a technical limitation

Dashboard Studio is strictly client-side, not server-side. Because it runs as pure JavaScript right in the user’s browser, strict browser security prevents it from directly reading a local file directory or folder structure from a server.

When I integrated the app with Homey, I implemented a few workarounds. In this setup, Homey handles the backend file management and tells the client (Dashboard studio) which files are available on the server, which is how the dashboard configuration files and the image media browser work. However, these mechanisms are entirely tied to the Homey ecosystem. If you switch the driver to MQTT or the simulation driver, these server-dependent features disappear so the core application remains fully cross-platform and compatible with other environments.

So, if the Homey driver technically supports this, why hasn’t it been integrated yet? Honestly, no one had ever asked for it, so I never had a reason to build it hahaha. I will add this to the roadmap

ps. There is a “load” button.

[Bert_Onraedt]

@Satoer However, it does not work with icons? Or am I missing something again?

[Satoer]

There is a Gallery browser available via the image icon at the top of the editor. You can use this to upload images to the server and easily copy the URL to paste into an image URL field. I am actually working on integrating this directly inside the URL field itself, but that will be released in a future version.

[Bert_Onraedt]

Is this about the colors of ph-icons?

The [color #000000]:ph-clock:[/color] does not work, that’s what I meant…

[Satoer]

Oh, sorry I did not noticed you where referring to something else. No currently it is not working on icons. Icons are a bit more complicated because they can be duotone. You can set those colors in the editor:

I investigate if I can implement this though. Do you have a usecase to implement multiple color icons?

[Amersfoort]

ehhhhh…?

[Bert_Onraedt]

Haha, I still want to color the ph-icon in the Calendar-Markdown, based on the calendar source.

[Satoer]

What is the Markdown for that @Amersfoort ?

If I do that it works just fine:

Markdown: # Icon: :ph-ambulance:

Note: If the markdown is dynamic, you can easilly capture the raw value using this button in the Data Stream Explorer:

[Amersfoort]

@Satoer

What is the Markdown for that

| | |
|:---|:---|
|![Image|50x50|@surface](https://cdn.jsdelivr.net/npm/@mdi/svg@7.2.96/svg/weather-sunny.svg)| {{helderheid}} lx |
| ![Image|50x50|@surface](https://cdn.jsdelivr.net/npm/@mdi/svg@7.2.96/svg/thermometer.svg) | {{weerstation/measure_temperature}} °C |
| <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30' fill='rgb(128,179,255)'><path d='M26,30H22a2.0059,2.0059,0,0,1-2-2V21a2.0059,2.0059,0,0,1-2-2V13a2.9465,2.9465,0,0,1,3-3h6a2.9465,2.9465,0,0,1,3,3v6a2.0059,2.0059,0,0,1-2,2v7A2.0059,2.0059,0,0,1,26,30ZM21,12a.9448.9448,0,0,0-1,1v6h2v9h4V19h2V13a.9448.9448,0,0,0-1-1Z'/><path d='M24,9a4,4,0,1,1,4-4h0A4.0118,4.0118,0,0,1,24,9Zm0-6a2,2,0,1,0,2,2h0a2.0059,2.0059,0,0,0-2-2Z'/><path d='M10,20.1839V12H8v8.1839a3,3,0,1,0,2,0Z'/><path d='M9,30A6.9931,6.9931,0,0,1,4,18.1108V7A5,5,0,0,1,14,7V18.1108A6.9931,6.9931,0,0,1,9,30ZM9,4A3.0033,3.0033,0,0,0,6,7V18.9834l-.332.2983a5,5,0,1,0,6.664,0L12,18.9834V7A3.0033,3.0033,0,0,0,9,4Z'/></svg>"/> | {{weerstation/measure_temperature.feelsLike}} °C |
| ![Image|50x50|@surface](https://cdn.jsdelivr.net/npm/@mdi/svg@7.2.96/svg/water-outline.svg) | {{weerstation/measure_humidity}} % |
| ![Image|50x50|@surface](https://cdn.jsdelivr.net/npm/@mdi/svg@7.2.96/svg/sun-wireless-outline.svg) | {{weerstation/measure_ultraviolet}} UVI |
| ![Image|50x50|@surface](https://cdn.jsdelivr.net/npm/@mdi/svg@7.2.96/svg/weather-sunset-up.svg) | {{openweather/sunrise}} |
| ![Image|50x50|@surface](https://cdn.jsdelivr.net/npm/@mdi/svg@7.2.96/svg/weather-sunset-down.svg) | {{openweather/sunset}} |

Result: