Vraiment pas mal pour un début. Chapeau.
Bravo à toi.
Tu sais montrer le code d’une des cartes de tes lumières stp. Et template qui fonctionne avec.
Juste pour info.
Merci à toi.
Vraiment pas mal pour un début. Chapeau.
Bravo à toi.
Tu sais montrer le code d’une des cartes de tes lumières stp. Et template qui fonctionne avec.
Juste pour info.
Merci à toi.
Merci Schumi
Je partage ci-dessous mon code pour la carte lumière (le template est intégré à la carte, pour rester en mode graphique) :
Si l’ampoule est RGB, la couleur de l’icone changera en fonction de la couleur de l’ampoule.
type: custom:button-card
entity: switch.lumiere_salon
name: Salon
icon: custom
styles:
icon:
- top: '-2%'
- left: 3%
- width: 30%
- position: absolute
name:
- top: 80%
- left: 15%
- position: center
- color: rgba(240, 240, 240, 0.8)
card:
- font-size: 80%
- background-color: rgba(240, 240, 240, 0.1)
- border-radius: 15%
- border-style: solid
- border-color: rgba(240, 240, 240, 0.3)
- border-width: 1px
- box-shadow: true
- transition: true
custom_fields:
icon_hue:
- top: 18%
- left: 4.5%
- width: 45%
- position: absolute
custom_fields:
icon_hue: |
[[[
const state = entity.state === 'on' ? 'animate' : null;
return `
<svg viewBox="0 0 50 50">
<style>
@keyframes animate {
0% {
transform: scale(0.85);
}
20% {
transform: scale(1.1);
}
40% {
transform: scale(0.95);
}
60% {
transform: scale(1.03);
}
80% {
transform: scale(0.97);
}
100% {
transform: scale(1);
}
}
.animate {
animation: animate 0.8s;
transform-origin: center;
}
</style>
<path fill="#9da0a2" d="M27.4 47.3h-4.9s-.7.1-.7.8.4.9.7.9h4.9c.3 0 .7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-10.9-5.6-3.8 0-8.4.4-10.9 5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0 1.7 0 .1 0 .7 1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18 3.2-18.8.1-.4.1-.5.1-.7"/>
<path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M14.1 15.3c3.4-.3 7-.4 10.9-.4 3.8 0 7.5.2 10.9.4.4-.4.7-.8.9-1.1C39 8.5 38.9 6.5 38.9 6c-.2-4.4-8.4-5-12.1-5h0-3.4c-3.7 0-12 .5-12.1 5 0 .5-.1 2.5 2.1 8.2 0 .3.3.8.7 1.1z"/>
</svg>
`;
]]]
aspect_ratio: 1/1
state:
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
- border: 1px rgba(80, 80, 80) solid
name:
- color: rgba(0, 0, 0, 0.6)
icon:
- color: var(--button-card-light-color-no-temperature)
hold_action:
action: fire-dom-event
browser_mod:
command: popup
title: Lumière Salon
card:
type: vertical-stack
cards:
- type: entities
state_color: true
entities:
- entity: switch.lumiere_salon
- entity: switch.ewelink_sa_003_zigbee_on_off
- entity: switch.ewelink_sa_003_zigbee_5c91d222_on_off
- entity: switch.ewelink_sa_003_zigbee_b28ad222_on_off
- type: custom:hui-element
card_type: vertical-stack
cards:
- type: custom:mini-graph-card
align_icon: state
color_thresholds:
- color: '#ef1d0f'
value: 60
- color: '#ef5a0f'
value: 40
- color: '#f0da11'
value: 20
- color: '#11f13a'
value: 10
- color: '#1da4f2'
value: 0
entities:
- entity: sensor.lumiere_salon_electric_consumed_w
index: 0
hour24: true
more_info: false
points_per_hour: 1
show:
graph: bar
labels: false
name: false
- type: custom:mini-graph-card
align_icon: state
color_thresholds:
- color: '#ef1d0f'
value: 6
- color: '#ef5a0f'
value: 4
- color: '#f0da11'
value: 2
- color: '#11f13a'
value: 1
- color: '#1da4f2'
value: 0
entities:
- entity: sensor.lumiere_salon_electric_consumed_kwh
index: 0
hour24: true
more_info: false
points_per_hour: 1
show:
graph: bar
labels: false
name: false
Si jamais tu as besoin d’autres codes, n’hésites pas
Cdt
Pour information, tu peux utiliser les templates même en mode graphique :
Ça permet d’alléger le code des cartes
Merci a toi. je vais tester cela.
Je n’arrive vraiment pas a faire une popup carte, j’ai deja copier plusieurs code, mais rien ne se fais. tu aurais une idee de ce que j’aurais pu oublier, pour que cela fonctionne ?
Merci a toi.
Il te faut l’intégration browser_mod
, ensuite, il y a des exemples sur le forum :
J’ai installer « Light popup card ».
ce n’est pas avec cela pour ouvrir un popup sur une icône donnant les réglages pour l’intensité ?
Non, la popup c’est browser_mod.
@Clemalex moi j’ai ceci extrait d’un template:
card:
type: entities
entities:
- type: custom:light-popup-card
entity: |
[[[ return entity.entity_id ]]]
icon: none
fullscreen: false
brightnessWidth: 130px
brightnessHeight: 360px
borderRadius: 1.7em
sliderColor: '#c7c7c7'
sliderTrackColor: rgba(25, 25, 25, 0.9)
C’est quoi alors ?
C’est juste un Custom_field d’un button-card affichant la carte light-popup-card.
Pour afficher un popup c’est avec browser-mod.
Voir le lien plus haut pour un exemple simple et détaillé.
@Clemalex
ok, je vois ce que tu veux dire. mais je suis un peu perdu, je veux juste faire un popup sur un bouton groupe de lumieres, qui me donne un curseur pour regler l’intensité. tu aurais un exemple de cela ?
j’ai beau chercher, il y a plusieurs exemple de ce type de popup, mais aucun code.
merci a toi pour tes infos et ton aide…
Le code est dans la présentation de la carte light-popup-card.
Tu mets tout le code dans la clé action:
Inspire toi de mon exemple sur le forum.
je ne m’y retrouve vraiment pas !
j’ai ceci comme carte:
type: custom:homekit-card
home: true
title: teste homekit
useBrightness: true
useTemperature: false
titleColor: '#FFF'
enableColumns: true
statePositionTop: true
rows:
- row: 1
columns:
- column: 1
tileOnRow: 4
entities:
- title: Salon
popup:
type: custom:light-popup-card
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px
entities:
- entity: light.ampoule_gauche_salon
name: Avant Gauche
icon: mdi:track-light
Je dois mettre quoi exactement et ou dans ma carte ?
Désolé, suis un peu bête…
Pour information, tu peux utiliser les templates même en mode graphique :
Merci Clemalex pour le lien. J’ai pu enfin faire fonctionner les templates en mode graphique
c’est une carte personnelle que je n’utilise pas.
Mais la documentation est clair pourtant :
Wanna use the popup functionality?
The popups use browser mod to display any lovelace card in a popup. To use the popups install browser mod: GitHub - thomasloven/hass-browser_mod: 🔹 A Home Assistant integration to turn your browser into a controllable entity and media player And also install card-mod so the custom styles can be applied to the popups: GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card
Donc comme dit précédemment, installe browser-mod (et card-mod au passage)
Ensuite lire et relire la documentation car elle est très bien écrite.
Avant de partir dans cette configuration, je te conseille de faire (beaucoup!) plus simple afin de s’assurer que tout fonctionne et ensuite dans un second temps, commencer à grouper…
C’est comme ça que je fais quand je découvre quelque chose…
Bonjour
As tu moyen de partager les cartes pour tes caméras stp?
Merci !
Bonjour
Et voici. À reproduire autant de fois que de caméra
type: picture-entity
entity: switch.dalg_cam1
image: https://demo.home-assistant.io/stub_config/bedroom.png
name: Caméra 1
camera_image: camera.dalg_cam1
camera_view: live
Top fonctionne pour netatmo tu crois? Merci