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.
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.
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.
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
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)...
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.
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.
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.
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.
@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.
I'm coming into this obviously late, but what's the progress? I'm a UI dev too, and while I love my Hubitat, the UI/UX experience could use a big redo. I've thought about getting dirty using my web dev skills to make certain things that I use with Hubitat easier. I want to know what your experience has been.
I'm at a bit of a standstill. Life has taken much the attention I have available. I was running into some roadblocks in terms of what the HTML output was for some elements. I'm wanting to dive in again here soon hopefully.
