How to create a graphical interface for the Tinkerkit Gyro module (processing)


I have connected arduinoUno with tinkerkitShiekd and tinkerkitGyroscope(64). The sensor works fine and I get the reading in arduiniIDE but I need to graph the outcome so I have installed Processing and I have tried with the coded posed in for tk gyro and processing. No lucky.

I get the below error:
Exception in thread “Animation Thread” java.lang.NullPointerException
at GyroGUIfromArduino.draw(
at processing.core.PApplet.handleDraw(Unknown Source)
at Source)

I know that this forum is more for c++ but as the processing code comes from this site and a workshop with Vanzati, I thought that maybe someone has got the answer for my problem

The code is as follows (Processing marks the line text("[Y] GYRO_Y speed: "+temp[1]+“°/s”, 10, 70); ):

/* -------+ TinkerKit! Gyroscope Module T000062 Dashboard ±------

This processing sketch grab data from an analog 2-axis Gyroscope
connected to Arduino, plot the angular rate readings into a graph;
then transform them into an angular position (inclination) trought
integration over time, dislpaying them into gauges.

Look on the product page for the Gyroscope specifiations:

Connect the gyroscope with two Toolkit wires to the Tinkerkit!
sensor shield into I0 and I1.

Mount the shield over an Arduino board then upload on it the
“Standard Firmata” sketch, then you are ready to go.

Processing, in order to work with Firmata protocol requires that
there is a library installed on your environment. Find the library here:

created 17 Sept 2011
by Federico Vanzati

This example code is in the public domain.

import processing.serial.*; // Enable processing to use the serial port

Serial myPort; // Create object from Serial class
String myString = null;
String temp;
int lf = 10;

// Timing variables
int refreshScreen = 0;

// Variables to transform data into physical measurement
int rollSpeed, rollAngle, pitchSpeed, pitchAngle;
int offsetX, offsetY;

// Variables for displayng data
int y_rateVideoBuffer, x_rateVideoBuffer;
String str_yAngle, str_yGyroRate, str_xAngle, str_xGyroRate;

void setup()
size(700, 440);

String portName = Serial.list()[2];
myPort = new Serial(this, portName, 57600);
// wait a little to give time to Arduino to be initialized


y_rateVideoBuffer = new int[width];
x_rateVideoBuffer = new int[width];

PFont font;
font = loadFont(“Monospaced.bold-26.vlw”);

smooth(); // smoothed shapes looks better!

void draw() {

//NOTA: misure prese dal centro
ellipse(width-70, height-300, 120, 120); // the circles
ellipse(width-70, height-100, 120, 120); // → our gauges!

// Strings composition
text("[Y] GYRO_Y speed: “+temp[1]+“°/s”, 10, 70);
text(” GYRO_X speed: "+temp[5]+“°/s”, 10, 270);
text(“Angle”, (width-120), 70);
text(“Angle”, (width-120), 270);
text(temp[3]+“°”, (width-120), (height-210));
text(temp[7]+“°”, (width-120), (height-10) );
text(“TinkerKit! 2-Axis Gyroscope [T000062]”, 28, 28);
text(“Reset Arduino to calibrate and restart this GUI”, 10, (height -5));

// Draw the gauges indicator. Will display the inclination
float gyroY_radians = radians(-rollAngle)-HALF_PI;
line( (width-70), (height-300), (width-70)+(60cos(gyroY_radians)), (height-300)+(60sin(gyroY_radians)) );

float gyroX_radians = radians(-pitchAngle)-PI;
line( (width-70), (height-100), (width-70)+(60cos(gyroX_radians)), (height-100)+(60sin(gyroX_radians)) );

// call the function that plot the angular velocities, with few screen settings
graphMeThis(rollSpeed, y_rateVideoBuffer, 140, 300, 140);
graphMeThis(pitchSpeed, x_rateVideoBuffer, 140, 100, 140);

void serialEvent(Serial p) {
myString = p.readStringUntil(lf);
if (myString != null) {
temp = myString.split(" |\t");
rollSpeed = parseInt(temp[1]);
rollAngle = parseInt(temp[3]);
pitchSpeed = parseInt(temp[5]);
pitchAngle = parseInt(temp[7]);

println(rollSpeed+" “+rollAngle+” “+pitchSpeed+” "+pitchAngle);

This function plot data over screen in a xPos and yPos given position.
[ySpan] is expressed in pixel and indicates the heigth that you give to the graph
void graphMeThis(float inData, int graphBuffer, int xPos, int yPos, int ySpan)
// For each frame the buffer that contains the older samples are shifted by one position
for (int i=0; i<(width-xPos)-1; i++)
graphBuffer = graphBuffer[i+1];

  • // Store the new entry data*
  • graphBuffer[(width-xPos)-1] = (int)map(inData, -3000, 3000, -ySpan/2, ySpan/2); //salvo il nuovo dato…che plotto alla fine del grafico*
  • stroke(#E2F520, 150);*
  • strokeWeight(2);*
  • // plot the graph that goes from right to left*
  • for (int x=(width-xPos); x>1; x–)*
  • line( x, (height-yPos)-graphBuffer[x-1], x+1, (height-yPos)-graphBuffer);*
  • noStroke();*
  • strokeWeight(1);*
    Thanks a lot! :slight_smile:
  String portName = Serial.list()[2];

What value is actually assigned to portName? Is that the port that the Arduino is really connected to?

text("[Y] GYRO_Y speed: "+temp[1]+"°/s", 10, 70);
  text("[X] GYRO_X speed: "+temp[5]+"°/s", 10, 270);

You are trying to access the 2nd and 6th element of an array:

String[] temp;

You have not defined a size for that array. You have not done anything that assigns values to that array.

Mount the shield over an Arduino board then upload on it the
 "Standard Firmata" sketch, then you are ready to go.

Did you?

Hello Paul,

Thanks a lot for your answer. [2] is the actual port arduino is connected to. I uploaded the firmata to arduino but the array... that I need to find out how does it work. I though the code was complete, I need to figure out what do I need to write (I am totally beginner). Well, you are giving me good tips, thanks!

I am using the same exact code from aboce and I am receiving a different error message.
The sensor is working fine, however when graphing the outcome within a Processing sketch I have no luck.
My ArduinoUno is loaded with code from

Error message:

cannot convert from int to int


graphBuffer = graphbuffer[i+1];

Is there something about that line of code or the error message that is hard to understand?

graphBuffer is an array. graphBuffer[i+1] is an element of that array. One is an array of ints. The other is an int.

You can not assign an int to an array.

It appears that what the code is trying to do is to move the contents of the array up by one position, so the line should be:

graphBuffer[i] = graphBuffer[i+1];