Tarjeta TV

Tarjeta de Smart TV

Dale un toque práctico y personalizado a tu panel de control en Home Assistant con esta tarjeta de Smart TV.

Tarjeta TV

A continuación te dejo el código completo del ejemplo de la tarjeta de Smart TV de la imagen superior, pero sobre todo te recomiendo que leas la entrada completa para crear tu propia tarjeta de Smart TV.

type: custom:stack-in-card
card_mod:
  style: |
    ha-card {
      {% if states('input_boolean.bombilla_salon') == "on" %}{% set image = "noche_on" %}
      {% elif states('light.led_tv') == "on" %}{% set image = "cine" %}
      {% else %}
        {% if states('sun.sun') == "below_horizon" %}{% set image = "noche" %}
        {% else %}{% set image = "dia" %}
        {% endif %}
      {% endif %}
      background: url('/local/avatar/salon_{{ image }}.jpg');
      background-position: -2px;
      background-size: cover;
      height: 200px;
    }
cards:
  - type: conditional
    conditions:
      - entity: media_player.android_tv
        state: 'off'
      - entity: input_boolean.wii
        state: 'off'
    card:
      type: custom:swipe-card
      cards:
        - type: custom:mushroom-chips-card
          alignment: center
          card_mod:
            style: |
              ha-card {
                --primary-text-color: #ffffff;
                margin-top: 40px;
                margin-bottom: 30px;
              }
          chips:
            - type: template
              icon: mdi:chevron-double-left
              icon_color: grey
              card_mod:
                style: |
                  ha-card {
                    background-color: transparent !important;
                    --chip-icon-size: 30px;
                    --chip-font-size: 19px;
                    padding: 8px;
                    --chip-box-shadow: 0px;
                  }
        - type: custom:mushroom-chips-card
          alignment: center
          card_mod:
            style: |
              ha-card {
                --primary-text-color: #ffffff;
                margin-top: 40px;
                margin-bottom: 30px;
              }
          chips:
            - type: template
              icon: mdi:google-assistant
              icon_color: white
              content: Google TV
              card_mod:
                style: |
                  ha-card {
                    background-color: #222222 !important;
                    --chip-icon-size: 30px;
                    --chip-font-size: 19px;
                    padding: 8px;
                  }
              tap_action:
                action: call-service
                service: androidtv.adb_command
                data:
                  command: POWER
                target:
                  entity_id: media_player.android_tv
        - type: custom:mushroom-chips-card
          alignment: center
          card_mod:
            style: |
              ha-card {
                --primary-text-color: #000000;
                margin-top: 40px;
                margin-bottom: 30px;
              }
          chips:
            - type: template
              icon: mdi:youtube
              icon_color: red
              content: YouTube
              card_mod:
                style: |
                  ha-card {
                    background-color: white !important;
                    --chip-icon-size: 30px;
                    --chip-font-size: 19px;
                    padding: 8px;
                  }
              tap_action:
                action: call-service
                service: media_player.select_source
                data:
                  source: com.google.android.youtube.tv
                target:
                  entity_id: media_player.android_tv
        - type: custom:mushroom-chips-card
          alignment: center
          card_mod:
            style: |
              ha-card {
                --primary-text-color: #2196f3;
                margin-top: 40px;
                margin-bottom: 30px;
              }
          chips:
            - type: template
              icon: mdi:gamepad-variant
              icon_color: blue
              content: Wii
              tap_action:
                action: toggle
              entity: switch.bot_565a
              card_mod:
                style: |
                  ha-card {
                    background-color: white !important;
                    --chip-icon-size: 30px;
                    --chip-font-size: 19px;
                    padding: 8px;
                  }
        - type: custom:mushroom-chips-card
          alignment: center
          card_mod:
            style: |
              ha-card {
                --primary-text-color: #1ed760;
                margin-top: 40px;
                margin-bottom: 30px;
              }
          chips:
            - type: template
              icon: mdi:spotify
              icon_color: green
              content: Spotify
              card_mod:
                style: |
                  ha-card {
                    background-color: #222222 !important;
                    --chip-icon-size: 30px;
                    --chip-font-size: 19px;
                    padding: 8px;
                  }
              tap_action:
                action: call-service
                service: media_player.select_source
                data:
                  source: com.spotify.tv.android
                target:
                  entity_id: media_player.android_tv
  - type: conditional
    conditions:
      - entity: media_player.android_tv
        state_not: 'off'
      - entity: input_boolean.wii
        state: 'off'
    card:
      type: custom:stack-in-card
      card_mod:
        style: |
          ha-card {
            background: transparent;
            box-shadow: none;
          }
      cards:
        - type: custom:mushroom-template-card
          card_mod:
            style: |
              ha-card {
                background: url('{{ states('sensor.imagen_tv') }}')!important;
                background-size: cover!important;
                opacity: 0.8;
                margin-top: 12px!important;
                margin-left: auto;
                margin-right: auto;
                width: 193px!important;
                height: 108px!important;
              } 
  - type: conditional
    conditions:
      - entity: input_boolean.wii
        state: 'on'
    card:
      type: custom:stack-in-card
      card_mod:
        style: |
          ha-card {
            background: transparent;
            box-shadow: none;
          }
      cards:
        - type: picture
          image: /local/wiigame.gif
          card_mod:
            style: |
              ha-card {
                opacity: 0.7;
                margin-top: 12px!important;
                margin-left: auto;
                margin-right: auto;
                width: 193px!important;
              } 
        - type: custom:mushroom-chips-card
          alignment: center
          card_mod:
            style: |
              ha-card {
                margin-top: -65px;
                --primary-text-color: #000000;
              }
          chips:
            - type: template
              icon: mdi:power
              icon_color: blue
              content: >
                Tiempo de juego: {% set gaming_time =
                states('sensor.tiempo_de_juego_wii') | float %} {% if
                (gaming_time|int) > 0 %}
                  {{ gaming_time|int }}h
                {% endif %} {{ ((gaming_time - (gaming_time|int))*60)|int }}'
              tap_action:
                action: call-service
                service: switch.turn_off
                target:
                  entity_id: switch.wii
              card_mod:
                style: |
                  ha-card {
                    background-color: white !important;
                    --color: #f0f176;
                    height: 30px!important;
                  }
  - type: custom:mushroom-chips-card
    alignment: center
    card_mod:
      style: |
        ha-card {
          margin-top: 40px;
        }
    chips:
      - type: template
        icon: mdi:thermometer
        content: |
          {{ states('sensor.habitacion_1_temperatura') | int }} ºC
        tap_action:
          action: none
        card_mod:
          style: |
            ha-card {
              background-color: black !important;
              --color: #f0f176;
              height: 30px!important;
            }
      - type: template
        entity: light.bombilla_salon
        icon: mdi:floor-lamp
        content: Noche
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              background-color: black !important;
              --color: #f0f176;
              height: 30px!important;
            }
      - type: template
        entity: light.led_tv
        icon: mdi:led-strip-variant
        content: Cine
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              background-color: black !important;
              --color: #f0f176;
              height: 30px!important;
            }
      - type: template
        entity: light.led_tv
        icon: mdi:power
        tap_action:
          action: call-service
          service: remote.send_command
          target:
            entity_id: remote.broadlink
          data:
            num_repeats: 1
            delay_secs: 0.4
            hold_secs: 0
            device: Television
            command: power
        card_mod:
          style: |
            ha-card {
              background-color: black !important;
              --color: #f0f176;
              height: 30px!important;
            }

