,

Making A Web Dashboard

I have 2 screens in my setup: A monitor and my laptop. I’m very lucky to have both, and having them both helps. So far I’ve used many different setups:

  • Unity on my main screen and my code on the laptop.
  • Unity Scene View on my laptop and the rest on my monitor.
  • A web browser on my laptop and code on the right.

These are all great setups, but there were times when I wanted to have more than one thing on my laptop at a time. Enter: my web dashboard.

As you can see, it’s a grid of widgets that I like to have surfaced all the time. I have a search box, date and time, funny weather, persistent notes, an audio visualiser and a taskbar that opens apps in one place!

The idea was just to have everything I’d like to see in one place. I planned out the layout and set that out first, and then filled each box.

How I Made It – The Basics

The dashboard was made with HTML, CSS, and Javascript. These are used to make websites (like this one!), but I wanted them to be in app form. I used a framework called Electron that made it into a Windows app. I did this not only because it’s nicer in app form but also because apps have more permissions. For example, web pages can’t open apps: only apps can. That means the taskbar only works when I run it as an app with electron.

Along with HTML, I also used CSS (to style it and lay it out) and Javascript (to add functionality). To make the layout, I used CSS grids, which allow you to make custom grids with boxes in any size you want – exactly what I needed for my design. I used JavaScript to control what appears in the boxes. Everything in the boxes is controlled by Javascript functions – for example a timekeeping one, one that tracks what you put in the note box, and one to animate the visualiser.

Conclusion

I found that coding my own dashboard was a rewarding experience and got me exactly what I wanted – much closer than just splitscreening apps or downloading software could have got me. I think that making utilities you’d like to have yourself is a really good way of learning new skills. You can have software built to your exact specifications. And that’s the beauty of being able to code your own apps or games. You can make things that you want to exist but don’t yet, and share them with the world, while learning at the same time. It’s a win-win!