🟣 Rounded - Dashboard guide

I use it as a condition in all of my notification automations, so if it is off I get no notifications.

Try this - hide_control: true

not sure if it works!

where to add it?

Bubble card - someone made it work with out theme? The separator

you have a typo on your card type

type: custom:bubble-card
1 Like

someone succeeded to create a way to control only the active lights in specific room?

how can we achieve it?

i struggle in styling my slider-card…

border-radius for the container is not working, can somebody help me finding the problem?

fixed it, i had to apply the rounded theme first, my bad

1 Like

i tried my best, with my first modifications on a card.
This card with two sliders can control position and tilt for shutters.

Any modifications and adjustments are welcome, but for me this is a good starting point for now :slight_smile:

type: custom:button-card
name: Studio west 1
icon: mdi:blinds-horizontal
entity: cover.dg_st_fenster_west_1
tap_action:
  action: call-service
  service: cover.close_cover
  target:
    entity_id:
      - cover.dg_st_fenster_west_1
hold_action:
  action: more-info
double_tap_action:
  action: call-service
  service: cover.open_cover
  target:
    entity_id:
      - cover.dg_st_fenster_west_1
custom_fields:
  position:
    card:
      type: custom:my-slider-v2
      entity: cover.dg_st_fenster_west_1
      mode: position
      vertical: false
      flipped: false
      styles:
        container:
          - background: none
          - border-radius: 100px
          - overflow: visible
        card:
          - height: 16px
          - padding: 0 8px
          - background: |
              [[[
                if (entity.state == "closed") return "linear-gradient(90deg, rgba(255,255,255, 0.3) 0%, rgba(255,255,255, 1) 100%)";
                else return "var(--contrast4)";
              ]]]
        track:
          - overflow: visible
          - background: none
        progress:
          - background: none
        thumb:
          - background: |
              [[[
                if (entity.state == "open") return "white";
                if (entity.state == "closed") return "black";
                else return "white";
              ]]]
          - top: 2px
          - right: '-6px'
          - height: 12px
          - width: 12px
          - border-radius: 100px
  gap:
    card:
      type: custom:gap-card
      height: 8
  tilt:
    card:
      type: custom:my-slider-v2
      entity: cover.dg_st_fenster_west_1
      mode: tilt
      vertical: false
      flipped: false
      styles:
        container:
          - background: none
          - border-radius: 100px
          - overflow: visible
        card:
          - height: 16px
          - padding: 0 8px
          - background: |
              [[[
                if (entity.state == "closed") return "linear-gradient(90deg, rgba(255,255,255, 0.3) 0%, rgba(255,255,255, 1) 100%)";
                else return "var(--contrast4)";
              ]]]
        track:
          - overflow: visible
          - background: none
        progress:
          - background: none
        thumb:
          - background: |
              [[[
                if (entity.state == "open") return "white";
                if (entity.state == "closed") return "black";
                else return "white";
              ]]]
          - top: 2px
          - right: '-6px'
          - height: 12px
          - width: 12px
          - border-radius: 100px
styles:
  grid:
    - grid-template-areas: '"i" "n" "position" "gap" "tilt"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content min-content min-content
  card:
    - background: var(--contrast2)
    - height: 130px
    - padding: 16px
    - '--mdc-ripple-press-opacity': 0
  img_cell:
    - justify-self: start
    - width: 24px
    - padding-bottom: 10px
  icon:
    - width: 24px
    - height: 24px
    - color: var(--contrast8)
  name:
    - justify-self: start
    - font-size: 13px
    - margin: 4px 0 12px 0
    - color: var(--contrast8)
state:
  - value: open
    icon: mdi:blinds-horizontal
    styles:
      card:
        - background: var(--contrast2)
      icon:
        - color: white
      name:
        - color: white
  - value: closed
    icon: mdi:blinds-horizontal-closed
    styles:
      card:
        - background: rgb(225, 175, 209)
      icon:
        - color: black
      name:
        - color: black
![rounded shutter|320x200](upload://k3VbAJKFMxKmReH0eJak7EzpTsk.png)

rounded shutter

Hey guys, been developing this dashboard view for a while, needs some work still but I thought I would share as I’ve taken bits and pieces and made it my own…

2 Likes