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

[Hans_Gr]

@Satoer

First of all I have to complement you with this very usefull, flexible and very clever designed Dashboard app. I think we will see a lot of creative dashboards in the future.

Having been poking around I want to select a preset channel on a few radio players. Let’s say the (WiiM) radio has 3 to 5 preset channels defined. The WiiM Homey App has a flow card to select a preset.

As there is no dropdown widget (I read you’re not in favour of drop-down lists (yet)) I’ve been looking and trying to realize this with a list-widget but so far no success.

How would you realize this function?

Thanks for your input.

Hans.

[Satoer]

Thanks. The list widget only shows data. At the moment the only widgets that can “send” information to Homey are the button, slider and the light grid. A drop down widget is on my roadmap.

I would just add a button to the dashboard that jumps to another page, and fill that page with buttons linked to radio stations. Each button has the icon of the radio station. You could even mimic a drop down button. Take a look at the demo page and press the camera button. In the middle te “camera view” appears. These are actually two pages. The widgets on the left and right are configured to show on page 1 and 2. And the middle part is only showing on page 1 (the energy stuff) and 2 ( the camera view). Like this you could do a drop down. Just a button in the top, and when pressed it jumps to page 2 with a container with radio stations buttons below it.

[Hans_Gr]

I get it, that could work yeah. Thx.

[Vierlijner]

I love you work and effort.

How do I create a graph bar for all of the day electricity prices, because I can’t add multiple topics. And there is also no script area. So I have to prepare this by a flow in Homey?

I also would like to see security. Now every one can edit the dashboard and a hacker has full control over my exposed topics.

And a bug that I can’t scroll through all the icons, it stops near the letter C. Maybe a link to the used library will help so I can see there. Because I used a few words to find one but couldn’t find it. Then a scroll through will help. I would like to see some icons of machines I a household, like washing machine or solar panels (I used the sun like your demo).

[Satoer]

Thanks

you can use the power by the hour plugin to get today’s (and tomorrow’s ) energy prices and send the prices json directly too a graph widget its data input topic

Yes the search option is a bit limited. (Only the filenames and no related names) for the icons, it using phosphor icons and you can browse the whole library over here: https://phosphoricons.com

The dashboard Studio website is only accessible from your local network, so if you do not open the port that it is using (default 5050) to your Homey’s IP on your router then hackers can not access your dashboard website. You can also hide the edit button in the Homey configuration, but it is only hidden using css. Someone with a bit web skills can reveal it. Security for users who want to access their dashboard from outside the network is on the todo list.

[Hans_Gr]

As you suggested I have solved it with buttons. When pressing the station button the label text changes to the new playing station.

Another question: In the uppper right corner you see the date and time. I have applied the HomeyScript from the documentation. Time is running one hour behind though. Where gets the script the time from. Is this a timezone issue?

[Amersfoort]

Paid Fully browser license needed for MQTT I suppose? I don’t like 24/7 camera registration on my tablet.

[Amersfoort]

Below some questions and suggestions from a novice user:

Questions:

1. The font of, for example, a Label can be adjusted in Container Style (choice of 4 fonts) and in Typography (>4 fonts). Both options adjust the font of the Label. Why is this?
2. Text label in a Switch and Text in a Label: with the same font and font size, the label in the Switch is bold, but not in a Label. Why is this?
3. In a Switch, there is an Appearance size (steps) and an Icon size (variable). Both change the size of an icon. Why this option?

Dashboard Studio Suggestions:

1. Sort various list/dropdown settings alphabetically.
2. Is it possible to change the canvas resolution (zoom out) without resizing the left toolbar (leaving the canvas pixels unchanged)?
3. Gray out irrelevant settings.
4. Sometimes negative numeric values are allowed, which are not meaningful.
5. Add the option for a prefix and suffix to the Label (the workaround with gauge seems to be awkward and limited). Case: “Power: [value] Watt”
6. Make font display options for bold, normal, light, italic and underlined configurable for all text components.

[Bert_Onraedt]

First of all: This is a wonderfull app!

I’m starting to play with it, I think it has a lot of potential once you start to understand the possibilities.

