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 remembered processing, I used back with leapmotion & 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.

Then I thought of moving to the web because of simplicity. That's when the javascript alternative of processing comes in. I used P5.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

The final outcome of countless hours spent on javascript.