[BETA Release] HomeyDash a Dashboard app for homey

ThijsDeJong

That looks great!!!

swttt

Currently working on the UI. Tried to mimic homeys look as much as possible.

Phuturist

Going great ...  

Hope to do some custom theming in the future. Mimicking the Homey UI is a great start but I think that way it will differentiate less with the Homey app (once it starts working more smoothly) or the mobile interface.

swttt

Phuturist said:

Going great ...  

Hope to do some custom theming in the future. Mimicking the Homey UI is a great start but I think that way it will differentiate less with the Homey app (once it starts working more smoothly) or the mobile interface.

Well, it wasn't meant to differentiate. But your comment did made me think tho. The homey ui has bright colors with isn't really nice to the eyes at night. Since i was done coding for the day (code burned in my eyes, i keep seeing "the matrix" everywhere  ) I made a mock-up for a new UI. Still not sure how i planned to do the devices part tho. I did create a sidebar, where in the future i might add some pages to control sabnzbd and other things. The concept remains the same, a dedicated "screen" for each room.

Phuturist

Nice!

That looks great and does differentiate with the (current) Homey app and mobile view.

Just a thought, you could even switch to night mode automatically based on time or even lux from the camera or another sensor ... ;-)

swttt

@Phuturist ;
Should indeed be easy to integrate. The mock-up is based on solid colors and basic gradients, so it might even be possible to create some color templates in general.

spoelly

wow looking nice! 

swttt

The biggest problem for the device part is to handle the dimmers and keep the interface clean.
So if anyone has some suggestions  

DaneeDeKruyff

I suggest taking a look at the Wunderstation (iPad provided by Weather Underground) app. It's one of the cleanest dashboard interfaces I've seen in a long time while still providing fast access to more information/funtions.

mruiter

jovink said:

Great idea!
maybe you can look at this for inspiration http://carmelarad.com/homey.html
This looks very great. 

This will be they layout most people will be looking for in a homey panel i guess

swttt

mruiter said:

jovink said:

Great idea!
maybe you can look at this for inspiration http://carmelarad.com/homey.html
This looks very great. 

This will be they layout most people will be looking for in a homey panel i guess

It really looks cool, i'll give you that. But there are a couple of issues to create something like that.
Most widgets in that mock-up are made for specific devices, for instance i don't have my alarm system connected to my homey (and will never do so). At the moment i am only controlling all the lights and a few apliances trough my homey. So such a dashboard will never fill my needs, since its to "detailed".
A dashboard really comes to personal preferences and devices you use at home.

I just hope my code/ideas inspire others to create a dashboard for them self.

jovink

swttt said:

mruiter said:

jovink said:

Great idea!
maybe you can look at this for inspiration http://carmelarad.com/homey.html
This looks very great. 

This will be they layout most people will be looking for in a homey panel i guess

It really looks cool, i'll give you that. But there are a couple of issues to create something like that.
Most widgets in that mock-up are made for specific devices, for instance i don't have my alarm system connected to my homey (and will never do so). At the moment i am only controlling all the lights and a few apliances trough my homey. So such a dashboard will never fill my needs, since its to "detailed".
A dashboard really comes to personal preferences and devices you use at home.

I just hope my code/ideas inspire others to create a dashboard for them self.

That alarm thing is not important, but the window open, door locks status and to see who's home are very great. 

swttt

jovink said:

swttt said:

mruiter said:

jovink said:

Great idea!
maybe you can look at this for inspiration http://carmelarad.com/homey.html
This looks very great. 

This will be they layout most people will be looking for in a homey panel i guess

It really looks cool, i'll give you that. But there are a couple of issues to create something like that.
Most widgets in that mock-up are made for specific devices, for instance i don't have my alarm system connected to my homey (and will never do so). At the moment i am only controlling all the lights and a few apliances trough my homey. So such a dashboard will never fill my needs, since its to "detailed".
A dashboard really comes to personal preferences and devices you use at home.

I just hope my code/ideas inspire others to create a dashboard for them self.

That alarm thing is not important, but the window open, door locks status and to see who's home are very great. 

Then again, same problem. What if someone doesn't has a smart door lock? Then i'll need to disable that widget, and the view will has to change to fill the empty gap. You could tho, but you will have to have a fixed dashboard (specify your own devices and layout) and don't generate it trough the api (get all devices).

For now again a video of my progress. Created the html from the mock-up. Added an RSS feed reader that at this moment gets the latest 60 sec news video from nos.nl. Single tap and it goes fullscreen and plays, tap again and it pauses and goes back. (The video got corrupted when switching to full screen, since the browser itself switches to fullscreen as well.)

swttt

An update about how i want to control my devices:
Since the dashboard is in the same room as the devices that are controlled, i am adding a way to long press a device icon to make the light go more bright or less bright. Might add a way to see the percentage more clearly. A normal device will be switched with just a single press. The icon will show if the device is on or off in general.

This way just makes the dashboard look more "clean" since i don't need sliders or switches.

DaneeDeKruyff

Wouldn't it be possible to keep the device icon as it is, but register a movement after the 'mouse down' to do a slide. If you're in the same room, the brightness of the light (or the volume of anything) would a clear indicator of what you're doing, don't think you'd need something on the display.

KoenMartens

Maybe (but i don't like this idea too much, I like @DaneeDeKruyff's idea more), you can think about those circular sliders, with the icon placed in the center. Rotate them clockwise for up, counter-clockwise for down.

