[JS+Editor Module] Condition Helper - Coloring, Animations and Badges #1333
Replies: 19 comments 28 replies
-
|
i can not get it to work. ( After cleaning cache, reload page and reboot ) |
Beta Was this translation helpful? Give feedback.
-
|
Super nice. Missing Badge for main icon, imho. and Sub-Button Effects, are double, under Icon Effects and in mail view But very nice |
Beta Was this translation helpful? Give feedback.
-
|
There are issues with badges effects:
|
Beta Was this translation helpful? Give feedback.
-
|
Wow awesome work! |
Beta Was this translation helpful? Give feedback.
-
|
I can't add Entity state as a condition. I can select device or entity numeric state. Is this a known issue or something just related to me? |
Beta Was this translation helpful? Give feedback.
-
|
This is a great addition to Bubble-card. I'm just starting to get into it a bit. Is there a way to use a template for the background color for sub button? e.g I'm trying to get sub buttons to show the color of the 3d printer filament I have in an automated loader. The filament color is dynamic is set mostly automatically when I load the filament. |
Beta Was this translation helpful? Give feedback.
-
|
Is there a way to do multiple conditions. Eg blue if cool red if heat black if off |
Beta Was this translation helpful? Give feedback.
-
|
Looks like the ultimate tool. The only thing I miss is the conditional formatting of the icon, the icon color and the icon background color of all buttons. I looked to see if I could add it in, but I got lost in the scheme. It would be nice to structure it by buttons — especially for using the module. That would improve user-friendliness. And maybe you'd save over half the lines of code. 😉 Each of the modules, like Conditional Subbutton Colors or Subbutton Animations, is missing something. Yours covers most areas of conditional needs. Great work! editor:
# =============================================================
# Main Icon
# =============================================================
- type: expandable
title: "Main Icon"
icon: "mdi:gesture-tap-button"
name: main_icon
schema:
# Main Icon Background
- type: expandable
title: "Main Icon Background"
icon: "mdi:format-color-fill"
name: main_icon_background
schema:
- name: color
label: "Background Color"
selector:
ui_color: {}
- name: opacity
label: "Opacity"
default: 1.0
selector:
number:
min: 0
max: 1
step: 0.05
mode: slider
- name: condition
label: "Condition (optional)"
selector:
condition: {}
# Main Icon Effects
- type: expandable
title: "Main Icon Effects"
icon: "mdi:weather-windy-variant"
name: main_icon_effects
schema:
- name: effect
label: "Effect Type"
selector:
select:
options:
- label: "Pulse (Scale)"
value: "pulse"
- label: "Gentle Rotation"
value: "rotate"
- label: "Glow Effect"
value: "glow"
- label: "Gentle Shake"
value: "shake"
- label: "Float Up & Down"
value: "float"
- label: "Zoom"
value: "zoom"
- label: "Heartbeat"
value: "heartbeat"
- label: "Spin 360"
value: "spin-360"
- label: "Flip"
value: "flip"
- label: "Vibrate"
value: "vibrate"
- name: color
label: "Effect Color"
selector:
ui_color: {}
- name: condition
label: "Condition (optional)"
selector:
condition: {}
# =============================================================
# Sub-Button 1
# =============================================================
- type: expandable
title: "Sub-Button 1"
icon: "mdi:gesture-tap-button"
name: 0
schema: &sb
# ---------- Sub-Button Entity badge ----------
- type: expandable
title: "Entity badge"
icon: "mdi:tag-text"
name: sub_button_entity_badge
schema:
- name: entity
label: "Entity"
selector:
entity: {}
- name: attribute
label: "Attribute (optional)"
selector:
attribute: {}
- name: color
label: "Badge Color"
selector:
ui_color: {}
- name: text_color
label: "Text Color"
selector:
ui_color: {}
- name: show_background
label: "Show Background"
default: true
selector:
boolean: {}
- name: decimals
label: "Decimal Places (for numbers)"
selector:
number:
min: 0
max: 5
mode: slider
step: 1
- name: show_unit
label: "Show Unit"
default: true
selector:
boolean: {}
- name: show_if_off
label: "Show When 'off'"
default: true
selector:
boolean: {}
- name: scale
label: "Badge Size (scale)"
default: 1
selector:
number:
min: 0.5
max: 3
mode: slider
step: 0.1
- name: h_pos
label: "Horizontal Position (px)"
default: -8
selector:
number:
min: -500
max: 500
mode: slider
step: 1
- name: v_pos
label: "Vertical Position (px)"
default: -8
selector:
number:
min: -100
max: 100
mode: slider
step: 1
- name: condition
label: "Condition (optional)"
selector:
condition: {}
# ---------- Sub-Button Entity Badge Effects ----------
- type: expandable
title: "Entity Badge Effects"
icon: "mdi:tag-text"
name: sub_button_entity_badge_effect
schema:
- name: effect
label: "Effect Type"
selector:
select:
options:
- label: "Pulse (Scale)"
value: "pulse"
- label: "Gentle Rotation"
value: "rotate"
- label: "Glow Effect"
value: "glow"
- label: "Gentle Shake"
value: "shake"
- label: "Float Up & Down"
value: "float"
- label: "Zoom"
value: "zoom"
- label: "Heartbeat"
value: "heartbeat"
- label: "Spin 360"
value: "spin-360"
- label: "Flip"
value: "flip"
- label: "Vibrate"
value: "vibrate"
- name: color
label: "Effect Color"
selector:
ui_color: {}
- name: condition
label: "Condition (optional)"
selector:
condition: {}
# ---------- Sub-button Icon badge ----------
- type: expandable
title: "Icon Badge"
icon: "mdi:tag-outline"
name: sub_button_icon_badge
schema:
- name: icon
label: "Icon"
selector:
icon: {}
- name: color
label: "Badge Color"
selector:
ui_color: {}
- name: text_color
label: "Text Color"
selector:
ui_color: {}
- name: show_background
label: "Show Background"
default: true
selector:
boolean: {}
- name: scale
label: "Badge Size (scale)"
default: 1
selector:
number:
min: 0.5
max: 3
mode: slider
step: 0.1
- name: h_pos
label: "Horizontal Position (px)"
default: -8
selector:
number:
min: -500
max: 500
mode: slider
step: 1
- name: v_pos
label: "Vertical Position (px)"
default: -8
selector:
number:
min: -100
max: 100
mode: slider
step: 1
- name: condition
label: "Condition (optional)"
selector:
condition: {}
# ---------- Sub-button Icon badge effects ----------
- type: expandable
title: "Icon Badge Effects"
icon: "mdi:tag-outline"
name: icon_badge_effects
schema:
- name: effect
label: "Effect Type"
selector:
select:
options:
- label: "Pulse (Scale)"
value: "pulse"
- label: "Gentle Rotation"
value: "rotate"
- label: "Glow Effect"
value: "glow"
- label: "Gentle Shake"
value: "shake"
- label: "Float Up & Down"
value: "float"
- label: "Zoom"
value: "zoom"
- label: "Heartbeat"
value: "heartbeat"
- label: "Spin 360"
value: "spin-360"
- label: "Flip"
value: "flip"
- label: "Vibrate"
value: "vibrate"
- name: color
label: "Effect Color"
selector:
ui_color: {}
- name: condition
label: "Condition (optional)"
selector:
condition: {}
# ---------- Sub-Button Icon Effects ----------
- type: expandable
title: "Icon Effects"
icon: "mdi:weather-windy-variant"
name: sub_button_icon_effects
schema:
- name: effect
label: "Effect Type"
selector:
select:
options:
- label: "Pulse (Scale)"
value: "pulse"
- label: "Gentle Rotation"
value: "rotate"
- label: "Glow Effect"
value: "glow"
- label: "Gentle Shake"
value: "shake"
- label: "Float Up & Down"
value: "float"
- label: "Zoom"
value: "zoom"
- label: "Heartbeat"
value: "heartbeat"
- label: "Spin 360"
value: "spin-360"
- label: "Flip"
value: "flip"
- label: "Vibrate"
value: "vibrate"
- name: color
label: "Effect Color"
selector:
ui_color: {}
- name: condition
label: "Condition (optional)"
selector:
condition: {}
# ---------- Sub-Button Background ----------
- type: expandable
title: "Background"
name: sub_button_background
icon: "mdi:format-color-fill"
schema:
- name: type
label: "Background Type"
selector:
select:
options:
- label: "Solid"
value: "solid"
- label: "Two-Color Gradient"
value: "two-color"
- label: "Three-Color Gradient"
value: "three-color"
- name: color
label: "Solid Color"
selector:
ui_color:
include_none: true
- name: color1
label: "Gradient Color 1"
selector:
ui_color: {}
- name: color2
label: "Gradient Color 2"
selector:
ui_color: {}
- name: color3
label: "Gradient Color 3"
selector:
ui_color: {}
- name: opacity
label: "Background Opacity"
default: 1.0
selector:
number:
min: 0
max: 1
step: 0.05
mode: slider
- name: condition
label: "Condition (optional)"
selector:
condition: {}
# ---------- Sub-Button Effects ----------
- type: expandable
title: "Effects"
icon: "mdi:animation-outline"
name: sub_button_effects
schema:
- name: effect
label: "Effect Type"
selector:
select:
options:
- label: "Pulse (Scale)"
value: "pulse"
- label: "Gentle Rotation"
value: "rotate"
- label: "Glow Effect"
value: "glow"
- label: "Gentle Shake"
value: "shake"
- label: "Float Up & Down"
value: "float"
- label: "Zoom"
value: "zoom"
- label: "Heartbeat"
value: "heartbeat"
- label: "Spin 360"
value: "spin-360"
- label: "Flip"
value: "flip"
- label: "Vibrate"
value: "vibrate"
- name: color
label: "Effect Color (e.g. for Glow)"
selector:
ui_color: {}
- name: condition
label: "Condition (optional)"
selector:
condition: {}
# =============================================================
# Sub-Button 2
# =============================================================
- type: expandable
title: "Sub-Button 2"
icon: "mdi:gesture-tap-button"
name: 1
schema: *sb
# =============================================================
# Sub-Button 3
# =============================================================
- type: expandable
title: "Sub-Button 3"
icon: "mdi:gesture-tap-button"
name: 2
schema: *sb
# =============================================================
# Sub-Button 4
# =============================================================
- type: expandable
title: "Sub-Button 4"
icon: "mdi:gesture-tap-button"
name: 3
schema: *sb
# =============================================================
# Sub-Button 5
# =============================================================
- type: expandable
title: "Sub-Button 5"
icon: "mdi:gesture-tap-button"
name: 4
schema: *sb
# =============================================================
# Sub-Button 6
# =============================================================
- type: expandable
title: "Sub-Button 6"
icon: "mdi:gesture-tap-button"
name: 5
schema: *sb |
Beta Was this translation helpful? Give feedback.
-
|
Animation of sub button icons starts once conditions match. But the animation continues even if the conditions don't match anymore |
Beta Was this translation helpful? Give feedback.
-
|
Hey guys, sorry for the delay, I actually have no Home-Assistant running because of move to new hardware. |
Beta Was this translation helpful? Give feedback.
-
|
Hi, very nice !! |
Beta Was this translation helpful? Give feedback.
-
|
There is an issue with the Sub-button effect animation. Even though the condition is false, the animation is still not stopping. Screen Rec:Screen.Recording.movYAML: |
Beta Was this translation helpful? Give feedback.
-
|
I'm not sure if this is allowed but I made an update to the module so that animations stop when the condition does not match. I also fixed it for the sub-button effects (on the container). Here's the updated yaml: |
Beta Was this translation helpful? Give feedback.
-
|
this module is excellent - thank you!! Any thoughts, feelings, hopes, dreams or nightmares on bubble 3.1.x compatibility with the new grouped sub-buttons feature? |
Beta Was this translation helpful? Give feedback.
-
|
Hey guys, HA is finally running again! |
Beta Was this translation helpful? Give feedback.
-
|
Thank you so much, this is super helpful! If I could wish for anything would be for it to allow badges in the main button/icon too 🙏 |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
Thank you for this amazing module! It would be very helpfull an overal setting could be created for each adjustment option instead of seperate settings per sub-button. Right now, if I want to change the color (conditonally) of a button, I have to do it separately for each button. It would be great if settings were made that applies a style to all buttons all at once. (The same goes for animations, badge location etc) |
Beta Was this translation helpful? Give feedback.
-
|
Thank you very much for this module, it's already very useful! I would like to suggest an improvement: would it be possible to add an effect to the main background? Thanks again for your work! |
Beta Was this translation helpful? Give feedback.







Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Badgy Condition Helper
Version: v2025.03.16-fixed
Creator: HyperCriSiS
Important
Unsupported cards:
--> Large layout is recommended!
Badgy Condition Helper adds dynamic visual elements to your Bubble Card - display entity values or icons as badges, apply condition-based backgrounds and animations, and enhance your UI with reactive effects that respond to state changes in your Home Assistant environment.
Feature Overview
Badge System for Sub-Buttons
Conditional Backgrounds
Main Icon Background
Icon Effects
Badge Effects
Sub-Button Effects
Supported Animation Types
Configure this module via the editor or in YAML, for example:
🧩 Get this Module
Screenshots:
Beta Was this translation helpful? Give feedback.
All reactions