search

nicufarmache / lovelace-big-slider-card

A card with a big slider for light entities in Home Assistant
MIT License
62 stars 12 forks source link

Standardization with Tile Card #38

Open nicufarmache opened 9 months ago

nicufarmache commented 9 months ago

Discussed in https://github.com/nicufarmache/lovelace-big-slider-card/discussions/24

Originally posted by **jazzyisj** April 17, 2023 What a great card! Makes you wonder why the UI dev's didn't do this to the tile card, so intuitive! Thank you! Looking forward to seeing if you can extend it to other entities (I see a few requests for that). Would you consider standardizing some of the UI of the big slider card with the hass tile card? I'd like to be able to use them interchangeably in my UI but the inconsistencies are bothersome. 1. Card background should really have been the standard card background color. (ha-card-background). I was able to accomplish this for myself with card_mod, but I think it should come out of the box that way for consistency, allowing the user to customize if desired. 2. Card size - the big slider card height is slightly smaller than a tile card and it looks terrible in a grid when used together. Haven't been able to figure this one out with card_mod yet. 3. Entity name should not word wrap -> it pushes the secondary text off the card, becomes unreadable, and looks terrible. 4. Icon alignment - the big slider icon has less padding to the left than the tile card icon. image 5. A halo around the entity icon would be great to add a little contrast between the icon and the background when entity is on and for a consistent look with the tile card. Especially if one uses the state-light-active-color for the slider color. Also, the icon when no rgb support should also be state-light-active-color, not white for consistency with other hass cards. image 6. Personally I would have used the state-light-active-color as the standard active slider color instead of the primary color for consistency with other cards. Of course easily remedied with the color: option of the slider card, it's just a thought. image 7. This is more of a functionality request. I have several timed lights in my home. Currently I display any active light timers in a separate card (see screenshot). I'd love to be able to put those timers in the secondary text slot somehow. Screenshot 2023-04-17 090959 Thanks again for the great card. It really gave my lighting dashboard a fresh new look! image
Lx commented 9 months ago

+1 from me for the icon/text alignment especially, so that things align nicely among other Tile elements:

image

I guess I would also love it if the bold font was “a little less bold” so that matched that of the Tile cards!

jensrossbach commented 8 months ago

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).

s-hutter commented 4 months ago

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: bigslider-tilestyle 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-info

Note 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.

532910 commented 3 months ago

not sure if this is the same issue or should be a separate one, but big-slider-card looks ugly, due to radius inconsistency: image

david-kalbermatten commented 2 months ago

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: image

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: image

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

xvlw commented 1 week ago

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

d4oOcXs

How I want it to look when the light is off OrcCJXQ

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;
    }
s-hutter commented 8 hours ago

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.

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 %}