Homelab Dashboard by Homelab Rat

May 20, 2020 Brian Marshall Dashboards

I’ve done a lot of blogging about building your own homelab dashboard. I’ve shown how to configure amazing tools like Organizr and Grafana. But, at the end of the day, Organizr is just too much for what I want and need. I started off with a version of a dashboard built original by Gabeisonfire over at /r/homelab. I heavily modified his version and had screenshots of this on my original introduction to homelab dashboards.

Flash forward quite a while and I’ve built my own…kind of. This is built using an existing Bootstrap dashboard name SB Admin 2. This is an HTML/CSS dashboard built on top of Bootstrap 4. I took this and basically re-built it using PHP to provide an easy interface for adding items to the menu and settings for the entire site. I also integrated Yahoo Weather (since Dark Sky is going to discontinue API support at the end of 2021 following their acquisition by Apple).

Built Using

PHP

I’ve chosen to build this in PHP. Why? Because that’s my comfort level from when I did web development a long, long time ago. It’s also still pretty popular given that more than half the internet seems to run Word Press, which is also based on PHP. So while there may be newer or cooler languages, I was able to get this going pretty quick using PHP.

SB Admin 2

As I previously mentioned, this is project is based largely on SB Admin 2, which is available under the MIT license. I liked the look and feel, so I changed the colors and built in image functionality on the sidebar.

Bootstrap

Bootstrap is the most popular front-end framework on the web. I really liked it, which is why I went in search of Bootstrap-based dashboards when I started this project. It certainly makes web development for people like me (not a web developer) able to make things look pretty.

jQuery

Along with Bootstrap, jQuery is heavily used to perform a variety of AJAX related functionality. jQuery takes all of the hard work out of doing things on a website without having to ever really change pages.

Tabulator

I originally used Tabulator a few years ago when I built my original dashboard. I really like this tool and have become quite comfortable with it. This is available under the MIT license.

Functionality

Let me be clear: I’m not trying to compete with or replace Organizr. I am a huge fan of that tool. But…for me it was just too much. I don’t really need integration with a bunch of apps, I am really more interested in a very simple homelab dashboard to stop using bookmarks in my browser while having a neat place to go see everything in one place.

Site Settings

I have made a variety of settings available that change the overall look and feel of the dashboard:

Site Title (which shows up at the top of the navigation bar)
Site Logo (which also shows up at the top of the navigation bar)
Site Icon (which shows up in your browser tab)
Weather Enabled (let’s you turn weather on and off)
Weather Location (determines what weather to grab)
Days Forecast (determines how far out your forecast for weather goes)
Time Format (12 hour or 24 hour)
iFrame URL (for the iFrame on the initial dashboard)

Navigation

This is where all of the action happens! I’ve built out the navigation bar to allow for new-tab links as well as iFrame links. You can build the entire navigation bar from the interface that has the following settings:

Name (which will be displayed)
URL (if there is one, this is where it will link)
Image (which will be displayed if present)
Icon (which will be displayed if not image is present)
iFrame (determines if the link should be opened in the dashboard directly or in a new tab)
Divider (displays a nice divider line)
Heading (displays just the name as a heading)
Collapsed (opens a list of items)
Collapse Header (a header item for a collapsed list of items)
Collapse Item (the actual items under the collapsed list)

Weather

I always liked having the weather on my homelab dashboard. Dark Sky was my go to for this, but they are shutting down the API at the end of 2021. As a result, I decided to go a different path. I tried a few API’s, but the Yahoo Weather API has been rebuilt and had everything I wanted. It is also somewhat well documented. You can enable and disable weather features. There are two components: Current Weather and Weather Forecast.

Current weather shows the location, temperature, humidity, wind, and current conditions (e.g. rain). The weather forecast shows high temperature, low temperature, and expected conditions. You can also select how far out the forecast goes (from 3 days to 9 days). I did this because on my old-school tablet, 4 days will fit, while on my desktop 8 days will. So this way you can change it to fit your devices.

Pretty Pictures

Let’s be honest…the only reason you are here is for the pretty pictures anyway:

The dashboard with weather enabled and my Grafana service status in the iframe: