Custom card: Room Card

C.G.B.Spender · October 17, 2022, 7:40am

Hi,
really happy with the card, made my ui a lot compact and cleaner especially on phone. I noticed a thing happening on Android, not sure if warranted to open an issue (might be my phone or Android and not your code etc).

Let’s say I have HA app open on android phone with 3 cards visible, where card 2 is room card and other two cards are not.

If I put my finger anywhere on cards 1 or 3 (even on an entity) and drag up or down immediately, the action is interpreted as drag and scrolls the ui, however if I touch room card 2 on an entity and immediately drag, the action will be interpreted as touch and will trigger the tap_action of the entity.

Any way to work around this apart from conditioning myself to scroll via the empty edges?

marcokreeft87 · October 17, 2022, 7:50am

I’m afraid not. This is just a shortcoming of the app or maybe even smart phones.
You could change the tap_action to hold action but thats annoying when you try to switch on an entity. But even than, if you scroll with your finger on an icon, it will switch on.

But maybe someone here knows a way to “fix” this?

klidberg · October 18, 2022, 1:27pm

Absolutely. Sorry for late reply.

type: custom:room-card
title: Livingroom
entity: light.all_lights
icon: mdi:lightbulb-group
tap_action:
  action: toggle
entities:
  - entity: light.entrance
    name: Entrance
    icon: mdi:car
    tap_action:
      action: toggle
  - entity: light.tz3000_txpirhfq_ts0011_d0d50a49_on_off
    name: Table
    tap_action:
      action: toggle
  - entity: light.tz3000_txpirhfq_ts0011_bfbed81a_on_off
    name: Ceiling
    tap_action:
      action: toggle
  - entity: light.living_room_tv_lights
    icon: mdi:led-strip-variant
    name: TV Led
    tap_action:
      action: toggle
  - entity: light.dinnner_table_lamp
    name: Lamp
    tap_action:
      action: toggle
  - entity: light.yeelight_sofa_lamp
    name: Sofa
    tap_action:
      action: toggle
  - entity: binary_sensor.klidberg
    name: XBOX
    icon: mdi:microsoft-xbox
cards:
  - type: custom:mini-media-player
    entity: media_player.samsung_living_room_tv
    info: scroll
    artwork: material
    show_states:
      - playing
info_entities:
  - entity: binary_sensor.lumi_lumi_sensor_motion_aq2_iaszone
    show_icon: true
  - entity: binary_sensor.entrance_door
    show_icon: true
    icon:
      state_on: mdi:door-sliding-open
      state_off: mdi:door-sliding-lock
  - entity: binary_sensor.lumi_lumi_sensor_magnet_aq2_36fce207_on_off
    show_icon: true
    icon:
      state_on: mdi:door
      state_off: mdi:door-closed-lock

Let me know if you need any help.

raub21 · October 18, 2022, 6:00pm

@klidberg . Thank you again for sharing your code and for your taking time to post it.

JavierM · October 23, 2022, 3:25pm

Hi, nice card.I’ve tried to change the Icon Size in the entities bar, any idea? I don’t find the right CSS item, neither with card-mod. Where can I find an example?

Thank you in advance!

marcokreeft87 · October 23, 2022, 7:00pm

Easiest way is using icon conditions

C.G.B.Spender · October 28, 2022, 8:20pm

Hi,
is there any way to apply hide_if: on the entity in the title? I’d like to hide the 3 zzz in upper left when the pc is off:

Many thanks again, your card brought me so much closer to how I want the dashboard to look than anything else I tried!

marcokreeft87 · October 28, 2022, 10:54pm

Uhm maybe with icon conditions. Leave one condition an empty string? Don’t know if that would work but you can try it

C.G.B.Spender · October 29, 2022, 7:56am

That did it!

    icon:
      template:
        icon: >
          if (entity.state = 1) return 'mdi:sleep';  
          else return ' ';

the blank space is still clickable, but that’s just minor quibble at this point. Thanks!

marcokreeft87 · October 29, 2022, 9:24pm

And if you pass tap_action none?

C.G.B.Spender · October 29, 2022, 9:34pm

Even then, the whole title from the left where the icon is / would be to the first info_entity remains clickable.

Is templating supported for tap_action? I was thinking something like:

    tap_action:
      template:
        tap_action: |
          if (entity.state = 1) return 'more-info';   else return 'none';

edit: or did I misunderstand what you meant?, I thought you mean pass none instead of ’ ’ for the icon.

marcokreeft87 · October 30, 2022, 7:34am

O yeah wait. Never mind haha. It was late.
No templating isn’t supported in actions

C.G.B.Spender · October 30, 2022, 3:34pm

