Configure Style/Icon by Attribute Value

[josh]

We’re excited to announce the next SharpTools.io release which brings with it Style / Icon State Mapping for Custom Attributes.

This release closes the following popular feature request:

Style/Icon State Mapping for Custom Attributes

This release builds upon the existing state mapping feature, but opens up the ability to define custom states for the following tiles:

• Hero Attribute Tile
• Number Variable Tile
• Text Variable Tile

Hero Attribute Tile

For the Hero Attribute tile, this feature replaces the ‘Active Color Attribute’ setting. Any existing active/default styles on your Hero Attribute tiles will automatically transition to state mappings when you edit the tile. Additionally, you can now pick which icon to show for each state rather than being confined to a single static icon.

Make sure to exactly match the values that the device reports. You may find it helpful to reference the SmartThings Capability Documentation or Hubitat Capability Documentation.

For custom device drivers / handlers, it may be helpful to either review the device source code or to watch the attribute values as they change in the device details screen for your hub.

Note that attribute values are typically all lowercase

Variable Tiles

For the Number and Text Variable tiles, this opens up the ability to set custom styles and icons based on the value of the variable. Like the Hero Attribute tile, if you had a Default Style set on the Numeric or Text Variable tiles, it will automatically transition to state mappings when you edit the tile. Additionally, you now have the ability to display an icon based on the value of your variable.

We’ve had a few requests for the ability to display variables with various visual states and this enables that functionality!

One of the examples we’ve heard several times is the ability to aggregate data from devices into a variable, then use that to create a tile that displays the aggregated status (and optionally acts like a dashboard navigation tile). While this was possible for True/False variables before, this enables the same concept for multiple states in Number or Text variables!

There were some minor changes to the structure of the tiles in order to support icons, so if you have Custom CSS targeting these tiles, you may need to update it accordingly.

By request, we’re also now including the name of the variable in the Tile Editor to make it easier to know which variable you’re working on:

[tagyoureit]

Hi team, this is great!
I have two existing temperature tiles which change color based upon the different values. One was for my pool and the other was for the spa. The only problem was that the color would be showing as the valid temp even if the pool/spa wasn’t on.

Now, I’ve created a set of rules for each where the first one is “state == off” and the color is gray and the rest are my traditional temperature rules!

This just solved a problem I haven’t thought about for a long time.

Kudos!

I do have one question… In this thread it sounds like this feature would allow a Hero tile to not have text. I have these two tiles (existing on the right is the Shade tile; left is the Hero layout). I want to have different colors/icons for open/opening/closed/closing/etc. But not sure how to just have the icon. Is that possible with this feature?

[Chris_C]

@tagyoureit

I do have one question… In this thread it sounds like this feature would allow a Hero tile to not have text. I have these two tiles (existing on the right is the Shade tile; left is the Hero layout). I want to have different colors/icons for open/opening/closed/closing/etc. But not sure how to just have the icon. Is that possible with this feature?

There was a css snippet posted in another thread that might help

Hide variable value on tile - only show icon

You can try using CSS. I think it would be .tile .value {display: none; } or if you have a theme set for that specific tile .tile.--theme-style-*style name* .value {display: none; } You can also check the wiki https://community.sharptools.io/t/wiki-list-of-working-css-code-verified-on-sharptools/4902?u=terri

[Nir_Avniel]

Hi,
Great feature, I also consider adding this to AC, for example, I have sensibo and I would love to see the option of changing the tile style color when the state of my AC is ON, currently, the the tile layout is Standard Thermostat

[kampto]

Maybe Im missing something simple, but how to I add a style like we used to without having to assign a state? In Tile editor when I click on “Style” the only option is “Style States”, no more just “Style”.

[kampto]

Any thought on this? The Hero tile work around is to make a single state and give it some ridiculous number that it will never be like; temperature != 99999, and assign a style.

[josh]

That’s the approach I would take – use a state that acts like a catch-all.

For example, when the Hero Attribute tiles are converted from their ‘active color’ legacy configuration, they usually map one state for ‘active’ and the other as a catch all for default (using the inverse comparison):

For other values, I usually map a single state that I know shouldn’t match my use case (like != '' or >= 0). If I’m worried about the potential for that unique scenario where a value isn’t covered, I personally usually just create a state to call my attention to it (eg. red) or have two states that cover everything (eg. != '' and == '')