Bubble-Card einstellen ab welchen Wert Farbänderung stattfindet

Hi. Ich habe die Einfärbung der Sub-buttons so gelöst:

    card_mod:
      style: |
        .bubble-sub-button-3 {
          {% set score = states('sensor.luftsensor_wohnzimmer_score') | float %}
          {% if score < 70 %}
            background-color: rgba(255,0,0,0.25) !important;
          {% elif score >= 70 and score <= 80 %}
            background-color: rgba(255,140,0,0.25) !important;
          {% elif score > 80 %}
            background-color: rgba(124,252,0,0.25) !important;
          {% endif %}
        }

Mit dem Handy nen code einfügen funktioniert nicht wirklich. Aber vlt kannst du ja erkennen wie es funktionieren könnte

Es geht nicht um allgemeine sub-buttons .. das geht !

Es geht spezifisch um den “Temperatur” button mit Verstellmöglichkeit

zumindest ist da schonmal ein Syntax-Fehler bei dir drinn … Es fehlt ein Semikolon.

Das kann auch schon ausreichen, dass es nicht funktioniert…

…ein kurzes Update, der aktuelle Code ist unten eingefügt

Die Farbformatierung im Bereich Sun-Button 3 habe ich nach wie vor nicht hinbekommen. Wohl aber über Formatierungen bei “ha-card”. Jetzt wird das “Feld” in Abhängigkeit der Soll-Temperatur und den “Warnschwellen” eingefärbt.

Zufrieden ist man ja nie :wink:

Ich würde jetzt gerne das “Feld” in pink (meine Arbeitsfarbe) einfärben, wenn die Solltemperatur des Raumes gleich der “minimalen Solltemperatur aller Räume ist”; also der Raum quasi der “kälteste wird”.

Was funktioniert ist, wenn ich einen Zahlenwert vorgebe.

hass.states['climate.hometaic_ip_access_point_kuche'].attributes.temperature === 12 ? 'pink' :

was nicht funktioniert ist, wenn ich den Helfer “max_thermostat_temp” verwende. der / die Helfer ermittelt die minimale bzw. maximale Solltemperatur aller Thermostate.

     hass.states['climate.hometaic_ip_access_point_kuche'].attributes.temperature === hass.states['sensor.max_thermostat_temp'].state ? 'pink' : 

vermutlich muss da noch was formatiert werden :frowning:

Als zweites möchte ich die Farbe der Schrift in dem Feld ändern.. wenn das Feld “blau” ist. Auch hier sagt Chat GPT .. das das unter “ha-card” erfolgt. Erfolgreich war ich bislang leider nicht

type: custom:bubble-card
card_type: climate
card_layout: normal
button_type: slider
sub_button:
  - entity: climate.hometaic_ip_access_point_kuche
    icon: mdi:swi
    name: ""
    show_background: false
    background-clor: green ! important;
    show_state: false
    select_attribute: preset_modes
    show_attribute: true
    attribute: preset_mode
    show_icon: false
  - entity: climate.hometaic_ip_access_point_kuche
    show_state: false
    show_attribute: true
    attribute: current_temperature
    show_icon: false
    state_background: false
    show_background: false
name: Küche
icon: mdi:pot-steam-outline
scrolling_effect: false
styles: |
  ha-card {
    --bubble-climate-button-background-color: ${
      hass.states['climate.hometaic_ip_access_point_kuche'].attributes.temperature === 12 ? 'pink' :
      hass.states['climate.hometaic_ip_access_point_kuche'].attributes.temperature === hass.states['sensor.max_thermostat_temp'].state ? 'pink' :   
      hass.states['climate.hometaic_ip_access_point_kuche'].attributes.temperature > hass.states['input_number.room_max_limit'].state ? 'red' :
      hass.states['climate.hometaic_ip_access_point_kuche'].attributes.temperature > hass.states['input_number.room_max_warning'].state ? 'orange' : 
      hass.states['climate.hometaic_ip_access_point_kuche'].attributes.temperature < hass.states['input_number.room_min_limit'].state ? 'blue' :
      hass.states['climate.hometaic_ip_access_point_kuche'].attributes.temperature < hass.states['input_number.room_min_warning'].state ? 'lightblue' :
      'white'} !important;
  }
  .bubble-icon-container {
    opacity: 1 !important;
    background: ${
      hass.states['binary_sensor.hometaic_ip_access_point_fenster_und_turkontakt_3'].state === 'off' ? 'white' :
      'orange'} !important;
   }
  .bubble-sub-button-1 {
    background-color: ${
      'white'} !important;
  }
  .bubble-icon {
    opacity:1 !important;
    color: ${
    'grey'} !important;
  }
  .bubble-sub-button-2 {
    background-color: ${
      hass.states['climate.hometaic_ip_access_point_kuche'].attributes.current_temperature < hass.states['input_number.room_min_warning'].state ? 'lightblue' :
      hass.states['climate.hometaic_ip_access_point_kuche'].attributes.current_temperature > hass.states['input_number.room_max_limit'].state ? 'orange' :
      'white' } !important;
  }
  .bubble-sub-button-3 {
    opacity: 1 !important;
    bubble-climate-button-background-color: ${
      'pink'} !important;
  }
