Hometechnica Community

Hometechnica Community is a community of amazing homies

Log in to customize your experience and get involved.

Create new account Log in
loading...
Cover image for HomeSmartHome - UI Improvements And Hosting

HomeSmartHome - UI Improvements And Hosting

Lars Richter
I'm a software developer located in Hamburg, Germany. I started my home automation / smart home journey in July 2020. I use Apple Homekit, homee and mostly IKEA smart bulbs.
・2 min read

It's time for a little update. After working mostly on backend refactorings and optimizations, I finally found time to improve the UI as well. It's still far from being beautiful, but I think the general user experience is better now.

But there is more important news...

I shipped it! 🚢

I really did! Isn't it awesome? 🎉 Some of you might look like this right now:

What? - gif

You are right. It's just a personal project, that cannot even be hosted in the cloud somewhere (because it needs access to the IKEA gateway). So why am I so happy? And was does "I shipped it" even mean?

My Hosting: A Raspberry Pi

Yes, you heard me. I'm excited to have my stuff running on a Raspberry Pi. Let me explain that.

I do have a Pi up and running in my house already. It works as a simple CUPS server to turn my old USB printer into a WiFi printer. So installing and running a headless Pi is not a super big deal.

BUT this time it runs my code. And it's not some Python code I copied from StackOverflow or some blog. It's my .NET 5 (C#) code on the one hand and the Vue.js frontend on the other. And not just that. Here's what I did:

  • installed the basic Raspberry Pi OS
  • installed the .NET runtime
  • copied my .NET app to the PI
  • configured my .NET app as a service
  • installed nginx to make the .NET app and the UI available to the network in a simple way
  • copied my Vue3 app to the Pi
  • configured nginx to serve the UI on port 80 and the backend on port 5000
  • configured everything to automatically start after a reboot

I know it's not rocket science. A lot of people do the same (or more complicated) stuff on their Pis every day. But I never did that before. And it worked. And that feels good. 😄 Now, I can just go to http://homesmarthome/ on my smartphone and use my app to turn our lights on and off.

And while you might still look like Tom Cruise on the GIF above, I still look like this:

Carlton dancing

The UI improvements

This is how the controls look like at the moment.

The new look-and-feel of my UI

Just for comparison, this is how it looked before:

The old UI

As I said, it's not a brand new look, but at least it is an improvement. To make changing the brightness more intuitive, I removed the "Darker" and "Brighter" buttons and replaced them with a simple range slider. Additionally, I render the current brightness (in percent) next to the slider. I also replaced the "On/Off" text on the button with a FontAwesome icon.

Discussion (0)