Configurable Processing Dashboard

I’ve slowly started working on a configurable dashboard in Processing for displaying serial data. The idea is to create display objects like dial and bar gauges, graphs, g-force plots etc that can be quickly set up to display data coming in on the serial port. I thought I would post my progress as I go so that I can get feedback, suggestions and requests. So far it’s a very rough start that can read n bytes from the serial port (expects n bytes but also delimited with a 0 to re sync if there’s an interruption) and send each byte to a dial gauge or bar graph object (more objects to come).

To start the objects have an x & y position and a size as well as a data range which is split into 10 increments and a label. The Processing code and the Arduino code are included, connect 3 pots to A0, A1, A2 and run (you will probably have to check that Processing is using the correct com port). Play around to see how everything works. Please excuse the lack of commenting and the somewhat disjointed structure it was a quick hack to display something that I’ve decided to take further.

Hope someone finds this useful

Regards

Andrew

/*
 Reads an analog input on pin 0,1,2, maps it to 1-255 and writes it to the serial port.
 Attach the center pin of a potentiometer to pin A0, and the outside pins to +5V and ground. Same for A1 and A2.
 */
int in [] = {0,0,0,0};

void setup() {
  Serial.begin(57600); // Initialize serial communication at 57600 bits per second
}

void loop() {
  for (int i = 0 ; i < 3 ; i ++) // Read the input on analog pin 0-2
  {
    in [i] = analogRead(i);
    in [i] = map(in [i], 0, 1023, 1, 255);
    delay (10);
  }
  
  Serial.write(0); // De limits the packet, tells Processing where the data packet starts
  delay(1);
  
  for (int i = 0 ; i < 3 ; i ++) // Writes the array to the serial port
  {
    Serial.write(in[i]);
    delay(1);        // Delay in between writes for stability
  }
  Serial.write(in[1]); // Processing code is expecting 4 bytes so this is just a dummy for now
  delay(1);
}

Bar_Gauge.pde (1.06 KB)

Dashboard.pde (1.08 KB)

Dial_Gauge.pde (1.75 KB)

Map.pde (1.02 KB)

I’ve added a G-Plot object that is supposed to be a 2-D plot (kinda like a radar) of g sensor input, haven’t tested it with Arduino data yet but it appears to work still needs labels and some minor tweeks. The next object will be some way of visualizing 3-D g sensor information. I’ll probably use a 3-D box or something similar and tilt it in the direction of the g forces (i.e make sure that the force vector is always pointing down. Or maybe a sphere at the end of the force vector connected to the origin so that it looks like a ball hanging from a spring, the further from the origin the higher the G’s.

I’ve attached a screen shot to give an idea of what it looks like so far. Still early days.

Nice start on the project! I will have to try it tonight!