Criando card personalizado para Dashboard 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.

image

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 que estão a seguir (para baixar sobre a imagem e vá em salvar imagem como… não consegui colocar para baixar normalmente as imagens seta_branca.png e seta_branca_invertida.png, mas o link para baixar aparece clicando sobre a imagem):

light_speed.png:

seta_branca.png (clique sobre ela):

seta_branca_invertida.png (clique sobre ela):

white_line.png:

Resultado pasta forms:

pasta_forms_arquivos

Baixe também esse gif da Terra nesse link abaixo:

IMG BB:
gif da terra:

GOOGLE DRIVE:
gif e imagens:
https://drive.google.com/drive/folders/1PQmyNa3j5v1oFh9up0UzjolwyI3YyfD0?usp=sharing

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: "{{ states('sensor.distancia_lua_terra_segundos_luz') }}"
            #segundo testes, o valor acima aparecerá após a próxima atualização do scan interval
        
      - 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 seguir o novo passo a passo atualizado pelo HA de criação de câmera genérica (acesse o atalho clicando aqui para abrir a aba da imagem abaixo rapidamente):

image

Cole a linha abaixo conforme na imagem; após, role para baixo e MARQUE a opção HTTP debaixo de onde está escrito RTSP transport protocol.
Além disso, DESMARQUE a opção VERIFY SSL CERTIFICATE lá embaixo e dê o OK para sua câmera da imagem da lua ser criada:

{{ states('sensor.imagem_atual_lua') }}

image

Feito isso, será criada a câmera, mas estará com um nome nada amigável, por isso é necessário que mude o nome da entidade que acabamos de criar. Para isso, procure pela câmera genérica criada nas integrações e clique sobre ela, depois sobre “1 entidade (com cor em azul)” e renomeie o Entity ID para camera.imagem_atual_lua, conforme pode ser visto nas imagens abaixo:

imageimage

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(0) / 299792458|float(0)) | 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 dashboard via modo manual:

cards:
  - 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: conditional
    conditions:
      - entity: sensor.moon_phases
        state: Minguante Balsâmica
    card:
      type: markdown
      content: '***Fase intermediária entre a lua cheia e o quarto minguante.***'
  - type: conditional
    conditions:
      - entity: sensor.moon_phases
        state: Crescente Gibosa
    card:
      type: markdown
      content: '***Fase intermediária entre quarto-crescente e lua cheia.***'
type: custom:stack-in-card

________________________________________________________________

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

5 curtidas

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

1 curtida

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

1 curtida

Esse addon multscrape é muito bom!

1 curtida

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

1 curtida

Tem uns arquivos q não estão disponíveis para download. … seta_preta.png, earth.png, earth_observatory_explorer.png, earth_observatory_explorer_brazil.png. .inclusive no drive…tem como ajudar

1 curtida

na hora de criar a camera generica não aceita essa linha que vc postou {{ states(‘sensor.imagem_atual_lua’) }}

1 curtida

Ahh, sim, Elton… Esses ali não precisam mesmo… é de um outro projeto que fiz aqui e acabei colocando na mesma pasta as imagens heh

Realmente isso é algo novo… Verifiquei aqui e descobri que agora tem que marcar uma daquelas opções lá na parte de RTSP transport protocol… eu marquei o HTTP e criou… valeu, vou atualizar aqui com essa informação!