Hoy vamos a ver cómo domotizar tu lista de la compra para que puedas alimentarla de una forma sencilla e incluir algunas automatizaciones.
Esta guía es una reedición de la versión original para domotizar tu lista de la compra, en la que se han introducido los siguientes cambios:
- Funciona plenamente con la integración oficial de Home Assitant, facilitando la instalación y mejorando el rendimiento.
- Rediseño de las tarjetas del panel de control, mejorando la funcionalidad y dando una apariencia similar a la aplicación de Bring!
- Eliminadas las dependencias de otras integraciones, mejorando el funcionamiento y simplificando la instalación.
- Añadidas nuevas funcionalidades como notificaciones, sugerencia de productos, las recetas de ingredientes o las tarjetas de afiliación.
- Más fácil de instalar mediante la importación del blueprint.Índice
Requisitos previos
Antes de domotizar tu lista de la compra, debes revisar que cumples los siguientes requisitos:
- Habilitar el acceso a Home Assistant desde el exterior, para poder acceder a tu lista de la compra desde fuera de casa y utilizar las notificaciones por geolocalización.
- Instalar a través de HACS las tarjetas Mushroom Cards, Card Mod, Stack in Card y Auto Entities.
- Crear el fichero ‘command_line.yaml‘ dentro de la carpeta ‘config’, y añadirlo a la configuración incluyendo las siguientes líneas en tu fichero configuration.yaml:
command_line: !include command_line.yaml
- Importar y configurar el blueprint que encontrarás al final de esta guía. Para que funcione correctamente debes seguir la nomenclatura de los ejemplos. De lo contrario tendrás que adaptar el código manualmente.
Integración de la Lista de la compra
Para domotizar tu lista de la compra vamos a utilizar la integración oficial de HA, por lo que el proceso es muy sencillo. Simplemente sigue estos pasos:
- Antes de nada, si ya estabas utilizando otra integración no oficial (como la de Bring!), elimínala desde Ajustes > Dispositivos y servicios. Asegúrate también de eliminar la carpeta ‘shopping_list’ de la ruta ‘config/custom_components’ y reinicia Home Assistant.
- Ve a a Ajustes > Dispositivos y Servicios > Añadir integración, busca “Lista de la compra” y pulsa en “Enviar”.
- Ahora tienes una opción nueva “Lista de la compra” en el menu de la izquierda, desde la que puedes administrarla manualmente.
Creación de sensores
El siguiente paso para domotizar tu lista de la compra es crear unos sensores que nos permitan extraer los productos de la lista y contar cuántos hay en la misma. Esto nos servirá para construir la tarjeta del panel de control y crear automatizaciones.
Vamos a incluir estos sensores dentro del fichero ‘command_line.yaml‘ copiando el siguiente código:
- sensor:
name: "Items in shopping list (number)"
unit_of_measurement: "items"
command: "jq '[.[] | select(.complete==false) | .name] | length' .shopping_list.json"
scan_interval: 1
- sensor:
name: "Items in shopping list (list)"
command: "jq '[.[] | select(.complete==false) | .name]' .shopping_list.json"
value_template: "{{ value_json | map('string') | join(',') }}"
scan_interval: 1
- sensor:
name: "Bought items (number)"
unit_of_measurement: "items"
command: "jq '[.[] | select(.complete==true) | .name] | length' .shopping_list.json"
scan_interval: 1
- sensor:
name: "Bought items (list)"
command: "jq '[.[] | select(.complete==true) | .name]' .shopping_list.json"
value_template: "{{ value_json | map('string') | join(',') }}"
scan_interval: 1
Esto creará las siguientes entidades:
- Sensor.items_in_shopping_list_list. Contiene la lista de la compra.
- Sensor.items_in_shopping_list_number. Indica el número de productos en la lista de la compra.
- Sensor.bought_items_list. Contiene la lista de los productos comprados recientemente.
- Sensor.bought_items_number. Indica el número de los productos comprados recientemente.
Creación del panel de control
Con los sensores que acabamos de crear ya podemos transformar la interfaz para controlar y domotizar tu lista de la compra. Cuando termines de configurarla tendrá el siguiente aspecto:
Avanza por los siguientes apartados para aprender cómo funciona cada bloque, y añadir aquellos que te interesen.
Acceso directo
Antes de nada vamos a crear una tarjeta de acceso directo a la lista, que podrás colocar en el apartado de tu panel de control que prefieras.
Este va a mostrar el número de productos en la lista, y cuando supere el número que indiquemos (15 en mi caso) el fondo se volverá rojo y el icono empezará a palpitar. Además, al pulsar sobre ella nos va a llevar al apartado del panel de control con el detalle de la lista de la compra, desde el que puedes administrarla.
Asegúrate de que está enlazado a la ruta correcta de tu lista de la compra y adapta, si quieres, el número de productos a partir del cuál se ilumina la tarjeta.
Para añadir este acceso directo, crea una tarjeta nueva y pega el siguiente código:
type: custom:mushroom-template-card
primary: '{{ states(''sensor.items_in_shopping_list_number'') }} productos'
secondary: Lista de la compra
icon: mdi:shopping
entity: sensor.items_in_shopping_list_number
icon_color: |-
{% if states('sensor.items_in_shopping_list_number') | int >= 15 %} white
{% endif %}
layout: vertical
fill_container: false
tap_action:
action: navigate
navigation_path: /lovelace/lista-de-la-compra
card_mod:
style: |
{% if states('sensor.items_in_shopping_list_number') | int >= 15 %}
ha-state-icon {
animation: beat 1.3s ease-out infinite both;
transform-origin: 50% 60%;
}
@keyframes beat {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
ha-card {
--primary-text-color: #ffffff;
--secondary-text-color: #ffffff;
background: linear-gradient( rgba(238, 82, 79, 1), rgba(181, 42, 39, 1) ) }}');
}
{% endif %}
Añadir productos de forma manual
En la parte superior de la interfaz dispones de un campo de texto para introducir productos en la lista de forma manual. Este va a ser muy útil para empezar a usar la lista, o cuando queramos añadir productos que no compramos de forma recurrente.
Para crearlo ve a Ajustes > Dispositivos y servicios > Ayudantes > Crear ayudante > Texto y ponle el nombre “Shopping list – New Product”. Esto creará la entidad ‘input_text.shopping_list_new_product’. Localízalo, pulsa sobre él y dale como valor “…” para ponerlo en marcha.
Para añadir este bloque, crea una nueva tarjeta y pega el siguiente código:
type: entities
entities:
- entity: input_text.shopping_list_new_product
name: Añade un producto
icon: mdi:plus-thick
tap_action:
action: none
Lista de la compra
Lo siguiente que vas a ver son los productos en la lista de la compra. Si has usado alguna vez la aplicación Bring! Shopping List, estarás familiarizado con la interfaz y su funcionamiento. Cada producto aparece representado en un botón, y sólo tienes que pulsar sobre él cuando lo añadas al carrito para que desaparezca de la lista. Se trata de una tarjeta condicional, por lo que sólo aparecerá en pantalla cuando haya algún producto para comprar.
También vas a poder personalizar los iconos de los productos en la propia tarjeta. Para ello modifica a tu gusto la siguiente parte del código (que encontrarás completo al final de este apartado):
## Asigna un icono a un producto concreto (por ejemplo, "Zanahorias")
{%- if product == 'Zanahorias' -%}
{%- set icon = 'mdi:carrot' -%}
## Asigna un icono a varios productos (por ejemplo, "Atún o Salmón")
{%- elif product == 'Atún' or product == 'Salmón' -%}
{%- set icon = 'mdi:fish' -%}
## Asigna un icono a todos los productos que contengan una palabra (por ejemplo, "Zumo")
{%- elif 'Zumo' in product -%}
{%- set icon = 'mdi:beer' -%}
{%- else -%}
{%- set icon = 'mdi:shopping' -%}
{%- endif -%}
Para añadir este bloque, crea una nueva tarjeta y pega el siguiente código:
type: conditional
conditions:
- entity: sensor.items_in_shopping_list_number
state_not: '0'
card:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Lista de la compra ({{ states('sensor.items_in_shopping_list_number')}})
title_tap_action:
action: none
card_mod:
style: |
ha-card {
--title-font-size: 20px !important;
margin-left: -10px;
margin-top: -15px;
margin-bottom: -20px;
}
- type: custom:auto-entities
show_empty: false
card:
square: true
type: grid
columns: 3
card_param: cards
filter:
template: |-
{% set LISTA = states('sensor.items_in_shopping_list_list') %}
{% set ITEMS = states('sensor.items_in_shopping_list_number') | int %}
{% for INDEX in range(ITEMS) -%}
{%- set product = LISTA.split(',')[INDEX] -%}
{%- if product == 'Zanahorias' -%}
{%- set icon = 'mdi:carrot' -%}
{%- elif product == 'Atún' or product == 'Salmón' -%}
{%- set icon = 'mdi:fish' -%}
{%- elif 'Zumo' in product -%}
{%- set icon = 'mdi:beer' -%}
{%- else -%}
{%- set icon = 'mdi:shopping' -%}
{%- endif -%}
{{
{
'type': 'custom:mushroom-template-card',
'entity': 'sensor.items_in_shopping_list_number',
'secondary': product,
'multiline_secondary': 'true',
'icon': icon,
'icon_color': 'white',
'layout': 'vertical',
'fill_container': 'true',
'tap_action': {
'action': 'call-service',
'service': 'shopping_list.complete_item',
'data': { 'name': product }
},
'style': 'ha-card { background: linear-gradient( rgba(238, 82, 79, 1), rgba(181, 42, 39, 1) ); --icon-size: 50px; --card-secondary-font-size: 11px; --secondary-text-color: #ffffff; };',
}
}},
{%- endfor %}
Productos comprados recientemente
En este apartado vas a encontrar los productos que has comprado útimamente, y si quieres volver a añadirlos a la lista de la compra sólo tienes que pulsar sobre el botón correspondiente. Así con este apartado puedes hacer la lista de una forma más rápida y cómoda.
Se trata de una tarjeta condicional, por lo que sólo aparecerá si hay algún producto en esta categoría, y desde la propia tarjeta puedes limpiar el listado de productos recientes, pulsando sobre “Limpiar”. Por cierto, también puedes personalizar los iconos de forma idéntica a lo comentado en el apartado anterior.
Para añadir este bloque, crea una nueva tarjeta y pega el siguiente código:
type: conditional
conditions:
- entity: sensor.bought_items_number
state_not: '0'
card:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Comprados recientemente
title_tap_action:
action: none
card_mod:
style: |
ha-card {
--title-font-size: 20px !important;
margin-left: -10px;
margin-top: -15px;
margin-bottom: -20px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: call-service
service: shopping_list.clear_completed_items
target: {}
icon: mdi:delete-forever
content: Limpiar
card_mod:
style: |
ha-card {
margin-top: -42px;
height: 30px!important;
}
alignment: end
- type: custom:auto-entities
show_empty: false
card:
square: true
type: grid
columns: 3
card_param: cards
filter:
template: |-
{% set LISTA = states('sensor.bought_items_list') %}
{% set ITEMS = states('sensor.bought_items_number') | int %}
{% for INDEX in range(ITEMS) -%}
{%- set product = LISTA.split(',')[INDEX] -%}
{%- if product == 'Chocolate' -%}
{%- set icon = 'mdi:candy' -%}
{%- elif 'Aceitunas' in product -%}
{%- set icon = 'mdi:grain' -%}
{%- elif product == 'Atún' or product == 'Sepia' -%}
{%- set icon = 'mdi:fish' -%}
{%- else -%}
{%- set icon = 'mdi:shopping' -%}
{%- endif -%}
{{
{
'type': 'custom:mushroom-template-card',
'entity': 'sensor.bought_items_number',
'secondary': product,
'multiline_secondary': 'true',
'icon': icon,
'icon_color': 'white',
'layout': 'vertical',
'fill_container': 'true',
'tap_action': {
'action': 'call-service',
'service': 'shopping_list.incomplete_item',
'data': { 'name': product }
},
'style': 'ha-card { background: linear-gradient( rgba(79, 171, 162, 1), rgba(38, 133, 124, 1) ); --icon-size: 50px; --card-secondary-font-size: 11px; --secondary-text-color: #ffffff; };',
}
}},
{%- endfor %}
Productos de consumo constante o perecederos
Hay algunos productos que consumimos de manera regular, por lo que podemos predecir cuando tenemos que volverlos a comprar e incorporarlos automáticamente a la lista cuando se acaban. Por ejemplo, si cada día bebo un vaso de zumo de naranja, y una botella me da para 4 vasos, consumo 1 botella cada 4 días. En consecuencia, cada 4 días quiero que se incorpore en mi lista de la compra “Zumo de naranja”.
Igualmente hay productos que aunque no se consuman de forma constante, tras ‘X’ días se echan a perder (fruta, embutido, etc.) y si no los has consumido los tienes que tirar y volver a comprar, por lo que también puedes estimar cada cuantos días tienes que comprarlos en función de la duración de cada producto.
Para agregar automáticamente productos a tu lista haz lo siguiente:
- Para cada producto “automático” vamos a crear un ayudante. Para ello ve a Ajustes > Dispositivos y servicios > Ayudantes > Crear ayudante > Número.
- En el nombre indica “Shopping List – PRODUCTO” (por ejemplo, “Shopping List – Zumo de naranja”. Es importante que respetes la estructura del nombre, si no quieres realizar modificaciones posteriores en el código. Esto creará la entidad ‘input_number.shopping_list_zumo_de_naranja’.
- Selecciona el icono que mejor se ajuste a tu producto (por ejemplo, “mdi:fruit-citrus”).
- Deja ‘0’ como valor mínimo, e indica como valor máximo el número que representa la frecuencia con la que quieres comprobar el producto (por ejemplo, 4 días).
- Ahora vamos a crear un grupo, al que iremos añadiendo todos los productos automáticos que registremos. Para ello ve a Ajustes > Dispositivos y servicios > Ayudantes > Crear ayudante > Grupo.
- En el nombre indica “Automatic Products”. Esto creará la entidad ‘sensor.automatic_products’.
- En el apartado miembros, agrega los ayudantes que hayas creado en el paso anterior (por ejemplo, ‘input_number.shopping_list_zumo_de_naranja’)
- Selecciona como tipo “media aritmética”.
- Mediante la importación del blueprint vamos a conseguir lo siguiente:
- Cada día a las 00:01h el stock de los productos va a disminuir en una unidad.
- Cuando el valor de cada producto llegue a ‘0’ se va a incorporar a la lista de la compra.
- Cuando se compre el producto se reestablecerá el nivel máximo del stock.
Desde el bloque de “Productos recurrentes” podrás cuántos días quedan para que se acabe cada producto (si quedan menos de 3 días el bloque aparece en naranja). Esto es muy útil para adelantarnos, y evitar tener que volver a hacer la compra en un par de días. Si pulsas sobre uno de los productos, el stock disminuirá en un día. De esta forma puedes ajustarlo cuando el consumo no sea el habitual.
Para añadir este bloque, crea una nueva tarjeta y pega el siguiente código:
type: conditional
conditions:
- entity: sensor.automatic_products
state_not: '0'
card:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Productos recurrentes
title_tap_action:
action: none
card_mod:
style: |
ha-card {
--title-font-size: 20px !important;
margin-left: -10px;
margin-top: -15px;
margin-bottom: -20px;
}
- type: custom:auto-entities
show_empty: false
card:
square: true
type: grid
columns: 3
card_param: cards
filter:
template: >-
{% set productos = expand('sensor.automatic_products') |
sort(attribute='state') | map(attribute='entity_id') | list %} {% for
product in productos -%}
{%- set stock = states(product) | int -%}
{%- set dias = "Stock: " + (states(product)).split(".")[0] -%}
{%- set name = (state_attr(product,'friendly_name')).split("-")[1] -%}
{%- set icon = (state_attr(product,'icon')) -%}
{%- set max = (state_attr(product,'max')) -%}
{%- if 1 <= stock <= 2 -%}
{{
{
'type': 'custom:mushroom-template-card',
'entity': product,
'primary': name,
'secondary': dias,
'icon': icon,
'icon_color': 'white',
'layout': 'vertical',
'fill_container': 'true',
'tap_action': {
'action': 'call-service',
'service': 'input_number.decrement',
'target': { 'entity_id': product }
},
'style': 'ha-card { background: linear-gradient( rgba(237, 134, 78, 1), rgba(182, 90, 40, 1) ); --icon-size: 50px; --card-primary-font-size: 11px;--card-secondary-font-size: 10px; --primary-text-color: #ffffff; --secondary-text-color: #efa47b; };',
}
}},
{%- elif stock > 2 -%}
{{
{
'type': 'custom:mushroom-template-card',
'entity': product,
'primary': name,
'secondary': dias,
'icon': icon,
'icon_color': 'white',
'layout': 'vertical',
'fill_container': 'true',
'tap_action': {
'action': 'call-service',
'service': 'input_number.decrement',
'target': { 'entity_id': product }
},
'style': 'ha-card { background: linear-gradient( rgba(79, 171, 162, 1), rgba(38, 133, 124, 1) ); --icon-size: 50px; --card-primary-font-size: 11px;--card-secondary-font-size: 10px; --primary-text-color: #ffffff; --secondary-text-color: #84cfc8; };',
}
}},
{%- endif -%}
{%- endfor %}
Productos de consumo registrado
Como a todos nos encanta integrar en Home Assistant todos los aparatos que podamos, en algunos casos vamos a poder ligar su uso con el consumo de productos.
Por ejemplo, si haces un seguimiento cada vez que pones la lavadora o el lavavajillas, vas a poder estimar cuando te quedas sin detergente de la siguiente forma:
- Visita Ajustes > Dispositivos y servicios > Ayudantes. Crea un nuevo ayudante de tipo contador. Este ayudante va a registrar cuantas veces has usado el aparato correspondiente.
- Crea una automatización para registrar el uso del aparato. Esta va a depender del aparato, pero en general debe hacer lo siguiente:
- Como desencadenante, debe dispararse cada vez que se realiza el uso del elemento. Dedica unos minutos a definir el disparador correctamente, para que no confundir el uso con estados de carga o ‘stand-by’, así como otras situaciones que puedan llevar a una estimación incorrecta.
- Entre las acciones, debe incrementar el contador en una unidad. Esto puedes hacerlo mediante el servicio “counter.increment”, y eligiendo como entidad el ayudante creado en el paso 1.
- Entre las acciones, si el contador alcanza un valor determinado, debe añadir el producto a la lista y resetear e contador. Por ejemplo, si el contador de usos de la lavadora ha legado a 30, utilizaremos el servicio “shopping_list.add_item” para añadir a la lista “Detergente” y el servicio “counter.reset” para reiniciar el contador.
Por otro lado, hay integraciones como algunos robot aspirador o impresoras que directamente incluyen entre sus sensores cuanto tiempo / usos quedan para que tengas que reemplazar alguna de las piezas. En estos casos puedes crear una automatización para que cuando dicho sensor alcance un “estado numérico” por debajo de un valor determinado añada el producto a la lista de la compra.
Cada dispositivo es diferente, pero podemos homogeneizar la información creando sensores que muestren el consumo restante hasta comprar el producto como un porcentaje.
Por ejemplo, mi robot aspirador tiene sensores que muestran el tiempo de uso en el que habrá que sustituir los cepillos (por ejemplo, ‘sensor.robot_aspirador_main_brush_left’), pero lo muestra en segundos. Para transformarlo en un porcentaje he incluido el siguiente código en el fichero ‘sensors.yaml’ (siendo ‘1080000’ el total, correspondiente al 100%). Esto crea la entidad ‘sensor.robot_cepillo_principal’.
- platform: template
sensors:
robot_cepillo_principal:
friendly_name: "Cepillo principal"
icon_template: mdi:robot-vacuum
unit_of_measurement: "%"
value_template: >
{{ (states('sensor.robot_aspirador_main_brush_left') | int / 1080000 * 100) | round }}
Una vez que he transformado todos los datos en sensores de porcentaje, voy a incluirlos dentro de un grupo. Para ello ve a Ajustes > Dispositivos y servicios > Ayudantes > Crear ayudante > Grupo.
- En el nombre indica “Recorded Consumption”. Esto creará la entidad ‘sensor.recorded_consumption’.
- En el apartado miembros, agrega los ayudantes que hayas creado en el paso anterior (por ejemplo, ‘sensor.robot_cepillo_principal’).
- Selecciona como tipo “media aritmética”.
Mediante la importación del blueprint vamos a conseguir lo siguiente:
- Cuando el valor de uno de los sensores caiga por debajo del 10%,’ se va a incorporar a la lista de la compra.
Para añadir este bloque, crea una nueva tarjeta y pega el siguiente código:
type: conditional
conditions:
- entity: sensor.recorded_consumption
state_not: '0'
card:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Consumo registrado
title_tap_action:
action: none
card_mod:
style: |
ha-card {
--title-font-size: 20px !important;
margin-left: -10px;
margin-top: -15px;
margin-bottom: -20px;
}
- type: custom:auto-entities
show_empty: false
card:
square: true
type: grid
columns: 3
card_param: cards
filter:
template: >-
{% set productos = expand('sensor.recorded_consumption') |
sort(attribute='state') | map(attribute='entity_id') | list %} {% for
product in productos -%}
{%- set stock = states(product) | int -%}
{%- set dias = "Stock: " + (states(product)).split(".")[0] + "%"-%}
{%- set name = (state_attr(product,'friendly_name')) -%}
{%- set icon = (state_attr(product,'icon')) -%}
{%- set max = (state_attr(product,'max')) -%}
{%- if 0 <= stock <= 10 -%}
{{
{
'type': 'custom:mushroom-template-card',
'entity': product,
'primary': name,
'secondary': dias,
'icon': icon,
'icon_color': 'white',
'layout': 'vertical',
'fill_container': 'true',
'tap_action': {
'action': 'none'
},
'style': 'ha-card { background: linear-gradient( rgba(238, 82, 79, 1), rgba(181, 42, 39, 1) ); --icon-size: 50px; --card-primary-font-size: 11px;--card-secondary-font-size: 10px; --primary-text-color: #ffffff; --secondary-text-color: #f0a09f; };',
}
}},
{%- elif 10 < stock <= 30 -%}
{{
{
'type': 'custom:mushroom-template-card',
'entity': product,
'primary': name,
'secondary': dias,
'icon': icon,
'icon_color': 'white',
'layout': 'vertical',
'fill_container': 'true',
'tap_action': {
'action': 'none'
},
'style': 'ha-card { background: linear-gradient( rgba(237, 134, 78, 1), rgba(182, 90, 40, 1) ); --icon-size: 50px; --card-primary-font-size: 11px;--card-secondary-font-size: 10px; --primary-text-color: #ffffff; --secondary-text-color: #efa47b; };',
}
}},
{%- elif stock > 30 -%}
{{
{
'type': 'custom:mushroom-template-card',
'entity': product,
'primary': name,
'secondary': dias,
'icon': icon,
'icon_color': 'white',
'layout': 'vertical',
'fill_container': 'true',
'tap_action': {
'action': 'none'
},
'style': 'ha-card { background: linear-gradient( rgba(79, 171, 162, 1), rgba(38, 133, 124, 1) ); --icon-size: 50px; --card-primary-font-size: 11px;--card-secondary-font-size: 10px; --primary-text-color: #ffffff; --secondary-text-color: #84cfc8; };',
}
}},
{%- endif -%}
{%- endfor %}
Sugerencias
Vamos a crear un bloque que nos va a ayudar a hacer la compra basándose en sugerencias adaptadas a nuestras preferencias. Este es el principio general, pero en realidad puedes utilizar esta idea como prefieras en función de tus gustos. Para crear este bloque necesitas, además, instalar a través de HACS la tarjeta Expander Card.
A continuación te dejo unos ejemplos.
- Productos de temporada
Los alimentos de temporada son más sanos, más baratos y más ecológicos, por lo que son una buena sugerencia para incorporarlos en nuestra lista de la compra. Vamos a crear un bloque que nos proponga productos de temporada en función del mes en el que nos encontremos.
Lo primero que tienes que hacer es buscar alguna página que te indique los productos de temporada en tu zona, y seleccionar aquellos que más te gusten para cada mes.
Ahora incluye el siguiente código en el fichero ‘sensors.yaml’ e indica en cada mes tus productos, separados por comas (como puedes ver en el ejemplo de noviembre).
- platform: template
sensors:
season_products:
friendly_name: "Season Products"
value_template: >
{% set month = now().month %}
{% if month == 1 %} Productos de enero
{% elif month == 2 %} Productos de febrero
{% elif month == 3 %} Productos de marzo
{% elif month == 4 %} Productos de abril
{% elif month == 5 %} Productos de mayo
{% elif month == 6 %} Productos de junio
{% elif month == 7 %} Productos de julio
{% elif month == 8 %} Productos de agosto
{% elif month == 9 %} Productos de septiembre
{% elif month == 10 %} Productos de octubre
{% elif month == 11 %} Granada,Naranjas,Mandarinas,Uvas,Kiwi,Endivia,Calabaza,Boniato,Champiñones,Lubina,Dorada,Almejas
{% elif month == 12 %} Productos de diciembre
{% endif %}
icon_template: mdi:calendar-month
Ya sólo queda crear una nueva tarjeta en el panel de control y pegar el siguiente código:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Sugerencias
title_tap_action:
action: none
card_mod:
style: |
ha-card {
--title-font-size: 20px !important;
margin-left: -10px;
margin-top: -15px;
margin-bottom: -20px;
}
- type: custom:expander-card
title: Productos de temporada
cards:
- type: custom:auto-entities
show_empty: false
card:
square: true
type: grid
columns: 3
card_param: cards
filter:
template: >-
{% set LISTA = states('sensor.season_products') %}
{% set ITEMS = states('sensor.season_products').split(',') | count
%}
{% for INDEX in range(ITEMS) -%}
{%- set producto = LISTA.split(',')[INDEX] -%}
{%- if producto == 'Granada' or producto == 'Naranjas' or producto == 'Mandarinas' or producto == 'Kiwis'-%}
{%- set icon = 'mdi:fruit-citrus' -%}
{%- elif producto == 'Uvas' -%}
{%- set icon = 'mdi:fruit-grapes' -%}
{%- elif producto == 'Endivia' -%}
{%- set icon = 'mdi:leaf' -%}
{%- elif producto == 'Calabaza' -%}
{%- set icon = 'mdi:fruit-pear' -%}
{%- elif producto == 'Boniato' -%}
{%- set icon = 'mdi:chili-mild' -%}
{%- elif producto == 'Champiñones' -%}
{%- set icon = 'mdi:mushroom' -%}
{%- elif producto == 'Lubina' or producto == 'Dorada' or producto == 'Almejas' -%}
{%- set icon = 'mdi:fish' -%}
{%- else -%}
{%- set icon = 'mdi:shopping' -%}
{%- endif -%}
{{
{
'type': 'custom:mushroom-template-card',
'secondary': producto,
'multiline_secondary': 'true',
'icon': icon,
'icon_color': 'white',
'layout': 'vertical',
'fill_container': 'true',
'tap_action': {
'action': 'call-service',
'service': 'shopping_list.add_item',
'data': { 'name': producto }
},
'style': 'ha-card { background: linear-gradient( rgba(143, 184, 84, 1), rgba(107, 139, 62, 1) ); --icon-size: 50px; --card-secondary-font-size: 11px; --secondary-text-color: #ffffff; };',
}
}},
{%- endfor %}
title-card:
type: custom:mushroom-template-card
primary: Productos de temporada
secondary: Más sanos y más baratos
tap_action:
action: none
icon: mdi:calendar
icon_color: lime
card_mod:
style: |
ha-card {
background: transparent;
box-shadow: none;
border: none;
}
padding: '0'
card_mod:
style: |
ha-card {
box-shadow: none;
}
- Productos en función de tu estado de forma
Si te gusta cuidar la línea o estás con la “operación bikini” seguro que necesitas adaptar tu lista de la compra a tus objetivos. Si tienes una báscula inteligente o te has montado un ‘personal trainer’ en HA, vamos a poder crear una sugerencia de productos en función de tu peso.
Para ello vamos a crear un sensor en el fichero ‘sensors.yaml’ similar al creado en el apartado anterior. Sin embargo, en este caso vamos a utilizar el sensor de nuestro peso como referencia. Vamos a incluir un listado de productos si estamos por debajo de nuestro peso objetivo, otro si estamos por encima, y otro más si estamos en el peso ideal.
- platform: template
sensors:
healthy_products:
friendly_name: "Healthy Products"
value_template: >
{% set weight = states('sensor.tito_weight') | int %}
{% if weight < 69 %} Plátanos,Uvas,Zumo de piña,Pasta,Queso,Mantequilla,Anacardos,Hamburguesas
{% elif weight > 70 %} Kiwis,Sandía,Mandarinas,Te,Zumo arándanos,Ensalada,Pechuga de pollo
{% else %} Manzanas,Peras,Zumo de naranja,Pavo
{% endif %}
icon_template: mdi:heart-circle
Con este sensor ya podemos crear una nueva tarjeta en el panel de control y pegar el siguiente código:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Sugerencias
title_tap_action:
action: none
card_mod:
style: |
ha-card {
--title-font-size: 20px !important;
margin-left: -10px;
margin-top: -15px;
margin-bottom: -20px;
}
- type: custom:expander-card
title: Estado de forma
cards:
- type: custom:auto-entities
show_empty: false
card:
square: true
type: grid
columns: 3
card_param: cards
filter:
template: >-
{% set LISTA = states('sensor.healthy_products') %}
{% set ITEMS = states('sensor.healthy_products').split(',') | count
%}
{% for INDEX in range(ITEMS) -%}
{%- set producto = LISTA.split(',')[INDEX] -%}
{%- if producto == 'Mandarinas' or producto == 'Kiwis'-%}
{%- set icon = 'mdi:fruit-citrus' -%}
{%- elif producto == 'Sandía' -%}
{%- set icon = 'mdi:fruit-watermelon' -%}
{%- elif producto == 'Te' -%}
{%- set icon = 'mdi:tea' -%}
{%- elif 'Zumo' in producto -%}
{%- set icon = 'mdi:beer' -%}
{%- elif producto == 'Ensalada' -%}
{%- set icon = 'mdi:leaf' -%}
{%- elif producto == 'Pechuga de pollo' -%}
{%- set icon = 'mdi:food-drumstick' -%}
{%- else -%}
{%- set icon = 'mdi:shopping' -%}
{%- endif -%}
{{
{
'type': 'custom:mushroom-template-card',
'secondary': producto,
'multiline_secondary': 'true',
'icon': icon,
'icon_color': 'white',
'layout': 'vertical',
'fill_container': 'true',
'tap_action': {
'action': 'call-service',
'service': 'shopping_list.add_item',
'data': { 'name': producto }
},
'style': 'ha-card { background: linear-gradient( rgba(143, 184, 84, 1), rgba(107, 139, 62, 1) ); --icon-size: 50px; --card-secondary-font-size: 11px; --secondary-text-color: #ffffff; };',
}
}},
{%- endfor %}
title-card:
type: custom:mushroom-template-card
primary: Por tu estado de forma
secondary: Consigue tus objetivos
tap_action:
action: none
icon: mdi:heart-circle
icon_color: red
card_mod:
style: |
ha-card {
background: transparent;
box-shadow: none;
border: none;
}
padding: '0'
card_mod:
style: |
ha-card {
background: transparent;
box-shadow: none;
}
Recetas
Con este bloque vamos a poder desplegar los ingredientes necesarios para elaborar nuestras recetas favoritas. Desde esta ventana puedes añadir los ingredientes que necesites a la lista de la compra.
Puesto que la tarjeta abre un ‘pop-up’, previamente necesitas integrar el complemento Browser-mod tal y como te explicaba en esta entrada. También necesitas instalar a través de HACS la tarjeta Swipe Card.
Hecho esto para añadir este bloque solo queda crear una nueva tarjeta, pegar el siguiente código y editarlo para incluir tus recetas favoritas.
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Recetas
title_tap_action:
action: none
card_mod:
style: |
ha-card {
--title-font-size: 20px !important;
margin-left: -10px;
margin-top: -15px;
margin-bottom: -20px;
}
- type: custom:swipe-card
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) ), url('https://images.hola.com/imagenes/cocina/recetas/20220208204252/pizza-pepperoni-mozzarella/1-48-890/pepperoni-pizza-abob-m.jpg');
background-size: cover;
background-position: center;
}
cards:
- type: custom:mushroom-template-card
primary: Pizza pepperoni
secondary: 290 cal / porción
icon: mdi:pizza
icon_color: white
tap_action:
action: none
card_mod:
style: |
ha-card {
--primary-text-color: #ffffff;
--secondary-text-color: #ffffff;
}
- type: custom:mushroom-chips-card
alignment: end
card_mod:
style: |
ha-card {
margin-top: -50px;
margin-right: 15px;
--primary-text-color: white;
}
chips:
- type: template
icon: mdi:shopping
content: Ingredientes
card_mod:
style: |
ha-card {
background-color: black !important;
--color: #ffffff;
}
tap_action:
action: call-service
service: browser_mod.popup
data:
dismissable: true
autoclose: false
title: Pizza pepperoni
content:
type: grid
square: true
columns: 3
cards:
- type: custom:mushroom-template-card
secondary: Masa de pizza
multiline_secondary: true
primary: ''
icon: mdi:pizza
icon_color: white
layout: vertical
fill_container: true
tap_action:
action: call-service
service: shopping_list.add_item
target: {}
data:
name: Masa de pizza
card_mod:
style: |
ha-card {
background: linear-gradient( rgba(79, 171, 162, 1), rgba(38, 133, 124, 1) );
--icon-size: 50px;
--card-secondary-font-size: 11px;
--secondary-text-color: #ffffff;
}
- type: custom:mushroom-template-card
secondary: Mozarella
multiline_secondary: true
primary: ''
icon: mdi:cheese
icon_color: white
layout: vertical
fill_container: true
tap_action:
action: call-service
service: shopping_list.add_item
target: {}
data:
name: Mozarella
card_mod:
style: |
ha-card {
background: linear-gradient( rgba(79, 171, 162, 1), rgba(38, 133, 124, 1) );
--icon-size: 50px;
--card-secondary-font-size: 11px;
--secondary-text-color: #ffffff;
}
- type: custom:mushroom-template-card
secondary: Tomate frito
multiline_secondary: true
primary: ''
icon: mdi:soy-sauce
icon_color: white
layout: vertical
fill_container: true
tap_action:
action: call-service
service: shopping_list.add_item
target: {}
data:
name: Tomate frito
card_mod:
style: |
ha-card {
background: linear-gradient( rgba(79, 171, 162, 1), rgba(38, 133, 124, 1) );
--icon-size: 50px;
--card-secondary-font-size: 11px;
--secondary-text-color: #ffffff;
}
- type: custom:mushroom-template-card
secondary: Pepperoni
multiline_secondary: true
primary: ''
icon: mdi:sausage
icon_color: white
layout: vertical
fill_container: true
tap_action:
action: call-service
service: shopping_list.add_item
target: {}
data:
name: Pepperoni
card_mod:
style: |
ha-card {
background: linear-gradient( rgba(79, 171, 162, 1), rgba(38, 133, 124, 1) );
--icon-size: 50px;
--card-secondary-font-size: 11px;
--secondary-text-color: #ffffff;
}
- type: custom:mushroom-template-card
secondary: Aceitunas
multiline_secondary: true
primary: ''
icon: mdi:grain
icon_color: white
layout: vertical
fill_container: true
tap_action:
action: call-service
service: shopping_list.add_item
target: {}
data:
name: Aceitunas negras
card_mod:
style: |
ha-card {
background: linear-gradient( rgba(79, 171, 162, 1), rgba(38, 133, 124, 1) );
--icon-size: 50px;
--card-secondary-font-size: 11px;
--secondary-text-color: #ffffff;
}
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) ), url('https://www.recipetineats.com/wp-content/uploads/2020/01/Chicken-Pad-Thai_9-SQ.jpg');
background-size: cover;
background-position: center;
}
cards:
- type: custom:mushroom-template-card
primary: Pad-Thai
secondary: 656 cal / porción
icon: mdi:noodles
icon_color: white
tap_action:
action: none
card_mod:
style: |
ha-card {
--primary-text-color: #ffffff;
--secondary-text-color: #ffffff;
}
- type: custom:mushroom-chips-card
alignment: end
card_mod:
style: |
ha-card {
margin-top: -50px;
margin-right: 15px;
--primary-text-color: white;
}
chips:
- type: template
icon: mdi:shopping
content: Ingredientes
card_mod:
style: |
ha-card {
background-color: black !important;
--color: #ffffff;
}
tap_action:
action: call-service
service: browser_mod.popup
data:
dismissable: true
autoclose: false
title: Pad-Thai
content:
type: grid
square: true
columns: 3
cards:
- type: custom:mushroom-template-card
secondary: Tallarines
multiline_secondary: true
primary: ''
icon: mdi:noodles
icon_color: white
layout: vertical
fill_container: true
tap_action:
action: call-service
service: shopping_list.add_item
target: {}
data:
name: Tallarines
card_mod:
style: |
ha-card {
background: linear-gradient( rgba(79, 171, 162, 1), rgba(38, 133, 124, 1) );
--icon-size: 50px;
--card-secondary-font-size: 11px;
--secondary-text-color: #ffffff;
}
- type: custom:mushroom-template-card
secondary: Puerro
multiline_secondary: true
primary: ''
icon: mdi:leaf
icon_color: white
layout: vertical
fill_container: true
tap_action:
action: call-service
service: shopping_list.add_item
target: {}
data:
name: Puerro
card_mod:
style: |
ha-card {
background: linear-gradient( rgba(79, 171, 162, 1), rgba(38, 133, 124, 1) );
--icon-size: 50px;
--card-secondary-font-size: 11px;
--secondary-text-color: #ffffff;
}
- type: custom:mushroom-template-card
secondary: Pimiento verde
multiline_secondary: true
primary: ''
icon: mdi:chili-mild
icon_color: white
layout: vertical
fill_container: true
tap_action:
action: call-service
service: shopping_list.add_item
target: {}
data:
name: Pimiento verde
card_mod:
style: |
ha-card {
background: linear-gradient( rgba(79, 171, 162, 1), rgba(38, 133, 124, 1) );
--icon-size: 50px;
--card-secondary-font-size: 11px;
--secondary-text-color: #ffffff;
}
- type: custom:mushroom-template-card
secondary: Repollo
multiline_secondary: true
primary: ''
icon: mdi:leaf
icon_color: white
layout: vertical
fill_container: true
tap_action:
action: call-service
service: shopping_list.add_item
target: {}
data:
name: Repollo
card_mod:
style: |
ha-card {
background: linear-gradient( rgba(79, 171, 162, 1), rgba(38, 133, 124, 1) );
--icon-size: 50px;
--card-secondary-font-size: 11px;
--secondary-text-color: #ffffff;
}
- type: custom:mushroom-template-card
secondary: Brotes soja
multiline_secondary: true
primary: ''
icon: mdi:leaf
icon_color: white
layout: vertical
fill_container: true
tap_action:
action: call-service
service: shopping_list.add_item
target: {}
data:
name: Brotes soja
card_mod:
style: |
ha-card {
background: linear-gradient( rgba(79, 171, 162, 1), rgba(38, 133, 124, 1) );
--icon-size: 50px;
--card-secondary-font-size: 11px;
--secondary-text-color: #ffffff;
}
- type: custom:mushroom-template-card
secondary: Soja
multiline_secondary: true
primary: ''
icon: mdi:soy-sauce
icon_color: white
layout: vertical
fill_container: true
tap_action:
action: call-service
service: shopping_list.add_item
target: {}
data:
name: Soja
card_mod:
style: |
ha-card {
background: linear-gradient( rgba(79, 171, 162, 1), rgba(38, 133, 124, 1) );
--icon-size: 50px;
--card-secondary-font-size: 11px;
--secondary-text-color: #ffffff;
}
- type: custom:mushroom-template-card
secondary: Zanahoria
multiline_secondary: true
primary: ''
icon: mdi:carrot
icon_color: white
layout: vertical
fill_container: true
tap_action:
action: call-service
service: shopping_list.add_item
target: {}
data:
name: Zanahoria
card_mod:
style: |
ha-card {
background: linear-gradient( rgba(79, 171, 162, 1), rgba(38, 133, 124, 1) );
--icon-size: 50px;
--card-secondary-font-size: 11px;
--secondary-text-color: #ffffff;
}
- type: custom:mushroom-template-card
secondary: Anacardos
multiline_secondary: true
primary: ''
icon: mdi:peanut
icon_color: white
layout: vertical
fill_container: true
tap_action:
action: call-service
service: shopping_list.add_item
target: {}
data:
name: Anacardos
card_mod:
style: |
ha-card {
background: linear-gradient( rgba(79, 171, 162, 1), rgba(38, 133, 124, 1) );
--icon-size: 50px;
--card-secondary-font-size: 11px;
--secondary-text-color: #ffffff;
}
- type: custom:mushroom-template-card
secondary: Cayena
multiline_secondary: true
primary: ''
icon: mdi:shaker
icon_color: white
layout: vertical
fill_container: true
tap_action:
action: call-service
service: shopping_list.add_item
target: {}
data:
name: Cayena
card_mod:
style: |
ha-card {
background: linear-gradient( rgba(79, 171, 162, 1), rgba(38, 133, 124, 1) );
--icon-size: 50px;
--card-secondary-font-size: 11px;
--secondary-text-color: #ffffff;
}
- type: custom:mushroom-template-card
secondary: Lima
multiline_secondary: true
primary: ''
icon: mdi:fruit-citrus
icon_color: white
layout: vertical
fill_container: true
tap_action:
action: call-service
service: shopping_list.add_item
target: {}
data:
name: Lima
card_mod:
style: |
ha-card {
background: linear-gradient( rgba(79, 171, 162, 1), rgba(38, 133, 124, 1) );
--icon-size: 50px;
--card-secondary-font-size: 11px;
--secondary-text-color: #ffffff;
}
- type: custom:mushroom-template-card
secondary: Huevos
multiline_secondary: true
primary: ''
icon: mdi:egg
icon_color: white
layout: vertical
fill_container: true
tap_action:
action: call-service
service: shopping_list.add_item
target: {}
data:
name: Huevos
card_mod:
style: |
ha-card {
background: linear-gradient( rgba(79, 171, 162, 1), rgba(38, 133, 124, 1) );
--icon-size: 50px;
--card-secondary-font-size: 11px;
--secondary-text-color: #ffffff;
}
Tarjetas de afiliación
Una de las funcionalidades que más me gusta de la aplicación Bring! Shopping List es la posibilidad de tener todas tus tarjetas de afiliación en un mismo lugar. Esto es muy útil, ya que no importa si voy a un supermercado o una gasolinera, siempre las llevo encima. Con este bloque vamos a replicar esta función.
De hecho, el primer paso para construir este bloque es utilizar la aplicación para escanear tus tarjetas. Para llevarlo a cabo instala la aplicación en tu teléfono y crea una lista. Accede a su interior, pulsa sobre los 3 puntos de la esquina superior derecha y luego en “Tarjetas”. Pulsa el botón de “Agregar tarjeta” y escanéala.
Una hayas escaneado tus tarjetas, haz una captura de pantalla del código de barras o QR que te ha generado, y guárdalo como imagen en la siguiente ruta ‘config/www/tarjetas/’ de Home Assistant (para esto te recomiendo que utilices el complemento Samba Share).
Para añadir este bloque, crea una nueva tarjeta y pega el siguiente código:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Tarjetas de afiliación
title_tap_action:
action: none
card_mod:
style: |
ha-card {
--title-font-size: 20px !important;
margin-left: -10px;
margin-top: -15px;
margin-bottom: -20px;
}
- type: custom:swipe-card
card_width: 49%
parameters:
slidesPerView: auto
spaceBetween: 5
cards:
- type: custom:mushroom-template-card
primary: Carrefour
icon: mdi:cart
icon_color: white
tap_action:
action: call-service
service: browser_mod.popup
data:
dismissable: true
autoclose: false
title: Carrefour
content:
type: picture
image: /local/tarjetas/carrefour.png
card_mod:
style: |
ha-card {
background: linear-gradient( rgba(12, 57, 89, 1), rgba(9, 46, 71, 1) );
--card-primary-font-size: 20px;
--primary-text-color: #ffffff;
}
- type: custom:mushroom-template-card
primary: Cepsa
icon: mdi:gas-station
icon_color: white
tap_action:
action: call-service
service: browser_mod.popup
data:
dismissable: true
autoclose: false
title: Cepsa
content:
type: picture
image: /local/tarjetas/cepsa.png
card_mod:
style: |
ha-card {
background: linear-gradient( rgba(238, 82, 79, 1), rgba(181, 42, 39, 1) );
--card-primary-font-size: 20px;
--primary-text-color: #ffffff;
}
- type: custom:mushroom-template-card
primary: Lidl
icon: mdi:cart
icon_color: white
tap_action:
action: call-service
service: browser_mod.popup
data:
dismissable: true
autoclose: false
title: Lidl
content:
type: picture
image: /local/tarjetas/lidl.png
card_mod:
style: |
ha-card {
background: linear-gradient( rgba(237, 205, 78, 1), rgba(182, 147, 40, 1) );
--card-primary-font-size: 20px;
--primary-text-color: #ffffff;
}
- type: custom:mushroom-template-card
primary: BP
icon: mdi:gas-station
icon_color: white
tap_action:
action: call-service
service: browser_mod.popup
data:
dismissable: true
autoclose: false
title: BP
content:
type: picture
image: /local/tarjetas/bp.png
card_mod:
style: |
ha-card {
background: linear-gradient( rgba(143, 184, 84, 1), rgba(107, 139, 62, 1) );
--card-primary-font-size: 20px;
--primary-text-color: #ffffff;
}
Importación del blueprint
Pulsa en el siguiente botón para importar y configurar el blueprint que he creado.
Este blueprint te va a permitir, entre otros:
- Enviarte una notificación a través de la aplicación cuando el número de productos en la lista de la compra alcanza un número determinado por ti.
- Incluir y reponer automáticamente productos de consumo constante o perecederos.
- Incluir automáticamente los repuestos de tus dispositivos de consumo regitrado.
Otras ideas para domotizar tu lista de la compra
Como siempre el límite está en tu imaginación, pero aquí tienes más ideas para domotizar tu lista de la compra:
- Utiliza etiquetas NFC
Una forma cómoda de añadir productos a la lista de la compra es pegar etiquetas NFC en las cajas, en los dispositivos, en un tablero de productos, o donde tu quieras para que al pasar el teléfono por encima se añada un producto a la lista de la compra.
- Coloca un dispositivo en la cocina.
Personalmente no suelo llevar el teléfono encima las 24h, y me da mucha rabia no tenerlo a mano cuando estoy en la cocina y me doy cuenta de que necesito añadir algo a la lista de la compra. Esto ya no me pasa desde que le quité el polvo a una vieja tablet que tenía olvidada en un cajón.
Darle una segunda vida para ayudarte a domotizar tu lista de la compra (y otras funciones de ayudante de cocina) es de lo más práctico que puedes hacer, y sin gastar un euro.
- Crea un acceso directo en tu dispositivo Android
Accede directamente al panel de la lista de la compra sin tener que entrar previamente en la aplicación, creando un acceso directo en tu pantalla de inicio.
¿Alguna duda? Coméntalo en nuestro grupo de Telegram y te ayudaremos!
Si te ha gustado, puedes invitarme a un café o compartirlo con tus amig@s!
- Like
- Digg
- Del
- Tumblr
- VKontakte
- Buffer
- Love This
- Odnoklassniki
- Meneame
- Blogger
- Amazon
- Yahoo Mail
- Gmail
- AOL
- Newsvine
- HackerNews
- Evernote
- MySpace
- Mail.ru
- Viadeo
- Line
- Comments
- Yummly
- SMS
- Viber
- Telegram
- Subscribe
- Skype
- Facebook Messenger
- Kakao
- LiveJournal
- Yammer
- Edgar
- Fintel
- Mix
- Instapaper
- Copy Link
- Buy me a coffee
Post Relacionados
Crear un controlador con un teléfono viejo
Integrar Android IP Webcam en Home Assistant
