[JS+Editor Module] Conditional slider button coloring

[andarotajo]

Conditional slider button coloring

Version: v1.2
Creator: andarotajo

Important

Supported cards:

• Button (slider only!)

Unsupported cards:

• Cover
• Climate
• Horizontal buttons stack
• Media player
• Pop-up
• Select
• Separator

This module allows you to change various colors (and optionally opacity) of a slider button based on more or more conditions. The settings can be applied to the slider, card, or icon. Generally, it has the following features:

• Define default and conditional colors and opacity for icon, icon background, slider and card text
• Define conditions using the default Home Assistant selector
• Configure multiple combinations of color, opacity and conditions (YAML only)
• Every color can be configured using one of three modes:
  • Preset color: Uses a predefined color from the Home Assistant theme.
  • Color wheel: Allows you to select a color using a color wheel.
  • Custom value: Passes whatever you specify directly into the CSS property.
  • JS template: Like with the Bubble Card styling the JS template is evaluated.

It's possible to set up multiple sets of conditions using the YAML configuration. To do this, copy the conditional_colors_1 section replace the number at the end with the next number in sequence.

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

rmn_conditional_slider_coloring:
  conditional_colors_1:
    slider_background:
      color_mode: preset
      color_preset: red
      opacity: 50
    conditions:
      - condition: numeric_state
        entity_id: sensor.smartphone_battery_level
        below: 11
  conditional_colors_2:
    slider_background:
      color_mode: template
      color_template: rgb(${hass.states['input_text.orange_color'].state})
      opacity: 50
    conditions:
      - condition: numeric_state
        entity_id: sensor.smartphone_battery_level
        above: 10
        below: 31
  conditional_colors_3:
    slider_background:
      color_mode: preset
      color_preset: green
      opacity: 50
    conditions:
      - condition: numeric_state
        entity_id: sensor.smartphone_battery_level
        above: 30

---

🧩 Get this Module

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

