#Dynamic tile card options

1 messages · Page 1 of 1 (latest)

plucky jungle
#

The Mushroom Tile card (IIRC) does not accept templates. If it did, it would makes things easier. Here's some options for you to consider. - TWO conditional cards, one for locked state and one for unlocked.

type: custom:state-switch
entity: template
template: "{% if is_state('input_boolean.tester', 'on') %} unlocked {% else %} locked {% endif %}"
states:
  unlocked:
    type: custom:mushroom-title-card
    title: Rooms                              🔓
    title_tap_action:
      action: call-service
      service: script.lock_main_door
      target: {}
  locked:
    type: custom:mushroom-title-card
    title: Rooms                              🔒
    title_tap_action:
      action: call-service
      service: script.unlock_main_door
      target: {}```EDIT: Corrected script names.
- Use the Mushroom Template Card instead but style it to look like the Title Card. This will probably require card_mod to do.
- In an unorthodox approach, you could use the [custom:button-card](<https://github.com/custom-cards/button-card>) and style it to look like the Mushroom Title Card. The styling approach could be a bit easier than using card_mod for the Template Card because custom:button-card has its own styling capabilities. This card also has better layout capabilities so you could define an actual icon region and not have to rely on 30 spaces to get the icon aligned where you want it.
This is the state-switch example:
20240526-1439.gif
#

Here's an example of styling the custom:button-card to look like a Mushroom Light Card. It's not 100% but pretty close. Top is Mushroom, bottom is custom:button-card.

image.png
vivid girder
plucky jungle
#

In it's current form, I'm going to say no because technically the lock isn't an icon; it's just part of the title's text. Using the custom:stack-in-card might do what you want. It will basically take two cards and make them look like one. Here, I've used a Mushroom Title card (acting strictly as the title) and then a custom:button-card that presents the icon and supports the appropriate action. ```yaml
type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
--ha-card-background: none;
border: none
}
cards:

  • type: custom:mushroom-title-card
    title: Rooms
  • type: custom:button-card
    entity: input_boolean.tester
    show_icon: false
    name: |
    [[[ if (entity.state == 'on') return '🔓'; else return '🔒' ]]]
    styles:
    card:
    - height: 50px
    - margin: 10px
    name:
    - font-size: 25px
    tap_action:
    action: call-service
    service: |
    [[[ if (entity.state == 'on') return 'script.lock_main_door'; else return 'script.unlock_main_door' ]]]
    target: {}```In the screenshot, the top is the card from earlier; the bottom is the newest version.
20240526-1605.gif
#

You could also do the same thing with just a custom:button-card by adding custom_field for the lock icon. Setting the "Title" card to no actions would prevent it from being clickable. It would be another button kind of like the code above and the title will be its own card. It would be a little bit more involved to set up but could give added "options/features".
The custom:button-card also has a lock option that requires the button to be held for a couple of seconds before it can be clicked. That could add an extra layer of protection from accidentally unlocking the door.

vivid girder
#

Interesting, I will dig into that, thanks man!

vivid girder
vivid girder
plucky jungle
#

I've never noticed it before but it does not show up in the UI. Select Manual and just type it in.

image.png
# 
type: custom:stack-in-card
mode: horizontal
cards:
  - type: button
    entity: light.living_room_lights
  - type: button
    entity: light.living_room_lights```
image.png
vivid girder