šŸŸ£ Rounded - Dashboard guide

Anybody? :pray:

This wonā€™t work because your code is jinja specific while custom button card is javascript. Itā€™s probably possible with JavaScript, but I donā€™t have the knowledge for this.

1 Like

Thanks for the reply. Also not sure how to, so was hoping that somebody would but no luck yet. Will keep trying

someone created energy consume \ cost ROUNDED card? and want to share? (:

Maybe you can create it by trial and error using the Sonos media card? Itā€™s using some templating to retrieve media attributes such as played track and artist etc. Maybe u can use the template format/layout to realise what you want?

I would like to share my Climate card for the once who are interested. The card itself makes use of the following HACS lovelace integrations:

Bubble Card (Optional)
Custom Button Card
Mushroom Card

Iā€™ve placed the Cardā€™s my self in a Pop Up bubble card. So whenever i press (tap_action) the Room Temperature Graph cards, a pop up opens with all my room thermostats. The code for the Custom Button Card can be found below. Donā€™t hesitate to ask questions if you have!

Code
type: custom:button-card
entity: climate.living_room
name: Woonkamer
icon: phu:rooms-living
label: >-
  [[[ return states['climate.living_room'].attributes.current_temperature + "
  Ā°C";  
    ]]]
show_label: true
tap_action:
  action: none
custom_fields:
  slider:
    card:
      type: custom:my-slider-v2
      entity: input_number.temperature_setting_living_room
      styles:
        container:
          - background: none
          - border-radius: 100px
          - overflow: visible
        card:
          - height: 34px
          - padding: 0 8px
          - background: >-
              linear-gradient(90deg, rgba(177,197,255, 0.5) 0%,
              rgba(255,175,131, 1) 100%
        track:
          - overflow: visible
          - background: none
        progress:
          - background: none
        thumb:
          - background: var(--black)
          - top: 5px
          - right: '-6px'
          - height: 24px
          - width: 24px
          - border-radius: 100px
  setting:
    card:
      type: custom:mushroom-climate-card
      entity: climate.living_room
      show_temperature_control: true
      primary_info: none
      secondary_info: none
      tap_action:
        action: none
      hold_action:
        action: none
      double_tap_action:
        action: none
      fill_container: false
      icon_type: none
      card_mod:
        style:
          mushroom-climate-temperature-control$:
            mushroom-input-number$: |
              .value {
                color: var(--contrast10) !important;}
              #container .button:nth-child(1) {
                --card-mod-icon-color: var(--contrast10);
              }
              #container .button:nth-child(3) {
                --card-mod-icon-color: var(--contrast10);
              }
          .: |
            ha-card {
              background-color: transparent;
              border: 0px
            }
styles:
  grid:
    - grid-template-areas: '"i l" "n setting" "slider slider"'
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 1fr min-content min-content
  card:
    - background: rgba(144, 191, 255,var(--color-tint))
    - padding: 16px
    - '--mdc-ripple-press-opacity': 0
  img_cell:
    - justify-self: start
    - width: 60px
    - margin: 1% 0 -10% 0
  icon:
    - width: 60px
    - height: 60px
    - color: var(--contrast20)
  name:
    - justify-self: start
    - font-size: 26px
    - margin: 4px 0 12px 0
    - color: var(--contrast20)
  label:
    - justify-self: end
    - font-weight: bold
    - font-size: 26px
    - margin: 1% 11% -10% 0
    - color: var(--contrast20)
  custom_fields:
    setting:
      - justify-self: end
      - margin: 4px 0 12px 0
      - font-size: 16px
      - width: 130px

8 Likes

This is actually a really good idea. I was struggling with an idea for a good climate card and just gave up on it.

Hi,

Thank you for sharing :}

few things:

  1. how can we know the climate status with your card,
    (for exaple changing the card color for every mode).
  2. Iā€™ll be happy if you can share the code including the bubble card code.
  3. explantion for the input number

Thank You

  1. My Climate System doesnā€™t have any modes. So, thatā€™s not implemented, but you could probably do that yourself by making use of the State Value function from the custom button card and assigning different colors for every mode. The Media Card created by LE0N is a good example of that, as the background of the remote button card is colored per state.
