Welche Card/Anzeige verwendet ihr für Temperatur/Luchtfeuchtigkeit/Luftdruck

[augustusburg_ger]

Ich habe mir mit “sweet home 3D” einen Grundriß in 3D und 2D erstellt. Die Lösung klappt - auch dank community Hilfe - mein Grundriß ist aber noch nicht fertig und es fehlt eine Etage , darum erstmal die Werte am Rand. Ist sicher eine zeitintensive Sache, aber so in etwa wollt ichs auch haben. Ist über Bild-Elemente-Karte eingebunden.

4 x Wlan_Temp_Sensoren im EG und mittig auf der Karte der Digitale Hauptzähler_Strom mit Powerfox / Poweropti ausgelesen. Sowie Geschirrspüler Status und ein Wlan_Lichtschalter und Wlan_Steckdose_Leistung in Watt vom Kühli.

type: picture-elements
elements:
  - type: state-badge
    entity: sensor.temp_sensor_aussen_temperature
    style:
      top: 70%
      left: 90%
  - type: state-badge
    entity: sensor.temp_sensor_wz_temperature
    style:
      top: 40%
      left: 20%
  - type: state-badge
    entity: sensor.temp_sensor_bad_temperature
    style:
      top: 77%
      left: 27%
  - type: state-badge
    entity: sensor.hauptzahler
    style:
      top: 55%
      left: 45%
  - type: state-icon
    tap_action:
      action: toggle
    entity: switch.lichtschalter_flur_arbeitsplatz
    style:
      top: 23%
      left: 35%
      transform: scale(3,3)
  - type: state-badge
    entity: sensor.temp_sensor_flur_temperature
    style:
      top: 37%
      left: 43%
  - type: state-badge
    entity: sensor.geschirrspuler_operation_state
    style:
      top: 70%
      left: 72%
  - type: state-badge
    entity: sensor.kuhlschrank
    style:
      top: 86%
      left: 43%
  - type: state-badge
    entity: sensor.marco_pc_new
    style:
      top: 60%
      left: 90%
image: /local/Haus2D/Grundplan01.png

[Damrak2023]

Ich muss mich hier nochmal melden, da ich es noch nicht hinbekommen habe den gesamten Hintergrund einzufärben, so wie bei Dir. Was muss ich da noch genau machen. Meinen Code hatte ich Dir ja bereits gepostet. Wäre nett, wenn Du mir das erklären könntest.
Gruß Andy

[hobbyman]

[quote=“hobbyman, post:17, topic:19177”]
HACS den iOS Themes - Dark Mode and Light Mode
Hallo Andy,

Ist HACS und iOS Themes - Dark Mode and Light Mode installiert ?

Dann auf deinen Nutzernamen klicken Theme das gewünschte Theme auswählen

Bei mir ios-dark-mode-light-blue danach ändert sich automatisch der Hintergrund,

Keine weiteren Einstellungen erforderlich.

Grüße Wolfgang

[Damrak2023]

Hallo Wolfgang,
ja das ist Beides installiert. Wenn ich nun z.B. ios-dark-mode-light-blue auswähle sieht es so aus:

Nehme ich z.B. ios-damrk-mode-orange sieht es so aus:

Hier noch ein Screenshot von meinem installierten iOS Theme:

Also entweder verstehe ich etwas völlig falsch, oder es gibt hier ein Problem, denn es müsste doch möglich sein, das auch der gesamte Seitenhintergrund die Farbe ändert und nicht nur die obere Navigationsleiste.
Gruß Andy

[hobbyman]

Hallo Andy,

hast du Änderungen in der configuration.yaml oder /homeassistant/themes/github_light_theme/github_light_theme.yaml vorgenommen ? Ich habe ohne eigene
Änderungen nur theme ausgewählt, der Hintergrund jeder neuen Seite ist jeweils blau
eingefärbt. Einen anderen Tipp habe ich auch nicht. Hier zum Vergleich meine yaml

