Outsource Dashboard Coding

Let's say you wanted to hire someone to do the coding for your dashboard (either Built-in or Smartly, or other) I'm a designer with basic coding skills (can edit things, but really don't want to write from scratch) What technologies and platforms would you look for in an engineer to be able to properly execute on some very polished UIs for dashboard designs? (I'll likely find someone on Upwork)

bonus: what language are integrations written in? if I wanted to hire someone to built out integrations that were missing or not fully supported (e.g. Haiku/BAF fans, or Keen Smart vents)

Smartly isn't really a separate dashboard solution; it's an add-on you can put on top of an existing Hubitat Dashboard. SharpTools or HousePanel are entirely different solutions, if you wanted an example of something like that.

The language used by Hubitat apps and drivers is Groovy (I think version 2.4). However, that alone won't do you much good: Hubitat apps and drivers execute in a sandboxed environment that both limits access to some Groovy features (either because they don't make sense in this environment or relate to security needs for the shared execution environment) while also providing Hubitat-specific "extensions" (likely Groovy superclasses, traits, or other things we can't see but whose behavior are more or less documented and under which custom/user code will run).

I'm not sure exactly what your goal is in hiring out, but the above is one reason why you might find this tricky ("Groovy" knowledge alone won't do you much good, and anyone who knows Hubitat well enough is likely to already be in this forum). If you're looking to set a Dashboard up for yourself, it's pretty easy if you either read the documentation or ask for help here. If you're looking to make it look a specific way (design-wise), that is where either Smartly or custom CSS could come in handy. In that case, you'd want a designer who knows CSS (and HTML and possibly JavaScript, though at least the former should already come with the territory). An alternative would be writing your own Dashboard-style app entirely from scratch, which would require knowledge of all of these things (and is apparently so unappealing that few have ever tried).

For your other integrations, a Hubitat driver or possibly app plus driver (a "service app" that helps the drivers do their work, though a driver would be the ultimate goal when trying to get a specific device integrated; these are sometimes necessary for LAN/cloud devices) would be the likely path. Again, this would need knowledge of both Groovy and the Hubitat sandbox. But even trickier is that it would require device-specific knowledge: does the device use a standard Z-Wave or Zigbee implementation or a documented LAN/cloud option? If not, could your dev reverse-engineer the communication? All of this can be tricky (see the recent community Ring integration for an example of a reverse-engineered cloud device, which could also stop working at any time if the cloud host--Ring--changes their mind or their implementation details).

