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

[Rob_G]

@Amersfoort Exactly that: an airco

[Satoer]

@Vierlijner

When I enable locked then I can change the output topic from a switch for example, but when I leave (Tab) then all the switch options are gone and only the widget info options are there. Then I have to unlock again so I can edit again.

Ah, yes, will fix that

@Rob_G

Unfortunately, I cannot control the visibility of a group. That would be a solution for me.

Yes group visibility is scheduled for the next (test) release. Don’t know yet I am able to release it today. Otherwise the only way is to set the visibility of each widget using a dynamic local topic. (“local/topicname”)

@Amersfoort

I have an air conditioner with 5 modes in a single capability, one at the time. I would like to configure one of those modes using a drop-down menu. I also want to be able to see the current mode. Do I need to create various flows, or is there a smarter way? What is the best practice?

In the Demo dashboard, I see an example of a Dropdown menu, but without the underlying functionality.

The dropdown menu in the example has that functionality? When you press the button you see a radiogroup where you can select one of the items. The dropdown button label does not change, but you can make the button label dynamic also and change this based on the selection.

You could even do this all at once. For example:

First setup the dropdown menu like you did before (with the button)

Then set each radio menu item to:
“On Click Action” to “send topic”
“Selection Group ID” to “AircoGroup”
“Output Topic” to “AirconMode” (do not make this a local topic)
And configure “On Value” to “Heating”
“Allow empty selection” disabled.
“Send Off When Turned Off by Group” disabled
Now duplicate this item 5 times, and change for every menu item only the “On Value” (cooling, idle etc)
In the “Menu Behavior & Layout” section I would set the “Close Method” to “Always Automatically Close” (this way the menu closes immediately when something is selected from the radio group)

In the dropdown button set the “Button Label” (Text & Typography section) to dynamic and fill in “AirconMode”. Now when the user selects another mode, the text automatically changes to the selected mode.

