Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

High CPU usage when using custom styles and custom style compatibility issues #1236

Open
xiayesuifeng opened this issue Feb 14, 2025 · 1 comment
Open

High CPU usage when using custom styles and custom style compatibility issues #1236

xiayesuifeng opened this issue Feb 14, 2025 · 1 comment
Labels
bug Something isn't working

Comments

@xiayesuifeng
Copy link

For any feature request you can open a new discussion here:
https://github.com/Clooos/Bubble-Card/discussions/categories/feature-requests

For any question you can open a new discussion here:
https://github.com/Clooos/Bubble-Card/discussions/categories/q-a

Describe the bug

  1. High CPU usage when using custom styles and very slow on mobile devices but not much on PC
  2. My custom styles are broken after updating to v2.5.0-beta.1, and the problem remains in beta.2

I think one of the reasons for high CPU usage is the use of custom styles. On a separate dashboard, there is only a list of room cards and the corresponding pop-up cards. When using custom styles, the CPU usage can sometimes be as high as 35%. Without custom styles, it is much lower (10-14%), and it is much faster on mobile devices. My dashboard uses a lot of pop-up cards, and the CPU usage is even higher, 60%.

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

YAML
If applicable, add any relevant YAML code.

square: false
type: grid
cards:
  - type: custom:bubble-card
    card_type: button
    button_type: name
    name: F1 大厅
    icon: mdi:sofa
    show_icon: true
    show_name: true
    scrolling_effect: true
    card_layout: normal
    styles: |
      .bubble-button-card-container {
        height: 100px;
      }

      .bubble-button-card,
      .bubble-range-slider,
      .bubble-button-background {
        flex-wrap: wrap;
      }

      .bubble-sub-button-container {
        justify-content: center;
        width: 100%;
        bottom: 8px;
        left: 0px;
      }
    sub_button:
      - entity: light.f1_livingroom_lights_fully_on_off
        name: ""
        show_name: false
        show_background: true
        icon: mdi:lightbulb-group
        tap_action:
          action: toggle
      - entity: fan.211106241022386_fan
    button_action:
      tap_action:
        action: navigate
        navigation_path: "#f1-livingroom"
  - type: custom:bubble-card
    card_type: button
    button_type: name
    name: F2 客厅
    icon: mdi:sofa
    show_icon: true
    show_name: true
    scrolling_effect: true
    card_layout: normal
    styles: |
      .bubble-button-card-container {
        height: 100px;
      }

      .bubble-button-card,
      .bubble-range-slider,
      .bubble-button-background {
        flex-wrap: wrap;
      }

      .bubble-sub-button-container {
        justify-content: center;
        width: 100%;
        bottom: 8px;
        left: 0px;
      }
    sub_button:
      - entity: light.f2_livingroom_lights_fully_on_off
        name: ""
        show_name: false
        show_background: true
        icon: mdi:lightbulb-group
        tap_action:
          action: toggle
      - entity: media_player.sony_xr_75x95el_2
        icon: mdi:youtube-tv
        tap_action:
          action: toggle
        hold_action:
          action: navigate
          navigation_path: "#f2-tv-remote"
      - entity: cover.dooya_f2_livingroom_balcony_cover
        icon: mdi:curtains
        tap_action:
          action: toggle
        show_background: true
        show_icon: true
        hold_action:
          action: more-info
    button_action:
      tap_action:
        action: navigate
        navigation_path: "#f2-livingroom"
  - type: custom:bubble-card
    card_type: button
    button_type: name
    name: F2 头房
    icon: mdi:bed
    show_icon: true
    show_name: true
    scrolling_effect: true
    card_layout: normal
    styles: |
      .bubble-button-card-container {
        height: 100px;
      }

      .bubble-button-card,
      .bubble-range-slider,
      .bubble-button-background {
        flex-wrap: wrap;
      }

      .bubble-sub-button-container {
        justify-content: center;
        width: 100%;
        bottom: 8px;
        left: 0px;
      }
    sub_button:
      - entity: light.f2_front_bedroom_lights_fully_on_off
        name: ""
        show_name: false
        show_background: true
        icon: mdi:lightbulb-group
        tap_action:
          action: toggle
      - icon: ""
        tap_action:
          action: toggle
        show_background: true
        show_icon: true
        hold_action:
          action: more-info
        entity: climate.f2_front_bedroom_climate
    button_action:
      tap_action:
        action: navigate
        navigation_path: "#f2-front-bedroom"
  - type: custom:bubble-card
    card_type: button
    button_type: name
    name: F2 尾房
    icon: mdi:bed
    show_icon: true
    show_name: true
    scrolling_effect: true
    card_layout: normal
    styles: |
      .bubble-button-card-container {
        height: 100px;
      }

      .bubble-button-card,
      .bubble-range-slider,
      .bubble-button-background {
        flex-wrap: wrap;
      }

      .bubble-sub-button-container {
        justify-content: center;
        width: 100%;
        bottom: 8px;
        left: 0px;
      }
    sub_button:
      - entity: light.f2_back_bedroom_lights_fully_on_off
        name: ""
        show_name: false
        show_background: true
        icon: mdi:lightbulb-group
        tap_action:
          action: toggle
      - icon: mdi:curtains
        tap_action:
          action: toggle
        show_background: true
        show_icon: true
        hold_action:
          action: more-info
        entity: cover.dooya_f2_bedroom_2_cover
    button_action:
      tap_action:
        action: navigate
        navigation_path: "#f2-back-bedroom"
  - type: custom:bubble-card
    card_type: button
    button_type: name
    name: F3 客厅
    icon: mdi:sofa
    show_icon: true
    show_name: true
    scrolling_effect: true
    card_layout: normal
    styles: |
      .bubble-button-card-container {
        height: 100px;
      }

      .bubble-button-card,
      .bubble-range-slider,
      .bubble-button-background {
        flex-wrap: wrap;
      }

      .bubble-sub-button-container {
        justify-content: center;
        width: 100%;
        bottom: 8px;
        left: 0px;
      }
    sub_button:
      - entity: light.f3_livingroom_lights_fully_on_off
        name: ""
        show_name: false
        show_background: true
        icon: mdi:lightbulb-group
        tap_action:
          action: toggle
      - entity: cover.f3_livingroom_covers
        icon: mdi:curtains
        tap_action:
          action: toggle
        show_background: true
        show_icon: true
        hold_action:
          action: more-info
    button_action:
      tap_action:
        action: navigate
        navigation_path: "#f3-livingroom"
  - type: custom:bubble-card
    card_type: button
    button_type: name
    name: F3 头房
    icon: mdi:bed
    show_icon: true
    show_name: true
    scrolling_effect: true
    card_layout: normal
    styles: |
      .bubble-button-card-container {
        height: 100px;
      }

      .bubble-button-card,
      .bubble-range-slider,
      .bubble-button-background {
        flex-wrap: wrap;
      }

      .bubble-sub-button-container {
        justify-content: center;
        width: 100%;
        bottom: 8px;
        left: 0px;
      }
    sub_button:
      - entity: light.f3_front_bedroom_lights_fully_on_off
        name: ""
        show_name: false
        show_background: true
        icon: mdi:lightbulb-group
        tap_action:
          action: toggle
      - entity: cover.dooya_f3_front_bedroom_cover
        icon: mdi:curtains
        tap_action:
          action: toggle
        show_background: true
        show_icon: true
        hold_action:
          action: more-info
    button_action:
      tap_action:
        action: navigate
        navigation_path: "#f3-front-bedroom"
  - type: custom:bubble-card
    card_type: button
    button_type: name
    name: F3 尾房
    icon: mdi:bed
    show_icon: true
    show_name: true
    scrolling_effect: true
    card_layout: normal
    styles: |
      .bubble-button-card-container {
        height: 100px;
      }

      .bubble-button-card,
      .bubble-range-slider,
      .bubble-button-background {
        flex-wrap: wrap;
      }

      .bubble-sub-button-container {
        justify-content: center;
        width: 100%;
        bottom: 8px;
        left: 0px;
      }
    sub_button:
      - entity: light.f3_back_bedroom_lights_fully_on_off
        name: ""
        show_name: false
        show_background: true
        icon: mdi:lightbulb-group
        tap_action:
          action: toggle
      - entity: cover.f3_back_bedroom_covers
        icon: mdi:curtains
        tap_action:
          action: toggle
        show_background: true
        show_icon: true
        hold_action:
          action: more-info
      - entity: climate.f3_wei_fang_leng_qi
    button_action:
      tap_action:
        action: navigate
        navigation_path: "#f3-back-bedroom"
  - type: custom:bubble-card
    card_type: button
    button_type: name
    name: F4 客厅
    icon: mdi:bed
    show_icon: true
    show_name: true
    scrolling_effect: true
    card_layout: normal
    styles: |
      .bubble-button-card-container {
        height: 100px;
      }

      .bubble-button-card,
      .bubble-range-slider,
      .bubble-button-background {
        flex-wrap: wrap;
      }

      .bubble-sub-button-container {
        justify-content: center;
        width: 100%;
        bottom: 8px;
        left: 0px;
      }
    sub_button:
      - entity: light.f4_livingroom_lights_fully_on_off
        name: ""
        show_name: false
        show_background: true
        icon: mdi:lightbulb-group
        tap_action:
          action: toggle
    button_action:
      tap_action:
        action: navigate
        navigation_path: "#f4-livingroom"
  - type: custom:bubble-card
    card_type: button
    button_type: name
    name: 客房
    icon: mdi:bed
    show_icon: true
    show_name: true
    scrolling_effect: true
    card_layout: normal
    styles: |
      .bubble-button-card-container {
        height: 100px;
      }

      .bubble-button-card,
      .bubble-range-slider,
      .bubble-button-background {
        flex-wrap: wrap;
      }

      .bubble-sub-button-container {
        justify-content: center;
        width: 100%;
        bottom: 8px;
        left: 0px;
      }
    sub_button:
      - entity: light.f4_guest_room_lights
        name: ""
        show_name: false
        show_background: true
        icon: mdi:lightbulb-group
        tap_action:
          action: toggle
    button_action:
      tap_action:
        action: navigate
        navigation_path: "#f4-guestroom"
  - type: custom:bubble-card
    card_type: button
    button_type: name
    name: 家庭影院
    icon: mdi:youtube-tv
    show_icon: true
    show_name: true
    scrolling_effect: true
    card_layout: normal
    styles: |
      .bubble-button-card-container {
        height: 100px;
      }

      .bubble-button-card,
      .bubble-range-slider,
      .bubble-button-background {
        flex-wrap: wrap;
      }

      .bubble-sub-button-container {
        justify-content: center;
        width: 100%;
        bottom: 8px;
        left: 0px;
      }
    sub_button:
      - entity: light.f4_home_cinema_lights_fully_on_off
        name: ""
        show_name: false
        show_background: true
        icon: mdi:lightbulb-group
        tap_action:
          action: toggle
      - entity: cover.dooya_f4_home_cinema_cover
        icon: mdi:curtains
        tap_action:
          action: toggle
        show_background: true
        show_icon: true
        hold_action:
          action: more-info
    button_action:
      tap_action:
        action: navigate
        navigation_path: "#home-cinema"
columns: 2
title: 区域

dashboard yaml
https://pastebin.com/gUHKi4Bu

Informations (please complete the following information):

  • OS: ArchLinux
  • Browser/App: chromium
  • Bubble Card version: 2.5.0-beta.2
  • Home Assistant version: 2025.2.1

Additional context
Add any other context about the problem here.
use styles
Image
no use styles
Image

Image

2.mp4

After v2.5.0-bate.1 update

Image

Before v2.5.0-bate.1 update

Image

Thank you! 🍻
@xiayesuifeng xiayesuifeng added the bug Something isn't working label Feb 14, 2025
@Clooos
Copy link
Owner

Clooos commented Feb 14, 2025 •
edited
Loading

Hi! Have you tried the latest v2.5.0-beta.4 for your styling issues?

And for your CPU issue, you should try to move most of your custom styles into modules, or directly under default: in the bubble-modules.yaml file. This should improve performance a lot 🙂

Edit: One more question, was your CPU usage lower in the previous v2.4.0?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@xiayesuifeng @Clooos