Temperature Visualization: Electronics Prototype

Irene Ye Yuan
All About Prototyping
3 min readAug 3, 2015

Designed and built the temperature visualization in Processing to work with the Arduino temperature sensor.

DESIGN

For this prototype, I decided to create a Processing visualization for the Arduino Thermometer sensor. The program on the Arduino side will just be the one similar to the exercise we did on last Friday’s class, which outputs the current temperature to the serial monitor. The program on the processing side will take the current temperature from Arduino, combine with the current system time, and the unit user sets, to visualize both the current temperature and the temperatures over the last one minute. User will be able to switch between Celsius, Fahrenheit and Kelvin (just for fun). I have considered use button for control the temperature reader, or the photoresistor (maybe only read temperature under a certain lighting condition). I tried, but those didn’t seem to work well with the general idea. I also thought about adding an LED to indicate the reader was working, but the voltage wasn’t quite right for the sensor after adding LED, so I just kept the basic design for Arduino.

PROCESS

I started my implementation by following the exercise example code in Processing, as well as using the exercise example code in Arduino with the default unit to Celsius, which was just easier for me to debug.

After having the basic function working in both Arduino and Processing, I first tried to just display all the information I wanted to show in Processing, include current time, current temperature, current measuring unit, and temperatures collected over the past minute. After having all the information display correctly, I formatted those, to make them look clean with adding information of maximum and minimum temperature on the screen. I have also considered using line graphs instead of dots, but as I tried in code, it was just not working well in the visualization in general. The following screenshots show what the final visualization looks like with different units in Processing.

Processing Visualization Code

REFLECTION

I used to like plan ahead have all the position written down on paper and then implement all the things in code and adjust. But this time I tried to plan the visual display with direct coding with little specification written ahead. And really processing is about sketching with code. I started planning the visual display by drawing rectangles and text just to get the positioning right, and then color, and finally adding a little bit motion, adjusting details. I tried my ideas with Arduino, and as soon as I tried, I realized that some ideas (like adding the LED) were not going to work (or it might work, but I just didn’t find much helpful information to make it work). I would say one thing about Arduino and Processing is they are both good for testing design ideas quickly. I could add more digital-like color to the visualization, and make the over-time graph better like by filling the area under the curve, or having a heat-map like visualization. I would like to try other options if I have more time.

--

--

Irene Ye Yuan
All About Prototyping

HCI Researcher & Technologist, PhD Candidate @ GroupLens, University of Minnesota