Liebe Community,
heute wende ich mich an euch, weil ich seit über einem Monat eine Möglichkeit suche, Werte per Slider einzustellen. Natürlich soll das zu meinem Dashboard passen, das ich auf dem Mushroom-Stil aufgebaut habe. ( Kompaktes Dashboard mit Templates für alle Elemente ).
Eine Statusanzeige habe ich z.B. schon mit einer custom:entity-progress-card realisiert.
- type: custom:entity-progress-card
entity: '[[entity]]'
name: '[[name]]'
icon: mdi:valve
hide: value
name_info: |
{{ states('[[entity]]', with_unit=False) | int }} {{ '%' }}
custom_info: >
{{ state_attr('[[climate]]', 'current_temperature') }} {{ '°C (soll:' }}
{{ state_attr('[[climate]]', 'temperature') }} {{ '°C)' }}
bar_color: orange
bar_effect: radius
reverse_secondary_info_row: true
max_value: 100
custom_theme:
- min: 0
max: 20
bar_color: peachpuff
icon: mdi:valve-closed
- min: 20
max: 90
bar_color: orange
icon: mdi:valve
- min: 90
max: 101
bar_color: orangered
icon: mdi:valve-open
Leider gelingt mir das für Slidereingabe nicht.
Hier sind meine Ansätze, die der Lösung am nächsten kommen:
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 65% 35%
column-garp: 0px
cards:
- type: custom:mushroom-number-card
entity: input_number.mindestfullstand_zisterne
name: Mindeststand einstellen
icon: mdi:waves-arrow-up
display_mode: slider
style: |
ha-card {
padding: 2px !important;
grid-column: span 2;
}
card_mod:
style: |
ha-card {
border: none;
}
mushroom-number-value-control {
--control-height: 15px;
}
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 100%
column-garp: 0px
cards:
- type: custom:flex-cells-card
column_count: 2
column_widths: []
card_padding: 8
overflow_x: false
header_from_first_row: false
cell_padding:
top: 0
right: 0
bottom: 0
left: 0
rows:
- cells:
- type: entity
value: input_number.mindestfullstand_zisterne
align: center
style:
icon_size: 24px
border-radius: 50%
padding: 10px
color: rgb(33, 150, 243)
background: rgba(33,150,243,0.2)
font_size: 20px
entity_display: icon
custom_css_enabled: true
custom_css: |
td {
border-radius: 50%;
height: 16px;
width: 16px;
margin-top: 8px;
}
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: string
value: ""
align: left
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- cells:
- type: string
value: Mindestfüllstand einstellen
align: left
style:
font_size: 14px
- type: entity
value: input_number.mindestfullstand_zisterne
align: left
show_control: true
use_entity_unit: true
style:
font_size: 14px
color: var(--slider-color)
custom_template_enabled: true
custom_template_html: |-
<style>
.row {
display: flex;
width: 100%;
}
.col-1 {
flex: 0 0 48px;
}
.col-2 {
flex: 1 1 0;
min-width: 0;
}
.info-container {
width: 100%;
box-sizing: border-box;
}
.icon-container .icon {
padding: 10px !important;
}
ha-slider {
width: 100% !important;
max-width: none !important;
}
ha-slider::part(container) {
width: 100% !important;
}
ha-slider::part(slider-container) {
width: 100% !important;
}
</style>
<div class="row">
<div class="col col-1">
<div class="icon-container">
<fcc class="icon" row="1" col="1" />
</div>
</div>
<div class="col col-2">
<div class="info-container">
<div>
<fcc class="header" row="2" col="1" />
<br>
<fcc class="current-value" row="2" col="2" />
</div>
</div>
</div>
</div>
card_mod:
style: |
ha-card {
border: none;
}
Bei der ersten Karte (Mushroom) hätte ich den Slider gerne hinter der Wertanzeige und mit einem “Thumb” (Anfasser), was ich nicht schaffe. Also fällt dieser Ansatz weg.
Die zweite Karte (flex-cells-card) kann eigentlich nur Zellen in einer Zeile anordnen. Durch ein “br” im HTML-Code habe ich den Inhalt der zweiten Zelle umgebrochen.
Sieht soweit schon ganz gut aus, aber: Ich bekomme den Slider nicht bis zum Ende des “info-container”, also zum rechten Rand, ausgedehnt. Der Container geht bis dort hin (background: red zeigt das). Ich habe schon viele Versuche, auch mit anderen Karten gemacht - vergebens.
Evtl. hat ja jemand von euch sowas schon mal gemacht oder eine neue Idee.
Jedenfalls schon mal vielen Dank im Voraus.
Werner
