Charting the JCreate

The JCreate comes with two very useful built in sensor:

  • A three axis accelerometer
  • A temperature sensor

In this application we'll send the output of these sensors to a charting program written using the processing.core library.

Mote Application

In this application the mote is simply a sender of sensor values, so we're just going to import the requisite sensors and sender drivers. We'll use the prepackaged accelerometer library in SentillaExampleMoteApplications to make life even easier. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
        //Create Sender
    Sender sender = SenderDriver.create("local");

    //Create Sensors
    Sensor<Temperature> ts = SensorDriver.create("temp", Temperature.class);
    Sensor<ElectricPotential> ps = SensorDriver.create("volt",ElectricPotential.class);
    Accelerometer accel = new Accelerometer(true, true, true);
    accel.calibrate();
    float[] aread = new float[3];

    //CreateMessage
    JCreateMessage jmsg = new JCreateMessage();

    //Get ID
    jmsg.moteID = Mac64Address.getLocalAddress().longValue();

We'll make a message class to handle the data: 

1
2
3
4
5
6
7
8
9
    public static class JCreateMessage implements Serializable
    {
        long moteID;
        double temperature;
        double potential;
        double x;
        double y;
        double z;
    }

And finally create an infinite loop to take the sensor data and send as fast as we can. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
    while(true)
        {
            //Take the measurement;
            jmsg.temperature = ts.read().doubleValue(Temperature.UNIT);
            jmsg.potential = ps.read().doubleValue(ElectricPotential.UNIT);
            accel.getMultipleReadings(aread);
            jmsg.x = aread[0];
            jmsg.y = aread[1];
            jmsg.z = aread[2];


            //Send off
            sender.send(jmsg);


        }

The full source can be found here

Client Application

We'll use processing to make a nice graphical charting interface for our application. I'm using Edward Tufte's sparkline as inspiration; it's a very effective way of showing multiple trends in an intuitive, uncluttered manner. We'll have a line that automatically scales to the ordinate limits for a given period, show the maximum and minimum values as well as the current value.

The processing methodology uses setup() and draw() methods, where setup() provides initial conditions and draw() interates logic at a rate of frameRate(x) declared in setup(). For our application we'll check for a new message, store that new message into an array, and then run an animation to smoothly transition to the new point. The main interactions with the Sentilla Platform occur in setup() and draw(): 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
    //Instantiate basic components
    Receiver receiver;

    JCreateDemoMoteApp.JCreateMessage jmsg= new JCreateDemoMoteApp.JCreateMessage();

    PFont font;
    public void setup()
    {

        // Set up the graph
        size(1000, 500);
        stroke(255);
        frameRate(30);
        background(0);
        font =  createFont("FFScala", 20);
        textFont(font, width/60);
        redraw();

        /* create the host server connection */
        HostClient host = new HostClient();
        try
        {
            host.connect(); 
        }
        catch (Exception e){}


        //Start receiver
        receiver = ReceiverDriver.create(JCreateDemoMoteApp.JCreateMessage.class);
        receiver.cancel();
        receiver.setReceive().submit();

    }

    //globals
    int arraysize = 30;
    int counter = 0;
    double[] xArr = new double[arraysize];      
    double[] yArr = new double[arraysize];
    double[] zArr = new double[arraysize];
    double[] tempArr = new double [arraysize];
    double[] timeArr = new double[arraysize];

    //globals to help with animation
    float xposold;
    float yposold;
    float[] xpoints = new float[arraysize];
    float[] ypoints = new float[arraysize];

    public void draw()
    {
        //if we've got a message get new data
        if (receiver.isDone())
        {   
            jmsg = (JCreateDemoMoteApp.JCreateMessage) receiver.getData();
            receiver.setReceive().submit();

            addValue(xArr,jmsg.x);
            addValue(tempArr,jmsg.temperature - 273);
            addValue(yArr, jmsg.y);
            addValue(zArr, jmsg.z);
            addValue(timeArr,(double)System.currentTimeMillis());
            if ( counter < arraysize) counter++;
            animcounter = 0;


        }

        //draw plots, animate smoothly if we have new data
        background(0);
        smooth();
        plotlineanim(2*height/9,height/9,tempArr,0,100,255,"C");
        plotlineanim(4*height/9,height/9,xArr,200,0,100,"G");
        plotlineanim(6*height/9,height/9,yArr,65,140,130,"G");
        plotlineanim(8*height/9,height/9,zArr,0,255,255,"G");

        if (animcounter < animlimit) animcounter++;

    }

Most of the animation magic happens in plotlineanim(), which is pretty well commented in the source code. The trick for smooth animation is to iterate a counter that creates a weighted average between the old point and the new point, slowly shifting the weight from the old value to the new value. In the source code this is handled by animcounter, which shifts the weight, and animlimit, which sets the end limit.

The application will look somethinge like this:

image here)

The full source can be found here

And in motion looks something like this (scruffy engineer not included):

Conclusion

This application shows how easy it is to visualize data from a mote with processing, all in Java. We saw how to quickly send data from a mote, and handle it on a client side.



#Charting the JCreate

The JCreate comes with two very useful built in sensor:

