Picture Elements Card – Home Assistant

Muitas pessoas questionam como colocar a “fotinho” no HA mostrando a bateria, localização, etc.

Sempre que alguém me questiona, passo a página card “ Picture Elements ” do Home Assistant, porém vejo que muitos ainda sim tem dificuldade em aplicar esse card. Através disso resolvemos então criar esse artigo para mostrar não só como criar a “fotinho”, mas como utilizar esse card para outras coisas.

O Picture Elements é nativo do HA, ou seja, você não precisa instalar nada, basta utilizar. Uma dica é, se você não utiliza o modo Lovelace, sugiro ver o artigo Lovelace YAML mode , para prosseguir nesse artigo. Você pode utilizar no modo interface, mas eu sempre recomendo utilizar o modo lovelace, por vários motivos a qual já foram explicados no artigo Lovelace YAML mode.

Para iniciar, vamos escolher uma imagem para colocar em seu HA. Você pode utilizar qualquer imagem, basta jogar para seu HA e recomendamos que fique dentro da pasta www e que seja de um tamanho 233 x 233px. Abaixo segue algumas imagens de exemplo, você pode utilizar uma ou duas.

avatar picture element -male avatar picture elements female

Após salvar as imagens de sua preferência e colocar no seu HA, vamos a configuração.

Exemplo 1:

  cards:
    - type: picture-elements
      image: /local/avatar.png <em>#Aqui você pode verificar que foi adicionado local. Local refere-se a página "www", ou seja, você não coloca www no código, e sim local.</em>
      elements:
        <em>#abaixo da tag elements, você adiciona a lista de elementos que você quer que apareça em "sobre" a imagem/foto.</em>
        
        # ITEM 1 - o primeiro elemento é a sua localização, por isso vamos colocar o device_tracker.
        - entity: device_tracker.nome_do_device
          style:
            color: white <em>#Cor da letra que irá aparecer sobre a foto.</em>
            font-size: 1.4em <em>#Tamanho da fonte/letra</em>
            left: 25% <em>#Aqui você define a posição horizontal de onde deve aparecer a informação. 25% da esquerda da imagem.</em>
            top: 90% <em>#Aqui você define a posição vertical de onde deve aparecer a informação. 90% do topo da imagem.</em>
          type: state-label
        
        # ITEM 2 - % da Bateria
        - entity: sensor.bateria
          style:
            color: white
            left: 83%
            top: 87%
          type: state-label

Você perceber, as informações nas tags “left” e “top”, é onde definem a posição da informação (elementos) sobre a imagem. Veja a imagem a abaixo, como foi posicionada o elemento “device_tracker” que foi configurado com left: 25% e top: 90% para entender.

avatar explicação

Quer ver outro exemplo diferente? Agora adicionando a segunda imagem? Vamos lá, segue o exemplo:

Exemplo 2:

Que tipo de informação posso colocar sobre a imagem?
Qualquer tipo de informação que você tenha em seu HA. Mostramos aqui a bateria e a localização. Mas você pode colocar a velocidade da sua internet, a temperatura da casa, ou da sua cidade, a quantidade e-mails que você tem, a quantidade de postagem que você tem a receber, etc. Claro, desde que você tenha essas informações configuradas em seu HA.

