Misux
4. Februar 2025 um 16:28
1
HI!
Ich habe mir einr Vertical Stack Card gebastelt bekomme aber die beiden Linken bereiche nicht ausgerichtet…
Die Gauge sollte in der MItte sein und die beiden DC2 rechts davon…
Hat einer eine Tipp wie ich das angehen soll? Bekomme es nicht hin…
HIer der Code:
type: vertical-stack
cards:
- square: true
type: grid
cards:
- type: vertical-stack
cards:
- type: custom:mod-card
card:
show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sensor.kostalwr_dc1_voltage
show_state: true
name: DC1
icon_height: 20px
card_mod:
style:
.: |
ha-card {
width: 80px;
height: 100px !important;
top: px;
padding: 0px 0px 0px 0px;
background: rgb(75, 75, 75);
border: 5px solid rgb(0, 0, 0);
border-radius: 10px;
- type: custom:mod-card
card:
show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sensor.kostalwr_dc1_current
show_state: true
name: DC1
icon_height: 20px
card_mod:
style:
.: |
ha-card {
width: 80px;
height: 100px !important;
top: px;
padding: 0px 0px 0px 0px;
background: rgb(75, 75, 75);
border: 5px solid rgb(0, 0, 0);
border-radius: 10px;
- type: custom:mod-card
card:
type: gauge
entity: sensor.kostalwr_sum_power_of_all_pv_dc_inputs
name: PV Leistung
min: 0
max: 10000
theme: Graphite Light
needle: false
severity:
green: 6666
yellow: 3333
red: 6666
tap_action:
action: navigate
navigation_path: /pv-anlage
card_mod:
style:
.: |
ha-card {
width: 300px;
height: 200px !important;
top: 0px;
padding: 0px 0px 0px 0px;
background: rgb(75, 75, 75);
border: 5px solid rgb(0, 0, 0);
border-radius: 10px;
}
.name {
font-size: 17px !important;
font-weight: bold;
color: white !important;
position: absolute;
bottom: 2px;
padding: 0px 0px 0px 0px;
}
ha-gauge$: |
text.value-text {
font-size: 70px !important;
font-weight: bold;
fill: rgba(0,0,0, 1) !important;
text-anchor: middle;
}
- type: vertical-stack
cards:
- type: custom:mod-card
card:
show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sensor.kostalwr_dc2_voltage
show_state: true
name: DC2
icon_height: 20px
card_mod:
style:
.: |
ha-card {
width: 80px;
height: 100px !important;
top: px;
padding: 0px 0px 0px 0px;
background: rgb(75, 75, 75);
border: 5px solid rgb(0, 0, 0);
border-radius: 10px;
- type: custom:mod-card
card:
show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sensor.kostalwr_dc2_current
show_state: true
name: DC2
icon_height: 20px
card_mod:
style:
.: |
ha-card {
width: 80px;
height: 100px !important;
top: px;
padding: 0px 0px 0px 0px;
background: rgb(75, 75, 75);
border: 5px solid rgb(0, 0, 0);
border-radius: 10px;
- type: horizontal-stack
cards:
- graph: line
type: sensor
entity: sensor.kostalwr_home_power
detail: 2
name: Verbrauch
theme: amoled
icon: mdi:home-import-outline
- graph: line
type: sensor
entity: sensor.kostalwr_battery_soc
detail: 2
name: Batrerie
theme: amoled
icon: mdi:home-battery-outline
grid_options:
columns: 14
rows: 6
card_mod:
style: >
ha-card {
left: -0%;
width: 132%;
}
Versuche es mal mit “%” anstatt “px”. Das hat bei mir geklappt…
Hier habe ich es auch gemacht.
type: custom:vertical-stack-in-card
cards:
- type: heading
heading_style: title
heading: Bambu Lab P1S
icon: mdi:printer-3d
badges: []
card_mod:
style:
.: |
ha-card {
background-color: rgba(90, 90, 90, 0.5) !important;
--card-mod-icon-color: grey;
--primary-text-color: grey;
}
- type: custom:gap-card
height: 6
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.p1s_dusengrosse
primary_info: state
secondary_info: name
icon: mdi:printer-3d-nozzle
layout: vertical
card_mod:
style: |
ha-card {
/* Set size and spacing of button */
width: 70%;
}
/* Do the SIMPLE background stuff */
{% set color_icon = "blue" %}
ha-state-icon {
color: rgb( 33, 150, 243 );
}
mushroom-shape-icon {
--shape-color: rgba( 33, 150, 243, .2) !important;
}
/* Add subtle color on hover */
ha-card:hover {
background: color-mix(in srgb, var(--{{ color_icon }}-color) 25%, var(--card-background-color)) !important;
}
- type: custom:mushroom-entity-card
entity: sensor.p1s_aktueller_arbeitsschritt
primary_info: state
secondary_info: name
layout: vertical
icon: mdi:printer-3d
card_mod:
style: |
ha-card {
/* Set size and spacing of button */
left: -30%;
width: 160%;
}
/* Do the SIMPLE background stuff */
{% set color_icon = "blue" %}
ha-state-icon {
color: rgb( 33, 150, 243 );
}
mushroom-shape-icon {
--shape-color: rgba( 33, 150, 243, .2) !important;
}
/* Add subtle color on hover */
ha-card:hover {
background: color-mix(in srgb, var(--{{ color_icon }}-color) 25%, var(--card-background-color)) !important;
}
- type: custom:mushroom-entity-card
entity: sensor.p1s_dusentyp
primary_info: state
secondary_info: name
icon: mdi:printer-3d-nozzle
layout: vertical
card_mod:
style: |
ha-card {
/* Set size and spacing of button */
width: 70%;
left: 30%
}
/* Do the SIMPLE background stuff */
{% set color_icon = "blue" %}
ha-state-icon {
color: rgb( 33, 150, 243 );
}
mushroom-shape-icon {
--shape-color: rgba( 33, 150, 243, .2) !important;
}
/* Add subtle color on hover */
ha-card:hover {
background: color-mix(in srgb, var(--{{ color_icon }}-color) 25%, var(--card-background-color)) !important;
}
card_mod:
style: |
ha-card {
box-shadow: none;
border-radius: 10px 10px 10px 10px;
border: 1px solid rgba(90, 90, 90, 0.5);
padding: 6px;
background: rgba(0, 0, 0, 0.5)
}
1 „Gefällt mir“
Altrec
4. Februar 2025 um 16:36
3
Deine PV Leistung hat das Positionsattribut “absolut”. Alle anderen haben kein entsprechendes Attribut.
Häh? Keine Ahnung was Du da meinst.
Mit “%” habe ich das hinbekommen, mit “px” nicht.
Misux
4. Februar 2025 um 17:24
5
Habs hinbekommen!
Vielen Dank!
type: vertical-stack
cards:
- square: false
type: grid
cards:
- type: vertical-stack
cards:
- type: custom:mod-card
card:
show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sensor.kostalwr_dc1_voltage
show_state: true
name: DC1
icon_height: 20px
card_mod:
style:
.: |
ha-card {
width: 50%; !important;
background: rgb(75, 75, 75);
border: 5px solid rgb(0, 0, 0);
border-radius: 10px;
- type: custom:mod-card
card:
show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sensor.kostalwr_dc1_current
show_state: true
name: DC1
icon_height: 20px
card_mod:
style:
.: |
ha-card {
width: 50%; !inportant;
background: rgb(75, 75, 75);
border: 5px solid rgb(0, 0, 0);
border-radius: 10px;
- type: custom:mod-card
card:
type: gauge
entity: sensor.kostalwr_sum_power_of_all_pv_dc_inputs
name: ""
min: 0
max: 10000
theme: Graphite Light
needle: false
severity:
green: 6666
yellow: 3333
red: 6666
tap_action:
action: navigate
navigation_path: /pv-anlage
card_mod:
style:
.: |
ha-card {
left: -55%;
width: 210%; !important;
background: rgb(0, 0, 0);
border: 5px solid rgb(0, 0, 0);
border-radius: 10px;
}
ha-gauge$: |
text.value-text {
font-size: 320% !important;
font-weight: bold;
fill: rgba(124,252,0, 1) !important;
text-anchor: middle;
}
- type: vertical-stack
cards:
- type: custom:mod-card
card:
show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sensor.kostalwr_dc2_voltage
show_state: true
name: DC2
icon_height: 20px
card_mod:
style:
.: |
ha-card {
left: 50%;
width: 50%; !important;
padding: 0px 0px 0px 0px;
background: rgb(75, 75, 75);
border: 5px solid rgb(0, 0, 0);
border-radius: 10px;
- type: custom:mod-card
card:
show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sensor.kostalwr_dc2_current
show_state: true
name: DC2
icon_height: 20px
card_mod:
style:
.: |
ha-card {
left: 50%;
width: 50%; !important;
background: rgb(75, 75, 75);
border: 5px solid rgb(0, 0, 0);
border-radius: 10px;
- type: horizontal-stack
cards:
- graph: line
type: sensor
entity: sensor.kostalwr_home_power
detail: 2
name: Verbrauch
theme: amoled
icon: mdi:home-import-outline
- graph: line
type: sensor
entity: sensor.kostalwr_battery_soc
detail: 2
name: Batrerie
theme: amoled
icon: mdi:home-battery-outline
grid_options:
columns: 14
rows: 6
Misux
4. Februar 2025 um 17:25
6
Magst du mir vielleicht deinen Code geben? sieht auch interessant auc deine Karte der PVAnlage.
Bitte schön… Musst VERTICAL-STACK etc. installiert haben.
type: custom:vertical-stack-in-card
cards:
- type: heading
heading_style: title
icon: mdi:information-outline
badges:
- type: entity
entity: weather.mannheim_hourly
- type: entity
entity: sensor.solarfocus_biomass_boiler_outdoor_temperature
heading: IdAW
card_mod:
style:
.: |
ha-card {
background-color: rgba(90, 90, 90, 0.5) !important;
--card-mod-icon-color: grey;
--primary-text-color: grey;
}
- type: custom:gap-card
height: 6
- type: horizontal-stack
cards:
- type: custom:mushroom-person-card
entity: person.roberto_cravallo
icon_type: entity-picture
layout: vertical
fill_container: true
card_mod:
style: |
ha-card {
width: 70%;
}
{% if is_state('switch.steckdose_elippsentrainer', 'on') %}
ha-card {
--ha-card-border-radius: 10px;
--ha-card-border-color: #990000;
--ha-card-border-width: 2px;
--card-mod-icon-color: white;
{% endif %}
}
- type: custom:flex-horseshoe-card
card_mod:
style: |
ha-card {
left: -31%;
width: 132%;
}
{% if is_state('sensor.sma_strom_autarkie_prozent', "100" ) %}
ha-card {
--ha-card-border-radius: 10px;
--ha-card-border-color: green;
--ha-card-border-width: 1px;
--card-mod-icon-color: white;
{% endif %}
}
entities:
- entity: sensor.sunny_boy_grid_power_safe
decimals: 0
icon: mdi:solar-power-variant
name: Solaranlage
area: Solarstrom
- entity: sensor.sma_strom_eigenverbrauch_prozent
decimals: 0
name: Eigenverbrauch
- entity: sensor.sma_strom_autarkie_prozent
decimals: 0
name: Autargie
show:
scale_tickmarks: true
horseshoe_style: lineargradient
layout:
hlines:
- id: 0
xpos: 50
ypos: 41
length: 70
styles:
- stroke: var(--primary-text-color);
- stroke-width: 2;
- opacity: 0.5;
- stroke-linecap: round;
color: "#FFF6E3"
vlines:
- id: 0
xpos: 50
ypos: 56
length: 20
styles:
- stroke: var(--primary-text-color);
- opacity: 0.5;
- stroke-width: 2;
- stroke-linecap: round;
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 36
styles:
- font-size: 2.8em;
- id: 1
entity_index: 1
xpos: 48
ypos: 56
styles:
- font-size: 2.2em;
- text-anchor: end;
- font-style: normal;
- opacity: 0.7;
- id: 2
entity_index: 2
xpos: 52
ypos: 56
styles:
- font-size: 2.2em;
- text-anchor: start;
- font-style: normal;
- opacity: 0.7;
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 94
styles:
- font-size: 1.5em;
- text-transform: capitalize;
- id: 1
entity_index: 1
xpos: 46
ypos: 62
styles:
- font-size: 0.6em;
- text-anchor: end;
- opacity: 0.5;
- text-transform: capitalize;
- id: 2
entity_index: 2
xpos: 54
ypos: 62
styles:
- font-size: 0.6em;
- text-anchor: start;
- opacity: 0.5;
- text-transform: capitalize;
areas:
- id: 0
entity_index: 0
xpos: 50
ypos: 76
styles:
- font-size: 1.0em;
- opacity: 0.4;
horseshoe_state:
color: "#43a047"
horseshoe_scale:
min: 0
max: 5000
color: "#2e7031"
width: 2
color_stops:
"1000": "#43a047"
"2000": "#32CD32"
"3100": "#ADFF2F"
- type: custom:flex-horseshoe-card
card_mod:
style: >
ha-card {
left: -0%;
width: 132%;
}
{% set external_power =
states('sensor.sunny_boy_metering_power_absorbed_safe') | round(0)
%}
{% if external_power > 0 %}
ha-card {
--ha-card-border-radius: 10px;
--ha-card-border-color: #db4437;
--ha-card-border-width: 1px;
--card-mod-icon-color: white;
{% endif %}
}
entities:
- entity: sensor.sunny_boy_metering_current_consumption_safe
decimals: 0
icon: mdi:solar-power-variant
name: Netzdaten
area: Strom
- entity: sensor.sunny_boy_metering_power_absorbed_safe
decimals: 0
name: Netzbezug
- entity: sensor.sunny_boy_metering_power_supplied_safe
decimals: 0
name: Überschuss
show:
scale_tickmarks: true
horseshoe_style: lineargradient
layout:
hlines:
- id: 0
xpos: 50
ypos: 41
length: 70
styles:
- stroke: var(--primary-text-color);
- stroke-width: 2;
- opacity: 0.5;
- stroke-linecap: round;
color: "#FFF6E3"
vlines:
- id: 0
xpos: 50
ypos: 56
length: 20
styles:
- stroke: var(--primary-text-color);
- opacity: 0.5;
- stroke-width: 2;
- stroke-linecap: round;
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 36
styles:
- font-size: 2.8em;
- id: 1
entity_index: 1
xpos: 48
ypos: 56
styles:
- font-size: 2.2em;
- text-anchor: end;
- font-style: normal;
- opacity: 0.7;
- id: 2
entity_index: 2
xpos: 52
ypos: 56
styles:
- font-size: 2.2em;
- text-anchor: start;
- font-style: normal;
- opacity: 0.7;
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 94
styles:
- font-size: 1.5em;
- text-transform: capitalize;
- id: 1
entity_index: 1
xpos: 46
ypos: 62
styles:
- font-size: 0.6em;
- text-anchor: end;
- opacity: 0.5;
- text-transform: capitalize;
- id: 2
entity_index: 2
xpos: 54
ypos: 62
styles:
- font-size: 0.6em;
- text-anchor: start;
- opacity: 0.5;
- text-transform: capitalize;
areas:
- id: 0
entity_index: 0
xpos: 50
ypos: 76
styles:
- font-size: 1.0em;
- opacity: 0.4;
horseshoe_state:
color: "#db4437"
horseshoe_scale:
min: 0
max: 7000
color: "#990000"
width: 2
color_stops:
"0": "#db4437"
"90": "#db4437"
- type: custom:mushroom-person-card
entity: person.sylvia
icon_type: entity-picture
layout: vertical
fill_container: true
card_mod:
style: |
ha-card {
width: 70%;
left: 30%
}
{% if is_state('switch.steckdose_elippsentrainer', 'on') %}
ha-card {
--ha-card-border-radius: 10px;
--ha-card-border-color: #990000;
--ha-card-border-width: 2px;
--card-mod-icon-color: white;
{% endif %}
}
card_mod:
style: |
ha-card {
box-shadow: none;
border-radius: 10px 10px 10px 10px;
border: 1px solid rgba(90, 90, 90, 0.5);
padding: 6px;
background: rgba(0, 0, 0, 0.5)
}
Die Lösung mit den % war doch wohl von mir, oder? Du hast nicht die Lösung präsentiert, sondern das, was Du mit der Lösung (% statt px von mir) gemacht hast. Wäre schön, wenn Du das korrigieren würdest.
Misux
6. Februar 2025 um 15:49
9
Hab ich doch… Deinen Vorschlag habe ich in der Mittleren Karte und an manchen Bereichen der kleinen drumrum angewendet.
Das was du da als Screenshot “markiert” markiert hast ist nur eine kleiner Teil der Nicht stört. Das ist nur die Größe vom Symbol der DC1 und 2 Eingänge. Das hat keine Probleme gemacht.
Ausschlaggebend für die Ausrichtung war
left: -55%; und left: 55%;
Habe den ganzen Code unter dem Bild angefügt.
Du hast aber Deinen Beitrag als “Lösung” markiert, nicht Meinen.
Misux
6. Februar 2025 um 16:02
11
Achsoo… das meinst du… Ja, weil dort die Lösung dargestellt ist… Aber von Mir aus
1 „Gefällt mir“