Change the background color of a web page with a variable resistor

Make things

You can change the background color of the web page according to the angle of the knob of the variable resistor connected to obniz.


How to make

Hardware connection

Using the variable resistor parts library as a reference, connect it to the obniz Board as shown below.

obniz Variable resistors (potentiometers)
0 pin0
1 pin1
2 pin2

It doesn’t matter which direction you put pin0 and pin2.


To change the background color of the page, specify the color in the background-color property of CSS.

There are various ways to specify colors, but here we use HSL method to define the colors.
In this case, the value obtained from the variable resistor is put in the Hue (H).

$('body').css('background-color','hsl(' +hue+ ',100%,70%)');

Since the hue is specified by angle, use the Math.floor() function to convert the value of the variable resistor (0.0 to 1.0) to an integer from 0 to 359.

let hue = Math.floor(359 * position);

By changing the way colors are defined and the parts that make them variable, you can change the way the colors on a web page change, so please refer to the linked pages and try various ways to change them.