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

I’ve read it but was still thinking about the question and a solution :sweat_smile:

Both dashboards should behave the same. But if you have edited the dashboard on one computer, you have to reload it on the other computer to see the changes. I understand that’s annoying if a dashboard is on a machine without controls. I haven’t tested it yet, but it should be possible for a webpage to reload itself. Maybe I should add a button in the configuration that reloads all dashboards at once in a future version.

Haha, ok. :slight_smile:

I get that, but it’s just the behavior. When I slide one volume control up on one dashboard it stays down on the other one until I manually refresh it. So for some reason it doesn’t see the changes while in Homey the device has changed. When I adjust it in Homey the slider does change on both dashboards.

man, you made the LEGO of Homey’s Dashboards… :brick: So easy to play with ! It’s becoming my new hobby :wink:

yes, way better with dynamic variables

Dynamic chart with energy prices, updated hourly, created with QuickChart and generated with a Homey script with the very helpful support of Google Gemini. The resulting url is sent via Advanced Dashboard Studio flow to the dashboard.

2 Likes

What an amazing program! I’m still busy exploring and getting more and more done. The radio stations appear in a pop-up and only show up when I click the radio button. The pause button changes to a play button when you click it. Very fun to make. I just have one question/request regarding the buttons for the lights. These are switch/button buttons with the text on the right. The text currently determines the alignment of the icons. It would be nice if the icons could be aligned to the left independent of the text. I’ve already tried putting a label over it, but then it’s not clickable. It would also be great if we could have a font-weight option for texts. I’m already very happy with the result.

Nice! Could you tell the steps to make a responding popup? What is the performance of these steps?

Using List function for the news headlines. Could these texts be multiple line, to show the complete headline?

@Amersfoort I’ve given the group widget and all the radio buttons the same tag. You enter this in the “Visible” section. Using the “If” card in Homey, you specify the tag name of a button, and in the “Then” card, you specify the tag name of all the buttons and the group widget, with the option “true” or “false.” It works without delay. I want to do this for energy, climate, and notifications in the same way. This way, you can also give multiple notifications the same size and place them above each other. If the washing machine is running, it displays the remaining time, or if the garbage bin needs to be taken out, the correct bin appears. This way, you can place many things on the homepage that don’t always need to be visible.

2 Likes

How did you connect the sonos (now playing) artwork to the dasboard.

If you open the Sonos app at https://my.homey.app/ in the browser, you will see the image of the station there. With inspection, you can retrieve the URL and use it in the same way as the explanation from Buienradar. The radio station will then be displayed in DS with an image card.

1 Like

Caution: after every Homey reboot the URL can change.
I use Homey developer tools and enlarge the image needed to copy the URL. Because I reboot my Homey every night, I created a Homey script to dynamically retrieve the Sonos (but also Ring doorbell) image id.

You’re right, I wrote my message a bit too quickly. I do the same with the URL from the Dev site!

Indeed great performance.

1 Like

I created a Homey script to dynamically retrieve the Sonos (but also Ring doorbell) image id.

Can you share this script

Homey script functionality taking into account changing IDs after Homey restart:

  • if TV is off and Sonos on: show album art
  • else show Ring doorbell image

Use return value as a parameter to send this value to Dashboard Studio, and use this in a Dashboard Studio image.

Google Gemini is very useful for programming Homey scripts.

// 1. Configuratie (id in Homey Developer Tools/Devices, vervang id door eigen waarden)
const SONOS_ID = 'b29a89d8-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
const TV_ID = '3ee1a967-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
const RING_ID = '9a6ccaf1-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
const BASE_URL = "https://[Your Homey id].homey.athom-prod-euwest1-001.homeypro.net/api/image/";  //pad in Homey Developer Tools/Images

// 2. Haal specifiek de benodigde apparaten op
const sonos = await Homey.devices.getDevice({ id: SONOS_ID });
const tv = await Homey.devices.getDevice({ id: TV_ID });
const ring = await Homey.devices.getDevice({ id: RING_ID });

// 3. Validatie
if (!sonos || !tv || !ring) {
    console.error("Configuratie fout: Sonos, TV of Ring niet gevonden.");
    return null;
}

// 4. Status bepalen Sonos en TV (true of false)
const isSonosPlaying = sonos.capabilitiesObj?.speaker_playing?.value ?? false;
const isTvOn = tv.capabilitiesObj?.onoff?.value ?? false;

