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

It’s a little hard to follow your question, but I think you’re asking if you can change a widget’s background color based on a status. The answer is yes, you can. In fact, you can make every color dynamic. Beyond that, you can even color-correct them to create nice tints and gradients.

To make a color dynamic, you need to click the chainlink icon above the setting. From there, you can enter a “topic.” This can be any name you like as long as it is unique and uses normal characters.

In a Homey flow, you can then add a “Send [Topic] with [Value] to dashboard” THEN flow card. The topic will be the name you created, and the value should be a regular CSS color code. You can use this color picker to find the colors.

This means you can set any color you want based on the outcome of a flow, such as electricity consumption or the time of day.

1 Like

At the moment, I am also a bit unsure what the problem might be. :sweat_smile: Since a dashboard update also restarts the app, it is pretty strange that a manual app restart fixes the issue as well. If you find any additional information about what might be triggering this bug, please let me know. Right now, I really have no idea how to fix this.

1 Like

I am not able to reproduce the problem:

Could you select the problematic widget, copy the code snippet and share it in a codeblock over here?

ok thx,
Can a widget be displayed based on a single condition?
For example, if the washing machine is running, then display the machine (animated GIF image)?

Sure.

  • Add a image widget

  • Put a link to the gif animation in the Data & Source => url. Or if you have the gif you want to use on your computer you can upload it in the image Gallery (button top of the editor)

  • Make visibility dynamic (in the Widget Info section)

  • Control this visibility value inside a homey flow to turn it on (send “true”) or off (send “false”)

I don’t know if the wash machine has a specific app, but if it features a boolean capability (on /off) that it is washing or not, you can connect this setting directly to the visibility setting inside dashboard Studio.

After extensive testing, I have come to the conclusion that placing each of the 30 pages in a separate dashboard is not practical:

  • does not make efficient use of reusable components
  • slower screen rendering and transitions
  • menu difficult to maintain (executing all changes 30 times).

Therefore, I switched to 30 pages in 1 dashboard, as this solves the above negative issues. One of the pages contains ~20 MB of images, and despite the fact that the “Preload images on all pages” option is enabled, you can see this rather heavy page building up in terms of images, even it is not the first page loaded. The second time during the dashboard session opening this page is visible immediately.

I still haven’t quite figured out the menu settings. I have tried the following: in a horizontal menu and with separate buttons, I have 2 main menu items without a submenu (which must go directly to a page), and the remaining items must display a submenu. When setting up “Action & Behaviour”, I cannot enter a “Selection group id” (disabled) with the value “Go to page” in “On click”, causing not all main menu items interact with each other.

What is the best approach?

Other remarkable thing: when I enter a value in a wizard settings field, and without killing the focus on that field go to another existing wizard with the similar settings, this same value has been filled in in that second wizard too.

When I duplicate an item inside a group, then this duplicated item is not linked to the group, so when i’m in the group I don’t see it. When I close the group I see it of course.

I am working on a solution for this issue. It is still a work in progress but it looks promising. I am calling it a “Reference Widget.” Essentially, it is an empty widget that imports other widgets or groups from different dashboards.

In the editor, you will have a “dashboard” setting or dropdown where you can select any dashboard saved on your Homey. Below that, another dropdown labeled “Widget or Group” allows you to pick a specific widget or an entire group. In viewer mode, you will see that imported content live on your dashboard. You won’t be able to change the contents of the widget from within the “Reference” version, with a few exceptions like X and Y position, pages, and visibility. If you need to edit the actual widget, you just open the original dashboard and change it there.

It is still in development though, as I haven’t figured out every single detail yet.

This does not solve this problem though. In the future, I want to fully split the editor from the viewer. This should make loading dashboards a bit faster. I might also be able to optimize how individual dashboards load to speed things up, but it will never be quite as snappy as simply switching between pages.

In page mode, the state of a button or menu item is determined by the page it is currently on. If a button is set for page 3 and the dashboard is on page 3, the button is enabled automatically. You could overrule this by setting “On click” to “send topic” and the “Output Topic” to a local topic like “local/goToPage” and adding that same topic to the “Active Page” in the “Dashboard Environment.” You can then control the page number by setting the page number in the “ON” value of the button. I am not certain if this solves your specific problem, but you should be able to set the “Selection group id” that way.

