Show Off Your Dashboards!

Some tile templates have hard-coded font-size or other style information. Those need some individual attention. For example:

.tile.thermostat .inline-block {
    font-size: 2.25vh !important;
}
.tile.thermostat .inline-block .no-wrap.overflow-hidden {
    font-size: 2.25vh !important;
}

Those both modify parts of the Thermostat tiles. I had to do both, since there are two places with hard-coded font size. The Thermostat templates wouldn't respond to changes in the font size in the dashboard settings.

#tile-39 .tile-primary {
    font-size: 3.5vh !important;
}

That one is for my Disarm tile that sets a global variable to do the HSM disarm. I ended up using the div ID for that tile (tile-39). If the CSS selector starts with '#' it's the ID. If it starts with '.' it's the class.

.hsm .tile-primary > div:nth-child(2) {
    font-size: 1.5vw !important;
}

That one is for the HSM tile. It also had hard-coded font size on part of it. The important thing to understand when you're adapting this to other dashboards is how the CSS selector statement works. It's the thing before the brackets. Then you can use something like Web Developer in FireFox to inspect the elements like this:


That's my HSM tile in the div with id "tile-18."

My selector is .hsm .tile-primary > div:nth-child(2) which selects first any div with class="hsm" (there can be multiple classes, this one is class="tile" and class="hsm" which ends up being class="tile hsm" in the code). Then it has to be a "tile-primary" class within the "hsm" class (at any level), then lastly the div element which is the 2nd child element of the "tile-primary" class element. That ends up selecting the div that contains "Disarmed." There are other ways that could have been written to get the same result. For example:

#tile-18 .tile-primary > div {
  font-size: 1.5vw !important;
}

since there is only one div inside the selected .tile-primary div within tile-18.

The !important makes sure that the CSS overrides any style information contained in the HTML.

Hopefully that helps a little. This would not be something you could just copy-paste to fix your own dashboard, though a lot of it would work. I'd say look at w3schools to review some CSS concepts, then hopefully you could adapt it to your dashboards.

2 Likes

thanks for the detailed walk through! looks like I know what I am doing this weekend

2 Likes

@John.Herron first time I have seen smartly running on a car HUD. Nicely done sir! Project time!!

Here is my newest main dashboard rendition using @spelcheck smartly with the 1/2 width mod.

Recently added automatic color changing tiles, Follow Me from @bptworld for dashboard log messages, and the new @Cobra Sonos Dashboard Controller app with virtual music player tile. (additional player tiles add via custom CSS)

Thanks to you all, and everyone that volunteers their time to make HE great!!

5 Likes

That's sweet! I don't have Android Auto on my head unit but I do use Android Auto on my phone and have car-specific dashboards. They are probably my most-used dashboards.

Is there a way to show HE dashboards on AA? How to do?

1 Like

Not natively unfortunately. I had to use Tasker to do it. See my explanation from another thread.

EDIT: @john.herron How did you open the dashboard in Android Auto head unit because AA does not allow any web browsers as far as I know nor would it open the HE app.

2 Likes

@stephen_nutt, this running directly on Android, not Android Auto, so I just run the cloud URL in an app called "Full Screen Browser". Nothing fancy. My HU supports Android Auto, but since it runs everything natively, and has plenty of storage/memory, I just run the apps natively. It also has two micro sd slots so I copied all of my music, playlists and offline maps to it. I can even monitor my Blink, Ring & Amcrest cameras on it (outside of Hubitat of course); but in that regard I mostly use it for Ring doorbell announcements.

I'm hoping later this year or early next to get a 13" / higher resolution unit. That will allow for nicer dashboards (etc). But for a "Chinese unit" I really like this one, there is nothing it can't do (Android wise) and sound great.

Sorry didn't mean to start a HU thread. But I do love having the Hubitat dashboard on it.

2 Likes

recently switched to smartly. loving it

2 Likes

What head unit

Not sure if I have read your comment correctly or not, but a head unit is what the radio in modern cars is called. It encompasses the screen and the bulky (compared to old school radios of cars) box it is attached to.

