How to remove Hubitat Dashboard Tile Text & other possibly wishy listy things?

Hi there,

Hubitat Dashboard TL;DR question / wishlist summary with context background below (edited - icons questions resolved):

  1. Is there a way to turn off tile text such as on/off status (identified already by background colour) or other elements such as dimmer sliders etc.

  2. Is there a way to indicate template customization should be applied across all dashboards?

  3. Is there a way to incorporate multiple attributes for one device in a single tile? For example, for a heater I currently create three tiles - on/off, power and related polling time. All three tiles must be large enough to each also accomodate the device identifier etc.

Things I'm pretty sure I can't do:

I would love to be able to swipe right / left between dashboards :grinning:

Background context:
I much prefer a relatively small phone screen (iOS with display in dark mode) and find the devices tab diffiicult to use: Attempts to just turn off/on switches often result in bringing up the full screen for the device in question, and pale green vs black & white for on/off is not intuituve to me (and possibly quite difficult for people with visual impairments).

So I have created (hubitat) dashboards for various rooms: They took quite a lot of work, sizing the switches / bulbs device row/column tile dimensions to accomodate the icon plus dimmer sliders, device identifiers, on/off status text and date / time of attribute readouts etc. In addition often for a "room" dashboard, parts of my device names (helpful elsewhere) are redundant and could be abbreviated in the dashboard.

I also noted that customising a template in one dashboard does not appear to customize the template for all dashboards. While this allows greater customization, following the same pattern of having a dark background / colour for an off state and a light background for an on state with additional selection of visually simplified icon designs (custom) tends to get quite laborious.

Any answers / suggestions / work-arounds (or pointers to relevant documentation) would be most appreciated.

Cheers

For tile customization, this is the place to start:

For default templates across dashboards, I think you can copy the json file and paste them into another boards "layout". Any CSS customizations you may have applied can be copied from the CSS file.

For multi attributes you can overlay tiles on top of each other. I'm pretty sure that's in the CSS guide I posted but there is a community app that might serve you well if you're not aware. He has also created a remote builder that may be of interest. You should give it a look:

4 Likes

I have only one narrow dashboard with a bunch of small tiles.
I put in a fourth column for experimentation/testing.
Not for everyone, I'm sure.

1 Like
  • In Dashboard settings, Options, you just have to check "Hide Icon Helper Text", and it will remove the state text from all tiles. For only single tiles, it would need to be done in CSS

  • All dashboards are unique, there is no cross reference between dashboards. You can copy dashboards to not have to repeat setup steps.

  • For stacking tiles, you will need to adjust the z-index so they stack in the order you want. You may also need to make the top ones transparent to show the back tile data, and remove some titles so they don't all stack together. Here are a couple snippets I've used below, but the CSS guide already posted here should have anything you are looking for. If the text overlaps, you will need to move the position of some text to have everything show on one tile correctly.

/* make tile be on top and transparent */
#tile-94 {
z-index:150 !important;
text-shadow:none;
background-color:transparent !important;
border:none;
}

/* Remove the title of a tile */
#tile-81 .tile-title, #tile-83 .tile-title {
visibility: hidden;
white-space: nowrap !important;
overflow: unset;
}

/* Change content font size and position */
#tile-25 .tile-primary {
font-size: 12px !important;
background-color: rgba(75, 75, 75, 0.4) !important;
height: 20px !important;
width:160px !important;
position: absolute;
top: 0px;
left: 0px;
}

2 Likes

Thanks @CAZ,

I'm in the CSS may a well be greek category. However the Tile Builder app looks like a very inviting rabbit hole. I shall have to investigate!

Cheers

2 Likes

I understand completely. I was there myself. Kind of still am but once you find what you are looking for and see it repeatedly, it becomes much clearer. CSS customization is almost limitless. You just have to find it. Once it's done, it's done. I've had to "relearn" what I've done to help out some friends as my main board was created many moons ago.

Your are absolutely right about the rabbit hole that is Tile Builder. I found CSS the same once I started to get the hang of it.

This is a long but great read. I have picked up alot of ideas from it. There are quite a few phone specific boards in there. It's amazing what some have accomplished.

1 Like

Thanks @chrisbvt,

I had not investigated the "Hide Icon Helper Text" functionality so that's a most helpful clarification. With hindsight I should have created a baseline dashboard template as suggested. I guess I had to learn some of the constraints of the app first and I'll admit to a little fatigue after making a set of baseline dashboards. There will always be a learning curve :slight_smile:

Cheers

Now, in the course of your activity, you might create some phantom tiles like I did. These inhibit the drag and drop feature, and instant view of an added tile, which are very handy.

1 Like

Thanks @velvetfoot, @chrisbvt, @CAZ

With no coding experience, I'm not going down the dark unknown adventures CSS rabbit hole today (or possibly ever) :slight_smile: .

@velvetfoot: I think you are suggesting that its possible to create tiles that don't get effectively removed from the code when removed in the GUI and can perhaps cause problems but be cleaned up manually. If that's the case, I shall have to hope not to do so, but good to be aware of the signs - delete and start again will be the solution. It was somewhat dificult to place tiles with such a large dashboard, but so far the dash appears to be behaving. I see you created area/title tiles - I haven't figured that out yet but I don't think I need that right now given the limited space of a small phone screen. My no coding "master" dash relies on tweaking the grid gaps, font sizes and going back to edit all my device labels (transferring device info from label to name). It lacks a background visual cue for power draw and water running attributes but I can live with that :slight_smile: . It's a house of cards with elements (dimmer slider etc) simply hidden by the small tile size. I don't want to think about transitioning it to a new (involuntarily larger screen) phone in a few months! Maybe that's when I casually stroll into the Tile Builder rabbit hole :rofl:

Here's my final (for now) dash ... thanks again for all the help getting there most appreciated.

1 Like

If we can tempt you back to the CSS group, you might be interested in a "driver" I created to make some of the basics a little easier...

I haven't updated it in a long time, but would love to get back to it. It currently includes the ability to copy the adjustments made to one tile across multiple tiles, which I would love to expand to the point of doing the same across multiple dashboards and even the ability for people to share their creations for others to use.

ESIT - I'll just add that I don't see this as some alternative to something like Tile Builder, Gary does some awesome work and has spent a lot more time perfecting his creation, so I would definitely check it out

3 Likes

Those are text tiles. Choose text when creating tile.

Thanks, all!

Both Simple CSS Editor and the more advance Tile Builder look great. I will most likely poke around after the new phone transfer. I haven't even investigated (played with) Rule Machine yet! :rofl:

1 Like

image

Thanks! When I was first working on the dashboards, I didn't notice there were templates that aren't associated with devices :slight_smile:

1 Like