For Keen, I think at least some of their registers are Zigbee and work natively. (I'm not sure if they have other Wi-Fi or proprietary products or what ones you mean if so.) For Haiku, I remember seeing a community attempt at integration a while back but am not sure how that ended up. When choosing devices, I try to stick to natively supported ones whenever possible. For others, IFTTT or similar cloud intergrations may be easier and cover many use cases if no local, documented, or reverse-engineered means are available. In any case, it looks like at least Keen might already work. Is there something that you're looking for that you can't do already? If you're looking for fun ways to control/monitor the device, you probably want an app; the role of a driver is more or less to get Hubitat communicating with the device so you can use an app to actually automate it. For apps, you don't necessarily need to resort to custom apps: Hubitat has a lot built-in for common tasks and tools like Rule Machine for the more complex ones.

So I guess it all really depends on what your aim is. :slight_smile:

2 Likes

Thank you, that's very helpful, sounds like any modern front end web developer could do pretty much anything I want with Smartly as a starting point. (for the dashboard)

The overall gist of what I'm trying to do is have a default summary view with an overview of the house and systems.

With sub views that focus on different detailed systems, like security (windows, doors, motion), power (sensor batteries, large power draws, solar generation, house backup batteries), **Music / Media / Internet ** (current playing media, favorite playlists. Internet health and speed), Lights & Blinds, HVAC, as well as a "zoomed out" view that focus on outdoor specific things like Cameras, lighting, garden watering, detailed weather and forecasts.

We have a wired wall mounted iPad centrally located in the house that I'll display it all the time.

Kind of based on a home control panel that I designed like 18 years ago

As far as device integrations, looking on Upwork, Groovy is a commonly cited language that people are familiar with. Specifically, yes, their is a Keen integration, but from what I can see, it doens't cover their remote temp sensors, for Haiku, I read the thread you were referring to and it was unclear how much of the fan's functionality was actually built out other than on/off maybe speed.

When I say "custom app" I mean more of a front end module for fine-grain controls from the dashboard, e.g. an improved RGBW light control interface, or popups for media controls metadata.

There are multiple parts to what you are asking.

First the limits to controls are on the drivers. So if you want to have more control over the fans or vents you will need to code those controls into the drivers. This can be easy or hard depending on the device and their integration. I haven't looked at those devices so I can't say. The drivers are all written in groovy.

Next is the dashboard the front end is obviously written in html/css/javascript/whatever the languages are. I'm not really that strong with that side of things. That would probably be the most time consuming part.

However, you would need to get the device states/events pushed/pulled to/from hubitat in order to update your views. This can be done multiple ways.

  1. Using maker api and having it do a post call to your web server to update the dashboard. Then you can poll it using javascript to get states.
  2. Using javascript on the dashboard have it monitor the websocket for device state changes and then push the updates you need to the makerapi.
  3. Create a HE app to handle the passing of data/control back and forth from the devices to the dashboard. (This would probably be the best way)

Getting the data back and forth is probably the easiest part. Designing the UX is what will take most of the time.

Yes, that’s the plan. I can handle the UX and visual design aspects myself. The front end coding and (somewhat simple?) integrations between that front and back end of the Hubitat data is what I’ll try to outsource.

So... if you're planning on paying for a large (and it is a large amount) of custom development, which is not cheap. Why are you not looking into a professional system that already has 95% of what you're looking for and the other 5% your installer can customize for you?

2 Likes

What will the UX be designed in? HTML/CSS? If that is all then its good because its possible that it could all be hosted locally on the box and no external webserver is needed. But if you start to get into php and those things that will require an external webserver.

Also, do you know any javascript? I know how to get the data into the JS of the web page, but then transferring that into an action that updates the UX is what I have no clue about.

I'm just trying to get a feel as to what the work looks like. I was playing around with making my own dashboard app but the UX stuff is the tuff part for me.

What system are you referring to? partly because I have strong opinions about about how I want things to look and behave. I doubt any off the shelf or semi-customized products will be up to those standards.

Secondly, I'd prefer not to be in the same place I was with Wink, where we have 80% of stuff in one app, then another 20 apps to each control one thing that wasn't compatible with Wink.

Our current list of IoT things is here HA Graph - Google Sheets as I try to research what will be supported and where to find the integrations that I'll need and their current level of support.

The UI design and any needed flows will be in figma, easy to export CSS or SVG assets. I don't know if php will be needed or not, I doubt it? I can edit JS and know the basics, but honestly its something I'd rather just pay someone else to do.

Yet you're here?

Depending on budget you could look at DIY systems like MyServer, CQC or HomeSeer (HomeSeer is having growing pains). For professional systems that are fully customizable from programming and UI you could look at RTI or Crestron

Oh a list of things. Yeah nothing is going to work with half of those devices due to their vendor lock ins. Some of it has hacked integrations which are subject to break at anytime.

2 Likes

You seem to have a bit of an attitude that I don't need right now. If you want to be helpful, great, if you don't please don't engage.

I'm here because it seems like Hubitat has the most feature overlap with Wink, which even will its flaws is relatively well designed, easy to use, and works well most of the time.

Hubitat seems flexible enough that it's a foundation that can be built upon to look and behave like I want it to.

The other systems you linked to all look worse than hubitat's UI, which is quite an accomplishment. I appreciate what Hubitat has done so far, but its very clear that they don't have any designers on staff.

1 Like

Good Luck and enjoy.

1 Like

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