Combine two entities

[Milster]

Hi. I am very new to Lovelace and custom cards, so if I can’t get a full solution could someone please help by pointing me to any existing docs on how to achieve below.
I basically want to have a single row entity that has a sensor on the left as the image and the switch to another entity on the right. They don’t need to interact with each other - this is just a graphical/layout issue.

In my pic below is my garage door sensor is the top row. That image changes to an open door when the sensor is activated. The next row is my switch. btw. I won’t need the sensor state text.

Any tips please?

[myle (StePhan McKillen (Other kiwi Here))]

Show us what u have done so far

[Milster]

Hi. How do you mean? Like I said I am a mega-newb. I haven’t got a clue how to combine elements. But know it must be possible… I’m not trying to be lazy by asking for advice. Just a poke in the right direction would be good.

[emilp333]

I believe you want to create a cover entity out of several different entities. It is possible by using the template cover component. Check out the docs.

Template Cover

[Milster]

Thank you. I couldn’t work out how to implement a Template Cover to create what I want, so I am now slowly trying to design a custom card. Very slowly.

Am I right in assuming that you can’t reference an existing entity in it’s entirety in my design? ie. For example, as for my existing sensor - I can’t just reference it and the whole design drops into my new card?

Everything you see on a custom card needs to be very individually coded?

I’ve read this doc…
https://developers.home-assistant.io/docs/en/lovelace_custom_card.html
But find it a bit limited in its explaination and examples. Does anyone know any thorough resources on building custom cards please?

Thanks!

[emilp333]

Ok. The Template covor will give you one row where you can display the icon based on a sensor state. So the garage could be open based on your sensor and vice versa. It will also give you the up, down and stop button to the right.
If you dont want the arrows and just the switch like in your above example then use the template switch component.

Template Switch

[Milster]

Thanks so much for persisting with me!
As background, I am using a Belkin Wemo Maker to control the garage door. It works as a momentary switch and also has a built-in sensor component that can be read as an attribute of the switch.

This is what I came up with - does it look OK to you?
(NB. taken from my switches.yaml file, so fix your mapping if you are adding this to configuration.yaml)

- platform: template
  switches:
      mygarage:
        friendly_name: "Garage Door"
        value_template: "{{ is_state_attr('switch.garage_door','sensor_state','on') }}"
        turn_on:
          service: switch.turn_on
          data:
            entity_id: switch.garage_door
        turn_off:
          service: switch.turn_on
          data:
            entity_id: switch.garage_door
        entity_picture_template: >-
          {% if is_state_attr('switch.garage_door','sensor_state','on') %}
            /local/images/garage-open.png
          {%-elif is_state_attr('switch.garage_door','sensor_state','off') %}         
            /local/images/garage-closed.png
          {% else %}
            /local/images/alert-icon.png
          {% endif %}

[Milster]

Fully tested and works great. Thank you @emilp333. Thank you very much!

[emilp333]

Glad I could help!