Manage Yeelight Lamps with Blazor and ASP.NET Core
For some time had the idea to create my home dashboard, so I could manage my devices including those two lamps I have in my home. But I always kept this idea for the future mostly because I love to make beautiful UI’s and currently to have a nice experience you need something like angular, react or a lot of javascript that I do not enjoy it very much.
So if you go single page app route, you also have to create a web API, so it can be consumed from the Admin Panel. This has you can see is getting rapidly a lot of tedious and long work.
But now Blazor has come to the rescue us, thanks to its server-side rendering engine which allow for a single page experience thanks to its web socket communication the user doesn’t notice changes are rendered from the web server. Even for us developer the development model look similar in fact you can easily switch from server-side rendering to web assembly (but you can’t use server libraries like EF Core or any other DB connector).
Thanks to the server side rendering I can use libraries like YeelightAPI to discover and turn on and off my home lights.
This how the panel looks like
The panel currently is very simple and do on/off and rename the device.
The code isn’t pretty but for our testing purpose, it will do the job. Let’s look at how devices are discovered.
You can easily that inside my Index.cshtml I directly call DeviceLocator.Discover() inside OnInitAsync() and I then loop through them to display them as cards, I had to separate the rendering of each light on a Blazor Component so I could manage the device and it states easily.
The code to toggle the lamp on/off is on the ToggleOnOff and with a few utility methods to reconnect to the device and check device status, all of this done using existing libraries with the skills I already know from more than 15 years of C#.
In fact, this little UI was developed in less than two hours, on which probably more than 30 minutes wasted because I could connect to my yeelight devices!!
I then discovered that you need to enable lan discoverability from the Yeelight Mobile App as follow.
Select the device you want to be discoverable, then when this screen opens click the button on the bottom right.
Now select the button Lan Control in the bottom.
Ok now you are good, and you can continue playing with your devices using Blazor and asp.net core :)
Here is my example project on github