2. Complete Bubble-Card Code
type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#climate'
    icon: mdi:home-thermometer-outline
    margin_top_mobile: '-56px'
    name: Kamer Instellingen
  - type: custom:button-card
    entity: climate.living_room
    name: Woonkamer
    icon: phu:rooms-living
    label: >-
      [[[ return states['climate.living_room'].attributes.current_temperature +
      " Ā°C";  
        ]]]
    show_label: true
    tap_action:
      action: none
    custom_fields:
      slider:
        card:
          type: custom:my-slider-v2
          entity: input_number.temperature_setting_living_room
          styles:
            container:
              - background: none
              - border-radius: 100px
              - overflow: visible
            card:
              - height: 34px
              - padding: 0 8px
              - background: var(--temperature)
            track:
              - overflow: visible
              - background: none
            progress:
              - background: none
            thumb:
              - background: var(--black)
              - top: 5px
              - right: '-20px'
              - height: 24px
              - width: 24px
              - border-radius: 100px
      setting:
        card:
          type: custom:mushroom-climate-card
          entity: climate.living_room
          show_temperature_control: true
          primary_info: none
          secondary_info: none
          tap_action:
            action: none
          hold_action:
            action: none
          double_tap_action:
            action: none
          fill_container: false
          icon_type: none
          card_mod:
            style:
              mushroom-climate-temperature-control$:
                mushroom-input-number$: |
                  :host {
                    --bg-color: var(--blue-tint) !important;
                  }
                  .value {
                    color: var(--contrast10) !important;}
                  #container .button:nth-child(1) {
                    --card-mod-icon-color: var(--contrast10);
                  }
                  #container .button:nth-child(3) {
                    --card-mod-icon-color: var(--contrast10);
                  }
              .: |
                ha-card {
                  background-color: transparent;
                  border: 0px
                }
    styles:
      grid:
        - grid-template-areas: '"i l" "n setting" "slider slider"'
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: 1fr min-content min-content
      card:
        - background: var(--blue-tint)
        - padding: 16px
        - '--mdc-ripple-press-opacity': 0
      img_cell:
        - justify-self: start
        - width: 60px
        - margin: 1% 0 -10% 0
      icon:
        - width: 60px
        - height: 60px
        - color: var(--contrast20)
      name:
        - justify-self: start
        - font-size: 26px
        - margin: 4px 0 12px 0
        - color: var(--contrast20)
      label:
        - justify-self: end
        - font-weight: bold
        - font-size: 26px
        - margin: 1% 11% -10% 0
        - color: var(--contrast20)
      custom_fields:
        setting:
          - justify-self: end
          - margin: 4px 0 12px 0
          - font-size: 16px
          - width: 130px
  - type: custom:button-card
    entity: climate.bedroom
    name: Slaapkamer
    icon: phu:rooms-bedroom
    label: >-
      [[[ return states['climate.bedroom'].attributes.current_temperature + "
      Ā°C";  
        ]]]
    show_label: true
    tap_action:
      action: none
    custom_fields:
      slider:
        card:
          type: custom:my-slider-v2
          entity: input_number.temperature_setting_bedroom
          styles:
            container:
              - background: none
              - border-radius: 100px
              - overflow: visible
            card:
              - height: 34px
              - padding: 0 8px
              - background: var(--temperature)
            track:
              - overflow: visible
              - background: none
            progress:
              - background: none
            thumb:
              - background: var(--black)
              - top: 5px
              - right: '-20px'
              - height: 24px
              - width: 24px
              - border-radius: 100px
      setting:
        card:
          type: custom:mushroom-climate-card
          entity: climate.bedroom
          show_temperature_control: true
          primary_info: none
          secondary_info: none
          tap_action:
            action: none
          hold_action:
            action: none
          double_tap_action:
            action: none
          fill_container: false
          icon_type: none
          card_mod:
            style:
              mushroom-climate-temperature-control$:
                mushroom-input-number$: |
                  :host {
                    --bg-color: var(--blue-tint) !important;
                  }
                  .value {
                    color: var(--contrast10) !important;}
                  #container .button:nth-child(1) {
                    --card-mod-icon-color: var(--contrast10);
                  }
                  #container .button:nth-child(3) {
                    --card-mod-icon-color: var(--contrast10);
                  }
              .: |
                ha-card {
                  background-color: transparent;
                  border: 0px
                }
    styles:
      grid:
        - grid-template-areas: '"i l" "n setting" "slider slider"'
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: 1fr min-content min-content
      card:
        - background: var(--blue-tint)
        - padding: 16px
        - '--mdc-ripple-press-opacity': 0
      img_cell:
        - justify-self: start
        - width: 60px
        - margin: 1% 0 -10% 0
      icon:
        - width: 60px
        - height: 60px
        - color: var(--contrast20)
      name:
        - justify-self: start
        - font-size: 26px
        - margin: 4px 0 12px 0
        - color: var(--contrast20)
      label:
        - justify-self: end
        - font-weight: bold
        - font-size: 26px
        - margin: 1% 11% -10% 0
        - color: var(--contrast20)
      custom_fields:
        setting:
          - justify-self: end
          - margin: 4px 0 12px 0
          - font-size: 16px
          - width: 130px
  - type: custom:button-card
    entity: climate.bathroom
    name: Badkamer
    icon: phu:rooms-bathroom
    label: >-
      [[[ return states['climate.bathroom'].attributes.current_temperature + "
      Ā°C";  
        ]]]
    show_label: true
    tap_action:
      action: none
    custom_fields:
      slider:
        card:
          type: custom:my-slider-v2
          entity: input_number.temperature_setting_bathroom
          styles:
            container:
              - background: none
              - border-radius: 100px
              - overflow: visible
            card:
              - height: 34px
              - padding: 0 8px
              - background: var(--temperature)
            track:
              - overflow: visible
              - background: none
            progress:
              - background: none
            thumb:
              - background: var(--black)
              - top: 5px
              - right: '-20px'
              - height: 24px
              - width: 24px
              - border-radius: 100px
      setting:
        card:
          type: custom:mushroom-climate-card
          entity: climate.bathroom
          show_temperature_control: true
          primary_info: none
          secondary_info: none
          tap_action:
            action: none
          hold_action:
            action: none
          double_tap_action:
            action: none
          fill_container: false
          icon_type: none
          card_mod:
            style:
              mushroom-climate-temperature-control$:
                mushroom-input-number$: |
                  :host {
                    --bg-color: var(--blue-tint) !important;
                  }
                  .value {
                    color: var(--contrast10) !important;}
                  #container .button:nth-child(1) {
                    --card-mod-icon-color: var(--contrast10);
                  }
                  #container .button:nth-child(3) {
                    --card-mod-icon-color: var(--contrast10);
                  }
              .: |
                ha-card {
                  background-color: transparent;
                  border: 0px
                }
    styles:
      grid:
        - grid-template-areas: '"i l" "n setting" "slider slider"'
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: 1fr min-content min-content
      card:
        - background: var(--blue-tint)
        - padding: 16px
        - '--mdc-ripple-press-opacity': 0
      img_cell:
        - justify-self: start
        - width: 60px
        - margin: 1% 0 -10% 0
      icon:
        - width: 60px
        - height: 60px
        - color: var(--contrast20)
      name:
        - justify-self: start
        - font-size: 26px
        - margin: 4px 0 12px 0
        - color: var(--contrast20)
      label:
        - justify-self: end
        - font-weight: bold
        - font-size: 26px
        - margin: 1% 11% -10% 0
        - color: var(--contrast20)
      custom_fields:
        setting:
          - justify-self: end
          - margin: 4px 0 12px 0
          - font-size: 16px
          - width: 130px
  1. The input number is a custom number corresponding to my thermostat (4.0 - 35.0), representing the value that can be set on the unit itself. The slider in the card can change this input number, and via an automation, it sets the target temperature on the thermostat. Whenever I change the target temperature on the thermostat itself, it also updates the input number via the same automation but different trigger id to maintain a closed loop.

