[CONCEPT] HEIMA for Homey (Wall Mounted Dashboard)

[TimTim]

First I would like start with a disclaimer. I am NOT a developer, nor a UI/UX designer. I do have some experience in both, but this project is really just to get to learn some React and the Homey Web API.

Now, let me introduce HEIMA for Homey:

• The UI is heavily inspired by Dmitrij Paškevič’s HEIMA concept (Behance)
• This will probably not be the ideal dashboard for most of the geeks on this forum. My idea is to create a ‘no hassle, no config’ interface to Homey that can be wall mounted (using a tablet device). So it won’t be a customizable drag & drop widget dashboard. It is simply an interface to homey (like their app) that can/will be hosted.
• The dashboard assumes you have at least a thermostat, some lights, some sensors and some favorite flows.
• All configuration is done inside the homey app. The dashboard simply takes the first thermostat, looks for light devices (in class or virtual class), will fetch the favorite flows of the main user (owner) and will display all sensor statuses.

I’m creating this in React and using Athom’s Web API. It’s a bit of a struggle, but here are two screenshots of where I’m at right now:

Dashboard

• The dashboard shows the indoor temperature and the outdoor weather (fetched from Dark Sky using Homey’s lat/long). It also shows all users and their presence status.
• The sticky top bar shows current date/time and has a button to ‘log out’ (the on/off button)

Lighting

• The lighting page shows Homey’s zones on the left. The upper zone is the root zone (in my case I named it ‘All zones’ in my Homey app). On the right you see all devices fetched from the Web API filtered by the device class or virtual class. As you will see in the video my Homey has more zones then listed, but zones without a light device are not rendered.
• Lights can toggled on/off. Toggles from the Homey app, a wall switch or keyfob are reflected in the dashboard by listening to the device capability updates.
• Obviously this will need more work (add dimming etc.)

As for the other proposed alpha release modules: I intent to create a page that offers a possibility to trigger flows. As there can be many flows I only want to show flows that are configured as favorites (in the Homey app). The thermostat page will offer the possibility to change the desired temperature (see Dmitrij’s concept). The security page will show sensor statuses (and I want to have a badge in the bottom bar with a counter for disconnected sensors).

Here is a very crappy video demonstrating my first development efforts: YouTube

Yes, my girlfriend is too lazy to add an avatar.

Why are you posting this while it is far from being done?

Would love to get some initial feedback on the concept and approach for this dashboard. For now the Web API can only be used for local development so I won’t be able to host an alpha version any time soon. If anyone has ideas to improve the approach or initial features (or misses features that can’t be missed for this MVP) please let me know. Again, this should be a dashboard ‘for the masses’ that works out of the box (for most). A very flexible, customizable dashboard would also be cool but this is not it.

[TimTim]

Reserved for future use.

[Leon_van_Efferen]

I really like the idea, and responsiveness already. good luck on your path towards release!

[Retrospected]

i like it very much! homey really lacks a useable interface for tablets. I hope the security setting will feature a PIN or similar to disarm the heimdall alarm

[HarriedeGroot]

Looks nice!

Maybe you can integrate with mqtt? I’m developing a mqtt gateway app, which can solve most (all?) of your commuinication with Homey already. The communication is based on the Homie Convention. There’s also another thread about creating a dashboard, which can be helpful?

[Jamie]

I really wish the examples were in english so I could comment.

[azid]

this dashboard looks great! modern, simple, dark - i like

[Luke_Fairbank]

Add the ability to show camera feeds and this would be awesome

[Eternity]

Kudo’s to you!

PS
If you need a tester… I will happily give it a go!

[FKok]

Looks great!!!

[Lindansaren]

Really good! Hope you succeed! This is something I would donate to!

[TimTim]

I’m sorry Jamie, I’m actually working on handling translations (so it uses the Homey language to render the UI strings). It would still show my zone names in Dutch however (although I could change them temporarily). For now, I think you get the general concept, even though it’s Dutch.

[TimTim]

I don’t think Homey currently has a proper way of handling this. I do have a Nest IQ Indoor, but camera feeds aren’t supported. To support this I will need to be able to recognize the device as being a camera and be able to get the feed url from Homey. I will investigate this later.

[Jamie]

Perhaps i’m just being greedy, yes I can see the general UX, and I look forward to seeing more!

[azid]

it would be great if you had the opportunity in the lighting section to add some flows for change the lightscene (relax, bright, tv-light…) per room

