In my previous project I demonstrated how I set up and tested the Particle Mesh network I created. For this project, I wanted to show how the network concept can be applied to a smart home. Since Elegoo sent me their New 37 in 1 Sensor Kit, I decided to use that as well to monitor the light levels of Christmas lights, along with setting a custom RGB LED color all via web interface.
As with any great project, it all starts with a great plan. My plan was to create 3 identical sets of Xenon circuits by connecting a photoresistor and a common-cathode RGB LED to each Xenon board. Next I would create some kind of webpage that could read the light levels and also set the color of the LED for each board. This webpage would be displayed on a touchscreen connected to a Raspberry Pi, where a user could switch between the webpage and a Google calendar.
I used a 5 inch Raspberry Pi touchscreen from DFRobot as my display.
For the OS, I loaded Raspbian onto an SD card and then booted up the Pi. Then I installed Firefox by using Particle Mesh Network
sudo apt-get install iceweasel and then restarting. I then opened Firefox and went to https://calendar.google.com. After signing in to my Google account, I set the browser to fullscreen mode, mainly to hide the navigation bar at the top.
My previous project https://www.hackster.io/gatoninja236/introduction-to-particle-mesh-7e393d went through the steps of setting up the network. After going through the setup process, I flashed the attached code to each of the Xenons. Four pins are used in the circuit, A0 for the photo-resistor, and A1, A2, and A4 for the LED.
This was the hardest part, as I don't have any formal training, nor have I taken any classes, in web design. I simply began by sketching out how I wanted the webpage to function: 3 large buttons displaying information about each board, and when clicked, they allow the user to change the color of the LED.
CSS allows for the creation of modal displays, which function like a dialog box that sits on top of the window, and can disappear when closed. I used range sliders for each of the three colors (R, G, B), that when changed, display a preview in a box. Then the user can send that color to the chosen Xenon by clicking a button.
In order to get the light values to update regularly, I used the setInterval function that calls another function to get the values for each Xenon's cloud variable named "light_level". The color for the LED is sent as a string in the "RRRGGGBBB" format. Video