Pumpkin is the mfg. Chinese made but works great. It is running Android 9, 7" screen. Really not much it can't do. Already considering getting a 13" when Pumpkin come out with one. I can display live weather radar, home cameras, Ring app, radio stations from around the world (plus AM/FM), even recorded Xfinity cable recordings if I want. Nice backup camera integration, front DVR integration. Mine has a DVD/CD player. Built in GPS for Goole maps, Sygic, etc. WiFi for using my phone as a hotspot. Etc. Etc. And, of course, Habitat Dashboards.

Btw: not all mfgs are the same. I tried an Xtron, one built for my vehicle. It was a peice of crap, I had to return it, and glad I did.

2 Likes

Any chance it takes a sim card so I can enable it with its own LTE

Yes, it can use a 4G dongle. Pumpkin recommended a "Huawei e8372 dongle" when I asked them about it. I decided to just use my cell phone to save some money. It has two USB ports out the back, and one in the front. It comes with two USB cables for those in the back that can be routed out of the way.

Does it have wifi support? I have a hotspot on my phone which i could use for it to access the net via wifi.

Yes, most Android head units have Wifi support, this Pumpkin model does. It comes with a little Wifi antenna that I've stuck inside dash (in between the dash and some sound insulation). This is how I'm using it, WiFi to my phone that is acting as a hotspot. btw: Your vehicle may need a wiring harness and fascia mounting kit for a clean installation.

Thanks .. I will look into it..

@jared.zimmerman & @Angus_M
Holy cow. Those are super professional looking. Super jealous.

Angus, How do you get the tinycam tiles to be circles?

1 Like

A lot of messing around with CSS :slight_smile: but eventually it's very easy to achieve...

		.roundImage {
		border-radius: 50%;
		border:solid 1px black;
		}

I will probably post the whole story at some point but too busy right now. There is a stack of CSS and Javascript to control all this but none of it is rocket science (I"m not a coder, just a self taught keen amateur ha ha ha). It's moved on a bit since then with modes driving the header image to the page and I'm working on popups to control ACs and lights (at the moment a single click toggles them on/off, but I'm trying now to add panels to control them completely, eg. for ACs: fan, temp for lights: colour, level etc). It's become a big html/javascript coding project. A lot of fun but a way to go yet.

I've also added pages for music control, Netflix, YouTube etc. The idea is to put this on large touchscreens in the kitchen and in our landing space upstairs and use as kinda media/control centres for the house. Also will include "info about the property" and "contact owner by webcam" etc (because we are going to rent this place eventually (Airbnb) and we make the HA a big part of what we offer).

I've also added some settings options for show/hide webcams (mine are just battery operated Arlos at the moment, so I cant leave them on all the time because the batteries drain - I need to rig up 5v supplies to them), black/white themes (the screen shot below is the new white theme). The pages automatically jump back to the floorplans after a while too and you can select whether you want upstairs or downstairs as the default view (so that I can run the same system on either screen). This runs on a Pi 3b linked to the HE of course using Maker API and the eventsocket.

And here it is with an example pop-up (this one to manage the modes if you want to change them by clicking on the banner image, after which it will send the selected Mode to the hub and the image at the top will change based on the eventsocket response from the hub). So i have different pano images for day/evening/night. Notice also some lights and AC fan images are on (eg. AC fan is blue, and rotates, and the lights are yellow or white depending on level/temp) and motion sensors activated (the little blue man is running) behind the popup in this screen shot.

WIll post when it's in a reasonable state and most of the functionality is there. Probably a few weeks yet. Just wish I could spend more time on it and had more skill/knowledge about what I'm doing to be honest, but I'm busy with my day job too. Anyway, quite proud of the result so far :slight_smile: it's getting there....

nb. the floor plans are not my property, they are just placeholders taken from the web for now as I await my 3D floorplans as part of my renovation project on this property.

6 Likes

Ok, where does this Joker link going to? Bat Cave?

3 Likes

That's useful if you live me (Yorkshire) in UK :wink: