šŸŸ£ Rounded - Dashboard guide

Share your Projects! Dashboards & Frontend
185

I can upload my templates into my github. Maybe it needs a little bit polish and documentation for make it more reliable and multilingual.

2 Likes
186

That would be awesome!
I can polish it myself and the language ainā€™t a problem (we learn German at school in Holland :wink:)

187

Here you are: homeassistant/rounded at main Ā· panhans/homeassistant Ā· GitHub

If you have questions simply ask. Maybe it needs a little bit of documentation. :wink:

//Edit: I did some updates for language support. Just create your own language yaml in template directory and switch the template of the base.yaml

Here are some examples:

- type: 'custom:button-card'
  template: pill
  entity: sensor.processor_use
  label: "%"

- type: custom:button-card
  template:
  - sensor
  - background_color
  variables:
    background_color: green # delete variable if you want random color
  name: SSD
  entity: sensor.disk_use_percent

- type: 'custom:button-card'
  template: caption
  name: Caption
  label: Label

- type: 'custom:button-card'
  template:
  - sensor
  - background_color
  - extra_status
  entity: sensor.one_sensor
  variables:
    extra_status: sensor.another_sensor

 - type: 'custom:button-card'
   name: Script name
   template:
   - button_script
   - background_color
   entity: script.your_script

- type: 'custom:button-card'
  template: input_number
  entity: input_number.your_input_number

- type: 'custom:button-card'
  template: 
  - sensor
  - background_color
  variables:
    background_color: green
  entity: input_datetime.your_input_date_time

- type: 'custom:button-card'
  entity: calendar.your_calendar
  template: calendar

- type: 'custom:button-card'
  template: person
  entity: person.any_person

- type: 'custom:button-card'
  entity: alarm_control_panel.your_alarm_entity
  template: alarm
  name: House alarm

- type: custom:button-card
  template:
  - sensor
  - background_color
  entity: sensor.roborock_vacuum_last_clean_end
  name: Ende der letzten Reinigung
  variables: 
    force_date: true #activate if status is date but entity has no attribute for e.g. has_time
8 Likes
188

How did you get that rounded look on the green bar graph?

189

Thatā€™s apex chart card.

Here is an example:

  - type: custom:apexcharts-card
    card_mod:
      style: |
        ha-card {
          background-color: transparent !important;
          border-radius: 0px;
          padding: 0px !important;
          margin: 0px !important;
        }
    header:
      show: false
      title: Stromverbrauch / 24h
    apex_config:
      plotOptions:
        bar:
          borderRadius: 5
          borderRadiusApplication: "around"
      chart:
        height: 98px
        fontFamily: Quicksand
        parentHeightOffset: 20px
      yaxis:
        forceNiceScale: true
        reversed: false
        opposite: true
      dataLabels:
        background: false
        offsetY: -10
        style:
          colors:
          - 'var(--contrast20)'
    graph_span: 24h
    update_interval: 60sec
    layout: minimal
    span:
      end: hour
    all_series_config:
      type: column
      curve: smooth
      show:
        datalabels: false
    series:
      - entity: sensor.hauszahler
        unit: Wh
        name: Stromverbrauch
        transform: "return x / 2;"
        color: "var(--green)"
        group_by:
          duration: 2h
          func: avg
2 Likes
190

I tried to make an ā€œAndroid 13 Pixel-likeā€ dashboard based on this project :sweat_smile:

(Edit: dashboard a little improved)

InCollage_20230612_145356242
InCollage_20230612_1453562421920Ɨ1079 130 KB

GitHub

13 Likes
191

Nice! Thank you for sharing your hard work.
Can you post an example of the room template?
It looks like it needs a lot of templating in the entity section

192

Beautiful! do you have a github?

193

Unfortunately not at the moment :sweat_smile:
Are you interested in the code of something in particular?

1 Like
194

Sure, for now its only one button that shows 4 states with activated backlight:

- type: 'custom:button-card'
  template: room
  variables:
    icon: mdi:sofa-single
    # entity_1_icon: mdi:thermometer
    entity_1_value: "[[[ return states['sensor.wohnzimmer_temperatur'].state+'Ā°C ' + states['sensor.wohnzimmer_luftfeuchtigkeit'].state + '%'; ]]]"
    entity_1_on: true
    entity_2_icon: mdi:lightbulb
    entity_2_on: "[[[ return states['light.wohnzimmer_kuechenlichter'].state == 'on'; ]]]"
    entity_3_icon: mdi:thermostat
    entity_3_on: "[[[ return states['climate.wohnzimmer_thermostat'].state == 'heat'; ]]]"
    entity_4_icon: mdi:speaker
    entity_4_on: "[[[ return states['media_player.fernseher'].state != 'off' || states['media_player.nestmini_kueche'].state == 'playing'; ]]]"
195

I have a Pixel phone so I really like your design! But if youā€™re not doing a github dw bud, I like the split design and the room cards/graph cards in the room. :+1:

1 Like
196

Iā€™ll put it on GitHub soon, Iā€™ll let you know :blush:

2 Likes
197

italians do it better!

1 Like
198

Thanks for the example!!!

199

Awesome! :+1:

200

Hi,

Iā€™m not sure were I should place the templats to be able using them with the cards.

Thanks

201

github added

3 Likes
202

Great Work! And thanks for sharing. I was wondering how you did the ā€œAnimaliā€ screen with buttons bigger than others. Would you mind sharing the yaml for the Shenron panel?

1 Like
203

Thatā€™s my reptile :grin:
Git updated, you will find the whole panel inside cards folder in shenron.yaml, just the buttons in tiles.yaml or just the title in horizontal_badge.yaml.

Btw, I got the tiles code from the ā€œSpeaker control cardsā€ section of Leonā€™s project.

204

Thank you so much!

1 Like