Sparcade: Edison as a Web Server for Browser Games
Introduction
The Intel® Edison is essentially a tiny computer with onboard WiFi. As such, we can configure the Edison to act as an access point (AP) and a web server at the same time to serve simple browser-based games.
At big events like Maker Faires, internet is often nonexistent or hard to come by. One way to serve a web page to attendees is to create a WiFi access point to which they connect. This type of off-grid "dark node" is how projects like LibraryBox work.
Required Materials
Parts for this project can be found in the Edison SIK. Specifically, you will need:
Suggested Reading
Before continuing with this project, we suggest you be familiar with a few concepts:
Hardware Hookup
Connect the Edison to a Base Block and GPIO Block. See this guide on how to connect the Blocks (note that the ADC Block is not needed for this project).
Configure the Edison
We need to configure the Edison to act as an access point before we can program it with the server and game.
Install XDK
Follow these instructions to install the Intel® XDK.
Flash the Latest Firmware
Follow the Edison firmware flashing guide to update to the latest firmware.
Connect to the Edison
Plug a USB cable into the OTG port of the Edison. Follow these instructions to set up USB networking on your host computer.
Use an SSH program (e.g., PuTTY) or the built-in SSH terminal of the XDK to connect to the Edison. Note that the default IP address of the Edison on the USB network is 192.168.2.15.
Configure WiFi
Once logged into the Edison over SSH (username: root, no password), run the command:
configure_edison --setup
Follow the onscreen instructions to set a password (highly recommended!), change the Edison's name (e.g., "sparcade"), and connect to the internet via WiFi.
Configure Hostapd
Hostapd is a Linux utility capable of turning WiFi network cards into access points. Luckily, the Edison has Hostapd installed by default. All we have to do is configure it. Back up the original hostapd.conf file, and modify a new one:
mv /etc/hostapd/hostapd.conf.bak
vi /etc/hostapd/hostapd.conf
In the vi text editor, press 'i' to edit text and insert the following (you can copy the text and press 'shift' + 'insert' together to paste into vi):
interface=wlan0
ssid=sparcade
hw_mode=g
channel=6
auth_algs=1
wmm_enabled=0
Save and exit by pressing 'esc', type :wq
, and press 'enter'.
Configure Hosts
The hosts file lets us map names to IP addresses without having to rely on a DNS server. We want to associate the name "sparcade" and "sparcade.local" with our own IP address, which is 192.168.42.1 by default.
Backup the original hosts file and edit a new one:
mv /etc/hosts /etc/hosts.bak
vi /etc/hosts
Add the following:
127.0.0.1 localhost.localdomain localhost sparcade.local sparcade
192.168.42.1 sparcade.local sparcade
Save and exit.
Configure DHCP
The Edison uses udhcp as a lightweight DHCP server for access point (AP) mode. This service hands out IP addresses to clients that connect to its AP. We'll want to configure the udhcp daemon so that sparcade.local is associated with the AP's IP address (192.168.42.1). It's a bit of a cheat, since we aren't running a full DNS server to associate website names with IP addresses.
Edit the configuration file:
vi /etc/hostapd/udhcpd-for-hostapd.conf
Scroll down to the bottom of the file, and add the following:
opt subnet 255.255.255.0
opt hostname sparcade
opt domain local
opt dns 192.168.42.1
Save and exit.
Install Dnsmasq
We will also use another tool, dnsmasq, to help associate the server name ("sparcade.local") with the Edison's WiFi IP Address (192.168.42.1). Install it with the following commands:
wget http://www.thekelleys.org.uk/dnsmasq/dnsmasq-2.45.tar.gz
tar xvf dnsmasq-2.45.tar.gz
cd dnsmasq-2.45
make install
Configure dnsmasq with:
vi /etc/dnsmasq.conf
Enter the following:
no-resolv
interface=wlan0
Save and exit.
Set Dnsmasq to Run on Boot
Because we manually compiled and installed dnsmasq, there is nothing that tells it to run whenever the Edison boots. To do that, we need to create a systemd service.
vi /lib/systemd/system/dnsmasq.service
Copy in the following:
[Unit]
Description=DHCP and DNS caching server.
After=network.target
[Service]
ExecStart=/usr/local/sbin/dnsmasq -k --conf-file=/etc/dnsmasq.conf
ExecReload=/bin/kill -HUP $MAINPID
Restart=on-failure
RestartSec=5
[Install]
WantedBy=multi-user.target
Save and exit. To register the service (so it runs on boot), enter the commands:
systemctl daemon-reload
systemctl enable dnsmasq.service
Disable Default Server
Finally, we want to disable the web server that the Edison runs whenever it enters into AP mode. To do that, run:
systemctl disable edison_config.service
And now we can restart the Edison:
reboot
Set Edison as Access Point
Once the Edison has finished booting back up, turn on AP mode. Do that by holding the PWR button (on the side of the Base Block) for two to seven seconds (I recommend counting to 4).
The Code
Download the Sparcade game server code:
Unzip it and open the project in XDK. Connect to the Edison, upload the code, and run it. If you need a refresher on how to use the XDK, see this guide.
What's Going On?
The code for Sparcade might be confusing at first glance. In main.js, we use the express and http node modules to create a simple web server. These serve the files found in the www directory (our game).
If you open up www/index.html, you will see the basic web page that gets sent to any client that requests a page from "sparcade.local". This page tells the client's browser to download a few JavaScript (.js) files, which then run a Phaser-based game on the Canvas element in the page.
Whenever the player dies (loses all lives), the client creates a socket.io connection back to the server and sends the player's score. The server compares the player's score against its list of Top 10 high scores, and, if the player ranked, it sends an initials request back to the client.
The player, if ranked in the top scores, enters their initials into the game, and their client sends their initials back to the server. The server then adds the user's initials and score to the list of Top 10 scores, which is continuously displayed on the LCD.
Play!
From your phone, tablet or computer, connect to the Sparcade WiFi access point. Note that you will not have internet connection!
Open up a browser and navigate to http://sparcade.local/.
You should see the game appear in your browser. Vortex is a Tempest clone. You pilot a ship around a circle and shoot incoming enemies. Prevent any ships from leaving the blue circle, and don't get shot!
Vortex is a simple arcade game -- you have three extra lives, and one shot kills. The purpose is to get the high score.
As you and other people play the game, scores will be sent back to the server. If you are lucky and skilled enough to be in the Top 10, the game will ask you for your initials. The LCD on the Edison will scroll through the Top 10 high scores of everyone who has played!
Resources and Going Further
To connect the Edison to the internet, connect via SSH and run the command:
configure_edison --WiFi
Follow the instructions to connect to a WiFi AP. Additionally, you can start running the Edison's default web server again with:
systemctl enable edison_config.service
reboot
Note that you may want to load a different program via XDK so that the custom server does not continue to run on boot.
What other games can you make? To learn about how Vortex was made, check out the Phaser.io framework. Controlling hardware (specifically, the LCD) from the Edison is accomplished using the Johnny-Five platform.
All the resources used in this tutorial can be found below.
- SparkFun Inventor's Kit for Edison Experiment Guide
- Sparcade GitHub repository
- Vortex GitHub repository
For more Intel® Edison fun, check out the following tutorials: