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.
Pas mal en effet je vais l’essayer
Merci
jaimerai adapter cette carte a la bbox mais je sais pas ou commencer voici la carte:
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/Images/bouygues.jpg
card_mod:
style: |
ha-card {
border-radius: 0px;
}
- type: custom:vertical-stack-in-card
horizontal: true
card_mod:
style: |
ha-card {
margin-top: -15px;
background-color: none;
}
cards:
- type: custom:mushroom-template-card
primary: IP int/ext
secondary: " "
icon: mdi:ip-network
icon_color: "#44739E"
fill_container: true
layout: horizontal
tap_action:
action: none
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: 140px;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:ip
entity: sensor.bbox_ip_externe
content: "{{ state_attr('sensor.bbox_ip_externe','ip') }}"
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: 19px;
--chip-font-size: 14px;
--color: #44739e;
}
- type: template
entity: sensor.bbox_ip_address
icon: mdi:ip-outline
content: "{{ state_attr(\"bsensor.bbox_ip_address\" }}"
tap_action:
action: more-info
card_mod:
style: |
ha-card {
margin-left: 2px;
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: 19px;
--chip-font-size: 14px;
--color: #44739e;
}
alignment: end
card_mod:
style: |
ha-card {top:60%;right:5%;margin-left: -100px;}
- 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: true
layout: horizontal
tap_action:
action: none
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;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:wan
entity: binary_sensor.wan_status
content: "{{ state_attr(\"binary_sensor.wan_status\",\"link_state\") }}"
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 state_attr("binary_sensor.wan_status","link_state") == 'up' %}
--color: green;
{% else %}
--color: red;
{% endif %}
}
- type: template
icon: mdi:clock-start
entity: binary_sensor.wan_status
content: >-
{% set uptime = (now()| as_timestamp -
state_attr('binary_sensor.wan_status', 'uptime') |
as_timestamp ) %} {% set jours = (uptime / 86400) | int(0) %}
{%- if jours > 0 -%} {{ jours }}d {{ (uptime - (jours *
86400)) | int(0) | timestamp_custom('%Hh %Mm', false) }} {%-
else -%} {{ uptime | int(0) | timestamp_custom('%Hh %Mm',
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%;
}
- 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: Clients connectés
secondary: " "
icon: mdi:lan-connect
icon_color: "#44739E"
fill_container: true
layout: horizontal
tap_action:
action: none
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;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: fas:network-wired
entity: binary_sensor.wan_status
content: "{{ state_attr(\"binary_sensor.wan_status\",\"wired clients\") }}"
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: 19px;
--chip-font-size: 14px;
--color: #44739e;
}
- type: template
icon: mdi:access-point-network
entity: binary_sensor.wan_status
content: >-
{{ state_attr('binary_sensor.wan_status','wireless clients')
}}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
margin-left: 2px;
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%}
- 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: DNS
secondary: " "
icon: mdi:dns
icon_color: "#44739E"
fill_container: true
layout: horizontal
tap_action:
action: none
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;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.livebox_6_dynamic_dns_no_ip
icon: mdi:dns
content: NO-IP
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('binary_sensor.livebox_6_dynamic_dns_no_ip','off') %}
--color: green;
{% else %}
--color: red;
{% endif %}
}
- type: template
entity: binary_sensor.livebox_6_dynamic_dns_ovh_dynhost
icon: mdi:dns
content: OVH
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('binary_sensor.livebox_6_dynamic_dns_ovh_dynhost','off') %}
--color: green;
{% else %}
--color: red;
{% endif %}
}
alignment: end
card_mod:
style: |
ha-card {top:60%;right:5%}
- 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: Options
secondary: " "
icon: mdi:tools
icon_color: "#44739E"
fill_container: true
layout: horizontal
tap_action:
action: none
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: 130px;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: switch.wifi_switch
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:wifi
content_info: state
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.wifi_switch','on') %}
--color: green;
{% else %}
--color: red;
{% endif %}
}
- type: template
entity: binary_sensor.livebox_6_remote_access
icon: mdi:remote-desktop
content: >
{% if is_state('binary_sensor.livebox_6_remote_access','on')
%}
Activé
{% else %}
Désactivé
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
margin-left: 2px;
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('binary_sensor.livebox_6_remote_access','on') %}
--color: green;
{% else %}
--color: red;
{% endif %}
}
- type: entity
entity: button.ring_your_phone
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
name: Faire sonner
content_info: name
icon_color: "#44739E"
card_mod:
style: |
ha-card {
margin-left: 2px;
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;
}
alignment: end
card_mod:
style: |
ha-card {top:60%;right:5%;margin-left: -100px;}
- type: custom:mod-card
card_mod:
style: |
ha-card {
margin: 6px 10px 0 10px;
}
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: button.livebox_restart
color_type: icon
name: bbox v6<br/>Reboot
show_entity_picture: true
entity_picture: /local/Images/bbox_ultym.jpg
color: "#44739e"
aspect_ratio: 4.55/1
layout: icon_name
styles:
card:
- padding: 0.2em
- margin: "-10px 0"
- "--mdc-ripple-color": "#44739e"
- "--mdc-ripple-press-opacity": 0.5
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
- border-radius: 25px
icon:
- opacity: 1
name:
- font-size: 0.85em
- white-space: normal
state:
- font-size: 0.75em
- white-space: normal
label:
- font-size: 0.65em
- white-space: normal
hold_action:
action: more-info
- type: custom:button-card
entity: binary_sensor.call_missed
color_type: icon
aspect_ratio: 4.55/1
icon: mdi:phone-alert
name: Appels manqués View/Reset
layout: icon_name
size: 45%
state:
- value: "on"
color: rgb(250, 0, 1)
icon: mdi:phone-alert
- value: "off"
color: rgb(0, 102, 0)
icon: mdi:phone-check
styles:
card:
- padding: 0.2em
- margin: "-10px 0"
- "--mdc-ripple-color": "#44739e"
- "--mdc-ripple-press-opacity": 0.5
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
- border-radius: 25px
icon:
- opacity: 1
name:
- font-size: 0.85em
- white-space: normal
state:
- font-size: 0.75em
- white-space: normal
label:
- font-size: 0.65em
- white-space: normal
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
right_button: Fermer
right_button_action:
service: browser_mod.close_popup
data:
browser_id: THIS
browser_id: THIS
size: normal
style: |-
--popup-border-radius: 10px;
--popup-padding-y: -15px;
--popup-padding-x: 5px;
content:
type: markdown
content: >-
{% if states('binary_sensor.call_missed') == 'on' %} {% for
phone in
state_attr('binary_sensor.call_missed','missed_calls') %} *
📞**Numéro:** {{ phone.phone_number }}, appel à {{
as_timestamp(phone.date) | timestamp_custom('%HH%M le
%d/%m/%y') }} {% endfor %} {% else %} 📞 Aucun appel manqué.
{% endif %}
title: Appels manqués
double_tap_action:
action: call-service
service: livebox.remove_call_missed
hold_action:
action: more-info
- type: horizontal-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.bbox_vitesse_de_telechargement
name: Download
icon: fas:download
color: "#336600"
entity_row: true
min: 1
max: 1000
positions:
icon: inside
minmax: "off"
animation:
state: "on"
speed: "1"
height: 27px
decimal: 0
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.bbox_vitesse_de_telechargement_montant
direction: right
name: Upload
icon: fas:upload
color: rgb(250, 0, 1)
entity_row: true
min: 1
max: 800
positions:
icon: inside
minmax: "off"
animation:
state: "on"
speed: "1"
height: 27px
decimal: 0
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:mini-graph-card
decimals: 0
hour24: true
height: 91
hours_to_show: 24
line_width: 2
entities:
- entity: sensor.speedtest_cli_ping
name: Ping
show:
fill: true
graph: line
icon: true
name: true
state: true
labels: false
extrema: false
average: false
icon_adaptive_color: true
align_icon: right
align_state: left
font_size: 70
animate: false
color_thresholds:
- value: 10
color: "#336600"
- value: 15
color: "#f39c12"
- value: 20
color: "#d35400"
- value: 30
color: "#c0392b"
card_mod:
style: |
ha-card .header.flex .name.flex {
color: #44739e;
font-size: 14px;
}
.header.flex .icon {
color: #44739e;
}
.fill {
fill: white;
opacity: 1 !important;
}
ha-card {
margin-top: -18px !important;
box-shadow: none;
}
ha-card .states.flex::after {
content: "Opérateur: {{states('sensor.speedtest_isp')}} Fibre 2Gb/s \A Serveur: {{states('sensor.speedtest_location')}} - {{states('sensor.speedtest_server_name')}}";
white-space: pre;
padding: 2px 10px 0px 10px;
margin-top: -10px;
margin-right: -4px;
border-radius: 25px;
font-size: 14px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.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);
}
Il faut le redimensionner sur ton pc. Si tu réutilises le même non pour ton image redimensionne, il faudra vider le cache de ton navigateur, sinon tu verras toujours l’ancienne image.
il faut remplacé par t’es entités.
si tu as une information dans les attributs:
{{ state_attr('sensor.bbox_ip_externe','ip') }}
si c’est dans l’état de l’entité:
{{ states("sensor.bbox_ip_address" }}
Tu peux regarder dans outils de dev, onglet état. ou sont les informations des t’es entité.