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
15 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.
6 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.
10 Likes
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.
2 Likes
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.
4 Likes
@setheryb @anotherbughunt you guys should check out smartly. This UI dash setup is very clean. We love to integrate this as a theme/skin on the platform. If you haven't seen it we were just talking about it. all nice of course 
EDIT: @anotherbughunt Welcome to the HE community!
4 Likes
To add to what @techmedx wrote above-
we'd also be happy to create a separate base skin for you guys, so your skin would be 100% your styles, your assets. Currently all skins start with the default 'smartly' skin. When smartly css styling fix is released and you get a release together, you'd just be sending over fonts, image assets and css and it'll be an option in the menu. Figure using smartly would be a good way to get them out there and keep them updated. Let me know, and I'll tag you guys specifically when we are using proper state classes.
Edit: could even have smartly just use your github repo so you can do your own updates.
4 Likes
This might be what I was looking for. Let me toy around with it for a bit.
2 Likes
I do like the more matt finish in the colour palette you chose in your screenshots from May. Nice work.
1 Like
Another benefit of using smartly for releasing skins, you can force grid settings, color palettes, etc. Now that legitimate CSS targeting is available, you can potentially use absolute-positioned pixel-perfect designs if you'd like, or flex accommodate a few configurations. Smartly could even be used to choose (or auto detect based on tile size) what tile layout to use and provide different CSS depending.
I also wouldn't be against having skin preferences where, when updated, snaps tiles to be x rows tall, x columns wide based on tile type, etc. Anyways, a lot to think about.
1 Like
@setheryb - Did you ever complete you Dashboard setup? I typically need something to copy as I don't have the visual expertise of someone like yourself, so am interested to hear if you setup what you prototyped. I could certainly make good use of your plans from sketch, and may end up doing so, but would be interested to hear how any translation to HE played out.
Simon
