[Styling Module, JS Module, JS+Editor Module] Smart Icons

[szsolt]

Module post template

Smart Icons

Version: 1.6
Creator: Zsolt

Important

Supported cards:

• Button
• Calendar
• Climate
• Cover
• Media Player

Intelligent conditional icon and badge overlay system with JavaScript expressions support.

Key features:
- Dynamic icon replacement with conditional logic
- Icon color and background manipulation
- Multiple badges on the main card icon and sub-buttons, 6 positions
- Smart shape detection (auto, circle, rounded)
- JavaScript expressions with _js suffix for advanced users
- Unlimited custom names for both icons and badges
- Badge tap and hold actions support (integrated with Bubble Card)
- Configurable animation targets (icon-only or container-wide)
- Performance optimized with efficient change detection
- NEW v1.6: Helper functions for cleaner, more readable expressions
- NEW v1.6: Enhanced cache detection for attribute and entity references

Target locations:
- main_icon: Main card icon and badges
- sub_buttons: Sub-buttons (button_1, button_2, etc.)

JavaScript expressions (YAML only):
Any property can be made dynamic by adding _js suffix:
- icon_js: "state === 'heat' ? 'mdi:fire' : 'mdi:thermostat'"
- icon_color_js: "state > 25 ? 'red' : 'blue'"
- background_color_js: "state > 30 ? '#ff000030' : null"
- effect_js: "state === 'heat' ? 'pulse' : null"

Expression context provides:
- state: Current entity's state
- lowerState: Current entity's state in lowercase
- entity: Full entity object for the current context
- attributes: Entity attributes object
- states(entityId): Get any entity's state
- getEntity(entityId): Get any entity object
- attr(entityId, attribute): Get entity attribute
- Math, Date, parseInt, parseFloat

Helper functions (NEW):
- cond(value, {key: result}, fallback, op='=='): Conditional mapping with operator support
- thresholds(value, {threshold: result}, fallback, op='>='): Ordered numeric thresholds
- entityCond(entityId, conditions, fallback, {attr, op}): Condition check on different entity
- between(value, min, max, inclusive=true): Range checking
- above(value, threshold), below(value, threshold), equals(value, target): Comparisons
- slugify(string, separator='_'): Transform strings to clean identifiers

Badge Actions (Auto-enabled):
Badges automatically become interactive when they have an entity. Default behavior:
- Tap: Opens more-info dialog for the badge's entity
- Hold: No default action (configure as needed)

Override default behavior with custom actions:
- action: call-service, navigate, url, toggle, more-info, none
- service: (for call-service) - service to call
- service_data: (for call-service) - data to pass to service
- navigation_path: (for navigate) - path to navigate to
- url_path: (for url) - URL to open
- entity: (for toggle/more-info) - entity to act upon

<b>YAML example:</b> Complete thermostat with dynamic icons and interactive badges (using v1.6 helper functions):

<code-block><pre>
smart_icons:
  icons:
    - name: thermostat_state
      target: main_icon
      entity: climate.living_room
      icon_js: "cond(state, {heat: 'mdi:fire', cool: 'mdi:snowflake'}, 'mdi:thermostat')"
      icon_color_js: "cond(state, {heat: '#ff6b35', cool: '#4a90e2'}, '#666')"
      background_color_js: "cond(state, {heat: '#ff6b3520', cool: '#4a90e220'}, null)"
      effect_js: "cond(state, {heat: 'pulse', cool: 'glow'}, null)"
      effect_target: container  # Badges animate with icon (default)
      
    - name: button_light_status
      target: button_1
      entity: light.living_room
      icon_js: "cond(state, {on: 'mdi:lightbulb'}, 'mdi:lightbulb-off')"
      icon_color_js: "cond(state, {on: '#ffc107'}, '#666')"
      background_color_js: "cond(state, {on: '#ffc10720'}, null)"
      effect_js: "cond(state, {on: 'glow'}, null)"
      effect_target: icon  # Only icon glows, not the whole button

  badges:
    - name: temp_display
      target: main_icon
      entity: climate.living_room
      attribute: current_temperature
      text_js: "Math.round(state) + '°'"
      background_color_js: "thresholds(state, {25: 'red', 18: 'green'}, 'blue')"
      text_color: white
      scale: 0.8
      tap_action:
        action: more-info
        entity: climate.living_room
      hold_action:
        action: call-service
        service: climate.set_temperature
        service_data:
          entity_id: climate.living_room
          temperature: 22
      
    - name: humidity_alert
      target: main_icon
      entity: sensor.humidity
      position: bottom-left
      icon: mdi:water-percent
      background_color_js: "above(state, 70) ? 'orange' : 'blue'"
      effect_js: "above(state, 80) ? 'blink' : null"
      tap_action:
        action: navigate
        navigation_path: /lovelace/climate
      hold_action:
        action: call-service
        service: fan.toggle
        service_data:
          entity_id: fan.bathroom
      conditions:
        - condition: numeric_state
          entity: sensor.humidity
          above: 60
      
    - name: outdoor_temp_check
      target: main_icon
      position: top-left
      text_js: "entityCond('weather.forecast', {sunny: '☀️', rainy: '🌧️'}, '☁️')"
      background_color_js: "between(attr('sensor.outdoor_temp', 'temperature'), 20, 25) ? 'green' : 'orange'"
      scale: 0.6
      
    - name: room_identifier
      target: main_icon  
      position: bottom-left
      text_js: "slugify(attr('climate.living_room', 'friendly_name'))"
      background_color: blue
      scale: 0.5
</pre></code-block>

---

🧩 Get this Module

To use this module, simply install it from the Module Store (from the editor of any card > Modules), or copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