# Theme based on Github
# Creator: @einschmidt
#
#
Github Light Theme:
  # Header:
  app-header-background-color: "#24292e"
  app-header-text-color: "#fafbfc"
  # Main Interface Colors
  primary-color: "#0366d6"
  light-primary-color: "var(--primary-color)"
  primary-background-color: "#F6F8FA"
  secondary-background-color: "#fafbfc"
  divider-color: "#e1e4e8"
  accent-color: "#0366d6"
  # Text
  primary-text-color: "#2f363d"
  secondary-text-color: "#959da5"
  text-primary-color: "#fafbfc"
  disabled-text-color: "#959da5"
  # Sidebar Menu
  sidebar-icon-color: "#6a737d"
  sidebar-text-color: "#2f363d"
  sidebar-background-color: "#FFFFFF"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#2188ff"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # Buttons
  paper-item-icon-color: "#6a737d"
  paper-item-icon-active-color: "#2188ff"
  # States and Badges
  state-icon-color: "#6a737d"
  state-icon-active-color: "#2188ff"
  state-icon-unavailable-color: var(--disabled-text-color)
  # Sliders
  paper-slider-knob-color: "#2188ff"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  # Labels
  label-badge-background-color: "#24292e"
  label-badge-text-color: "#fafbfc"
  label-badge-red: "#d73a49"
  label-badge-green: "#28a745"
  label-badge-blue: "#2188ff"
  label-badge-yellow: "#ffd33d"
  label-badge-gray: "#6a737d"
  # Cards
  card-background-color: "#FFFFFF"
  ha-card-border-radius: "6px"
  ha-card-box-shadow: "0px 0px 0px 1px #e1e4e8"
  paper-dialog-background-color: var(--card-background-color)
  paper-listbox-background-color: var(--card-background-color)
  paper-card-background-color: var(--card-background-color)
  # Switches
  switch-checked-button-color: "#2188ff"
  switch-checked-track-color: "#2188ff"
  switch-unchecked-button-color: "#6a737d"
  switch-unchecked-track-color: "#6a737d"
  # Toggles
  paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
  paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
  paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
  # Table
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  data-table-background-color: var(--primary-background-color)
  mdc-checkbox-unchecked-color: "#6a737d"
  # Dropdowns
  material-background-color: var(--secondary-background-color)
  material-secondary-background-color: var(--primary-background-color)
  mdc-theme-surface: var(--primary-background-color)
  # Pre/Code
  markdown-code-background-color: "#FFFFFF"

Grüße
Wolfgang

[hobbyman]

hier noch aus der ios-themes.yaml

