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

[Satoer]

@Amersfoort

I would like to define the menu structure in my ~30 dashboards/pages (partially still to be configured) that I want to link. Do you have any idea if, and if so when, you expect to be able to release a pull-down menu object?

I’m working on it, but I don’t have a release date yet. Can you tell me more about your exact requirements? The concept I’m currently developing is more of a menu widget. It’s designed as a list of text buttons with optional icons that can be oriented horizontally or vertically. It can also be triggered by a (local) button so a user can create a dropdown, drop-up, or side-aligned menu from it. It’s still in development as I’m trying to streamline it with the lightgrid design. (I want to keep the options and style consistent with this widget)

30 menu items sounds like a lot, and 30 dashboards sounds like a lot too. What kind of dashboards are you producing? You might have told me already, and if so, I apologize, my head is a bit full at the moment.

I believe you also requested THEN flow cards to send data to specific dashboards. I’m still crunching on that. It should probably be based on the dashboard name, but it would be really annoying if renaming a dashboard (or doing things like V2, V3…) broke the link.

I also need to keep the communication universal and backwards compatible with MQTT. But these messages should have an extra dashboard ID parameter that the dashboard can ignore if it’s not the same. I’m afraid it might be best to keep all topics unique; if you don’t use that topic on other dashboards, it automatically gets ignored.

[Satoer]

@Rob_G

Would you consider adding real grouping, so I could move a grouped item which would respect the relative pixel adjustments? Also, what would really be great, is when I could export/import grouped items. This would enable me to build a library of my own components and, even more important, users of Dashboard Studio could exchange components!

Yes, grouping is in the pipeline, but have not fully worked that one out:

@Satoer

Group option… though this one is a bit tricky. It requires implementing a hierarchy system within the data files, which would break backwards compatibility. While there is already a migration script to convert old dashboards, this would be a massive structural change. Alternatively, I could take a “dirtier” approach by creating a separate section in the data file for linked widgets. The end user wouldn’t notice a difference, but it’s a lot to consider.

Current leaning on the dirtier solution.

Copy and paste is also in the pipeline. It would just copy partial dashboard JSONs to the clipboard so you can transfer them between dashboards or share them with other users. Node-RED has a similar option.

But I have to be careful and keep a lot of things in mind. For example, what would happen if you paste an old version of a dashboard into a new version? It should go through the migration engine. Also, I need to solve grouping first so the copy/paste mechanism can handle groups as well. I should also think about how it handles pages. Should it paste with the pages already configured in the widgets? What happens if the user is on page 10 and pastes widgets that are configured for page 1? Nothing visible would happen. Should it automatically change the page to the current page, or should it show a dialog asking to change the page? Haha, all kinds of things I should overthink.

Anyway, good point about the breaking the pixel perfect adjustments when things are moved in a group. I shall try to fix that one also

[fmb]

Indeed, on purpose I left the x-axis switched on on both (stacked) graphs. Removing one of them leads to a “higher” graph (more room for the y-axis). So this results in a change of the scale of the y-axis.

However…

I did find out that reducing the height can be done in such a way that the x and y axis are aligned and the values have te same place as well. So this work, but then both graphs do have a differend height, which is less intuitive. But, if it works, it works.

So, a sharp one:

[Amersfoort]

@Satoer

Can you tell me more about your exact requirements?