Requisitos previos

Para poder crear una tarjeta de Smart TV como esta necesitas lo siguiente:

Creación del fondo

En la entrada de tarjetas de ocupación os hablé en profundidad de esta técnica, por lo que esta vez pasaré de forma más superficial. Básicamente consiste en crear una imagen con inteligencia artificial lo más parecida posible a tu salón. En mi caso he utilizado Bing Image Creator y el siguiente ‘prompt’:

Salón con smart tv vista de frente, desde la parte trasera de un sofá verde pálido, estilo comic, 2d

Luego la he modificado con Photoshop para crear los distintos efectos de oscuridad y luz. Finalmente, he creado un fondo dinámico con templates. Para ello he tenido en cuenta si es de día o de noche (con la integración oficial ‘sun’) y el estado de las luces del salón.

Las bombillas zigbee me lo pusieron un poco dificil al principio, ya que aparecían como encendidas cuando las apagaba quitándoles la corriente con el interruptor de pared. Afortunadamente al final encontré cómo mostrar el estado real de las bombillas zigbee.

Con todo ello he conseguido que la imagen muestre mi salón en estilo comic, y adapte la imagen en función de la iluminación del momento. Como te decía, si te interesa esta técnica te recomiendo que te leas la entrada sobre tarjetas de ocupación.

