Show off your favourite dashboard creations!

Paperless-NG is running in docker, I got the information via the official REST-API:
The REST API — Paperless-ng 1.5.0 documentation

  - scan_interval: 60 
    resource: <ip:port>/api/tags/?format=json&name__iexact=Posteingang
    username: xxx
    password: xxx
    authentication: basic
    sensor:
      - name: paperless_inbox
        value_template: "{{value_json['results'][0].document_count}}"

@pedolsky

Pollen and Garbage are custom:button-cards. The fuel prices are normal sensor cards and the table is a custom:flex-table-card.

Here’s the garbage as an example:

type: custom:button-card
entity: sensor.waste_gelbe_sacke
layout: icon_name_state2nd
styles:
  card:
    - font-size: 10px
  name:
    - font-weight: bold
    - font-size: 13px
    - padding-right: 13px
  label:
    - padding-right: 13px
    - font-size: 11px
show_label: true
label: |
  [[[
    var days_to = entity.state.split("|")[1]
    if (days_to == 0)
    { return "Heute" }
    else if (days_to == 1)
    { return "Morgen" }
    else
    { return "in " + days_to + " Tagen" }
  ]]]
show_name: true
name: Gelbe Säcke
state:
  - color: '#FDD835'
    operator: template
    value: '[[[ return entity.state.split("|")[0] == "Gelbe Säcke" ]]]'
    icon: mdi:recycle

I am trying really hard to fit as much stuff in as much little space as possible… these are a few of my dashboard views:

Main Dashboard - Home View:

Main Dashboard - Office View:

Main Dashboard - Kids Bedroom View:

When on mobile the 3 columns are stacked so there is a bit of scrolling but most controls are towards the top anyway to avoid having to scroll too much on mobile.

For mobile navigation, I have a hidden menu that has all the views of the dashboard shown as buttons so I can easily switch between views without having to use the silly icons up top (try scrolling them sideways to get to a room… ugh!). If you look at a room dashboard, the home icon takes you to the home screen of that dashboard (I have 4 dashboards with many views… 50 or so) and the icon right next to it takes you to the mobile friendly ‘menu’

Mobile friendly menu (not for desktop really, but it obviously works):

This ‘menu’ mimics the views shown on the top bar, and the navigation buttons on the main dashboard screen (top left).

Screenshots on my mobile of the same views:
Main Dashboard - Home View:

Main Dashboard - Office View:

Hidden Mobile Menu Subview:

4 Likes

As a complete newbie I’m really loving the @benm7 setup.
Mind to share your complete config for this?
Would be greatly appreciated :grinning_face_with_smiling_eyes:

Can you post your code? Trying to do something submit

@efaden What part would you like? Sharing it all may not be feasible and hard to extrapolate what you want anyway.

Nothing fancy, still working on IT.



(upload://1CXIdTgiCNGweWYtZvLDEwWC9lE.jpeg)

1 Like

What card did you use as room card? Would you please share the code?

Here is mine. One single page design with 20 pages accessible via browser mode.










2 Likes

I followed your setup. Have you updated it on your github?

Updated what exactly ?

I setup mine using your five parts guide.
And you’re made some great upgrades as i Can see on those pics. Si si your github updated with thos updated?
Thanks again

Wow. Would you mind sharing some pictures from your dashboard ? I am curious about it.




Well done mate. These look wonderful. I loved them. Especially I liked the way you used the music icon.

I haven’t updated my github yet, maybe I will do it later. I will keep you posted as soon as update.

Thank you very much.

2 Likes

Thanks to you. Great inspiration

1 Like

Sure, here you go:

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:layout-card
    layout_type: grid-layout
    layout:
      grid-template-columns: 36% auto 8% 8% 8% 12% 12% 14%
      margin: 0
    cards:
      - color: teal
        type: tile
        entity: sensor.dect440_arbeitszimmer_temperature
        icon: mdi:desk-lamp
        name: Arbeitszimmer
        icon_tap_action:
          action: more-info
        card_mod:
          style: |
            ha-card {box-shadow: none !important; padding-top: 8}
      - type: button
        icon: none
        card_mod:
          style: |
            ha-card {box-shadow: none !important}
      - type: button
        icon: mdi:monitor
        entity: light.arbeitszimmer_monitor_rgb
        show_name: false
        icon_height: 24px
        card_mod:
          style: |
            ha-card {box-shadow: none !important}
      - type: button
        card_mod:
          style: |
            ha-card {box-shadow: none !important}
        icon: mdi:white-balance-sunny
        show_name: false
        icon_height: 24px
        tap_action:
          action: call-service
          service: scene.turn_on
          data: {}
          target:
            entity_id: scene.arbeitszimmer_arbeiten
      - type: button
        tap_action:
          action: call-service
          service: scene.turn_on
          data: {}
          target:
            entity_id: scene.arbeitszimmer_warm
        entity: light.bucherregal
        icon: mdi:lightbulb
        hold_action:
          action: call-service
          service: scene.turn_on
          data: {}
          target:
            entity_id: scene.arbeitszimmer_aus
        card_mod:
          style: |
            ha-card {box-shadow: none !important}
        show_name: false
        icon_height: 24px
      - type: button
        entity: sensor.dect440_arbeitszimmer_humidity
        icon_height: 18px
        show_state: true
        show_name: false
        card_mod:
          style: |
            ha-card {box-shadow: none !important;
                      --paper-item-icon-color:
                        {% if ((states.sensor.dect440_arbeitszimmer_humidity.state | int) > 70) %}
                          #C70039
                        {% elif ((states.sensor.dect440_arbeitszimmer_humidity.state | int) > 60) %}
                          #FFC300
                        {% else %}
                          #83949f
                        {% endif %} ;
            }
            span {font-size: .7em !important; margin: 5px 0 0 0 !important;
            padding: 0 !important }
      - type: button
        entity: sensor.arbeitszimmer_air_quality
        icon_height: 18px
        show_state: true
        show_name: false
        card_mod:
          style: |
            ha-card {box-shadow: none !important;
                      --paper-item-icon-color:
                        {% if ((states.sensor.arbeitszimmer_air_quality.state | int) > 250) %}
                          #C70039
                        {% elif ((states.sensor.arbeitszimmer_air_quality.state | int) > 150) %}
                          #FFC300
                        {% else %}
                          #83949f
                        {% endif %} ;
            }
            span {font-size: .7em !important; margin: 5px 0 0 0 !important;
            padding: 0 !important }
      - type: custom:flex-horseshoe-card
        card_mod:
          style: |
            ha-card {box-shadow: none !important; padding-top: 7px !important}
        entities:
          - entity: sensor.dect200_arbeitszimmer_power_consumption
            name: W
            unit: ' '
            decimals: 0
        show:
          horseshoe_style: colorstopgradient
        layout:
          states:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 60
              styles:
                - font-size: 5em;
          names:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 95
              styles:
                - font-size: 3.5em;
        horseshoe_scale:
          min: 0
          max: 350
          width: 20
        horseshoe_state:
          width: 20
        color_stops:
          '100': '#009688'
          '125': '#009688'
          '175': '#FFC300'
          '225': '#FF5733'
          '250': '#C70039'
          '300': '#900C3F'

Hi yravoul,
I love your dashboard colors and layout. But I’m struggling to get your Arbeitszimmer layout in my dashboard working. The code above, does it really match to your very first screen shot?
I have problems to get the temperature color to teal and there is still a vertical gap between the word “Arbeitszimmer” and the row starting with the temperature. Can you share your code again?

Hi @hiddevanbrussel, love the Google Weather Frog card, how did you achieve this?