# iOS Dark Mode Theme - light-blue
#
ios-dark-mode-light-blue-alternative:
  # Global
  background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-light-blue.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9f09"  # from Apple systemOrange dark mode
  light-primary-color: "#B6B6C1"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#2c2c2e"  # systemGray5 dark mode
  secondary-background-color: rgba(25, 25, 25, 0.9)
  divider-color: rgba(152, 152, 157, 0.3)  # from Apple systemGray dark mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#FFF"
  secondary-text-color: "#d3d3d3"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: "#F1F1F1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FFF"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: "#FFF"  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: "#FFF"  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#0984ff"  # from Apple systemBlue dark mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 159, 9, 0.7)  # from Apple systemOrange dark mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(10, 10, 10, 0.4)
  paper-card-background-color: var(--ha-card-background)
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#30d158"  # from Apple systemGreen dark mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(55, 55, 55, 0.8)  # e.g., background of more-info
  paper-item-icon-color: white  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(25, 25, 25, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(1, 195, 220, 0.4)
  markdown-code-background-color: "#464646"
  code-editor-background-color: "#161616"
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Dark Mode Theme - light-blue
#
ios-dark-mode-light-blue:
  # Global
  background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-light-blue.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9f09"  # from Apple systemOrange dark mode
  light-primary-color: "#B6B6C1"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#2c2c2e"  # systemGray5 dark mode
  secondary-background-color: rgba(25, 25, 25, 0.9)
  divider-color: rgba(152, 152, 157, 0.3)  # from Apple systemGray dark mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#FFF"
  secondary-text-color: "#d3d3d3"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: "#F1F1F1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FFF"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: rgba(255, 214, 10, 1)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#0984ff"  # from Apple systemBlue dark mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 159, 9, 0.7)  # from Apple systemOrange dark mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(10, 10, 10, 0.4)
  paper-card-background-color: var(--ha-card-background)
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#30d158"  # from Apple systemGreen dark mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(55, 55, 55, 0.8)  # e.g., background of more-info
  paper-item-icon-color: white  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(25, 25, 25, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(1, 195, 220, 0.4)
  markdown-code-background-color: "#464646"
  code-editor-background-color: "#161616"
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

[RobertoCravallo]

"Problem" mit der mini-graph-card

Hallo helmi55, ich habe die in einer custom-swipe-card, da verbrauchen die nicht so viel Platz. Wenn Dich der komplette Code interessiert, lass es mich wissen, ich stelle ihn dann hier ein.

So habe ich es gemacht… Ich optimiere alles für mein Handy.

[FrankS]

@RobertoCravallo
gefällt mir sehr gut.
Von besonderem Interesse … wie geht das mit MIN/MAX/AVG?
Was sind die Zeiträume hierfür?

Danke vorab
Frank

[RobertoCravallo]

Du brauchst halt nur einen Verlauf und das war es schon. In “meinem” Code sind die Schalter entsprechend gesetzt. Macht die mini-graph-card alles selber…

[Voholki]

Vielen Dank, das mir sehr geholfen

[Sascha2210]

Hallo Micro, welche Karte hast Du für die Temperatur und Luftfeuchtigkeit genommen. Kannst Du eventuell den Code mal posten?

[moonsorrox]

ich nutze diese Ansichten

[bewo]

@kofax Wow, das gefällt mir richtig gut. Ich bin aber noch ein kompletter HomeAssistant-Newbie. Würdest Du den Konfigurationscode teilen um mir den Design-Einstieg etwas leichter zu machen?
Das wäre echt toll! Bitte Bitte

[kofax]

Ja, sicher.
Ist, wie damals gesagt, die Mini Graph Card aus dem HACS Store.
Der Code sieht dann so aus:

type: custom:mini-graph-card
name: Raumluft
entities:
  - entity: sensor.???
    name: Temperatur
  - entity: sensor.???
    name: Luftfeuchtigkeit
    y_axis: secondary
    show_state: true
hours_to_show: 24
points_per_hour: 3
line_width: 3
show:
  icon: false
  name: false

[Logan]

Klasse gemacht, mich würde ja die Apex-Card interessieren…
Hatte ich schonmal versucht aber nicht wirklich so hinbekommen wie ich wollte…

Vielleich kann man da ja mal den Code von sehen, danke

[Logan]

[SebastianVoigt]

Für die Gesamtübersicht hab ich eine Popup Bubble Card, die mir nur die Grafiken anzeigt.
Diese gibt es dann auch noch einzeln in den jeweiligen Räumen.

[ChrisSN86]

@Osorkon

Das ist eine sehr allgemeingütige Frage.

@Osorkon das sieht ja mega aus. Kannst du mir verraten wie du das gemacht hast? vielleicht sogar mit dem dazugehörigen Code?

[hobbyman]

Hallo Logan,

hier ein Apex Beispiel:

type: custom:apexcharts-card
apex_config:
  chart:
    height: 190px
experimental:
  color_threshold: true
graph_span: 24h
show:
  last_updated: true
header:
  standard_format: false
  show: true
  show_states: true
  colorize_states: true
  title: Badezimmer
now:
  show: true
  color: red
  label: jetzt
span:
  start: day
series:
  - entity: sensor.temperatur_feuchte_bad_temperature
    name: Temperatur
    type: line
    show:
      extremas: true
    color: red
  - entity: sensor.temperatur_feuchte_bad_humidity
    name: Feuchtigkeit
    show:
      extremas: true

by HarryP: Code-/Logzeilen formatiert (bitte immer in </> einbinden)

[Pfize]

Sieht gut aus wenn man Temperatur und Luftfeuchte in einer Karte anzeigen lässt. Was ich aber noch nicht geschafft habe ist für den ersten und den zweiten Seonsor (auf y_axis) unterschiedliche Thresholds zu haben. Die Doku auf Github sagt dazu auch nichts. Hat da jemand ne Idee ob man das umsetzten kann?