Control Virtual Lamp

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

Arduino Nano with potentiometer and button, board view
The diagram is exact as the example in the class

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.


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.

Button OFF state
Button ON state with full intensity
Button ON state with dim light