Control Virtual Lamp

February 22, 2021

I used Arduino inputs to control the switch and intensity of a virtual lamp on the browser. Check out the DEMO below. Source code in Github.

‍

Arduino Side

The diagram is exact as the example in the class

Circuit-wise

Since I only have potentiometer and pushbuttons in my bin, I decided to make a virtual lamp that was tangibly controlled. So the diagram is the same as that of what Tom showed in the class.

Code-wise

Please install Arduino_JSON library before use. I sent data to the computer when either the button or the potentiometer changed its value.

‍

Browser Side

I use two images to mimic the lighting effect by changing their opacity in CSS. When data is received from Arduino, the javascript code will firstly react based on the button state. Only if the button is ON will the light intensity be applied to the lamp.