Comments (7)
s-hutter
commented on July 28, 2024
1
To nicely integrate with my dashboard, I have tried using Card Mod to match the Big Slider style to the Tile card.
While the CSS code is not perfect, I am quite happy with the result:
Big Slider Card vs Tile Card, on/off, default light/dark theme. Other themes should work as well, but results might vary.
Here is the code:
type: grid
square: false
columns: 2
cards:
- type: custom:big-slider-card
entity: light.couch
name: Couch
icon: mdi:sofa-outline
show_percentage: true
height: 66
colorize: true
background_color: var(--card-background-color)
border_radius: 12px
border_color: var(--divider-color)
card_mod:
style: |
#container {
cursor: col-resize;
}
#slider {
opacity: 0.2 !important;
filter: none !important;
background-color: var(--bsc-entity-color) !important;
}
#icon {
margin: auto 0 auto -12px;
border: 3px solid rgba(158, 158, 158, 0.1);
border-radius: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 40px;
height: 40px;
filter: none !important;
}
#icon[data-state="off"] {
color: rgb(158, 158, 158);
border: none;
background-color: rgba(158, 158, 158, 0.2);
}
#content {
padding:12px 12px 12px 64px !important;
}
#name {
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.1px;
}
#percentage {
font-weight: 400;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.4px;
color: var(--primary-text-color) !important;
}
- type: tile
entity: light.bedroom_ceiling
name: Bedroom
icon: mdi:bed-empty
tap_action:
action: toggle
hold_action:
action: more-infoNote that for both cards to behave the same way on tap and hold, you will have to adjust the actions on the standard tile card.
PS: @nicufarmache an official standardization would still be very welcome. Feel free to use the code above however you wish in case it is helping with the implementation.
from lovelace-big-slider-card.
david-kalbermatten
commented on July 28, 2024
1
Inspired by @s-hutter, I set out to create something that is as close as possible to the Tile Card. However, I came across an issue where the color behind var(--bsc-color) is #FFFFFF if the light entity only supports brightness adjustment. This is inconnsistent with what the Tile Card uses for the default color which is var(--state-light-on-color, var(--state-light-active-color, var(--state-active-color))).
Maybe someone out there finds this usefull for their dashboards...
So, I ended up making two versions. One for lights with adjustable color (-temperature) and one for cards that only have brightness:
the only thing that I couldn't figure out was the part with the text-overflow: ellipsis;. Couldn't get it to work quite right.
Colored Version:
type: custom:big-slider-card
entity: light.ceiling_lamp
height: auto
colorize: true
show_percentage: true
background_color: var(--card-background-color)
border_radius: 12px
border_width: var(--ha-card-border-width, 1px);
card_mod:
style: |
:host {
--brightness-only-color: var(--state-light-on-color, var(--state-light-active-color, var(--state-active-color)));
--colorable-color: var(--bsc-entity-color);
--main-color: var(--colorable-color);
--slider-bg-opacity: 0.1;
--icon-bg-color: color-mix(in srgb, var(--main-color), var(--card-background-color) 80%);
}
:host([pressed]) {
--slider-bg-opacity: 0.39;
--icon-bg-color: color-mix(in srgb, var(--main-color), color-mix(in srgb, var(--main-color) 11%, transparent) 90%);
}
#slider {
opacity: var(--slider-bg-opacity) !important;
filter: none !important;
background-color: color-mix(in srgb, var(--main-color) 40%, transparent) !important;
}
#icon {
color: var(--main-color) !important;
margin: auto 0 auto -12px;
background-color: var(--icon-bg-color);
border-radius: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 40px;
height: 40px;
filter: none !important;
}
#icon[data-state="off"] {
color: rgb(158, 158, 158) !important;
border: none;
background-color: rgba(158, 158, 158, 0.2);
}
#content {
padding:12px 12px 12px 64px !important;
min-width: 0px !important;
}
#name {
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.1px;
color: var(--primary-text-color);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#percentage {
font-weight: 400;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.4px;
color: var(--primary-text-color) !important;
}Brightness Only Version:
type: custom:big-slider-card
entity: light.ceiling_lamp
height: auto
colorize: true
show_percentage: true
background_color: var(--card-background-color)
border_radius: 12px
border_width: var(--ha-card-border-width, 1px);
card_mod:
style: |
:host {
--brightness-only-color: var(--state-light-on-color, var(--state-light-active-color, var(--state-active-color)));
--colorable-color: var(--bsc-entity-color);
--main-color: var(--brightness-only-color);
--slider-bg-opacity: 0.1;
--icon-bg-color: color-mix(in srgb, var(--main-color), var(--card-background-color) 80%);
}
:host([pressed]) {
--slider-bg-opacity: 0.39;
--icon-bg-color: color-mix(in srgb, var(--main-color), color-mix(in srgb, var(--main-color) 11%, transparent) 90%);
}
#slider {
opacity: var(--slider-bg-opacity) !important;
filter: none !important;
background-color: color-mix(in srgb, var(--main-color) 40%, transparent) !important;
}
#icon {
color: var(--main-color) !important;
margin: auto 0 auto -12px;
background-color: var(--icon-bg-color);
border-radius: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 40px;
height: 40px;
filter: none !important;
}
#icon[data-state="off"] {
color: rgb(158, 158, 158) !important;
border: none;
background-color: rgba(158, 158, 158, 0.2);
}
#content {
padding:12px 12px 12px 64px !important;
min-width: 0px !important;
}
#name {
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.1px;
color: var(--primary-text-color);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#percentage {
font-weight: 400;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.4px;
color: var(--primary-text-color) !important;
}Edit: added slider pressed state
from lovelace-big-slider-card.
s-hutter
commented on July 28, 2024
1
The last piece of the puzzle would be to change the background color of the card to be a different color when the entity state is "off"
I tried the below which mimics the#icon[data-state="off"]CSS above but forbackground_colorwithout any effect.
You used "background-color" as a selector, but it should be a property. "Color" only affects the text color.
To change the background you can target the ha-card element. Unfortunately, this doesn't have anything like the handy "data-state" attribute, but you can use Jinja templates in Card Mod:
card_mod:
style: |
{% if states('light.air') == 'off' %}
ha-card {
background-color: #272a2c !important;
}
{% endif %}from lovelace-big-slider-card.
Lx
commented on July 28, 2024
+1 from me for the icon/text alignment especially, so that things align nicely among other Tile elements:
I guess I would also love it if the bold font was “a little less bold” so that matched that of the Tile cards!
from lovelace-big-slider-card.
jensrossbach
commented on July 28, 2024
It would also be nice to have the slider bar look like the one from tile cards and more-info dialogs (i.e., have rounded corners and a small drag bar).
from lovelace-big-slider-card.
532910
commented on July 28, 2024
not sure if this is the same issue or should be a separate one, but big-slider-card looks ugly, due to radius inconsistency:
from lovelace-big-slider-card.
xvlw
commented on July 28, 2024
I appreciate everyone's contribution here, this helped me close to what im trying to do.
The last piece of the puzzle would be to change the background color of the card to be a different color when the entity state is "off"
I tried the below which mimics the #icon[data-state="off"] CSS above but for background_color without any effect. Does the background_color need to be a defined CSS value under card_mod before I can introduce the [data-state="off"] variable or am I missing the mark completely.
#background_color[data-state="off"] {
color: #272a2c !important;
}
How it looks when the light is on
How I want it to look when the light is off
Full code below
type: custom:big-slider-card
entity: light.air
attribute: brightness
icon: m3s:lightbulb-outlined-filled
background_color: '#4f462a'
colorize: true
show_percentage: true
height: 88
card_mod:
style: |
:host {
--brightness-only-color: var(--state-light-on-color, var(--state-light-active-color, var(--state-active-color)));
--colorable-color: var(--bsc-entity-color);
--main-color: var(--colorable-color);
--slider-bg-opacity: 0.1;
--icon-bg-color: color-mix(in srgb, var(--main-color), var(--card-background-color) 80%);
}
:host([pressed]) {
--slider-bg-opacity: 0.39;
--icon-bg-color: color-mix(in srgb, var(--main-color), color-mix(in srgb, var(--main-color) 11%, transparent) 90%);
}
#slider {
opacity: var(--slider-bg-opacity) !important;
filter: none !important;
background-color: color-mix(in srgb, var(--main-color) 90%, transparent) !important;
}
#icon {
color: #ffecb3 !important;
margin: auto 0 auto -12px;
border-radius: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 40px;
height: 40px;
filter: none !important;
}
#icon[data-state="off"] {
color: #fddf7e !important;
border: none;
}
#background_color[data-state="off"] {
color: #272a2c !important;
}
#content {
padding:12px 12px 12px 64px !important;
min-width: 0px !important;
}
#name {
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.1px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #ffecb3 !important;
}
#percentage {
font-weight: 500;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.4px;
color: #ffecb3 !important;
}
from lovelace-big-slider-card.
Related Issues (20)
- Show "Unavailable" for offline devices HOT 1
- Feature Request : Square button shape HOT 2
- Card not working on nest hub HOT 1
- Slider Off Color HOT 1
- Text color
- tap_action not supporting data: instead of deprecated service_data: HOT 2
- Problem with Bar Height - Please Add Bar Height HOT 2
- Doesn’t Work when Brightness is an Entity
- Support other types of entities HOT 5
- Localization does not work HOT 3
- Option to have a vertical slider
- Icon and Text size
- Min settings causes slider value to not go to zero when entity is off HOT 2
- Request: Set icon color when entity is off
- Constant icon color.
- Long press popup dissapears on button release.
- Support for Section view HOT 3
- Brightness change during slide HOT 1
- After 2024.7.0 Update Bars Goes Completly Broke if you have Height on your Yaml code and add px after number
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lovelace-big-slider-card.