Hallo zusammen,
seit 3-4 Wochen nutze ich auch endlich HA. Natürlich verbringe ich gerade 80% meiner Zeit mit lesen, aber ich stoße immer wieder auf Problemen worüber ihr wahrscheinlich schmunzelt. Z.Z. versuche ich einfach ein Dashboard für meine ganzen Temperaturanzeigen zu erstellen die eine ansprechende Temperaturanzeige beinhaltet. Ich würde gerne eine Anzeige erstellen mit der Temperatur und der Luftfeuchtigkeit. Aber ich bekomme es einfach nicht hin. Seit 3 Tagen probiere ich alles mögliche aus, jedoch ohne Erfolg. Gerne hätte ich eine Anzeige wie z.B. die Dual Gauge Card. Diese habe ich auch integriert aber bekomme sie einfach nicht angezeigt?
Es wäre echt schön wenn einer helfen könnte 
Hi, wie meinst du das, du bekommst sie nicht angezeigt? Du müsstest doch nur in die Card in der UI auswählen und kannst sie dann konfigurieren.
Bei mir sieht es bespielsweise so aus. Oben lasse ich mir die aktuellen Werte für Temp, Luftfeuchte und Ventilstand anzeigen. Mein Wohnzimmer ist recht groß, mit Küche und Esszimmer integriert, daher gibt es bei uns sozusagen nur 3 Räume. Finde die Anzeige so jedenfalls immer noch ansprechend.
Ein kleines Diagramm habe ich auch noch mit eingearbeitet.
Hier der Code dazu:
type: custom:vertical-stack-in-card
cards:
- type: custom:stack-in-card
cards:
- type: horizontal-stack
card_mod:
style: |
:host {
background-color: transparent !important;
border: none !important;
}
cards:
- type: custom:mushroom-entity-card
entity: sensor.wandthermostat_jan_temperatur
name: Temperatur
fill_container: false
layout: vertical
icon_color: red
primary_info: state
secondary_info: none
card_mod:
style: |
ha-card {
padding-top: 10px;
border: none !important;
border-radius: 0px !important;
background-color: transparent !important;
}
:host {
--mush-card-primary-font-size: 20px !important;
}
- type: custom:mushroom-entity-card
entity: sensor.wandthermostat_jan_luftfeuchtigkeit
name: Luftfeuchte
layout: vertical
primary_info: state
secondary_info: none
card_mod:
style: |
ha-card {
padding-top: 10px;
border: none !important;
border-radius: 0px !important;
background-color: transparent !important;
}
:host {
--mush-card-primary-font-size: 20px !important;
}
- type: custom:mushroom-entity-card
entity: sensor.thermostat_wohnzimmer_ventil_offnungsgrad
name: Ventil
fill_container: false
icon_color: primary
layout: vertical
primary_info: state
secondary_info: none
card_mod:
style: |
ha-card {
padding-top: 10px;
border: none !important;
border-radius: 0px !important;
background-color: transparent !important;
}
:host {
--mush-card-primary-font-size: 20px !important;
}
- type: thermostat
entity: climate.wandthermostat_jan_2
show_current_as_primary: false
features:
- style: icons
type: climate-hvac-modes
name: " "
card_mod:
style: |
ha-card {
background-color: none !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
:host {
--state-climate-auto-color: #bfaa6c !important;
--primary-text-color: grey !important;
/*--icon-primary-color: red !important;*/
}
:host .secondary {
display: none !important;
}
.label {
display: none !important;
}
.secondary {
display: none !important;
}
hui-thermostat-card .label.secondary {
display: none !important;
}
- type: vertical-stack
cards:
- type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
background: none !important;
border: none !important;
border-radius: 0px !important;
}
#root {
gap: 0px !important;
}
cards:
- type: custom:mushroom-template-card
primary: Diagramm
icon: mdi:chart-line
tap_action:
action: call-service
service: input_select.select_next
service_data:
entity_id: input_select.diagramm_heizung_anzeige
card_mod:
style: |
ha-card {
background-color: none !important;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-bottom: 0px solid var(--secondary-text-color);
border-radius: 0px !important;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
margin-top: -10px;
}
- type: conditional
conditions:
- entity: input_select.diagramm_heizung_anzeige
state: Diagramm
card:
type: custom:tabbed-card
styles:
background: rgba(22,22,22,0.3)
"--mdc-theme-primary": var(--primary-color)
"--mdc-tab-text-label-color-default": grey
"--mdc-typography-button-font-size": 12px
"--mdc-typography-button-text-transform": capitalize
tabs:
- card:
type: horizontal-stack
cards:
- type: history-graph
show_names: false
entities:
- entity: climate.thermostat_wohnzimmer_2
hours_to_show: 24
refresh_interval: 10
logarithmic_scale: false
card_mod:
style: |
ha-card {
background-color: none !important;
border-radius: 0px !important;
border: none !important;
padding-left: 30px;
padding-right: 30px;
transition: opacity 0.5s ease, transform 0.5s ease;
opacity: {{ 1 if states('input_select.diagramm_heizung_anzeige') == 'Diagramm' else 0 }};
transform: {{ 'scale(1)' if states('input_select.diagramm_heizung_anzeige') == 'Diagramm' else 'scale(0.95)' }};
}
.content {
padding: 0px !important;
padding-bottom: 10px !important;
}
attributes:
label: Wohnzi.
icon: mdi:history
- card:
type: horizontal-stack
cards:
- type: history-graph
show_names: false
entities:
- entity: climate.thermostat_bad
hours_to_show: 24
refresh_interval: 10
logarithmic_scale: false
card_mod:
style: |
ha-card {
background-color: none !important;
border-radius: 0px !important;
border: none !important;
padding-left: 30px;
padding-right: 30px;
transition: opacity 0.5s ease, transform 0.5s ease;
opacity: {{ 1 if states('input_select.diagramm_heizung_anzeige') == 'Diagramm' else 0 }};
transform: {{ 'scale(1)' if states('input_select.diagramm_heizung_anzeige') == 'Diagramm' else 'scale(0.95)' }};
}
.content {
padding: 0px !important;
padding-bottom: 10px !important;
}
attributes:
label: Bad
icon: mdi:history
- card:
type: horizontal-stack
cards:
- type: history-graph
show_names: false
entities:
- entity: climate.thermostat_schlafzimmer
hours_to_show: 24
refresh_interval: 10
logarithmic_scale: false
card_mod:
style: |
ha-card {
background-color: none !important;
border-radius: 0px !important;
border: none !important;
padding-left: 30px;
padding-right: 30px;
transition: opacity 0.5s ease, transform 0.5s ease;
opacity: {{ 1 if states('input_select.diagramm_heizung_anzeige') == 'Diagramm' else 0 }};
transform: {{ 'scale(1)' if states('input_select.diagramm_heizung_anzeige') == 'Diagramm' else 'scale(0.95)' }};
}
.content {
padding: 0px !important;
padding-bottom: 10px !important;
}
attributes:
label: Schlafzi.
icon: mdi:history
- type: custom:mod-card
card_mod:
style: |
ha-card {
height: 1px;
background: black;
background-color: grey;
margin-left: 20px;
margin-right: 20px;
}
- type: vertical-stack
cards:
- type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
background: none !important;
border: none !important;
border-radius: 0px !important;
}
#root {
gap: 0px !important;
}
cards:
- type: custom:mushroom-climate-card
entity: climate.thermostat_bad
name: Bad
hvac_modes:
- auto
- "off"
show_temperature_control: true
fill_container: false
collapsible_controls: true
layout: horizontal
tap_action:
action: more-info
icon: mdi:heat-wave
card_mod:
style: |
ha-card {
height: 70px !important;
padding-left: 10px;
padding-top: 8px;
padding-bottom: 0px;
padding-right: 10px;
border: none !important;
border-radius: 0px !important;
}
mushroom-card::after {
content: "Ventil: {{ states('sensor.thermostat_bad_ventil_offnungsgrad') }}%";
position: absolute;
top: 3px;
right: 80px;
font-size: var(--card-secondary-font-size);
color: var(--secondary-text-color);
}
ha-state-icon {
color: {% if state_attr('climate.thermostat_bad', 'hvac_action') == 'heating' %} orange {% else %} grey {% endif %};
}
mushroom-shape-icon {
--shape-color: {% if state_attr('climate.thermostat_bad', 'hvac_action') == 'heating' %} rgba(214, 136, 49, 0.3) {% else %} rgba(158, 158, 158, 0.1) {% endif %} !important;
- type: custom:mushroom-climate-card
entity: climate.thermostat_schlafzimmer
name: Schlafzimmer
hvac_modes:
- auto
- "off"
show_temperature_control: true
fill_container: false
collapsible_controls: true
layout: horizontal
tap_action:
action: more-info
icon: mdi:heat-wave
card_mod:
style: |
ha-card {
height: 70px !important;
padding-left: 10px;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 10px;
border: none !important;
border-radius: 0px !important;
}
mushroom-card::after {
content: "Ventil: {{ states('sensor.thermostat_schlafzimmer_ventil_offnungsgrad') }}%";
position: absolute;
top: 0px;
right: 80px;
font-size: var(--card-secondary-font-size);
color: var(--secondary-text-color);
}
ha-state-icon {
color: {% if state_attr('climate.thermostat_schlafzimmer', 'hvac_action') == 'heating' %} orange {% else %} grey {% endif %};
}
mushroom-shape-icon {
--shape-color: {% if state_attr('climate.thermostat_schlafzimmer', 'hvac_action') == 'heating' %} rgba(214, 136, 49, 0.3) {% else %} rgba(158, 158, 158, 0.1) {% endif %} !important;
card_mod:
style: |
ha-card {
background-color: transparent !important;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px
13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important;
border: none !important;
}
1 „Gefällt mir“
Moin… ich habe leider schon Schwierigkeiten mich richtig auszudrücken.
Aber genau so eine Anzeige z.B. meine ich.
Mir würde diese schon reichen, einfach optisch ein wenig ansprechender. Leider bekomme ich es einfach nicht hin. Wie gesagt habe ich mehrere Temperatursensoren die ansprechender angezeigt werden sollen. Wäre klasse wenn du mir kurz den Ablauf schildern könntest. Speziell für eine Temperaturanzeige finde ich im Netz nichts was mir weiterhilft bei dieser eigentlich lächerlichen Aufgabe.
Ich habe mich für diese Art von Anzeigen für die Luftwerte in den Räumen entschieden:
Code für die Zeile mit den Skalen:
type: horizontal-stack
cards:
- type: gauge
entity: sensor.wohnzimmer_raumsensor_2_temperature
name: Temperatur
min: 14
max: 34
needle: true
segments:
- from: 14
color: skyblue
- from: 19
color: var(--success-color)
- from: 24
color: var(--warning-color)
- from: 29
color: var(--error-color)
- type: gauge
entity: sensor.wohnzimmer_raumsensor_2_humidity
name: Feuchtigkeit
needle: true
segments:
- from: 0
color: var(--warning-color)
- from: 35
color: var(--success-color)
- from: 65
color: var(--warning-color)
- type: gauge
entity: sensor.wohnzimmer_senseair_co2
min: 0
max: 3000
needle: true
name: CO2
severity:
green: 0
yellow: 1000
red: 2000
Darunter die kleine Karte mit der Heizung:
type: tile
entity: climate.bt_wohnzimmer
features_position: inline
vertical: false
name: Heizung
features:
- type: target-temperature
2 „Gefällt mir“
Ihr seid die Besten 
Genau dass meinte ich. 3 Tage lesen hat nichts gebracht aber hier kurz gefragt und sofort Hilfe und eine Lösung bekommen…klasse vielen Dank.
2 „Gefällt mir“
Hier noch meine standard Thermostat Card, die schon mit HA kommt. Die also schon immer installiert und kann über das Card-Menü einfach ausgwählt werden.
type: thermostat
entity: climate.wandthermostat_jan_2
show_current_as_primary: false
features:
- style: icons
type: climate-hvac-modes
name: " "
card_mod:
style: |
ha-card {
background-color: none !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
:host {
--state-climate-auto-color: #bfaa6c !important;
--primary-text-color: grey !important;
/*--icon-primary-color: red !important;*/
}
:host .secondary {
display: none !important;
}
.label {
display: none !important;
}
.secondary {
display: none !important;
}
hui-thermostat-card .label.secondary {
display: none !important;
}
Das hier ist meine mushroom custom climate card:
type: custom:mushroom-climate-card
entity: climate.thermostat_schlafzimmer
name: Schlafzimmer
hvac_modes:
- auto
- "off"
show_temperature_control: true
fill_container: false
collapsible_controls: true
layout: horizontal
tap_action:
action: more-info
icon: mdi:heat-wave
card_mod:
style: |
ha-card {
height: 70px !important;
padding-left: 10px;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 10px;
border: none !important;
border-radius: 0px !important;
}
mushroom-card::after {
content: "Ventil: {{ states('sensor.thermostat_schlafzimmer_ventil_offnungsgrad') }}%";
position: absolute;
top: 0px;
right: 80px;
font-size: var(--card-secondary-font-size);
color: var(--secondary-text-color);
}
ha-state-icon {
color: {% if state_attr('climate.thermostat_schlafzimmer', 'hvac_action') == 'heating' %} orange {% else %} grey {% endif %};
}
mushroom-shape-icon {
--shape-color: {% if state_attr('climate.thermostat_schlafzimmer', 'hvac_action') == 'heating' %} rgba(214, 136, 49, 0.3) {% else %} rgba(158, 158, 158, 0.1) {% endif %} !important;
2 „Gefällt mir“
Mushroom Cards sind super. Ich nutze die Standard „Tile“ Karte für Heizungen, die sind ja in HA dazugekommen nachdem der Entwickler von Mushroom bei Nabu Casa angestellt wurde 
aber die Mushroom Cards können noch einige Sachen mehr, wie zb die Ventilöffnung in deinem Screenshot.
Ja die nutze ich tatsächlich auch sehr gerne. Die Custom Button Card ist auch immer Recht nützlich, wobei der Großteil auch mit der mushroom Card funktioniert. Ist schon eine feine Card und wusste ich bisher noch nicht, dass der Entwickler jetzt offiziell für HA arbeitet. Insofern, werden wohl in Zukunft noch einige der Funktionen in HA zu Standard werden. 