Die Steuerung der Raffstores in HA unterscheidet sich leider fundamental von der Steuerung in KNX. 100% in HA entsprechen 0% in KNX, was schon mal sehr gewöhnungsbedürftig ist. Zudem kann man in KNX die Raffstore mit einem Einzelschritt steuern, was die Cover entität in HA schlicht nicht unterstützt, ich aber als super praktisch empfinde. Bei den Cover Cards die ich gefunden habe vermisse ich eine visuell informative Darstellung des Zustands und eine KNX ähnliche Bedienung.
Daher habe ich etwas zusammengesbastelt, das das alles umsetzt:
grafik.png
Optisch vielleicht ausbaufähig, aber die Grafik find ich genial.
Das Bild zeigt den Öffnungszustand sauber an, ebenso die Lamellenposition. Damit erhalte ich sofort einen Überblick über alle Raffstores auf dem Stockwerk. Mit den oberen Pfeiltasten kann die Raffstores steuern, wie bei MDT Tastern (kurz: EInzelschrit, lang: komplette Fahrt). Die Komplette Fahrt habe ich noch darunter als Taster, sowie einen Beschattungstaster, der die Lamellen einfach auf macht. Bei mir ist alles in einem Popup der Bubble Card versteckt.
Die Darstellung der Grafik wird über ein dynamsiches SVG Bild gelöst, die Einzelschrittsteuerung über eine extra switch entität. Damit ich es mehrfach verwenden kann, habe ich im Dashboard ein Template erstellt, das ich dann mehrfach einbinden kann.
Die YAML Datei für KNX:
Im RAW Konfigurationseditor des Dashboards, vor dem Eintrag views:
Und dann im Dashboard als Karte bspw.
Es wird HACS benötigt, mit decluttering-card, stack in card, layout card, bubble-card,
Daher habe ich etwas zusammengesbastelt, das das alles umsetzt:
grafik.png
Optisch vielleicht ausbaufähig, aber die Grafik find ich genial.
Das Bild zeigt den Öffnungszustand sauber an, ebenso die Lamellenposition. Damit erhalte ich sofort einen Überblick über alle Raffstores auf dem Stockwerk. Mit den oberen Pfeiltasten kann die Raffstores steuern, wie bei MDT Tastern (kurz: EInzelschrit, lang: komplette Fahrt). Die Komplette Fahrt habe ich noch darunter als Taster, sowie einen Beschattungstaster, der die Lamellen einfach auf macht. Bei mir ist alles in einem Popup der Bubble Card versteckt.
Die Darstellung der Grafik wird über ein dynamsiches SVG Bild gelöst, die Einzelschrittsteuerung über eine extra switch entität. Damit ich es mehrfach verwenden kann, habe ich im Dashboard ein Template erstellt, das ich dann mehrfach einbinden kann.
Die YAML Datei für KNX:
Code:
knx:
switch:
- name: "UG_Schiebetuer_Links Short Move"
address: "3/1/1"
cover:
- name: "UG_Schiebetuer_Links"
move_long_address: "3/1/0"
move_short_address: "3/1/1"
#stop_address: "3/0/4"
position_address: "3/1/2"
angle_address: "3/1/3"
position_state_address: "3/1/5"
angle_state_address: "3/1/6"
#travelling_time_down: 50
#travelling_time_up: 50
Code:
button_card_templates:
raffstore_svg_card:
show_icon: false
show_state: false
show_name: false
custom_fields:
raffstore_svg: |
[[[
const pos = 100 - (entity.attributes.current_position ?? 0);
const tilt = 100 - (entity.attributes.current_tilt_position ?? 50);
const totalSlats = 8;
const visibleSlats = Math.round(pos / 100 * totalSlats);
const slatH = 2 + (tilt / 100) * 12;
const spacing = 17;
const slatStartY = 8;
const clipId = entity.entity_id.replace(/\./g, '_');
let slatsHTML = '';
let slatY = 0;
for (let i = 0; i < visibleSlats; i++) {
slatY = slatStartY + i * spacing;
slatsHTML += `<rect x="7" y="${slatY}" width="110" height="${slatH}"
rx="1" fill="#94a3b8" stroke="#64748b" stroke-width="0.6"/>`;
}
let bottomRailY;
if (visibleSlats === 0) {
bottomRailY = slatStartY;
} else {
bottomRailY = slatY + spacing;
}
const bottomRail = `<rect x="5" y="${bottomRailY.toFixed(2)}" width="110" height="6" rx="2"
fill="#475569" stroke="#334155" stroke-width="0.8"/>`;
return `
<svg xmlns="http://www.w3.org/2000/svg"
width="55" height="90" viewBox="0 0 120 160">
<defs>
<clipPath id="clip-${clipId}">
<rect x="4" y="0" width="110" height="144" rx="2"/>
</clipPath>
</defs>
<rect x="1" y="1" width="118" height="158" rx="0"
fill="#1e293b" stroke="#0f172a" stroke-width="1.5"/>
<rect x="4" y="4" width="112" height="152" rx="2"
fill="#FFFFFF" fill-opacity="1"/>
<line x1="28" y1="7" x2="28" y2="${bottomRailY}"
stroke="#94a3b8" stroke-width="1" opacity="0.6"/>
<line x1="92" y1="7" x2="92" y2="${bottomRailY}"
stroke="#94a3b8" stroke-width="1" opacity="0.6"/>
<g clip-path="url(#clip-${clipId})">${slatsHTML}</g>
${bottomRail}
</svg>`;
]]]
custom_fields_css:
raffstore_svg:
- display: flex
- justify-content: center
- padding: 8px 0 4px 0
styles:
card:
- background: transparent
- box-shadow: none
- border: 0px
- border-radius: 50px
- padding: 0px
- height: 100%
grid:
- grid-template-areas: '"raffstore_svg" "n" "s"'
- grid-template-rows: auto auto auto
tap_action:
action: more-info
hold_action:
action: more-info
decluttering_templates:
raffstore_card:
default:
- name: Raffstore
card:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: separator
name: '[[name]]'
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 2fr
grid-template-rows: auto
gap: 8px
cards:
- type: custom:button-card
template: raffstore_svg_card
entity: '[[cover_entity]]'
- type: custom:bubble-card
card_type: sub-buttons
rows: 1.625
sub_button:
bottom:
- name: Gruppe 1
buttons_layout: inline
group:
- icon: mdi:arrow-up-bold
tap_action:
action: perform-action
perform_action: switch.turn_off
target:
entity_id: '[[switch_entity]]'
hold_action:
action: perform-action
perform_action: cover.open_cover
target:
entity_id: '[[cover_entity]]'
- icon: mdi:arrow-down-bold
tap_action:
action: perform-action
perform_action: switch.turn_on
target:
entity_id: '[[switch_entity]]'
hold_action:
action: perform-action
perform_action: cover.close_cover
target:
entity_id: '[[cover_entity]]'
- name: Gruppe 2
buttons_layout: inline
group:
- icon: mdi:arrow-collapse-up
tap_action:
action: perform-action
perform_action: cover.open_cover
target:
entity_id: '[[cover_entity]]'
- name: Beschatten
show_icon: true
show_name: true
icon: mdi:sunglasses
tap_action:
action: perform-action
perform_action: cover.open_cover_tilt
target:
entity_id: '[[cover_entity]]'
- icon: mdi:arrow-collapse-down
tap_action:
action: perform-action
perform_action: cover.close_cover
target:
entity_id: '[[cover_entity]]'
fill_width: true
bottom_layout: rows
styles: |-
.bubble-sub-button {
background-color: var(--secondary-background-color);
}
.bubble-container {
background-color: transparent;
}
Code:
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: raffstore_card
variables:
- cover_entity: cover.ug_fenster_spielzimmer
- switch_entity: switch.ug_fenster_spielzimmer_short_move
- name: Spielzimmer
- type: custom:decluttering-card
template: raffstore_card
variables:
- cover_entity: cover.ug_fenster_esszimmer
- switch_entity: switch.ug_fenster_esszimmer_short_move
- name: Esszimmer
Es wird HACS benötigt, mit decluttering-card, stack in card, layout card, bubble-card,