Robotics in JS— Command Cylon robots with UI
Engineer to Command 🛰
Still, wondering what robotics has to do with JavaScript?
If you’re new to this space, check out my previous article, Implementing Robotics — JS your potential is endless!
In this article, we will dig deeper into Cylon.js and see how it can convert your robotics imaginations into reality. Though it can not help program satellites and rockets, it does have the potential to create good IoT and Robotics applications.
Check out the platforms supported by Cylon.js here
In the previous article, we programmed using node.js CLI. However, if you are a regular web-UI developer wondering how you can connect Cylon.js with your favorite web frameworks like React or Angular, this article is for you!
Solving the unsolved!
We are going to develop a program that will trigger a robot at the click of a button on a web page.
This is the high-level architecture of the interaction between a web application and node server running Cylon.js
With this architecture, one could connect to the node server and thereby the robot from anywhere by simply accessing a web page over a browser.
Traditionally robots are connected to computers and we have to control them physically, now using Cylon.js we can operate and control them from any corner of the world, thanks to HTTP ❤️
Let’s code
We will consider the very famous example of tuning on an LED using our beloved JavaScript without any knowledge of machine-level languages.
Prerequisites
1. Arduino Board with a USB cable
2. Breadboard with jumper wires
3. LED light
4. A computer with IDE
5. DIY attitude 😊
Connecting the wires
Clone client and server code from the repository
https://github.com/avoram/explore-react-cylon-integration
Follow the video to setup Arduino and connect LED using a breadboard.
Let’s get the JavaScript code working
Note — if you want to run the setup locally, both server and client need to be started using npm start command
React
Navigate to file explore-react-cylon-integration/cylon-client/src/App.js
Node
Navigate to file explore-react-cylon-integration/cylon-server/routes/cylon-route.js
NOTE — the port on line 7 should be the com port to which Arduino is connected (explained in the video)
Install the dependencies in both client and server root folders using
npm install
and then fire
npm start
Once the web-client is up you can see the screen with two buttons to turn ON or OFF the LED. Click on the start LED button and “Voila” see your work in action!
Hope you enjoyed reading this article as much as I enjoyed compiling it for you!
Happy Coding...
Closing Thoughts
You know how to write JavaScript code and want to explore the opportunities of endless imagination?
What you just experienced is a complete framework to let your robotics thoughts take flight!
Looking at the tings as they are, might ruin your creativity !
