Criando card personalizado para lovelace com informações completas da lua via multiscrape!

Olá, Homeassistanters de todo o Brasil :vulcan_salute:

Neste tutorial apresento uma forma mais completa de saber as informações da lua do dia, não apenas o nome como em meu primeiro tutorial aqui no querido fórum, que nunca é demais lembrar: precisa de sua ajuda para permanecer ativo - faça sua contribuição.

card_lua_hoje

Sem mais delongas.
Do que vamos precisar?
Estou aberto a sugestões também, mas vou precisar que você já tenha configurado os dados do meu primeiro tutorial da Lua, segue aqui:

I - Caso já o tenha, então você deverá instalar os seguintes 4 cards do hacs, seguindo os passos conforme imagem abaixo:

card_paper_button_row_hacs
card_hui-element_hacs
card_stack_in_card_hacs
config_template_card_hacs

II - Ainda, você terá que criar as pastas de nomes FORMS e NASA dentro da pasta WWW do seu Homeassistant (atenção para a formatação - tudo minúsculo):
pasta_formspasta_nasa

dentro das pastas coloque os seguintes arquivos (para baixar - clique com o botão direito e vá em salvar imagem como… é necessário renomear tudo certinho os nomes das imagens, não consegui colocar para baixar normalmente):

seta_brancaseta_branca.png seta_branca_invertida seta_branca_invertida.png

Resultado pasta forms:

pasta_forms_arquivos

Baixe o gif desse link:

Resultado pasta nasa:
pasta_nasa_arquivos

III - Tirem as crianças da sala, está na hora do MULTISCRAPE!
Integração está que pode ser instalada via HACS na aba integrações, caso não a tenha.
multiscrape

a seguir, códigos que foram inseridos no arquivo multiscrape.yaml que criei, devendo ficar assim a configuração:
include_multiscrape

### INFOS DA LUA - MULTISCRAPE ###
   
# Sensores comentados com a #1 e #2 podem ser apagados, pois não seram usados.. foram usados apenas para coleta dos seus dados via 'value.split'
  - resource: https://www.calendarr.com/brasil/lua-hoje/
    scan_interval: 28800 #8h
    sensor:
      - unique_id: imagem_atual_lua
        name: Imagem Atual da Lua 
        icon: mdi:file-jpg-box
        select: 'div#desc-lua_hoje img' 
        attribute: 'src'
        #attributes: 
        #  - name: teste câmera
        #    select: '#desc-lua_hoje > div > div > div > img' - funciona para pegar a imagem tbm
        #    attribute: 'src'
        
      - unique_id: descricao_hoje_lua ####1
        name: Descrição da Lua Hoje
        icon: mdi:shield-moon-outline
        select: ".moon-desc"
        attributes:
          - name: Visibilidade da Lua
            select: ".moon-desc"
            value_template: '{{ value.split(" ")[5] }} e {{ value.split(" ")[9] | replace(".", " ")}}'
          - name: Dias_ate_prox_fase_lua
            select: ".moon-desc > p:nth-child(1) > strong:nth-child(2)"
          - name: Prox_fase_da_lua
            select: ".moon-desc > p:nth-child(1) > strong:nth-child(3)"

      - unique_id: infos_gerais_lua ####2
        name: Infos Gerais Lua
        icon: mdi:shield-moon-outline
        select: ".infos"
        attributes:
          - name: Lua-Terra
            select: ".infos"
            value_template: '{{ (value.split (" ")[5]) }}0 km'
            #unit_of_measurement: 'km'
          - name: Idade da Lua
            select: ".infos"
            value_template: '{{ (value.split(":")[2]) | replace("Próxima fase da Lua", " ") }}'
          - name: Fase anterior da Lua
            select: ".infos"
            value_template: '{{ (value.split(":")[4]) | replace("Visibilidade da Lua", " ") }}'
            
      - unique_id: visibilidade_lua
        name: Visibilidade da Lua
        icon: mdi:find-replace
        select: ".moon-desc"
        value_template: '{{ value.split(" ")[5] }} e {{ value.split(" ")[9] | replace(".", " ")}}'

      - unique_id: dias_restantes_prox_fase_lua
        name: Dias até próx. fase da Lua
        icon: mdi:counter
        select: ".moon-desc > p:nth-child(1) > strong:nth-child(2)"
        value_template: '{{ value.replace ("0 dias","hoje") }}'

      - unique_id: prox_fase_lua
        name: Próx. fase da Lua
        icon: mdi:crosshairs-question
        select: ".moon-desc > p:nth-child(1) > strong:nth-child(3)"