[TimTim]

Like the idea. As you can see in the screenshot I was planning for these kind of flows to end up in the ‘Scenes’ tab. By adding them to your favorite scenes in the Homey app, they will show up (as some sort of play buttons) in the Scenes tab. Now, since Homey also features Flow grouping, I could look for a predefined Flow group (ie. ‘Lights’) and if it exists I could render them on the Lighting tab. I will think about this some more…

Edit: why I consider this a ‘scene’ outside lighting is because a scene for me is more then just lights. I want to close the curtains, higher the temperature, play some music maybe, etc.

[Jamie]

So I gave it a bit of thought, so here is some unsolicited advice you are more then welcome to ignore. All images are UX not design.

Weather Showing the current temp is great, but generally speaking I would like to know whats the temp, whats the high/low and ‘general weather’ (cloudy), finally I find it useful to show what the ‘trend is’ -> is it 21 and getting warmer or cooling down. Obviously it could be hard to show this information in a way which isn’t over complicated and everyone can understand … I feel that the UX below is nice and easy to understand while giving maximum information.

Forecast You don’t need as much information for a forecast so (if) you decide to have that the UX is nice and simple :

Presence : Presence is an interesting one, if I am home, then I know who else is home … So as well as knowing who is home, sometimes is just as important to know when your kids got home. … or left. I also prefer the use of visual clues so the information is available at a glance. (fade effect in the avatar of people not home).

Climate The climate of your house is generally more important on a dashboard then the weather, that is the home temperature, room temperature and the status of your heater/cooler.

• Home Overview

• Heater/Cooler Status

• Room break down

Lights If I am on a dashboard I wont generally need specific control of each device and having all my devices listed would actually be a little cumbersome. But a nice easy to use interface which allows me to control an entire zone’s lights from a dash would be great, while it can show the ‘colours’ of a room - its not nessary to be able to change them. The UX here allow dimming (where applicable) or on/off as seen in the ‘Bathroom’.

Security For me security is an important item for a dashboard, I would like to see a glace the status of the perimeter as well as any sensors data.

• Perimeter is pertty self explanatory, I need to now are any doors, windows, garage or gates open.

• Sensors is a little more indepts - show me the camera status (most do motion detection). any movement sensors, and the status of the doorbell but also - whether otion has been detected and if so in which room and when.

NB : I was playing around with dimming the idea being to controll the entire zone from the one interface but alot of zones include devices which can not dim. The very rough UX belows shows who you could acomplish this, using a slider which once it reaches a certain point (half way) non-dimable devices get turned on.

---

Once you break down the app everything pretty much will fit into one of the following ‘functions’ :

Dashboard : as above.
Entertainment : tv, music, volumes, spotify etc.
Lights : Control entire room or specific devices.
Climate : Heaters, Coolers, Fans, Sprinklers, Irrigation, Temperature sensors, Humidity Sensors.
Security : contact, motion, tamper, vibration.
Sensors : Any other sensors … luminance, Co, Co2,
Alarms : Contact (doors, windows, garage, gates ), Motion, smoke, fire, heat etc.
Other - Enable guest wifi, turn on diffuser, turn on fountain etc.

shrug - maybe a little bit more than a ‘bit of thought’

[Tino]

very good work!! I need it too

[TimTim]

Thanks for the extensive feedback. Weather, user presence, climate - all agree. The grouped lights (zone based) is a little bit more tricky (especially when you include dimming). Not sure whether a dashboard UI should fix this or if it’s Homey that should implement this. I will need to further explore options for this.

[Keverjeroen]

Nice project! i am following all the topics about dashboards for Homey. I will describe what I am looking for in a dashboard. You may ignore my suggestions, but maybe it can help you developing it further.

Commands
My goal is that I never have to push a button again, but at the moment it’s sometimse still needed. These are the buttons I would like to use on a dashboard to give commands:

1. Buttons that control a virtual multi-mode button (https://apps.athom.com/app/com.arjankranenburg.virtual)
2. Buttons that start a flow.

I don’t need buttons that are directly controling a device (like a lamp). I just want to set a scene (virtual multi-mode button) and let Homey control the lights.

Information
Then there is some information I want to show:

1. Actual state of a (virtual) button. Is it on / of or in some other state?
2. Value of Better Logic variables
3. Value of devices (sonsors et)

Other
It would be nice if the dashboard can have multiple pages. For example a frontpage with the most important stuff and subpages with detail information.