Por último he incluido dentro de esta misma tarjeta unos Mushroom Chips modificando un poco el estilo con la temperatura del salón, así como unos botones para activar las escenas más recurrentes y para encender o apagar la televisión con infrarrojos (a través del Broadlink).

Contenido de la televisión

La gracia de esta tarjeta, además de mostrar tu salón tal y como lo estás viendo, es que en la televisión aparezca el contenido de la pantalla y los accesos directos. Esto no es nada nuevo que no puedas hacer ya con tarjetas como la Mini Media Player. Simplemente es una forma original y personalizada de controlar tu Smart TV.

El contenido de la pantalla no es más que una tarjeta superpuesta sobre la tarjeta del apartado anterior, que contiene la imagen del fondo del salón. Para ser más preciso, son distintas tarjetas condicionales, que se mostrarán o no en función del contenido que estés consumiendo.

Accesos directos

Como te puedes imaginar, los accesos directos aparecen cuando todos los dispositivos que aparecen en pantalla están apagados (en mi caso, el Google Chromecast con Google TV y la Wii).

Yo he incluido las aplicaciones que más utilizo y para ello hago uso de dos tipos de servicios diferentes. En primer lugar ,como parto de la base de que la televisión está apagada, primero tengo que encenderla. Puesto que el Chromecast está conectado al puerto HDMI CEC de la Smart TV, basta con lanzarle el comando ‘power’ de la siguiente forma:

service: androidtv.adb_command
data:
  command: POWER
target:
  entity_id: media_player.TU-ANDROID-TV

Si tu televisión no se enciende automáticamente con este comando, siempre puedes recurrir a un controlador de infrarrojos como Broadlink.

Una vez que la televisión ya está encendida, tienes que indicarle qué aplicación quieres que inicie. Esto lo vamos a hacer a través del servicio ‘media_player.select_source’, indicando el código correspondiente a la aplicación. Por ejemplo, este es el código para lanzar Youtube.

service: media_player.select_source
data:
  source: com.google.android.youtube.tv
target:
  entity_id: media_player.TU-ANDROID-TV

Puedes encontrar el código correspondiente a la aplicación que estás buscando de distintas formas. Una muy sencilla es buscar la aplicación en Play Store (asegúrate que es la versión para Android TV) y fijarte en el texto que figura justo después de ‘https://play.google.com/store/apps/details?id=‘ y antes del ‘&’. Por ejemplo, el id de la aplicación de YouTube TV es com.google.android.youtube.tv. Puedes hacer la prueba desde Herramientas para desarrolladores > Servicios.

Por otro lado, te abrás dado cuenta de que pulsando un sólo botón hay que llamar a dos servicios diferentes. Esta lista puede incrementarse si además quieres que se encienda el ambilight cuando lances Netflix, o se enciendan los altavoces cuando lances Spotify. Para ello tienes que crear previamente un script donde incluyas todas las acciones, y llamar a este script desde el botón.

O mejor aún, si ya eres un usuario avanzado, crea una automatización con distintos ‘trigger id’ para agrupar todas las acciones del salón o de la televisión en una sola automatización.

Respecto a cómo lanzar y controlar la Wii (o cualquier consola o dispositivo que no puedas integrar en Home Assistant), hay una entrada dedicada a su integración virtual que puedes visitar si te interesa.

Imagen de Android TV

Cuando tu Android TV esté encendida la imagen de la tarjeta coincidirá con el contenido de la pantalla. Esto podemos hacerlo gracias a que uno de los atributos de las entidades ‘media_player.android_tv’ es ‘entity_picture’. Es decir, la misma entidad nos proporciona la imagen.