entity: climate.hometaic_ip_access_point_kuche

Du hast schon nen paar Böcke in deinem Code… kennst du dich mit CSS oder JS aus oder ist das alles Copy Paste ohne es zu verstehen? Oder hat da Chat GPT auch noch seine Finger im Spiel :wink:

Sowas hier ist schon Unsinn:

ich glaube nicht das es eine Eigenschaft bubble-climate-button-background-color: gibt :wink: :wink:

Meinst du das eventuell? --bubble-climate-button-background-color ? Falls ja, dann gehört das da auch nicht hin…

In welchem Feld?

In ha-card sehe ich keinen Versuch von dir eine Schriftfarbe zu ändern?

Für mich sieht der Syntax so erstmal korrekt aus. Wenn das nicht funktioniert, dann kann ich mir nur vorstellen, dass der Wert der ersten Entität nicht 100% gleich dem 2 Wert ist. Es wird auch auf Nachkommastellen ankommen und der Datentyp ist wichtig.

Der Operator “==” bringt eine Typenkonvertierung mit. Ich bin mir auch nicht sicher ob hier nicht ein String Vergleich stattfindet… und kein Vergleich der Zahlen… Eventuell musst du die beiden Teile auch mit parseFloat vergleichbar machen

${
  parseFloat(
    hass.states['climate.hometaic_ip_access_point_kuche'].attributes.temperature
  ) ===
  parseFloat(
    hass.states['sensor.max_thermostat_temp'].state) ? 'pink' :
    'green'
} important;


Erst einmal danke, dass Du Dir die Zeit nimmst .. den “Unsinn” zu lesen ..

Ich kann weder CSS noch JS programmieren, meine letzten Programmiererfahrungen waren C++. Das heißt, ich schaue was andere machen, befrage Chat GPT und versuche es (aufgrund meiner veralteten Erfahrungen) zu verstehen und dann umzusetzen. Klappt nicht immer.. Dennoch habe ich einiges umsetzten können. Habe ich etwas kleines erreicht, möchte ich es besser machen. Klappt es nicht.. naja auch nicht tragisch :slight_smile:

Zum Unsinn:

.bubble-sub-button-1 {
    background-color: ${
      'white'} !important;
  }

braucht man tatsächlich nicht, stört aber auch nicht. Ich benutze den Sub-Button1 hier als Testobjekt um Code Schnipsel auszuprobieren. Außerdem nutze ich das in anderen Karten um es ‘winterwite’ zu machen und damit identisch zum Hintergrund

.bubble-icon {
    opacity:1 !important;
    color: ${
    'grey'} !important;
  }

hatte ich tatsächlich einmal gebraucht um das Icon in Abhängigkeit der der Soll-Temperatur einzufärben (s. weiter oben) . Warum nicht gelöscht? Damit ich es später ggf. wieder verwenden kann

Sub-Button 3 ist tatsächlich Unsinn … da ich es an der Stelle nicht geschafft habe, die Farbe zu ändern. kann ersatzlos gelöscht werden. (schadet aber scheinbar auch nicht)

Zur Text-Farbe .. hier hab ich noch nichts vernünftiges hinbekommen, was sich lohn zu posten. (ich hab das Problem tatsächlich zunächst umgangen, in dem ich das Feld nicht “Blue” einfärbe, sondern ‘#0088ff’.)

Mich hat mehr das Thema Vergleich mit dem Min-Wert-Sensor gewurmt … und da hat Dein Ansatz funktioniert. und damit ich was dabei lerne … gegoogelt was parsefloat() macht

Die FunktionparseFloat()in Home Assistant, die eine JavaScript-Funktion ist, wandelt einen String in eine Gleitkommazahl um. Sie analysiert den String und extrahiert die erste Zahl, die sie findet, wobei sie alle nicht-numerischen Zeichen überspringt, bis sie auf ein ungültiges Zeichen trifft oder das Ende des Strings erreicht ist.

  .bubble-sub-button-1 {
    background-color: ${
      parseFloat(hass.states['climate.hometaic_ip_access_point_kuche'].attributes.temperature) ===
      parseFloat(hass.states['sensor.min_thermostat_temp'].state) ? 'pink' :
      'green'} !important;
  }

es geht nicht darum das es nicht schadet oder nicht benötigt wird, der Code ist einfach falsch :slight_smile:

Das wäre analog zu oben korrekt:

.bubble-sub-button-1 {
    background-color: white !important;
}

Der Sub-Button 3 ist falsch, da es einfach so eine Eigenschaft wie bubble-climate-button-background-color: nicht gibt.

Es gibt –bubble-climate-button-background-color: und das gehört in die ID: ha-card {}

Wenn du den sub-butten 3 verändern möchtest, dann musst du die Eigenschaft background-color: nehmen. –bubble-climate-button-background-color: spricht die Climate Karte und dort den Background an. Das ist special Bubble-Card :wink:

Dafür bin ich da :-)… ne Quatsch… mir ist auch schon viel geholfen worden. Das bischen was man da zurückgeben kann… :slight_smile:

