[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]

Welcome to Dashy 👋
It's great to have you here, but unfortunately your ticket has been closed to prevent spam. Before reopening this issue, please ensure the following criteria are met.

Issues are sometimes closed when users:

• Have only recently joined GitHub
• Have not yet stared this repository
• Have not previously interacted with the repo

Before you reopen this issue, please also ensure that:

• You have checked that a similar issue does not already exist
• You have checked the documentation for an existing solution
• You have completed the relevant sections in the Issue template

Once you have verified the above standards are met, you may reopen this issue. Sorry for any inconvenience caused, I'm just a bot, and sometimes make mistakes 🤖

[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