Yes, the editor does not refresh the UI when you switch between identical types of widgets. If you haven’t confirmed a setting, that value remains visible. Personally, I like that the UI doesn’t refresh because it means you can edit the same setting across multiple widgets quickly without slide-outs collapsing or the settings scrolling back to the top.

Ah, you keep finding edge cases to break things :rofl: , Ill add it to the list :+1:

1 Like

I agree, but many, many times the edited value from widget A has been saved in widget B…

Can’t have that. Shall fix that. :+1:

I thought I was alone :cry: , so I didn’t reported it. You have to tab out or first select another field in the same widget, before selecting another widget, else your field change is done in the other selected widget. I mostly do a TAB - out to prefent this, but I also forget this sometimes.

New TEST release 1.6.3

Fixed :+1: Horizontal gauge axis labels no longer spill past the bar.

Fixed. :+1: Also resolved same problem if you paste a widget inside a group

Also fixed :+1:
Typing a value in the editor and then clicking a different widget no longer applies the unconfirmed value to the wrong widget.

2 Likes

This works, thanks.

Almost no one, including me, understands this or can figure this out themselves (such as adding a page number to the ‘On’ value); I am just reproducing your configuration instructions. I don’t think I’m coming up with an extreme menu setup.

Please make the Menu wizard easier to setup in general.

You assume that all the things you want to do are totally normal and should be possible for the average user… But you want 30 separate dashboards with a uniform main-menu that can be edited in a single instance. That “Main Menu” needs to highlight the current dashboard while also showing multiple submenu’s. Plus if the main-menu shows a sub-menu it still needs to highlight the current dashboard and close any other sub-menus when clicked.

Well yeah… That makes things a bit complicated. :sweat_smile: Do not get me wrong because I love what you are trying to do and I totally get the vision. In fact I consider you the Ultimate Master Beta Tester since even I cannot come up with all the things you try to integrate into a dashboard. But giving more than one purpose to a control makes things tricky. It can be done and I would not say you are using widgets for things they were not designed for because the core principle is the freedom of linking everything together however you like. But let’s be honest, you are stepping outside the boundaries where a normal user swims and you are entering the “Advanced Pro User” zone.

The menu system is designed to be a simple menu where you have a lot of options to style it exactly how you want. I do not think it is too complex. You just add a menu-item and configure it just like a button.

With the dropdown menu it gets a little more involved. I wanted the menu to be able to pop out of a basic button (or other element that activates it) so the menu has to react to a button press. But the button also has to react and turn off again when a menu collapses on its own like when an item is clicked. So the “Output Topic” from a button has to be connected to the “Trigger Activation Topic” of the menu and the “Output Status Topic” of the menu has to be connected to the “State” of the button to let it know to deactivate.

So far that is not really complicated. Just two things that need to be connected.

You can do the same with menu-items to create a submenu out of a menu. A menu-item acts just like a button and has the same options. But this gets one little step more complicated. When another main-menu item is clicked it should collapse the sub-menu. This is done by making each main-menu item a member of a “Radio Group” so only one item can be active at the same time. You also need to activate “Allow empty selection” so you can have nothing selected and “Send Off When Turned Off by Group” to let the other menu-items retract their sub-menus.

Yes that is a bit more involved but still understandable.

You had main-menu-items configured as “Go to page” and in that case the menu-item or button automatically sets its state to on if it is on the correct page. With “Go to page” the button cannot be a member of a “Selection Group”. This is because the on or off state is controlled by the current page and you cannot have it controlled by another button at the same time. Otherwise this would create a massive paradox and collapse the complete space time continuum. :scream:

To be able to set the page and be controlled by other buttons you have to create a manual solution. I do not think it is too complicated if you solve everything step by step and you understand the software. But I also do not think a lot of users are going this far to achieve something. The good thing is that it is possible. The bad thing is that you have to find some more hands on solutions.

You mentioned “Wizards” a couple or times, but there are no “Wizards” in Dashboard Studio right now. A wizard is a dialog that leads the user and lets them choose options step by step. I have thought about creating a “Connect to button” feature inside the menu system where a real wizard dialog pops up to ask which Button it should connect to and then sets the Topic linking automatically. Maybe I will add that later but I also think that when users learn how to create the raw Topic connections they get a better understanding of how Dashboard Studio works overall.

