UI Designer & new to Hubitat starting my Dashboard Journey

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 :wink:

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

I really encourage you to use Smartly for a start, it took me no more than 30 minutes of fiddling with custom icons and zooming to get to this beauty. Love their work and this is closer to what I would expect from Hubitat out of the box. We can all hope :slight_smile: In the meantime, the community is here to help.

2 Likes

Thanks. I have been meaning to get back to Smartly, setup some dashboards ages ago that I still use, and even helped in testing the first round of the resizing and dynamic layout changes. Very impressive, both Smartly and your use of it, nice job. I am keen to setup a more polished layout and muted colour palette, but don't have the UI skills that others do, hence why I posted back here. Perhaps I will take a look at the theme you have used, that does look nice.

Simon

1 Like

Nice! Do you have a link for downloading Smartly? I could not find it. Thanks!

Here is information about Smartly.

Smartly 2.0 instructions

4 Likes

Thanks @wayne.pirtle !

Forgot to post here as well as the dashboards thread, I did end up trying to reproduce the example from this thread, got very close, but still not quite finished....

Didn't use Smartly in the end, just a lot of CSS and overlays of tiles.

1 Like

Nice! Are you displaying this on anything in particular? Maybe something wall-mounted? I'm looking for ideas, I recently acquired a Samsung tablet, messed around with Full Kiosk today and it has some great potential.

For the tablet I am going to go custom myself, smartly is a great starting point but I have an urge to tinker.

1 Like

I had an old tablet so put some magnetic surface mounts on the side of my fridge and stuck some metal plates on the back of the tablet. Not the most polished finish with the power cable dangling around the back of the fridge, but still a decent result. There's a few posts around here somewhere, will find a link at some point a post back here

Smartly does give a big leg up, but I do also enjoy the control with the manual CSS updates.

Here's a photo of my tablet on the side of my fridge, amongst other magnetic buttons and motion sensors. I conveniently chose to unplug the power to the tablet when I took the photo :slightly_smiling_face:. Probably not the setup for everyone, but works for me.

I do eventually intend to finish off the last few remaining items on the dashboard and then move on to some more of the examples in the prototype.