Hello,
J’était pas loin de la vérité alors 
J’ai fais une petite modif de mon coté:
Ajout icone interieure et temp de la piscine.
2 « J'aime »
Je savais bien que quelqu’un l’avais déjà adapté !
Je ne retrouvais pas ton post 
Je ne travaille pas bien passé minuit… 
@barto_95 c’est @Galadan qui avait commencé à l’adapter ! Oui c’est trop tard ! Mais je savais que je l’avais lu quelque part 
1 « J'aime »
Pas de souci ^^
@barto_95 , le voici:
pilule_temperature:
variables:
weather: weather.ville
outside: sensor.ext
inside: sensor.int
pool: sensor.piscine
template: pilule
tap_action:
action: navigate
navigation_path: /lovelace/temperature
label: |
[[[
var inter = Math.round(states[variables.inside].state* 10) / 10;
var exter = Math.round(states[variables.outside].state* 10) / 10;
var pool = Math.round(states[variables.pool].state* 10) / 10;
if (states[variables.weather].state == 'clear-night'){
var icon = '🌙';
} else if(states[variables.weather].state == 'rainy'){
var icon = '🌧️';
} else if(states[variables.weather].state == 'snowy'){
var icon = '🌨️️';
} else if(states[variables.weather].state == 'snowy-rainy'){
var icon = '🌨️️';
} else if(states[variables.weather].state == 'windy'){
var icon = '💨';
} else if(states[variables.weather].state == 'windy-variant'){
var icon = '💨';
} else if(states[variables.weather].state == 'fog'){
var icon = '🌫️';
} else if(states[variables.weather].state == 'cloudy'){
var icon = '☁️';
} else if(states[variables.weather].state == 'partlycloudy'){
var icon = '⛅️';
} else if(states[variables.weather].state == 'hail'){
var icon = '🌨️️';
} else if(states[variables.weather].state == 'lightning'){
var icon = '🌩️';
} else if(states[variables.weather].state == 'lightning-rainy'){
var icon = '⛈️';
} else if(states[variables.weather].state == 'pouring'){
var icon = '🌨️️';
} else if(states[variables.weather].state == 'snowy-rainy'){
var icon = '🌨️️';
} else if(states[variables.weather].state == 'sunny'){
var icon = '☀️';
} else {
var icon = '❓️';
}
return icon + ' ' + exter + '° / 🏠 ' + inter + '° / 🌊 ' + pool + '°' ;
]]]
1 « J'aime »
@Clemalex , je n’arrive pas a faire un truc, je voudrais ajouter une seconde entity sur le template graph, j’ai créé un autre template en suivant le premier, ce qui donne ça:
graph2:
variables:
entity: sensor.xiaomi_multisensor_salon_humidite
entity2: sensor.cost
color: var(--google-blue-500)
name: Default name
name2: name sensor.cost
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 0px
grid:
- grid-template-areas: '"item1 item2 item3"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: min-content min-content
custom_fields:
item1:
card:
entity: '[[[ return variables.entity ]]]'
name: '[[[ return variables.name ]]]'
template:
- icon_info
- generique
styles:
card:
- padding: 12px
type: custom:button-card
item2:
card:
entity: '[[[ return variables.entity2 ]]]'
name: '[[[ return variables.name2 ]]]'
template:
- icon_info
- generique
styles:
card:
- padding: 12px
type: custom:button-card
item3:
card:
type: custom:mini-graph-card
entities:
- entity: '[[[ return variables.entity ]]]'
line_color: '[[[ return variables.color ]]]'
show:
name: false
icon: false
legend: false
state: false
style: |
ha-card {
box-shadow: none;
border-radius: var(--border-radius);
}
Mais du coup, graphiquement ça donne ça:
J’aimerai en haut, une entity a gauche et l’autre a droite et le graph dans la partie de dessous.
Regarde par là : GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant
Si tu mets :
- grid-template-areas: '"item1 item2" "item3"'
Ca donne quoi ?
Faudra revoir ça je pense aussi
J’avais essayé un truc du genre:
Lis le tutoriel indiqué ici :
https://forum.hacf.fr/t/dashboard-minimalist/5507/16?u=clemalex
Je repasse ce soir…
Voir pour styliser seulement item3 avec :
grid-column: 1 / 3;
Peut être…
J’ai pas encore eu le temps de jouer avec…
Merci pour le code ça fonctionne nickel !
Tu devrais au moins englober le tout dans une stack-in-card, tu verras, ça feras au plus une vrai carte…(que tu peux ensuite remettre dans une grille… )
Pour l’instant, j’ai pas eu trop de le temps de m’amuser avec mais voici où j’en suis :
Sur PC :
Sur Mobile:
Il reste des fioritures à corriger.
Je suis vraiment pas fan du rendu sur téléphone ou pc (sauf le bleu ou le rouge peut être).
Je poserais le modèle (template) dans la semaine…
Ps: les graph jaune (ou orange ?) sont les graphes de base.
Celle en rouge ou en violet était mon idée de base.
cela fait chargé avec les deux icones.
1 « J'aime »
Hello.
La personne en charge du repo a fait des modifications dans les ressources des cartes en passant les mots en Anglais. Il faut donc faire la modification à la mano pour les configurations de chaque vue.
1 « J'aime »
Oui et des cartes ont été ajoutées et des variables renommées. Ainsi qu’un thème dark
ce sujet ne se veut pas exhaustif. Pensez à aller voir le github 
J’en suis là, et j’arrête…
Je postes le code ce soir
Edit:
Le modèle :
Il est pas super propre car j’ai fais pas mal de tests mais je laisse pour montrer (un peu) les possibilités de codage…
button_card_templates:
graph_with_card:
variables:
entity_carte_gauche: sensor.default
entity_carte_droite: sensor.default
entity_graph: sensor.default
color: var(--info-color)
name_carte_gauche: Default name
name_carte_droite: Default name
show_icon_carte_gauche: 'false'
show_icon_carte_droite: 'false'
show_name_carte_gauche: 'false'
show_name_carte_droite: 'false'
icon_carte_gauche: null
icon_carte_droite: null
styles:
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 0px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
custom_fields:
item2:
- padding-top: >
[[[ if (!variables.show_name_carte_gauche &&
!variables.show_name_carte_droite) return '13px';]]]
custom_fields:
item1:
card:
type: custom:button-card
entity: '[[[ return variables.entity_carte_gauche ]]]'
name: '[[[ return variables.name_carte_gauche ]]]'
template:
- icon_info
- generique
show_icon: '[[[ return variables.show_icon_carte_gauche ]]]'
show_name: '[[[ return variables.show_name_carte_gauche ]]]'
label: |
[[[
if (variables.icon_carte_gauche ) return (variables.icon_carte_gauche + " " + states[variables.entity_carte_gauche].state+ " " + states[variables.entity_carte_gauche].attributes.unit_of_measurement);
return states[variables.entity_carte_gauche].state + " " + states[variables.entity_carte_gauche].attributes.unit_of_measurement;
]]]
styles:
card:
- '--padding-mobile': >
[[[ if (!variables.show_icon_carte_gauche &&
!variables.show_icon_carte_droite) return '5px 5px 14px 0px';
if (variables.show_icon_carte_gauche &&
variables.show_icon_carte_droite) return '3px 0 0px 10px';
return '10px 0 9px 10px'; ]]]
- '--padding-computer': >
[[[ if (!variables.show_icon_carte_gauche &&
!variables.show_icon_carte_droite) return '23px 0 12px 0';
return '12px'; ]]]
- padding: var(--padding-computer)
grid:
- grid-template-areas: '"i l item1_item1" "i n item1_item1"'
- grid-template-columns: >
[[[ if (!variables.show_icon_carte_gauche &&
!variables.show_icon_carte_droite) return 'auto'; return
'min-content auto'; ]]]
extra_styles: |
#label {
white-space: nowrap;
}
/* telephone */
@media screen and (max-width: 800px) {
#label {
white-space: pre-line;
}
#card {
padding: var(--padding-mobile) !important;
}
}
custom_fields:
item1_item1:
card:
entity: '[[[ return variables.entity_carte_droite ]]]'
name: '[[[ return variables.name_carte_droite ]]]'
template:
- icon_info
- generique
label: |
[[[
if (variables.icon_carte_droite ) return (variables.icon_carte_droite + " " + states[variables.entity_carte_droite].state) + " " + states[variables.entity_carte_droite].attributes.unit_of_measurement;
return states[variables.entity_carte_droite].state + " " + states[variables.entity_carte_droite].attributes.unit_of_measurement;
]]]
show_icon: '[[[ return variables.show_icon_carte_droite ]]]'
show_name: '[[[ return variables.show_name_carte_droite ]]]'
extra_styles: |
#label {
white-space: nowrap;
}
/* telephone */
@media screen and (max-width: 800px) {
#label {
white-space: pre-line;
}
}
type: custom:button-card
item2:
card:
type: custom:mini-graph-card
entities:
- entity: '[[[ return variables.entity_graph ]]]'
line_color: '[[[ return variables.color ]]]'
show:
name: false
icon: false
legend: false
state: false
style: |
ha-card {
box-shadow: none;
border-radius: var(--border-radius);
}
#carte grise
type: custom:button-card
template: graph_with_card
variables:
entity_carte_gauche: sensor.temperature_enfant1
entity_carte_droite: sensor.humidity
entity_graph: sensor.temperature_salon
name_carte_gauche: Enfant 1
name_carte_droite: Enfant 2
color: gray
show_icon_carte_droite: false
show_icon_carte_gauche: false
show_name_carte_droite: false
show_name_carte_gauche: false
icon_carte_gauche: 🌡️
icon_carte_droite: 💧
#carte rouge
type: custom:button-card
template: graph_with_card
variables:
entity_carte_gauche: sensor.temperature_enfant1
entity_carte_droite: sensor.humidity
entity_graph: sensor.temperature_salon
name_carte_gauche: Enfant 1
name_carte_droite: Enfant 2
color: red
show_icon_carte_droite: false
show_icon_carte_gauche: false
show_name_carte_droite: false
show_name_carte_gauche: false
#carte jaune
type: custom:button-card
template: graph_with_card
variables:
entity_carte_gauche: sensor.temperature_enfant1
entity_carte_droite: sensor.humidity
entity_graph: sensor.temperature_salon
name_carte_gauche: Température
name_carte_droite: Humidité
color: gold
show_icon_carte_droite: false
show_icon_carte_gauche: false
show_name_carte_droite: true
show_name_carte_gauche: true
2 « J'aime »
Hello, merci @Clemalex , c’est top!!
C’est quoi cette partie:
extra_styles: |
#label {
white-space: nowrap;
}
/* telephone */
@media screen and (max-width: 800px) {
#label {
white-space: pre-line;
}
}
?
