🟣 Rounded - Dashboard guide

Share your Projects! Dashboards & Frontend
77

It’s all on github :slight_smile:
homeassistant/rounded.yaml at main ¡ CM000n/homeassistant ¡ GitHub

Greetings

1 Like
78

How can be combined this theme with minimalist cards? I love this colour schemes and desing but minimalist cards are useful

79

Hi… where can I find the frontend ui in Homeassistent? By search “rounded” I become no results
Thank you! Great projects

Or share the rounded.js Javascript file

80

Not yet available, development is in progress :wink:

81

Hi all,

I would like to get the livingroomtemp on the upper right but I somehow can’t get it there. Does anybody know how?

image

This is my code for this card:

> type: custom:button-card
> name: Woonkamer
> icon: '[[[ return entity.attributes.icon ]]]'
> label: '[[[ return states[''sensor.thermostaat_temperature''].state + '' °C'' ]]]'
> show_label: true
> entity: light.woonkamer
> tap_action:
>   action: toggle
>   haptic: medium
> hold_action:
>   action: more-info
>   haptic: medium
> custom_fields:
>   slider:
>     card:
>       type: custom:my-slider-v2
>       entity: '[[[ return entity.entity_id ]]]'
>       colorMode: brightness
>       styles:
>         container:
>           - background: none
>           - border-radius: 100px
>           - overflow: visible
>         card:
>           - height: 16px
>           - padding: 0 8px
>           - background: |
>               [[[
>                 if (entity.state == "on") 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 == "on") return "var(--black)";
>                 if (entity.state == "off") return "var(--contrast20)";
>                 else return "var(--contrast8)";
>               ]]]
>           - top: 2px
>           - right: '-8px'
>           - height: 12px
>           - width: 12px
>           - border-radius: 10px
> styles:
>   grid:
>     - grid-template-areas: '"i label" "n n" "slider slider"'
>     - grid-template-columns: 1fr 1fr
>     - grid-template-rows: 1fr min-content min-content
>   card:
>     - background: var(--contrast2)
>     - padding: 16px
>     - '--mdc-ripple-press-opacity': 0
>   img_cell:
>     - justify-self: start
>     - width: 24px
>   icon:
>     - width: 24px
>     - height: 24px
>     - color: var(--contrast8)
>   name:
>     - justify-self: start
>     - font-size: 14px
>     - margin: 4px 0 12px 0
>     - color: var(--contrast8)
>   label:
>     - font-size: 12px
> state:
>   - value: 'on'
>     styles:
>       card:
>         - background: |
>             [[[
>                 var color = entity.attributes?.rgb_color;
>                 if (entity.state != "on"){
>                   return 'var(--contrast20)';
>                 }
>                 else if (color){
>                   return 'rgba(' + color + ')'
>                 }
>                 else{
>                   return 'var(--yellow)'
>                 }
>             ]]]
>       icon:
>         - color: var(--black)
>       name:
>         - color: var(--black)
>       label:
>         - color: var(--black)
>   - value: 'off'
>     styles:
>       icon:
>         - color: var(--contrast20)
>       name:
>         - color: var(--contrast20)
>       label:
>         - color: var(--contrast20)
82

This is my code for this, it has no tap actions and it needs some tweaking though.
I also removed the slider because I kept sliding by accident.

type: custom:button-card
entity: light.bulb_dining_room
icon: mdi:sofa-single
name: Living room
styles:
  grid:
    - grid-template-areas: '"i temp" "n hum"'
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 1fr min-content min-content
  card:
    - background: var(--contrast2)
    - padding: 16px
    - '--mdc-ripple-press-opacity': 0
  img_cell:
    - justify-self: start
    - width: 24px
  icon:
    - width: 24px
    - height: 24px
    - color: var(--contrast8)
  name:
    - justify-self: start
    - font-size: 14px
    - margin: 4px 0 4px 0
    - color: var(--contrast8)
  custom_fields:
    temp:
      - align-self: start
      - justify-self: end
      - font-size: 13px
      - font-weight: 500
      - margin: 4px 0 0px 0
      - color: var(--contrast8)
    hum:
      - align-self: start
      - justify-self: end
      - font-size: 13px
      - font-weight: 500
      - margin: 4px 0 12px 0
      - color: var(--contrast8)
custom_fields:
  temp: |
    [[[
    return `<ha-icon
      icon="mdi:thermometer"
      style="width: 18px; height: 18px; color: var(--orange);">
      </ha-icon><span>${parseFloat(states['sensor.air_monitor_living_room_temperature'].state).toFixed(0)}°C</span>`
    ]]]
  hum: |
    [[[
    return `<ha-icon
      icon="mdi:water-percent"
      style="width: 18px; height: 18px; color: var(--blue);">
      </ha-icon> <span>${parseFloat(states['sensor.air_monitor_living_room_humidity'].state).toFixed(0)}%</span>`
    ]]]

