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

and web urls also possible like buienradar widget?

I tried Buienradar, but it didn’t work for me (yet).

Hi everyone,

I decided to pull Dashboard Studio from the official certification process for now. I want to squash some bugs based on your feedback first. I have just pushed a new version 1.1.0. Keeping the app in the “test” phase for a bit longer lets me push updates faster since I don’t have to wait for the certification.

I have no experience with the Android Tab, but on a iPad the real resolution screen is cut in half for website viewing. Everything would also be extremely small with the insane screen resolutions of these screens. You can select the canvas resolution (or custom resolution) over here:

Wow, that is an incredible amount of pages. I don’t have a dropdown menu widget yet, but I could build one. Personally, I don’t like “dual action” elements for a dashboard because you have to click/press twice to get anything done. I usually prefer single buttons for instant actions.

Please let me know if things start to feel sluggish with that many pages. The app keeps everything in memory and relies on the speed of the device you are using to view it. (All the dashboard code and rendering is handled client side) you could also break it up in multiple dashboards and link them with their url in the buttons.

You can already set a button to open an external URL. For something like a rain radar map, you can actually use an image widget with the Buienradar image URL: https://api.buienradar.nl/image/1.0/RadarMapNL?w=720&h=600
I haven’t tested it myself, but you would likely need to use a Homey flow to refresh that image every 10 minutes or so, similar to the camera feed trick in the help guide.

I don’t have plans to add a widget that “scrapes” parts of other websites. In my experience, those usually look messy and make a professional dashboard look like a cluttered school newspaper.

Thanks. I have been some digging also. It seems Android likes to automatically change colors if a site doesn’t specifically announce light and dark modes in its metadata. I added some code in version 1.1.0 that should fix this. I don’t own an Android tablet myself, so @zakraket please let me know if it works.

I fixed the issue with uploading larger images. I also found that certain filenames caused problems. To play it safe, try to keep your image filenames limited to just letters and numbers for now.

I fixed a few things with graphs. The max and min settings now correctly cut off values that go outside your limits. I also added a “Baseline” setting. This is great for things like energy graphs where you might want to hide a base tax rate to see the actual price fluctuations more clearly. I also fixed a bug where the graph label was missing. You might need to slightly re-align your graphs in existing layouts because of this fix. I have also increased the max data points to 500, is that enough? I don’t want give the little Homey a heavy workload by averaging out all data points. Shouldn’t be a problem for an update every 10 minutes, but I am afraid users are going to send multiple charts every second :sweat_smile: So it just takes data from the points it needs.

I replaced the “decimals” option with “Fraction Step” in the slider settings. Now you can set the step size to exactly 0.5 if you need it.

You can always use a standard switch to trigger a “Mood” or “Scene” via a Homey flow, which I still think is the best way to handle lighting. However, I just added a “Light Grid” widget that might be what you are looking for. It was not yet finished when I released the first version of Dasboard Studio so I left it out.

To be honest, I almost didn’t include this because I think dashboards are for quick info and activating moods rather than fiddling with individual bulbs. In my own house, I prefer everything to be automatic or mood-based and a couple of override moods. But I know “Can I control my lights?” is the first thing everyone asks, so here it is :laughing: .

The widget has two parts: a grid of icons to toggle lights and a control panel that pops up for colors and brightness. You can move this panel anywhere so it overlays other controls only when you need it. I chose to use a grid of presets instead of a color wheel because nobody really needs the accuracy of 16 million colors on a wall tablet :laughing: . Simple color and white-point tiles are much easier to touch. You can even control multiple lights at once by adding several “Unified Light State (JSON)” topics to one “light device” in the widget settings. A Unified Light State (JSON) is a virtual capability you can enable on every light in the Homey Dashboard Studio configuration.

This widget is still in “beta” and I haven’t updated the help files yet, so give it a try and let me know what you think.

So, I think I squished most (all?) of the reported bugs, Hope I did not introduce new ones. Here you can read the full changelog of this 1.1.0 release

Thanks! :clinking_beer_mugs:

Next week is a kids holiday here in the Netherlands. More free time for the kids = less time for dads side-projects :laughing: . I’ll still try to keep up with your suggestions and bug reports, but I might be a little slower to reply.

4 Likes

It’s specific to Samsung, specifically with the Samsung Internet browser. My Samsung also does this, you can disable this “feature” (if you can even call it one since IMO it causes more issues than it solves) in the menu icon (bottom right corner) and choosing “Light sites”.

probably a stupid question,

I have built a sidebar menu to navigate to different pages (one per room)

I created pages,

with Widget Info I did propagate buttons to several pages

what I want now is to change automatically the button background color when I’m on the right page

