Bonjour tout le monde !
VoilĂ ma participation Ă ce concoursâŠ
LE POURQUOI !
Jâavais postĂ© il y a quelque temps dĂ©jĂ une demande sur le forum pour une carte qui me permettrait de distribuer les croquettes de mes chats depuis Home Assistant. Je pouvais bien-sĂ»r distribuer les portions de croquettes depuis lâapplication dĂ©diĂ©e mais ce nâĂ©tait pas du tout pratique pour moi.
Lâapplication native permet de distribuer de 1 Ă 6 portions mais dans home assistant je nâavais comme possibilitĂ© quâun bouton glissant avec le nombre Ă distribuer qui devait ĂȘtre sĂ©lectionnĂ© (pas du tout pratique et trĂšs moche voir image).
Et comme je le disais dans le dernier message de ce post : « Yâa plus quâà »
Je me suis donc lancĂ© dans la crĂ©ation de cette carte qui mâa pris un certain temps avant dâaboutir Ă quelque chose qui me plaise vraiment !
jâai donc une carte pour chacun de mes deux chats qui me permet de voir instantanĂ©ment si il reste des croquettes dans la gamelle grĂące Ă une camĂ©ra et de distribuer les doses selon ce quâil reste. (Bien Ă©videment, une programmation est Ă©galement en place pour la distribution Ă heure fixe !)
Jâaurais pu Ă©videmment crĂ©er une notification qui vienne mâavertir quand la gamelle Ă©tait vide mais avec les goinfres que jâai Ă la maison, ça nâaurait pas arrĂȘtĂ© de biper !!!
COPIE DâĂCRAN (la carte de Rubens et le dĂ©but de la carte de Pixie faite sur le mĂȘme modĂšle)
EN PRATIQUE :
On aura besoin :
- dâun ou plusieurs chats
- la photo du chat que lâon mouline dans lâIA pour en faire un avatar style Pixar
- dâun distributeur connectĂ©
- dâune camĂ©ra (ici une Tapo C212)
LES RESSOURCES UTILISEES
La structure globale est basée sur une carte pile verticale vertical-stack.
- lâentĂȘte de la carte : carte markdown , un tableau html et lâavatar du chat (image hĂ©bergĂ©e dans
/local/images - La caméra en direct : la carte
picture-glancede la camĂ©ra Tapo avec intĂ©gration de lâentitĂ© de la gamelle - les boutons de distribution de portions:
une grillegridde 3 colonnes sur 2 lignes pour un affichage équilibré + 6 boutonsbutton-card.
Chaque bouton utilise uncall-serviceassociĂ© au servicenumber.set_valuequi envoie directement la valeur de la dose Ă lâentitĂ©number.distributeur_rubens_nourrir
Utilisation de card-mod:
linear-gradientpour le dĂ©gradĂ© de lâentĂȘte et du bandeau de la camĂ©rabox-shadowetborder-radiuspour un peu plus dâeffets.
LE CODE YALM
type: vertical-stack
cards:
- type: markdown
content: >
<table width="100%" style="border-collapse: collapse; border: none;
margin: 0; padding: 0; background: transparent;">
<tr style="border: none; background: transparent;">
<td style="border: none; text-align: left; vertical-align: middle; padding: 0;">
<h1 style="margin: 0; padding: 0; border: none; font-size: 24px; color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">đŸ Ă table Rubens !</h1>
<p style="margin: 5px 0 0 0; font-size: 15px; color: white; opacity: 0.9;">Choisis la portion du chef</p>
</td>
<td style="border: none; text-align: right; vertical-align: middle; padding: 0; width: 90px;">
<img src="/local/images/avatar_rubens.png" width="110" height="110">
</td>
</tr>
</table>
card_mod:
style:
ha-markdown $: |
img {
border-radius: 50% !important;
border: 4px solid #0a1f44 !important;
object-fit: cover !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
display: block !important;
margin-left: auto !important;
}
.: |
ha-card {
background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%) !important;
border-radius: 12px !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
padding: 10px 15px !important;
}
- type: picture-glance
title: đč En direct de la gamelle
camera_image: camera.camera_rubens_sd_stream
camera_view: live
entities:
- entity: number.distributeur_rubens_nourrir
icon: mdi:bowl-mix
card_mod:
style: |
ha-card {
border-radius: 12px !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
overflow: hidden !important;
border: 2px solid #3a7bd5 !important;
}
.box {
background: linear-gradient(135deg, rgba(0,210,255,0.85) 0%, rgba(58,123,213,0.85) 100%) !important;
}
.title {
font-weight: bold !important;
font-size: 18px !important;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
}
- type: grid
columns: 3
square: false
cards:
- type: button
icon: mdi:fish
name: 1 (Encas)
tap_action:
action: call-service
service: number.set_value
target:
entity_id: number.distributeur_rubens_nourrir
data:
value: 1
card_mod:
style: |
ha-card {
background-color: #4CAF50;
color: white;
--state-icon-color: white;
}
- type: button
icon: mdi:bowl-outline
name: 2 (Normal)
tap_action:
action: call-service
service: number.set_value
target:
entity_id: number.distributeur_rubens_nourrir
data:
value: 2
card_mod:
style: |
ha-card {
background-color: #29B6F6;
color: white;
--state-icon-color: white;
}
- type: button
icon: mdi:bowl-mix
name: 3 (Gourmand)
tap_action:
action: call-service
service: number.set_value
target:
entity_id: number.distributeur_rubens_nourrir
data:
value: 3
card_mod:
style: |
ha-card {
background-color: #F39C12;
color: white;
--state-icon-color: white;
}
- type: button
icon: mdi:silverware-fork-knife
name: 4 (Festin)
tap_action:
action: call-service
service: number.set_value
target:
entity_id: number.distributeur_rubens_nourrir
data:
value: 4
card_mod:
style: |
ha-card {
background-color: #FF5722;
color: white;
--state-icon-color: white;
}
- type: button
icon: mdi:pig-variant
name: 5 (Goinfre)
tap_action:
action: call-service
service: number.set_value
target:
entity_id: number.distributeur_rubens_nourrir
data:
value: 5
card_mod:
style: |
ha-card {
background-color: #E74C3C;
color: white;
--state-icon-color: white;
}
- type: button
icon: mdi:cat
name: 6 (Gros Minet)
tap_action:
action: call-service
service: number.set_value
target:
entity_id: number.distributeur_rubens_nourrir
data:
value: 6
card_mod:
style: |
ha-card {
background-color: #9C27B0;
color: white;
--state-icon-color: white;
}
VoilĂ pour ce qui est de ma petite participation Ă ce concours !
Rien de bien exeptionnel, mais une carte que je trouve chouette (et en plus elle concerne mes chats ! 