Bonjour,
J’utilise ces deux cartes pour monitorer mon onduleur et mon NUC.
Même si je modifie les dimensions de l’image de l’onduleur (à gauche), j’obtiens toujours la même taille de carte et d’image.
Par contre si j’utilise l’image du NUC en lieu et place de celle de l’onduleur, la taille de la carte diminue bien.
Je suppose que je loupe quelque chose lorsque je redimensionne l’image de l’onduleur mais je ne vois pas quoi.
Partage au moins ton code de carte… 
Celle pour l’onduleur :
id: nuc_status
type: custom:config-template-card
variables:
- states['sensor.upsomv_status'].state
- states['sensor.upsomv_battery_charge'].state
- states['sensor.upsomv_load'].state
- states['sensor.upsomv_input_voltage'].state
- states['sensor.upsomv_battery_voltage'].state
entities:
- sensor.upsomv_status
- sensor.upsomv_battery_charge
- sensor.upsomv_load
- sensor.upsomv_input_voltage
- sensor.upsomv_battery_voltage
card:
type: entities
show_header_toggle: 'off'
style: |
.card-header {
padding: 0px 0px 0px 0px !important;
}
entities:
- type: section
style: |
.label {
text-align: center !important;
margin-left: 0px !important;
font-size: 17px !important;
}
label: ${ 'APC Back-UPS CS 500 --- ' + vars[0] }
- type: custom:hui-vertical-stack-card
cards:
- type: horizontal-stack
cards:
- type: picture
style: |
ha-card {
--paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
--ha-card-background: "rgba(0, 0, 0, 0.0)";
--ha-card-box-shadow: 'none';
}
image: /local/images/apc.ups2.png
- type: custom:button-card
layout: icon_name_state2nd
show_icon: true
show_state: true
styles:
grid: null
card:
- '--ha-card-background': rgba(0, 0, 0, 0.0)
- '--ha-card-box-shadow': none
icon:
- padding: 10px 0px 0px
- height: 40px
- width: 40px
state:
- padding: 10px 0px 0px
- justify-self: start
- font-family: Roboto, sans-serif
- font-size: 14px
name:
- padding: 20px 0px 0px
- justify-self: start
entity: sensor.upsomv_battery_runtime
name: 'Remaining:'
icon: mdi:battery-high
- type: horizontal-stack
cards:
- type: custom:bar-card
show_icon: true
align: split
columns: 1
max: 100
positions:
icon: inside
indicator: inside
name: inside
value: inside
unit_of_measurement: '%'
severity:
- value: 50
color: '#3498db'
- value: 75
color: '#f39c12'
- value: 100
color: '#e45e65'
style: |
ha-card {
--paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
--ha-card-background: "rgba(0, 0, 0, 0.0)";
--paper-item-icon-color: 'var(--text-primary-color)';
--ha-card-box-shadow: 'none';
}
bar-card-name {
margin-left: -10px;
}
entity: sensor.upsomv_battery_charge
name: Battery
icon: mdi:battery-high
entity_row: true
- type: custom:bar-card
show_icon: true
align: split
columns: 1
max: 100
positions:
icon: inside
indicator: inside
name: inside
value: inside
unit_of_measurement: '%'
severity:
- value: 50
color: '#3498db'
- value: 75
color: '#f39c12'
- value: 100
color: '#e45e65'
style: |
ha-card {
--paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
--ha-card-background: "rgba(0, 0, 0, 0.0)";
--paper-item-icon-color: 'var(--text-primary-color)';
--ha-card-box-shadow: 'none';
}
bar-card-name {
margin-left: -10px;
}
entity: sensor.upsomv_load
name: ${ 'Load' }
entity_row: true
- type: entities
entities:
- entity: sensor.upsomv_input_voltage
name: Input Voltage
icon: mdi:power-plug
- entity: sensor.upsomv_battery_voltage
name: Battery Voltage
icon: mdi:battery-charging-high
- entity: sensor.upsomv_status_data
name: Status
icon: mdi:information-outline
style: |
ha-card {
--paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
--ha-card-background: "rgba(0, 0, 0, 0.0)";
--paper-item-icon-color: 'var(--text-primary-color)';
--ha-card-box-shadow: 'none';
}
Celle pour le NUC:
id: nuc_status
type: custom:config-template-card
variables:
- states['sensor.disk_use_percent'].state
- states['sensor.homeassistant_version'].state
- states['sensor.disk_total'].state
- states['sensor.disk_use'].state
- states['sensor.memory_use_percent'].state
- states['sensor.processor_use_percent'].state
entities:
- sensor.disk_use_percent
- sensor.homeassistant_version
- sensor.disk_total
- sensor.disk_use
- sensor.memory_use_percent
- sensor.processor_use
- sensor.cpu_temperature
card:
type: entities
show_header_toggle: 'off'
style: |
.card-header {
padding: 0px 0px 0px 0px !important;
}
entities:
- type: section
label: ${ 'NUC DN2820FYKH --- HA Version ' + vars[1] }
- type: custom:hui-vertical-stack-card
cards:
- type: horizontal-stack
cards:
- type: picture
style: |
ha-card {
--paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
--ha-card-background: "rgba(0, 0, 0, 0.0)";
--ha-card-box-shadow: 'none';
}
image: /local/images/intel_nuc.png
- type: custom:button-card
layout: icon_name_state2nd
show_icon: true
show_state: true
styles:
grid:
- grid-template-columns: 50px auto
icon:
- padding: 0px 0px
- height: 30px
- width: 30px
card:
- '--ha-card-background': rgba(0, 0, 0, 0.0)
- '--ha-card-box-shadow': none
state:
- padding: 0px 10px
- justify-self: start
- font-family: Roboto, sans-serif
- font-size: 15px
name:
- padding: 0px 10px
- justify-self: start
- color: var(--secondary-text-color)
entity: sensor.homeassistant_uptime
name: Uptime
icon: mdi:clock-outline
- type: custom:bar-card
show_icon: true
align: split
columns: 1
max: 100
positions:
icon: inside
indicator: inside
name: inside
value: inside
unit_of_measurement: '%'
severity:
- value: 50
color: '#3498db'
- value: 75
color: '#f39c12'
- value: 100
color: '#e45e65'
style: |
ha-card {
--paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
--ha-card-background: "rgba(0, 0, 0, 0.0)";
--paper-item-icon-color: 'var(--text-primary-color';
--ha-card-box-shadow: 'none';
}
entities:
- entity: sensor.disk_use_percent
name: ${ 'Disk (' + vars[3] + 'Gb/' + vars[2] + 'Gb)' }
entity_row: true
- type: horizontal-stack
cards:
- type: custom:bar-card
show_icon: true
align: split
columns: 1
max: 100
positions:
icon: inside
indicator: inside
name: inside
value: inside
unit_of_measurement: '%'
severity:
- value: 50
color: '#3498db'
- value: 75
color: '#f39c12'
- value: 100
color: '#e45e65'
style: |
ha-card {
--paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
--ha-card-background: "rgba(0, 0, 0, 0.0)";
--paper-item-icon-color: 'var(--text-primary-color';
--ha-card-box-shadow: 'none';
}
entity: sensor.memory_use_percent
name: RAM
entity_row: true
- type: custom:bar-card
show_icon: true
align: split
columns: 1
max: 100
positions:
icon: inside
indicator: inside
name: inside
value: inside
unit_of_measurement: '%'
severity:
- value: 50
color: '#3498db'
- value: 75
color: '#f39c12'
- value: 100
color: '#e45e65'
style: |
ha-card {
--paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
--ha-card-background: "rgba(0, 0, 0, 0.0)";
--paper-item-icon-color: 'var(--text-primary-color';
--ha-card-box-shadow: 'none';
}
entity: sensor.processor_use_percent
name: CPU
entity_row: true
- type: custom:mini-graph-card
height: 30
line_width: 2
font_size: 70
hours_to_show: 168
points_per_hour: 1
show:
extrema: true
fill: true
style: |
ha-card {
--ha-card-background: "rgba(0, 0, 0, 0.0)";
--ha-card-box-shadow: 'none';
border-radius: 5px;
}
.info.flex {
font-size: 12px !important;
}
entities:
- sensor.cpu_temperature
name: Temperature
color_thresholds:
- value: 30
color: '#3498db'
- value: 50
color: '#f39c12'
- value: 80
color: '#ff0000'
Image de l’onduleur :
Image du NUC :
par curiosité, convertir le png de l’ups en jpg juste pour voir. pas juste un changement de l’extension
ça change rien.
Comme je l’ai écrit, si je remplace l’image de l’onduleur (apc.ups2.png) par celle du NUC (intel_nuc.png), c’est parfait.
Cela signifie que c’est l’image de l’onduleur qui est trop « grande » mais que je ne parviens pas (pour une raison inconnue) à redimensionner correctement.
Je relance mon petit problème « esthétique ».
Hello.
Tu es certain que ta réduction fonctionne ? C’est dimanche, la caféine n’est pas encore arrivée mais je vois rien en rapport avec la taille dans ton exemple…
Moi je ne fais pas du tout comme ça…
- type: picture
style: |
ha-card {
width: 80%;
background: none;
box-shadow: none;
}
image: /local/images/devices/nuc.png
Au passage, j’exagère mais faire des images en 4K pour les réduire au format timbre c’est double peine :
Le téléchargement est plus long et tu bouffes des ressources pour réduire. Alors avec un bon pc et une bonne connexion ça se voit pas mais c’est pas une raison suffisante
Merci @Pulpy-Luke , c’est effectivement mieux comme ça.
Oui oui, j’avais prévu de réduire la taille des images. C’était dans la To Do List.
Je déterre le sujet …
J’ai mis en oeuvre la même chose mais cela ne semble pas fonctionner pour moi.
- type: horizontal-stack
cards:
- type: custom:mushroom-select-card
entity: input_select.bal_liste
secondary_info: state
icon: mdi:mailbox-open-up
name: BAL
- type: conditional
conditions:
- entity: input_select.bal_liste
state: Colis
card:
type: picture
style: |
ha-card {
width: 10%;
background: none;
box-shadow: none;
}
image: /local/arlo_colis.jpg
L’image reste à la même taille. J’ai raté quoi ?
Salut,
il te manque card_mod: avant style:. Il y a eu un changement sur card_mod, il y a 3mois.
essaye comme ca:
type: picture
card_mod:
style: |
ha-card {
width: 10%;
background: none;
box-shadow: none;
}
Bien vu ! Ca fonctionne ! Merci.