I've wanted to do a physical computing project that worked over the web for a few months. So I decided to pursue this idea and learn Node.js for this project. Since I knew I wanted to do something online that caused something physical to happen, I decided to create a game that dispenses candy when the player wins. The game itself is a webpage with scrolling balloons that the user must click on to pop. Mockups of the game are below.
Instructions and Game Screen
Win and Lose Screen
When I coded the game itself I used CSS animation to move the balloons across the screen. The rest of the game elements are controlled by jQuery. The timer uses the set interval method ( r = setInterval(timer, 1000); ) to repeatedly call a function that decreases the timer once every second.
Each time the user clicks a balloon, a function changes the source of the image to a 'balloon pop' graphic ( $(this).attr('src', 'IMAGE LOCATION' ). A 'fade' class is also added to the image. This class has a CSS animation that fades the opacity of its target to 0.
In addition to the image changing and fading, clicking a balloon increases the player's score by adding one to the score variable. If the player clicks a poison balloon, one point is subtracted from the score variable.
To complete the physical computing part of the project. I first installed Node.js onto my computer. Node.js allows you to create a webserver using JavaScript. Essentially, this allows you to create a connection between the browser and a server. Also, you typically need to use the computer's terminal to work with Node.js. Once node was installed, I also had to install Socket.io and Node-serialport. These can be installed by entering npm install socket.io and npm install serialport in the terminal. However, they must be installed in the folder where the rest of the project will be saved. Socket.io sends signals back and forth between the browser and the server. Serial Port is used to send signals to a computer's serial port connection.
To actually implement Node.js and connect it to an Arduino I used the information in these articles (Node.js and Socket.io and Node.js communicating with Arduino) by Barry Van Dam. The demo files included with the second article are particularly helpful as they already have the server scripts written.
I copied the files from the demo to my project folder. In requestHandlers.js, I changed this line of code ( var html = fs.readFileSync(__dirname + "/index.html") ) to include index.html, which is the html file for the game. I also copied the lines of code that setup Socket.io from the demo html file and included them in my JavaScript file with the rest of the JS for the game. In this file, I have a test function that checks the player's score each time a balloon is clicked. Once the player reaches a score of 10, they win. I included this line of code ( iosocket.emit('servoval',toggleVal); ) in the function for when the player reachs a score of 10. Also note that I had previously set toggleVal to 0.
In the server.js file I was able to get rid of the code I didn't need, mainly parts that were meant to control lights that I didn't need. In the initSocketIO function I added the following code to detect the information sent from the game JavaScript file:
socket.on('servoval', function(data) {serialPort.write(data);});
This line detects the signal being sent out by the game script and then sends the received value through the serial port to the Arduino.
Next, I created an Arduino file to control a servo. A good example for doing this can be found at SparkFun. I was able to use the code from Barry Van Dam's example to set up the serial port connection. I also changed the if statements so that when the Arduino received a value of 0 from the serial port it moved the servo motor. I then uploaded the code to the Arduino. Once it was uploaded, I checked the port the Arduino was connected to in the bottom right corner of the Arduino window. I then went back to the server.js file and changed the portName variable to match the correct port for the Arduino.
I created the candy dispenser out of foam board and attached a servo with a 'door' attached to it. When the servo is activated the servo moves, opening a hole in the dispenser, allowing candy to fall out.
Finally, to start the game I opened the terminal and navigated to the project folder. I then typed in node index.js. Then I opened a browser and went to http://localhost:1337 (this is listed in the server.js file). This should open the html file and start the game. Note, that I ran into problems with the server finding images and included fonts, so I had to uploaded them to a location on the web and link to them directly.