Show Off Your Dashboards!

Thanks, I haven't technically finished it yet, I have a habit of starting things and not finishing them :slightly_smiling_face:

I posted the code somewhere recently if that was what your were after, can find it if you want. But will certainly post back here with pics when I'm done.

1 Like

Yes please post it when you finish. The CSS I have a handle on :slight_smile: We will soon have better control of the tiles via CSS and I'm looking for inspiration on tile designs. The title left, icon right (and optionally a slider underneath) really pops.

update: heh it looks like techmedx already put in a feature request for it! "To mimic Hue dash Requested by sburke781"

yeah I really like the idea, I'll take a crack at it and get back with you :v:

we should be able to do tile bg color as bulb color as well... looking forward to this

10 Likes

Ooooo purdy!

Great to hear you're taking a look. I also liked where @jaredqpittman1 was heading with his from an earlier post....

Show Off Your Dashboards!

4 Likes

slick!

1 Like

That looks great, there was another post that had a similar design/mockup that I was going to link in here to see if there was an easy way to do it in smartly/css.

[UI Designer & new to Hubitat starting my Dashboard Journey]UI Designer new to hubitat

3 Likes

That all looks do-able. Maybe we could add it in as a "theme". Both samples are good themes, and @spelcheck needs more stuff to keep him busy :rofl:

3 Likes

yes he's the right guy for this.. he 100% has the right idea. with the smartly css targeting fix he should have no issue making that a skin. maybe he'd be willing to have it be a skin on the smartly platform? :man_shrugging::nerd_face:

2 Likes

Sure, but it's 1521 lines of code so instead of posting it here I'll PM it to you. I've changed a few things since I posted this, but the majority is still the same.

@setheryb is this something you're still working on? Interested in working on a theme for smartly?

2 Likes

Hey @spelcheck,

It would be nice if you could include a 2 level hierarchy of zones and rooms (see screenshot below). Not sure whether smartly or something similar would be the most appropriate spot to capture this setup, perhaps some kind of helper app may be more appropriate...?

I think @TechMedX may have setup a seperate thread for this request, I might try and post more of my notes, etc, there, rather than clogging up this thread.

5 Likes

Many thanks - just signed up on his website - waiting for Authorisation :slight_smile:

This is my first post anywhere so please bear with my lack of knowledge especially on how to make references.

I finally decided to take a shot at trying to do a custom dashboard.

Preamble:
I lived with one of those basic ones for more than a year but no matter how much I tweaked it, always felt cumbersome and outdated.
I took inspiration from the floor pan dashboards most people do in Home Assistant, but I may not have the skills nor did I wanted to go to another hub / system. I also like what people d with smartly.

I Finally decided to take some time and put my hands and brain to use and ended up with these dashboards.
I am surprised with the outcome as I am not a programmer and have limited skills with css /json.
I tried smartly but struggled with the grid spacing between dashboard links and the rest and since I was mostly after “transparent” tiles , I stayed with the basic Hubitat setup and did some CSS lines.

This is the “before” dashboard set up.

And these are the new ones.

For those curious on how to do this:
The key elements:

  • I did my layouts in Autocad as I am familiar with it, but the can even be done by hand.
    ○ I read about how to identify my screen size and set my drawings to that in mind.
    ○ Very important: I only use 1 phone to access the dashboards, so I didn’t have the problem of the background not scaling properly in different devices.

  • Saved them in google photos.
    ○ Please read about how to create “permanent”hyperlinks to your photos.

  • The layouts are then the background image to the dashboard.

  • I created a dense tile grid : 16x21; it could have been denser, but that was enough.

  • I modified templates for switches and sensors to have transparent backgrounds and use some nicer/simpler icons.

  • I created CSS to get rid of the texts, except for battery status in sensors.

  • I got rid through CSS of the annoying shadow in texts and icons.

  • I played around with “ dash link” “text” and “generic” tiles to create the upper half menus.

  • I realized the importance of copy+paste elements from one dashboard to another through the JSON code.

I struggled and had to work around the background color for specific tiles.

I did not solve (for now) the font size and alignment for specific tiles; so right now all my texts are relatively small.

Let me know what you think of it.

18 Likes

Keep it clean like this. People start with something that looks nice, and then crowd it up with every little sensor they can find to the point it's unusable. Maybe add some scene stuff for the TV Room instead of just an on off, and some redundant status indicators for the garage door.

4 Likes

Voortzetting van de discussie Show Off Your Dashboards!:

I'm a school drop-out. Even my english is from movies and a lot of games.
0.0 skills with any of those coding or anything.
Only had a lot of motivation to learn an willing to fight for what i want.
Last year i got my hubitat (was expensive for a belgian)

And now I am kinda proud on what i achieved.
I have my temprature set that there collor text changes according to there value.
I *** learned that a simple . or , makes a big difference.

3 Likes

G'day,

Great job getting your temperature chart and tiles setup!! Also, you get a lot of respect from me, I have grown up speaking English and can still find it challenging, so well done for persisting and getting a great result.

If you are interested, there is also a Temperature Charting thread (if you haven't seen it already), you may find some more inspiration:

Das ist mega geil

1 Like

Hi,
I had seen a topic about the color changing value but it was for F instead of C... Since we use C and meters :exploding_head::shushing_face:

I used that code but changed the value and found a online tool die color codes (RGB).
From
15.0 to 31.9C and ever 0.1 in between :crazy_face:

@gertjan.deprez I have a complete code for Celsius too (-18 to 49) . PM me if you want it. (see below first)

https://community.hubitat.com/t/smartly-color-changing-tiles-now-in-celsius/41794

The current code is large as mention in the link posted above this post. The full code is too big for cloud dashboard limits. We are working on a shorter code now for use with smartly 2.0.

3 Likes

wow what switch is this ?