room’s defaut Color is grey , turn blue for example when I reach the good page

is it possible ? if not I will add background object per page/button

@Satoer

  • The coloring issue is fixed (on my Lenovo tab at least) :+1:
  • I have my graph now updated every 15 sec with 200 datapoints (just to test), and now it stays the same for 99% (sometime small differences “flash” in/out but barely noticable. I think it depends a lot on what data you’re presenting; a temperaturesensor won’t show that many spikes so needs a lot less datapoints than some electric power measurement
  • Graph title works, but the x-axis labels are out of bounds. Not sure if I need to adjust something but it’s the same when I place a new graph.

Not sure if that’s on my side, because the min/max settings are still not resulting in an out of bound graph (setting is now max 1000); You said you fixed this, so maybe it’s not fixed, or maybe I need some update (which would also fix the x-axis). My app is 1.1.0 though.

edit: you said I needed to realign the graph but I don’t see how I fix this outofbounds x-axis. I can set padding, but the space between x/y-axis and the border is not the same still

edit: my bad; max/min values on graph does work now (I forgot to uncheck the auto option :slight_smile: )

I’ve now managed to display this high resolution on Fully Kiosk.
My current custom-made web dashboard also has this high resolution, allowing me to display a lot of content in high quality on a single screen. Due to its web nature, it’s slower than Dashboard Studio.

Although the recent Samsung Tab S-line tablets are very powerful, I will follow your advice and split the 30 pages into multiple dashboards.
I currently have 5 x 6 menu items, categorized by information type. To go to the correct screen, I would often have to switch two time going to the right screens. With a dropdown, I indeed have two steps, but only one screen switch (assuming the dropdown can jump to both another dashboard and another page within that dashboard).

Tnank you. Were those seemingly transparent icons/previews in the image gallery related to an unwanted file name? I think Apple reacts differently than the Windows and Android apps I use.

I like these brain teasers. So you want to adjust colors dynamically based on the page it is on… The more complex things that needs some dynamics should be handled in a Homey flow. But there is no “IF” card that triggers on a page change. But there is a trigger that can be activated in a button. Based on that trigger you could change the page and the color of the button.
I added 3 momentary push buttons on the page. And made them visible in page 1,2,3:

This is the “page 2 button” First put a topic in “output topic” this can be anything. I used “GoToPage” and use as ON value 2 (page number that it needs to go to):

Then activate the dynamic value on the BG OFF color. I added the topic “ButtonPage2Color”

And you have to do this for all the 3 buttons (or as many buttons you want)
Next, you want to control the page number dynamically. I added the dynamic topic “ActivePage” in the Active page setting (Canvas Environment settings):

Then in Homey create this flow:

The first card receives the “GoToPage” topic with the number of the page. You can directly pass this through to the “ActivePage” topic, and the dashboard would instant change the page.
Now, to set the color of the button you could check which number is pressed and set the color of that button accordingly. These colors are just default CSS color values.

That was a fun little project. But to be honest, I think it is just easier to just create a seperate styled button on each page. For example on the demo page when you push the camera button it moves to a different page and the button icon on that button changes. This is just another copy of the button widget with another icon in it.

You need to add a bit of padding to get a bit of whitespace between the axis numbers and the border.

You can also set a default padding, this will use all widgets (if the widget is not overriding this)

1 Like

For additional logic, a Flow can periodically send information to the dashboard.
The actual daily usage of a dashboard (in hours) will be quite limited.
How can I ensure that Homey dashboard-related flows are only executed when a dashboard is active?

I have been thinking a bit about this. I think a dropdown dashboard widget would also be nice building the page. Then you can keep this single widget on all pages to jump to any page you want. Ill keep this request in mind.

I don’t think you should have to manually refresh the dashboard for updates. If you’re worried about the data processing slowing down your Homey, you could consolidate all the dashboard logic into a single Advanced Flow. Then, just use a motion sensor to enable and disable that flow only when you’re actually in the room.

1 Like

It is mainly the amount of widgets that might slow it down, not the amount of pages. But the demo page has a massive amount of widgets and it seems to run fine on every item what I use to test it. Even an old iPad Air 2.

You’ve given me an idea.
The very comprehensive macro tool Macrodroid (paid app) on Android has the ability to send a webhook to Homey when the dashboard tablet screen goes on and off. In the flow to which the webhook refers, you then (de)activate the advanced flow with all the Dashboard Studio logic.

1 Like

I already found the padding for the graph but it makes it look a bit off center imho (not a big deal)

a few thoughs about the graph:

  • would like an option to set axis values; the automatic values make readouts (especially x-axis) more difficult. I mean a setting where you can say: divide x-axis in values of f.e. 250 instead of steps
  • would also like to show x-axis gridlines for better readability
  • maybe a separate 0 axis gridline
  • y-axis shows the datapoints, is there a way to show the timelabels? The ‘datapoints’ seem a bit useless (please tell me if I need to spend more time in the documentation :wink: )

About the temperatures showing here; I just created 3 textboxes, is there a way to show the value and add a ‘unit’? Like you can add a unit in the gauge

Did it now like this

Maybe add a line as in ‘separator’ widget

edit: coloring positive/negative doesn’t seem to work properly. Graph shows only negative, so should be all green in this case (except for the spikes)

Graph is now also “flashing” every update between above and below because the spikes appear/disappear, and the below version handles pos/neg colors in an strange way

There are also X axis and Y axis “spacing” settings to adjust the space between the graph and the values

Many of your requests sound reasonable, and I will definitely look into these ideas for future versions. However, you can already accomplish a lot of this right now. Dashboard Studio functions more like a drawing application where you can layer elements on top of each other.

Layering and Containers:
You don’t have to do everything within a single graph. For example, you can add an empty group/container and place a graph on top of it. If you set Container style → Background to “Disabled,” you can position and scale the graph with pixel-perfect precision anywhere inside that container.

Drawing Lines:
You can draw lines using the “arrow” widget. Simply disable the “flow” animation (under the effects slide) and set the “Head size” (the arrow point) to 0. From there, you can adjust the thickness and move the line wherever you need it.

Tip: Use the duplicate button to quickly create multiple lines with the same style.

Customizing the X-axis:
To set specific X-axis values, add another graph to the grid and set the “Graph style” to text. This effectively leaves only the X-axis labels. If you want total control, you can fill in exactly what you want to see by comma-separating the values in the data.

I shall take a look at these negative value colors. I have not used it this way myself, the negative value colors where more aimed at the bar graph.

What are these spikes? Are these wrong measurements? I am not really sure how to handle these spikes; they are probably in the source data. I don’t think the graph should have options like “eliminate irregular data,” as it is just simply showing what it is receiving.
I think the best way is to have a card that extracts insight information (I don’t know if this exists, and I am not sure if this should be part of Dashboard studio), put this data in Homey script node that filters it and then send it to the graph.

Sure, just use the gauge widget instead of a label for it:

  • Container Style, Background: Disabled
  • Visual type : None (so no gauge)
  • Label: Empty
  • Icon Class: Remove icon
  • Unit: Add your unit
  • And play with the font sizes and colors
  • Duplicate the widget for as many items you want

Use the arrow widget as a line (see earlier comment)

1 Like

The spikes are not the problem (and they are real, caused by my heatpump for whatever reason).

The problem is that the spikes are sometimes there, sometimes not (or less) - depending on how many datapoints I use - , and that combined with the “strange” behaviour with the coloring of the graph for pos/neg values makes the whole graph flash because the graph changes to much and the coloring seems a bit ‘random’ now.

Just to be clear:

This is what I see switching every 5 sec. The issue is the coloring i.c.w. only negative values it seems. The spikes also flash in and out, this can be fixed by using more datapoints. But the changing coloring while the graph basically is the same it’s almost a flashing light now :wink:

\

But it depends on the data. At this moment I also have proper positive values and the graph looks fine. Now only this little spike comes in and out (that’s no real issue)

In this usecase, filling the line-graph red for values above zero (positive powerusage) and green for values below zero (negative powerusage = solarpower) makes the graph very readable i.m.h.o

No rush, I think this is a superb solution and options like the things I mentioned may come at a later point.

Fully browser supports MQTT for events I found out, maybe that can be used to have fully browser activate the Homey flows when FB detects movement.

(I have FB setup to activate the screen when it detects a face in the camera)

Would not know how to make that work though

1 Like

thanks for the help, I will try your technique soon…

so far I found a workaround with other objects

you can do pretty much everything you want as soon as you create a workflow to send variables…

I have created several loops flow wich run every minute, hour, 6 or twelve hours collecting data to send to DS…

I have a bunch of them, (values, colors on/off, flag, etc…)

I don’t know if there is a limitation with homey pro

Wow @Yann_Liqueur , I really like how you’ve totally designed your own style with the available elements. I’ve added lots of themes, but these were basically just color changes. You took it to a whole other level and designed a totally different style with it.

I really would like to have a screenshot to showcase this once you finish it. And if you have suggestions for settings you really missed when designing your own style, please let me know.

If you don’t do things like creating insight graphs with 500 data points every second, I don’t think Homey has limitations on how much you do. Previously, Homey sometimes disabled flows that were too active, but I guess they disabled this because it never happened to me anymore.