Using WPF to Visualize Arduino Photoresistor Signals
There are lots of great links about the physical aspects of connecting photoresistors to Arduino. I referenced the pre-linked Robot Overlord link to learn how to initially connect a photoresistor and encourage it’s consumption as background for where we’ll go next.
My thinking was, I’d like to graph the raw input from a photoresistor using WPF technology and .NET. To begin with, the photo of my connections are below. Again, the link above was my starting point for how to do this; overall the circuit is really simple with one photoresistor connected via a resistor to analog pin 0.
The code the Arduino will be running is also as dirt-simple as we could get. The general idea is, take the raw numeric data obtained from the photoresistor and pass it up the serial connection.
Sitting on the other end of the serial connection is a WPF client application written using C#. Obviously, the first thing worth investigating is the code used to read the input coming from the Arduino. This was somewhat intimidating for me but once I realized that, it’s just a stream that’s open and constantly reading for data, and that data’s just a number in a range, it became rather easy to understand.
More importantly, it was easy to objectify in the class structure below. This is how the WPF application listens for the Arduino’s input. The class’s purpose is to watch the serial port for incoming data and, whenever any is received, to fire an event so that observers can do something with the received data.
The client application is quite simple. It’ll just render on-screen a progress bar. That progress bar will display the percentage value of the input signal. The XAML code for the single window is pretty straightforward. Note that the progress bar is actually being data bound to a custom object. Those will be discussed in a moment.
That view model the window is binding to? It serves a very simple purpose; provide structure to the information the application will need to present. For the most part, that’s just a simple number. However, given the variable nature of the data captured by a photoresistor, the maximum amount could be unpredictable. If someone’s running their Arduino and a light in the room is turned on, for instance, the resulting numeric behavior could be extreme. To that end, the maximum amount is considered variable, and the current property is a calculated result between 0 and 1. All of this is pretty simple, and is represented in the class below.
That dynamic behavior discussed earlier – adjusting the maximum and current values on the fly – is highlighted in the expanded code below.
Finally the code that makes it all work is below. This is the C# code of the window class. Though not optimal – it’s always nice to extract some of this away from the client – it’s eloquent enough to get the point across. The code opens the serial connection, and whenever data is received, an instance of the view’s view model class’s properties are set. The client automatically updates based on these changes, and the progress bar goes up and down.
The result is a logical visualization of the photoresistor’s behavior. You'll notice a lot of behavior and that the level fluctuates a lot at first as the maximum is established and then the behavior matches the light source. I placed my Arduino on a desktop and shined a light on it, then moved my hand between the light and the Arduino and could observe predictable behavior in the WPF application; when my hand was still and in blockage of the light, the level was low. When I moved my hand and allowed full light to shine on the Arduino, the level went way up.
Happy coding!