Finde ich überhaupt nicht schlimm. Verstehen ist mMn wichtig und selbst admnistrieren können um so wichtiger!

Ich denke du könntest mit dem Code von dir Probleme bekommen, wenn du daraus eigene Module erstellst (und das ist eigentlich zu empfehlen). Das Styling Feld ist da echt noch nachsichtig… Bei den Modulen sieht das anders aus… Deswegen sollte der Code ansich schon stimmen.

In den CSS Beispielen von dir leitest du halt JS ein, was dann sinnbefreit ist und eigentlich möchtest du nur eine weiße BG-Farbe definieren… das ist halt nicht so schön und macht dir im ungünstigen Fall der Folge-Code kaputt.

Sagt Chat GPT? :wink:

Ja das ist schon klar…

Ich war der Meinung, dass bei dem Vergleich der beiden Entitäten immer ein String verglichen wird… und die Stati bzw Attribute sind eben kein String, sondern Float, oder Int.

Geht trotzdem nicht? Würde mich wundern?

doch geht ..

und …

 .bubble-sub-button-1 {
    background-color: ${
      'winterwhite'} !important;
  }

geht auch … macht zumindest was es soll …

Wissentlich falsche Codes.. sollte man tatsächlich rauslöschen .. ich gelobe Besserung (verspreche sie aber nicht)

Update:
Ich möchte nochmals auf die verknüpften Bedingungen in der Bubble Card (!) zurückkommen. Chat GPT sagt, dass on der Bubble Card dafür ein Java Script benötigt wird.. der vorgeschlagene Code hilft aber nicht weiter .. (ansonsten müsse ich über einen Helfer ..und 2 Automatisierungen ran …

 .bubble-sub-button-1 {
    background-color: >
      [[[
        return (states['binary_sensor.homematic_ip_access_point_fenster_strasse'].state === 'on' ||
                states['binary_sensor.homematic_ip_access_point_fenster_hof'].state === 'on') ? 'pink' :
        'green'; 
      ]]]
    }

:crayon:by HarryP: Zusammenführung Doppelpost (bei Änderungen oder hinzufügen von Inhalten bitte die „Bearbeitungsfunktion“ anstatt „Antworten“ zu nutzen)

Schön für Dich/ChatGPT, aber dann frage bitte auch die KI, warum der Code nicht weiter hilft! :rage:

2 „Gefällt mir“

Ich muss schon echt sagen…

Die KI halluziniert sich da ganz schön einen zurecht… Das ist kein Code der in bubble-Card funktioniert.

Ich muss @harryp da schon Recht geben…

Denk bitte mal daran, dass die meisten hier aus lauter Freude am System helfen.

Mach doch da mit, anstatt die KI mit Halbwissen zu befeuern und dann im Forum die Fehler (der KI) ausbügeln zu lassen.

Dur hilft sicher jeder gerne… für die KI sind wir alle nicht zuständig. Das macht auch Foren kaputt..

1 „Gefällt mir“

Ich hab das Problem nun über einen Helfer-Sensor gelöst. Umständlich..Aber tut..

Dennoch würde ich das „wie es geht“ noch lernen.

PS: ich stelle den Code und die Lösung üblicherweise mit hier ein.. damit nicht nur ich, sondern auch andere profitieren.

Na ja - KI ist nicht KI. Die Eine ist besser, die Andere ist schlechter.
Mir hat sie, nach meinen Anweisungen, ein vollständiges Modul für bubble programmiert.

Zugegebenermaßen waren meine Erfahrungen mit ChatGPT auch ernüchternd. Wer heute AI unterschätzt wird sich in naher Zeit wundern. Ich bin lange genug in der Branche um das nicht zu machen.

Schön für Dich - KI gibt es ja auch schon sooooo lange! :wink:

Wer sagt denn, dass ich oder irgendjemand hier KI unterschätzt?
Es kann nur nicht sein, wenn die KI irgendwelchen Quatsch oder fehlerhaften Code generiert, dass dann hier die ehrenamtlich tätigen User diesen wieder gerade rücken.

Im Übrigen ist der Lernerfolg wenn man sich etwas selber erarbeitet sehr viel höher, als wenn man sich alles auf dem silbernen Tablett servieren lässt!

1 „Gefällt mir“

4 Jahre ist in der IT ein langer Zeitraum - das Mooresche Gesetz dürfte hier noch extremer sein