Custom dashboard and user experience (UX)

After reading about Hubitat and watching some videos I have no doubt it is exactly what I need (kudos for its creators and the development team).

However, in my personal opinion it is lacking on UX.
Reading through some posts I noticed you can customize appearance with CSS, my question is: "How far can you go"?

User interface, looks and experience are subjective but while some people love their nuclear plant control center looking dashboards (no offense, it is actually cool :grinning:), I think if I'm going to place tablets around the house in kiosk mode I need something clean, minimalist, intuitive, with a clean purpose so not only guests, wife and kids can take advantage of it but it also can complement my house.

I can't post links or images (maybe because it is my first post?) but the Home Assistant community has this awesome project with is clearly based on apples Home app and if you are "cloning" Apple you can't go wrong considering the amount of money they put towards user experience and research (just google "A different take on designing a Lovelace UI" to see it)

Atmos home is another perfect example of a nice and clean UI but unfortunately they are not in a rush to release it.

On top of the above think about the UI in your Ecobee and Nest thermostas, that is what I'm referring too. It is a modern and clean experience suitable to everyone and everywhere.

I could go on but you get the point.
I guess my questions are:

Are there any similar community projects for Hubitat or alternative dashboards more inline with what I'm looking for?

Can I achieve this by tweaking the CSS on the original dashboards (I would have no problems doing it myself)?

If answer to previous questions is no, does it provide a rest API and webhooks? If it does I wouldn't mind creating an web app myself but I would need to interact with devices and somehow get their status back (preferably through a webhook instead of pulling with a timer).

Search for Smartly in the forums. It's a significant dashboard enhancement you can add to your dashboards and it lets you do all kinds of stuff. Beautiful.

there's also a very nice Android app that provides a dashboard for Android devices.

2 Likes

This is certainly worth a look too.

2 Likes

Smartly is worth a look, but personally I'm getting to the point where I'm thinking the best plan is to just build my own dashboard from scratch. No disrespect meant to the developers who built the dashboard, it is functional and meets many people's needs (your nuclear control system analogy is pretty accurate!), but you can only put so much lipstick on a pig. At the end of the day it's still a pig. CSS can do a lot of cool stuff, but at some point we're just throwing so much duct tape, bandaids, and glue on it that you realize you've spent more time doing that than if you just built something from the ground up.

1 Like

the upcoming release of smartly will be taking advantage of smartly-inject (pre-release), which allows any JS modifications we throw at it. inherently, smartly-inject adds drag and drop.. but also css class fixes which bring state and value classes into the root tile divs, allowing for 100% uninhibited css control. chroma.js value-based color coding of temperature, humidity and battery tiles with configurable thresholds will also be available, along with parallax background effect, full-time touch dimmer, etc.

I know I'm late to this conversation, but wanted to just get it out there that the existing dash, with a little JS, is pretty damn good.. albeit inherently slow on initial load.

2 Likes

Smartly is definitelly an improvement but for me it is not there yet.
As a software engineer myself I do appreciate and respect anyone who starts and/or contribute to an open source project but I'm really picky when it comes to UX and I'm lookig for somehign very specific, for that high end looking with attention to the smallest details.

I would settle for something like this (from the Home Assistant Comunity). With the exception of the "Media" title, everything else is really well balanced.

Combine the power of Hubitat with such user experience and you get everything a high end system would offer for a fraction of the place.

I you take a look at the developer documentation and see what APIs are available and if going with a custom solution is worth it.

1 Like

That sounds cool.
Let me see if I understood it right, is Smartly a separated application or is it CSS and JS on top of the existing dashboard? If it is a separated application, I could potentially change not only the CSS and the markup/html to fit my needs right?

Yeah you guys have done a terrific job. However some of my issues I think are more “lower level.” For example, when I leave it running for days some times I launch it and I have a nice 500 error on screen. I then have to refresh the page. When I’m mounting this on the wall I think of it like an appliance, it has to work flawlessly 100% of the time, not 99%. Imagine if your fridge only kept your food cold 99% of the time...

Smartly is awesome, I’m just at the point of believing that it will be 10x the effort to bolt on all the things to make it great vs just starting from scratch. If the foundation of a building is bad, it doesn’t matter how cool the stuff is you put inside it, it’s still a weak foundation.

Edit: to also mention, Smartly is very fragile. If HE changes the html structure (because it’s internal stuff, they can change it whenever they want), smartly could break and require changes before it works on new firmware. The more you guys hack up the html and JavaScript, the greater the risk becomes that a new firmware breaks stuff.

smartly is a skin engine that provides and stores custom dashboard and per-tile options as json, then builds all necessary CSS for those selected mods. smartly-inject is the JS-enabling device that reads from that same json and enables accompanying JS for the mods that require more than CSS (and inherently adds the much needed drag and drop)

it's essentially just providing a css and js layer on top of the existing dashboard.. but with JS you could potentially change the HTML as needed. the downside is that the dash initially loads with CSS mods only, then loads and runs the JS so there is a moment there to load. it's not separate from the current dashboard, it's on top of it.

100% agree, if it's not rock solid and throws a 500 after a few days that's unacceptable, completely unacceptable.

^ Edit: thank you for the praise man! :v:

I feel you, and totally agree that if they ever find the resources to truly work on dashboard there's a potential for breakage BUT I truly don't believe that will happen soon, it'll be one of the last things they work on once caught up on other things. also, the breakage would be soo minimal, because smartly mods are mostly css and some basic JS :stuck_out_tongue:

I commend you for considering thinking about taking on a build-from-scratch, as others have tried. I've heard the builder api (I forget the name) is useable, but I don't understand why some of the options that are using it are soo limited..

not rallying to death over saving HE dash, but short of the separate spacing between the groups of tiles, with smartly-inject css class fixes, this is 100% visually attainable with css only. the HE dashboard is just divs using css grid, so with absolute positioning on anything that is badly built in the HTML hierarchy, this is definitely doable (minus the media tile as you mentioned). color icons? use background svgs per tile state, etc etc. heck you could probably rip the icons from HA.

Havent actually jumped into it. Right now I’m using nothing :frowning:

1 Like

Using Maker API and the eventsocket it's absolutely possible to effectively do anything you want in a custom dashboard. I've created a comprehensive dashboard based on 3D plan views of our home to allow touch control & visualisation of everything we need (e.g. lights, AC's, buttons, mode, presence, motion, weather, temp/pressure/humidity, siren/alarm, sleep pads, lux, webcams including motion and object detection courtesy of tinyCAM, etc.) along with other pages linked to various standard HE dashboards running in iFrames, HSM, news sources, media/Spotify, home/emergency info, contact owner (we sometimes Airbnb), sketch/note pads etc. It's all in html/Javascript/Css running under Apache2 on a Pi.

We will have 2 of these dashboards running on wall panels, one upstairs and one downstairs, going in after our property refurb.

I'm also thinking about adding some small displays in bedrooms to allow a cut-down set of commands/status mostly focused on that room. So yeah, if you want to emulate an existing system for small control requirements that's also possible for sure.

It's been fun to build but a stack of work. Setting up a great UI is always difficult unless you are really skilled in CSS (which I'm absolutely not). Once you get the basics set up it's mostly about interpreting the often messy JSON that gets spat out by HE into its eventsocket and then how to make it pretty and useable in the UI.

More info here....

2 Likes