šŸŸ£ Rounded - Dashboard guide

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

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

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

(Edit: dashboard a little improved)

GitHub

13 Likes

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

Beautiful! do you have a github?

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

1 Like

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'; ]]]"

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

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

2 Likes

italians do it better!

1 Like

Thanks for the example!!!

Awesome! :+1:

Hi,

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

Thanks

github added

3 Likes

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

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.

Thank you so much!

1 Like

I have the exact same issue here, anyone find a solution?

5 Likes

Sorry in advance for the lamer question.
Iā€™ve only used the standard lovelace interface so far. Tell me step by step where to copy the template, base folders? Where should all these templates and folders be?
I created rounded.yaml file in /config/themes folder
now i have the desired theme in the list. But I donā€™t know where to go next. How to add cards, how to add entities. Help to understand please.

@Maikl_Sh If you want to do it in gui, you have to add the templates via the raw editor (3 dots top right ā†’ raw editor). Like this

You then add a card in the gui as follows

1 Like