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

Hmmm that feels like a really specific single-user addition :sweat_smile: Plus it feels a bit unprofessional to override the Homey settings on just one part of the application, not to mention the headaches it would probably give me.

There is a simple solution though. You can just feed the generated markdown into a Homeyscript that translates it, and send that out instead. Just place the Homeyscript between the calendar markdown generator and the send to dashboard card, and make sure you select the Homeyscript result to send to the dashboard. (and not the markdown)
You need this homeyscript card:


And add the markdown tag in the argument edit box on top.

Then Add this homeyscript:

// HomeyScript: Translate Calendar Markdown to Swedish
// Reads markdown from args[0], translates calendar structure words, and returns the translated markdown.

const rawInput = (typeof args !== 'undefined' && args && args[0]) 
    ? String(args[0]) 
    : '## Today\n\n| Time | Event |\n| :--- |\n| **All Day** | Event 1 |\n|  | **Morning** |\n\n## Tomorrow\n\n*No events scheduled.*';

/**
 * Translates calendar markdown structural terms to Swedish while preserving event titles.
 */
function translateCalendarMarkdownToSwedish(markdown) {
    if (!markdown || typeof markdown !== 'string') return '';

    let text = markdown;

    // 1. Fallback / status notices
    text = text.replace(/\*No events scheduled\.\*/gi, '*Inga planerade händelser.*');
    text = text.replace(/\*No calendar data\.\*/gi, '*Ingen kalenderdata.*');

    // 2. Section headings
    text = text.replace(/^##\s+Today\b/gmi, '## Idag');
    text = text.replace(/^##\s+Tomorrow\b/gmi, '## I morgon');
    text = text.replace(/^##\s+Yesterday\b/gmi, '## Igår');

    // 3. Table headers
    text = text.replace(/\|\s*Time\s*\|\s*Event\s*\|/gi, '| Tid | Händelse |');

    // 4. Dayparts in bold markers
    const daypartMap = {
        'Morning': 'Morgon',
        'Afternoon': 'Eftermiddag',
        'Evening': 'Kväll',
        'Night': 'Natt',
        'morning': 'morgon',
        'afternoon': 'eftermiddag',
        'evening': 'kväll',
        'night': 'natt'
    };
    text = text.replace(/\*\*(Morning|Afternoon|Evening|Night|morning|afternoon|evening|night)\*\*/g, (match, word) => {
        return '**' + (daypartMap[word] || word) + '**';
    });

    // 5. All day markers
    text = text.replace(/\*\*All\s+Day\*\*/g, '**Hela dagen**');
    text = text.replace(/\*\*All\s+day\*\*/g, '**Hela dagen**');
    text = text.replace(/\*\*all\s+day\*\*/g, '**hela dagen**');

    // 6. Weekday headers with date break (e.g., "Mon<br>19-10-2026" or "Monday<br>19-10-2026")
    const weekdayMap = {
        'Monday': 'Måndag', 'Mon': 'Mån',
        'Tuesday': 'Tisdag', 'Tue': 'Tis',
        'Wednesday': 'Onsdag', 'Wed': 'Ons',
        'Thursday': 'Torsdag', 'Thu': 'Tor',
        'Friday': 'Fredag', 'Fri': 'Fre',
        'Saturday': 'Lördag', 'Sat': 'Lör',
        'Sunday': 'Söndag', 'Sun': 'Sön'
    };
    text = text.replace(/\b(Monday|Tuesday|Wednesday|Thursday|Friday|Saturday|Sunday|Mon|Tue|Wed|Thu|Fri|Sat|Sun)(?=<br>)/g, (match) => {
        return weekdayMap[match] || match;
    });

    // 7. Month-view table header row (e.g. "| Mon | Tue | Wed | ... |")
    text = text.replace(/\|\s*(Mon|Tue|Wed|Thu|Fri|Sat|Sun|Monday|Tuesday|Wednesday|Thursday|Friday|Saturday|Sunday)\s*(?=\|)/g, (match, word) => {
        const swedish = weekdayMap[word] || word;
        return `| ${swedish} `;
    });

    return text;
}

const result = translateCalendarMarkdownToSwedish(rawInput);
log(result);
return result;

Also: If you want to convert all icons based on Swedish keywords: Change the Homey language to Swedish, in the Dashboard Studio - calendar settings: Copy all icon bindings to the clipboard, set homey back to English and paste the Swedish bindings back overwriting the English bindings.

Hello,
With the latest update, I had to adjust the display a bit because it was slightly overflowing the edges of my tablet, but it’s no big deal…
BUT the refresh rate for the view from my doorbell camera is very strange. It looks like the image is alternating between two old views, without showing the current view. Did I miss something ?

Thank you for your help!

Was that the update from V1 to V2? I changed a lot of layout settings that might have caused this. The easiest solution is to set the “Layout Mode” to “Scale to fit screen”.


This will make sure it always fits the screen properly.

Yes, that is a bug. I have been working heavily on memory improvements. On systems without a GPU (a video card, like in virtual machines), some browsers seem to cache frames constantly, which fills up the system RAM. Anyway, I noticed this side effect too and will fix it in the next version.

(Okay for “Scale to fit screen”)
Thanks for your reply ! Will I need to switch to the beta version ? Or will you be releasing a stable version soon? Because this feature (seeing who’s at the door!) is very important to me, and surely to many other users as well, right ?

Yes, the next version will be a test version first (but I have not released it yet). It has a new feature that should be tested before stable release.

I’m having a problem with the arrow widget. I use this to show the flow of energy from my solar panels to my home or to the grid (which direction the energy is travelling in). On my MacBook, the dynamic arrows work fine (moving in the direction of the energy flow), but when I try to display them on my iPad, the dynamic arrows no longer work. They just stay static and don’t move. I’ve tried various things, but I can’t get it to work. (Snippet attached showing 1 arrow.) Thanks in advance for the help.

{
“snippetHeader”: “Dashboard Studio Snippet”,
“snippetType”: “widget-snippet”,
“snippetFormatVersion”: 1,
“version”: “2.0.16”,
“source”: {
“dashboardName”: “dashboard”,
“page”: 4,
“createdAt”: “2026-10-19T12:50:04.203Z”
},
“master”: {
“currentPage”: 4
},
“widgets”: {
“arrow_147855232”: {
“type”: “arrow”,
“overrides”: {
“x”: 560,
“y”: 270,
“width”: 308,
“height”: 395,
“zIndex”: 4,
“page”: “4”,
“fromX”: 590,
“fromY”: 300,
“toX”: 838,
“toY”: 635,
“thickness”: 10,
“headSize”: 0,
“headRound”: 0,
“lineRadius”: 4,
“mainColor”: “@border”,
“flowColor”: “#00FF00”,
“reverseFlowColor”: “#00FF00”,
“glowWidth”: 16,
“animationEnabled”: true,
“animationSpeed”: 3,
“animationReverse”: false,
“gradientWidth”: 300,
“visible”: true,
“metaName”: “Stroom - Zon naar Huis”,
“container”: {
“glow”: {
“color”: “#F0B23A”,
“opacity”: 30,
“enabled”: false
},
“show”: false
},
“animationEnabled_bind_formula”: “value>5”,
“visible_bind_formula”: “value>5”
},
“bindings”: {
“animationEnabled”: “zonnepanelen/measure_power”,
“visible”: “zonnepanelen/measure_power”
}
}
}
}

Hi gunter,

For the next time you post a code snippet, could you paste it between code tags? if you type 3 ` characters the editor lets you paste code like this
this is code
otherwise the quote signs are going to change from " to ” and “
The difference is hardly visible, but this breaks the code. (I can convert it back using online tools, but it saves me the hassle if I can just easy copy and paste it. :slightly_smiling_face:)
Anyway I can see the problem (no need to test your snippet). I shall have this fixed in the next version. :+1:

Hi, i am trying to get rid of the “DEACTIVATED COLOR” for an image component. in the image i have an svg. i hide that svg based on a boolean. that all works but when hidden it shows the border with the “DEACTIVATED COLOR” how can i get rid of that border? i can also not set the custom color to use RGBA with a opacity. just rgb is possible. also the hex does not accept the alpha channel. How to do this?.. ah never mind i used the “deactivated” property instead of visability. its doing its thing now.

Hi

I am trying to recreate your main problem.
I have added an image widget with some RAW svg code in it.
Added a button and connected the output topic using a local topic to the visibility setting of the image widget (in the widget section)
Snippet:

{
  "snippetHeader": "Dashboard Studio Snippet",
  "snippetType": "widget-snippet",
  "snippetFormatVersion": 1,
  "version": "2.0.17",
  "source": {
    "dashboardName": "Untitled",
    "page": 1,
    "createdAt": "2026-10-19T16:58:51.107Z"
  },
  "master": {
    "currentPage": 1
  },
  "widgets": {
    "image_7419": {
      "type": "image",
      "overrides": {
        "x": 460,
        "y": 150,
        "page": 1,
        "metaName": "New Image",
        "width": 250,
        "height": 240,
        "visible": false,
        "sourceType": "svg",
        "svgRaw": "<?xml version=\"1.0\" encoding=\"utf-8\"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->\n<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M15 1H1V7H3.38197L4.88196 4L7.11803 4L10 9.76393L11.382 7H15V1Z\" fill=\"#000000\"/>\n<path d=\"M15 9H12.618L11.118 12L8.88197 12L6 6.23607L4.61803 9H1V15H15V9Z\" fill=\"#000000\"/>\n</svg>\n"
      },
      "bindings": {
        "visible": "local/showsvg"
      }
    },
    "switch_3148": {
      "type": "switch",
      "overrides": {
        "x": 460,
        "y": 420,
        "page": 1,
        "metaName": "New Switch / Button",
        "width": 250,
        "height": 120,
        "buttonLabel": "Show SVG",
        "outputTopic": "local/showsvg",
        "state": true
      },
      "bindings": {}
    }
  }
}

I can enable and disable the switch without any issues to hide and show the image. Could you import this snippet and confirm whether it works properly on your end?


In my experience it does it not display the deactivated color when hidden.

Which element are you trying to give a custom color?
All colors are strictly RGB. Adding transparency directly to colors caused too many issues, so elements that benefit from transparent styling have a separate opacity setting instead.

so my problem is solved. the thing i could not get rid of shows up when i disable the image. it draws a box with the color that is set in “DEACTIVATED COLOR”

New TEST Dashboard Studio 2.1.0 version.

2026-10-19

  • New: Auto-Widget Gallery - A smart widget generator integrated into both the Reset Canvas setup wizard and the Data Stream Explorer. It automatically scans all incoming Homey and MQTT topics and uses an intelligent detection algorithm to suggest the best widget type, style, icon, and unit for each live value (such as gauges for power or temperature, switches for lights and states, or sliders for dimmers). Previews are rendered live in a responsive grid with your dashboard theme, allowing you to fine-tune presets and add pre-configured widgets to your canvas with a single click.
  • New: Getting Started Pointer - On the demo dashboard, an arrow points to the Edit button, then to Reset Canvas.
  • Fixed: Kiosk Stability - Improved stability and reduced memory usage for continuous wall panel and kiosk displays running over multiple days.
  • Fixed: Themes - Themes now strictly apply visual styling without altering widget layout or behavior.
  • Fixed: Responsive Columns Menus - Clicking in grid gutters no longer prematurely closes open dropdowns, topic menus, or color pickers.
  • Fixed: Formulas - Formulas referencing the same topic multiple times now evaluate reliably.
  • Fixed: Graph Height - In Responsive Columns, a new graph with automatic cell height matches the column width instead of opening extremely tall.

Auto-Widget Gallery

In my quest to make Dashboard Studio easier to use, I came up with this great new feature. This “auto widget Gallery” dialog (Available in the tools menu, and the “Data stream explorer” scans all incoming topics using a sophisticated “Topic-to-Widget Harmonizer Matrix (Deluxe) Pro” ™ engine that guesses which topic / value fits what widget best, and configures it automatically. You can always pick a different widget if you prefer, or tweak the styling using the built-in presets. Just check the items you want and drop them right onto your dashboard. It is also fully integrated into the New Canvas Wizard now.

Creating a dashboard now takes just a few quick steps. First, select each capability you want to display or control in the Homey Dashboard Studio settings. Next, open Dashboard Studio and reset the canvas to launch the wizard. Walk through the four quick pages and you will have a fully populated dashboard ready to go. You will still want to rearrange and resize everything to your liking, of course, but it gives you a great starting point.

It is not 100% finished yet (parts of it were actually in development back during V2), and I still need to write up the documentation. That said, it is good enough for testing. So far I have only run it on my own setup, so I would love some help testing whether it guesstimates the right widgets. If it completely misses the mark on something, please drop a note with the topic name, the payload in a code block, and what widget you actually expected so I can fine-tune the filter.

It also configures topic values as best it can, automatically determining values and setting min/max ranges from incoming data. If you spot any widget that should be configured differently out of the box, definitely let me know.

Bug fixes

There are plenty of smaller and larger fixes for issues introduced during the recent performance update, along with major improvements to the responsive columns layout mode. A few of the new themes were altering way too much (such as injecting unexpected X/Y labels onto graphs), which has now been sorted out too.

This bug has been fixed, can you check it?

Can you check if it now works (make sure to install the test version)?

This bug is also fixed Georges. But you need to use the test version

This is also fixed. Please test :+1:

@Satoer The issue with the formula has been resolved. It is now working as expected. Thank you very much for the quick fix.

Yes, that fixed it!

Worked perfectly!

BUT the refresh rate for the view from my doorbell camera is very strange. It looks like the image is alternating between two old views, without showing the current view. Did I miss something ?

This bug is also fixed Georges. But you need to use the test version

Thanks Michel, you’re the best :star_struck:

Arrow problem on Ipad is fixed .Thanks.

NEW Dashboard Studio v2.1.1

2026-10-20

  • New: Light Grid Live Lights - Choose lights from the topics already on your dashboard. Each light appears as a small icon with its name, live color, and brightness. Lights already in the grid start checked. Apply adds new lights and removes the ones you uncheck. Combine merges selected light devices into one tile, and Split gives a grouped light its own tile.
  • New: Basic Beginners Tutorial - Added a step-by-step beginners guide to the documentation.
  • New: Filter by Capability - In Dashboard Studio configuration settings, a new capability search bar sits alongside the device name filter, allowing simultaneous filtering by device and capability with automatic section expansion.
  • New: Dashboard Statistics, Advanced Data Explorer and Diagnostics - Live telemetry, topic inspection, and a Diagnostics page (easy for submitting error logs).
  • Fixed: Several bug fixes and stability improvements.

New: Light Grid Live Lights

A new addition “Pick live Lights”

To make adding lights easier, click this button to open a dialog showing all lights that have the Unified light JSON capability enabled.

This makes dropping lights into the light grid widget super easy. Another handy improvement is being able to check lights and group or ungroup them if you want to control multiple lights at once. I still think working with moods is the better way to control lights at home, but if you want to tweak individual lights, configuration is much smoother now. Note that you can still use the light grid as a regular switch panel.

New: Basic Beginners Tutorial


Added a full “Basic” tutorial. This is a quick walkthrough showing how you can build a dashboard with just the most basic steps possible.

New: Filter by Capability

You can now filter by capability in the Homey Settings. This makes it super easy to filter just the lights and check their topics, for example.

New: Dashboard Statistics, Advanced Data Explorer and Diagnostics

There is now a more advanced data explorer available to dig deeper into all topics and usages.

There is also a Diagnostics page showing all system settings and console output. I regularly ask users for system or console output when troubleshooting issues, so this makes sharing it way easier.