WebComponents - Led panel

Pulse Width Modulation Simulation

Page Background Dark Light

Requires a Web-Components enabled browser

This page intends to show how Pulse Width Modulation (aka PWM) works.
PWM is this technique used to simulate analog output on a digital device. For example, the GPIO pins of the Raspberry PI are all digital. They only can be on (3V3) or off (0V). If a Light Emitting Diode (led) is hooked on such a pin, it can only be on or off, with no value in between (nothing like "half-on")...
We need a way to make it look like it.

An idea:

A human eye cannot distinguish images appearing for less than one 10^th of a second (this is how movies used to work, back is the days when they where using films). The idea here is to make the led blink.

If on a given period of time (called the cycle), the led is on 50% of the time and off 50% of the time, it will result in an illumination of 50% of the maximum light.
If it is on 25% of the time and off 75% of the time, it will result in an illumination of 25% of the maximum light.
etc...

So, if the cycle is short enough (less than one 10^th of a second), a human eye does not see the led blinking, it only "feels" it has been dimmed.
This is what's called PWM.
More details and images available here.

Warning: This simulation does not work as well as on a Raspberry PI, where the only thing the GPIO pins have to do is their job. On a laptop or desktop, the Graphical Environment has much more things to deal with than just a pin to turn on or off, and the actual rendering is - by far - not as good as on a Raspberry PI with real leds, it may flicker; but it can give you an idea.

To make it work:
Choose a frequency (first slider). A frequency of 50 or 60 Hz is realistic. 60 Hertz (Hz) means 60 cycles per second.
Choose a PWM percentage. 50% - for example would mean that you expect the led to glow at 50% of its full potential.
With the Rendering field, you can possibly slow down the blinking cycle. A value of 1 is supposed to look like the reality (see the warning above).
A value greater than 1 (like 10, which would mean "10 times slower"), would allow you to "see" the led blink.

Led panel
				Turn each led on or off
				For each led, start or stop the pulse, with the values represented by the sliders at start.
- %	- %	- %	- %	For each led, PWM value used when pulsing
Frequence			Freq 60 Hz	For each led, PWM frequency to use for the pulse
Percent			PWM 50%	For each led, PWM pulse value to use for the pulse
Rendering speed 1 /				For each led, slow-motion factor to use when displaying the pulse. The bigger the slower.

Oliv did it