Now: Anyone else having the issue that on/off status (true/false) of Shelly devices is not always updated? I was wondering why my first switch try did not reflect the status of the device. Suddenly it started working for a few minutes, then again not. I saw in the stream data that it’s not updated. Other data (Wallbox, variables, Homewizard,..) is updated like each second. In the Homey app however the status is correctly updated, no matter which source i use to turn the device on or off…

[Vierlijner]

Gauge appearance > position > right, this will not appear when value_type is round.

[Satoer]

@Hans_Gr

Time is running one hour behind though. Where gets the script the time from. Is this a timezone issue?

Yes, it is using UTC time. I shall update the code (But will probably next Sunday )

@Amersfoort thanks for the report. I will take a look at it.

@Bert_Onraedt

Now: Anyone else having the issue that on/off status (true/false) of Shelly devices is not always updated?

Is it more responsive if you do it trough a flow using Dashboard Studios “when” card and turn it of indirectly in a flow?

@Vierlijner

Gauge appearance > position > right, this will not appear when value_type is round.

Yes I know. This option is aimed at the horizontal gauge bar. With so many options to style a widget it is a bit overwhelming for me to grey out unnecessary options in every situation that might happen.

[HanZ]

@Satoer is it possible to add an app (from www.slimladenservice.nl ) to one of the windows?

Grtz HansB

[Yann_Liqueur]

hello,

I will regularly post here my different tests… but I don’t expect to finish the tool I have in mind before a couple of months (I ‘ll be in holidays abroad soon for several weeks…) maybe this summer cause it’s pretty time consuming to build dedicated png per devices and a bunch of flows sending specific datas DS needs…

I intend to build something to monitor and manage my lights, blinds, plugs, music, fans… I also want to track temperature in every room (I live in nice - south of france - with no air con.) in a very sunny place…

I will test next week end dynamic graphs and data visualisation capabilities, mostly to track live energy usage and temperature curves

Today I use iPads in every room with dedicated homey dashboard, I can also control the house from my apple silicon Macs in my office room running the iPad app…

My homey dashboards are used most of the time as remote to turn on/off lights, the blinds or start roborock cleaner…

I also have few older devices like Sony Xperia tablet or older iPad that cannot run homey app, but are ok for a web UI, and my objective is to create a really personal and sexy UI with Dashboard Studio for some ‘old’ devices I can mount on a wall in my entrance and other rooms…

Because I’m a little bit geek and also a developper I’m familiar to spend time on UX/UI

So far my pros and maybe requests

pros

so far I played with the ability to display various data on a widget depending if is on or off. for exemple I hide the slider for a light when it OFF (‘lampe’ here). very easy to use - very intuitive (speaking of your work not mine). I also create a ‘general’ switch to turn On/Off a group of light by triggering a homey flow. super easy also - but I only scratch the surface here - it’s a big plus versus homey’s dashboard… (I’m thinking of hidden conditional controllers )

another plus is the ability to use forms and colours you want for a group of devices or functions - you can create the UI grammar you want

possibilities seems endless…

my next ui challenge : changing the widget and slider opacity of a light based on is dim - I saw in the documentation I can play with alpha canal, I just have to figure how I can build the right string in a flow…

few request if they are shared with a majority

you give so much that we have to ask for more

first, I don’t know if it’s possible, I build on my Mac 32’ screen a huge web page : auto/responsive (fluid).. on my test iPad (12’9 pro) I can’t scroll the page down… (safari)… I figure maybe there is no solution - If I need to swipe a slider I can’t slide the whole screen… is it possible to display a scrollbar in this case ???

I would appreciate more control on text style with the editor ‘typography inspector) - bold, italic,… and more fonts choice if possible (lighter Fonts) maybe an access to google fonts library ..

there is also a default padding or margin - for exemple text justify left as something like a 12/16pts margin - is it possible to edit this value ?

also more attributes to control the style of the icons (weight of line for example)… I tried to add the battery widget with is icon, but when I tried to decrease size to fit my design it was not usable…line weight is not proportional

your tool encourage to create a lot of variables and entities - I saw an other post asking for a better sort in some menus. some needs also a bigger width (inspector info/vis) cause I can’t find the right entity with not the full name…

