Change the background color of a web page with a variable resistor
Contents
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.
Materials
- Variable resistors (potentiometers)
- obniz Board
- Mobile batteries, etc.
- Smart Phone or PC
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.
Software
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.