Bonjour,
J’ai ceci dans ma carte, je vois bien qu’il me manque le template « card_apexcharts_elec ».
Mais j’ai ce template de @Galadan. Mais comme un débutant je ne sais pas où le mettre pour l’utiliser.
Grosse question où mettre les template ?
Merci
Salut, pourrais tu préciser ou tu t’es fourni ce template? As tu installer toutes les custom card necessaire du template que Galadan à du notifier quand il a fourni ce template ?
Je suis parti de ce post :
Les button-card sont installés.
Je n’utilise pas de template dans mes carte, mais dans cette vidéo il semble montrer que le template doit être dans la configuration de ton dashboard
J’ai regardé cette vidéo, et mis le template au début de la dashboard, mais rien ne change.
Toujours le même message :
Je ne vois pas où doit être mis ce code.
Peut-être que @Galadan a une idée à me suggérer.
Salut,
le code du button_card_templates doit se mettre à cet endroit :
Comme montrer sur la vidéo ou l’image de Warc0zes, dans le yaml d’éditeur du dashboard.
Puisque tu as toujours le même soucis ‹ is missing! › c’est qu’il ne trouve pas la ressource. As tu bien mis le même nom sur ton template?
Je vois dans la première image de ton poste que tu nommais le template « card_apexcharts_elec »
Alors que dans l’image de ce post je vois « template: custom: custom_card_apexcharts_elec »
Il faut que tu ajoute tout ce code dans le yaml d’éditeur du dashboard. Pour le button_card_template custom_card_apexcharts_elec:
button_card_templates:
custom_card_apexcharts_elec:
variables:
entity_1:
entity_id:
icon: "[[[ return entity.attributes.icon ]]]"
name: "[[[ return entity.attributes.friendly_name ]]]"
color: >
[[[
var colors = ['yellow', 'blue', 'red', 'green'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
entity_2:
entity_id:
icon: "[[[ return entity.attributes.icon ]]]"
name: "[[[ return entity.attributes.friendly_name ]]]"
color: >
[[[
var colors = ['yellow', 'blue', 'red', 'green'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
entity_3:
entity_id:
icon: "[[[ return entity.attributes.icon ]]]"
name: "[[[ return entity.attributes.friendly_name ]]]"
color: >
[[[
var colors = ['yellow', 'blue', 'red','green'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
entity_4:
entity_id:
icon: "[[[ return entity.attributes.icon ]]]"
name: "[[[ return entity.attributes.friendly_name ]]]"
color: >
[[[
var colors = ['yellow', 'blue', 'red','green'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
entity_5:
entity_id:
icon: "[[[ return entity.attributes.icon ]]]"
name: "[[[ return entity.attributes.friendly_name ]]]"
color: >
[[[
var colors = ['yellow', 'blue', 'red','green'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
color: "auto"
variable: "spin"
spin: false
show_name: false
show_state: false
show_label: false
show_icon: false
show_last_changed: true
show_entity_picture: false
styles:
grid:
- grid-template-areas: "'item1' 'item2' 'radial'"
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content min-content
card:
- border-radius: "var(--border-radius)"
- padding: "5px"
custom_fields:
item1:
card:
type: custom:button-card
template: list_3_items
custom_fields:
item1:
card:
type: "custom:button-card"
entity: "[[[ return variables.entity_1.entity_id ]]]"
name: "[[[ return variables.entity_1.name ]]]"
icon: "[[[ return variables.entity_1.icon ]]]"
template:
- "icon_info_bg"
#variables:
# ulm_card_generic_swap_icon: "[[[ return variables.entity_1.icon ]]]"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 0.20)`;]]]"
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_1.entity_id].state + " KWh";
]]]
item2:
card:
type: "custom:button-card"
entity: "[[[ return variables.entity_2.entity_id ]]]"
name: "[[[ return variables.entity_2.name ]]]"
icon: "[[[ return variables.entity_2.icon ]]]"
template:
- "icon_info_bg"
#variables:
# ulm_card_generic_swap_icon: "[[[ return variables.entity_2.icon ]]]"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 0.20)`;]]]"
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_2.entity_id].state + " KWh";
]]]
item3:
card:
type: "custom:button-card"
entity: "[[[ return variables.entity_3.entity_id ]]]"
name: "[[[ return variables.entity_3.name ]]]"
icon: "[[[ return variables.entity_3.icon ]]]"
template:
- "icon_info_bg"
#variables:
# ulm_card_generic_swap_icon: "[[[ return variables.entity_3.icon ]]]"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 0.20)`;]]]"
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_3.entity_id].state + " KWh";
]]]
item2:
card:
type: custom:button-card
template: list_2_items
custom_fields:
item1:
card:
type: "custom:button-card"
entity: "[[[ return variables.entity_4.entity_id ]]]"
name: "[[[ return variables.entity_4.name ]]]"
icon: "[[[ return variables.entity_4.icon ]]]"
template:
- "icon_info_bg"
#variables:
# ulm_card_generic_swap_icon: "[[[ return variables.entity_4.icon ]]]"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 0.20)`;]]]"
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_4.entity_id].state + " KWh";
]]]
item2:
card:
type: "custom:button-card"
tap_action:
action: "more-info"
entity: "[[[ return variables.entity_5.entity_id ]]]"
name: "[[[ return variables.entity_5.name ]]]"
icon: "[[[ return variables.entity_5.icon ]]]"
template:
- "icon_info_bg"
#variables:
# ulm_card_generic_swap_name: "[[[ return variables.entity_5.name ]]]"
# ulm_card_generic_swap_icon: "[[[ return variables.entity_5.icon ]]]"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.entity_5.color}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.entity_5.color}), 0.20)`;]]]"
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_5.entity_id].state;
]]]
radial:
card:
type: custom:apexcharts-card
graph_span: 7d
span:
start: day
offset: '-7d'
header:
show: true
title: Consommations des 7 derniers jours
show_states: true
colorize_states: true
series:
- entity: sensor.myelectricaldata_XXX
name: Conso
unit: kWh
color: deepskyblue
type: column
group_by:
duration: 1d
func: max
opacity: 0.8
stroke_width: 4
show:
datalabels: true
data_generator: >
return entity.attributes.dailyweek.map((dailyweek, index) =>
{
return [new Date(dailyweek).getTime(), entity.attributes.daily[index]];
});
- entity: sensor.myelectricaldata_XXXX
name: Coût
unit: €
color: orange
type: column
group_by:
duration: 1d
func: max
opacity: 0.8
stroke_width: 4
show:
datalabels: true
data_generator: >
return entity.attributes.dailyweek.map((dailyweek, index) =>
{
return [new Date(dailyweek).getTime(), entity.attributes.dailyweek_cost[index]];
});
apex_config:
xaxis:
labels:
show: true
yaxis:
labels:
show: true
legend:
show: false
Pour la carte, tu utilise ce code directement dans le dashboard:
type: custom:button-card
template: "custom_card_apexcharts_elec"
variables:
graph_span: "7d"
entity_1:
entity_id: "sensor.myelectricaldata_yesterday"
icon: 'mdi:flash'
name: "Hier"
color: "blue"
entity_2:
entity_id: "sensor.myelectricaldata_current_week"
icon: 'mdi:flash'
name: "Semaine"
color: "yellow"
entity_3:
entity_id: "sensor.myelectricaldata_current_month"
icon: 'mdi:flash'
name: "Mois"
color: "green"
entity_4:
entity_id: "sensor.myelectricaldata_current_year"
icon: 'mdi:flash'
name: "Année"
color: "pink"
entity_5:
entity_id: "sensor.myelectricaldata_last_update"
icon: 'mdi:calendar'
name: "Mise à jour"
color: "purple"
Merci pour votre aide, mais il faut que je me rende compte que je fais des chose qui dépasse mes compétences, ou que je ne comprends pas car après avoir fait ce que vous m’avez indiqué, j’ai ce nouveau problème, encore des template manquant « list_3_items » et aussi "list_2_items.
Il me semble que je veux faire des choses que je ne maîtrise pas.
il manque le button card template nommé list_3_items.
Dans ton lien , je ne le vois pas ce template
le souci vient de là, je pense :
Merci @WarC0zes et @Frosh,
J’abandonne cette carte trop complexe pour mes méninges.
Je vais en peaufiner une autrement.
Hello tout le monde, ça fait plusieurs jour que je m’amuse avec les Button-card, mais le problème c’est que je commence a avoir pas mal de templates… j’aurais voulu savoir si on pouvait pas mettre chaque template dans un fichier yaml distinct et avec un !include faire pointer le Button_card_template dessus, j’ai tout essayer, mais je n’y arrive pas…
Merci par avance pour vos réponse 