🟣 Rounded - Dashboard guide

Manen123 · March 10, 2023, 9:24am

Hi Leon, I have problem to place the Code for the Round.yaml into the Root Folder.
So here are my questions:

Where is the right place (root Folder)
Is the root Folder in the config.yaml?
I am sorry for my englisch, I am from Germany.
Best regards!
Martin

Moss · March 10, 2023, 12:49pm

The folder is called themes and is in the config directory.
a folder is not in a file or?

Greetings
Moss

HyperionBlaze · March 11, 2023, 7:08am

This dashboard is awesome! I’ve had a good time with it so far, but have run into a few issues.

I’ve been trying to get the custom Google font Varela Round to work (or just any custom font) but it never seems to take effect. My code for the font-family line is: font-family: 'Varela_Round' but that never works. I’ve tried adding the font-family: 'Varela_Round', sans-serif; part too to see if that’ll do anything…but it doesn’t (and commonly causes an error).

Another issue I can’t seem to resolve, is there is a very large gap between my light cards when I try and put them into a grid. How do I reduce that gap? I don’t seem to have that issue with any other card…

Manen123 · March 11, 2023, 7:31am

Hi Marco, thank you for your response! But I have allredy a Folder named Themes, where are themes in like iOS dark Mode, reeder dark, is this the right place to create the file rounded.yaml there?

Greetings
Martin

Moss · March 11, 2023, 7:53am

Hi Martin,

yes this is the right place.

Greetings
Moss

Manen123 · March 11, 2023, 8:21am

Hi Marco,
thank you for your response!
I will try it, have a nice weekend:-)
Greetings
Martin

acesyde · March 12, 2023, 7:44am

Hi everyone,

The theme is available here GitHub - lovelace-rounded/theme: 🟣 Lovelace Rounded Theme

In couple of days cards will be available GitHub - lovelace-rounded/ui: 🟣 Lovalce Rounded UI components like Mushroom integration

🛟 Help wanted :

UI code cards
Docs write documentation

If anyone is interested, please contact me

PaNiCo · March 12, 2023, 4:26pm

I think it’s Lato.

davidnestico · March 12, 2023, 7:54pm

Awesome!

andreadannibale · March 13, 2023, 11:54am

thanks for sharing this wonderful work!

bbolinger · March 14, 2023, 1:40am

First off, I love this theme!!! One personal change was I wanted to waste less space at the top, so I added mushroom chips to title card. I need to add some custom CSS to it but thought I would share the idea. If this is too far off topic, please let me know I can delete.

type: custom:mod-card
style: |
  ha-card {
    text-align: center;
  }
card:
  type: vertical-stack
  title: Home
  cards:
    - type: custom:mushroom-chips-card
      alignment: center
      chips:
        - type: entity
          entity: person.bbolinger
          icon: mdi:face-man
        - type: entity
          entity: person.amy_bolinger
          icon: mdi:face-woman
        - type: alarm-control-panel
          entity: alarm_control_panel.blink_home
          icon: mdi:shield-home-outline
        - type: light
          entity: light.interior_lights
        - type: entity
          entity: binary_sensor.garage_door_sensor_sensor_state_any
          icon: mdi:garage-alert

Manen123 · March 14, 2023, 6:45am

Hi CMOOOn,
can you please share the code, Inlay from One room (Wohnzimmer) That will be great:-)!
Greatings Manen123

CM000n · March 14, 2023, 7:28am

It’s all on github
homeassistant/rounded.yaml at main · CM000n/homeassistant · GitHub

Greetings

pedroperez · March 14, 2023, 12:29pm

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

BoraSchninsky · March 14, 2023, 3:34pm

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

acesyde · March 14, 2023, 4:25pm

Not yet available, development is in progress

robbert.langeraar · March 15, 2023, 1:38pm

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?

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)

SamDT92 · March 15, 2023, 4:26pm

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

Manen123 · March 15, 2023, 7:21pm

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

Manen123 · March 15, 2023, 7:26pm

Herr is the Code for the first room