Arduino + Processing: Make a Radar Screen to Visualise Sensor Data from SRF-05 – Part 2: Visualising the Data

Arduino + Processing Make a Radar Screen to Visualise Sensor Data

This is where all the work is done to read an interpret the values from the servo and the sensor. If the readings are to erratic then you won’t have nice shapes. Also if you don’t allow enough time to the signals to be sent back then you’ll get false distance readings. So this code is only as good as your Arduino code and sensor setup.

Took me a few evenings to work this out to get it how I wanted, the hardest bit is the trigonometry involved which isn’t that difficult, everything else is done by loops and a few IF statements. I use the FOR loops alot because the all the elements can be displayed programmatically without having to write each rectangle, cirle and line to the screen with their own statement.

If you’re not familiar with Processing then head over to Processing is a tool/ IDE that lets you program and code graphics and animation, it’s free to use and pretty powerful – best part is it works hand in hand with Arduino in the same C/C++ style of code, letting us take data from Arduino and whatever’s plugged into it and then visualise it on screen, e.g. like a radar screen.

Arduino + Processing Make a Radar Screen to Visualise Sensor Data

First we have to setup our variables, background and load in the serial port libraries to ensure we can read the data sent by the Arduino. We also have to include a function from the serial library called serialEvent() which listens for data being sent and allows us to read the data easily. We do some easy string work, splitting the serial port lines to get the servo position and sensor value.

Also we can setup the radar screen, drawing the text, measurements and display grid. With processing whats nearest the top of the draw() function is displayed first with everything subsequentally drawn on top of this. So our lines and text will be at the bottom of the function so it will always be visible. To draw the lines and measurements we use a FOR loop. The draw() function draws one frame, so we basically re-draw the frame 180 times – we use a couple of arrays to store the previous values to make it look continuous.

Now that we have those we can then begin to display the values on our screen. We use a FOR loop to loop through each item in our array, newValue and oldValue. These are setup to hold 181 items – 1 item per servo position with 1 extra just in case, we loop through these to constantly display the previous readings – if we were to use the servo position itself to iterate through the array then no previous data would be displayed since the servo position is always changing.

Thoughout we need to calculate the X and Y co-ordinates of each servo position and sensor distance reading. To get these values we use trigonometry using sine and cosine and converting the servo position to a radian using the sensor reading as the distance from the center from which to draw the point. To learn more about this and to save me writing it up check out this tutorial at

The Sketch
Below is the code used to create the radar screen, it has comments to help explain. Everything used is an in built function of the Processing language and you can find the reference for the functions that I use in the reference section on the website. So methods such as fill(), stroke(), rect(), line() etc…

Radar Screen Visualisation for SRF-05
Maps out an area of what the SRF-05 sees from a top down view.
Takes and displays 2 readings, one left to right and one right to left.
Displays an average of the 2 readings
Displays motion alert if there is a large difference between the 2 values.
import processing.serial.*;     // import serial library
Serial myPort;                  // declare a serial port
float x, y;                       // variable to store x and y co-ordinates for vertices
int radius = 350;               // set the radius of objects
int w = 300;                    // set an arbitary width value
int degree = 0;                 // servo position in degrees
int value = 0;                  // value from sensor
int motion = 0;                 // value to store which way the servo is panning
int[] newValue = new int[181];  // create an array to store each new sensor value for each servo position
int[] oldValue = new int[181];  // create an array to store the previous values.
PFont myFont;                   // setup fonts in Processing
int radarDist = 0;              // set value to configure Radar distance labels
int firstRun = 0;               // value to ignore triggering motion on the first 2 servo sweeps


Read more: Arduino + Processing: Make a Radar Screen to Visualise Sensor Data from SRF-05 – Part 2: Visualising the Data

Leave a Comment

Your email address will not be published. Required fields are marked *