interface and application programming
This week, I made a Three.js javascript app and attempted to send instructions to a processor via a websocket.
I used the 3d javascript library three.js to implement my site. To do this, I followed the instructions on three.js’s documentation to install it in my working directory (I think all this did was add a javascript file called “three.js”) to my js folder.
Three.js has great documentation, and especially great examples to use as starter projects. I knew I wanted to have geometry that you could hover over to interact with, so I started from this example: webgl interactive cubes.
I made an index.html file, and included the javascript in there with <script> tags. Normally I would link to a separate javascript file, but since there isn’t much html code here, this worked fine.
The code included a camera that was used to view the scene:
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
A scene to include objects in:
scene = new THREE.Scene();
A light:
var light = new Three.DirectionalLight( 0xffffff, 1); //construct a white colored light
light.position.set( 1, 1, 1 ).normalize(); // set it's position
scene.add( light ); // add it to the scene
The main ways that my script deviated from the example was the geometry. I added three cubes to the scene, which would highlight when the mouse hovered over it. The goal was to eventually send a serial message when each cube was highlighted.
Here’s the working app:
And here’s the complete index.html file, adapted from the three.js webgl interactive cubes example:
I hadn’t previously gotten serial communication to work effectively, so I wanted to work through that independently before moving on to connecting the web socket.
To do this, I used the board I made for my final project with a Mega328p, since it had a blinking light I could control. Eventually, I’ll try to control the solenoids in my final project instead.
I followed this instructables tutorial to get things working:
I uploaded the code included on that site using the arduino IDE. I then used miniterm to communicate with it. To do this, I opened terminal, and typed in:
sudo miniterm.py
It then presented me with a list of serial ports, and I selected the one for my usbserial. I noted the port name so that next time I could access this directly and specify a baud rate by typing:
sudo miniterm.py /dev/cu.usbserial-AC00IAP3 9600
The next step was to communicate directly with the mega328p from the javascript app. To do this, I needed to setup a web socket. I know that this is possible via node.js, but I haven’t been able to get the communication to work effectively yet.