[Styling Module] Bubble Chips

[StaleLoafOfBread]

Bubble Chips

Version: v1.0
Creator: StaleLoafOfBread

Important

This was designed for the button card but seems to work on the rest other than:

• Horizontal buttons stack
• Pop-up

Tip

Setting your rows to auto improves the effectiveness. Ex:

grid_options:
 columns: full
 rows: auto

Make your subbuttons look more like Mushroom Chips

bubble_chips:
  gap: 3

---

🧩 Get this Module

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

bubble_chips:
  name: Bubble Chips
  version: "v1.0"
  creator: "StaleLoafOfBread"
  link: https://github.com/Clooos/Bubble-Card/discussions/1345
  description: |
    Make your subbuttons look more like <a href="https://github.com/piitaya/lovelace-mushroom/blob/main/docs/cards/chips.md">Mushroom Chips</a>
    <br />
  
    <b>Example on how to add a line break:</b><br />
    <pre><code class="language-javascript">
      const container = card.querySelector(".bubble-sub-button-container");
      if (!container) return;
  
      const targetElement = container.querySelector('.bubble-sub-button-5');
      if (!targetElement) return;
  
      // Check if a break element already exists before the target
      if (targetElement.previousElementSibling?.classList.contains("break")) return;
  
      // Create the break element
      const breakEl = document.createElement("div");
      breakEl.classList.add("break");
  
      // Insert before the target element
      container.insertBefore(breakEl, targetElement);
    </code></pre>
    <br />
  
    <b>You might also want to add the following to reduce the top margin:</b><br />
    <pre><code class="language-css">
    .bubble-wrapper {
      height: 75%
    }
    </code></pre>
  code: |
    /* Remove background so the subbuttons look more like smaller regular buttons similar to Mushroom Chips */
    ha-card { --bubble-main-background-color: transparent}
    
    /* Wrap subbuttons like Mushroom Chips */
    .bubble-sub-button-container,
    .large .bubble-sub-button-container {
        display: flex;
        flex-flow: wrap;
        justify-content: ${this.config.bubble_chips?.['justify-content'] || 'flex-end'};
        gap: ${this.config.bubble_chips?.gap || '8'}px;
      }
  
    /* Allow icons using drop-shadow to not get cut off by their container. Useful for glow effects. */
    .bubble-button-card-container,
    .bubble-button-card-container .bubble-container,
    .bubble-button-card-container .bubble-container .button-container {
      overflow: visible !important;
    }
  
    /* Add a class to break rows */
    .break {
      flex-basis: 100%;
      height: 0; 
      margin-top: this.config.bubble_chips?.gap * - 1 || '-8px'; /* Cancels out one extra gap */
    }
  
    /* Auto adjust the rows of the card to fit the rows of subbutons */
    ${(() => {
      const container = card.querySelector(".large .bubble-sub-button-container");
      if (!container) return;
  
      // Filter out .break elements before calculating rows
      const elements = Array.from(container.children).filter(el => !el.classList.contains("break"));
      const uniqueRows = new Set(elements.map(el => el.offsetTop));
      const calculatedRowSize = uniqueRows.size;
  
      // Get the current --row-size value, defaulting to -1 if it cannot be parsed
      const currentRowSize = parseInt(getComputedStyle(card).getPropertyValue("--row-size")) || -1;
  
      // Only update if the value has changed
      if (currentRowSize !== calculatedRowSize) {
          card.style.setProperty("--row-size", calculatedRowSize);
  
          this.setConfig({
              ...this.config,
              grid_options: {
                  ...this.config.grid_options,
                  rows: calculatedRowSize
              }
          });
  
          this.requestUpdate?.();
      }
    })()}
  
  
  editor:
    - name: gap
      label: "Gap"
      selector:
          number:
            min: 0
    - name: justify-content
      label: "Justify Content"
      selector:
        select:
          options:
            - flex-start
            - center
            - flex-end
            - space-between
            - space-around
            - space-evenly

---

Screenshot:

I added a break before the alarm entities.

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

[ThePierce]

is there a way to let them start at the left of the screen? right now it is a bit off.

See screenshot:

[StaleLoafOfBread]

Have you tried all the justify-content options? I can't check right now but I would think that flex-start should do it but I also don't work in front end often so maybe not. It defaults to flex-end.

[ThePierce]