I would appreciate a group tool - when I finish a widget, I would create a group with a specific name, easier to manipulate after, maybe with hide/display options….

last question : how many months did you spent to built this ?

[Amersfoort]

How to show Ring doorbell image in Dashboard Studio.

1. Define an advanced flow, eg. make every minute a snapshot and during movement or doorbell ringing
   
   
2. with Homey developer tools go to your Ring image. Enlage the image en copy the url up to “api/image/”
3. Fill in the Homey script in step 1 definition

// Get Homey devices
const devices = await Homey.devices.getDevices();

// Search device with Ring driver
const doorbell = Object.values(devices).find(device => 
    device.driverId === 'homey:app:com.amazon.ring:doorbell'
);

let imageId = null;

if (doorbell) {
    if (doorbell.images && doorbell.images.length > 0 && doorbell.images[0].imageObj) {
        imageId = doorbell.images[0].imageObj.id;
    } else {
        console.log("Ring found, but no image.");
        return null;
    }
} else {
    console.log("No Ring found.");
    return null;
}

// Construct image path and use url from step 2 without the square brackets
const prefix = "[url from step 2]" + imageId + "?rand=";

// Prevent image cache
const randomNumber = Math.floor(Math.random() * 10000) + 1;
return prefix + randomNumber;

4. Send Homey script return value to Dashboard Studio (in my example Ring Url)
5. Define in Dashboard Studio an Image widget and use the variable from step 4 as URL (after at least one flow execution):
   
   

Nice!

[Satoer]

Like putting a part of an another website in a container? No not really. I’m also a bit hesitant to create such a widget because it almost always looks terrible.

[Satoer]

Yan, I appreciate the feedback. I have read through everything and added your points to my list of things to review when I have more time. I totally agree with many of your observations. For example, the battery scaling is something I noticed myself, but it worked well enough for my personal setup so I forgot to fix it before the public release.

I have honestly lost track of how much time I spent developing this. I used the software for my own needs for a while and only decided to build a public version for Homey about 3 months ago. (I’m not saying this was 3 months full time) So many things needed a polish for a public launch. One of the bigger challenges was creating documentation to explain such a complex program to regular users. Totally underestimated that part. While I know every corner of the app, trying to see it from the perspective of a total beginner took a lot of effort.

[Yann_Liqueur]

hello

For your information, it’s been over 10 years since I last pulled an all-nighter over a new software — and then spent entire weekends on it afterward….

it’s really cool to ‘play’ with Dashboard Studio and achieved what you have in mind…

good point on the side : I learnt new things about flows and script

I finally achieved to display the album cover for the song playing

I’m still experimenting… as I said earlier, I will soon try new interactions, minimum info on widget as default and local menu for parameters (progressive disclosure principles…)

[Amersfoort]

I have a lamp with an on/off switch. When I turn the lamp on, an image should appear, and when I turn it off, the image should disappear.

My image visibility settings are shown below, but they’re not working as expected.

When I enter the on/off value in a text field and the switch is on, I see “true,” but when it’s off, the value remains “true” or will be empty (not “false”).

Toggle the switch on and off via Dashboard Studio switches the device as expected. However, when I turn the light on or off with the switch itself, the status in the dashboard doesn’t change.

Anyone have any ideas?

[SunBeech]

Did you set the ‘initial state’ of the switch, as described here?

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

Hi, you need to enable every item you want to control or read in the Homey Configuration. Then on the Dashboard Studio website you should see data from it in the Data Stream Explorer. Use the Copy Topic Name to copy that topic. If you want to control that device, in this example controlling a light on / off, you need to paste that topic inside an output topic setting. [afbeelding] But you can also connect the “initial state” to the same topic: [afbeelding] This way the buttons state is …

[Yann_Liqueur]

I did the same thing myself and it works perfectly except that sometimes there is a couple second of delay for the refresh

I did it for my lights, I change color background and I Show/Hide the slider, the switch button is the whole widget, it works fine from DS or from the homey app

the trigger is also Widget/Info :: VIS with the boolean onoff entity

maybe move your layers to test, if you an object over a button, the button doesn’t respond

it’s not a big help but you know that works