[SHOWCASE] Raspberry PI docker dashboard

[henkiewie]

Title

Raspberry PI docker dashboard

Screenshot

Would you like your name/ username included?

Yes

Link to your Website/ Profile/ Twitter (optional)

No response

Description (Optional)

I use this dashboard every day. It now even includes a player for a radio stream which I configured with Logitech media server and icecast. I made an smaller version of the grafana dashboard to fit an iframe in kiosk mode, so it monitors the most important values of my RPI. The PI is in Argon m2 case and used as a NAS. The dashboard is a copy of the adventure theme with some changes saved in /app/src/styles/user-defined-themes.scss

[liss-bot]

The fix for this issue has now been released in 2.0.8 ✨

If you haven't done so already, please update your instance to 2.0.8 or later. See 2.0.8 for full info.

Feel free to reach out if you need any more support. If you are enjoying Dashy, consider supporting the project.

[WarlockFish]

your‘s dashboard is beautiful ，Can you share your configuration？ @henkiewie

[henkiewie]

My config is inside a docker container. The most important is I followed the instruction to make my own theme.

// Custom Colors for Newone html[data-theme="newone"] { // Main colors --primary: #87c2d9; --background: #03586e; --background-darker: #05070e35; // Typography --font-headings: 'Roboto', serif; --font-body: 'Roboto', serif; // Items --item-background: #181c3a80; --item-background-hover: #181c3a99; --item-shadow: 1px 1px 2px #130f23; --item-hover-shadow: 2px 2px 4px #130f23; // Sections --item-group-heading-text-color: var(--white); --item-group-heading-text-color-hover: var(--primary); --item-group-shadow: none; --item-group-background: none; --item-group-outer-background: none; // Background Image body { background: url('https://dashy.rpi-lite.lan/item-icons/icons/background.jpg'); background-size: cover; } // Remove background from certain components div.home, div.options-outer, div.options-container, section.filter-container, section.settings-outer, div.show-hide-container.hide-btn, div.show-hide-container.show-btn { background: none; } // Style overides label.lbl-toggle h3 { font-size: 1.3rem; font-weight: bold; } .content-inner { border-top: 1px dashed var(--primary); } a.item.size-large:hover { border-left: 3px solid var(--white); } .item.size-large .tile-title p.description { height: 3rem; } .is-collapsed { background: var(--item-background); box-shadow: var(--item-shadow); &:hover { background: var(--item-background-hover); box-shadow: var(--item-hover-shadow); } } }
The adventure theme is in the github repo.
The background image is a local file. Don't remember where I found it. The grafana dashboard code looks like this;
`sections:

• name: Grafana dashboard 3 hours
  icon: hl-grafana
  widgets:
  • type: iframe
    useProxy: false
    timeout: 8000
    options:
    url: >-
    https://grafana.rpi-lite.lan/d/Ss3q6hSZk001/docker-and-os-metrics-for-raspberry-pi-16-april2022?orgId=1&refresh=30s&kiosk
    frameHeight: 400
    id: 0_2332_iframe
    displayData:
    sortBy: default
    rows: 1
    cols: 4
    collapsed: false
    hideForGuests: false`

Hope you can work with this 😄

[WarlockFish]

My config is inside a docker container. The most important is I followed the instruction to make my own theme.

// Custom Colors for Newone html[data-theme="newone"] { // Main colors --primary: #87c2d9; --background: #03586e; --background-darker: #05070e35; // Typography --font-headings: 'Roboto', serif; --font-body: 'Roboto', serif; // Items --item-background: #181c3a80; --item-background-hover: #181c3a99; --item-shadow: 1px 1px 2px #130f23; --item-hover-shadow: 2px 2px 4px #130f23; // Sections --item-group-heading-text-color: var(--white); --item-group-heading-text-color-hover: var(--primary); --item-group-shadow: none; --item-group-background: none; --item-group-outer-background: none; // Background Image body { background: url('https://dashy.rpi-lite.lan/item-icons/icons/background.jpg'); background-size: cover; } // Remove background from certain components div.home, div.options-outer, div.options-container, section.filter-container, section.settings-outer, div.show-hide-container.hide-btn, div.show-hide-container.show-btn { background: none; } // Style overides label.lbl-toggle h3 { font-size: 1.3rem; font-weight: bold; } .content-inner { border-top: 1px dashed var(--primary); } a.item.size-large:hover { border-left: 3px solid var(--white); } .item.size-large .tile-title p.description { height: 3rem; } .is-collapsed { background: var(--item-background); box-shadow: var(--item-shadow); &:hover { background: var(--item-background-hover); box-shadow: var(--item-hover-shadow); } } } The adventure theme is in the github repo. The background image is a local file. Don't remember where I found it. The grafana dashboard code looks like this; `sections:

* name: Grafana dashboard 3 hours
  icon: hl-grafana
  widgets:
  
  * type: iframe
    useProxy: false
    timeout: 8000
    options:
    url: >-
    [grafana.rpi-lite.lan/d/Ss3q6hSZk001/docker-and-os-metrics-for-raspberry-pi-16-april2022?orgId=1&refresh=30s&kiosk](https://grafana.rpi-lite.lan/d/Ss3q6hSZk001/docker-and-os-metrics-for-raspberry-pi-16-april2022?orgId=1&refresh=30s&kiosk)
    frameHeight: 400
    id: 0_2332_iframe
    displayData:
    sortBy: default
    rows: 1
    cols: 4
    collapsed: false
    hideForGuests: false`

Hope you can work with this smile

thank you