Tnx for your reply. I did try every option there. unfortunately no show :(

[StaleLoafOfBread]

Darn. I would assume it's possible. Something that may help is if you provide some yaml with a simple example and a screenshot showing where you want it to align with. Include another entity as well as a point of reference for the alignment. I can't promise I can figure it out as front end isn't really my wheelhouse but I can give it shot sometime. I encourage anyone who finds this that feels they can achieve this, to go ahead and try.

[StaleLoafOfBread]

Looks like we started a new thread on accident. Linking to it.
#1345 (reply in thread)

[ThePierce]

Much appreciated.

It should be outlined to the left. Same as the buttons, on the same line as "Woonkamer"

Similair as below example. That is however another card:

My config:

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#woonkamer-popup"
    card_layout: normal
    button_type: name
    name: Woonkamer
    icon: mdi:sofa-outline
    show_name: true
    show_icon: true
    scrolling_effect: true
    show_attribute: false
    show_header: false
    modules:
      - default
    bubble_chips:
      justify-content: flex-start
  - type: horizontal-stack
    title: Woonkamer
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: name
        styles: "${subButtonIcon[1].setAttribute(\"icon\", \n  hass.states['alarm_control_panel.home_alarm'].state === 'disarmed' ? 'mdi:shield-off' :\n  hass.states['alarm_control_panel.home_alarm'].state === 'arming' ? 'mdi:shield' :\n  hass.states['alarm_control_panel.home_alarm'].state === 'armed_away' ? 'mdi:shield' :\n  hass.states['alarm_control_panel.home_alarm'].state === 'armed_home' ? 'mdi:shield-home' : 'mdi:shield-alert'\n)}\n.bubble-sub-button-2 > ha-icon {\n  color: \n  ${hass.states['alarm_control_panel.home_alarm'].state === 'disarmed' ? 'green' : \n    hass.states['alarm_control_panel.home_alarm'].state === 'arming' ? 'yellow' :\n    hass.states['alarm_control_panel.home_alarm'].state === 'armed_away' ? 'red' :\n    hass.states['alarm_control_panel.home_alarm'].state === 'armed_home' ? 'red' : 'red'} !important;  \n}\n.bubble-sub-button-2 > ha-icon {\t\t\n  animation: ${hass.states['alarm_control_panel.home_alarm'].state === 'arming' ? 'blink 1s step-start infinite' : ''};\n}\n@keyframes blink {\n    0% { opacity: 1; }\n    50% { opacity: 0; }\n    100% { opacity: 1; }\n}\n${subButtonIcon[2].setAttribute(\"icon\", hass.states['binary_sensor.window_sensor_woonkamer_contact'].state === 'on' ? 'mdi:window-open-variant' : 'mdi:window-closed-variant')}\n${subButtonIcon[3].setAttribute(\"icon\", hass.states['binary_sensor.motion_sensor_ipad_occupancy'].state === 'on' ? 'mdi:motion-sensor' : 'mdi:motion-sensor-off')}\n"
        modules:
          - default
          - bubble_chips
        sub_button:
          - entity: sensor.multi_sensor_woonkamer_temperature_2
            show_state: true
            show_background: false
            tap_action:
              action: none
            double_tap_action:
              action: none
            hold_action:
              action: none
          - entity: alarm_control_panel.home_alarm
            show_state: true
            show_icon: true
            show_background: false
          - entity: binary_sensor.window_sensor_woonkamer_contact
            show_state: true
            tap_action:
              action: none
            double_tap_action:
              action: none
            hold_action:
              action: none
            show_background: false
            show_icon: true
            show_last_changed: false
            show_attribute: false
          - entity: binary_sensor.motion_sensor_ipad_occupancy
            show_state: true
            tap_action:
              action: none
            double_tap_action:
              action: none
            hold_action:
              action: none
            state_background: true
            show_background: false
            show_attribute: false
        show_icon: false
        show_name: false
        scrolling_effect: false
        icon: ""
        bubble_chips:
          justify-content: flex-start
  - type: horizontal-stack
    title: Lampen
    cards:
      - type: custom:bubble-card
        card_type: button
        entity: light.shelly_woonkamer
        button_type: slider
        icon: mdi:lightbulb
        scrolling_effect: false
        use_accent_color: false
        show_icon: true
        show_name: true
        show_state: true
        show_attribute: false
        slider_live_update: false
        tap_action:
          action: toggle
        modules:
          - default
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: switch.shelly_plafond_ouders_switch_0
        name: Plafond
        icon: mdi:lightbulb
        show_state: true
        modules:
          - default
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: media-player
        entity: media_player.tx_nr676e
        name: Onkyo
        icon: mdi:audio-video
        show_state: true
        show_attribute: true
        attribute: source
        modules:
          - default
    title: Media
  - type: custom:bubble-card
    card_type: media-player
    entity: media_player.woonkamer
    name: Apple TV
    icon: mdi:apple
    show_state: true
    show_attribute: true
    attribute: app_name
    modules:
      - default
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        entity: switch.fotolijst
        button_type: switch
        modules:
          - default
      - type: custom:bubble-card
        card_type: empty-column
    title: Overige apparatuur

[StaleLoafOfBread]

Here's some style you can add along with setting the justify-content to flex-start.

.bubble-button.bubble-wrapper.bubble-button-card {
  display: block;
  padding: 8px; 
}

You can also try out all the options listed here to see if any fits your needs better. https://www.w3schools.com/cssref/pr_class_display.php

Please note that the padding of 8px just my quick guess. The perfect value may be something else and there may be a css var that should be used.

[ThePierce]

Still no go. But looking at your screenshot, i think i made a mistake in how i set up the whole card..
Will try to change and get back to you :)

[ThePierce]

Fixed :)

Thank you for the support. Works great now.