// 5. Logica voor selectie (TV uit EN Sonos aan -> Album art, anders Ring)
const useSonos = !isTvOn && isSonosPlaying;

const imageId = useSonos 
    ? (sonos.images[0]?.imageObj?.id) 
    : (ring.images[0]?.imageObj?.id);

if (!imageId) {
    console.error("Geen afbeelding ID gevonden op het geselecteerde apparaat.");
    return null;
}

// 6. Genereer URL (cache voorkomen)
const cacheBuster = Math.floor(Math.random() * 10000) + 1;
const finalUrl = BASE_URL + imageId + "?rand=" + cacheBuster;

console.log("Gegenereerde URL: " + finalUrl);

// 7. Return resultaat
return finalUrl;
2 Likes

I have corrected the script to include a timezone:

const showTime = true;       // Set to false to hide time
const showDate = true;       // Set to false to hide date
const timeFormat = “HH:mm”;  // Options: “HH:mm:ss”, “HH:mm”
const dateFormat = “DD-MM-YYYY”; // Options: “DD-MM”, “DD-MM-YYYY”, “MM-DD-YY”, “TEXT”
const separator = " - ";     // Separator between date and time (e.g., " - ", “\\n”)
const lang = “en-US”;        // Language for TEXT date format (e.g., “nl-NL”, “en-US”)
const timezone = “Europe/Amsterdam”; // Set to your local timezone

// — SCRIPT —
const now = new Date();
let timeStr = “”;
let dateStr = “”;

const formatter = new Intl.DateTimeFormat(‘en-GB’, {
timeZone: timezone,
year: ‘numeric’,
month: ‘2-digit’,
day: ‘2-digit’,
hour: ‘2-digit’,
minute: ‘2-digit’,
second: ‘2-digit’,
hour12: false
});

const parts = formatter.formatToParts(now);
const p = {};
parts.forEach(({ type, value }) => { p\[type\] = value; });

const h = p.hour === ‘24’ ? ‘00’ : p.hour;
const m = p.minute;
const s = p.second;

const d = p.day;
const mo = p.month;
const yyyy = p.year;
const yy = String(yyyy).slice(-2);

if (showTime) {
timeStr = timeFormat === “HH:mm:ss” ? `${h}:${m}:${s}` : `${h}:${m}`;
}

if (showDate) {
if (dateFormat === “TEXT”) {
dateStr = now.toLocaleDateString(lang, {
timeZone: timezone,
weekday: ‘long’,
day: ‘numeric’,
month: ‘long’,
year: ‘numeric’
});
} else if (dateFormat === “DD-MM”) {
dateStr = `${d}-${mo}`;
} else if (dateFormat === “MM-DD-YY”) {
dateStr = `${mo}-${d}-${yy}`;
} else {
dateStr = `${d}-${mo}-${yyyy}`;
}
}

let result = “”;
if (showDate && showTime) result = dateStr + separator + timeStr;
else result = dateStr + timeStr;

return result;

Sorry @Amersfoort , can you give me a better explanation of the problem? You are using a button and with that button you activate a flow in Homey. That flow alters the button color (and this works fine) but also alters the image url from an image widget on the dashboard? And you see only the image changing when entering edit mode in Dashboard Studio? And what do you mean with “Text values” Text values from what?

No it doesn’t do the trick. The same counts for an empty title in a graph. Maybe it’s because i’m testing settings, for example text size, and do a reset on that setting to default. I’ll hope it’s not reloading empty fields. What I checked it does it not directly.

Do share your thoughts.. :slight_smile:

Let me rephrase this.

In Dashboard Studio I have a Switch that controls a lamp: on or off. I also have an Image and a Text object. I only want to display the latter two when the Switch is on. I think I can achieve this by linking the Image and Text to the Switch in the Vis setting. However, the Image and Text don’t seem to respond when I control the Switch in Dashboard Studio. When I control the Switch (=lamp) directly in Homey, the Image and Text are shown and hidden in Dashboard Studio.

The Text object, showing the Switch on/off status text, is not changing to false or true when I use the Dashboard Switch. When I switch with the Homey app the Text object text content switches to true, but turning off doesn’t result in false but in a blank.

Am I forgetting a setting?