Hope this explains it all!

2 Likes

great!

can you share the input number automation?

Thanks

Yeah sure! Here you are!

Automation Code
alias: Temperature Slider - Living room
description: Automation which changes the Tempature Settings.
trigger:
  - platform: state
    entity_id:
      - input_number.temperature_setting_living_room
    from: null
    to: null
    id: "0"
  - platform: state
    entity_id:
      - climate.living_room
    attribute: temperature
    id: "1"
condition: []
action:
  - choose:
      - conditions:
          - condition: trigger
            id:
              - "0"
        sequence:
          - service: climate.set_temperature
            data:
              temperature: >-
                {{ states("input_number.temperature_setting_living_room") |
                float (0) }}
            target:
              entity_id: climate.living_room
      - conditions:
          - condition: trigger
            id:
              - "1"
        sequence:
          - service: input_number.set_value
            data:
              value: "{{ state_attr('climate.living_room', 'temperature') }}"
            target:
              entity_id: input_number.temperature_setting_living_room
mode: single

Please be sure to test it yourself before using it!

1 Like

thank you working great

Itā€™s all explained on GitHub :+1:

Hey, sorry for the late reply!
Here is the code

type: grid
columns: 2
square: false
cards:
  - type: custom:stack-in-card
    mode: vertical
    keep:
      margin: true
      border_radius: true
      background: true
      outer_padding: false
    card_mod:
      style: |
        ha-card {
          border-radius: 25px;
          {% if is_state('cover.shellyplus2pm_5443b23efedc', 'open') %}
          background-color: var(--blue-tint);  
          border-radius: 15px;
          {% elif is_state('cover.shellyplus2pm_5443b23efedc', 'opening') %}
          background-color: var(--brown-tint);
          {% elif is_state('cover.shellyplus2pm_5443b23efedc', 'closing') %}
          background-color: var(--brown-tint);
          {% elif is_state('cover.shellyplus2pm_5443b23efedc', 'closed') %}
          background-color: var(--contrast00);
          {% else %}
          background-color: var(--red);
          {% endif %}
          }
    cards:
      - type: custom:button-card
        entity: cover.shellyplus2pm_5443b23efedc
        name: >-
          [[[return
          states["cover.shellyplus2pm_5443b23efedc"].attributes.current_position]]]
        styles:
          grid:
            - grid-template-areas: '"n percent" "l l"'
            - grid-template-columns: min-content min-content
          name:
            - font-size: 32px
            - color: var(--contrast20)
          card:
            - height: 80px
            - border-radius: 24px
            - padding: 0px 0 6px 6px
            - box-sizing: border-box
            - background: none
            - box-shadow: none
            - margin-bottom: '-10px'
            - '--mdc-ripple-press-opacity': 0
          label:
            - justify-self: start
            - font-size: 12px
            - color: var(--contrast20)
            - margin-bottom: 6px
          custom_fields:
            percent:
              - font-size: 12px
              - color: var(--contrast10)
              - margin-bottom: '-20px'
              - padding-left: 2px
              - margin-right: 100px
        label: Triangolo
        custom_fields:
          percent: ' %'
        show_label: true
        tap_action:
          action: more-info
        state:
          - value: open
            label: Triangolo aperto
            styles:
              label:
                - color: var(--contrast20)
                - font-family: Product Sans
              name:
                - color: var(--blue)
                - font-family: Product Sans Medium
          - value: closed
            label: Triangolo chiuso
            name: '0'
            styles:
              name:
                - color: var(--contrast10)
                - font-family: Product Sans Medium
                - font-size: 24px
              label:
                - font-family: Product Sans
          - value: closing
            name: In chiusura
            label: Triangolo
            styles:
              name:
                - color: var(--brown)
                - font-family: Product Sans Medium
                - font-size: 14px
          - value: opening
            name: In apertura
            label: Triangolo
            styles:
              name:
                - color: var(--brown)
                - font-family: Product Sans Medium
                - font-size: 14px
      - type: custom:my-slider-v2
        entity: cover.shellyplus2pm_5443b23efedc
        vertical: false
        styles:
          container:
            - border-radius: 100px
            - overflow: visible
            - background: none
          card:
            - height: 26px
            - padding: 0px 20px 0px 8px
            - background: |
                [[[
                  if (entity.state == "open") return "var(--slidertriangolo)";
                  else return "var(--slidertriangolooff)";
                ]]]
            - margin-bottom: 15px
            - margin-left: 5px
            - margin-right: 5px
          track:
            - overflow: visible
            - background: none
          progress:
            - background: none
          thumb:
            - background: var(--black)
            - top: 2px
            - right: '-18px'
            - height: 22px
            - width: 22px
            - border-radius: 100px