cards:

  - type: horizontal-stack
    cards:

      - type: picture-elements
        image: /local/avatar.png
        elements:
          
          # ITEM 1
          - entity: sensor.status_localizacao_douglas
            style:
              color: white
              font-size: 1.4em 
              left: 20% 
              top: 90% 
            type: state-label
            
          # ITEM 2 (icone + sensor)
          - type: icon
            icon: mdi:cellphone-iphone
            style:
              left: 6%
              top: 15% 
                          
          - entity: sensor.douglas_bateria
            style:
              color: black
              left: 18%
              top: 15% 
            type: state-label
            
          # ITEM 3 (icone + sensor)
          - type: icon
            icon: mdi:thermometer
            style:
              left: 6%
              top: 30% 
                          
          - entity: sensor.temperatura
            style:
              color: black
              left: 18%
              top: 30% 
            type: state-label                

      - type: picture-elements
        image: /local/avatar_female.png 
        elements:
          
          # ITEM 1 
          - entity: sensor.status_localizacao_luana
            style:
              color: white 
              font-size: 1.4em
              left: 20%
              top: 90%
            type: state-label
            
          # ITEM 2 (icone + sensor)
          - type: icon
            icon: mdi:cellphone-iphone
            style:
              left: 94%
              top: 15% 
                                        
          - entity: sensor.luana_bateria
            style:
              color: black
              left: 82%
              top: 15% 
            type: state-label

Nesse exemplo o resultado deve ser algo semelhante a imagem abaixo:
avatares

Como podem perceber, dessa vez foi adicionado um terceiro item, que foi a temperatura. Como informado acima, pode colocar qualquer dispositivo, sensor, etc. Basta configurar sua posição com “top” e “left”.

Vamos agora para outro modelo, um modelo de casa que mostra várias informações sobre a imagem.

Exemplo 3:

cards:

  - type: horizontal-stack
    cards:

      - type: picture-elements
        image: /local/casa.jpg
        elements:   

          # Temperatura
          - type: icon
            icon: mdi:thermometer
            style:
              left: 3%
              top: 10% 
                          
          - entity: sensor.temperatura
            style:
              color: black
              left: 8%
              top: 10% 
            type: state-label             

          # Luz 1
          - entity: light.yeelight
            tap_action:
              action: toggle
            style:
              left: 50%
              top: 40% 
            type: state-icon <em>#aqui foi alterado o tipo de state-label para state-icon, para mostrar o estado do ícone e não do nome.</em>   

          # Luz 2
          - entity: light.yeelight
            tap_action:
              action: toggle
            style:
              left: 80%
              top: 60% 
            type: state-icon  

          # Porta
          - entity: binary_sensor.door_window_sensor
            icon: mdi:door
            style:
              left: 57%
              top: 60% 
            type: state-icon  

Como deve ficar o resultado?

casa

Foi colocado a temperatura, duas lâmpadas e mais o sensor de porta. Eu poderia colocar o sensor de janela, a informação do clima (nublado, ensolarado), a hora e o dia atual. As informações e opções são diversas.

E não para por aqui. Ainda pode ser configurado outras opções como:

  • Ao invés de colocar uma imagem, pode colocar uma câmera;
  • Pode colocar condições para mostrar uma imagem ou outra, baseado no estado de outro dispositivo. Exemplo, se eu estiver em casa, mostra a minha foto colorida. Se eu estiver fora, mostra a minha foto preto e branco.
  • É possível que ao clicar em um ícone, executar uma ação, como um script ou uma automação, através do “action: call-service”;

Vídeo
Para quem quiser acompanhar um vídeo mostrando a configuração:

Caso você queira entender mais sobre as outras opções, recomendamos que acesse a página do card no site do Home Assistant:

Dúvidas deixe seu comentário ou acesse nosso telegram.

1 Curtida

Olá, parabéns a todos pelo fórum, e parabéns pelos posts @douglas, muito bom, fiz seus tutoriais e consegui fazer bastante coisa. Porém, nessa parte do picture-entity, não aparece os sensores oferecidos pelo life360, além do device_tracker…, que funciona muito bem.
Estou usando a versão " Home Assistant 0.101.2", já pegou algum problema assim?

Abraços

Leandro, se você refere aos sensores de carregando e percentual da bateria, são atributos do life, conforme a imagem abaixo:
image

São atributos, e para tornar eles sensores individuais, é preciso configurar esses sensores dentro de sensor:

Exemplo:

- platform: template
  sensors:

    #Douglas - Status Inglês
    bateria_douglas_status:
      value_template:  '{{ states.device_tracker.life360_douglas.attributes.battery_charging }}'
      device_class: battery

    #Douglas - Nível da Bateria
    bateria_douglas:
      friendly_name: Bateria Douglas
      unit_of_measurement: '%'
      value_template: '{{ states.device_tracker.life360_douglas.attributes.battery|int }}'
      device_class: battery

Com essas modificações, serão criado dois novos sensores (sensor.bateria_douglas_status e sensor.bateria_douglas) e com isso você pode utilizar eles dentro do lovelace.

Se não é isso, então eu não entendi direito.

Lembrando que o código acima é um sensor. Então tem que ficar dentro de sensor.yaml ou dentro da tag sensor:

Fala @douglas, é essa a dúvida mesma. No caso depois que eu crio o sensor no arquivo configurartion.yaml, ele não deveria aparecer na lista de dispositivos, lá em:
Ferramentas do desenvolvedor/Estado ?

Está assim o sensor no arquivo configuration.yaml

sensor:
  - platform: template
    sensors:
      status_localizacao_cancs:
        friendly_name: "Localização Cancs"
        value_template: >-
           {% if is_state('device_tracker.life360_leandro_cardacci', 'driving') %}
             Dirigindo
           {% elif is_state('device_tracker.life360_leandro_cardacci', 'moving') %}
             Andando
           {% elif states.device_tracker.life360_leandro_cardacci.attributes.place == none %}
             Ausente
           {% else %}
             {{ state_attr('device_tracker.life360_leandro_cardacci', 'place') }}
           {% endif %}
        entity_id: device_tracker.life360_leandro_cardacci

      bateria_cancs:
        friendly_name: Bateria do Cancs
        unit_of_measurement: '%'
        value_template: '{{ states.device_tracker.life360_leandro_cardacci.attributes.battery|int }}'  

E assim no arquivo ui-lovelace.yaml

Leandro, quando postar parte do código, selecione e pressione o ícone </> para formatar e ficar melhor de entender.

Quanto a sua dúvida, é isso mesmo. Você precisa reiniciar seu HA para criar os novos sensores.

Seu device_tracker.life360_leandro_cardacci tem exatamente esse nome?

Fala Douglas, sim esse é o nome do meu device.
Uma dúvida esses sensores que eu crio, deveria aparecer na guia estado, ou não?
Segue uma imagem, para maior entendimento de onde eu acredito que deveria aparecer os sensores criados.

Fala Douglas! Eu recomecei do zero toda a parte de sensores e agora deu certo a parte de exibir a porcentagem da bateria no card, valeu pela ajuda, abaixo o código alterado

 - platform: template
   sensors:
     status_localizacao_cancs:
     friendly_name: "Localização Cancs"
     value_template: >-
       {% if is_state('device_tracker.life360_leandro_cardacci', 'driving') %}
         Dirigindo
       {% elif is_state('device_tracker.life360_leandro_cardacci', 'moving') %}
         Andando
       {% elif states.device_tracker.life360_leandro_cardacci.attributes.place == none %}
         Ausente
       {% else %}
         {{ state_attr('device_tracker.life360_leandro_cardacci', 'place') }}
       {% endif %}
    entity_id: device_tracker.life360_leandro_cardacci
  


sensors: 
  leandro_bateria:
    friendly_name: Bateria leandro
    value_template: "{{ state_attr('device_tracker.life360_leandro_cardacci', 'battery') }}"
    unit_of_measurement: '%'
    device_class: battery   

Abraços

1 Curtida

Fala Douglas, eu de novo! mais uma dúvida, como vc adiciona mais de um sensor? No caso estou tentando adicionar o percentual de bateria de outro celulares, porém, quando coloco o sensor do outro celular, ele sobrescreve o sensor que estava antes que era o meu, segue o código