chrome_bt1AvLuONo

Still trying to add these 2 icons below it to show states of dishwasher, washingmachine etc
But stuck with the 2 columns at the moment, want them to be in one column nicely next to each other starting on the left side
chrome_gbwPZdCUhn

3 Likes
83

image
image1170×2058 114 KB

I have created a view roomcards with icons for lights, windows and speaker entities. It is good for mobile look.

84

Herr is the Code for the first room

85

square: false
columns: 1
type: grid
cards:

  • type: custom:button-card
    color_type: label-card
    color: transparent
    show_icon: false
    styles:
    card:
    - background-color: transparent
    - box-shadow: none
    name:
    - font-size: 20px
    - text-align: left
    - letter-spacing: ‘-0.01em’
    - font-weight: sans-serif
    name: Räume
  • type: horizontal-stack
    cards:
    • type: custom:stack-in-card
      cards:
      • type: custom:mushroom-template-card
        icon: mdi:sofa
        entity: light.wohnzimmer_beleuchtung
        icon_color: var(–black)
        primary: Wohnzimmer
        secondary: >-
        {{(states(‘sensor.wohnbereich_temperatur’)) }} °C | {{
        (states(‘climate.eve_thermo_esstisch’)) }}
        layout: horizontal
        tap_action:
        action: navigation
        navigation_path: null
        card_mod:
        style:
        mushroom-state-info$: |
        .primary {
        font-size: 15px !important;
        position: relative;
        top: -30px;
        left: -75px;
        overflow: visible !important;
        color: black;
        font-weight: bold;
        text-overflow: ellipsis;
        }
        .secondary {
        font-size: 11px !important;
        position: relative;
        overflow: visible !important;
        top: -35px;
        left: -75px;
        }
        mushroom-shape-icon$: |
        .shape {
        position: relative;
        border-radius: 0px !important;
        }
        .: |
        ha-card {
        margin-top: 10px;
        –primary-text-color: black;
        –secondary-text-color: black;
        background: none;
        }
        :host {
        –mush-icon-size: 80px;
        }
      • type: custom:mushroom-template-card
        icon_color: |-
        {% set state=states(entity) %}
        {% if state==‘on’ %}
        black
        {% elif state==‘off’ %}
        white
        {% else %}
        gray
        {% endif %}
        icon: |-
        {% if is_state(entity, ‘on’) %}
        mdi:lightbulb-group
        {%else%}
        mdi:lightbulb-group-off
        {% endif %}
        entity: light.wohnzimmer_beleuchtung
        tap_action:
        action: toggle
        card_mod:
        style:
        mushroom-shape-icon$: |
        .shape {
        width: 10px;
        height: 10px;
        }
        .: |
        ha-card {
        width: 55px;
        margin-left: 70%;
        top: -118px;
        background: none;
        }
        :host {
        –mush-icon-size: 22px;
        }
      • type: custom:mushroom-template-card
        entity: binary_sensor.eve_door_esstisch
        tap_action:
        action: more-info
        icon: |-
        {% if is_state(entity, ‘on’) %}
        mdi:window-open-varian
        {%elif is_state(entity, ‘off’) %}
        mdi:window-closed-variant
        {% endif %}
        icon_color: |-
        {% set state=states(entity) %}
        {% if state==‘on’ %}
        black
        {% elif state==‘off’ %}
        white
        {% else %}
        gray
        {% endif %}
        card_mod:
        style:
        mushroom-shape-icon$: |
        .shape {
        width: 10px;
        height: 10px;
        }
        .: |
        ha-card {
        width: 15px;
        margin-left: 70%;
        top: -138px;
        background: none;
        }
        :host {
        –mush-icon-size: 22px;
        }
      • type: custom:mushroom-template-card
        entity: media_player.sonos_wohnzimmer_2
        tap_action:
        action: more-info
        icon: |-
        {% set state=states(entity) %}
        {% if state==‘playing’ %}
        mdi:speaker-play
        {% elif state==‘off’ %}
        mdi:speaker-pause
        {% else %}
        mdi:speaker-off
        {% endif %}
        icon_color: |-
        {% set state=states(entity) %}
        {% if state==‘playing’ %}
        black
        {% elif state==‘off’ %}
        white
        {% else %}
        white
        {% endif %}
        card_mod:
        style:
        mushroom-shape-icon$: |
        .shape {
        width: 10px;
        height: 10px;
        }
        .: |
        ha-card {
        width: 15px;
        margin-left: 70%;
        top: -158px;
        background: none;
        }
        :host {
        –mush-icon-size: 22px;
        }
        card_mod:
        style: |
        ha-card {
        height: 90px !important;
        width: 175px !important;
        background-color: var(–red)
        }
86

Not sure if I’m the only one, but since it has been implemented in the main post code.
The bottom bar hides the add card button when a couple of cards have been added.

chrome_zool7hpg8Z
chrome_zool7hpg8Z2200×194 36.6 KB

