@BrianP how did you set your custom tile sizes. Is there CSS that will take a tile and chop it down to a quarter size or something custom?
Make the dashboard have really large values for columns/rows like this:
Now my smallest square tiles are 4x4. Here's the setting for my "Basemt" window tile:
My Dashboard links are 2x12, which ends up being "half-height." My largest tiles (surveillance cameras and thermostats) are 10x12. This gives you a lot more control over position and size. You could go way up into the hundreds, but then it's really hard to move things around. It ends up taking lots of clicks on the position arrows when you're moving tiles. That's why I ended up with 32x48 for this. Some of my other dashboards had 5 equal tiles across (but still with 4 dashboard links at top), so I ended up making those 32x40, which made my dashboard tiles 2x10 instead of 2x12.
1 Like
other than the tile names is there anything else that would need to change in the CSS? ( my CSS-fu is not strong 
)
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
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
