📝🍳¡Añade Recetas Automáticamente! Mejora tu Lista de Compra en Home Assistant (Parte 2)
Si ya seguiste la primera parte de nuestra guía sobre cómo crear una lista de la compra visual e impactante, prepárate porque hoy vamos a llevar la domótica de tu cocina al siguiente nivel. En este tutorial vamos a aprender a integrar recetas automáticas. ¿Qué significa esto? Que con un solo clic podrás visualizar todos los ingredientes de un plato y añadirlos a tu lista de la compra, ya sea uno a uno o todos de golpe.
En YouTube comparto más tutoriales, pruebas y domótica real. Suscribirme
Vídeo relacionado en YouTube
VideoInspiración y Créditos
Antes de empezar, es de justicia mencionar que la idea original y la lógica detrás de esta "Lista de la Compra 4.0" pertenece a los compañeros de Aguacatec. Podéis consultar su artículo original con todo el detalle técnico aquí: Domotizar tu lista de la compra 4.0 en Aguacatec.
Esta es la parte 2, pero primero tienes que haber creado esta fantástica lista de la compra, si no lo has hecho todavía consulta primero la Parte 1, creación de la lista de la compra.
Requisitos Previos: Tarjetas de HACS
Para que la interfaz luzca tan profesional y funcional como en el vídeo, necesitaremos tener instaladas las siguientes tarjetas desde HACS (Home Assistant Community Store):
- Mushroom Cards: Para una estética limpia y botones reactivos.
- Swipe Card: Ideal para navegar entre recetas de forma táctil.
- Bubble Card: Para ventanas emergentes (pop-ups) estilizadas.
- Auto Entities: Para que la lista se actualice sola según lo que tengamos en el carrito.
- Card Mod: Para personalizar el CSS y que todo encaje a la perfección.
Paso 1. La Base de Datos de Recetas (input_text)
Lo primero es crear un archivo llamado recetas.yaml dentro de tu carpeta de configuración. Aquí definiremos tanto una variable temporal para los ingredientes como cada una de tus recetas.
Usaremos entidades input_text para almacenar esta información. El truco aquí es usar el prefijo shopping_list_recipe_ para que el sistema las encuentre automáticamente.
Añade esto a tu configuración (ej: input_text.yaml):
# Entidad auxiliar para gestionar los ingredientes seleccionados
ingredients:
name: "Ingredientes"
min: 0
max: 2000
# Ejemplo de Receta: Salmón al horno
shopping_list_recipe_salmon:
name: "Shopping List-recipe-Salmón al horno"
initial: "Salmón;Salsa de soja;Miel;Jengibre;Cebollas;Pimiento rojo"
# Ejemplo de Receta: Calamarcitos
shopping_list_recipe_calamarcitos:
name: "Shopping List-recipe-Calamarcitos patagónicos"
initial: "Calamarcitos: 500gr;Ajo;Cayena;Perejil"Paso 2. El Dashboard de Selección de Recetas
Para visualizar las recetas, crearemos un pop-up con un diseño espectacular. Usaremos fotos de los platos como fondo de los botones. Al pulsar una receta, el sistema cargará sus ingredientes en la memoria temporal.
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#recipes'
icon: mdi:pizza
name: Recetas
- type: custom:auto-entities
card:
type: grid
columns: 3
filter:
template: |-
{% set ns = namespace(result = []) %}
{% set recipes = states | selectattr('object_id', 'contains', 'shopping_list_recipe') | list %}
{% for recipe in recipes -%}
{%- set name_recipe = (state_attr(recipe.entity_id,'friendly_name')).split("Shopping List-recipe-")[1] -%}
{%- set recipe_items = states(recipe.entity_id) -%}
{%- set picture = '/local/shopping_list/recipes/'+ name_recipe +'.jpg' -%}
{%- set ns.result = ns.result + [{
'type': 'custom:button-card',
'name': name_recipe,
'tap_action': {
'action': 'custom',
'custom': '[[[ hass.callService("input_text","set_value",{ entity_id: "input_text.ingredients", value: "'+recipe_items+'"}); window.history.pushState(null,"","#recipes_items"); window.dispatchEvent(new CustomEvent("location-changed"));]]]',
},
'styles': {
'card': [{
'background-image': 'url("'+picture+'")',
'background-size': 'cover',
'color': 'white',
'text-shadow': '1px 1px 2px black'
}],
'name': [{'padding-top': '70%'}]
}
}] -%}
{%- endfor -%}
{{ ns.result }}
Paso 3. Visualización y Selección de Ingredientes
Una vez seleccionada una receta, se abrirá un segundo pop-up (#recipes_items) donde veremos los ingredientes necesarios. Aquí podemos elegir añadir uno a uno o usar el botón mágico de "Añadir todos".
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#recipes_items'
icon: mdi:food-variant
name: Ingredientes de la Receta
- type: custom:auto-entities
card:
type: grid
columns: 3
filter:
template: |-
{% set LISTA = states('input_text.ingredients') %}
{% set actual_list = states('input_text.lista_compra') %}
{% for item in LISTA.split(';') -%}
{%- set product = item.split(':')[0] -%}
{%- set picture = '/local/shopping_list/'+ product +'.png' -%}
{{
{
'type': 'custom:mushroom-template-card',
'primary': product,
'picture': picture,
'layout': 'vertical',
'tap_action': {
'action': 'call-service',
'service': 'todo.add_item',
'target': { 'entity_id': 'todo.la_compra' },
'data': { 'item': product }
},
'card_mod': {
'style': 'ha-card { background: ' + ('linear-gradient(rgba(238,82,79,1),rgba(181,42,39,1))' if product in actual_list else 'none') + '; }'
}
}
}},
{%- endfor %}
# Botón para añadir todo lo que falte de golpe
- type: custom:mushroom-template-card
secondary: "Añadir todos los ingredientes"
icon: mdi:all-inclusive-box
tap_action:
action: call-service
service: script.actualiza_ingredientes_receta
Paso 4. El Script Inteligente: "Añadir todo"
Este script es el cerebro. Comprueba qué ingredientes de la receta NO están ya en tu lista para no duplicarlos, y añade solo los que te faltan.
alias: "Actualiza ingredientes receta"
sequence:
- service: todo.get_items
target:
entity_id: todo.la_compra
data:
status: needs_action
response_variable: incompleted
- variables:
items_to_add: >
{% set current_items = incompleted['todo.la_compra']['items'] | map(attribute='summary') | list %}
{% set recipe_items = states('input_text.ingredients').split(';') %}
{% set ns = namespace(to_add=[]) %}
{% for item in recipe_items %}
{% if item.split(':')[0] not in current_items and item != "" %}
{% set ns.to_add = ns.result + [item] %}
{% endif %}
{% endfor %}
{{ ns.to_add | join(';') }}
- repeat:
for_each: "{{ (items_to_add).split(';') }}"
sequence:
- service: todo.add_item
target:
entity_id: todo.la_compra
data:
item: "{{ repeat.item }}"Paso 5: La parte visual (Imágenes)
Para que las recetas entren por los ojos, debemos guardar las fotos de nuestros platos en la carpeta /config/www/recipes/.
IMPORTANTE: El nombre del archivo de imagen debe coincidir exactamente (mayúsculas incluidas) con el nombre que le diste al input_text en el archivo YAML.¿Cómo funciona en el día a día?
Una vez configurado y tras reiniciar Home Assistant, en tu panel de control verás tus platos favoritos. Al seleccionar uno (como esos calamares o el salmón que tanto me gusta), se desplegarán los ingredientes. Tienes dos opciones:
- Añadir uno a uno: Por si ya tienes sal en casa pero te falta el ingrediente principal.
- Añadir todo el tirón: Un botón que ejecuta el script y llena tu lista en un segundo.
Conclusión
Mejorar la interfaz de Home Assistant no es solo por estética, es por utilidad real. Con esta integración de recetas, planificar la semana es cuestión de segundos.
Si te ha gustado esta mejora, no olvides revisar el resto de mis vídeos sobre domótica y personalización. ¡Nos vemos en el próximo tutorial!
