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:
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:
The UI improvements
This is how the controls look like at the moment.
Just for comparison, this is how it looked before:
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)