[Styling Module, JS Module, JS+Editor Module] Multi-Sensor Glance Row

[lucuss]

Multi-Sensor Glance Row

Version: v1.0
Creator: Lucuss

Important

Supported cards:

• Button
• Separator

The Multi-Sensor Glance Row is a feature-rich, high-density extension for Bubble Card.

It allows you to display and monitor multiple entities within a single, beautifully centered "pill" card, offering advanced logic and granular styling options.

Key Features

🚀 Dynamic Multi-Sensor Support: Add an unlimited number of sensors with the ability for items to overflow to the next line using a native, user-friendly "+ Add Item" interface.

🎨 Custom Titles & Colors: Fully personalize the display name and icon/value color for every sensor individually to match your dashboard's theme.

🧠 Advanced JS Templating: Use powerful [[[ JavaScript templates ]]] for conditional titles, dynamic color shifts based on state values, and complex logic for your labels.

📐 Perfect Vertical Centering: Mathematically balanced layout ensures your sensors look great whether you have 2 or 8 in a row.

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

type: custom:bubble-card
card_type: button
button_type: switch
entity: sensor.12hrtime (Any entity as this is a required field for bubble-card)
tap_action:
  action: none
modules:
  - sensor_glance_row
show_icon: false
show_name: false
sensor_glance_row:
  sensors:
    - entity: sensor.software_update_count
      title: Software Updates
      color: >-
        [[[ if (states['sensor.software_update_count'].state > 0) {return 'red'}
        ]]]
  sizing_grid:
    global_state_size: 1.8em
    global_title_size: 1.0em

---

🧩 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.

1. Download the module
   Download the YAML file for this module from Gumroad.

2. Open your Bubble Card editor
   Go to the card where you want to use the module.

3. Import the module
   In the Modules section of the editor, click on Import from YAML, paste the contents of the downloaded YAML file, then click Import Module.

4. Configure as needed
   Once imported, you can customize badges, conditions, colors, and animations directly in the editor or in YAML.

---

Screenshot:

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

Preview of the Editor GUI adding sensors to the glance card.

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