Week 11

interface and application programming

Tools & Materials

  • Three.js - to build a web app
  • Node.js - to work with a websocket
  • pyserial with miniterm - to communicate with the chip via FTDI


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:

Serial Communication

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

Serial Communication via WebSocket

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.