Custom card: Room Card

Anyone know if there is a way to change tap action from more-info to toggle for all/a large number of cards? I have tried to search and read the docs (Configuration · marcokreeft87/room-card Wiki · GitHub) but I have not sorted it out.

Including the following for all cards is a bit annoying :slight_smile:

        tap_action:
          action: toggle

Can you help me mod the main top-left icon (size & color, for instance)? Thanks in advance!

I’m having the same results and haven’t been able to figure it out yet. Is yours still doing the same thing?

Sure - we all can help :slight_smile: but first we need to know something about your code :slight_smile: put here and write what`s wrong and we will see:)
below my example with can be usefull for you:

Zrzut ekranu 2023-09-11 183506

  - type: custom:room-card
    title: Salon
    style: |
      .entities-info-row { padding: 10px; right: 10px; top: 50px}
      div {margin: -10px 0px 0px 0px; padding-top: 0px}
      .entities-row .entity { padding-top: 20px; margin-left: 0px}
      .entity { padding-top: 10px; margin-left: 0px}
      .card-header { font-size: 150%; padding-top: 20px}
    entity: group.salon
    icon: mdi:string-lights
    state_color: true
    show_icon: null
    tap_action:
      action: toggle
    entities:
      - entity: light.salon_1
        name: małe
        show_icon: true
        tap_action:
          action: toggle
      - entity: light.salon_2
        name: duże
        show_icon: true
        tap_action:
          action: toggle
      - entity: light.led_2_salon
        name: led
        show_icon: true
        state_color: true
        tap_action:
          action: toggle
    info_entities:
      - entity: switch.gniazdka_tv_salon
        show_icon: true
        state_color: true
        tap_action:
          action: toggle
      - entity: switch.gniazdka_salon
        show_icon: true
        icon: mdi:pine-tree
        state_color: true
        tap_action:
          action: toggle
      - entity: switch.gniazdka_strych
        show_icon: true
        state_color: true
        tap_action:
          action: toggle
        styles:
          width: 10px

Thanks, your example is just fine, I just want to make the “mdi:string-lights” icon bigger, is it possible with card-mod ‘style:’ ou with the ‘styles:’ from the card??

I am also interested in how you made the pop-up with entities. Would love to see your code.

Great card and I have completely migrated to this solution, way more simpler than other cards out there.
That said, I have an issue where the icon keeps taking the color of the LED it represents instead of the color (Orange) that I defined in the below lines of codes. Could anyone help? Many thanks.

  - entity: light.rgb_led_ambilight
    name: AMBIENT
    tap_action:
      action: toggle
    show_icon: true
    icon:
      conditions:
        - condition: equals
          value: 'on'
          styles:
            color: orange

Good day to you all, I’m trying to use the room card for some lights, and I’m having a problem where the icon color does not change when I toggle the switch. I have 3 lights in a room (basement office) 2 of them are aquara wall zigbee switches and one is a sonoff switch for a strip of LED lights. Also I use a template for all of them, is there a way to override the icon that is not what is on the template?image|490x142

Hello,

I do use room-card and I like it very much, learning everytime new things.

Now I am stuck a little bit.
I want to do a multiple-action on double-tab-action.
My code now is:

        double_tap_action:
          action: call-service
          service: setter.set
          service_data:
            entity_id: binary_sensor.raamsensor_kleine_kamer_boven_window_door_is_open
            state: 'on'
            attributes:
              device_class: door

which set a window sensor ‘on’ (of ‘off’ if wanted). But on that window I have 2 sensors (to detect half-open and fully open). So I want to be able to set both window-sensors at one double tab.
I tried some options that did not work:

    double_tap_action:
          - action: call-service
            service: setter.set
            service_data:
              entity_id: binary_sensor.raamsensor_kleine_kamer_boven_window_door_is_open
              state: 'on'
              attributes:
                device_class: door
          - action: call-service
            service: setter.set
            service_data:
              entity_id: binary_sensor.raamsensor_kleine_kamer_onder_window_door_is_open
              state: 'on'
              attributes:
                device_class: door

and

    double_tap_action:
          action: call-service
          service: setter.set
          service_data:
            - entity_id: binary_sensor.raamsensor_kleine_kamer_boven_window_door_is_open
              state: 'on'
              attributes:
                device_class: door
            - entity_id: binary_sensor.raamsensor_kleine_kamer_onder_window_door_is_open
              state: 'on'
              attributes:
                device_class: door

Is this possible and if yes, how should I do this?

I don’t think you can send two sets of service data in one service call. If this card doesn’t let you call the service twice, you would probably need to write a script that calls the service twice and then call that script from the card.

Hello,

Thanks for the reaction.
That would work, but than I have to make a script or automation for all (6) windows. In priciple no problem, but I want it as lean as possible, so if it could be done right from the room-card that would be nicer.
For now, I am going to work out the script option.

Hello,

The ‘damage’ is not that big. One extra entity and one extra automation do the job.

That‘s what I use to always have a yellow-orange …

It‘s in a template, as you can reuse it for every lamp in a room (but you need to set it again in another room!, margin 3px places them a little closer)

state_on for the icon does the job.

template:
  - name: icon_toggle_template
    template:
      styles:
        margin-right: 3px;
        margin-left: 3px;
      state_color: false
      show_icon: true
      tap_action:
        action: toggle
      icon:
        state_on:
          styles:
            color: '#ffcc00'
entities:
  - entity: light.artemide
    template: icon_toggle_template
  - entity: light.essen
    template: icon_toggle_template
1 Like

You can add a parameter for the windows and just call it with the correct one from the button.

Hi Team.

How can i make the info entities on multiple rows? I have three which show on the top row which look fine on tablet but on iPhone looks terrible.

Hello
 How did you manage your conditional colors on info_entities. I have been trying for hours and cant get it to work. I would really appreciate an example on how you did it.

Heloo
How to align the text (sensor state) in the next row so that it is under the icon (switch)?

rows:
  - entities:
      - entity: switch.gn03_ts011f_switch
        name: Salon TV
        show_name: false
        show_icon: true
        tap_action:
          action: toggle
        show_state: false
        icon:
          conditions:
            - condition: equals
              value: 'on'
              icon: mdi:television
              styles:
                color: red
            - condition: equals
              value: 'off'
              icon: mdi:television
              styles:
                color: rgba(175,175,175,1)
      - entity: light.osw_taras_wl
        name: Taras
        show_name: false
        icon: mdi:outdoor-lamp
        show_icon: true
        tap_action:
          action: toggle
  - entities:
      - entity: sensor.gn03_ts011f_active_power
        show_state: true
        show_icon: false
        name: Salon TV
        show_name: false
      - entity: sensor.gn03_ts011f_active_power
        show_state: true
        show_icon: false
        name: Salon TV
        show_name: false
        state-align: left

image

Ignore the following … now I recognized that you want to display the state of another entity below the icon, maybe you can try to use proper margings using style for those.

Why are there two entities sections?
The second one is causing the issue … it shows two times only the state of sensor.gn03_ts011f_active_power.

Remove the second entities entry and add

show_state: true

to the entities in the first section, then it should work.

That’s how I create the value dependent colors for humidity and temps. You need to keed the correct order of the >= statements from biggest to smallest value!

  - entity: sensor.az_hygro_humidity
    format: precision0
    styles:
      template: >
        if (entity.state < 40) return 'color: orange'; if (entity.state >=
        70) return 'color: red'; if (entity.state >= 55) return 'color:
        orange'; if (entity.state >= 40) return 'color: green';
  - entity: sensor.az_hygro_temperature
    format: precision1
    styles:
      template: >
        if (entity.state < 20) return 'color: blue'; if (entity.state >= 24)
        return 'color: red'; if (entity.state >= 22) return 'color: orange';
        if (entity.state >= 20) return 'color: green';

1 Like

Does anyone have localized entity states? Still struggling here … entity names are german, but all states are english (on/off insteade ein/aus etc.).
All other cards I use (vertical_stack_in_cards, entity card) don’t have this issues, so it is definitely an issue with this card.