UI Designer & new to Hubitat starting my Dashboard Journey

Hey everyone! I'm new to Hubitat due to the great Wink exodus, though I was considering Hubitat several months back. Got my HE on Friday and had all devices moved off Wink by midday Saturday, though I've got some Homekit stragglers I'll be migrating as well.

I'm a UI/UX designer and front end web developer and as such the base styling of the dash doesn't cut it for me. So I decided as part of learning about the system, I'm gonna do what I do best and design and build what I want my dashboard to be.

I figured I'd chronicle my journey in this group and also see what suggestions people might have. I know I'll have several boards to design for the tablet I'm going to mount next to my entry into the house as well as different boards for when I'm using my mobile device. By my initial rough guess, I'm counting about 13 boards each to design and build for tablet and phone.

My initial start here is a wireframe for the main/default screen for the tablet (apparently I can't put images or links in my post so once I can do that I will start).

Looking forward to this journey and challenge and sharing it with everyone.

10 Likes

make sure you check out smartly... it could save you a lot of css headaches and let you more easily get a slick looking dash.

2 Likes

You might like to think about taking advantage of the Automation power of HE to reduce your need to use lots of “dashboards”.
:blush:

2 Likes

Totally going to use automations and already am. Some of the additional boards are gonna be essentially clones of each other, but for each room with the devices in that room accessible as well as related scenes for the room.

But I understand your point :slight_smile:

3 Likes

My first look at it didn't give me the customization that I'm looking for. As I get further in my designs and I can share them, it'll be clearer why that is.

But I appreciate the suggestion!

1 Like

happy to have you here @setheryb, though could have been under better circumstances. HE dashboard is indeed missing a theming layer, but instead they just allow a textarea for CSS. The generated HTML is generally a mess, relying on a lot of hacky targeting. It's even missing classes for tile status at the #tile div..

The good news:

  • There is a way to inject JS, but it hasn't been taken advantage of yet. #1 thing we need is for someone to add drag and drop/drag resize for the tiles.
  • I have a developer skin for smartly that allows targeting of the #tile div. Full disclosure I built smartly - the hubitat skin engine a few months ago with a few other developers and community members.

I'm excited to see what you're planning, definitely keep in touch :v:

6 Likes

With your frontend/UI design experience you also may want to consider building something yourself too based on html/css/javascript, like the below, where you have absolute control over anything you put on your dashboard (but of course it's a stack of work)...

Thanks!

I don't want to go crazy with it, but injecting some JS could be helpful...I'll look into that.

My first thought is to design and flow things out what I think my ideal situation would be based on my understanding of the limitations of the dashboard, then scale areas back as needed.

The fact that these tiles are built using CSS grid gives me some hope about the ability to do some fun stuff.

This is the early stages of my layout design

And this link will be updated as I design and think through the flow of things. https://sketch.cloud/s/179e5d4f-00aa-43e5-87a7-857d25f716f5

13 Likes

That's not a bad idea either. I'll have to learn about the Maker API, but that's something I'll definitely have to look into. Especially if I can't get where I want within the HE dashboard system.

1 Like

The layout looks great, I'll be following this thread to see how you progress!

1 Like

Very nice. And welcome to hubitat. Prepare to be amazed, this is an incredible platform.

2 Likes

Updated design on my main screen

And getting started on the base template for a room. Kinda breaking it into status/sensors/monitoring on the left. Lights/switches/dimmers/things to manipulate in the middle. And media related things on the right.

I'm sure my lack of knowledge about the platform so far will mean some of this isn't really possible, but I'm gonna give it my best shot.

4 Likes

Looks really nice. What are you using? Native Hubitat dashboards with CSS?

Right now, I'm designing in Sketch. But my initial plan is to try and build it as much as I can with the native Dashboards. I've messed around with the CSS on a test board a bit and feel like I've got a good shot at making it happen.

But I'll definitely share progress as I go along.

3 Likes

Looks great! Might steal it.

By the way, the tile with garage door, thermostat and open window, are those devices static, or does it change the latest changes?

Yes I'd like to know too. Are dynamic tiles even possible?

@johnr & @rocketwiz So I haven't started fully building out the dashboard yet, I'm getting close to wrapping up my initial design phase (gonna post some more screens tonight) but based on my initial testing at least with windows and doors, it's a contact sensor, so it should know whether it's open or not and I should be able to change the visible state with CSS.

This also involves a lot of custom icons for devices instead of the stock set.

Alright...So I think I've got the design to a place where that I'm happy with. You can kinda click around to see some of the different boards (same link as earlier). https://sketch.cloud/s/179e5d4f-00aa-43e5-87a7-857d25f716f5

Just getting started creating my base CSS styling.

Images here are designs and on/off/etc states for different tiles.

4 Likes