Meine eigenen integrationen.
Und
Ich bin gespannt wie es mit deinen Karten weitergeht. Ein sehr schönes Design. Ich konnte mir da schon ein paar schöne Sachen rausschneiden die auf mein HA passen. Vielen Dank 
Oh, vielen dank für die Blumen remiku !
Aber dann möchte ich auch eines tages sehen, wie dein aktuelles board aussieht 
Nachher baue ich noch an meinem Strom Dashboard im gleichen Stil wie das oben mit der Heizung !
Gruß… Mario !
Hier mal als Video, weil sich da einiges tut auf meinem Dashboard.
Auch springt eine Flamme an und lodert wenn die Brennwerttherme angeht.
Gruß…
Hier mal mein Dashboard mit 3 D gedruckter Wandhalterung und Kabelkanal für das Wandpaneele.
Steckdose ist auch Smart und so programmiert das sie sich nach dem Ladestatus des Tablets ein und aus schaltet um den Akku zu schonen.
Bin jetzt seit einer Woche im Home Assistan Thema drin und bin sehr gespannt wie sich das ganze noch entwickelt.
Habt ihr noch Ideen und Tipps?
Grüße Matze
@Piranha1605 Die Wetterkarte finde ich top! Hast Du dafür den Code parat, bzw. wie hast Du das Ding gebaut? Meine bisherige Wetterkarte stinkt dagegen richtig ab.
Hallo Hanni,
willkommen im Club, sag mal womit bzw. wie hast Du die Canon Karte erstellt
liebe Grüße
Markus
Hallo Markus,
Nachdem ich lange gesucht habe und nix gescheites gefunden habe, hab ich dafür ein .js geschrieben und meine eigene custom card eingebunden. Hatte überlegt das nen .js den Server nicht so belastet da es über den Browser ausgeführt wird. Die Karte sieht dann so aus wie auf dem Screenshot. Das .js und die .png sind dann wie gewohnt in config/www hinterlegt. Gruss Hanni
Ich lade sie alle demnächst hoch.Bin diese Woche aber etwas mit dem HATG eingespannt da es einige Änderungen gibt.
Ich arbeite gerade an einen Dashboard für mein Tablet.
Der Grundriss gibt Sonnenauf- und Untergänge wieder.
Exakte Mondphasen, Jahreszeiten und das Wetter hier vor Ort mit Gewitter (Blitzen und Regen), sowie Schnee und fallende Blätter im Herbst.
Ebenso fährt der Rasenmäher im Garten, sobald dieser läuft und der Staubsauger ist in den Räumen zu sehen, wo er gerade Staubsaugt.
Ansonsten sind halt die Standard Sachen verlinkt.
Update zu meinem Dashboard:
Ich habe mein mobiles Dashboard noch ein bisschen weiterentwickelt, optimiert und optisch verbessert. Das Bild zeigt den aktuellen Stand der Dinge!
Wer sich für den Aufbau, die genutzten HACS-Erweiterungen (wie bubble-card, mushroom oder layout-card) oder den vollständigen Code interessiert: Meinen ursprünglichen Beitrag inklusive der kompletten YAML-Konfiguration findet ihr hier im Thread unter Post #1483.
Hallo hanni,
wie sieht der Code zu deinem thermostat aus? Finde ich wirklich gut. Würde ich auch gerne bei mir nutzen.
Ich meine diese Karte hier. https://community.simon42.com/uploads/default/original/3X/e/3/e3ca54fc9236d2a464970158e6e04aa21b331d34.jpeg
(Beitrag vom Verfasser gelöscht)
Hier ist der komplette code musst halt, wie gewohnt, deine Entitäten dementsprechend anpassen.
Hintergrundbild kommt z.b. nach /www/raeume/schlafzimmer/schlafzimmer_heizung_v4.png
Kann ich dir notfalls hier auch noch Hochladen
type: custom:button-card
entity: climate.shellyblutrv_f8447705bec1
show_name: false
show_icon: false
show_state: false
triggers_update:
- climate.shellyblutrv_f8447705bec1
styles:
card:
- position: relative
- overflow: hidden
- isolation: isolate
- z-index: 0
- height: 310px
- padding: 0
- border-radius: 26px
- border: 1px solid rgba(0,191,255,0.55)
- background: '#07121f'
- box-shadow: 0 0 18px rgba(0,140,255,0.12)
grid:
- position: relative
- grid-template-areas: '"background"'
- grid-template-columns: 100%
- grid-template-rows: 100%
custom_fields:
background:
- position: absolute
- inset: 0
- width: 100%
- height: 100%
- z-index: 0
header:
- position: absolute
- left: 5%
- top: 5%
- z-index: 7
trv:
- position: absolute
- left: 2%
- top: 15%
- width: 45%
- height: 150px
- z-index: 3
- overflow: visible
controls:
- position: absolute
- left: 7%
- top: 61%
- width: 35%
- height: 48px
- z-index: 7
temperature:
- position: absolute
- right: 7%
- top: 18%
- width: 145px
- height: 105px
- z-index: 5
battery:
- position: absolute
- right: 4%
- top: 4%
- z-index: 8
room:
- position: absolute
- left: 5%
- right: 5%
- bottom: 6%
- z-index: 6
custom_fields:
background: |
[[[
return `
<img
src="/local/raeume/schlafzimmer/schlafzimmer_heizung_v4.png"
style="
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
"
>
`;
]]]
header: |
[[[
return `
<div style="
font-size:20px;
font-weight:600;
color:rgba(255,255,255,0.94);
letter-spacing:0.2px;
text-shadow:0 1px 3px rgba(0,0,0,0.55);
">
Heizung
</div>
`;
]]]
trv: |
[[[
const target = Number(entity.attributes.temperature ?? 0);
const displayTemp = target.toFixed(1);
const heating =
entity.attributes.hvac_action === 'heating';
const isMobile = window.innerWidth <= 600;
const displayFontSize = isMobile ? 22 : 25;
const displayLeft = isMobile ? 78 : 78;
const displayWidth = isMobile ? 60 : 76;
const displayHeight = isMobile ? 28 : 34;
const displayScale = isMobile ? 0.82 : 0.92;
const displayLetterSpacing = isMobile ? 0.4 : 1;
return `
<div
class="trv-wrap"
style="
position:relative;
width:100%;
height:100%;
transform:scale(0.90);
transform-origin:left center;
"
>
<img
class="trv-image"
src="/local/geraete/shelly_blu_trv_transparent_neu.png"
style="
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
object-fit:contain;
object-position:left center;
display:block;
animation:${
heating
? 'trvHeatingGlow 2.8s ease-in-out infinite'
: 'none'
};
filter:${
heating
? 'drop-shadow(0 0 5px rgba(255,120,45,0.28))'
: 'none'
};
"
>
<div
class="trv-display"
style="
position:absolute;
left:${displayLeft}%;
top:53%;
transform:
translate(-50%,-50%)
rotate(-8deg)
skewX(-10deg)
scaleX(${displayScale});
width:${displayWidth}px;
height:${displayHeight}px;
display:flex;
align-items:center;
justify-content:center;
font-family:'Digit', sans-serif;
font-size:${displayFontSize}px;
font-weight:bold;
line-height:1;
letter-spacing:${displayLetterSpacing}px;
white-space:nowrap;
color:rgba(70,190,225,0.96);
text-shadow:
0 0 4px rgba(40,180,220,0.55),
0 0 8px rgba(0,150,210,0.18);
pointer-events:none;
"
>
<span>${displayTemp}</span><span style="
font-family:Arial,sans-serif;
font-size:0.50em;
font-weight:700;
position:relative;
top:-0.55em;
margin-left:5px;
line-height:1;
">°</span>
</div>
</div>
`;
]]]
controls:
card:
type: horizontal-stack
cards:
- type: custom:button-card
icon: mdi:minus
show_name: false
show_icon: true
tap_action:
action: call-service
service: climate.set_temperature
target:
entity_id: climate.shellyblutrv_f8447705bec1
data:
temperature: |
[[[
return Number(
entity.attributes.temperature ?? 18
) - 0.5;
]]]
hold_action:
action: none
styles:
card:
- width: 48px
- height: 48px
- padding: 0
- border-radius: 50%
- border: 1px solid rgba(0,191,255,0.75)
- background: rgba(245,248,250,0.96)
- box-shadow: 0 0 8px rgba(0,160,220,0.16)
- display: flex
- align-items: center
- justify-content: center
icon:
- width: 22px
- color: '#008dcc'
- type: custom:button-card
icon: mdi:plus
show_name: false
show_icon: true
tap_action:
action: call-service
service: climate.set_temperature
target:
entity_id: climate.shellyblutrv_f8447705bec1
data:
temperature: |
[[[
return Number(
entity.attributes.temperature ?? 18
) + 0.5;
]]]
hold_action:
action: none
styles:
card:
- width: 48px
- height: 48px
- padding: 0
- border-radius: 50%
- border: 1px solid rgba(0,191,255,0.75)
- background: rgba(245,248,250,0.96)
- box-shadow: 0 0 8px rgba(0,160,220,0.16)
- display: flex
- align-items: center
- justify-content: center
icon:
- width: 22px
- color: '#008dcc'
styles:
card:
- background: transparent
- box-shadow: none
- border: none
- padding: 0
grid:
- column-gap: 18px
- justify-content: center
temperature: |
[[[
const target =
Number(entity.attributes.temperature ?? 0);
const current =
Number(entity.attributes.current_temperature ?? 0);
return `
<div style="
width:100%;
height:100%;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
box-sizing:border-box;
text-shadow:
0 2px 4px rgba(0,0,0,0.85),
0 0 8px rgba(0,0,0,0.65);
">
<div style="
font-size:10px;
line-height:1;
color:rgba(255,255,255,0.64);
margin-bottom:4px;
letter-spacing:0.2px;
">
Solltemperatur
</div>
<div style="
font-size:30px;
line-height:1;
font-weight:600;
font-family:'Digit', sans-serif;
color:#ffffff;
letter-spacing:0.2px;
">
<span>${target.toFixed(1)}</span><span style="
font-family:Arial,sans-serif;
font-size:0.50em;
font-weight:700;
position:relative;
top:-0.95em;
margin-left:8px;
line-height:1;
">°</span>
</div>
<div style="
width:70px;
height:1px;
margin:10px 0 9px;
background:rgba(0,191,255,0.38);
box-shadow:
0 0 4px rgba(0,160,220,0.15);
"></div>
<div style="
font-size:10px;
line-height:1;
color:rgba(255,255,255,0.58);
margin-bottom:4px;
letter-spacing:0.2px;
">
Raumtemperatur
</div>
<div style="
font-size:20px;
line-height:1;
font-weight:500;
font-family:'Digit', sans-serif;
color:rgba(255,255,255,0.90);
">
<span>${current.toFixed(1)}</span><span style="
font-family:Arial,sans-serif;
font-size:0.50em;
font-weight:700;
position:relative;
top:-0.95em;
margin-left:8px;
line-height:1;
">°</span>
</div>
</div>
`;
]]]
battery: |
[[[
const battery = Number(
entity.attributes.battery_level ??
entity.attributes.battery ??
100
);
const low = battery < 20;
const borderColor = low
? 'rgba(255,70,70,0.70)'
: 'rgba(0,191,255,0.38)';
const background = low
? 'rgba(45,7,10,0.88)'
: 'rgba(4,14,25,0.78)';
const color = low
? '#ff6868'
: 'rgba(120,210,235,0.90)';
const icon = low
? 'mdi:battery-alert'
: (
battery >= 90
? 'mdi:battery'
: battery >= 70
? 'mdi:battery-80'
: battery >= 50
? 'mdi:battery-60'
: battery >= 30
? 'mdi:battery-40'
: 'mdi:battery-20'
);
return `
<div style="
display:flex;
align-items:center;
gap:5px;
padding:4px 8px;
border-radius:9px;
border:1px solid ${borderColor};
background:${background};
color:${color};
font-size:11px;
font-weight:600;
box-shadow:
${
low
? '0 0 8px rgba(255,50,50,0.18)'
: '0 0 6px rgba(0,160,220,0.08)'
};
">
<ha-icon
icon="${icon}"
style="
width:15px;
height:15px;
color:${color};
"
></ha-icon>
<span>
${battery}%
</span>
</div>
`;
]]]
room: |
[[[
const action =
entity.attributes.hvac_action ?? 'idle';
const heating =
action === 'heating';
const statusText =
heating ? 'Heizt' : 'Leerlauf';
return `
<div style="
position:relative;
width:100%;
height:42px;
border-radius:14px;
border:1px solid ${
heating
? 'rgba(255,120,40,0.70)'
: 'rgba(0,191,255,0.35)'
};
background:rgba(4,14,25,0.86);
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
box-shadow:${
heating
? '0 0 12px rgba(255,90,20,0.16)'
: 'none'
};
">
<div style="
font-size:13px;
font-weight:600;
color:${
heating
? '#ff9b55'
: 'rgba(255,255,255,0.72)'
};
">
${statusText}
</div>
</div>
`;
]]]
tap_action:
action: more-info
hold_action:
action: more-info
extra_styles: |
@font-face {
font-family: 'Digit';
src:
url('/local/fonts/Digit.TTF')
format('truetype');
font-weight:normal;
font-style:normal;
font-display:swap;
}
/* Dezenter Wärme-Glow am TRV */
@keyframes trvHeatingGlow {
0%, 100% {
filter:
drop-shadow(
0 0 3px
rgba(255,120,45,0.18)
);
}
50% {
filter:
drop-shadow(
0 0 9px
rgba(255,120,45,0.42)
);
}
}
/* Smartphone Portrait */
@media (max-width:600px) {
#custom_field_header {
left:5% !important;
top:5% !important;
}
#custom_field_header > div {
font-size:18px !important;
}
#custom_field_trv {
left:0% !important;
top:17% !important;
width:55% !important;
height:138px !important;
}
#custom_field_trv > div {
transform:scale(1.02) !important;
}
#custom_field_temperature {
right:5% !important;
top:17% !important;
width:145px !important;
height:105px !important;
}
#custom_field_battery {
right:3% !important;
top:3% !important;
}
#custom_field_room {
bottom:5% !important;
}
#custom_field_controls {
left:5% !important;
top:64% !important;
width:43% !important;
}
}
/* Smartphone Landscape */
@media (orientation:landscape) and (max-height:600px) {
#custom_field_header {
left:5% !important;
top:4% !important;
}
#custom_field_trv {
top:16% !important;
width:43% !important;
height:135px !important;
}
#custom_field_controls {
left:6% !important;
top:63% !important;
width:39% !important;
}
#custom_field_temperature {
right:8% !important;
top:15% !important;
width:145px !important;
height:105px !important;
}
#custom_field_battery {
right:5% !important;
top:3% !important;
}
}
Hallo zusammen,
hier mal mein Dashboard für den Deebot T20 Omni 
Kurz zu mir: Ich habe bisher alles mit ioBroker gemacht und wechsle gerade nach und nach zu Home Assistant.
Das Highlight ist der eigene Raumplan statt des Kartenbilds der Ecovacs-Integration: Grundriss mit Möbeln, der Deebot fährt live darüber, beim Saugen verschwindet der „Staub“, beim Wischen bleibt eine nasse Spur, die langsam abtrocknet. Das Symbol zeigt animiert, was er gerade macht (saugen, wischen, Mopps waschen, trocknen, laden, schlafen …).
Dazu Reinigung starten mit Raum/Modus/Saugstärke, letzte Reinigungen, Raumstatistik und ein Akku-Verlauf über 90 Tage.
Erstellt habe ich das Ganze als Custom Card mit Hilfe von KI. Ist allerdings ziemlich auf meine Wohnung zugeschnitten, also kein Plug-and-Play.
Feedback ist willkommen! 
Gruß
Christian
Echte Fahrt im Wohnzimmer im Zeitraffer (60× schneller). Erst Saugen: Der Staub verschwindet dort, wo der Deebot langfährt. Dann dieselbe Fahrt als Wischen: Die nasse Spur trocknet langsam ab, in echt dauert das 10 Minuten fürs saugen und 18 minuten für das wischen.
Das sieht sehr intressant aus. Schöne Arbeit. 
da ich im moment selbst eine Karte für meinen Roborock entwickel bin ich immer froh über solche inspirationen.
Meine sieht zurzeit so aus:.
Header mit den Grundinfos.
Map direkt aus dem Roborock geladen als Live Map. Karte ist zoom und verschiebbar.
Der zu reinigende Raum wird direkt über die Map ausgewählt.
Raum anklicken und oben erscheint Reinigung starten.
Falls falscher Raum.gewählt wurde Raum nochmal anklicken oder anderen Raum wählen. Sicherheitshalber habe ich eingebaut das die Meldung nach 6 sekunden automatisch ausgeblendet wird.
Sobald der Roboter im Raum angekommen ist wird die Map auf den Raum Großgezoomt.
Im Footer sind dann noch Steuerelemente und informationen zur Reinigung.
Die Wisch oder Saugmodi können über die kacheln in der mittleren leiste verändert werden.
Kachel anklicken dann kommt ein Pop Up wo man dann den Modus ändern kann.
Ein paar kleine ToDos hab ich noch aber das Grundgerüst steht.
Gruss
Hanni
Wow, das sieht mal richtig genial aus.
Sag mal hast du den Code bei GitHub oder könntest du den hier teilen?
Ich möchte gerne für unseren Verein ein TouchPad einrichten und da wäre die Lösung perfekt
Liebe Grüße
Markus
Nachtrag:
Guten Morgen,
wie oder womit erstellt Ihr Eure Grafiken?
lg
Markus
by HarryP: Zusammenführung Doppelpost (bei Änderungen oder hinzufügen von Inhalten bitte die „Bearbeitungsfunktion“ anstatt „Antworten“ zu nutzen)
Bin zur Zeit nicht Zuhause kann das am Wochenende mal raussuchen den Teil mit den Pop Ups und hier reinstellen
Gruss
Hanni