Homey Dashboards — Public Beta Megathread

Hi, is it possible to make a widget that displays a calender and can import data from iCal?

3 Likes

Will it be possible to set a background image for the entire dashboard in the future?

3 Likes

@Marcel_Visser what build number is the Mobile App version?

Moresettingsgeneral → scroll down to: appversion

I’m using 9.0.0.1566

You can add a web widget (URL). So perhaps link to a Google calendar.

Day-dependent widgets → I think generally targeting a dashboard with flows would be really powerful. We will give it some thought.

@Harwin At least from my point of view changing the shown widget through a flow seems a bit counter intuitive and makes discoverability and management harder. Couldn’t you reuse (at least some of) the already existing AND cards in the widget settings (as described here)?

@Marcel_Visser Thank you, the columns improvements update will be working from 9.0.0.1568+, it seemed this update wasn’t shipped to Android users yet. Hopefully it will be available soon.

Please let me know once you have the latest version if you see 3 columns when you hold your tablet horizontal.

2 Likes

Could you answer this for me please.

https://community.homey.app/t/showcase-your-dashboard/116965/46?u=peter_bittner

Hello @Harwin !
What do you think of my idea of resizing tiles?
As a reminder :

I see that my proposal has more than 22 likes at the moment.
I’m curious to have your feedback :blush:

2 Likes

Hello,

I’m trying to add widgets to my app that would display both the current energy price for the given hour and the price index, as well as a widget that would show a bar chart of energy prices for the whole day.

However, I keep running into an issue where the API provides data to the frontend, but it fails because Homey is unavailable. Does anyone have any ideas on how to make this work?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electricity Price Widget</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #1f2937;
            color: #ffffff;
        }
        #container {
            text-align: center;
            background-color: #ffffff;
            color: #333333;
            padding: 20px;
            border-radius: 10px;
            width: 80%;
            max-width: 300px;
        }
        h2 {
            margin-bottom: 10px;
        }
        #status {
            font-size: 0.8rem;
            margin-bottom: 10px;
            color: #666666;
        }
        #price {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        #index {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #indexDot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 5px;
        }
        #error {
            color: red;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="container">
        <h2>Actual Spot Price</h2>
        <div id="status">Initializing...</div>
        <div id="price">Loading...</div>
        <div id="index">
            <div id="indexDot"></div>
            <span id="indexText">Loading...</span>
        </div>
        <div id="error"></div>
    </div>
    <script>
        console.log('Script execution started');

        function updateUI(message, error = false) {
            console.log(error ? 'Error:' : 'Status update:', message);
            document.getElementById('status').textContent = message;
            if (error) {
                document.getElementById('error').textContent = message;
            }
        }

        function updateData() {
            console.log('updateData function called');
            updateUI('Updating data...');
            
            if (typeof Homey === 'undefined') {
                console.error('Homey object is not available in updateData');
                updateUI('Error: Homey not available', true);
                return;
            }

            console.log('Calling Homey.api for spot price');
            Homey.api('GET', '/spot-price', (err, result) => {
                console.log('Homey.api callback received');
                if (err) {
                    console.error('Error fetching spot price:', err);
                    updateUI('Error fetching spot price: ' + JSON.stringify(err), true);
                    return;
                }
                console.log('Received data from API:', result);
                if (result && result.currentSpotPrice !== undefined && result.currentSpotIndex !== undefined) {
                    console.log('Updating UI with new data');
                    document.getElementById('price').textContent = `${result.currentSpotPrice.toFixed(2)} CZK`;
                    document.getElementById('indexText').textContent = result.currentSpotIndex;

                    const indexColors = {
                        low: '#22c55e',
                        medium: '#9ca3af',
                        high: '#ef4444',
                        unknown: '#fbbf24'
                    };
                    const dotColor = indexColors[result.currentSpotIndex] || indexColors.unknown;
                    console.log('Setting index dot color to:', dotColor);
                    document.getElementById('indexDot').style.backgroundColor = dotColor;
                    updateUI('Data updated successfully');
                } else {
                    console.error('Unexpected data format received');
                    updateUI('Received invalid data format: ' + JSON.stringify(result), true);
                }
            });
        }

        function onHomeyReady(Homey) {
            console.log('onHomeyReady function called');
            updateUI('Homey is ready, initializing widget');
            
            console.log('Homey object properties:');
            for (let prop in Homey) {
                console.log(`- ${prop}: ${typeof Homey[prop]}`);
            }

            updateData();
            console.log('Setting interval for updateData');
            setInterval(updateData, 60 * 60 * 1000); // Update every hour
            
            console.log('Calling Homey.ready()');
            Homey.ready();
        }

        // This function will be called by Homey when it's ready
        window.onHomeyReady = onHomeyReady;

        // Attempt to fetch data immediately
        console.log('Attempting immediate data fetch');
        setTimeout(updateData, 1000); // Delay by 1 second to ensure Homey is available

        console.log('Script execution completed');
    </script>
