Outsource Dashboard Coding

I built a fully working bond home Integration. It works great with my fireplace.

1 Like

Great to hear. How do you show the state of the fireplace? Just based on the last command sent? (Do you have a valor fireplace as well, if so what model and remote?)

Mine isn’t valor, it’s a House of Fire. As far as the state, it synchronizes with the bond hub. So it will see commands from HE or the Bond app. However if you use the remote it will get out of sync.

It supports all commands the bond does so on/off, lights, flame height, and fan speed.

To chime in on the technical aspect of the built-in Dashboard: the built-in Dashboard receives updates through a websocket and the data is in JSON format so it is easy to use in JS. This websocket could be used for a completely custom Dashboard where the only thing needed is hosting of the HTML, CSS, JS and graphics resources. Either as embedded in a HE App (not very straight forward and probably not recommended if large resources are to be stored) or on a local webserver just serving static content.

As for developing for this platform, as has been mentioned before, it is not enough to know Groovy, you need to know the platform to be efficient and to provide good solutions to write drivers and apps.
If development can be kept to only using already exposed endpoints like the Dashboard websocket and MakerAPI anyone who knows how to write stuff to talk with web APIs can talk with HE. The rest is just a matter of choosing what you want to use outside of HE.

1 Like

Thank you! I appreciate all the extra details.

Hi, I'm working on a new dashboard, built using html, CSS and Javascript and using Maker API & websocket underneath. I've managed to get quite far (but lots more work to do). Here are some snapshots;

Main page, showing a 3D view of a floor (it's just nicked off the internet for now, my plans are being prepared as part of a renovation project):

Different floor levels can be shown (again , just a test image):

Then I can display lights (in various modes, they will adjust for brightness, color, temp), and you can click to toggle them on/off (there are only a couple of lights included so far, but it scales quite easily):

Temp = 2000

Temp 6000, Brightness 100%

Lamp is turned RED

Motion sensor active is also shown, dynamically comes up with motion and dissappears when not active:

2020-05-07 14_06_14-192.168.0.102_index.htm

Presence is also shown with some nice images, which turn grey when the combined presence switch gets turned off:

2020-05-07 13_49_16-192.168.0.102_index.htm

2020-05-07 13_49_30-192.168.0.102_index.htm

So I think what you are wanting is mostly possible. I need to add more device, including my AC units. Lots more work to do but hopefully it gives you a taster of what is possible!

Cheers.

(oh, and sorry for the lockdown beard ha ha ha)

8 Likes

nice work! if you actually had your designer do renders with realistic lighting that could be very cool.

I'm doing it all myself so that will be a stretch :laughing: The final plan is to render the 3d image with lights on & off and then use better images to show the projected light not just the source. If I can be bothered to do all that work. But it's easy from a code perspective. I'm just switching images and using CSS to brighten/opacity etc. I'm also going to switch out the header image depending on mode (I just use day, evening, night). So lots of development ideas. The other pages will mostly just access the standard HE dashboard content in iframes.

1 Like

If you're doing the renderings yourself, you might make it easier on yourself to simplify and move away from a photorealistic look to a simple semi-translucent greyscale shader with no materials. You could probably do the whole thing in SketchUp.

Yeah, I have the 2d plans too. But I'm press-ganging the renovation/architecture company to produce some renderings for me and then hopefully give me the 3d files too so that I can do more if needed later. I'm already thinking it would be so cool to have floor plans by day and floor plans by night :smiley: Now that I know how to read the websocket stream I can do whatever I want with images. I will post my javascript in a while when I've got it more clean. I'm sure it can be improved a lot but I'm just a hacker :clown_face:

2 Likes

And many thanks again to @markus for helping me get started with the eventsocket url!

2 Likes

I can't say enough about UpWork, I hired a architectural designer from the Philippines to do plans and rendering for our yard, She's doing amazing work, if you already had plans and photos you could find someone to do excellent rendering for a couple hundred.

1 Like

Will check it out!
Cheers.

Really cool!

Is there any way for the same light/motion sensor/door/window to exist in more than one location on the image? I have multiple wired sensors integrated into zones, so it would be nice to be able to get them to show up in multiple places. Also, if you have outdoor lights in multiple places controlled from one switch, it would be nice to see them all and control from any one. I guess I've never tried just putting the same switch on the dashboard twice...

Yeah, everything is possible because its html/css/javascript so you can really do anything you want. It's incredibly cool. You just listen to the event stream and do whatever you want. So in the examples you mention, you can listen for a switch to go on/off and then activate a set of images to switch to their on/off state. I have strip lights on my terrace and will do exactly that to show them all together.

I've also managed to get the AC's added (I'm using Sensibo to control them via IR). I can click on the image to toggle them on/off. but I'm not happy with the images to use for them yet (I'm just using a blue swirler which rotates to show they are on but it doesn't look that great yet, I want to find a way to show the air coming out of the device instead :smiley: )...

First pass, still needs a lot of work and polish, Since 90% of the time I'll use my phone, Google Assistant, or Automations, the panels are more for status than control. Probably will make the "Summary" tab a bit more simple and ambient looking.

A few things are still aspirational, like getting Tesla, Chevy, and Powerwall battery levels, Keen smart vents (while keeping the keen up working) and figuring out how to get our fireplace connected properly. Anyone know a good source for moon phase?

4 Likes

Is the light blue colouring of the rooms depicting motion in that room? I like what you have done.

Yep, blue haze would be motion in zone, I might keep it general/room shaped for rooms with one sensor, but for rooms with multiple motion sensors, try to draw it more accurate to the filed of view of each sensors.

1 Like

That's really cool. I would love to have something similar that has the whole house on one screen so I can see everything at a glance, but also then have different screens for each room, to more easily turn different things on/off.

That seems like a good option especially in very dense areas with multiple controllable lights. Could be different screens or just a series of zoomed in overlays with the first tap on a room.