Custom card: Room Card

Not yet, but I will add the possibility to the todo list

1 Like

Below code is using a template for the coloring of the icons, however I can not overrule the icon name as specified in the template. Both washer and dryer now show up as a dryer-icon. If I leave out the icon name option in the template it reverts back to the standard plug icon.
I know the workaround is to customise the icon for the plug so it might work if I leave out the icon in the template.
But maybe itā€™s possible to overrule this behaviour if an icon is given in the entities section as I did in the code below?

type: custom:room-card
title: HVAC template
templates:
  - name: nonzero
    template:
      show_state: true
      show_icon: true
      icon:
        template:
          styles: >
            if (entity.state > 0) return 'color:
            var(--paper-item-icon-active-color)';
          icon: |
            return 'mdi:tumble-dryer';
      format: precision1
entities:
  - entity: sensor.plug_washmachine_power
    template: nonzero
    name: washer
    icon: mdi:washing-machine
  - entity: sensor.plug_dryer_power
    template: nonzero
    name: dryer
info_entities:
  - entity: sensor.climate_hvac_temperature
    format: precision1
  - entity: sensor.climate_hvac_humidity
    format: precision0

One other question / request; can the templates be used in the raw-editor so they can be applied to different room cards?

This is something the custom:button-card does to great effect.

Hi,

Is there any chance that there will be the possibility to controll another device with tap_action?
I mean, now I have an input boolean for my fireplace which turns on when the power of the power socket is greater than 1W, but I want to be able to switch the power socket when tap on fireplace indicator (without an automation).

@tothak
Can you not call a service as the action?
This allows to set another entity, refer post 196 for instance.

Thanks! Just what i needed.

1 Like

Yes, or just put the switch of the power socket in the card with a fireplace icon?

If you leave the icon out of the template and only set the color in the template it should work. You will have to set the icon for each entity than

Unfortunately sharing templates between cards isnā€™t an option. Maybe if you put the string value of the template in an template entity?

That worked like a charm :slight_smile:
Thank you!

Regards,
tothak

1 Like

Hi Marco,

Excellent card! Very much appreciating your working on thisā€¦ Thanks!
If youā€™re looking at (center) alignment within rows, could you also add the option to align some entities to the right? This would enable a visual seperation between left and right entities (for instance lights on the left and open door \ motion \ other on the right).

Thanks!

Hmm that would be a hard thing to do and keep the old way working but maybe it can be done. Letā€™s see

Anyone else having issues with hide_if since in the past versions?

Now my entities are always visible, ignoring the hide_if.

I donā€™t know exactly when this started, certainly no lore thatā€™s a few days ago.

Iā€™m using iOS (same issue with both an iPhone and an iPad).

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:room-card
    title: Balcony
    entity: light.balcony_all_lights
    info_entities:
      - entity: binary_sensor.balcony_door
        show_icon: true
        icon:
          conditions:
            - icon: mdi:door-open
              condition: equals
              attribute: state
              value: 'on'
              styles:
                color: red
        hide_if:
          value: 'off'
      - entity: sensor.balcony_total_power
    show_icon: true
    tap_action:
      action: toggle
    double_tap_action:
      action: more-info

The format for hide_if changed at some point. You need to use something like this:

hide_if:
  conditions:
    - condition: equals
      value: 'off'
2 Likes

Thanks a lot! That fixed the issue.

I will have to review the docs as I believe the conditions for icons colors probably changed as well, right? I think that is broken too.

Yup. Those changed in a similar way.

    icon:
      conditions:
        - condition: below
          value: 30
          styles:
            color: var(--state-icon-error-color)

I love this @pkscout @EdwardTFN you guys helping each other :slight_smile:

2 Likes

I have room temperature as an info entity, how might I set the tap option to show a thermostat card please?

Hi Marco,

Would it not be possible to add a new ā€œright_entitiesā€ (like info_entities), to be placed in a new <div> with right justification? This would not break existing configs.
Equally, for center justification, you could add a ā€œcenter_entitiesā€ with a <div> that centers all items.

<div class="entities" justify-content="left"><div class="center_entities" justify-content="center"><div class="right_entities" justify-content="right">

For users, if they want to change where\how the items are displayed, it would mean just changing the name of the ā€œentitiesā€ item in the config andā€¦ presto!

But then again, my knowledge of html\css is limited and I may be thinking of this in much too simple termsā€¦
Hope you can find a way though!! Thanks for your efforts and a great card!

You can set the tap_action to toggle on the info entity. And add the thermostat card to the room card

type: custom:room-card
title: Mancave
entity: light.mancave_lampen
entities:
  - entity: climate.radiator_mancave
    name: Radiator
    tap_action:
        action: toggle

cards:
  - type: custom:simple-thermostat
    entity: climate.radiator_mancave
    show_states:
      - heat
    name: Radiator
    title: Mancave

Like this

1 Like