---
rmn_conditional_slider_coloring:
  name: "Conditional slider button coloring"
  creator: "andarotajo"
  version: "v1.2"
  link: "https://github.com/Clooos/Bubble-Card/discussions/1712"

  supported:
    - "button"

  unsupported:
    - "climate"
    - "cover"
    - "horizontal-buttons-stack"
    - "media-player"
    - "pop-up"
    - "select"
    - "calendar"
    - "separator"

  description: >-
    This module allows you to change various colors (and optionally opacity) of a
    slider button based on more or more conditions. The settings can be applied
    to the slider, card, or icon.

    It's possible to set up multiple sets of conditions using the YAML configuration.
    To do this, copy the "conditional_colors_1" section replace the number at the
    end with the next number in sequence.

  code: |-
    ${(() => {
      if (this.buttonType !== "slider") {
        return;
      }

      // Retrieve base and default configuration for the module
      const config = this.config.rmn_conditional_slider_coloring || {};
      const defaultConfig = config.default_configuration || {};

      // Prepare optional user-defined default values for card and icon
      let finalIconBackgroundColor = getColor(defaultConfig.icon_background);
      let finalIconBackgroundOpacity = getOpacity(defaultConfig.icon_background);
      let finalIconColor = getColor(defaultConfig.icon);
      let finalIconOpacity = getOpacity(defaultConfig.icon);
      let finalSliderBackgroundColor = getColor(defaultConfig.slider_background);
      let finalSliderBackgroundOpacity = getOpacity(defaultConfig.slider_background);
      let finalCardTextColor = getColor(defaultConfig.card_text);
      let finalCardTextOpacity = getOpacity(defaultConfig.card_text);

      for (const [key, subConfig] of Object.entries(config)) {
        // Skip irrelevant config entries
        if (!key.startsWith("conditional_colors_")) {
          continue;
        }

        // Skip if no conditions match
        const conditions = subConfig?.conditions;
        if (!conditions || !checkConditionsMet([].concat(conditions), hass)) {
          continue;
        }

        // Retrieve configured colors and opacities
        finalIconBackgroundColor = getColor(subConfig.icon_background);
        finalIconBackgroundOpacity = getOpacity(subConfig.icon_background);

        finalIconColor = getColor(subConfig.icon);
        finalIconOpacity = getOpacity(subConfig.icon);

        finalSliderBackgroundColor = getColor(subConfig.slider_background);
        finalSliderBackgroundOpacity = getOpacity(subConfig.slider_background);

        finalCardTextColor = getColor(subConfig.card_text);
        finalCardTextOpacity = getOpacity(subConfig.card_text);

        break;
      }

      return `
        .bubble-icon-container {
          ${finalIconBackgroundColor
            ? `background: ${finalIconBackgroundColor} !important;`
            : ""}

          ${finalIconBackgroundOpacity
            ? `opacity: ${finalIconBackgroundOpacity} !important;`
            : ""}
        }

        .bubble-icon {
          ${finalIconColor
            ? `color: ${finalIconColor} !important;`
            : ""}

          ${finalIconOpacity
            ? `opacity: ${finalIconOpacity} !important;`
            : ""}
        }

        .bubble-range-slider .bubble-range-fill {
          ${finalSliderBackgroundColor
            ? `background: ${finalSliderBackgroundColor} !important;`
            : ""}

          ${finalSliderBackgroundOpacity
            ? `opacity: ${finalSliderBackgroundOpacity} !important;`
            : ""}
        }

        .bubble-name-container {
          ${finalCardTextColor
            ? `color: ${finalCardTextColor} !important;`
            : ""}

          ${finalCardTextOpacity
            ? `opacity: ${finalCardTextOpacity} !important;`
            : ""}
        }
      `;

      function getColor(config) {
        const colorMode = config?.color_mode;

        if (colorMode === "preset" && config?.color_preset) {
          return `var(--${config.color_preset}-color)`;
        } else if (colorMode === "wheel" && config?.color_wheel) {
          return config.color_wheel;
        } else if (colorMode === "custom" && config?.color_custom) {
          return config.color_custom;
        } else if (colorMode === "template" && config?.color_template) {
          return eval("`" + config.color_template + "`");
        }

        return null;
      };

      function getOpacity(config) {
        if (config?.opacity) {
          return `${config.opacity}%`;
        }

        return null;
      };
    })()}

  anchors:
    - schema: &color_schema
        - name: "color_mode"
          label: "Color mode"
          required: true
          icon: "mdi:select-color"
          selector:
            select:
              multiple: false
              custom_value: false
              mode: "dropdown"
              options:
                - value: "preset"
                  label: "Preset color"
                - value: "wheel"
                  label: "Color wheel"
                - value: "custom"
                  label: "Custom value"
                - value: "template"
                  label: "JS template"

        - name: "color_preset"
          label: "Preset color"
          required: false
          icon: "mdi:format-color-fill"
          selector:
            ui_color:
              include_none: true
              include_state: true

        - name: "color_wheel"
          label: "Color wheel"
          required: false
          icon: "mdi:palette"
          selector:
            text:
              type: "color"

        - name: "color_custom"
          label: "Custom value"
          required: false
          icon: "mdi:variable"
          selector:
            text:
              multiline: false
              type: "text"

        - name: "color_template"
          label: "JS template"
          required: false
          icon: "mdi:code-tags"
          selector:
            text:
              multiline: false
              type: "text"

        - name: "opacity"
          label: "Opacity"
          required: false
          icon: "mdi:opacity"
          default: 100
          selector:
            number:
              min: 0
              max: 100
              mode: "slider"
              unit_of_measurement: "%"
              step: 10

    - &icon_background_schema
      name: "icon_background"
      type: "expandable"
      title: "Icon background color"
      icon: "mdi:image"
      expanded: false
      schema: *color_schema

    - &icon_schema
      name: "icon"
      type: "expandable"
      title: "Icon color"
      icon: "mdi:image"
      expanded: false
      schema: *color_schema

    - &slider_background_schema
      name: "slider_background"
      type: "expandable"
      title: "Slider background color"
      icon: "mdi:ray-vertex"
      expanded: false
      schema: *color_schema

    - &card_text_schema
      name: "card_text"
      type: "expandable"
      title: "Card text color"
      icon: "mdi:text"
      expanded: false
      schema: *color_schema

  editor:
    - name: "default_configuration"
      type: "expandable"
      title: "Default configuration"
      icon: "mdi:cog"
      expanded: false
      schema:
        - *icon_background_schema
        - *icon_schema
        - *slider_background_schema
        - *card_text_schema

    - name: "conditional_colors_1"
      type: "expandable"
      title: "Conditional colors"
      icon: "mdi:tune"
      expanded: false
      schema:
        - *icon_background_schema
        - *icon_schema
        - *slider_background_schema
        - *card_text_schema

        - name: "conditions"
          label: "Conditions"
          required: true
          icon: "mdi-code-braces"
          selector:
            condition: {}

---

Screenshot:

Before posting your module

• I've replaced all lines starting with ->
• I've updated the unsupported cards above the description and under the unsupported property
• I've added a screenshot
• I've chosen a unique your_module_key
• I really enjoyed working on this module ❤️

[andarotajo]

Changelog

Version 1.2

• Add new color mode to allow using JS templates like for the Bubble Card styling

Version 1.1

• Simplify code using YAML anchors and aliases
• Change displayed icon for the expandable section of the icon color configuration
• Do not expand the section for the conditional color configuration by default

[Iceman248]

Thanks for this, but I cannot get the custom value option to work at all, only the preset/color wheel.

[Iceman248]

I'll just stick to the color wheel. I can input a custom color in the YAML if need be. Thanks.

[andarotajo]

If you tell me what exactly didn't work I can look into it

[Iceman248]

When I set a custom color with hex code, it doesn't work. I had to spell out a color to get it to work, so unless something is broken, custom option doesn't support hex codes.

[andarotajo]

This works for me though:

color_mode: custom
color_custom: "#CC0000"

[Iceman248]

Hmm.. Tried it again, works now, not sure why not before, I refreshed and closed out, came back in, etc. Thanks.