For slider on/off colors, put this in the theme

slidertriangolo: linear-gradient(90deg, rgba(var(--slidertriangolo-low-rgb), 0.4) 0%, rgba(var(--slidertriangolo-high-rgb), 1) 100%)
slidertriangolooff: linear-gradient(90deg, rgba(var(--slidertriangolo-low-rgb), 0.2) 0%, rgba(var(--slidertriangolo-high-rgb), 0.4) 100%)

If you want, I also made one for a switch.
I use it for opening the gate

type: horizontal-stack
cards:
  - type: custom:button-card
    show_name: false
    icon: mdi:hospital
    double_tap_action:
      action: none
    hold_action:
      action: navigate
      navigation_path: /help
      haptic: heavy
    tap_action:
      action: none
    styles:
      grid:
        - grid-template-areas: '"i" "n" "slider"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
      card:
        - background: var(--red)
        - height: 100%
        - width: 70px
        - '--mdc-ripple-press-opacity': 0
      img_cell:
        - justify-self: center
        - width: 54px
      icon:
        - width: 44px
        - height: 44px
        - color: var(--black)
    card_mod:
      style: |
        ha-card:active {
          transform: scale(0.97);
          transition: 100ms !important;
          border-radius: 20px;
          transform-origin: center;
          }
  - type: custom:button-card
    card_mod:
      style: |
        ha-card {
          transition: 300ms !important;
          }
    name: GATE
    icon: mdi:gate
    show_label: true
    label: Slide to open
    entity: switch.gate
    tap_action:
      action: none
    hold_action:
      action: more-info
      haptic: light
    custom_fields:
      slider:
        card:
          type: custom:my-slider-v2
          entity: '[[[ return entity.entity_id ]]]'
          styles:
            container:
              - background: none
              - border-radius: 100px
              - overflow: visible
            card:
              - height: 46px
              - padding: 0px 0px 0px 5px
              - background: |
                  [[[
                    if (entity.state == "on") return "var(--orange)";
                    if (entity.state == "off") return "var(--contrast0)";
                    else return "var(--contrast0)";
                  ]]]
            track:
              - overflow: visible
              - background: none
            progress:
              - background: none
            thumb:
              - background: |
                  [[[
                    if (entity.state == "on") return "var(--yellow)";
                    if (entity.state == "off") return "var(--blue)";
                    else return "var(--contrast8)";
                  ]]]
              - top: 4px
              - right: 0px
              - height: 38px
              - width: 38px
              - border-radius: 100px
    styles:
      grid:
        - grid-template-areas: '"i" "n" "l" "slider"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
      card:
        - background: var(--blue)
        - padding: 16px
        - '--mdc-ripple-press-opacity': 0
        - height: 200px
      img_cell:
        - justify-self: start
        - margin: 50px 0px 0px 0px
        - width: 24px
      icon:
        - width: 24px
        - height: 24px
        - color: var(--black)
      name:
        - justify-self: start
        - font-size: 14px
        - margin: 12px 0 20px 0
        - color: var(--black)
        - font-family: Poppins
      label:
        - color: var(--black0)
        - font-size: 14px
        - margin: '-10px 0px 5px 0px'
        - font-family: Product Sans Light
    state:
      - value: 'on'
        icon: mdi:gate-open
        name: Opening..
        styles:
          card:
            - background: var(--yellow)
            - box-shadow: none
          icon:
            - color: var(--black)
          name:
            - color: var(--black)
          label:
            - color: transparent

3 Likes

Update 2023.10 once again broke the header menu bar at the bottom of the dashboards. This is now displayed on top again and is no longer transparent.
Has anyone already found a solution for this?

2 Likes

update card_mod and clear the cache

Hi All,

Iā€™m playing around with this and loving it so far. Is there a way to get it so when a light is off, the slider is hidden, but when the light is on, it displays the slider?

Thanks

Yes, I did this. Just make the portion of code that holds the slider a conditional card.

@Numotiv Are you able to share some sample code? Iā€™ve been playing around and couldnā€™t get it working

hi where can i get the install files on github is nothingā€¦

How can i install it with HACS??? no rounded in FRONTEND

can you help me please?

its like NSA SECURITY X-FILE

thank you!!