Merci pour le code
J’avais presque tout sauf card bar
Par contre j’ai 2 differences
Je vais essayer d’enlever le fond blanc de l’image
Pour le reste je sais pas trop quio faire pour ameliorer
merci
sans voir le code difficile a dire.
oups…
type: custom:vertical-stack-in-card
cards:
- type: custom:button-card
entity: sensor.eaton1_etat
name: Eaton 3S<br/>850VA
aspect_ratio: 1.8/1
layout: icon_name_state2nd
show_icon: true
show_name: true
show_label: true
show_entity_picture: true
entity_picture: /local/img/eaton1.png
styles:
icon:
- width: 95%
name:
- font-size: 15px
- margin-left: "-30px"
custom_fields:
statut:
- top: 60%
- left: 38%
- position: absolute
- font-size: 13.5px
input:
- top: 80%
- left: 38%
- position: absolute
- font-size: 13.5px
custom_fields:
statut: |
[[[
if (states['sensor.eaton1_etat'].state == "Online") return `<ha-icon icon='mdi:information-outline' style='width: 20px; height: 20px; color: rgb(68, 115, 158);'></ha-icon>
<span>Statut: <span style='color: green;'>${states['sensor.eaton1_etat'].state}</span></span>`; else return `<ha-icon icon='mdi:information-outline' style='width: 20px; height: 20px; color: rgb(68, 115, 158);'></ha-icon> <span>Statut: <span style='color: red;'>${states['sensor.eaton1_etat'].state}</span></span>`
]]]
input: |
[[[
if (states['sensor.eaton1_code_d_etat'].state == "OL") return `<ha-icon icon='mdi:information-outline' style='width: 20px; height: 20px; color: rgb(68, 115, 158);'></ha-icon>
<span>Statut data: <span style='color: green;'>${states['sensor.eaton1_code_d_etat'].state}</span></span>`; else return `<ha-icon icon='mdi:information-outline' style='width: 20px; height: 20px; color: rgb(68, 115, 158);'></ha-icon> <span>Statut data: <span style='color: red;'>${states['sensor.eaton1_code_d_etat'].state}</span></span>`
]]]
hold_action:
action: more-info
entity: sensor.ups_status_data
card_mod:
style: |
ha-card {
box-shadow: none;
}
- type: custom:mod-card
card:
type: vertical-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.eaton1_tension_de_sortie
name: Input
icon: mdi:sine-wave
height: 17px
color: rgb(68, 115, 158)
min: 1
max: 250
target: 240
positions:
icon: inside
indicator: "off"
card_mod:
style: |
ha-card {
margin-top: -8px;
margin-left: -11px;
margin-right: -4px;
box-shadow: none;
}
ha-icon {
--mdc-icon-size: 18px;
color: white;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 4px;
}
bar-card-name {
margin: -5px;
}
- type: custom:bar-card
entities:
- entity: sensor.eaton1_tension_de_sortie
name: Output
icon: mdi:sine-wave
height: 17px
color: green
min: 1
max: 250
target: 240
positions:
icon: inside
indicator: "off"
card_mod:
style: |
ha-card {
margin-top: -23px;
margin-left: -11px;
margin-right: -4px;
box-shadow: none;
}
ha-icon {
--mdc-icon-size: 18px;
color: white;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 4px;
}
bar-card-name {
margin: -5px;
}
- type: custom:bar-card
entities:
- entity: sensor.eaton1_charge
name: Load
height: 17px
color: orange
min: 1
max: 100
target: 90
positions:
icon: inside
indicator: "off"
card_mod:
style: |
ha-card {
margin-top: -23px;
margin-left: -11px;
margin-right: -4px;
box-shadow: none;
}
ha-icon {
--mdc-icon-size: 18px;
color: white;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 4px;
}
bar-card-name {
margin: -5px;
}
- type: custom:bar-card
entities:
- entity: sensor.eaton1_charge_de_la_batterie
name: Charging
icon: mdi:battery-high
height: 17px
color: red
min: 1
max: 100
target: 10
positions:
icon: inside
indicator: "off"
card_mod:
style: |
ha-card {
margin-top: -23px;
margin-left: -11px;
margin-right: -4px;
box-shadow: none;
height: 45px;
}
ha-icon {
--mdc-icon-size: 18px;
color: white;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 4px;
}
bar-card-name {
margin: -5px;
}
et l’image detouree
tu as oublié le horizontal: true
2 mots qui changent tout
Merci
Alors pour l’onduleur eaton tout est ok
Je peux eventuellement mettre le code si ca peut interesser, mais bien evidemment c’est quasi la vversion de Warcozes
J’ai adapté avec les entités disponible pour man nas qnap cette carte
J’aimerai ajouter entre ventilation et éteint une card_bar avec la température de ma baie informatique. Malheureusement pour moi mes nombreux coupé /collés soient plantent ma carte soient rien ne s’affiche. Je ne maitrise pas suffisament pour svoir ou et comment et quoi couper/coller
Un petit coup de main…
Merci
type: custom:stack-in-card
mode: vertical
keep:
box_shadow: true
margin: false
border_radius: true
background: false
outer_padding: false
cards:
- type: picture
image: /local/img/logo_qnap.png
card_mod:
style: |
ha-card {
border-radius: 0px;
}
- type: custom:vertical-stack-in-card
horizontal: true
card_mod:
style: |
ha-card {
margin-top: -25px;
background-color: none;
}
cards:
- type: custom:mushroom-template-card
primary: Statut
secondary: " "
icon: mdi:clock-start
icon_color: "#44739E"
fill_container: false
layout: horizontal
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
browser_id: THIS
size: normal
title: HDD Statut
style: |-
--popup-border-radius: 10px;
--popup-border-width: 1px;
--popup-padding-x: 4px;
--popup-padding-y: 4px;
content:
type: entities
entities:
- entity: binary_sensor.diskstation_drive_1_exceeded_max_bad_sectors
type: custom:multiple-entity-row
name: Max Bad Sector
icon: mdi:harddisk
show_state: false
entities:
- entity: >-
binary_sensor.diskstation_drive_1_exceeded_max_bad_sectors
name: HDD 1
- entity: >-
binary_sensor.diskstation_drive_1_exceeded_max_bad_sectors
name: HDD 2
- entity: binary_sensor.diskstation_drive_1_below_min_remaining_life
type: custom:multiple-entity-row
name: Min Remaining Life
icon: mdi:harddisk
show_state: false
entities:
- entity: >-
binary_sensor.diskstation_drive_1_below_min_remaining_life
name: HDD 1
- entity: >-
binary_sensor.diskstation_drive_2_below_min_remaining_life
name: HDD 2
- entity: sensor.diskstation_drive_1_status
type: custom:multiple-entity-row
name: État
icon: mdi:harddisk
show_state: false
entities:
- entity: sensor.diskstation_drive_1_status
name: HDD 1
- entity: sensor.diskstation_drive_2_status
name: HDD 2
- entity: sensor.diskstation_drive_1_status_smart
type: custom:multiple-entity-row
name: État (Intelligent)
icon: mdi:harddisk
show_state: false
entities:
- entity: sensor.diskstation_drive_1_status_smart
name: HDD 1
- entity: sensor.diskstation_drive_2_status_smart
name: HDD 2
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset;
--shape-color: rgba(32,32,32,0.2) !important;
}
.: |
ha-card {
background: none;
width: 120px;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:harddisk
entity: sensor.nasqnap_etat
content: "{{ states(\"sensor.nasqnap_etat\") }}"
tap_action:
action: more-info
card_mod:
style: |
ha-card {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 20px;
--chip-font-size: 14px;
{% if is_state('sensor.nasqnap_etat','good') %}
--color: green;
{% else %}
--color: red;
{% endif %}
}
- type: template
icon: mdi:check-circle
entity: sensor.nasqnap_eth0_link
content: |
{% if is_state('sensor.nasqnap_eth0_link','Up') %}
Eth0:OK
{% else %}
Eth0:NOK
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 20px;
--chip-font-size: 14px;
{% if is_state('sensor.nasqnap_eth0_link','Up') %}
--color: green;
{% else %}
--color: red;
{% endif %}
}
- type: template
icon: mdi:clock-start
entity: sensor.nasqnap_uptime
content: >-
{% set uptime = (now()| as_timestamp -
states('sensor.nasqnap_uptime') | as_timestamp ) %} {% set
jours = (uptime / 86400) | int(0) %} {%- if jours > 0 -%} {{
jours }}d {{ (uptime - (jours * 86400)) | int(0) |
timestamp_custom('%Hh', false) }} {%- else -%} {{ uptime |
int(0) | timestamp_custom('%Hh', false) }} {%- endif -%}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 20px;
--chip-font-size: 14px;
--color: #44739e;
}
alignment: end
card_mod:
style: |
ha-card {
top: 60%;
right: 5%;
margin-left: -100px;
}
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.nasqnap_utilisation_du_processeur
name: CPU
icon: mdi:cpu-64-bit
color: rgb(68, 115, 158)
height: 27px
min: "0"
max: "100"
target: "90"
positions:
name: inside
indicator: "off"
card_mod:
style:
ha-icon $: |
ha-svg-icon {
margin-top: 7px;
margin-left: 7px;
}
.: |
ha-card {
margin-top: -21px;
margin-left: -3px;
margin-right: -5px;
background: none;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
margin: 5px;
}
ha-icon {
margin-top: -15px;
margin-left: 0px;
width: 42px;
height: 38px;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
border-radius: 50px;
}
- type: custom:bar-card
entities:
- entity: sensor.nasqnap_utilisation_de_la_memoire
name: RAM
icon: mdi:thermometer
height: 27px
color: red
min: "1"
max: "80"
target: "65"
decimal: 0
positions:
name: inside
indicator: "off"
card_mod:
style:
ha-icon $: |
ha-svg-icon {
margin-top: 7px;
margin-left: 7px;
}
.: |
ha-card {
margin-top: -21px;
margin-left: -15px;
margin-right: -2px;
background: none;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
margin: 5px;
}
ha-icon {
margin-top: -13px;
margin-left: 0px;
width: 42px;
height: 38px;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
border-radius: 50px;
}
- type: custom:mod-card
card:
type: vertical-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.nasqnap_volume_utilise_datavol1
name: HDD Raid1 4To
icon: mdi:harddisk
height: 27px
color: green
min: 1
max: 100
target: 70
decimal: 0
positions:
indicator: "off"
card_mod:
style:
ha-icon $: |
ha-svg-icon {
margin-top: 6px;
margin-left: 6px;
.: |
ha-card {
margin-top: -32px;
margin-left: -3px;
margin-right: -2px;
box-shadow: none;
background: none;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
margin: 5px;
}
ha-icon {
margin-top: -15px;
margin-left: 0px;
width: 42px;
height: 38px;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
border-radius: 50px;
}
- type: horizontal-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.nasqnap_temperature_du_processeur
name: NAS
icon: mdi:blank
height: 27px
color: orange
min: 1
max: 60
target: 50
positions:
name: inside
indicator: "off"
severity:
- color: Green
from: 0
to: 40
- color: Orange
from: 41
to: 50
- color: Red
from: 51
to: 60
card_mod:
style: |
ha-card {
margin-top: -30px;
margin-left: -10px;
margin-right: -2px;
font-size: 13px;
background: none;
}
ha-icon {
--mdc-icon-size: 55px;
background: url("/local/img/ts264.png");
background-size: 100% 100%;
margin-top: -10px;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
margin: 5px;
}
- type: custom:bar-card
entities:
- entity: sensor.nasqnap_temperature_du_lecteur_0_3
name: HDD1
icon: mdi:blank
height: 27px
color: orange
min: 1
max: 60
target: 50
positions:
name: inside
indicator: "off"
card_mod:
style: |
ha-card {
margin-top: -30px;
margin-left: -13px;
margin-right: -2px;
font-size: 13px;
}
ha-icon {
--mdc-icon-size: 40px;
background: url("/local/img/DD.png");
background-size: 100% 100%;
margin-top: -10px;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
margin: 5px;
}
- type: custom:bar-card
entities:
- entity: sensor.nasqnap_temperature_du_lecteur_0_4
name: HDD2
icon: mdi:blank
height: 27px
color: orange
min: 1
max: 60
target: 50
positions:
name: inside
indicator: "off"
card_mod:
style: |
ha-card {
margin-top: -30px;
margin-left: -13px;
margin-right: -2px;
box-shadow: none;
font-size: 13px;
}
ha-icon {
--mdc-icon-size: 40px;
background: url("/local/img/DD.png");
background-size: 100% 100%;
margin-top: -10px;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
margin: 5px;
}
- type: horizontal-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.nasqnap_eth0_download
name: Download
icon: mdi:download-network
decimal: 0
height: 27px
direction: right
positions:
icon: inside
name: inside
minmax: "off"
indicator: "off"
color: green
entity_row: true
card_mod:
style: |
ha-card {
font-size: 14px;
margin: -14px -8px 0px -5px;
--mdc-icon-size: 20px;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
- type: custom:bar-card
entities:
- entity: sensor.nasqnap_eth0_upload
direction: right
name: Upload
icon: mdi:upload-network
decimal: 0
height: 27px
color: rgb(250, 0, 1)
entity_row: true
positions:
icon: inside
indicator: "off"
name: inside
minmax: "off"
card_mod:
style: |
ha-card {
font-size: 14px;
margin: -14px -3px 0px -11px;
--mdc-icon-size: 20px;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
- type: custom:vertical-stack-in-card
horizontal: true
card_mod:
style: |
ha-card {
margin-top: -18px;
margin-bottom: 2px;
background-color: none;
}
cards:
- type: custom:mushroom-template-card
primary: Ventilation Baie
secondary: " "
entity: switch.prise_baie
icon: mdi:fan
fill_container: false
layout: horizontal
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset;
--shape-color: rgba(32,32,32,0.2) !important;
{% if is_state('switch.prise_baie','on') %}
--icon-color: green;
{% else %}
--icon-color: red;
{% endif %}
}
.: |
ha-card {
background: none;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.prise_baie
icon: |
{% if is_state('switch.prise_baie', 'on') %}
mdi:toggle-switch
{% else %}
mdi:toggle-switch-off
{% endif %}
content: |
{% if is_state('switch.prise_baie','on') %}
Allumé
{% else %}
Éteint
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 20px;
--chip-font-size: 14px;
{% if is_state('switch.prise_baie','on') %}
--color: green;
{% else %}
--color: red;
{% endif %}
}
alignment: end
card_mod:
style: |
ha-card {top:60%;right:5%}
card_mod:
style: |
ha-card {
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 3px 3px 4px 0px rgba(0,0,0,0.5);
}
type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Ventilation Baie
secondary: " "
entity: switch.prise_baie
icon: mdi:fan
fill_container: false
layout: horizontal
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset;
--shape-color: rgba(32,32,32,0.2) !important;
{% if is_state('switch.prise_baie','on') %}
--icon-color: green;
{% else %}
--icon-color: red;
{% endif %}
}
.: |
ha-card {
margin-right: -20px;
background: none;
}
- type: custom:bar-card
entities:
- entity: sensor.system_monitor_utilisation_du_processeur
name: CPU Use
icon: phu:intel-cpu
color: rgb(68, 115, 158)
height: 27px
min: "0"
max: "100"
target: "90"
positions:
name: inside
indicator: "off"
card_mod:
style:
ha-icon $: |
ha-svg-icon {
margin-top: 7px;
margin-left: 7px;
}
.: |
ha-card {
margin-right: -70px;
margin-bottom: -20px;
background: none;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
margin: 5px;
}
ha-icon {
margin-top: -15px;
margin-left: 0px;
width: 42px;
height: 38px;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
border-radius: 50px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.prise_baie
icon: |
{% if is_state('switch.prise_baie', 'on') %}
mdi:toggle-switch
{% else %}
mdi:toggle-switch-off
{% endif %}
content: |
{% if is_state('switch.prise_baie','on') %}
Allumé
{% else %}
Éteint
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 20px;
--chip-font-size: 14px;
{% if is_state('switch.prise_baie','on') %}
--color: green;
{% else %}
--color: red;
{% endif %}
}
alignment: end
card_mod:
style: |
ha-card {top:24%;right:5%}
card_mod:
style: |
ha-card {
margin-top: 0px;
margin-bottom: 2px;
background-color: none;
}
super, merci je m’y colle, c’est e cas de le dire
Ca fonctionne impec, après réglages… lol
Juste sur mon tel la barre Temp du bas est trop grande
On peut ou la réduire ou qu’elle s’adapte a la taille de l’ecran?
Merci
`saisissez ou collez du code ici`type: custom:stack-in-card
mode: vertical
keep:
box_shadow: true
margin: false
border_radius: true
background: false
outer_padding: false
cards:
- type: picture
image: /local/img/logo_qnap.png
card_mod:
style: |
ha-card {
border-radius: 0px;
}
- type: custom:vertical-stack-in-card
horizontal: true
card_mod:
style: |
ha-card {
margin-top: -25px;
background-color: none;
}
cards:
- type: custom:mushroom-template-card
primary: Statut
secondary: " "
icon: mdi:clock-start
icon_color: "#44739E"
fill_container: false
layout: horizontal
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
browser_id: THIS
size: normal
title: HDD Statut
style: |-
--popup-border-radius: 10px;
--popup-border-width: 1px;
--popup-padding-x: 4px;
--popup-padding-y: 4px;
content:
type: entities
entities:
- entity: binary_sensor.diskstation_drive_1_exceeded_max_bad_sectors
type: custom:multiple-entity-row
name: Max Bad Sector
icon: mdi:harddisk
show_state: false
entities:
- entity: >-
binary_sensor.diskstation_drive_1_exceeded_max_bad_sectors
name: HDD 1
- entity: >-
binary_sensor.diskstation_drive_1_exceeded_max_bad_sectors
name: HDD 2
- entity: binary_sensor.diskstation_drive_1_below_min_remaining_life
type: custom:multiple-entity-row
name: Min Remaining Life
icon: mdi:harddisk
show_state: false
entities:
- entity: >-
binary_sensor.diskstation_drive_1_below_min_remaining_life
name: HDD 1
- entity: >-
binary_sensor.diskstation_drive_2_below_min_remaining_life
name: HDD 2
- entity: sensor.diskstation_drive_1_status
type: custom:multiple-entity-row
name: État
icon: mdi:harddisk
show_state: false
entities:
- entity: sensor.diskstation_drive_1_status
name: HDD 1
- entity: sensor.diskstation_drive_2_status
name: HDD 2
- entity: sensor.diskstation_drive_1_status_smart
type: custom:multiple-entity-row
name: État (Intelligent)
icon: mdi:harddisk
show_state: false
entities:
- entity: sensor.diskstation_drive_1_status_smart
name: HDD 1
- entity: sensor.diskstation_drive_2_status_smart
name: HDD 2
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset;
--shape-color: rgba(32,32,32,0.2) !important;
}
.: |
ha-card {
background: none;
width: 120px;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:harddisk
entity: sensor.nasqnap_etat
content: "{{ states(\"sensor.nasqnap_etat\") }}"
tap_action:
action: more-info
card_mod:
style: |
ha-card {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 20px;
--chip-font-size: 14px;
{% if is_state('sensor.nasqnap_etat','good') %}
--color: green;
{% else %}
--color: red;
{% endif %}
}
- type: template
icon: mdi:check-circle
entity: sensor.nasqnap_eth0_link
content: |
{% if is_state('sensor.nasqnap_eth0_link','Up') %}
Eth0:OK
{% else %}
Eth0:NOK
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 20px;
--chip-font-size: 14px;
{% if is_state('sensor.nasqnap_eth0_link','Up') %}
--color: green;
{% else %}
--color: red;
{% endif %}
}
- type: template
icon: mdi:clock-start
entity: sensor.nasqnap_uptime
content: >-
{% set uptime = (now()| as_timestamp -
states('sensor.nasqnap_uptime') | as_timestamp ) %} {% set
jours = (uptime / 86400) | int(0) %} {%- if jours > 0 -%} {{
jours }}J {{ (uptime - (jours * 86400)) | int(0) |
timestamp_custom('%HH', false) }} {%- else -%} {{ uptime |
int(0) | timestamp_custom('%Hh', false) }} {%- endif -%}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 20px;
--chip-font-size: 14px;
--color: #44739e;
}
alignment: end
card_mod:
style: |
ha-card {
top: 60%;
right: 5%;
margin-left: -100px;
}
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.nasqnap_utilisation_du_processeur
name: CPU
icon: mdi:cpu-64-bit
color: rgb(68, 115, 158)
height: 27px
min: "0"
max: "100"
target: "90"
positions:
name: inside
indicator: "off"
card_mod:
style:
ha-icon $: |
ha-svg-icon {
margin-top: 7px;
margin-left: 7px;
}
.: |
ha-card {
margin-top: -21px;
margin-left: -3px;
margin-right: -5px;
background: none;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
margin: 5px;
}
ha-icon {
margin-top: -15px;
margin-left: 0px;
width: 42px;
height: 38px;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
border-radius: 50px;
}
- type: custom:bar-card
entities:
- entity: sensor.nasqnap_utilisation_de_la_memoire
name: RAM
icon: mdi:thermometer
height: 27px
color: red
min: "1"
max: "80"
target: "65"
decimal: 0
positions:
name: inside
indicator: "off"
card_mod:
style:
ha-icon $: |
ha-svg-icon {
margin-top: 7px;
margin-left: 7px;
}
.: |
ha-card {
margin-top: -21px;
margin-left: -15px;
margin-right: -2px;
background: none;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
margin: 5px;
}
ha-icon {
margin-top: -13px;
margin-left: 0px;
width: 42px;
height: 38px;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
border-radius: 50px;
}
- type: custom:mod-card
card:
type: vertical-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.nasqnap_volume_utilise_datavol1
name: HDD Raid1 4To
icon: mdi:harddisk
height: 27px
color: green
min: 1
max: 100
target: 70
decimal: 0
positions:
indicator: "off"
card_mod:
style:
ha-icon $: |
ha-svg-icon {
margin-top: 6px;
margin-left: 6px;
.: |
ha-card {
margin-top: -32px;
margin-left: -3px;
margin-right: -2px;
box-shadow: none;
background: none;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
margin: 5px;
}
ha-icon {
margin-top: -15px;
margin-left: 0px;
width: 42px;
height: 38px;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
border-radius: 50px;
}
- type: horizontal-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.nasqnap_temperature_du_processeur
name: NAS
icon: mdi:blank
height: 27px
color: orange
min: 1
max: 60
target: 50
positions:
name: inside
indicator: "off"
severity:
- color: Green
from: 0
to: 40
- color: Orange
from: 41
to: 50
- color: Red
from: 51
to: 60
card_mod:
style: |
ha-card {
margin-top: -30px;
margin-left: -10px;
margin-right: -2px;
font-size: 13px;
background: none;
}
ha-icon {
--mdc-icon-size: 55px;
background: url("/local/img/ts264.png");
background-size: 100% 100%;
margin-top: -10px;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
margin: 5px;
}
- type: custom:bar-card
entities:
- entity: sensor.nasqnap_temperature_du_lecteur_0_3
name: HDD1
icon: mdi:blank
height: 27px
color: orange
min: 1
max: 60
target: 50
positions:
name: inside
indicator: "off"
card_mod:
style: |
ha-card {
margin-top: -30px;
margin-left: -13px;
margin-right: -2px;
font-size: 13px;
}
ha-icon {
--mdc-icon-size: 40px;
background: url("/local/img/DD.png");
background-size: 100% 100%;
margin-top: -10px;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
margin: 5px;
}
- type: custom:bar-card
entities:
- entity: sensor.nasqnap_temperature_du_lecteur_0_4
name: HDD2
icon: mdi:blank
height: 27px
color: orange
min: 1
max: 60
target: 50
positions:
name: inside
indicator: "off"
card_mod:
style: |
ha-card {
margin-top: -30px;
margin-left: -13px;
margin-right: -2px;
box-shadow: none;
font-size: 13px;
}
ha-icon {
--mdc-icon-size: 40px;
background: url("/local/img/DD.png");
background-size: 100% 100%;
margin-top: -10px;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
margin: 5px;
}
- type: horizontal-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.nasqnap_eth0_download
name: Download
icon: mdi:download-network
decimal: 0
height: 27px
direction: right
positions:
icon: inside
name: inside
minmax: "off"
indicator: "off"
color: green
entity_row: true
card_mod:
style: |
ha-card {
font-size: 14px;
margin: -14px -8px 0px -5px;
--mdc-icon-size: 20px;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
- type: custom:bar-card
entities:
- entity: sensor.nasqnap_eth0_upload
direction: right
name: Upload
icon: mdi:upload-network
decimal: 0
height: 27px
color: rgb(250, 0, 1)
entity_row: true
positions:
icon: inside
indicator: "off"
name: inside
minmax: "off"
card_mod:
style: |
ha-card {
font-size: 14px;
margin: -14px -3px 0px -11px;
--mdc-icon-size: 20px;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
- type: custom:vertical-stack-in-card
horizontal: true
card_mod:
style: |
ha-card {
margin-top: -18px;
margin-bottom: 2px;
background-color: none;
}
cards:
- type: custom:mushroom-template-card
primary: Baie inform...
secondary: " "
entity: switch.prise_baie
icon: mdi:fan
fill_container: false
layout: horizontal
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset;
--shape-color: rgba(32,32,32,0.2) !important;
{% if is_state('switch.prise_baie','on') %}
--icon-color: green;
{% else %}
--icon-color: red;
{% endif %}
}
.: |
ha-card {
background: none;
}
- type: custom:bar-card
entities:
- entity: sensor.baie_informatique_temperature
name: Temp
icon: mdi:temperature-celsius
color: rgb(68, 115, 158)
height: 27px
min: "0"
max: "50"
target: "27"
positions:
name: inside
indicator: "off"
severity:
- color: Green
from: 0
to: 26
- color: Orange
from: 27
to: 35
- color: Red
from: 36
to: 50
card_mod:
style:
ha-icon $: |
ha-svg-icon {
margin-top: 7px;
margin-left: 7px;
}
.: |
ha-card {
margin-right: -70px;
margin-bottom: -20px;
background: none;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
margin: 5px;
}
ha-icon {
margin-top: -15px;
margin-left: 0px;
width: 42px;
height: 38px;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
border-radius: 50px;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.prise_baie
icon: |
{% if is_state('switch.prise_baie', 'on') %}
mdi:toggle-switch
{% else %}
mdi:toggle-switch-off
{% endif %}
content: |
{% if is_state('switch.prise_baie','on') %}
Allumé
{% else %}
Éteint
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 27px;
--chip-icon-size: 20px;
--chip-font-size: 14px;
{% if is_state('switch.prise_baie','on') %}
--color: green;
{% else %}
--color: red;
{% endif %}
}
alignment: end
card_mod:
style: |
ha-card {top:60%;right:5%}
card_mod:
style: |
ha-card {
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 3px 3px 4px 0px rgba(0,0,0,0.5);
}
dans le bar_card, dans la partie card_mod, modifie le margin-right . Diminue le , -50px ou moins
Hello
Dans ma carte onduleur je viens de remarquer un petit defaut.
LA ligne Rouge charging est coupee sur le bas. Pourtant j’ai fais des copié/coller et les codes de chaque ligne sont identiques me semble t’il
type: custom:vertical-stack-in-card
cards:
- type: custom:button-card
entity: sensor.eaton1_etat
name: Eaton 3S<br/>850VA
aspect_ratio: 1.8/1
layout: icon_name_state2nd
show_icon: true
show_name: true
show_label: true
show_entity_picture: true
entity_picture: /local/img/eaton1.png
styles:
icon:
- width: 95%
name:
- font-size: 15px
- margin-left: "-30px"
custom_fields:
statut:
- top: 60%
- left: 38%
- position: absolute
- font-size: 13.5px
input:
- top: 80%
- left: 38%
- position: absolute
- font-size: 13.5px
custom_fields:
statut: |
[[[
if (states['sensor.eaton1_etat'].state == "Online") return `<ha-icon icon='mdi:information-outline' style='width: 20px; height: 20px; color: rgb(68, 115, 158);'></ha-icon>
<span>Statut: <span style='color: green;'>${states['sensor.eaton1_etat'].state}</span></span>`; else return `<ha-icon icon='mdi:information-outline' style='width: 20px; height: 20px; color: rgb(68, 115, 158);'></ha-icon> <span>Statut: <span style='color: red;'>${states['sensor.eaton1_etat'].state}</span></span>`
]]]
input: |
[[[
if (states['sensor.eaton1_code_d_etat'].state == "OL") return `<ha-icon icon='mdi:information-outline' style='width: 20px; height: 20px; color: rgb(68, 115, 158);'></ha-icon>
<span>Statut data: <span style='color: green;'>${states['sensor.eaton1_code_d_etat'].state}</span></span>`; else return `<ha-icon icon='mdi:information-outline' style='width: 20px; height: 20px; color: rgb(68, 115, 158);'></ha-icon> <span>Statut data: <span style='color: red;'>${states['sensor.eaton1_code_d_etat'].state}</span></span>`
]]]
hold_action:
action: more-info
entity: sensor.ups_status_data
card_mod:
style: |
ha-card {
box-shadow: none;
}
- type: custom:mod-card
card:
type: vertical-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.eaton1_tension_de_sortie
name: Input
icon: mdi:sine-wave
height: 17px
color: rgb(68, 115, 158)
min: 1
max: 250
target: 240
positions:
icon: inside
indicator: "off"
card_mod:
style: |
ha-card {
margin-top: -8px;
margin-left: -11px;
margin-right: -4px;
box-shadow: none;
}
ha-icon {
--mdc-icon-size: 18px;
color: white;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 4px;
}
bar-card-name {
margin: -5px;
}
- type: custom:bar-card
entities:
- entity: sensor.eaton1_tension_de_sortie
name: Output
icon: mdi:sine-wave
height: 17px
color: green
min: 1
max: 250
target: 240
positions:
icon: inside
indicator: "off"
card_mod:
style: |
ha-card {
margin-top: -23px;
margin-left: -11px;
margin-right: -4px;
box-shadow: none;
}
ha-icon {
--mdc-icon-size: 18px;
color: white;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 4px;
}
bar-card-name {
margin: -5px;
}
- type: custom:bar-card
entities:
- entity: sensor.eaton1_charge
name: Load
height: 17px
color: orange
min: 1
max: 100
target: 90
positions:
icon: inside
indicator: "off"
card_mod:
style: |
ha-card {
margin-top: -23px;
margin-left: -11px;
margin-right: -4px;
box-shadow: none;
}
ha-icon {
--mdc-icon-size: 18px;
color: white;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 4px;
}
bar-card-name {
margin: -5px;
}
- type: custom:bar-card
entities:
- entity: sensor.eaton1_charge_de_la_batterie
name: Charging
icon: mdi:battery-high
height: 17px
color: red
min: 1
max: 100
target: 10
positions:
icon: inside
indicator: "off"
card_mod:
style: |
ha-card {
margin-top: -23px;
margin-left: -11px;
margin-right: -4px;
box-shadow: none;
height: 45px;
}
ha-icon {
--mdc-icon-size: 18px;
color: white;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 4px;
}
bar-card-name {
margin: -5px;
}
- type: custom:bar-card
entities:
- entity: sensor.eaton1_autonomie_de_la_batterie
name: Autonomie
icon: mdi:timer-check-outline
height: 17px
color: grey
min: 1
max: 35
target: 1
positions:
icon: inside
indicator: "off"
card_mod:
style: |
ha-card {
margin-top: -23px;
margin-left: -11px;
margin-right: -4px;
box-shadow: none;
height: 45px;
}
ha-icon {
--mdc-icon-size: 18px;
color: white;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 4px;
}
bar-card-name {
margin: -5px;
}
Une idee?
Merci
Et une autre question du coup
Avec windows que puis utiliser pour editer les fichiers yaml
J’ai notepad++ mais ca reste très peu lisible il me semble
Y a t’il d autres alternatives sans que ce soit hyper complexe
Merci
il faut ajouter dans la partie card_mod / ha-card de la bar-card de Autonomie un background: none;.
J’utilise notepad++, pas d’autre solution à te proposer.