Making a robot Visualisation Platform from Scratch (and how you can do the same)

[this post will be updated further with code]

When I first started out developing our robot for the EN2532 module, I dreamt of having a control panel on a computer which can see what was going on in the robot.

That’s when I rememberedprocessing , I used back withleapmotion & Arduino . So I started out my journey with processing.

> Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts.

I thought of using the HC-05 module to send the data at 230400 baud rate to the computer. Processing’s serial library can read the HC-05′s input and visualise the coming in.

You can see the baby stages of the visualiser down below.

It gets gyro & ToF sensor readings.

Figure 1: (using processing)

Then I thought of moving to the web because of simplicity. That’s when thejavascript alternative of processing comes in. I usedP5.js along with the serial port library to get my data. Then using relevant mathematical formula I could visualise text, lines, rotation on the canvas

Figure 2: (and added even more features)

The final outcome of countless hours spent on javascript.

Figure 3:

Figure 4:

Figure 5: (This board was a custom designed PCB by our Team!)

Figure 6: (This board was a custom designed PCB by our Team!)

Figure 7: (This board was a custom designed PCB by our Team!)

Figure 8: (This board was a custom designed PCB by our Team!)

Figure 9: (This board was a custom designed PCB by our Team!)