Personalizar iconos en Home Assistant

Integrar Aguacatec en Home Assistant

Has oido bien, en esta entrada te explico cómo integrar Aguacatec en Home Assistant para tener control de todos tus beneficios!

¿Para qué sirve esta integración?

Como muchos sabéis Aguacatec existe gracias a nuestros Patreon, los miembros de nuestra comunidad que nos prestan su apoyo y a cambio obtienen ciertos privilegios. Esta integración sirve para monitorizar desde Home Assistant esos beneficios.

En concreto, expone:

  • Tu categoría (Aguacatec «Friend», «Lover» o «Hero»)
  • El tipo de suscripción que tienes (mensual o anual)
  • Tu saldo de Aguacoins
  • Tu saldo de sesiones «extra» de soporte individual y de tarjetas personalizadas
  • Números que se te han asignado para el próximo sorteo (si eres Aguacatec «Lover»)
  • Tu código para instalar nuestra aplicación HA Companion gratis en tu reloj Amazfit (si eres Aguacatec «Lover»)
  • Fecha del último sorteo celebrado, Nº premiado y ganador@ del último sorteo

Integración en Home Assistant

Para integrar Aguacatec en Home Assistant sigue estos pasos:

  1. Ve a HACS y pulsa sobre los 3 puntos de la esquina superior derecha.
  2. Haz clic en «Respositorios personalizados» y añade la siguiente dirección en el campo «Repositorio». Selecciona la opción «Integración» en el desplegable y pulsa en «Añadir».
  1. Introduce «Aguacatec» en el buscador y pulsa en «Descargar». Después reinicia HA.
  2. Ve a Configuración > Dispositivos y servicios > Añadir integración > Aguacatec. Introduce los siguientes datos en el asistente de configuración:
    • Id_aguacatec. Aquí tienes que introducir este código: 1SVb-N3UYs_6X7QXNhjD3EURrNsfRqr7YfEM1YmZls9Y.
    • User_telegram. Introduce aquí tu usuario de Telegram con el que te has unido a nuestro grupo privado, incluyendo la @ (por ejemplo, ‘@aguacatec’).
    • Pulsa en «Enviar».
  3. Comprobarás que se ha creado un nuevo bloque en tu panel de integraciones. Si accedes a él verás que se ha creado una entidad para cada uno de los sensores de información interesante sobre tu suscripción!

Tarjetas de Aguacatec

Por supuesto, no podían faltar algunas tarjetas personalizadas para desplegar la información que te ofrece integrar Aguacatec en Home Assistant. En este caso he usado Bubble Card, Card Mod y Mushroom Cards para crear las siguientes tarjetas (que puedes incluir o modificar como quieras).

  • Tarjeta de tu suscripción

Esta tarjeta recopila la información relevante de tu suscripción. Si pulsas en la parte izquierda de llevará a nuestra página de resolución de dudas para Patreon. A la derecha encontrarás tu saldo de aguacoins, sesiones extra de soporte y tarjetas personalizadas.

type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.categoria
show_state: true
show_name: true
show_last_changed: false
show_attribute: true
attribute: friendly_name
name: "@aguacatero"
styles: >
  ${card.querySelector('.bubble-state').innerText =
  hass.states['sensor.categoria'].state + ' (' +
  hass.states['sensor.suscripcion'].state + ')'}
sub_button:
  - entity: sensor.aguacoins
    state_background: false
    show_state: true
    show_name: false
    show_icon: true
    tap_action:
      action: url
      url_path: https://www.patreon.com/collection/779083?view=expanded
    show_background: false
  - entity: sensor.sesiones_extra
    state_background: false
    show_state: true
    show_name: false
    show_icon: true
    tap_action:
      action: url
      url_path: https://www.patreon.com/c/aguacatec/shop
    show_background: false
  - entity: sensor.tarjetas
    state_background: false
    show_state: true
    show_name: false
    show_icon: true
    tap_action:
      action: url
      url_path: https://www.patreon.com/c/aguacatec/shop
    show_background: false
tap_action:
  action: url
  url_path: https://aguacatec.es/hazte-patreon/
button_action:
  tap_action:
    action: url
    url_path: https://aguacatec.es/hazte-patreon/