Anyhow I agree it gets a bit complicated when you go this deep but there are not many users who venture this far. If they do I am happy to help and find solutions. I think good step by step tutorials would give a better understanding of how to do things. I try to keep the help file updated but I want to rewrite many parts to make everything much clearer. When the wave of requests and fixes is over I shall take the time to make the widgets more logical to configure and improve the help file. If you have any solid or well defined ideas on how to improve it please let me know. I am not saying I will use all of them but I always try to implement the solutions you guys (or girls though I have not seen any pink dashboards over here yet :rofl: ) want.

I respect your answer and appreciate all the effort you put into your software; however, it takes a lot of words to say that the menu settings are not complex, but my ideas are…

haha. Okay I think the whole Dashboard Studio can be complex as a whole. I deliberate say in the openings post:

But where does the menu system get too complex compared to other (widget) items according to your vision:

  1. Adding a menu to the canvas
  2. Changing the appearance of the menu like horizontal and vertical mode
  3. Changing other basic styling options
  4. Adding menu items
  5. Adding icons to menu items
  6. configuring menu items to do what you want like triggering a topic, go to a page or open en url
  7. configuring menu items as a toggle item like a checkbox
  8. configuring menu items as a radio group: setting the group ID and deciding of all buttons should be able to turn off or not
  9. Changing the menu to a dropdown menu by setting the “Menu Slide Style” to dropdown
  10. Activating the menu by adding the same local topic in the buttons “output topic” to the menu’s “Trigger Activation Topic”
  11. Connecting the feedback of the menu state by adding the same local topic inside “Output Status Topic” of the menu and the “state” setting of the button
  12. (in case the user uses another “main” menu to activate above menu): setting the main-menu items part of a radio group so only one item can be active at the same time.

These are all the steps to create a full-blown automatic menu system with multiple sub-menus. Looking at the list, it might seem like a lot, but most of these are just about configuring the menu items to look and behave exactly how you want. Honestly, I think that is the case with any menu system. Only steps 11 and 12 might be a bit confusing regarding why they are necessary, but that can be easily explained in a help file. Plus, the menu would still function even without those specific steps. If you think certain steps could be improved, what exactly should change to make things easier without losing the freedom of configuration?

[edit] hmm The “Haha” in the beginning might come over as sarcastic, but that was not the intent. :sweat_smile:

When show the list of all widget you start with the groups and behind group you show the total items. But is it also possible to show on which pagenumber it’s on?

I have done some expirimenting, but I was not able to reproduce the problem.
Only thing I could find back is that it happened more or less at the moment that DS was updated to V1.6.2. For now I will leave it like it is.

Talking about experimenting. My next project is to create a nice weather dashboard based on OpenWeatherMap data. I am layering some graphs in one overview, but I was thinking it would be nice to show icons on the graph as well. For example the weatherconditions or an exclamation mark when bad weather is expected etc. But to be able to do so the graphs should also support icons and the json should be something like this:

[
{ “t”: “2024-01-01T10:00:00Z”, “v”: 100, “i”: “icon_a.png”},
{ “t”: “2024-01-01T10:05:00Z”, “v”: 105, “i”: “icon_b.png” }
]

Is that something you could add?

One other thing:
Could you also add the bold option to the text widget?

Yes, it was a kind of lazy solution to put all the groups in the beginning (otherwise I had to filter all page numbers from all widgets to calculate the page it should be featured on). It is more logical to put it on the (first) page is is featured on.

Question, why are you using that dropdown? Do you think it is easier to select a widget that way? I can imagine it is useful to select a widget and go to the correct page immediately but is this also the reason why you use it? I usually work on a specific page so click the widgets directly. The only time I used this dropdown is because some widgets where hidden behind other widgets that made it hard to select them. But with the introduction of the middle mouse click (or ALT+Left click) I can easily select widgets behind widgets. Do you use this?

Sounds like that could be definitely something to make the NAS unresponsive.

That’s interesting. Where would this icon be shown then? Do you have any example graphs that feature icons?

It is already possible. But it is not a separate setting. The the text widget has a basic markdown support:

If you put the text between “*” it gets bold.

[edit]
Maybe you use the text it in a dynamic way and adding “*” is not feasible? You could just use a container widget with a hidden container. This allows you to style the font directly: