Show Off Your Dashboards!

I previously posted here how I did this on my fridge.

I am using Wyze cams through TinyCam Pro on an Amazon Tablet.

Thanks. It works but the image does not cover the entire tile. It only covers the "primary" area. How do I adjust the primary area to fit the entire tile size?
image

Not where I can test this, but you could try something like:

#tile-id .Disarmed {
    position:absolute;
    left: 0px;
    width:tileWidth px;
}

where tileWidth equals the Column Width from the Options tab off of the settings cogwheel

Use background image option. It should fit to the tile.

Here's what I've got on Sharptools.io

The REST API for FKB makes it nice and easy to capture screenshots

4 Likes

@Angus_M Great. Your method works in covering the entire tile but I want the image to change accordingly with the mode :slight_smile:
The changes is based on the attribute value of the tile-primary (.day / .night etc)

#tile-4 {border-width: 0px; background-color: rgba(40,80,100,0.0) !important;}
#tile-4 {font-size: 1px !important; background-size: cover ;background-image: url("http://192.168.1.101/local/mode_day.jpg")}
#tile-4 .Day {font-size: 1px !important; background-size: cover ;background-image: url("http://192.168.1.101/local/mode_day.jpg")}

Line1 makes the background transparent.
Line2 and Line3 are 2 options I tried.
Line2 managed to cover the entire tile but cannot change accordingly to mode.
Line3 changes the background image accordingly to mode, where I have setup different images for different modes.

2 Likes

Just finished customising all the icons on my phone dashboard.


Is there no easy way to do this on the default Hubitat dashboard? I'm really struggling with the stock app. I've tried Smartly as well, but even that isn't very straightforward :confused:

2 Likes

@thebearmay method should work. I use something similar.

#tile-ID .tile-primary>div:after {
position: absolute;
left:0;
width: 100%;

Like the kitchen led icon, where did that come from?

All the icons here are from The Noun Project. I downloaded the SVGs, made copies with the little colours and lines for the "On" version and hosted everything to postimage.

Except the Espresso Machine icon - that one I made myself. If anyone wants that one, let me know, you can have it :slight_smile:

"easy" No, not unless your a CSS guru, and even then it takes 'work' (not that I am, I just hack away until it looks good :rofl:)

Thanks I've been looking for a decent site to host images that aren't in smartly. Are the images hosted there available via HE cloud connection? Nice work on the Espresso Machine I'll take a link to the SVG if your offering.

I know very, VERY basic CSS - enough to fumble through the WordPress backend and get what I want, but at least you get live updates there and can use the Inspect tool to figure out what to do. Not only does CSS with HE look far more detailed, but also much more painful to do.

Are there any alternatives? I know Sharptools exists, but I don't think I want to pay an annual fee for the basic af dashboard I currently have. I may consider it in the future once I have a more elaborate setup.

You could also use imgur, I guess. I haven't tried it myself. I wish I could just use OneDrive, since all of these images are in there anyway.

Thanks! It's a Profitec Pro 300, just in case that's relevant lol
Here are links to the SVG and the AI.

1 Like

Sharptools has a free tier with 1 dashboard and basic features.

1 Like

OneDrive won't show icons via cloud dashboards, neither will google, or most others I've tried. Locally you can use file manager, but that doesn't help cloud dashes. I use smartly for dashes.

I was about to say "all the SVG shows is a white screen", but it's that way intentionally :man_facepalming:. The AI file is cool, did you scan that in and have AI make the SVG somehow? If so that's a neat trick (not great with AI, haven't play with it enough)

Illustrator can do this, yes. In this instance, no - I made that completely from scratch and used the picture as a reference.

1 Like

after trying many different solutions(several times!)… I kept coming back to homeassistant for my dashboards….

6 Likes

Hmm, looks like I might need to kick the tires on a HA Dashboard setup. At a high-level, is the idea to integrate HA with Hubitat, and then simply develop the Dashboard there?

Here's what I've come up with so far -- but I don't love it because of the delays switching between dashboards, etc:

1 Like

I use HA really only for the dashboards (with Hubitat devices exposed to HA), I keep all my automations on Hubitat. HA is also useful for the occasional oddball integration eg neato vac cleaner or my 3D Printer. I find the HA app also renders the dashboards well on a mobile device. I run HA on an always on Synology NAS in a VM (could also run under docker) - so i’m not maintaining additional kit. There are downsides though, HA has a high tinker requirement, updates can and do break things. Some people swear by HA and it’s certainly got integrations for all manner of stuff, but for me personally, the tinkering looses its novelty the first time something just breaks and youre knee deep in logs trying to find out what broke what..it’s actually one of the reasons I do run it under a VM so I can roll back to a snapshot if something goes wrong..

1 Like

You might want to check out the auto-entities card. It will only show the entity based on the defined state. For example, if you set it up to show only open contacts, it would only display the doors or windows that are actually open. This saves a lot of real estate on your dashboard and cleans things up considerably.

7 Likes

I’ve got a HA docker installed but haven’t tried any integration yet. Any good tutorials? Specifically for connecting hubitat and using the HA dashboard?