A continuación voy a compartiros con vosotros Button Card instalación y ejemplos en el que he realizado el análisis de esta fantástica extensión que podemos adquirir desde HACS.

Es verdaderamente sorprendente el potencial que tiene esta integración para dotar a nuestros Home Assistant de nuevas funcionalidad, sobre todo estética, aunque también funcionalidades muy, muy interesantes para la personalización de nuestras pantallas.

En primer lugar, si vas por aquí ya has leído que necesitas instalar HACS, Pues aquí tienes el enlace a la publicación en la que te enseñó cómo hacerlo. Y en el momento en el que lo hayas hecho, puedes continuar con el vídeo que tienes aquí debajo.

Instalar HACS

Como os he indicado repetidas veces en el vídeo, es necesario que accedáis a la documentación de El autor y podáis profundizar mucho más en todas las posibilidades que os ofrece esta extensión. Aquí os dejo el enlace para que accedáis a la documentación y podáis aprender muchísimo

https://github.com/custom-cards/button-card

Como os dije en el vídeo, aquí os iba a dejar el código fuente del botón.
Cualquier duda que podáis tener podéis dejarla en los comentarios

type: custom:button-card
entity: sensor.lavadora_energy_power
icon: mdi:washing-machine
aspect_ratio: 1/1
name: Lavadora
tap_action:
  action: navigate
  navigation_path: /lovelace-movil/lavadora/
styles:
  card:
    - border-radius: 10%
    - padding: 10%
    - color: ivory
    - font-size: 13px
    - text-shadow: 0px 0px 5px black
    - text-transform: capitalize
  grid:
    - grid-template-areas: '"i KWH" "n n" "hoy hoy" "func func" "aviso aviso"'
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 1fr min-content min-content min-content min-content
  name:
    - font-weight: bold
    - font-size: 10pt
    - color: white
    - align-self: middle
    - justify-self: start
    - padding-bottom: 4px
  img_cell:
    - justify-content: start
    - align-items: start
    - margin: none
  icon:
    - color: |
        [[[
          if (entity.state < 60) return 'lime';
          if (entity.state >= 60 && entity.state < 80) return 'orange';
          else return 'red';
        ]]]
    - width: 90%
    - margin-top: 0%
  custom_fields:
    KWH:
      - font-size: 10pt
      - align-self: start
      - justify-self: end
    hoy:
      - padding-bottom: 2px
      - align-self: middle
      - justify-self: start
      - '--text-color-sensor': >-
          [[[ if (states["sensor.lavadora_energy_today"].state > 80) return
          "red"; ]]]
    func:
      - padding-bottom: 2px
      - align-self: middle
      - justify-self: start
      - '--text-color-sensor': '[[[ if (states["sensor.lavadora_inicio"].state > 80) return "red"; ]]]'
    aviso:
      - align-self: middle
      - justify-self: start
      - '--text-color-sensor': >-
          [[[ if (states["sensor.lavadora_energy_power"].state > 80) return
          "red"; ]]]
custom_fields:
  KWH: |
    [[[
      return `
        ${entity.state}KWh`
    ]]]
  hoy: |
    [[[
      return `
         HOY : ${states['sensor.lavadora_energy_today'].state}Kwh`
    ]]]
  func: |
    [[[
      return `
         funcionando: ${states['sensor.lavadora_inicio'].state}`
     ]]]
  aviso: |
    [[[
      return `
         Avisador: ${states['input_boolean.avisar_fin_lavadora'].state}`
    ]]]

Sin otro interés, espero que se haya parecido súper interesante esta publicación y os espero en más vídeos y artículos de vuestro interés.

Por Juan Antonio

Creador y Administrador de isytec.net. Como amante de las tecnologías que soy, disfruto conociéndolas, probándolas y lo que más me gusta es contaros mi opinión por si os ayuda en algo. Espero que disfrutéis tanto de isytec.net como yo. :)

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.