Puedes comprobarlo desde Herramientas para desarrolladores > Estados, y buscando tu Android TV mientras está encendida. Si copias todo el texto que figura en el atributo ‘entity_picture’, y lo pegas a continuación de ‘http://homeassistant.local:8123/’ verás que en tu navegador aparece la imagen correspondiente a la televisión. Sabiendo esto, sólo tenemos que utilizar este atributo para indicar la imagen que queremos que aparezca como fondo en la tarjeta.

No obstante, este atributo tiene algunas limitaciones. La primera es que la imagen se refresca cada ciertos segundos, por lo que la imagen no es en tiempo real. Puesto que lo utilizamos como aspecto decorativo, esto no me parece una limitación importante.

Por otro lado, hay casos en los que no muestra ninguna imagen, como cuando hay un video de Youtube o una película en reproducción (supongo que por tratarse de contenido protegido). En estos casos vamos a mostrar una imagen alternativa creada por nosotros mismos, para que no aparezca vacía. Para ello vamos a crear el sensor ‘sensor.imagen_tv’ pegando el siguiente código en el fichero ‘sensors.yaml’.

- platform: template
  sensors:
    imagen_tv:
      friendly_name: "Imagen TV"
      value_template: >
        {% set imagen = state_attr('media_player.TU-ANDROID-TV','entity_picture') %}
        {% if states.media_player.TU-ANDROID-TV.attributes.entity_picture is defined %}
          {% if imagen == "PEGA-AQUI-EL-VALOR-DEL-ATRIBUTO-ENTITY-PICTURE-CUANDO-REPRODUCES-UN-VIDEO-DE-YOUTUBE" %}
            /local/youtube.jpeg
          {% else %}
            {{ imagen }}
          {% endif %}
        {% else %}
          /local/palomitas.jpeg
        {% endif %}
      icon_template: mdi:television-classic

En el código anterior tienes que hacer algunos cambios:

  • Reemplazar la entidad de tu Smart TV donde indica «TU-ANDROID-TV».
  • Cuando reproducimos un video en Youtube no se muestra ninguna imagen en pantalla, aunque si asigna un valor al atributo ‘entity_picture’ que siempre es el mismo. Es algo así como una «pantalla negra». Por este motivo incluimos una condición para que si el valor del atributo ‘entity_picture’ es el correspondiente a la «pantalla negra», muestre la imagen ‘youtube.jpeg’. Para identificar cual es el valor en tu Smart TV, enciéndela y reproduce un video en Youtube. Mientras está en reproducción, acude a Herramientas para desarrolladores > Estados y busca tu Android TV para copiar el valor del atributo ‘entity_picture’.
  • Cuando reproducimos una película o serie en alguna plataforma de streaming, el atributo ‘entity_picture’ no toma ningún valor. En este caso mostraremos la imagen ‘palomitas.jpeg’.
  • Puedes crear las imágenes que quieras mostrar y ponerles el nombre que prefieras, reemplazándolo en el código anterior. No olvides subirlas en la carpeta ‘config/www’ de Home Assistant (para ello te recomiendo que utilices el complemento Samba Share).

Imagen de otros dispositivos

Como te comentaba también tengo integrada la Wii y quiero mostrarlo en la tarjeta, aunque la técnica también es válida para cualquier otro dispositivo. La idea es que, como no transmite una imagen a Home Assistant, le asignaremos una imagen fija cuando esté en uso. En mi caso he incluido un gif de una partida en marcha del Super Mario.

Además en este caso he aprovechado la pantalla para mostrar el tiempo de juego de la consola y utilizarlo como botón si quiero apagar la consola.

Dependiendo de la consola o el dispositivo que tengas, la información y los comandos que quieras mostrar puedes personalizar el contenido de la pantalla.

wii
🥑 Por cierto, si quieres aprender a diseñar tus propias tarjetas, te recomiendo que veas los talleres de la academia sobre cómo crear tarjetas personalizadas y templates, son gratis!

¿Dudas?¿necesitas ayuda? entra aquí
Y si te ha gustado, compártelo! 🙂
Contenido exclusivo de Aguacatec
Send this to a friend