# cria sensor para ser usado como base para o sensor de s-luz
      - unique_id: distancia_lua_terra
        name: Distância Lua-Terra
        icon: mdi:theme-light-dark
        select: ".infos"
        value_template: '{{ (value.split (" ")[5]) | replace(".", "") | replace(",", "") }}8' #km
        
      - unique_id: distancia_lua_terra_km
        name: Distância Lua-Terra km
        icon: mdi:theme-light-dark
        select: ".infos"
        value_template: '{{ (value.split (" ")[5]) }} km'
        attributes: 
          - name: Segundos-luz
            value_template: ''
        #    value_template: "{{ states('sensor.distancia_lua_terra_segundos_luz') }}"
        #    atributa o sensor com a informação usada pela criação do sensor acima que será convertida em s-luz
        #    não consegui - erro no HA
        
      - unique_id: idade_lua
        name: Idade da Lua
        icon: mdi:weather-night
        select: ".infos"
        value_template: '{{ (value.split(":")[2]) | replace("Próxima fase da Lua", " ") }}'

      - unique_id: fase_anterior_lua
        name: Fase anterior da Lua
        icon: mdi:backburger
        select: ".infos"
        value_template: '{{ (value.split(":")[4]) | replace("Visibilidade da Lua", " ") }}'

Está achando que acabou? Relaxa, só faltam mais 3 passos:

IV - Vamos criar uma câmera do link da imagem que vamos captar com os sensores criados com ajuda do multiscrape para usar no nosso card, para isso temos que colocar as seguintes linhas no arquivo cameras.yaml que você pode criar aí, conforme já foi passado no passo anterior:

camera_config

### LUA HOJE ###
 - platform: generic
   name: Imagem Atual Lua
   still_image_url: "{{ states('sensor.imagem_atual_lua') }}"

V - Após isso, no arquivo sensors.yaml colocaremos as seguintes linhas de configuração:

### CONVERTE OS KM DA DISTÂNCIA DA LUA-TERRA PARA SEGUNDOS LUZ ###
  - platform: template
    sensors:
      distancia_lua_terra_segundos_luz:
        friendly_name: Lua-Terra segundos-luz
        value_template: '{{ (states("sensor.distancia_lua_terra")|float / 299792458|float) | round(2) }}'
        icon_template: mdi:map-marker-distance
        unit_of_measurement: 's-luz'

VI - Por fim, aqui está o card para você colocar no seu lovelace via modo manual:

cards:
  - columns: 3
    entities:
      - type: divider
    type: entities
  - type: custom:paper-buttons-row
    buttons:
      - entity: sensor.moon_phases
        layout: state
        style:
          name:
            font-size: 40px
          state:
            color: |-
              {% if is_state('sensor.moon_phases', 'Nova') %}  
                rgb(50, 100, 200)
              {% elif is_state('sensor.moon_phases', 'Crescente') %} 
                rgb(100, 100, 100)
              {% elif is_state('sensor.moon_phases', 'Quarto Crescente') %}
                rgb(100, 100, 200) 
              {% elif is_state('sensor.moon_phases', 'Crescente Gibosa') %} 
                rgb(100, 100, 300) 
              {% elif is_state('sensor.moon_phases', 'Cheia') %} 
                rgb(100, 200, 300) 
              {% elif is_state('sensor.moon_phases', 'Minguante Balsâmica') %}
                rgb(200, 200, 300) 
              {% elif is_state('sensor.moon_phases', 'Quarto Minguante') %}
                rgb(200, 300, 300) 
              {% elif is_state('sensor.moon_phases', 'Minguante') %}
                rgb(300, 300, 300) 
              {% else %}
                white
              {% endif %}
          icon:
            color: rgb(100, 300, 100)
        tap_action:
          action: url
          url_path: https://www.calendarr.com/brasil/lua-hoje/
  - elements:
      - type: custom:config-template-card
        entities:
          - camera.imagem_atual_lua
        card:
          type: custom:hui-image-element
          entity: camera.imagem_atual_lua
          image: /local/forms/seta_branca.png
        tap_action:
          action: more-info
        style:
          left: 70%
          top: 1%
          width: 5%
          opacity: 1
          transform: rotate(-180deg)
      - entity: sensor.fase_anterior_lua
        style:
          color: gray
          left: 75%
          top: 12%
          opacity: 1
          –ha-label-badge-font-size: 40px
        type: state-label
      - entity: sensor.dias_restantes_prox_fase_lua
        style:
          color: white
          left: 10%
          top: 10%
          opacity: 1
          –ha-label-badge-font-size: 40px
        type: state-label
      - type: custom:config-template-card
        entities:
          - camera.imagem_atual_lua
        card:
          type: custom:hui-image-element
          entity: camera.imagem_atual_lua
          image: /local/forms/seta_branca_invertida.png
        tap_action:
          action: more-info
        style:
          left: 19%
          top: 5%
          width: 5%
          opacity: 1
          transform: rotate(40deg)
      - entity: sensor.prox_fase_lua
        style:
          color: white
          left: 35%
          top: 10%
          opacity: 1
          –ha-label-badge-font-size: 40px
        type: state-label
      - entity: sensor.idade_lua
        style:
          color: white
          left: 21%
          top: 85%
          opacity: 1
          –ha-label-badge-font-size: 40px
        type: state-label
      - entity: sensor.visibilidade_lua
        style:
          color: white
          left: 21%
          top: 93%
          opacity: 1
          –ha-label-badge-font-size: 40px
        type: state-label
      - entity: sensor.distancia_lua_terra_km
        style:
          color: rgb(300, 300, 300)
          left: 43%
          top: 30%
          opacity: 1
          transform: rotate(-12deg)
          –ha-label-badge-font-size: 40px
        type: state-label
      - entity: sensor.distancia_lua_terra_segundos_luz
        style:
          color: rgb(300, 300, 300)
          left: 54%
          top: 39%
          opacity: 1
          transform: rotate(-12deg)
          –ha-label-badge-font-size: 40px
          tap_action:
            action: more-info
        type: state-label
      - type: custom:config-template-card
        entities:
          - camera.imagem_atual_lua
        card:
          type: custom:hui-image-element
          entity: camera.imagem_atual_lua
          image: ${states['sensor.imagem_atual_lua'].state}
        tap_action:
          action: url
          url_path: https://www.calendarr.com/brasil/lua-hoje/
        style:
          left: 21%
          top: 50%
          width: 40%
          opacity: 1
      - type: custom:config-template-card
        entities:
          - camera.imagem_atual_lua
        card:
          type: custom:hui-image-element
          entity: camera.imagem_atual_lua
          image: /local/nasa/earth_rotating_slowly.gif
        tap_action:
          action: more-info
        style:
          left: 90%
          top: 35%
          width: 25%
          opacity: 1
      - type: custom:config-template-card
        entities:
          - camera.imagem_atual_lua
        card:
          type: custom:hui-image-element
          entity: camera.imagem_atual_lua
          image: /local/forms/white_line.png
        tap_action:
          action: more-info
        style:
          left: 43%
          top: 39%
          width: 37%
          opacity: 1
          transform: rotate(-12deg)
    image: /local/nasa/light_speed.png
    type: picture-elements
type: custom:stack-in-card

________________________________________________________________

É isso pessoal, parabéns a você que chegou até aqui e implementou o card!
Grato :metal:

4 Likes

Muito bom! Toda Contribuição é bem vinda!

1 Like

Valeu… Isso aí
Tmj, man! :call_me_hand:

1 Like

Esse addon multscrape é muito bom!

1 Like

Sim, amigo Batista, tenho vários projetos com ele… Excelente.