I am trying to replace my current tailor made web based dashboard by Dashboard Studio (faster performance and (except some Homey scripts) no programming but configuring.

The “old” one contains 6 main menus:

(orange icon is current selected menu option, blue = menu pulled down)

• Home: 3D ground floor plan with lots of buttons in that floor plan with lighting layers (main reason for my high resolution screens)
• News headlines: latest message from Dutch media
• Meters and energy with submenu:
  
  
• Weather with submenu:
  
  
• Solar with submenu:
  
  
• Miscellaneous with submenu:
  
  
• Close/exit app (not possible yet in Dashboard Studio I believe)

Clicking on a main menu icon with a submenu: the dropdown menu as shown above will appear. In the new dash a click on a main menu without sub, or click on submenu causes a switch to another dashboard + page, or to another page (if all pages are in one dash).

@Satoer

annoying if renaming a dashboard (or doing things like V2, V3…) broke the link

Until now I have not been renaming dash names. During export/backup I use the v2, v3… variants. I am afraid of loads of variables coming from Homey, but separate variables for each dash is a nice to have. And if the performance stays fast even sending a lot of script/flow variables to the dash, than it is no problem.

Short: it would be nice to define a submenu related to a main menu/icon:

• defining multiple submenu lines
• with an icon and submenu name
• colors for selected, unselected and active menu (in my example color blue, white and orange)
• changing screen to other dash and/or page
• using external SVG icons

Some of the screens I posted before in this topic.

EDIT: do I have to define the menu structure 30 times for 30 dashes?
EDIT 2: Hopefully, you interpret all those wishes from demanding users, like me, as enthusiasm for your software. It remains a hobby, after all, and not an obligation.

[Sundlof]

It would be nice to have a When-card for saved dashboard. So I can reload the dashboard with Fully Kiosk Browser so it gets the new update directly.

[Satoer]

Wow man, I applaud your determination in creating such an extreme dashboard. The amount of detail in all those menu options is insane! I still wonder, though, do you actually use all of it, or is this just for fun? For example, why not have a single dashboard page with all the weather info you need? Do you really have a page dedicated solely to “Air Quality”? It is probably a graph, but wouldn’t it be handier to have multiple graphs on a single page?

When I created my first dashboard years ago, I also crammed in as many options as I could fit. I wanted to control every light’s color, temperature, and brightness (and I have about 25 Hue RGB spots in the livingroom). To be honest, I think I used it maybe three times. The dashboard was full of unnecessary stuff, and I eventually discovered that lighting “moods” or “light-themes” were a much better way to control the home. I also wonder how many people are actually using the “light grid” widget, that widget to adjust all individual lights. I haven’t seen any bug reports or requests about it, so either I did an incredible job with that one or nobody is using it haha.

@Amersfoort

Close/exit app (not possible yet in Dashboard Studio I believe)

I am not sure what you mean by “exiting” the app since it is just a webpage. The button widget does have an “onclick” option that jumps to another URL. Like I did in the demo, when you press the Emergency Shutdown, it jumps to another page:

This discussion about performance also made me think about this button. Now you can choose 3 modes, topic, url or page. But I think it would be useful if the topic when filled in is also always send. This way a user can go to a different page of the dashboard, and in the same click send a message to homey to update the graph on that page.

@Amersfoort

Some of the screens I posted before in this topic.

Thanks for the screenshots. They remind me that I should also add an optional background blur for containers and menus.

@Amersfoort

And if the performance stays fast even sending a lot of script/flow variables to the dash, than it is no problem.

Performance-wise, it wouldn’t make a difference. The data is sent anyway, and the dashboard just ignores it. I also don’t think the amount you send is an issue. I do not notice any slowdown even when I hammer it with a fast stream of image URLs. I do think you can make your Homey’s network more stable by using their direct Ethernet cable adapter.

@Amersfoort

EDIT: do I have to define the menu structure 30 times for 30 dashes?

If you put everything in a single dashboard, then no. You can set the same menu on all the pages, currently only with [1,2,3,4,5…] but I think I should update it to include ranges, like [1-5,7,8,12-15]. If you are going to create 30 separate dashboard files, well, then yes, you cannot share the same widget over multiple dashboards without copying.

@Amersfoort

Hopefully, you interpret all those wishes from demanding users, like me, as enthusiasm for your software. It remains a hobby, after all, and not an obligation.

Sure, I am happy to hear all requests. Most of your requests or reports made a lot of sense to integrate. Until now, I could spend a massive amount of time on this project, but that will be declining in the coming months. I am self-employed and currently between projects, but a big project is coming up. And since this is free software I don’t feel obligated at all

[Satoer]

@Sundlof

It would be nice to have a When-card for saved dashboard. So I can reload the dashboard with Fully Kiosk Browser so it gets the new update directly.

I did not know you could reload a dashboard remotely with a homey app. I should check this out. What app is that?
Good idea. Ill Add it to the list

[Sundlof]

When you use Fully Kiosk Browser you can control it with the app Dashboard Controller and its great!

Dashboard Controller | Homey

[Rob_G]

Thank you Sir!

[Satoer]

# New TEST version 1.3.4!

New feature: The button now has a group setting:

Within a configured group, only a single toggle switch or button can be active at any given time. When you switch a new button to the ON position, any other buttons in that same group will automatically toggle OFF. You also have the option to allow the button being turned OFF to report its updated value to Homey. Note: This group feature is disabled if the button “On click” behavior is set to the “Go to page” navigation option.

Also new:

The Button now ALWAYS sends its value to the specified topic, provided there is one configured in the Output topic field. For example, a user can press a button to navigate to a dashboard page and simultaneously trigger an update for a graph on that page. This ensures that Homey only needs to broadcast new values when the page is actually open and active.

@Vierlijner

Maybe switch the button icon color settings from place, because above it’s also first Off and then On.

Fixed

@Rob_G

but when pixel nudging overlayed widgets, I find myself re-adjusting over and over. Especially when you want to move a group over overlayed widgets, they all snap to grid individually again. Especially with arrows, moving stuff will “break” alignment.

Fixed. When widgets now move in a group their individual pixel perfect posistion wil not re-adjust to the grid again. (still working on the grouping option)

@Sundlof

It would be nice to have a When-card for saved dashboard. So I can reload the dashboard with Fully Kiosk Browser so it gets the new update directly.

Added

New Feature: A “When” card that triggers once the dashboard is saved and the user closes the success dialog. This allows Homey to trigger actions like the Fully Kiosk Browser card to reload the page automatically. It is incredibly handy for those times you are remotely editing a dashboard and need to refresh the display on a device that is hard to reach.

@Amersfoort

How can I make clear with an icon or text that Homey is offline? Homey cannot send a message to Dashboard Studio in that case.

Added

New optional setting that warns the user on the dashboard when the connection is lost to Homey. This way the use understands why controls are not working.

Full changelog

[Amersfoort]

@Satoer

do you actually use all of it, or is this just for fun?

Both. Sometimes I ask myself: would it be possible to make a nice graph/list?

@Satoer

why not have a single dashboard page with all the weather info you need

To much info that won’t fit on one screen.

@Satoer

Do you really have a page dedicated solely to “Air Quality”

Air quality per hour. Which brings me to the question: With Homey script or flow card I can create a json string with air quality, or solar energy values per day compared with previous years, or solar costs vs. revenues (payback period). How could I display these json “tables” in Dashboard Studio?

@Satoer

wouldn’t it be handier to have multiple graphs on a single page

Something like this (new prototypes)?

@Satoer

I also wonder how many people are actually using the “light grid” widget, that widget to adjust all individual lights

I don’t understand the meaning of this widget. Maybe a short explanation of an use case could help.

@Satoer

I am not sure what you mean by “exiting” the app since it is just a webpage

I use Fully Kiosk Browser free licence for using the dash on my tablet. A click on the dash Exit button could close/end the Fully Kiosk Browser app (if possible).

@Satoer

This way a user can go to a different page of the dashboard, and in the same click send a message to homey to update the graph on that page

That sounds like a good idea.

@Satoer

The data is sent anyway, and the dashboard just ignores it

I plan to make one flow per dashboard/page (otherwise the flows would be too big), and only activate that flow when the user navigates to that dashboard/page. Now: when I activate the dash tablet, a Macrodroid macro activates all Dash flows and start them. The opposite happens when I turn off the screen again.

@Satoer

I do think you can make your Homey’s network more stable by using their direct Ethernet cable adapter

I will restart Homey every night again to test if this improves stability.

@Satoer

you cannot share the same widget over multiple dashboards without copying

With my “old” web dash I made a menu component. One definition of the menu structure and reuse it 30 times. Changes are made once. Could a group mechanism extension or template do the job? Also usable for a clock or message on every page.
Alternative: make with script and/or flow a json with menu structure once and read this json in the dash with a menu setup (one time on every page, but way better maintenance).

@Satoer

Sure, I am happy to hear all requests

I’m glad to hear.
And now lots of ideas again.

[Amersfoort]

Big time nit picking:
The color gradient around the start (see red arrow) is identical to the start of the color gradient to the middle color. Is this me not setting up something right?

/nit picking mode

[Satoer]

Thanks for the update. I’m honestly a bit flabbergasted by the sheer amount of info you consume with that dashboard of yours. You must work for the Dutch Meteorological Institute or something, haha.

@Amersfoort

I use Fully Kiosk Browser free licence for using the dash on my tablet. A click on the dash Exit button could close/end the Fully Kiosk Browser app (if possible).

I just added version 1.3.4 (see this message) which adds a new THEN card when a dashboard is saved so Fully kiosk can reload the page. User Sundlof:

@Sundlof

When you use Fully Kiosk Browser you can control it with the app Dashboard Controller and its great!

Used this app:

Dashboard Controller | Homey

To control Kiosk browser. I don’t use kiosk browser myself, but I see there is an THEN card with: “Turn off” you can probably connect a dashboard studio button to this with ease.

@Amersfoort

Air quality per hour. Which brings me to the question: With Homey script or flow card I can create a json string with air quality, or solar energy values per day compared with previous years, or solar costs vs. revenues (payback period). How could I display these json “tables” in Dashboard Studio?

Don’t think you can do this in a user friendly way. I also don’t think I can add a table widget in the near future.

Ill add your suggestions to the list though

[Amersfoort]

@Satoer

I also don’t think I can add a table widget in the near future.

I managed to create tables/overviews (including animation) with Homey data using SVG in Dashboard Studio! For me, this represents a different way of thinking,. You cannot create loops within the SVG itself, but by creating loops in the Homey script, you can generate SVG table rows.

Nice to have: to simulate scrolling through the SVG “table”, the image would need to have a scrollbar (no idea if that is possible, as I am not a developer).

Alternative investigated: generate an HTML/CSS table with a Homey script, send it to an image generator, where the received URL is used in a dash image. The options for this were too limited, did not work, or were paid.

[Satoer]

# New test version V1.4.0 is here!

This is a massive update packed with major editor improvements with all of the most requested editor features.
Ill tag the names of everyone that requested one (or more) of these features (To much work to quote every request ): @Amersfoort @Yann_Liqueur @Rob_G @Martijn_C @Vierlijner

Grouping!

You can now select widgets and group them together. Once grouped, you can open the group to work on individual widgets. Opening a group automatically hides all the other widgets to keep things clean. Side note: You cannot nest groups inside of other groups. I figured this would complicate things unnecessarily. Instead, if you try to do this, it will simply put all the widgets together into one single combined group.
Side note2: The groups are not backwards compatible with previous version (like the stable non test version in the appstore). I advise the back up dashboards before grouping, because the grouped widgets will disappear if you try to open it in an older version.

Copy and paste!

You can finally copy and paste widgets and groups. This works on the same page, across different pages, or even across different dashboards. Just a quick heads up that due to browser security limitations, the Dashboard Studio editor uses an internal clipboard. This means your clipboard will clear if you reload Dashboard Studio.

Snippet sharing!

You can now share widget snippets with others. Just select the widgets you want to share, and you can export or import the snippet code.

Undo!

You can now undo and redo actions if you accidentally make a mistake. The system keeps track of your last 20 steps.

Other editor improvements

I also added a bunch of other improvements that make the editor much easier to use.

Page editor

There is a new page indicator and editor that lets you easily jump between pages without needing to open the group “Canvas environment” slideout.

Top status bar

The dashboard name, current page, and status are now right in the top info bar. This means you can always see the file and page you are working on, no matter where you are in the UI since the top bar is always in view.

Easy selection for stacked widgets!

This was a huge personal irritation of mine. I hated not being able to select widgets hiding behind other widgets, and searching through the Selected Widget dropdown was pretty annoying. Now, you can just use the middle mouse button or press ALT plus Left Click to select a widget behind another one, even if it is multiple layers deep.

Check out the full changelog for all the details.

[Amersfoort]

I can’t see version V1.4.0 in the Homey app store, even not as a test app.

[Satoer]

Forgot to push the Publish button. It now is

[Rob_G]

Kudos @Satoer I wish we could release this fast in our company

[Vierlijner]

@Satoer

You can now select widgets and group them together.

This works lovely. And there is always a but . When I duplicate 1 group it stays a group and I can rename and edit it. But if I select 2 groups and duplicate them, then the duplicated ones are ungrouped . You can still group them again, but it’s more work, but not a great deal.

[Vierlijner]

Is it possible as a feature, that on windows I press Ctrl+g (goto) in the browser, I can jump between pages, now I get the search option?