Bonsoir,
Je fais de nouveau appel aux experts du Lovelace.
Je cherche à créer une carte de ma consommation qui rassemble un graphique et une vue instantanée.
Avec Stack-in-card, j’ai réussi à faire la carte ci-dessous:
Je cherche néanmoins à rendre l’affichage plus compact en superposant les 2 cartes, pour avoir une vue qui ressemblerait à ceci:
Bonjour,
Il est possible de rassembler les information dans une seule button-card avec des custom_fields. Il faudra aussi du card_mod pour supprimer les bordures des cartes incluses et voir s’il est possible de jouer sur les « margin » et les « padding ». Ce pendant le graphique sera forcément plus bas car sinon, il sera potentiellement masqué par la gauge.
Il te faudra un custom_field (button-card) pour afficher « Consommation électrique » et la valeur en VA, un custom_field pour afficher la gauge (carte entity), un pour afficher l’éclair (button-card) et un dernier pour la graphique (mini-graph-card). Il te faudra card_mod pour supprimer les bordure, jouer sur la couleur d’arrière plan et sa transparence ainsi que les marges de la acrte entity et de la carte mini-graph-card.
Salut,
Avec la carte , ça marche aussi :
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-areas: |
"info1 info2"
cards:
- type: picture-elements
image: /local/images/devices/ups.png
view_layout:
grid-area: info1
grid-column-start: 1
grid-column-end: 3
cards:
- type: picture-elements
image: /local/images/devices/other.png
view_layout:
grid-area: info2
Il y a 3 infos importants :
grid-template-areas: qui définie le découpage avec des nomsgrid-area: avec le nom de la zone grid-column-start: 1
grid-column-end: 3
La carte :
Le code :
type: custom:button-card
aspect_ratio: 5/2
custom_fields:
consommation:
card:
type: custom:button-card
entity: sensor.entree_zlinky_sinsts
name: Consommation électrique
show_icon: false
show_state: true
styles:
card:
- background-color: rgba(64,64,64,1.0)
- border: none
- margin-top: '-5px'
name:
- color: lightgray
- font-size: 16px
state:
- color: lightgray
- font-size: 24px
- font-weight: bold
- justify-self: start
unit:
card:
type: custom:button-card
name: VA
show_icon: false
show_state: true
styles:
card:
- background-color: rgba(64,64,64,1.0)
- border: none
- border-radius: 0
name:
- color: lightgray
- font-size: 18px
- font-weight: bold
- justify-self: start
gauge:
card:
type: gauge
entity: sensor.entree_zlinky_sinsts
max: 6000
severity:
green: 0
yellow: 1500
red: 3000
needle: true
min: 0
unit: VA
style: |
ha-card {
box-shadow: none;
border: none;
--primary-text-color: #D3D3D3;
}
.name {
--primary-text-color: #404040;
}
graph:
card:
type: custom:mini-graph-card
entities:
- sensor.entree_zlinky_sinsts
show:
icon: false
name: false
state: false
style: |
ha-card {
box-shadow: none;
border: none;
width: 165%;
}
icone:
card:
type: custom:button-card
entity: sensor.entree_zlinky_sinsts
show_name: false
icon: mdi:flash
show_icon: true
styles:
card:
- background-color: rgba(64,64,64,0.0)
- border: none
- border-radius: 0
icon:
- color: rgb(68,115,158)
styles:
card:
- background-color: rgba(64,64,64,1.0)
custom_fields:
consommation:
- position: absolute
- top: '-2%'
- left: 3%
unit:
- position: absolute
- width: 40px
- height: 50px
- top: 16%
- left: 15.5%
gauge:
- position: absolute
- top: '-2%'
- left: 50%
graph:
- filter: opacity(70%)
- position: absolute
- top: 41%
- left: 0%
icone:
- position: absolute
- width: 20%
- top: 10%
- left: 83%
J’ai ajouté un custom_field pour masquer l’unité (VA) et l’afficher dans une police plus petite pour coller à l’image que tu as posté.
Chaque custom_field peut être positionné pécisement en fonction de ton affichage.
Il te suffit de remplacer l’entité par la tienne.
Super et merci à tous.
@anon41081891, j’ai utilisé ton code et modifié légèrement:
Il me reste un problème: comme vous pouvez le voir sur l’image ci-dessous qui montre la nouvelle carte a côté de la carte de l’entité, il semble qu’il manque les dernières mesures sur le graphe (à droite). J’ai essayé de rajouter des points, jusqu’à 60 points par heure par exemple, mais ça ne change rien.
Ci-dessous le code actuel de la carte:
type: custom:button-card
aspect_ratio: 5/2
custom_fields:
consommation:
card:
type: custom:button-card
entity: sensor.lixee_zlinky_apparent_power
name: Consommation électrique
show_icon: false
show_state: true
styles:
card:
- background-color: rgba(64,64,64,1.0)
- border: none
- margin-top: '-5px'
name:
- color: lightgray
- font-size: 16px
state:
- color: lightgray
- font-size: 24px
- font-weight: bold
- justify-self: start
gauge:
card:
type: gauge
entity: sensor.lixee_zlinky_apparent_power
max: 6000
severity:
green: 0
yellow: 1500
red: 3000
needle: true
min: 0
unit: VA
style: |
ha-card {
box-shadow: none;
border: none;
--primary-text-color: #D3D3D3;
background: none;
width: 90%;
}
.name {
--primary-text-color: #404040;
}
graph:
card:
type: custom:mini-graph-card
entities:
- sensor.lixee_zlinky_apparent_power
show:
icon: false
name: false
state: false
hours_to_show: 24
points_per_hour: 4
style: |
ha-card {
box-shadow: none;
border: none;
background: none;
width: 165%;
}
icone:
card:
type: custom:button-card
entity: sensor.lixee_zlinky_apparent_power
show_name: false
icon: mdi:flash
show_icon: true
styles:
card:
- background-color: rgba(64,64,64,0.0)
- border: none
- border-radius: 0
icon:
- color: rgb(68,115,158)
styles:
card:
- background-color: rgba(64,64,64,1.0)
custom_fields:
consommation:
- position: absolute
- top: '-2%'
- left: 3%
unit:
- position: absolute
- width: 40px
- height: 50px
- top: 16%
- left: 15.5%
gauge:
- position: absolute
- top: '-2%'
- left: 50%
graph:
- filter: opacity(70%)
- position: absolute
- top: 41%
- left: 0%
icone:
- position: absolute
- width: 20%
- top: 10%
- left: 83%
Salut, réduit le width de la carte mini-graph-card, il doit être trop important par rapport à ton affichage.
En revanche tu peux augmenter le top de cette même carte pour qu’elle soit positionnée un peu plus bas
@anon41081891 , cool, c’était bien ça.
J’ai aussi diminué l’épaisseur du trait pour rendre bien visible.
Ci-dessous le résultat.
Une autre question si je peux: comment diminuer la taille de la fonte de la valeur sous la jauge?
Changer la taille de police de la jauge est compliqué car la valeur est dans inscrite dans une boite flexible dont la taille (ainsi que la taille de la police) varie en fonction de nombre de caractères. Ca doit être faisable avec card_mod, voire ne pas afficher la valeur mais je n’ai pas réussi à le faire.
Pour le nom sous la carte Gauge, tu peux modifier le code par ceci pour qu’il ne soit pas affiché :
.name {
visibility: hidden !important;
}
Dans le code initial, j’avais changé la couleur du texte par celle du background de la carte mais cela pourrait être génant en fonction du graphique en dessous.
Encore une fois merci beaucoup. Je pense que ça va rester comme ça. Le seul problème que je rencontre est la mise à l’échelle pour affichage mobile. Sur le PC, la carte est parfaite, mais sur mobile, le mini-graph est trop bas et est coupé.
Ca c’est lié aux différences d’affichage entre PC et téléphones portables. J’ai fait un tableau de bord spécifique en fonction de sur quoi il est affiché.
En faisant ça tu peux régler précisement les positions en fonction de l’affichage.
Oui, c’est ce que je fais aussi. Il faut que je trouve les bons réglages pour le mobile.
Encore une fois, merci beaucoup pour ton aide.
Bonjour,
Je ne comprends pas ce qui se passe. La même carte, avec le même code donne maintenant un affichage différent. Est-ce dû à un changement de format suite à la mise à jour de HA?
Ci-dessous l’image actuelle du résultat, à comparer aux images que j’ai partagées plus tôt:
Ca vient de la mise à jour de card_mod.
Il faut préciser card_mod avant style et refaire l’indentation (ajouter deux espaces)
Merci à tous les deux.
Pour référence, et pour ceux qui voudraient ré-utiliser, voici le résultat actuel:
avec le code de la carte:
type: custom:button-card
aspect_ratio: 5/2
custom_fields:
consommation:
card:
type: custom:button-card
entity: sensor.lixee_zlinky_apparent_power
name: Consommation électrique
show_icon: false
show_state: true
styles:
card:
- background-color: rgba(64,64,64,1.0)
- border: none
- margin-top: '-5px'
name:
- color: lightgray
- font-size: 16px
state:
- color: lightgray
- font-size: 24px
- font-weight: bold
- justify-self: start
gauge:
card:
type: gauge
entity: sensor.lixee_zlinky_apparent_power
max: 6000
severity:
green: 0
yellow: 1500
red: 3000
needle: true
min: 0
unit: VA
card_mod:
style: |
ha-card {
box-shadow: none;
border: none;
--primary-text-color: #D3D3D3;
background: none;
width: 90%;
}
.name {
--primary-text-color: #404040;
}
graph:
card:
type: custom:mini-graph-card
entities:
- sensor.lixee_zlinky_apparent_power
show:
icon: false
name: false
state: false
hours_to_show: 24
points_per_hour: 60
line_width: 2
card_mod:
style: |
ha-card {
box-shadow: none;
border: none;
background: none;
width: 163%;
}
icone:
card:
type: custom:button-card
entity: sensor.lixee_zlinky_apparent_power
show_name: false
icon: mdi:flash
show_icon: true
styles:
card:
- background-color: rgba(64,64,64,0.0)
- border: none
- border-radius: 0
icon:
- color: rgb(68,115,158)
styles:
card:
- background-color: rgba(64,64,64,1.0)
custom_fields:
consommation:
- position: absolute
- top: '-2%'
- left: 3%
unit:
- position: absolute
- width: 40px
- height: 50px
- top: 16%
- left: 15.5%
gauge:
- position: absolute
- top: 2%
- left: 50%
graph:
- filter: opacity(70%)
- position: absolute
- top: 39%
- left: 0%
icone:
- position: absolute
- width: 20%
- top: 10%
- left: 83%
Corrigé :
type: custom:button-card
aspect_ratio: 5/2
custom_fields:
consommation:
card:
type: custom:button-card
entity: sensor.lixee_zlinky_apparent_power
name: Consommation électrique
show_icon: false
show_state: true
styles:
card:
- background-color: rgba(64,64,64,1.0)
- border: none
- margin-top: '-5px'
name:
- color: lightgray
- font-size: 16px
state:
- color: lightgray
- font-size: 24px
- font-weight: bold
- justify-self: start
gauge:
card:
type: gauge
entity: sensor.lixee_zlinky_apparent_power
max: 6000
severity:
green: 0
yellow: 1500
red: 3000
needle: true
min: 0
unit: VA
card_mod:
style: |
ha-card {
box-shadow: none;
border: none;
--primary-text-color: #D3D3D3;
background: none;
width: 90%;
}
.name {
--primary-text-color: #404040;
}
graph:
card:
type: custom:mini-graph-card
entities:
- sensor.lixee_zlinky_apparent_power
show:
icon: false
name: false
state: false
hours_to_show: 24
points_per_hour: 4
card_mod:
style: |
ha-card {
box-shadow: none;
border: none;
background: none;
width: 165%;
}
icone:
card:
type: custom:button-card
entity: sensor.lixee_zlinky_apparent_power
show_name: false
icon: mdi:flash
show_icon: true
styles:
card:
- background-color: rgba(64,64,64,0.0)
- border: none
- border-radius: 0
icon:
- color: rgb(68,115,158)
styles:
card:
- background-color: rgba(64,64,64,1.0)
custom_fields:
consommation:
- position: absolute
- top: '-2%'
- left: 3%
unit:
- position: absolute
- width: 40px
- height: 50px
- top: 16%
- left: 15.5%
gauge:
- position: absolute
- top: '-2%'
- left: 50%
graph:
- filter: opacity(70%)
- position: absolute
- top: 41%
- left: 0%
icone:
- position: absolute
- width: 20%
- top: 10%
- left: 83%