</body>
</html>

Hi @Mikl ,

You put some effort in there and I have to be honest, it does look nice! :sparkles:

Dashboards doesn’t use a fixed size of columns, because of this it there is a few problems to be solved first. Even if they are solved I don’t think it will be a priority soon, we have other features which bring more value to Dashboards at the moment :slight_smile:

To give you an idea about the problems we face:

  • Depending on the size of the tablet / phone users will have 3 or 4 devices next to each other.
  • What happens if a users wants 2 devices of which each will have a doubled size column? What if this was created on a tablet which shows 4 devices on a row and then the same dashboard is shown on a tablet with 3 devices in a row?
  • If the 1th device tile is double, can the 2nd be double as well while having 3 devices in a row.
  • If we allow larger tiles, the next request is gonna be: a want to decide which sensor I see. For that to work we also need to build new interfaces.
  • How are you going to decide which device tile gets on which position if they have different sizes?
  • What about the re-ordering the devices so they are exactly where you want them to be, while having a variable amount of devices on a row.

The idea is great and luckily there are more ways to solve your problem. At the end all you want is the possibility to show more sensors information right?

Don’t let this discourage you to share more awesome ideas. This is a good source of inspiration to bring out more cool features for Dashboards! :muscle:

1 Like

This was weird. I’m the beta tester. But I can only see Dashbords in my Android app on my Galaxy phone, but not in the Android app in the tablet?? Both is latest app versions and same account.


Homey is not a global variable, it’s an argument passed to onHomeyReady, so it only exists inside that function.

You can do something like this:

function onHomeyReady(Homey) {
  function updateData() {
    // here, `Homey` will be accessible
  }
  updateData();
  console.log('Setting interval for updateData');
  setInterval(updateData, 60 * 60 * 1000); // Update every hour
  ...
}

Or pass it explicitly as an argument to your timers:

function updateData(Homey) {
  ...
}

function onHomeyReady(Homey) {
  ...
  updateData(Homey);
  setInterval(updateData, 60 * 60 * 1000, Homey);
  ...
}

But you can’t run updateData() before onHomeyReady has been called.

1 Like

Thanks a lot :slight_smile: I am new to FE development :).

@Harwin Maybe I missed it, did you already answer about this problem:
Tablet should have a specific user to solve following problems:

  • view only dashboards
  • not count for sleep (last sleep first wake up and so on…)
  • not count for being home (last to go out and so on… )

What an awesome addition! This will be epic! I have recently moved from SmartThings to Homey. I no longer use SmartThings because they had just become too unstable for me. In comes my discovery of Homey, and I am IMPRESSED.

I have a feature request to add into this Dashboard setup. I had used SharpTools with Smartthings for the dashboard, and the ability to create complex automations. Granted SharpTools works with Homey, i like the idea of Homey dashboards because then the dashboards work when internet goes down.

Anyway… on to my feature request… Is there a way (like in SharpTools) to create a password protected click of a button. For example, if i want to turn on my fireplace from a Homey dashboard, can i be prompted to enter a password to turn it on? This prevents my kids from controlling the fireplace and/or other devices i have.

1 Like

Great idea. But can imagine it won’t be on top of the roadmap at Athom.

What you can try if you are using Android for your dashboard:
SmartDroid can authenticate a user.
So: when a certain (virtual) button or flow is activated, send a trigger to SmartDroid on the same tablet (you might want to create a separate user for this). A popup appears and when SmartDroid has authenticated the user it write a variable. When this variable is set, let Macrodroid send a trigger back to Homey to turn your fireplace on.

1 Like

I would like to say to this is that most Resizable problems are not problems. But, like SharpTools, having the option to resize would be great! Basically you would create columns within a column. If on one device it doesn’t fit, you still have the option of resizing it to a way that looks great on your dashboard, instead of empty spaces.

How long should this normally take? Still no update…

I joined on my phone, but now cant join to test it on my tablet as the beta is full.

Classic.

Cant really test it then.

1 Like