smart_icons:
  name: "Smart Icons"
  version: "1.6"
  creator: "Zsolt"
  link: "https://github.com/Clooos/Bubble-Card/discussions/1750"

  supported:
    - button
    - calendar
    - climate
    - cover
    - media-player

  description: |
    Intelligent conditional icon and badge overlay system with JavaScript expressions support.

    Key features:
    - Dynamic icon replacement with conditional logic
    - Icon color and background manipulation
    - Multiple badges on the main card icon and sub-buttons, 6 positions
    - Smart shape detection (auto, circle, rounded)
    - JavaScript expressions with _js suffix for advanced users
    - Unlimited custom names for both icons and badges
    - Badge tap and hold actions support (integrated with Bubble Card)
    - Configurable animation targets (icon-only or container-wide)
    - Performance optimized with efficient change detection
    - NEW v1.6: Helper functions for cleaner, more readable expressions
    - NEW v1.6: Enhanced cache detection for attribute and entity references

    Target locations:
    - main_icon: Main card icon and badges
    - sub_buttons: Sub-buttons (button_1, button_2, etc.)

    JavaScript expressions (YAML only):
    Any property can be made dynamic by adding _js suffix:
    - icon_js: "state === 'heat' ? 'mdi:fire' : 'mdi:thermostat'"
    - icon_color_js: "state > 25 ? 'red' : 'blue'"
    - background_color_js: "state > 30 ? '#ff000030' : null"
    - effect_js: "state === 'heat' ? 'pulse' : null"

    Expression context provides:
    - state: Current entity's state
    - lowerState: Current entity's state in lowercase
    - entity: Full entity object for the current context
    - attributes: Entity attributes object
    - states(entityId): Get any entity's state
    - getEntity(entityId): Get any entity object
    - attr(entityId, attribute): Get entity attribute
    - Math, Date, parseInt, parseFloat

    Helper functions (NEW):
    - cond(value, {key: result}, fallback, op='==='): Conditional mapping with operator support
    - thresholds(value, {threshold: result}, fallback, op='>='): Ordered numeric thresholds
    - entityCond(entityId, conditions, fallback, {attr, op}): Condition check on different entity
    - between(value, min, max, inclusive=true): Range checking
    - above(value, threshold), below(value, threshold), equals(value, target): Comparisons
    - slugify(string, separator='_'): Transform strings to clean identifiers

    Badge Actions (Auto-enabled):
    Badges automatically become interactive when they have an entity. Default behavior:
    - Tap: Opens more-info dialog for the badge's entity
    - Hold: No default action (configure as needed)

    Override default behavior with custom actions:
    - action: call-service, navigate, url, toggle, more-info, none
    - service: (for call-service) - service to call
    - service_data: (for call-service) - data to pass to service
    - navigation_path: (for navigate) - path to navigate to
    - url_path: (for url) - URL to open
    - entity: (for toggle/more-info) - entity to act upon

    <b>YAML example:</b> Complete thermostat with dynamic icons and interactive badges (using v1.6 helper functions):

    <code-block><pre>
    smart_icons:
      icons:
        - name: thermostat_state
          target: main_icon
          entity: climate.living_room
          icon_js: "cond(state, {heat: 'mdi:fire', cool: 'mdi:snowflake'}, 'mdi:thermostat')"
          icon_color_js: "cond(state, {heat: '#ff6b35', cool: '#4a90e2'}, '#666')"
          background_color_js: "cond(state, {heat: '#ff6b3520', cool: '#4a90e220'}, null)"
          effect_js: "cond(state, {heat: 'pulse', cool: 'glow'}, null)"
          effect_target: container  # Badges animate with icon (default)
          
        - name: button_light_status
          target: button_1
          entity: light.living_room
          icon_js: "cond(state, {on: 'mdi:lightbulb'}, 'mdi:lightbulb-off')"
          icon_color_js: "cond(state, {on: '#ffc107'}, '#666')"
          background_color_js: "cond(state, {on: '#ffc10720'}, null)"
          effect_js: "cond(state, {on: 'glow'}, null)"
          effect_target: icon  # Only icon glows, not the whole button

      badges:
        - name: temp_display
          target: main_icon
          entity: climate.living_room
          attribute: current_temperature
          text_js: "Math.round(state) + '°'"
          background_color_js: "thresholds(state, {25: 'red', 18: 'green'}, 'blue')"
          text_color: white
          scale: 0.8
          tap_action:
            action: more-info
            entity: climate.living_room
          hold_action:
            action: call-service
            service: climate.set_temperature
            service_data:
              entity_id: climate.living_room
              temperature: 22
          
        - name: humidity_alert
          target: main_icon
          entity: sensor.humidity
          position: bottom-left
          icon: mdi:water-percent
          background_color_js: "above(state, 70) ? 'orange' : 'blue'"
          effect_js: "above(state, 80) ? 'blink' : null"
          tap_action:
            action: navigate
            navigation_path: /lovelace/climate
          hold_action:
            action: call-service
            service: fan.toggle
            service_data:
              entity_id: fan.bathroom
          conditions:
            - condition: numeric_state
              entity: sensor.humidity
              above: 60
          
        - name: outdoor_temp_check
          target: main_icon
          position: top-left
          text_js: "entityCond('weather.forecast', {sunny: '☀️', rainy: '🌧️'}, '☁️')"
          background_color_js: "between(attr('sensor.outdoor_temp', 'temperature'), 20, 25) ? 'green' : 'orange'"
          scale: 0.6
          
        - name: room_identifier
          target: main_icon  
          position: bottom-left
          text_js: "slugify(attr('climate.living_room', 'friendly_name'))"
          background_color: blue
          scale: 0.5
    </pre></code-block>

  code: |
    .bubble-main-icon-badge {
      position: absolute;
      min-width: 18px;
      height: 16px;
      border-radius: 8px;
      background-color: var(--badge-color, var(--primary-color));
      color: white;
      font-size: 11px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
      z-index: 1;
      box-sizing: border-box;
      box-shadow: 0 1px 2px rgba(0,0,0,0.2);
      transform: scale(var(--badge-scale, 1));
      transform-origin: center;
      pointer-events: auto;
      cursor: pointer;
      user-select: none;
      transition: transform 0.1s ease, opacity 0.1s ease;
    }

    .bubble-main-icon-badge:active {
      transform: scale(calc(var(--badge-scale, 1) * 0.95));
    }

    .bubble-main-icon-badge:hover {
      opacity: 0.9;
    }

    .bubble-main-icon-badge.no-background {
      background-color: transparent;
      box-shadow: none;
    }

    .bubble-main-icon-badge.no-actions {
      pointer-events: none;
      cursor: default;
    }

    .bubble-main-icon-badge.no-actions:active,
    .bubble-main-icon-badge.no-actions:hover {
      transform: scale(var(--badge-scale, 1));
      opacity: 1;
    }

    .bubble-main-icon-badge.circular {
      min-width: 20px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      padding: 0;
      font-size: 10px;
    }

    .bubble-main-icon-badge .badge-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 13px;
      height: 13px;
    }

    .bubble-main-icon-badge.circular .badge-icon {
      width: 12px;
      height: 12px;
    }

    .bubble-main-icon-badge.position-top-left { top: 0; left: 0; }
    .bubble-main-icon-badge.position-top { top: 0; left: 50%; transform: translateX(-50%) scale(var(--badge-scale, 1)); }
    .bubble-main-icon-badge.position-top-right { top: 0; right: 0; }
    .bubble-main-icon-badge.position-bottom-left { bottom: 0; left: 0; }
    .bubble-main-icon-badge.position-bottom { bottom: 0; left: 50%; transform: translateX(-50%) scale(var(--badge-scale, 1)); }
    .bubble-main-icon-badge.position-bottom-right { bottom: 0; right: 0; }

    .bubble-icon-container { overflow: visible !important; position: relative; }
    .bubble-icon-container::after { border-radius: 100%; }
    .bubble-entity-picture {
      border-radius: var(--bubble-icon-border-radius, var(--bubble-border-radius, 50%));
    }

    .smart-effect-pulse { animation: smart-pulse 2s infinite ease-in-out; }
    .smart-effect-rotate { animation: smart-rotate 3s infinite ease-in-out; }
    .smart-effect-spin { animation: smart-spin 3s linear infinite; }
    .smart-effect-glow { animation: smart-glow 2s infinite ease-in-out; }
    .smart-effect-float { animation: smart-float 3s infinite ease-in-out; }
    .smart-effect-zoom { animation: smart-zoom 1.5s infinite ease-in-out; }
    .smart-effect-shake { animation: smart-shake 0.8s infinite ease-in-out; }
    .smart-effect-vibrate { animation: smart-vibrate 0.6s linear infinite; }
    .smart-effect-flip { animation: smart-flip 2s linear infinite; }
    .smart-effect-blink { animation: smart-blink 1s infinite step-end; }

    @keyframes smart-pulse {
      0%, 100% { transform: scale(var(--badge-scale, 1)); }
      50% { transform: scale(calc(var(--badge-scale, 1) * 1.1)); }
    }

    @keyframes smart-rotate {
      0% { transform: scale(var(--badge-scale, 1)) rotate(0deg); }
      25% { transform: scale(var(--badge-scale, 1)) rotate(15deg); }
      50% { transform: scale(var(--badge-scale, 1)) rotate(0deg); }
      75% { transform: scale(var(--badge-scale, 1)) rotate(-15deg); }
      100% { transform: scale(var(--badge-scale, 1)) rotate(0deg); }
    }

    @keyframes smart-spin {
      from { transform: scale(var(--badge-scale, 1)) rotate(0deg); }
      to { transform: scale(var(--badge-scale, 1)) rotate(360deg); }
    }

    @keyframes smart-glow {
      0%, 100% { 
        transform: scale(var(--badge-scale, 1));
        box-shadow: 0 1px 2px rgba(0,0,0,0.2); 
      }
      50% { 
        transform: scale(var(--badge-scale, 1));
        box-shadow: 0 0 10px var(--glow-color, rgba(255,255,255,0.7)); 
      }
    }

    @keyframes smart-float {
      0%, 100% { transform: scale(var(--badge-scale, 1)) translateY(0); }
      50% { transform: scale(var(--badge-scale, 1)) translateY(-4px); }
    }

    @keyframes smart-zoom {
      0%, 100% { transform: scale(var(--badge-scale, 1)); }
      50% { transform: scale(calc(var(--badge-scale, 1) * 1.2)); }
    }

    @keyframes smart-shake {
      0%, 100% { transform: scale(var(--badge-scale, 1)) translateX(0); }
      25% { transform: scale(var(--badge-scale, 1)) translateX(-3px); }
      75% { transform: scale(var(--badge-scale, 1)) translateX(3px); }
    }

    @keyframes smart-vibrate {
      0% { transform: scale(var(--badge-scale, 1)) translate(0,0); }
      20% { transform: scale(var(--badge-scale, 1)) translate(-1px,0); }
      40% { transform: scale(var(--badge-scale, 1)) translate(1px,0); }
      60% { transform: scale(var(--badge-scale, 1)) translate(-1px,0); }
      80% { transform: scale(var(--badge-scale, 1)) translate(1px,0); }
      100% { transform: scale(var(--badge-scale, 1)) translate(0,0); }
    }

    @keyframes smart-flip {
      0% { transform: scale(var(--badge-scale, 1)) rotateY(0deg); }
      50% { transform: scale(var(--badge-scale, 1)) rotateY(180deg); }
      100% { transform: scale(var(--badge-scale, 1)) rotateY(360deg); }
    }

    @keyframes smart-blink {
      0%, 50% { 
        transform: scale(var(--badge-scale, 1));
        opacity: 1; 
      }
      51%, 100% { 
        transform: scale(var(--badge-scale, 1));
        opacity: 0.3; 
      }
    }

    ${(() => {
      try {
        const config = this.config["smart_icons"];
        if (!config) return '';

        const processColor = (color, entityCtx = {}) => {
          if (!color) return null;
          
          // If it's already a complete color format, return as-is
          if (color.match(/^(#|rgb|hsl|var\()/)) return color;
          
          // Check if it's a JavaScript expression for CSS variables
          if (color.includes('var(--') || color.includes('${')) {
            try {
              // Evaluate the expression to get the CSS variable
              let compiledFn = card._smartExpressionCache?.get(color);
              if (!compiledFn) {
                compiledFn = new Function('ctx', `with(ctx) { return \`${color}\`; }`);
                if (!card._smartExpressionCache) card._smartExpressionCache = new Map();
                card._smartExpressionCache.set(color, compiledFn);
              }
              
              const globalCtx = {
                Math, Date, parseInt, parseFloat,
                states: (id) => hass.states[id]?.state,
                getEntity: (id) => hass.states[id],
                attr: (id, attr) => hass.states[id]?.attributes[attr],
                ...entityCtx
              };
              
              return compiledFn(globalCtx) || color;
            } catch (err) {
              console.warn(`[smart_icons] Color expression error: ${err.message}`);
              return color;
            }
          }
          
          // Default: wrap simple names as CSS variables
          return `var(--${color}-color)`;
        };

        if (!card._smartExpressionCache) {
          card._smartExpressionCache = new Map();
        }

        // Define helpers once at module level (before evalExpr function)
        if (!window._smartIconsHelpers) {
          window._smartIconsHelpers = {
            cond: (value, conditions, fallback, op = '==') => {
              for (const [key, result] of Object.entries(conditions)) {
                switch (op) {
                  case '==': if (value == key) return result; break;
                  case '!=': if (value != key) return result; break;
                }
              }
              return fallback;
            },
            
            thresholds: (value, thresholdObj, fallback, op = '>=') => {
              const sortedKeys = Object.keys(thresholdObj).map(Number).sort((a, b) => b - a);
              for (const threshold of sortedKeys) {
                const condition = op === '>=' ? value >= threshold :
                                op === '<=' ? value <= threshold :
                                op === '>' ? value > threshold :
                                op === '<' ? value < threshold :
                                value === threshold;
                if (condition) return thresholdObj[threshold];
              }
              return fallback;
            },
            
            between: (val, min, max, inclusive = true) => 
              inclusive ? (val >= min && val <= max) : (val > min && val < max),
              
            above: (val, threshold) => val > threshold,
            below: (val, threshold) => val < threshold,
            equals: (val, target) => val === target,
            
            entityCond: (entityId, conditions, fallback, opts = {}) => {
              const entity = hass.states[entityId];
              if (!entity) return fallback;
              const value = opts.attr ? entity.attributes[opts.attr] : entity.state;
              return window._smartIconsHelpers.cond(value, conditions, fallback, opts.op);
            },
            
            slugify: (str, separator = '_') => {
              if (!str || typeof str !== 'string') return '';
              return str
                .toLowerCase()
                .normalize('NFD')
                .replace(/[\u0300-\u036f]/g, '')
                .replace(/[^\w\s-]/g, '')
                .trim()
                .replace(/[\s_-]+/g, separator)
                .replace(new RegExp(`^${separator}+|${separator}+$`, 'g'), '');
            }
          };
          
          // Expose directly on window for convenience in CSS context
          Object.assign(window, window._smartIconsHelpers);
        }

        const evalExpr = (expr, fallback, entityCtx = {}) => {
          if (!expr) return fallback;
          try {
            let compiledFn = card._smartExpressionCache.get(expr);
            if (!compiledFn) {
              compiledFn = new Function('ctx', `with(ctx) { return ${expr}; }`);
              card._smartExpressionCache.set(expr, compiledFn);
            }
            
            const globalCtx = {
              Math, Date, parseInt, parseFloat,
              states: (id) => hass.states[id]?.state,
              getEntity: (id) => hass.states[id],
              attr: (id, attr) => hass.states[id]?.attributes[attr],
              
              ...window._smartIconsHelpers,      
              ...entityCtx
            };
            
            return compiledFn(globalCtx) ?? fallback;
          } catch (err) {
            console.warn(`[smart_icons] Expression error: ${err.message}`);
            return fallback;
          }
        };

        const shouldShow = (config) => {
          if (!config.conditions) return true;
          try {
            return checkConditionsMet([].concat(config.conditions), hass);
          } catch (err) {
            return false;
          }
        };

        const applyEffect = (element, effect) => {
          element.className = element.className.replace(/smart-effect-\w+/g, '');
          if (effect) element.classList.add(`smart-effect-${effect}`);
        };

        // Enhanced expression caching that includes attribute values
        const getCacheKey = () => {
          const extractAttributeRefs = (expr) => {
            if (!expr || typeof expr !== 'string') return [];
            const matches = [];
            // Look for attributes.attributeName or attr(...) patterns
            const attrPatterns = [
              /attributes\.(\w+)/g,
              /attr\([^,]+,\s*["'](\w+)["']\)/g
            ];
            
            attrPatterns.forEach(pattern => {
              let match;
              while ((match = pattern.exec(expr)) !== null) {
                matches.push(match[1]);
              }
            });
            return matches;
          };

          const extractEntityRefs = (expr) => {
            if (!expr || typeof expr !== 'string') return [];
            const refs = [];
            
            // Helper function patterns that reference entities
            const entityPatterns = [
              /entityCond\(\s*["']([^"']+)["']/g,  // entityCond('entity.id', ...)
              /states\(\s*["']([^"']+)["']\)/g,    // states('entity.id')
              /getEntity\(\s*["']([^"']+)["']\)/g  // getEntity('entity.id')
            ];
            
            entityPatterns.forEach(pattern => {
              let match;
              while ((match = pattern.exec(expr)) !== null) {
                refs.push(match[1]);
              }
            });
            
            return refs;
          };

          const getEntityCacheData = (configItem, fallbackEntity) => {
            const eid = configItem.entity || fallbackEntity;
            const e = hass.states[eid];
            if (!e) return null;
            
            // Get base cache data
            const baseData = [e.state, e.last_changed];
            
            // Extract referenced attributes and entities from all JS expressions
            const jsProps = Object.keys(configItem).filter(k => k.endsWith('_js'));
            const referencedAttrs = new Set();
            const referencedEntities = new Set();
            
            jsProps.forEach(prop => {
              const expr = configItem[prop];
              extractAttributeRefs(expr).forEach(attr => referencedAttrs.add(attr));
              extractEntityRefs(expr).forEach(entityId => referencedEntities.add(entityId));
            });
            
            // Add attribute values to cache data
            const attrData = Array.from(referencedAttrs).map(attr => e.attributes[attr]);
            
            // Add external entity states to cache data  
            const entityData = Array.from(referencedEntities).map(entityId => {
              const extEntity = hass.states[entityId];
              return extEntity ? [extEntity.state, extEntity.last_changed] : null;
            }).filter(Boolean).flat();
            
            return [...baseData, ...attrData, ...entityData];
          };

          return JSON.stringify([
            entity,
            ...((config.badges || []).map(b => getEntityCacheData(b, entity))),
            ...((config.icons || []).map(i => getEntityCacheData(i, entity)))
          ]);
        };

        const currentCacheKey = getCacheKey();
        
        // Always update icons even when styles are cached
        (config.icons || []).forEach(iconConfig => {
          if (!iconConfig.name || !shouldShow(iconConfig)) return;
          
          const entityId = iconConfig.entity || entity;
          const entityObj = hass.states[entityId];
          const entityCtx = {
            entity: entityObj,
            state: entityObj?.state,
            lowerState: entityObj?.state?.toLowerCase?.() || '',
            attributes: entityObj?.attributes || {}
          };

          const resolvedIcon = evalExpr(iconConfig.icon_js, iconConfig.icon, entityCtx);

          if (iconConfig.target === 'main_icon' && resolvedIcon) {
            icon.icon = resolvedIcon;
          } else if (iconConfig.target !== 'main_icon') {
            const buttonIndex = parseInt(iconConfig.target.split('_')[1]) - 1;
            if (resolvedIcon && subButtonIcon && subButtonIcon[buttonIndex]) {
              subButtonIcon[buttonIndex].icon = resolvedIcon;
            }
          }
        });

        if (card._smartIconsCache?.key === currentCacheKey) {
          return card._smartIconsCache.styles;
        }

        let iconStyles = [];

        (config.icons || []).forEach(iconConfig => {
          if (!iconConfig.name || !shouldShow(iconConfig)) return;
          
          const entityId = iconConfig.entity || entity;
          const entityObj = hass.states[entityId];
          const entityCtx = {
            entity: entityObj,
            state: entityObj?.state,
            lowerState: entityObj?.state?.toLowerCase?.() || '',
            attributes: entityObj?.attributes || {}
          };

          const resolved = {
            icon: evalExpr(iconConfig.icon_js, iconConfig.icon, entityCtx),
            iconColor: evalExpr(iconConfig.icon_color_js, iconConfig.icon_color, entityCtx),
            backgroundColor: evalExpr(iconConfig.background_color_js, iconConfig.background_color, entityCtx),
            backgroundOpacity: evalExpr(iconConfig.background_opacity_js, iconConfig.background_opacity, entityCtx),
            effect: evalExpr(iconConfig.effect_js, iconConfig.effect, entityCtx),
            effectTarget: evalExpr(iconConfig.effect_target_js, iconConfig.effect_target || 'container', entityCtx)
          };

          if (iconConfig.target === 'main_icon') {
            if (resolved.iconColor) {
              iconStyles.push(`.bubble-icon { color: ${processColor(resolved.iconColor)} !important; }`);
            }
            if (resolved.backgroundColor) {
              iconStyles.push(`.bubble-icon-container { background-color: ${processColor(resolved.backgroundColor)} !important; }`);
            }
            if (resolved.backgroundOpacity !== undefined) {
              iconStyles.push(`.bubble-icon-container { opacity: ${resolved.backgroundOpacity} !important; }`);
            }
            if (resolved.effect) {
              const targetSelector = resolved.effectTarget === 'icon' ? '.bubble-icon' : '.bubble-icon-container';
              iconStyles.push(`${targetSelector} { animation: smart-${resolved.effect} 2s infinite ease-in-out !important; }`);
            }
          } else {
            const buttonIndex = parseInt(iconConfig.target.split('_')[1]) - 1;
            
            const container = card.querySelector(`.bubble-sub-button-${buttonIndex + 1}`);
            if (container) {
              const iconEl = container.querySelector('ha-icon');
              if (iconEl && resolved.iconColor) {
                iconEl.style.color = processColor(resolved.iconColor);
              }
              if (resolved.backgroundColor) {
                container.style.backgroundColor = processColor(resolved.backgroundColor);
              }
              if (resolved.backgroundOpacity !== undefined) {
                container.style.opacity = resolved.backgroundOpacity;
              }
              if (resolved.effectTarget === 'icon' && iconEl) {
                applyEffect(iconEl, resolved.effect);
              } else {
                applyEffect(container, resolved.effect);
              }
            }
          }
        });

        (config.badges || []).forEach(badgeConfig => {
          if (!badgeConfig.name || !badgeConfig.target || !shouldShow(badgeConfig)) {
            const badgeKey = `${badgeConfig.target}_${badgeConfig.name}`;
            const existing = card.querySelector(`[data-badge-key="${badgeKey}"]`);
            if (existing) existing.remove();
            return;
          }
          
          const entityId = badgeConfig.entity || entity;
          const entityObj = hass.states[entityId];
          const entityCtx = {
            entity: entityObj,
            state: entityObj?.state,
            lowerState: entityObj?.state?.toLowerCase?.() || '',
            attributes: entityObj?.attributes || {}
          };

          const resolved = {
            icon: evalExpr(badgeConfig.icon_js, badgeConfig.icon, entityCtx),
            text: evalExpr(badgeConfig.text_js, '', entityCtx),
            bg: evalExpr(badgeConfig.background_color_js, badgeConfig.background_color, entityCtx),
            textColor: evalExpr(badgeConfig.text_color_js, badgeConfig.text_color, entityCtx),
            scale: evalExpr(badgeConfig.scale_js, badgeConfig.scale, entityCtx),
            fontScale: evalExpr(badgeConfig.font_scale_js, badgeConfig.font_scale, entityCtx),
            glow: evalExpr(badgeConfig.glow_color_js, badgeConfig.glow_color, entityCtx),
            hOffset: evalExpr(badgeConfig.h_offset_js, badgeConfig.h_offset ?? -4, entityCtx),
            vOffset: evalExpr(badgeConfig.v_offset_js, badgeConfig.v_offset ?? -4, entityCtx),
            position: evalExpr(badgeConfig.position_js, badgeConfig.position || 'top-right', entityCtx),
            shape: evalExpr(badgeConfig.shape_js, badgeConfig.shape || 'auto', entityCtx),
            effect: evalExpr(badgeConfig.effect_js, badgeConfig.effect, entityCtx),
            showBg: badgeConfig.show_background,
            entityValue: entityId ? (
              badgeConfig.attribute 
                ? entityObj?.attributes[badgeConfig.attribute] || ''
                : hass.formatEntityState?.(entityObj) || entityObj?.state || ''
            ) : null
          };

          const container = badgeConfig.target === 'main_icon' 
            ? card.querySelector('.bubble-icon-container')
            : card.querySelector(`.bubble-sub-button-${badgeConfig.target.split('_')[1]}`);
          
          if (!container) return;
          
          if (container.style.position === 'static' || !container.style.position) {
            container.style.position = 'relative';
          }

          const badgeKey = `${badgeConfig.target}_${badgeConfig.name}`;
          let badge = container.querySelector(`[data-badge-key="${badgeKey}"]`);

          if (!badge) {
            badge = document.createElement('div');
            badge.className = 'bubble-main-icon-badge';
            badge.setAttribute('data-badge-key', badgeKey);
            container.appendChild(badge);
          }

          // Configure badge actions using Bubble Card's system
          if (badgeConfig.tap_action || badgeConfig.hold_action || badgeConfig.entity) {
            // Determine the entity to use for actions
            const actionEntity = badgeConfig.entity || entity;
            
            // Create action configurations with entity included
            // Default to more-info if no tap_action specified but entity exists
            const tapAction = badgeConfig.tap_action ? {
              ...badgeConfig.tap_action,
              entity: badgeConfig.tap_action.entity || actionEntity
            } : actionEntity ? {
              action: "more-info",
              entity: actionEntity
            } : { action: "none" };

            const holdAction = badgeConfig.hold_action ? {
              ...badgeConfig.hold_action, 
              entity: badgeConfig.hold_action.entity || actionEntity
            } : { action: "none" };

            // Add Bubble Card action system
            badge.classList.add('bubble-action');
            badge.dataset.entity = actionEntity;
            badge.dataset.tapAction = JSON.stringify(tapAction);
            badge.dataset.doubleTapAction = JSON.stringify({ action: "none" });
            badge.dataset.holdAction = JSON.stringify(holdAction);
            
            // Add enabled class for styling
            if (tapAction.action !== "none" || holdAction.action !== "none") {
              badge.classList.add('bubble-action-enabled');
            }
          } else {
            badge.classList.add('no-actions');
          }

          badge.className = 'bubble-main-icon-badge';
          badge.setAttribute('data-badge-key', badgeKey);
          badge.classList.add(`position-${resolved.position}`);
          
          if (resolved.shape === 'circle' || (resolved.shape === 'auto' && resolved.icon)) {
            badge.classList.add('circular');
          }
          
          if (resolved.showBg === false) {
            badge.classList.add('no-background');
          }
          
          // Re-add action classes if they exist
          if (badgeConfig.tap_action || badgeConfig.hold_action || badgeConfig.entity) {
            badge.classList.add('bubble-action');
            const tapAction = badgeConfig.tap_action ? {
              ...badgeConfig.tap_action,
              entity: badgeConfig.tap_action.entity || (badgeConfig.entity || entity)
            } : (badgeConfig.entity || entity) ? {
              action: "more-info",
              entity: badgeConfig.entity || entity
            } : { action: "none" };
            
            const holdAction = badgeConfig.hold_action ? {
              ...badgeConfig.hold_action, 
              entity: badgeConfig.hold_action.entity || (badgeConfig.entity || entity)
            } : { action: "none" };
            
            if (tapAction.action !== "none" || holdAction.action !== "none") {
              badge.classList.add('bubble-action-enabled');
            }
          } else {
            badge.classList.add('no-actions');
          }

          if (resolved.bg) badge.style.setProperty('--badge-color', processColor(resolved.bg, entityCtx));
          if (resolved.textColor) badge.style.color = processColor(resolved.textColor, entityCtx);
          if (resolved.glow) badge.style.setProperty('--glow-color', processColor(resolved.glow, entityCtx));
          
          const defaultScale = badgeConfig.target.startsWith('button_') ? 0.7 : 1;
          const scale = resolved.scale ?? defaultScale;
          badge.style.setProperty('--badge-scale', scale);
          
          if (resolved.fontScale && resolved.fontScale !== 1) {
            badge.style.fontSize = `${resolved.fontScale}em`;
          }
          
          if (resolved.position === 'top' || resolved.position === 'bottom') {
            badge.style.marginTop = resolved.position === 'top' ? `${resolved.vOffset}px` : '';
            badge.style.marginBottom = resolved.position === 'bottom' ? `${Math.abs(resolved.vOffset)}px` : '';
          } else {
            const [vSide, hSide] = resolved.position.split('-');
            badge.style[vSide] = `${resolved.vOffset}px`;
            badge.style[hSide] = `${resolved.hOffset}px`;
          }
          
          applyEffect(badge, resolved.effect);

          if (resolved.icon) {
            badge.innerHTML = `<ha-icon class="badge-icon" icon="${resolved.icon}" style="width: ${badge.classList.contains('circular') ? '12px' : '13px'}; height: ${badge.classList.contains('circular') ? '12px' : '13px'}; display: flex; align-items: center; justify-content: center;"></ha-icon>`;
          } else if (resolved.text) {
            badge.textContent = resolved.text;
          } else if (resolved.entityValue) {
            badge.textContent = resolved.entityValue;
          }
        });

        const finalStyles = iconStyles.join('\n');
        
        card._smartIconsCache = { 
          key: currentCacheKey, 
          styles: finalStyles 
        };
        
        return finalStyles;

      } catch (err) {
        console.error("[smart_icons] Error:", err);
        return '';
      }
    })()}

  editor:
    - type: constant
      label: >-
        Configure dynamic icons and badges for the main card icon and sub-buttons.
        Icons can be replaced dynamically based on entity states, and badges provide
        additional overlay information with interactive actions.
    - type: heading
      heading: Dynamic Icons
    - name: icons
      label: Icon Overrides
      selector:
        object:
          fields:
            name:
              label: Override Name
              description: >-
                Unique name for this icon override (e.g., thermostat_mode,
                light_status)
              required: true
              selector:
                text: {}
            target:
              label: Target Container
              description: Which icon to override
              default: main_icon
              required: true
              selector:
                select:
                  options:
                    - label: Main Icon
                      value: main_icon
                    - label: Sub-button 1
                      value: button_1
                    - label: Sub-button 2
                      value: button_2
                    - label: Sub-button 3
                      value: button_3
                    - label: Sub-button 4
                      value: button_4
                  multiple: false
                  custom_value: false
                  mode: "dropdown"
            entity:
              label: Entity
              description: Entity to monitor for state changes
              selector:
                entity: {}
            icon:
              label: Static Icon
              description: Fixed icon to use (use icon_js for dynamic icons)
              selector:
                icon: {}
            icon_color:
              label: Icon Color
              description: Static color for the icon
              selector:
                ui_color: {}
            background_color:
              label: Background Color
              description: Static background color for the icon container
              selector:
                ui_color: {}
            background_opacity:
              label: Background Opacity
              description: Opacity for the background (0.0 to 1.0)
              selector:
                number:
                  min: 0
                  max: 1
                  step: 0.1
                  mode: slider
            effect:
              label: Animation Effect
              description: Static animation effect for the icon
              selector:
                select:
                  options:
                    - label: Pulse (gentle scaling)
                      value: pulse
                    - label: Glow (soft light effect)
                      value: glow
                    - label: Rotate (gentle rocking)
                      value: rotate
                    - label: Spin (continuous rotation)
                      value: spin
                    - label: Float (up and down)
                      value: float
                    - label: Zoom (scaling animation)
                      value: zoom
                    - label: Shake (quick wiggle)
                      value: shake
                    - label: Vibrate (rapid shake)
                      value: vibrate
                    - label: Flip (3D flip effect)
                      value: flip
                    - label: Blink (on/off flashing)
                      value: blink
                  multiple: false
                  custom_value: false
                  mode: dropdown
            effect_target:
              label: Animation Target
              description: >-
                Where to apply the animation effect. 'container' animates badges
                together with icon, 'icon' keeps badges static.
              default: container
              selector:
                select:
                  options:
                    - label: Container (badges animate with icon)
                      value: container
                    - label: Icon Only (badges stay static)
                      value: icon
                  multiple: false
                  custom_value: false
                  mode: "dropdown"
            conditions:
              label: Display Conditions
              description: Only apply icon override when these conditions are met
              selector:
                condition: {}
            icon_js:
              label: Dynamic Icon (JavaScript)
              description: >-
                JavaScript expression for dynamic icon selection. Example: state ===
                "heating" ? "mdi:fire" : "mdi:thermostat"
              selector:
                text:
                  multiline: true
            icon_color_js:
              label: Dynamic Icon Color (JavaScript)
              description: >-
                JavaScript expression for dynamic color. Example: state === "on" ?
                "#ffc107" : "#666"
              selector:
                text:
                  multiline: true
            background_color_js:
              label: Dynamic Background Color (JavaScript)
              description: >-
                JavaScript expression for background. Example: state === "heating" ?
                "#ff000030" : null
              selector:
                text:
                  multiline: true
            background_opacity_js:
              label: Dynamic Background Opacity (JavaScript)
              description: >-
                JavaScript expression for opacity. Example: state === "on" ? 0.8 :
                0.3
              selector:
                text:
                  multiline: true
            effect_js:
              label: Dynamic Effect (JavaScript)
              description: >-
                JavaScript expression for effect. Example: state === "heating" ?
                "pulse" : null
              selector:
                text:
                  multiline: true
            effect_target_js:
              label: Dynamic Animation Target (JavaScript)
              description: >-
                JavaScript expression for animation target. Example: state ===
                "active" ? "icon" : "container"
              selector:
                text:
                  multiline: true
          multiple: true
          label_field: name
    - type: heading
      heading: Badge Overlays
    - name: badges
      label: Smart Badges
      selector:
        object:
          fields:
            name:
              label: Badge Name
              description: Unique name for this badge
              required: true
              selector:
                text: {}
            target:
              label: Target Container
              description: Where to place this badge
              default: main_icon
              required: true
              selector:
                select:
                  options:
                    - label: Main Icon
                      value: main_icon
                    - label: Sub-button 1
                      value: button_1
                    - label: Sub-button 2
                      value: button_2
                    - label: Sub-button 3
                      value: button_3
                    - label: Sub-button 4
                      value: button_4
                  multiple: false
                  custom_value: false
                  mode: "dropdown"
            entity:
              label: Entity
              description: Entity to monitor and display (use this OR icon, not both)
              selector:
                entity: {}
            attribute:
              label: Entity Attribute
              description: Specific attribute to display (leave empty to show entity state)
              selector:
                text: {}
            icon:
              label: Icon
              description: Static icon to display (use this OR icon, not both)
              selector:
                icon: {}
            # Actions Section
            tap_action:
              description: Action when badge is tapped (defaults to more-info if entity exists)
              selector:
                ui_action:
                  default_action: "more-info"
            hold_action:
              label: Hold Action
              description: Action when badge is held
              selector:
                ui_action:
                  default_action: "none"
            # Display Section
            position:
              label: Position
              description: Where to place the badge
              default: top-right
              required: true
              selector:
                select:
                  options:
                    - label: Top Left
                      value: top-left
                    - label: Top Center
                      value: top
                    - label: Top Right
                      value: top-right
                    - label: Bottom Left
                      value: bottom-left
                    - label: Bottom Center
                      value: bottom
                    - label: Bottom Right
                      value: bottom-right
                  multiple: false
                  custom_value: false
                  mode: "dropdown"
            shape:
              label: Shape
              description: Badge shape (auto detects based on content)
              default: auto
              required: true
              selector:
                select:
                  options:
                    - label: Auto (circle for icons, rounded for text)
                      value: auto
                    - label: Circle
                      value: circle
                    - label: Rounded Rectangle
                      value: rounded
                  multiple: false
                  custom_value: false
                  mode: "dropdown"
            # Colors Section
            background_color:
              label: Background Color
              description: Badge background color (hex, theme color, or CSS variable)
              selector:
                ui_color: {}
            text_color:
              label: Text Color
              description: Text color for the badge
              default: "#ffffff"
              selector:
                ui_color: {}
            # Animation Section
            effect:
              label: Animation Effect
              description: Optional animation for the badge
              selector:
                select:
                  options:
                    - label: Pulse
                      value: pulse
                    - label: Glow
                      value: glow
                    - label: Rotate
                      value: rotate
                    - label: Spin
                      value: spin
                    - label: Float
                      value: float
                    - label: Zoom
                      value: zoom
                    - label: Shake
                      value: shake
                    - label: Vibrate
                      value: vibrate
                    - label: Flip
                      value: flip
                    - label: Blink
                      value: blink
                  multiple: false
                  custom_value: false
                  mode: dropdown
            # Advanced Section
            font_scale:
              label: Font Scale
              description: Text size within the badge
              default: 1
              selector:
                number:
                  min: 0.5
                  max: 1.5
                  step: 0.1
                  mode: slider
            glow_color:
              label: Glow Color
              description: Color for glow effect (only works with glow animation)
              selector:
                ui_color: {}
            scale:
              label: Badge Scale
              description: Overall size of the badge
              default: 1
              selector:
                number:
                  min: 0.3
                  max: 2
                  step: 0.1
                  mode: slider
            h_offset:
              label: Horizontal Offset
              description: Fine-tune horizontal position
              default: -4
              selector:
                number:
                  min: -20
                  max: 20
                  step: 1
                  mode: box
            v_offset:
              label: Vertical Offset
              description: Fine-tune vertical position
              default: -4
              selector:
                number:
                  min: -20
                  max: 20
                  step: 1
                  mode: box
            show_background:
              label: Show Background
              description: Whether to show the badge background
              default: true
              selector:
                boolean: {}
            conditions:
              label: Display Conditions
              description: Only show badge when these conditions are met
              selector:
                condition: {}
            # JavaScript Expressions
            text_js:
              label: Dynamic Text (JavaScript)
              description: JavaScript expression for dynamic text
              selector:
                text:
                  multiline: true
            icon_js:
              label: Dynamic Icon (JavaScript)
              description: JavaScript expression for dynamic icon
              selector:
                text:
                  multiline: true
            background_color_js:
              label: Dynamic Background Color (JavaScript)
              description: JavaScript expression for background color
              selector:
                text:
                  multiline: true
            text_color_js:
              label: Dynamic Text Color (JavaScript)
              description: JavaScript expression for text color
              selector:
                text:
                  multiline: true
            scale_js:
              label: Dynamic Scale (JavaScript)
              description: JavaScript expression for scale
              selector:
                text:
                  multiline: true
            font_scale_js:
              label: Dynamic Font Scale (JavaScript)
              description: JavaScript expression for font scale
              selector:
                text:
                  multiline: true
            glow_color_js:
              label: Dynamic Glow Color (JavaScript)
              description: JavaScript expression for glow color
              selector:
                text:
                  multiline: true
            h_offset_js:
              label: Dynamic Horizontal Offset (JavaScript)
              description: JavaScript expression for horizontal offset
              selector:
                text:
                  multiline: true
            v_offset_js:
              label: Dynamic Vertical Offset (JavaScript)
              description: JavaScript expression for vertical offset
              selector:
                text:
                  multiline: true
            position_js:
              label: Dynamic Position (JavaScript)
              description: JavaScript expression for position
              selector:
                text:
                  multiline: true
            shape_js:
              label: Dynamic Shape (JavaScript)
              description: JavaScript expression for shape
              selector:
                text:
                  multiline: true
            effect_js:
              label: Dynamic Effect (JavaScript)
              description: JavaScript expression for animation effect
              selector:
                text:
                  multiline: true
          multiple: true
          label_field: name

---

Screenshot:

Important: The first screenshot here will be used on the Module Store, so please provide one.

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 ❤️

[titro]

hey. the installation from the module store is not possible? it only shows "manual install"?

[szsolt]

I suspect because I have an extra yaml in the markdown description.
Hopefully when the store cache is expired and it is refreshing the content, it will work.

[titro]

or because the link is still a dummy value? https://github.com/Clooos/Bubble-Card/discussions/XXXX

[szsolt]

It should work now, there were two problems:

• an extra ```yaml in the description which the store module detected as the yaml source code, but it was an example.
• there were some misaligned < br > in the yaml module description

Clear the local storage in your browser and the install button will work now.

[titro]

yes, working, thanks!

But it only shows the icon not the entity value itself?

[titro]

got it. if an icon is chosen, the entity value is not shown.

are you already have ideas to make the entity clickable to open the entity details page? i often want so see the temperate history

[szsolt]

Smart Icons v1.1 → v1.2 Changes

New Features

• Badge Actions: Added tap_action and hold_action support for interactive badges
• Enhanced Context: New lowerState, getEntity(), and direct attributes access in expressions
• Dynamic Properties: Added _js support for font_scale, glow_color, h_offset, v_offset, position, and shape

Improvements

• Performance: Expression caching system for faster evaluation
• CSS: Better badge interactivity styles (hover/active states)
• DOM: More efficient badge management with data attributes

Backward Compatibility

✅ All v1.1 configurations remain fully compatible

[johndoe0815]

I can't get the tap_action to work with the UI.
I am in the edit window of a smart badge and click on add tap action. It then opens a new window:

Then as action I select "more info", more does not seem to be maintained, but I also tried adding explicitely the entity (I would expect that by default the badge entity is used otherwise). Anyways, I then click on "add" in the bottom right, which then quits the complete badge editing mode, so basically closes two windows. I then go again into editing my existing smart badge, but no tap action has been added.

[szsolt]

Now there is a default 'more-info' on every badge on tap.
Removed the double popups, so now the tap and hold actions are flat in the configuration and are working properly.

[snappy1111]

Hi,

I really like the modul. Unfortunately it seems not working for smart badges unsing attributes.

For all attemps I try to add a smart badge showing the temperature of an AC is not working. I do only get the state of the AC such as cool, but not the value for the temperature.

- target: button_3
  entity: climate.ac_office
  name: AC
  attribute: temperature
  background_color: "#ffffff"
  text_color: "#0080ff"
  glow_color: "#0080ff"

Is there something I do wrong unsing the tag for attribute?

[szsolt]

Hi,

It was a bug, now it should work in v1.3. Give it a try.

[snappy1111]

Awesome. Many thanks. Works perfectly.

[johndoe0815]

Very powerful module, thanks for that!
Do you think it would be possible that the animation effect only applies to the button itself, not to the badges? Currently the badges are animated together with the button.

[szsolt]

Thanks so much for your feedback—you’re most welcome! But full credit and a big thanks goes to Clooos, who made all of this possible.

Regarding animation: as of Smart Icons v1.3, you can now control the animation target. There’s a new effect_target option that lets you decide if animations apply only to the icon, or to both the icon and its badges. By default, animations affect both (container), but you can now set it so only the icon animates (badges remain static). Just update your configuration and choose the target that fits your preference, either container or icon.

See if this new option in v1.3 meets your needs!

[johndoe0815]

Wow, that was quick, thanks a lot!

[szsolt]

Smart Icons v1.2 → v1.3 Changes

Bug Fixes

• Badge Attributes: Fixed attribute field not working - badges now properly display entity attributes like current_temperature, battery_level, etc.

New Features

• Animation Target Control: Added effect_target and effect_target_js configuration
  • container: Badges animate together with icon (default, preserves v1.2 behavior)
  • icon: Only icon animates, badges remain static
• Enhanced Examples: Updated YAML example demonstrates attribute usage and animation targeting

Backward Compatibility

✅ All v1.2 configurations remain fully compatible - effect_target defaults to container

[derousse]

Any idea why this module would not be listed in the module store for me?

[Clooos]

Hi! To be fully honest, this is because of me. The module overlaps with one of my most popular "Patreon-only" modules that helps support my work, so I had to block it on the store. But I really appreciate the quality of this module, this is excellent work, and it actually offers more options than mine 👌Which is why I’m not removing it here.

It can still be installed manually by following the steps in the "Get this Module" section above in this post.

@szsolt I truly hope you understand. This was not an easy choice.

[johndoe0815]

I think you should rethink that decision. If he has not copy & pasted your code, it is not a good choice to "block" people building features that you put behind a paywall. I fully understand the Patreon thing and appreciate all the great work into bubble card, but the Home Assistant world is open source and lives from the all the great people building all those great things.

[Clooos]

I really appreciate your perspective and I fully love the open-source spirit, it’s what makes this community so amazing. Bubble Card has always been a part-time work for me, and the Patreon, where I currently have only 2 modules, helps me dedicate the time I can to maintain and improve it. Without that support, I wouldn’t be able to keep working on it.

I hope to publish more Patreon modules regularly, and when I’ve built a larger collection, I might revisit this decision. I hope you understand.

[szsolt]

@Clooos I really appreciate your transparency and understand the challenging balance between open source contributions and sustainable development time.
I want to clarify that smart_icons is much more comprehensive than conditional badges - it includes JavaScript expressions, dynamic icon replacement, multi-target support (sub-buttons, not just main icons), animation effects, and interactive actions. While there's some functional overlap, they serve quite different use cases and complexity levels.
I actually developed smart_icons specifically to redesign my entire Home Assistant interface, and my complete setup is just Bubble Card + smart_icons + YTT for templating - it covers all my needs perfectly. So in many ways, smart_icons is showcasing what's possible when Bubble Card is extended with advanced icon management capabilities.
My main concern is the discoverability impact. The blacklist means users can't discover smart_icons through the store, which limits their ability to choose the solution that best fits their needs.
I see a few potential paths forward:

• I could add prominent attribution in smart_icons' description acknowledging your excellent work and encouraging users to support Bubble Card through Patreon, while mentioning your official conditional badges module exists.
• Alternatively, would you be open to collaboration? I could work on extending Bubble Card itself to natively support these advanced icon and badge features. This might actually strengthen your ecosystem while giving users the functionality they need within the official cards.
• Or here's another idea: What if I "donated" the smart_icons module to you for your Patreon? You could offer it as an advanced companion to your conditional badges module. I'd be happy to continue supporting updates and development, but it would be under your umbrella and help support your work financially.

The goal isn't to compete but to give users the best possible experience with Bubble Card. What approach do you think would work best for the community?

[johndoe0815]

I think those are good ideas and hope that this will come to a solution in the interest of the community, as this is already in the early days of v3 a tremendous module!

But in the meantime now a concrete question:
I have installed this module via the store when it was still available. I understand that I currently would not receive an update via the module store anymore. If now an update is issued and I import that manually via the yaml in the module import functionality, will it overwrite the previous version (installed via module store), will it create a duplicate entry or how will this module functionality practically react?

With now three possibilities to add modules (via store, via manual import, or via pasting the code into a completely separate yaml file), I am a bit confused about how those can (or not) coexist in parallel and want to prevent that in worst case all the adjustmens made with one module are being lost when working with different module sources.

[szsolt]

Hi @johndoe0815,

Great question! If you previously installed Smart Icons via the store before it became hidden/blacklisted, it should still update itself through the store as long as the store system detects it as installed, and a new version is published. The blacklist applied in the store only prevents new users from discovering and installing it directly through the store interface—it doesn't automatically disable, remove, or duplicate the module for those who already have it installed.

There are three ways to install/update the module:

1. Store installation - via the store interface (when available)
2. Manual via UI - importing YAML through the module import functionality
3. Direct YAML editing - manually adding to /www/bubble/bubble-modules.yaml

The system uses a "last installation wins" approach—Bubble Card tracks both the module definitions (yamlKeysMap) and their source (moduleSourceMap) to determine which version is active and how it should be displayed in the UI.

Here's how the precedence works:

• Any method can overwrite any other method - the most recent installation takes precedence
• If your current source is YAML (either method 2 or 3), the UI shows a "YAML" badge
• If your current source is store, it shows as a regular "Installed" status
• No duplicates occur because all methods use the same module key (smart_icons)

In practice:

• You can switch between any installation method without issues
• The system recognizes which method was used last and updates the source tracking accordingly
• Updates will work regardless of current source, but the store UI reflects the current installation method
• Installing manually (either via UI import or direct YAML editing) after a store installation effectively "takes over" the module

So you're completely safe to update using any method—the system handles all transitions gracefully without corruption or duplicates. Choose whichever method is most convenient for you!

Let me know if any other questions come up!

[johndoe0815]

Wow, once thanks for the extensive reply, makes all sense! This should be taken over into the official documentation, obviously the project needs you as a developer ;-)

[Clooos]

@szsolt @johndoe0815 I really hope you can understand this decision, and I truly hope you can forgive me for this. I put a lot of work into this project almost every day, and it has been 2 years already.

That being said, you are more than welcome if you want to contribute directly to the Bubble Card code. I won’t add native support for badges (at least not for now), but let’s never say never 😄

I also have many other great features in mind, like a "Sub-button card" that could be used as a menu card, with text below options, the ability to hide the card’s background, icon alignment, some layouts... If you want to work on that (or anything else), that would be awesome, and you definitely know how Bubble Card works now 🙂

[szsolt]

@Clooos I completely understand your decision, and there's absolutely nothing to forgive! You've put an incredible amount of work into Bubble Card over the past 2 years, and the community truly appreciates your dedication and daily efforts.

[ctankep23]

This is really cool stuff! Some of this should be incorporated into the main!
But for this post I was wondering why I am not getting this to work? I want to recreate the custom mushrom-person-card, specifically trying to get the badge to render the persons current zone. But all I am getting is the zones name in text.

icon_js: |
  const personState = states['person.name'].state;
  const zoneEntity = states[`zone.${personState}`];
  if (personState === 'home') {
    return 'mdi:home';
  } else if (personState === 'not_home') {
    return 'mdi:map-marker-off';
  } else if (zoneEntity && zoneEntity.attributes.icon) {
    return zoneEntity.attributes.icon;
  }
  return 'mdi:map-marker';

[edit] In fact, none of the js fields seem to be working. I tried:

icon_js: return 'mdi:home';
background_color_js: |
  const location = states['person.name'].state;
  if (location === 'home') {
    return 'green';
  } else if (location === 'not_home') {
    return 'red';
  } else {
    return 'blue';
  }"

But even that failed

[edit 2]

icon_js: "'mdi:home'" - this works, and the home icon is rendered!

So it seems your module only accepts a static string (within the "X_js" property. The moment you introduce any kind of variable, function call, or conditional logic, it fails and reverts to the default behavior of displaying the entity's state text.

[ctankep23]

After a lot of headscratching I got this to work!

type: custom:bubble-card
card_type: button
button_type: switch
entity: person.name
grid_options:
  columns: 6
  rows: 1
card_layout: normal
modules:
  - smart_icons
smart_icons:
  badges:
    - target: main_icon
      name: Person_Location_Icon
      entity: person.name
      position: top-right
      show_background: true
      force_icon: true
      icon_js: "state.toLowerCase() === 'home' ? 'mdi:home' : getEntity('zone.' + state.toLowerCase()) && getEntity('zone.' + state.toLowerCase()).attributes.icon ? getEntity('zone.' + state.toLowerCase()).attributes.icon : 'mdi:map-marker'"
scrolling_effect: false
show_name: false
show_last_changed: false
show_state: true

However, it breaks as soon as the state/zone name includes a special character.

[szsolt]

Nice, you figured it out!

My person presence card is a bit simpler:

  - type: custom:bubble-card
    card_type: button
    button_type: state
    entity: person.test
    show_name: true
    show_state: true
    show_last_changed: true
    modules:
      - smart_icons
    smart_icons:
      badges:
        - name: zone_badge
          target: main_icon
          position: top-right
          icon_js: attr('zone.' + lowerState, 'icon') || 'mdi:home-export-outline'
          background_color_js: " lowerState === 'home' ? '#4caf50' : lowerState === 'away' ? '#f44336' : lowerState.startsWith('work') ? '#2196f3' : '#607d8b' "
    tap_action:
      action: navigate
      navigation_path: /lovelace/presence
    card_layout: normal

My garage door:

  - type: custom:bubble-card
    card_type: button
    button_type: state
    entity: lock.garage
    show_name: true
    show_state: false
    show_last_changed: true
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    modules:
      - smart_icons
    smart_icons:
      icons:
        - target: main_icon
          name: door_status
          icon_js: " state === 'locked' ? 'mdi:door' : states('binary_sensor.contact_garage') === 'off' ? 'mdi:door' : 'mdi:door-open' "
          icon_color_js: " state === 'locked' ? '#4caf50' : states('binary_sensor.contact_garage') === 'off' ? '#ffc107' : '#f44336' "
          effect_js: " state !== 'locked' && states('binary_sensor.contact_garage') === 'on' ? 'shake' : null "
      badges:
        - name: lock_badge
          target: main_icon
          position: top-right
          icon_js: " state === 'locked' ? 'mdi:lock-outline' : 'mdi:lock-open-outline' "
          background_color_js: " state === 'locked' ? '#4caf50' : '#f44336' "
          effect_js: " state !== 'locked' ? 'blink' : null "
          text_color: white

What type of special characters are you using?

[ctankep23]

I have a zone named ”H&M” for instance. I handled it with a string replacing special characters with ”_” since that’s how HA does it. So now it works!

[szsolt]

I added a helper function to help with your zones, so now you can:

icon_js: attr('zone.' + slugify(state), 'icon') || 'mdi:home-export-outline'


slugify('this & and that')           // → 'this_and_that
slugify('Living Room Thermostat')       // → 'living_room_thermostat'
slugify('Küche & Büro')                 // → 'kuche_buro'

[mlcsthor]

An idea for improvement: add var to the color regexp to enable CSS variables to be used in JS expressions.

[szsolt]

Great idea, I modified the regex, so now it is possible to add css variables.

"state > 25 ? 'var(--red-color)' : 'var(--blue-color)'"

[szsolt]

Smart Icons v1.3 → v1.4 Changes

Major Fixes

• Badge Actions Fixed: Resolved all click/tap issues by integrating with Bubble Card's native action system

New Features

• Auto-Interactive Badges: Badges with entities automatically get more-info tap actions (no configuration needed)
• CSS Variable Expression Support: Dynamic CSS variables in colors - "state > 25 ? 'var(--red-color)' : 'var(--blue-color)'"
• Fixed Action Editor: Editing tap and hold actions now fully supported

Backward Compatibility

✅ All v1.3 configurations remain fully compatible - new features are additive only

[johndoe0815]

Are you planning to add support for additional cards? E.g. for the input select card this module would also make it easier than with custom code to change the icon based on what has been selected to provide visual feedback.

[szsolt]

In theory it should support it if the DOM elements are similar. Maybe give it a try?
Edit the module and check the checkboxes for the desired element.

[johndoe0815]

Ah thanks, I missed that there is simple check boxes for the supported modules. Activated it for the input select card and for the main icon it seems to work perfectly!

[acuncolta]

Hi Guys,
Nothing to ask... Just to thank you both :
@cloos for its amazing bubble card eco system so powerfull and simple (i was an ui minimalist user still there).
@szsolt, this module is a real game changer. Really great imrovement (even if i started with the "patreon" version :-) ).

Looking forward to see ur next moves !

cheers

[Clooos]

Hi! And thanks!

Just to know, what are you doing with this module that you weren’t able to do with mine? This module is definitely more advanced, but I'm curious by your use case here 🙂

[acuncolta]

i was couple versions behind your last (1.5). i used ur initial one to make my room card module but i think sub button badges wasn't exist at this time (4 badges on main icon).

For example : badge visibility (or icon) based on multiple entities condition (multi occupancy sensor, door sensor or even cross domain condition). but i am pretty sure u ll tell me how to that in your version :-)

Overall, i like the possibility to manage "xxxx_js" parameters from my dashboard.

PS : your subbutton card idea seams great !

[szsolt]

@acuncolta glad you're enjoying it! Feel free to reach out if there are any other features you'd like to see.
I'm with you on preferring the _js expressions - that simplicity was actually what motivated me to implement it in the first place.
While Bubble Cards' dynamic styles give you full JavaScript flexibility for CSS manipulation, _js strikes the right balance of power and simplicity.

@Clooos what do you exactly mean by the sub-button card?
Something like this?

Should this be a module or contribution to bubble cards?

┌─────────┬─────────┬─────────┐
│  💡     │  🌡️    │  🔌    │
│ Lights  │  Temp   │ Devices │
│ 3 on    │ 32°C    │ 2 on    │
└─────────┴─────────┴─────────┘

[Clooos]

@szsolt Something like this module, but as a new card and with various options. But that was just a suggestion, if you have ideas feel free to share, any help on this massive project would be greatly appreciated (even more on bug fixing) 😄

@acuncolta The badge visibility based on multiple conditions is already a feature since v1.0. For conditional icons you can just add a second badge with another icon and the opposite conditions. But I might have missed something in your use case.

[acuncolta]

@Clooos : I meant that in your initial post from Nov 24, as I recall, it wasn’t possible to apply badges to subbuttons, and the condition applied to a single entity only. I had adapted the code to handle the case of presence being determined by two sensors in a room. I just checked your module in last version, u right it did the job.

And about the subbutton card, i had that in mind too : i use the scene card module, but it should more convenient (and powerfull) to have dedicated card.
in fact, we can already do everything with the current version, it’s just a matter of simplifying the setups :-)

[stplatt]

Noticed a bug with this module. If you set a smart badge (icon) with an animation it ignores the badge scale setting.

[szsolt]

Thanks for reporting it, it should be fixed in v1.5. Let me know how it goes.

[szsolt]

Smart Icons v1.4 → v1.5 Changes

Bug Fixes

• Animation Cleanup: Fixed sub-button animations not disappearing when JavaScript conditions turn off
• Badge Scale with Animations: Fixed badge scale being ignored when animations are applied

Improvements

• Complete Animation Set: Added missing animations to UI editor (vibrate, blink, spin, zoom, shake)

Backward Compatibility

All v1.4 configurations remain fully compatible

[szsolt]

Smart Icons v1.5 → v1.6 Changes

🚨 Critical Bug Fixes

• Cache Invalidation: Fixed sub-button backgrounds not updating when entity attributes change (e.g., fan preset_mode changes from "low" to "medium")
• Attribute Detection: Enhanced cache system to properly track attribute references in JavaScript expressions

✨ New Features

• Helper Functions: Added 6 new helper functions for cleaner, more readable expressions:
  • cond(value, {key: result}, fallback, op) - Clean conditional mapping
  • thresholds(value, {threshold: result}, fallback, op) - Ordered numeric thresholds with guaranteed sorting
  • entityCond(entityId, conditions, fallback, {attr, op}) - Check conditions on different entities
  • between(value, min, max, inclusive) - Range checking
  • above(value, threshold), below(value, threshold), equals(value, target) - Simple comparisons
  • slugify(string, separator) - Transform strings to clean identifiers ('this & that, is great!' → 'this_that_is_great')

🔧 Improvements

• Enhanced Cache Detection: Now properly detects external entity references (entityCond(), states(), getEntity())
• Expression Readability: Complex nested ternary operators can now be simplified using helper functions
• External Entity Support: Cache automatically includes referenced entities for proper invalidation

📖 Examples

Before v1.6 (Verbose):

background_color_js: >-
  attributes.preset_mode === "low" ? "var(--accent-color)" :
  "var(--card-background-color)"
  
icon_js: >-
  state === 'heat' ? 'mdi:fire' : 
  state === 'cool' ? 'mdi:snowflake' : 'mdi:thermostat'
  
background_color_js: "state < 18 ? 'blue' : state > 25 ? 'red' : 'green'"

# Risky - fails if state contains spaces or special characters
icon_js: attr('zone.' + lowerState, 'icon') || 'mdi:home-export-outline'

After v1.6 (Clean):

background_color_js: cond(attributes.preset_mode, {low: 'var(--accent-color)'}, 'var(--card-background-color)')

icon_js: cond(state, {heat: 'mdi:fire', cool: 'mdi:snowflake'}, 'mdi:thermostat')

background_color_js: thresholds(state, {25: 'red', 18: 'green'}, 'blue')

# Safe zone entity references with special characters
icon_js: attr('zone.' + slugify(state), 'icon') || 'mdi:home-export-outline'

🔄 Backward Compatibility

• All v1.5 configurations remain fully compatible
• Helper functions are optional - existing syntax continues to work
• No breaking changes to existing functionality

🚀 Upgrade Benefits

• 67% shorter expressions for common patterns
• Guaranteed ordering for temperature thresholds
• Unicode-safe string normalization with slugify()

[stplatt]

Thanks for this update and for the zone example! I was trying to do exactly this to mimic the mushroom person card badge icons for home, away, or zone without having to explicitly define a condition for each zone.

If you want to mimic the color of the badge icons as well, use cond(state, {home: '#4CAF50', away: '#FF0000'}, '#2196F3') for the "Dynamic background color"

[szsolt]

Nice! This is exactly what I'm doing too—migrating mushroom cards to bubble cards with smart_icons and ytt templating.

The Smart Icons _js fields are incredibly convenient. Your color example:
background_color_js: cond(state, {home: '#4CAF50', away: '#FF0000'}, '#2196F3')
is perfect for handling zone colors elegantly.

I'm really tempted to push that same _js convenience pattern into more of the bubble card's functionality—like handling the card's main background dynamically. The _js attribute approach is so clean, it makes me want to see that pattern expanded beyond just smart_icons into broader bubble card features!

[acuncolta]

I also really like this update of the xxxx_js, it’s more streamlined. The only small risk — but that’s just my opinion — is losing the habit of the ‘normal’ syntax (which is still necessary elsewhere)… Unless of course it can be applied everywhere! But great work, thank you.

[marmoul70]

Hello,

Do you think this card will work with the Horizontal Button Stack card?

Thank you very much.