- platform: template
sensors:
  status_localizacao_cancs:
    friendly_name: "Localização Cancs"
    value_template: >-
       {% if is_state('device_tracker.life360_leandro_cardacci', 'driving') %}
         Dirigindo
       {% elif is_state('device_tracker.life360_leandro_cardacci', 'moving') %}
         Andando
       {% elif states.device_tracker.life360_leandro_cardacci.attributes.place == none %}
         Ausente
       {% else %}
         {{ state_attr('device_tracker.life360_leandro_cardacci', 'place') }}
       {% endif %}
    entity_id: device_tracker.life360_leandro_cardacci

sensors: 
  leandro_bateria:
    friendly_name: Bateria leandro
    value_template: "{{ state_attr('device_tracker.life360_leandro_cardacci', 'battery') }}"
    unit_of_measurement: '%'
    device_class: battery    
    


sensors:
  status_localizacao_vera:
    friendly_name: "Localização Verinha"
    value_template: >-
       {% if is_state('device_tracker.life360_vera_lucia_costa', 'driving') %}
         Dirigindo
       {% elif is_state('device_tracker.life360_vera_lucia_costa', 'moving') %}
         Andando
       {% elif states.device_tracker.life360_vera_lucia_costa.attributes.place == none %}
         Ausente
       {% else %}
         {{ state_attr('device_tracker.life360_vera_lucia_costa', 'place') }}
       {% endif %}
    entity_id: device_tracker.life360_vera_lucia_costa    



sensors: 
  vera_bateria:
    friendly_name: Bateria Verinha
    value_template: "{{ state_attr('device_tracker.life360_vera_lucia_costa', 'battery') }}"
    unit_of_measurement: '%'
    device_class: battery

Só deixa um sensor: no código acima.

1 Curtida

Consegui, o dia inteiro pra isso funcionar, haja!

Segue o código corrigido

#  Nível da bateria do Cancs Cel S7 Edge    
  • platform: template
    sensors:
    status_localizacao_cancs:
    friendly_name: “Localização Cancs”
    value_template: >-
    {% if is_state(‘device_tracker.life360_leandro_cardacci’, ‘driving’) %}
    Dirigindo
    {% elif is_state(‘device_tracker.life360_leandro_cardacci’, ‘moving’) %}
    Andando
    {% elif states.device_tracker.life360_leandro_cardacci.attributes.place == none %}
    Ausente
    {% else %}
    {{ state_attr(‘device_tracker.life360_leandro_cardacci’, ‘place’) }}
    {% endif %}
    entity_id: device_tracker.life360_leandro_cardacci

    sensors:
    leandro_bateria:
    friendly_name: Bateria leandro
    value_template: “{{ state_attr(‘device_tracker.life360_leandro_cardacci’, ‘battery’) }}”
    unit_of_measurement: ‘%’
    device_class: battery

Nível da bateria do A5 Cel

  • platform: template
    sensors:
    status_localizacao_vera:
    friendly_name: “Localização Verinha”
    value_template: >-
    {% if is_state(‘device_tracker.life360_vera_lucia_costa’, ‘driving’) %}
    Dirigindo
    {% elif is_state(‘device_tracker.life360_vera_lucia_costa’, ‘moving’) %}
    Andando
    {% elif states.device_tracker.life360_vera_lucia_costa.attributes.place == none %}
    Ausente
    {% else %}
    {{ state_attr(‘device_tracker.life360_vera_lucia_costa’, ‘place’) }}
    {% endif %}
    entity_id: device_tracker.life360_vera_lucia_costa

    sensors:
    vera_bateria:
    friendly_name: Bateria Verinha
    value_template: “{{ state_attr(‘device_tracker.life360_vera_lucia_costa’, ‘battery’) }}”
    unit_of_measurement: ‘%’
    device_class: battery

Rapaziada, boa tarde.
Estou tentando inserir uma imagem com a planta baixa da minha casa, porem gostaria de dimensionar a imagem um pouco maior na tela, pois ela fica com o tamanho de uma card normal.
Alguem saberia me orientar?

Abs