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 ! 