In this project, I created a 360 video player (currently playing a demo mp4 file) and a controller with Arduino UNO.
- Arduino UNO
- ITG/MPU GY-521 Sensor module
- USB-cable for serial connection between the development board and the computer
- Arduino IDE or any other IDE for Arduino
- NodeJS (v12.14.1 tested)
- Typescript (v4.2.3 tested)
- Localhost server for client
- A cup of coffee and a nice Spotify playlist
For making the arduino controller you need the Arduino development board and a ITG/MPU 3-axis Acc. and Gyro. sensor board (I am using GY-521 here). Follow the circuit diagram below to build your circuit.
Once the cicruit is build, we need to program the micro-controller. Download the script and open it in ArduinoIDE or any IDE of your choice and flash it to the arduino.
Now you can open up a serial console and check if your arduino is giving you the desired output or not. The output should look something like this:
91,46,-154
109,57,-152
98,21,-156
104,35,-171
96,51,-149
124,52,-142
118,66,-155
After we have done this we need to change the code of our index.ts in the /server/script folder.
Open the file and look for the variable portname and change it to the port to which your arduino is connect. For me it would be:
// Defining the port name: This is the port to which your arduino is connected.
// Change it to the name of the port to which you have connected your arduino
const portName = 'COM10';Now we are done with the controller part. Lets to some Typescripting now and build our server and client.
To build the server-side code, follow these steps:
-
Download the repository and head to the server folder.
-
In the terminal type the following command to install node modules:
npm install
-
Open the same index.ts file in /server/script folder and look for the variable called socketPortNumber
-
Change the value of the variable to socket number you want to start listening for a connection. For me it would be:
// Defining port number: (Change this port number to the port you want to make a socket connection though) const socketPortNumber = 3000;
-
Optionally you can also change the prepix for the socket connection from "/arduino" to anything you like. For me it is:
// Assigning a prefix. When a client tries to connect to the host with this prefix, a socket connection is established // between the client and the listening server socketServer.installHandlers(server, { prefix: '/arduino' });
-
Once the modules are installed and port numbers are assigned we are ready to build and start our servers.
-
To build the TS files into JS, run the following command
npm run-script build
-
To start the server, run the following command:
npm run-script start
Note: The start command automatically builds the TS files as well, so you cant skip the build step and directly run the start command.
For building the client, do the following changes:
Change the url for socket connection to local host as follows:
http://127.0.0.1:[socket port number]/[socket prefix]
For me it would be:
//socket connection from the server
let sock = new SockJS("http://127.0.0.1:3000/arduino");Once this is done, run the following command in the www folder:
tscGo though the generate JS files and remove the lines that are surrounded by the remove comment block
Finally,
- Start your localhost with the index.html, make sure the NodeJS server is running, arduino is programmed and connected to the serial port.
- Wait for the socket connection to establish.
- Once that is done, you are ready to go!
