76 lines
2.7 KiB
YAML
76 lines
2.7 KiB
YAML
progress_bar:
|
|
name: Progress Bar
|
|
version: 1.1.1
|
|
creator: inukiwi
|
|
description: Show a progress bar on "State" buttons, much like how sliders appear. Also supports different colors for custom conditions.
|
|
supported:
|
|
- button
|
|
code: |-
|
|
.bubble-button-background {
|
|
${card.state = this.config.progress_bar?.custom_entity ? hass.states[this.config.progress_bar?.custom_entity].state : state};
|
|
${card.percentage = (card.state - this.config.progress_bar?.min_value) / (this.config.progress_bar?.max_value - this.config.progress_bar?.min_value) * 100};
|
|
${card.color = this.config.progress_bar?.progress_color};
|
|
${card.color = this.config.progress_bar?.conditional_colors?.condition_1 && checkConditionsMet([].concat(this.config.progress_bar?.conditional_colors?.condition_1), hass) ? this.config.progress_bar?.conditional_colors?.condition_color_1 : card.color };
|
|
${card.color = this.config.progress_bar?.conditional_colors?.condition_2 && checkConditionsMet([].concat(this.config.progress_bar?.conditional_colors?.condition_2), hass) ? this.config.progress_bar?.conditional_colors?.condition_color_2 : card.color };
|
|
opacity: 1 !important;
|
|
background:
|
|
linear-gradient(
|
|
to right,
|
|
var(--${card.color}-color)
|
|
${card.percentage}%,
|
|
transparent
|
|
${card.percentage}%
|
|
);
|
|
}
|
|
editor:
|
|
- name: min_value
|
|
label: Minimum value
|
|
required: true
|
|
default: 0
|
|
selector:
|
|
number:
|
|
mode: box
|
|
- name: max_value
|
|
label: Maximum value
|
|
required: true
|
|
default: 100
|
|
selector:
|
|
number:
|
|
mode: box
|
|
- name: progress_color
|
|
label: Progress Color
|
|
required: true
|
|
default: '#00ff00'
|
|
selector:
|
|
ui_color:
|
|
include_state: true
|
|
- name: custom_entity
|
|
label: Custom state entity
|
|
selector:
|
|
entity: {}
|
|
- type: expandable
|
|
name: conditional_colors
|
|
title: Conditional colors
|
|
icon: mdi:tune
|
|
expanded: false
|
|
schema:
|
|
- name: condition_1
|
|
label: Condition 1 (use color below if met)
|
|
selector:
|
|
condition: {}
|
|
- name: condition_color_1
|
|
label: Condition 1 color (only used if condition 1 is defined)
|
|
selector:
|
|
ui_color:
|
|
include_state: true
|
|
- name: condition_2
|
|
label: Condition 2 (use color below if met)
|
|
selector:
|
|
condition: {}
|
|
- name: condition_color_2
|
|
label: Condition 2 color (only used if condition 2 is defined)
|
|
selector:
|
|
ui_color:
|
|
include_state: true
|
|
link: https://github.com/Clooos/Bubble-Card/discussions/1634
|