card_mod:
  style: |
    .bubble-button-background {
      opacity: 1 !important;
      background: linear-gradient(to right bottom, rgba(124,141,32,1), rgba(32,141,104,1)) !important;
    }                    
    .bubble-icon {
      color: #7aa200 !important;
      opacity: 1 !important;
    }
    .bubble-icon-container {
      background: #eafa7d !important;
    }
  • Tarjeta de sorteos

Esta tarjeta te muestra toda la información del último sorteo, para que sepas al instante si has resultado ganador!

type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.sorteo_premiado
show_state: true
show_name: true
show_last_changed: false
show_attribute: true
attribute: friendly_name
name: ""
styles: >
  ${card.querySelector('.bubble-name').innerText =
  hass.states['sensor.sorteo_premiado'].state.replace("FALSE", "😅 No ha habido
  suerte...").replace("TRUE", "🎉 Has ganado!!")}
  ${card.querySelector('.bubble-state').innerText = 'Sorteo del ' +
  hass.states['sensor.fecha_ultimo_sorteo'].state }
sub_button:
  - entity: sensor.numero_premiado
    state_background: false
    show_state: true
    show_name: false
    show_icon: true
    tap_action:
      action: url
      url_path: https://www.juegosonce.es/resultados-cuponazo
    show_background: false
  - entity: sensor.numeros_sorteo
    state_background: false
    show_state: true
    show_name: false
    show_icon: true
    tap_action:
      action: none
    show_background: false
tap_action:
  action: url
  url_path: https://www.patreon.com/collection/779083?view=expanded
button_action:
  tap_action:
    action: url
    url_path: https://www.patreon.com/collection/779083?view=expanded
card_mod:
  style: |
    .bubble-button-background {
      opacity: 1 !important;
      background: linear-gradient(to right bottom, rgba(124,141,32,1), rgba(32,141,104,1)) !important;
    }                    
    .bubble-icon {
      color: #7aa200 !important;
      opacity: 1 !important;
    }
    .bubble-icon-container {
      background: #eafa7d !important;
    }
  • Tarjeta de eventos

Esta tarjeta te anuncia cuando es el próximo evento de Aguacatec, y requiere que estés suscrito a nuestro calendario y lo hayas integrado en HA.

type: custom:mushroom-template-card
primary: |-
  {% set evento = state_attr('calendar.aguacatec','message') | string %}
  {% if evento == "None" %}
  Sin eventos a la vista!
  {% else %}
  {{ evento }}
  {% endif %}
secondary: >-
  {% set evento = state_attr('calendar.aguacatec','message') | string %} {% if
  evento == "None" %} Disfruta de las vacaciones 😎 {% else %} {% set inicio =
  as_timestamp(state_attr('calendar.aguacatec','start_time'))|timestamp_custom
  ('%A %d de %b, a las %H:%Mh') |replace('Jan','Ene') |replace('Aug','Ago')
  |replace('Dec','Dic') |replace('Monday','Lunes') |replace('Tuesday','Martes')
  |replace('Wednesday','Miércoles') |replace('Thursday','Jueves')
  |replace('Friday','Viernes') |replace('Saturday','Sábado')
  |replace('Sunday','Domingo') %} El {{ inicio }} {% endif %}
icon: mdi:calendar
tap_action:
  action: url
  url_path: >-
    https://calendar.google.com/calendar/u/0?cid=NWRkMjliN2U0MDAzYjg1OTZlMjkyZTNkOTc3ZTdmZmE5MGEyYTE1MDYzZWY5YTkwZmM3ODQ1MjNkZTFhMGZiYUBncm91cC5jYWxlbmRhci5nb29nbGUuY29t
card_mod:
  style: |
    ha-card {
      background: linear-gradient(to right bottom, rgba(124,141,32,1), rgba(32,141,104,1)) !important;
      border-radius: 30px;
      --card-primary-font-size: 13px;
      --card-primary-font-weight: bold;
      --card-secondary-font-size: 11px;
      --card-secondary-color: rgba(255, 255, 255, 0.7);
      height: 50px!important;
    }
    ha-state-icon {
      color: #7aa200 !important;
    }
    mushroom-shape-icon {
      --shape-color: #eafa7d !important;
      --icon-size: 38px;
      --icon-symbol-size: 21px;
    }
    mushroom-state-item {
      margin-left: -3px;
    }