Great. Now create a flow in Homey:
add the DS trigger with “AirconMode”
Then feed this in 5 logic compare cards [“Value String” contains “Heating” (/cooling / idle etc) and set the airco based on this selection.

Wrote this without testing, so I might have overlooked something.

[Amersfoort]

Thank you for your detailed answer!

Inspired by your solution, I finally made a horizontal menu with settings as you had suggested.

As always a new question: I’m not using the technical airco mode names, but the end-user ones. On load of the airco settings (technically Visibility becomes true) I would like to show the current mode as highlighted text.

Do I have to define a flow like below to set the State on/off for all 5 modes with (non-local) 5 variables, or could this be done smarter? (flow activated by selecting the airco settings in the dash where visibility changes into true)

Setting the option State to On doesn’t change the state values of other menu items, even all menu items are Toggle switches with the same Group Id.

[Amersfoort]

Working on device settings (other options than on/off/open/close) in one popup:

On the right side of this popup it will be a mess with a lot of hidden options, that are not relevant for the selected device.

Anybody any tips to keep this maintainable?

[Rob_G]

@Satoer @Amersfoort , When playing around with my aircon menu, I’m trying to setup an “airco menu” panel that in itself holds multiple sliding “submenus”. Although I may get it right in the end, it turns up to be very complicated with tons of settings and properties that have to be setup just right:

I am now re-thinking this to put everything on a separate page. For this, I have an “idea” that I wanted to propose:
Would it be possible to have a page act as a kind of “modal” screen? Imagine that you have a page with a button. When you press that button, it opens another page, but as an overlay over the first page. The overlay page would/could be smaller and the space around would be transparent, so it looks like a modal overlay page to the page below. I tried to draw a mockup:

No idea if this is technically tricky, but it opens a whole new world of opportunities, keeping “normal” page design as a tool.

[Amersfoort]

Your air conditioning setup screen looks really good! Could you share the code snippet here so that others (including myself) can get some ideas?

This is mine (work in progress), but I think I’m going to change that now that I’ve seen your setup screen. Here you can see a sort of popup that overlaps my 3D floor plan.

Steps I did to achieve this:

1. Create a full screen container/image over your existing screen and fill it with a gray/black color with limited opacity. Give this container a higher Z-index than the highest index value of the existing dashboard.
2. create a container/image on top of that with higher Z-index that step 1
3. fill that with air conditioning settings that have a higher Z-index than step 2
4. create a button on your existing dashboard that sets a local variable to true, for example local/showAircoSetup
5. use this variable for all components in the popup, including the popup itself, under visibility, to show all setup settings
6. create a Close button in the popup that sets local/showAircoSetup back to false. Pushing this button will hide all setup components.

The higher the Z-index, the more a component is brought to the foreground.

[Satoer]

@Rob_G

No idea if this is technically tricky, but it opens a whole new world of opportunities, keeping “normal” page design as a tool.

Let me brew on this

@Dick_Cornet

Is it possible to show the y-axis line?

I am a bit suprised I forgot to implement this.

@Dick_Cornet

And would like to have tics on both the x-axis and y-axis.

added it to the list

@Dick_Cornet

Another nice feature should be to rotate the x-axis labels + or -90 degrees. For example with time formatted with minutes the labels are overlapping.

Added to the list. But I think this is going to give me a headache to implement. The height should be fixed (you don’t want the whole graph to be shifted up and down when values change.) And it should be fully backwards compatible also. If you have overlapping values you can increase the “X-Axis Interval” in the “Axis & Labels” section

@Amersfoort

Working on device settings (other options than on/off/open/close) in one popup:

To be honest, I have no idea how you even created those sliders with multiple thumbs, and the slider with the rainbow gradient.

I might have thought of a solution for these popup and modal dialogues. Rob-G actually sparked an idea I could implement in a new widget I am working on.

[Amersfoort]

@Satoer

sliders with multiple thumbs

This is in the edit mode, defining multiple sliders for multiple devices (just starting with the first few devices). This is exactly my point: I have to define a setup for >15 devices on this screen (other solutions?). A setting with visibility = false or with a different Z-index are all visible in edit mode. Yes I know you can use the Alt key to scroll through the layers, but even than it is almost not doable.

Maybe the “Open group” option is a part of the solution: only showing the group related objects (no mess with hidden objects or objects with different Z-indexes), but for now I can’t change the settings of these grouped items.
Could the possible new popup widget only show components in that widget and not other layers or hidden objects. When a component would reference to this popup keeping their relative x and y position, the popup could be easily moved without the need of redefining all positions.

@Satoer

slider with the rainbow gradient

My snippet shows the SVG with rainbow gradient. On top of this SVG there is a slider with Track height 0.

Can you imagine all those layers and visibility settings? I can’t think of a better solution without going to another page.

[Satoer]

@Amersfoort

This is exactly my point: I have to define a setup for >15 devices on this screen (other solutions?)

Yes, the problem you are having is perfectly clear. I am working already for a while on a possible solution, but it is complicated to get the code right and tricky to keep things simple. So it might take a while, or it might not happen at all if I deem it too complicated for me or the users

Plus, it is not just the solution itself that takes a lot of work, but the documentation too. Creating examples etc… I still need to overhaul the current help file. I have updated it a couple of times with new features, but there are so many more changes that have happened since version 1.0.0 that have not been documented correctly yet.

[Rob_G]

Sure @Amersfoort I’d be happy to share the snippet. However, I don’t know how. My snippet code is 9K characters and this text box doesn’t allow that much text. I also cannot attach a file.
If you know another way, let me know….

I now experimented with a dedicated page. In the main page (the “caller”) I have a button that is set to “Goto page + Topic”. I jup to the page with the settings and I set the topic to a local variable that stores the “return page” (this page).
On the settings page, there is a “back” button. The button is configured as “Goto page”, where the “Target page #” is set to the forementioned local variabel. Thus, my Aircon solution looks like this:
When this icon is clicked:

Then open this page:

The arrow-left button return the the original page.

[Amersfoort]

@Satoer

or it might not happen at all if I deem it too complicated for me or the users

I am trying to think along from a user perspective. Would a global option at the dashboard level already help, allowing one to set whether components with visibility = false should be displayed semi-transparently or hidden?

[Dick_Cornet]

Are the problems with rotated x-axis labels not the same as the possibilities you now have on the y_axis?

[Richard_Evans]

Hi, I’ve just downloaded this app and have started making a new dashboard, there’s a lot to get my head around. a few questions if that’s ok.

1. How do link flows to Dashboard Studio
2. Can I upload SVG images, rather that copy the code - the one i tried just gave me an empty place holder box.
3. How do i set a button to apply a colour to a particular light (see linking flows question above)
4. Some buttons only allow a single press, then appears to not work, is this a permission thing on my network

Is there a guide I download, the built in help is good and tells me what each widget does, but not how to configure each one

Thanks in advance
Richard

[Satoer]

@Richard_Evans

How do link flows to Dashboard Studio

Please read this section of the help file. This explains how the Dashboard studio flows work. Have you also followed the Homey tutorial for the basics?
After this, If you have a specific problem you want to do, let me know I will try to guide you through.

@Richard_Evans

Can I upload SVG images, rather that copy the code - the one i tried just gave me an empty place holder box.

Sure: On top of the editor is a button to the image gallery where you can upload and copy links from uploaded images.

After upload paste a link to the image in the URL of the image widget:

@Richard_Evans

How do i set a button to apply a colour to a particular light (see linking flows question above)

Can you be more specific what you want to do. You want a single button on the page and when you press it it sets a light to a specific color? (why? ) It is probably way more useful to trigger moods with a press of a button.
You can also use the light grid widget to adjust your lights (set on / off / dim value / color and white mode)

@Richard_Evans

Some buttons only allow a single press, then appears to not work, is this a permission thing on my network

The button / switch widget can be configured as a push button (single press) or a on / off button. (press on, another press off)

@Richard_Evans

but not how to configure each one

Yes I need to update the help file, but first I want to have most of the features I want in it finished. I also need to overhaul couple of things and I do not want to rewrite the help file for it again. I advise you to just change values and see what it changes. You can’t damage anything
Also browse the demo page, and see how things are done and linked.

[Richard_Evans]

@Richard_Evans

How do i set a button to apply a colour to a particular light (see linking flows question above)

I have a Govee bulb and would like to use a coloured button to change the bulb colour.

I was thinking - Create the button and then from the side menu select the “table-lamp/light_hue“ option and this would allow me to send a colour command to the bulb.

I guess this is not the way to do it,

Thanks again
Richard

[Satoer]

@Richard_Evans

I guess this is not the way to do it,

No, The “on click” is only what the button should do when clicked (send topic, go to url, go to page)
Unlink the dynamic option and select “Send Topic”
Then in the output topic fill in the topic (I used another light):

And configure the on and off value. Note: Homey uses values between 0 and 1. So you need to use fractions like 0.2, 0.7 etc to set the hue of a light.

(same as for brightness, if you connect this to a slider it should move between 0 and 1, so enable fraction steps)

[Richard_Evans]

Than you - I will give it a try

[Satoer]

# New 1.7.0 Test release!

New Clock!

The clock widget now supports a custom time source, a flip style layout, and a textual time mode with language aware formatting.

The editor now features Theme Colors.

This is also to make my life easier. Every time I add a new widget I needed to change all templates. Now all default settings from the widgets choose a color from a default set of colors. You can still set default colors for all widgets, and individual widgets can override them too. So the order goes like this: Theme Colors then Widget preset colors then Individual widget colors. I also overhauled all templates, and hopefully, that is the last time for now.

Also newly introduced is a custom color picker. You can easily select a theme color or create your own. All custom colors are now also easily accessible in a color grid.

@Vierlijner

Is there also a possability to build in a versioning on the dashboad file/ canvas.

New to this release is a versioning system.

When enabled, which it is by default, it automatically saves the previous file. The load dashboard dialog now lets you open a previous version by clicking the triangle and export a previous version. This was actually an idea from a user in the beginning, but I deemed it overkill at the time. However, recent changes needed a rework of the dashboard save file, and some dashboards did not migrate properly. That bug was fixed in followup versions, but this new version also requires dashboard migrations. So if anything goes wrong, nothing is lost. Please check if everything migrated correctly, and if not, back up your previous dashboard and leave a comment about the problem over here.

Group Visibility, Page override, and show modal.

Okay, I will release it because you guys keep nagging me about it , but I have not made any documentation for it yet, so please consider it still in Beta. I do not have the time to write a full tutorial on how to use it, but I think you will understand it when you use it.

When you create a group, it now has the option to set the visibility, and this can be made dynamic. So you could create a dialog box that consists of a container widget, some other widgets, and a close button. Group them together and make the visibility dynamic. Connect the close button to the same topic and you can close your custom dialog. Create a button to change the visibility on the dashboard and you can open the dialog.

But that is not the only feature. It also has a “Blur Background When Visible” option. When the group is visible, it deactivates the dashboard behind the group and makes it unsharp.

Lastly, there is an “Override Page(s)” option. This will solve a cluttered dashboard with multiple dialogs. When it is empty it uses the pages that are configured in the widgets. But when you add a page in here, it overrides the pages and moves the whole group to the page inside this edit box.

This way you can create dialog boxes on a separate page and show them on another page when pressing a button. There is no need to set the visibility dynamic in this case. You can do this with a single button press. Please inspect the demo to see how. Just make this “Override Page(s)” setting dynamic and change the On and off value of the button to the page where the group should reveal itself. You can do this all just by using local topics, so there is no need for Homey Logic.

Note: If you ungroup the group, all settings are gone.

@Dick_Cornet

the horizontal grid lines start from the value 1 position.

The graph widget now keeps its horizontal grid inside the container area.

@Dick_Cornet

Is it possible to show the y-axis line?

Optional vertical lines are available on the left and right edges of the chart. I added those for dense traces where the border helps read values.

@Vierlijner

When I enable locked then I can change the output topic from a switch for example, but when I leave (Tab) then all the switch options are gone and only the widget info options are there. Then I have to unlock again so I can edit again.

Fixed

@Icube0815

The whole button is missing, same for push button and switch. Going to your page with all the button shows also no buttons / switches (screenshot):

@Jos_Stultjens

I did update the dashboard before I read this message and now it indeed does not show the buttons anymore.

I fixed the Switch and Menu visibility on iOS 12. I found the incompatible code and changed it. I was not able to test it personally, so please test it for me. Note that this fix does not fix the scrambled editor. I will not fix that though, since the editor is not touch friendly anyway.

Full changelog

[Robin_Schuurman]

Hi @Satoer ,
is it possible to change the graph text allignment?
Not sure how it now is alligned, but it would be nice to have it (at least) right alligned.
This widgets in the screenshot below are identical, only the content differs:

[Rob_G]

Awesome @satoer!