Hi, sorry it’s me again

I made this to change icon color for the vacuum according to what it’s doing and it’s working great, i.e. immediately changes when state of the entity changes:

          - entity: vacuum.robovac
            name: Vacuum
            show_icon: true
            state_color: true
            tap_action:
              action: more-info
            show_state: false
            icon:
              conditions:
                - condition: equals
                  entity: vacuum.robovac
                  attribute: status
                  value: docked
                  styles:
                    color: orange
                - condition: equals
                  entity: vacuum.robovac
                  attribute: status
                  value: cleaning
                  styles:
                    color: green
                - condition: equals
                  entity: vacuum.robovac
                  attribute: status
                  value: returning
                  styles:
                    color: purple

Trying to apply the same concept on my kodi button based on state of media_player entity only works after dashboard reload:

          - entity: script.turboviglen_kodi
            name: Kodi
            tap_action:
              action: toggle
            show_icon: true
            icon:
              conditions:
                - condition: equals
                  entity: media_player.kodi
                  value: idle
                  styles:
                    color: darkgrey
                - condition: equals
                  entity: media_player.kodi
                  value: playing
                  styles:
                    color: green
                - condition: equals
                  entity: media_player.kodi
                  value: paused
                  styles:
                    color: orange
                - condition: equals
                  entity: media_player.kodi
                  value: buffering
                  styles:
                    color: purple

At this point I’m not sure if I’m just missing something obvious again or just plain inept.

for reference:
full working card: PrivateBin
full not working card: PrivateBin

marcokreeft87 · October 30, 2022, 7:49pm

Hmm could be that it doesn’t work with script entities. Let me check tomorrow. But sometimes single quotes around the values help. So ‘paused’ in stead of paused

C.G.B.Spender · October 30, 2022, 8:03pm

I had the quotes there originally but they get stripped when saving so I presume teh HA’s parser knows what it’s doing.

marcokreeft87 · October 30, 2022, 9:06pm

True, I will try to reproduce tomorrow

C.G.B.Spender · October 30, 2022, 9:19pm

I think it’s related to the script entities as you mentioned, although it seems not in the info_entities: block, in the following the volume buttons hide correctly, the media buttons after reload.

    rows:
      - entities:
          - entity: script.turbojeba_play_pause
            name: Play/Pause
            show_name: false
            tap_action:
              action: toggle
          - entity: script.turbojeba_next
            name: Next
            show_name: false
            tap_action:
              action: toggle
        content_alignment: center
        hide_if:
          conditions:
            - condition: equals
              entity: input_boolean.helper_turbojeba_media_room_card
              value: 'off'
    info_entities:
      - entity: script.turbojeba_vol_down
        name: Vol-
        icon: mdi:volume-minus
        show_icon: true
        tap_action:
          action: toggle
        hide_if:
          conditions:
            - condition: equals
              entity: switch.turbojeba_power
              value: 'off'
      - entity: script.turbojeba_vol_up
        name: Vol+
        icon: mdi:volume-plus
        show_icon: true
        tap_action:
          action: toggle
        hide_if:
          conditions:
            - condition: equals
              entity: switch.turbojeba_power
              value: 'off'

marcokreeft87 · October 31, 2022, 7:03am

Seems like it yeah. One other thing, my mediaplayer doesn’t have a state ‘paused’ or ‘buffering’ so I cant test that states for you.

Ontopic: The card uses the states that hass gives it. So maybe the scripts entities work in another way? But are you trying to control a mediaplayer? If so, why not use the mini-mediaplayer card?

C.G.B.Spender · October 31, 2022, 7:26am

I already have mini-media-players for 3 pcs in there that show/hide depending on which one I play something, but the button I try to color just launches Kodi. Since many other entities I have on dashboard turn yellow when on, I was working on those that don’t like the vacuum or the Kodi button.

I could probably make a input_boolean helper that would copy the state of kodi (on unrelated note I have several entities like this and they drive my imagined ocd up the wall as yellow ain’t the same as the yellow in default ha theme and I can’t find the value for that one), but I really liked the vacuum icon turning different colors on different states so wanted to copy that.

The script entities work differently, they’re always on and get triggered (sort of as automations I think?). The reason I use so many scripts where I could use button or input_boolean is when I change device or switch integrations, the old device goes poof from all and every automation and dashboard yaml, and god help you if you forgot what was where. So I use scripts, that “press” the buttons on the devices, and if the device goes poof, I just replace it in the script and my dashboard remains intact. Hope that makes sense.

marcokreeft87 · October 31, 2022, 7:44am

Oh you are right. The scripts are always on. Thats why it doesnt trigger a change in the color. But this is sort of a bug in the room card than.