- A three axis accelerometer
- A temperature sensor

In this application we'll send the output of these sensors to a charting program written using the processing.core library.

##Mote Application
In this application the mote is simply a sender of sensor values, so we're just going to import the requisite sensors and sender drivers. We'll use the prepackaged accelerometer library in SentillaExampleMoteApplications to make life even easier.

<code>
#!java
//Create Sender
Sender sender = SenderDriver.create("local");

//Create Sensors
Sensor<Temperature> ts = SensorDriver.create("temp", Temperature.class);
Sensor<ElectricPotential> ps = SensorDriver.create("volt",ElectricPotential.class);
Accelerometer accel = new Accelerometer(true, true, true);
accel.calibrate();
float[] aread = new float[3];

//CreateMessage
JCreateMessage jmsg = new JCreateMessage();

//Get ID
jmsg.moteID = Mac64Address.getLocalAddress().longValue();

</code>

We'll make a message class to handle the data:

<code>
#!java
public static class JCreateMessage implements Serializable
{
long moteID;
double temperature;
double potential;
double x;
double y;
double z;
}

</code>

And finally create an infinite loop to take the sensor data and send as fast as we can.

<code>
#!java
while(true)
{
//Take the measurement;
jmsg.temperature = ts.read().doubleValue(Temperature.UNIT);
jmsg.potential = ps.read().doubleValue(ElectricPotential.UNIT);
accel.getMultipleReadings(aread);
jmsg.x = aread[0];
jmsg.y = aread[1];
jmsg.z = aread[2];


//Send off
sender.send(jmsg);


}

</code>

The full source can be found @[here][[JCreateDemoMoteApp.java]]

##Client Application

We'll use [processing](http://processing.org) to make a nice graphical charting interface for our application. I'm using Edward Tufte's [sparkline](http://en.wikipedia.org/wiki/Sparkline) as inspiration; it's a very effective way of showing multiple trends in an intuitive, uncluttered manner. We'll have a line that automatically scales to the ordinate limits for a given period, show the maximum and minimum values as well as the current value.

The processing methodology uses setup() and draw() methods, where setup() provides initial conditions and draw() interates logic at a rate of frameRate(x) declared in setup(). For our application we'll check for a new message, store that new message into an array, and then run an animation to smoothly transition to the new point. The main interactions with the Sentilla Platform occur in setup() and draw():

<code>
#!java
//Instantiate basic components
Receiver receiver;

JCreateDemoMoteApp.JCreateMessage jmsg= new JCreateDemoMoteApp.JCreateMessage();

PFont font;
public void setup()
{

// Set up the graph
size(1000, 500);
stroke(255);
frameRate(30);
background(0);
font = createFont("FFScala", 20);
textFont(font, width/60);
redraw();

/* create the host server connection */
HostClient host = new HostClient();
try
{
host.connect();
}
catch (Exception e){}

//Start receiver
receiver = ReceiverDriver.create(JCreateDemoMoteApp.JCreateMessage.class);
receiver.cancel();
receiver.setReceive().submit();

}

//globals
int arraysize = 30;
int counter = 0;
double[] xArr = new double[arraysize];
double[] yArr = new double[arraysize];
double[] zArr = new double[arraysize];
double[] tempArr = new double [arraysize];
double[] timeArr = new double[arraysize];

//globals to help with animation
float xposold;
float yposold;
float[] xpoints = new float[arraysize];
float[] ypoints = new float[arraysize];

public void draw()
{
//if we've got a message get new data
if (receiver.isDone())
{
jmsg = (JCreateDemoMoteApp.JCreateMessage) receiver.getData();
receiver.setReceive().submit();

addValue(xArr,jmsg.x);
addValue(tempArr,jmsg.temperature - 273);
addValue(yArr, jmsg.y);
addValue(zArr, jmsg.z);
addValue(timeArr,(double)System.currentTimeMillis());
if ( counter < arraysize) counter++;
animcounter = 0;


}

//draw plots, animate smoothly if we have new data
background(0);
smooth();
plotlineanim(2*height/9,height/9,tempArr,0,100,255,"C");
plotlineanim(4*height/9,height/9,xArr,200,0,100,"G");
plotlineanim(6*height/9,height/9,yArr,65,140,130,"G");
plotlineanim(8*height/9,height/9,zArr,0,255,255,"G");

if (animcounter < animlimit) animcounter++;

}

</code>

Most of the animation magic happens in plotlineanim(), which is pretty well commented in the source code. The trick for smooth animation is to iterate a counter that creates a weighted average between the old point and the new point, slowly shifting the weight from the old value to the new value. In the source code this is handled by animcounter, which shifts the weight, and animlimit, which sets the end limit.

The application will look somethinge like this:
<center>![image here](http://dansteingart.com/goodies/jcreate-demo.jpg))</center>

The full source can be found @[here][[JCreateDemoClientApp.java]]

And in motion looks something like this (scruffy engineer not included):

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/Eng_fy_sjzs&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/Eng_fy_sjzs&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object>

##Conclusion
This application shows how easy it is to visualize data from a mote with processing, all in Java. We saw how to quickly send data from a mote, and handle it on a client side.