Making a robot Visualisation Platform from Scratch (and how you can do the same)
![Making a robot Visualisation Platform from Scratch (and how you can do the same)](/content/images/size/w960/2019/07/cover-robot.jpg)
[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.
![](https://ramith.fyi/content/images/2019/07/PHOTO-2019-05-15-02-04-07.jpg)
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
![](https://ramith.fyi/content/images/2019/07/PHOTO-2019-05-24-22-05-40.jpg)
The final outcome of countless hours spent on javascript.
![](https://ramith.fyi/content/images/2019/07/Screenshot-2019-07-14-at-8.54.02-AM.png)
![](https://ramith.fyi/content/images/2019/07/Screenshot-2019-07-14-at-8.55.59-AM.png)
![](https://ramith.fyi/content/images/2019/07/PHOTO-2019-05-09-16-12-22-2.jpg)
![](https://ramith.fyi/content/images/2019/07/PHOTO-2019-05-09-16-12-22-3.jpg)
![](https://ramith.fyi/content/images/2019/07/57824158146__D58FD044-6637-4B2B-9F01-F8FF286D433B.jpeg)