Even when:

        ha-fab {
          margin-bottom: 200px;
        }
1 Like
87

Is anyone able to help me out with this please?

I solved the font issue, but I still have huge gaps between my cards in the grid for whatever reason. It actually occurs for every card I have in each row, no matter the card.

It’s wrecking the look of my dashboard :frowning:

88 

card-mod-theme: Rounded

  card-mod-view-yaml: |

      /* General changes */ 

      ha-card {
        transition: none !important;
        font-family: 'custom font, otherwise remove this line', 'Roboto', sans-serif !important;
      }

You must also change the font-name under „General changes“ too

89

Have anybody a good working Thermostat Card for this theme?

1 Like
90

I had the same issue. You need to set square: false inside your grid card:
E.g. like so:

- type: grid
    square: false
    cards:
      - type: custom:button-card
...
91

The font he uses doesnt show… anyone a solution for this ?

92

image
image1170×763 60.3 KB

I have created a Thermostat Card, where you can toggle More-info

Here is the code:

type: custom:button-card
entity: climate.eve_thermo_bild
icon: mdi:thermostat
name: Bild
styles:
card:
- background-color: var(–red)
- border-radius: 6%
- width: 400x
- height: 100px
- padding: 10%
- color: black
- font-size: 26px
- text-transform: capitalize
grid:
- grid-template-areas: ‘“i temp” “n n” “state state” “ram ram” “sd sd”’
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 13px
- align-self: middle
- justify-self: start
- padding-bottom: 0px
- padding-left: 6px
img_cell:
- justify-content: start
- align-items: start
- margin-top: null
- margin-left: ‘-40%’
icon:
- color: black
- width: 100%
- margin-top: ‘-5%’
- margin-left: 0%
custom_fields:
temp:
- align-self: start
- justify-self: end
- entity: sensor.eve_thermo_bild_current_temperature
state:
- padding-bottom: 0px
- align-self: start
- justify-self: start
- padding-left: 6px
- font-size: 10px
custom_fields:
temp: |
[[[
return <ha-icon icon="mdi:thermometer" style="width: 23px; height: 23px; color: black;"> </ha-icon><span><span style="color: var(--text-color-sensor);">${states['sensor.wohnbereich_temperatur'].state}°</span></span>
]]]
state: |
[[[
return <ha-icon icon="mdi:radiator" style="width: 1px; height: 1px; color: white;"> </ha-icon><span><span style="color: var(--text-color-sensor);">${states['climate.eve_thermo_bild'].state}</span></span>
]]]
state:

  • value: ‘on’
    styles:
    card:
    - background: var(–red)
  • value: ‘off’
    styles:
    state:
    - color: white
    name:
    - color: white
    icon:
    - color: white
    temp:
    - color: white
    card:
    - color: white
    - filter: opacity(50%)
    - background: black
93

But i have a problem to geht the Card more rounded, have anyone a Solution?

94

it is really a cramp with unformatted codes
just use the function provided for this

For more rounding just adjust this value

- border-radius: 6%
95 
type: custom:button-card
entity: climate.eve_thermo_bild
icon: mdi:thermostat
name: Bild
styles:
card:
- background-color: var(–red)
- border-radius: 6%
- width: 400x
- height: 100px
- padding: 10%
- color: black
- font-size: 26px
- text-transform: capitalize
grid:
- grid-template-areas: ‘“i temp” “n n” “state state” “ram ram” “sd sd”’
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 13px
- align-self: middle
- justify-self: start
- padding-bottom: 0px
- padding-left: 6px
img_cell:
- justify-content: start
- align-items: start
- margin-top: null
- margin-left: ‘-40%’
icon:
- color: black
- width: 100%
- margin-top: ‘-5%’
- margin-left: 0%
custom_fields:
temp:
- align-self: start
- justify-self: end
- entity: sensor.eve_thermo_bild_current_temperature
state:
- padding-bottom: 0px
- align-self: start
- justify-self: start
- padding-left: 6px
- font-size: 10px
custom_fields:
temp: |
[[[
return <ha-icon icon="mdi:thermometer" style="width: 23px; height: 23px; color: black;"> </ha-icon><span><span style="color: var(--text-color-sensor);">${states['sensor.wohnbereich_temperatur'].state}°</span></span>
]]]
state: |
[[[
return <ha-icon icon="mdi:radiator" style="width: 1px; height: 1px; color: white;"> </ha-icon><span><span style="color: var(--text-color-sensor);">${states['climate.eve_thermo_bild'].state}</span></span>
]]]
state:

value: ‘on’
styles:
card:
- background: var(–red)
value: ‘off’
styles:
state:
- color: white
name:
- color: white
icon:
- color: white
temp:
- color: white
card:
- color: white
- filter: opacity(50%)
- background: black

@Manen123 , can you please fix the syntex?

Thank You

96

Wow, that was it! Thank you, that’s kinda annoying that it does that by default…