Hometechnica Community

Cover image for HomeSmartHome - UI Improvements And Hosting
Lars Richter
Lars Richter

Posted on

HomeSmartHome - UI Improvements And Hosting

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)