Basically http://jquery-plugins.net/jquery-circular-slider-plugin for reference (no idea if you use jquery, but still).

swttt

@DaneeDeKruyff ;
Thought about the same thing, and should be possible. But now it is more like the normal dimmer push button. The bar on the display is more for debugging. Added a smaller one in the current version just below the device itself wich can be enabled/disabled in the config. Might going to test it, but do have a feeling it is less precise.
I'll try Hammer to see if i can make it work to long press an item and on swipe up percentage+ and on swipe down percentage-. Not sure if i am able to control the swipe distance...

@KoenMartens:
Tried the circular ones, even with svg and css. (Was thinking about half round one) Couldn't get it to work nicely, and i think it is to big to use on a 7 inch. (The "handle" needs to be big enough for a drag)

Aaron

I like the "register first down" and then slide up or down to dim or control volume and the circular slider idea better. You have better control this way.

spoelly

Maybe you could implement is like the have done with the latest Hue App from philips. slide bar that gets brighter or less brighter. Change color of RGB lamps by taping the bar. by making the button a rectangle makes it implementing a bit easier

swttt

I created something using hammer.js. Didn't got to the long press down part, but with just panning on the item itself it seems to work.
http://codepen.io/anon/pen/PzamRw

Edit: above pen is now working with long pres... Long press the item first and then pan up or down.

Now i should be able to use a single tap as on off for dimmers as well(and restore last known dimming value). Long press activates the panning up and down.

Michael

I think it would be really nice if it's very intuitive. What if you press and hold and an action card comes up. You can than change the value with a big slider to the proper value. You can close the action screen with a button, or it could disappear after one second.

I've created a mockup to show what I mean:


By using an action screen you can customize what you want to control. If you want to control also the color for example, you could simply add it to the action screen. Because it's big and very easy to understand it's fool proof.
Maybe a slider is not even needed. I actually never set my Hue's to 68%. Actually some states like DIMMED / NORMAL / BRIGHT would be perfect for me.

If you have a ceiling fan with 3 modes you can just create an action card with an on/off button and three mode buttons: SLOW / MEDIUM / FAST.

You can also use it to get more information on a specific sensor for example. Press and hold and the card appears with detailed info or history, etc. 

swttt

Michael said:

I think it would be really nice if it's very intuitive. What if you press and hold and an action card comes up. You can than change the value with a big slider to the proper value. You can close the action screen with a button, or it could disappear after one second.

I've created a mockup to show what I mean:


By using an action screen you can customize what you want to control. If you want to control also the color for example, you could simply add it to the action screen. Because it's big and very easy to understand it's fool proof.
Maybe a slider is not even needed. I actually never set my Hue's to 68%. Actually some states like DIMMED / NORMAL / BRIGHT would be perfect for me.

If you have a ceiling fan with 3 modes you can just create an action card with an on/off button and three mode buttons: SLOW / MEDIUM / FAST.

You can also use it to get more information on a specific sensor for example. Press and hold and the card appears with detailed info or history, etc. 

I get your point, and thats the most logic idea to go with. 
But after playing all day with the codepen i posted previously, i do find that way kind of "refreshing". Different then standard, but still logical in its use. I do feel that the dashboard should give some sort of feedback, since that technique wouldn't work on a thermostat for example..  

Do note that athom gave us some hints on a dashboard they are creating in the future..
This project is really meant to give other users a quick start to create something in their own ideas. (the angular code is pretty easy to read if you are just a little bit known with js, for me its just a hobby as well )

If others do like to see some aditions, added features etc. Then i really don't mind to keep developing this dashboard in a fork or a 2.0 version. I even don't mind to start from scratch on a new version, and create something the community wants to use/see. But then i might need some help  

If there are people who would like to brainstorm on this idea, want to help or need some help on creating a fork they can contact me on slack (same user name)

swttt

Currently waiting on an update on the api.
For now i need 3 api requests (get zones, get devicelist en get devicestate), in the upcoming update it would be possible to get the state in the devicelist request. (this makes this allot easier).

After this it shouldn't take long to get a working dashboard (control on/off and dimmers).

Aaron

Great! 

swttt

Darn, api not updated. I'll work out the code this way then
Would make the app faster hopefully.

swttt

Well, updated the code on github. 
Did a foreach on the devicelist to get the current state and added this to the device list object. In this way it should be future proof when athom updates their api with the state in the devices request. (as stated before, i have to query every single device to get its current state)

I am not completely satisfied with the current looks. I feel that the devices area is to small, and the sidebars to wide. Going to focus on the api parts first, and how the devices are controlled. Then i'll be working on the UI again.

swttt

Just updated the github again. On/off for devices work now, the state gets update every second.

KoenMartens

swttt said:

Just updated the github again. On/off for devices work now, the state gets update every second.

Could it be possible to update the state more often when the site is actively being used? Mostly for the detection/setting of light intensity/volume. A feedback of 1 second seems quite long if you are increasing the volume of your speakers.

Very nice and quick work so far on the dashboards!

swttt

@KoenMartens ;

The 1 second update is to get the current state of the lights. (for example, if you switch it on with the normal switch it gets updated after 1 second in the dashboard) Controlling volume or dimmable lights should be instant. (not implemented yet tho)

KoenMartens

@swttt: Ah great!