[JS+Editor Module] Temperature colouring

[Quokka1979]

Module post template

Temperature colouring

Version: v1.0
Creator: -> Timmy

Important

Unsupported cards:

• Horizontal buttons stack
• Media player

This module provides dynamic colouring based on temperature sensor values.
Colour adjustments are applied to selected sub-buttons and/or state display elements.

Configure this module via the editor or in YAML, for example:

    temperature_colouring:
      temperature_sensor: sensor.temperature
      elements:
        sub_buttons: [1, 3, 5]  # Apply to sub-buttons 1, 3, and 5
        state_display: true     # Apply to state display element

---

🧩 Get this Module

To use this module, simply copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

# Temperature
temperature_colouring:
  name: "Temperature colouring"
  version: "v1.0"
  creator: "Timmy"

  unsupported:
    - horizontal-buttons-stack
    - media-player

  description: |
    This module provides dynamic colouring based on temperature sensor values.
    Colour adjustments are applied to selected sub-buttons and/or state display elements.

    Required entities:
    - A temperature sensor

    You can configure which elements should receive dynamic colouring:
    - Sub-buttons (1-6)
    - State display

    Example YAML configuration:

    temperature_colouring:
      temperature_sensor: sensor.kitchen_temperature
      elements:
        sub_buttons: [1, 3, 5]  # Apply to sub-buttons 1, 3, and 5
        state_display: true     # Apply to state display element

  code: |
    ${(() => {
      const temperature = parseFloat(hass?.states[this.config?.temperature_colouring?.temperature_sensor]?.state || 0);
      const elements = this.config?.temperature_colouring?.elements || {};
      
      let color;
      if (temperature <= 0) {
          color = 'rgba(0,0,139,0.8)';
      } else if (temperature <= 5) {
          color = 'rgba(0,71,171,0.8)';
      } else if (temperature <= 10) {
          color = 'rgba(30,144,255,0.8)';
      } else if (temperature <= 15) {
          color = 'rgba(100,149,237,0.8)';
      } else if (temperature <= 20) {
          color = 'rgba(60,179,113,0.8)';
      } else if (temperature <= 23) {
          color = 'rgba(152,251,152,0.8)';
      } else if (temperature <= 26) {
          color = 'rgba(255,223,186,0.8)';
      } else if (temperature <= 28) {
          color = 'rgba(255,215,0,0.8)';
      } else if (temperature <= 35) {
          color = 'rgba(178,34,34,0.8)';
      } else {
          color = 'rgba(139,0,0,0.8)';
      }

      // Apply colour to selected sub-buttons
      if (elements.sub_buttons) {
        const subButtons = Array.isArray(elements.sub_buttons) ? elements.sub_buttons : [];
        subButtons.forEach(num => {
          if (num >= 1 && num <= 6) {
            const subButton = card?.querySelector(`.bubble-sub-button-${num} ha-icon`);
            if (subButton) {
              subButton.style.color = color;
            }
          }
        });
      }

      // Apply colour to state display if enabled
      if (elements.state_display) {
        const stateElement = card?.querySelector('.bubble-state.state.display-state');
        if (stateElement) {
          stateElement.style.color = color;
        }
      }

      return '';  // No CSS needed as we're applying styles directly to elements
    })()}

  editor:
    - type: expandable
      title: "Entity Configuration"
      icon: "mdi:thermometer"
      schema:
        - name: temperature_sensor
          label: "Temperature Sensor (Required)"
          selector:
            entity:
              device_class: temperature
          required: true
        - name: elements
          type: grid
          schema:
            - name: sub_buttons
              label: "Sub-buttons to Style"
              selector:
                select:
                  multiple: true
                  options:
                    - label: "Sub-button 1"
                      value: 1
                    - label: "Sub-button 2"
                      value: 2
                    - label: "Sub-button 3"
                      value: 3
                    - label: "Sub-button 4"
                      value: 4
                    - label: "Sub-button 5"
                      value: 5
                    - label: "Sub-button 6"
                      value: 6
            - name: state_display
              label: "State Display"
              selector:
                boolean: {}

---

Screenshot:

[Clooos]

Hi again, please be more careful with your publications, this one is a [JS+Editor Module] and not a [Styling Module], and they are other mistakes in your layout.

Also the "Unsupported cards:" are not the same in your module code.

And I suggest you post more generic screenshots, your theme/font is quite uncommon and could mislead people about what your module is really doing.

[Clooos]

Thank you for the title corrections, but you still haven't updated the "Unsupported cards:" in your modules 😅

[Quokka1979]

Sorry, I was out for work, I’ll test then and will update the incompatible cards