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.