While I’m not much of one for the holidays, I do like to participate in the events. I especially enjoy the ones where I get to integrate technology with traditional items. For example, a few years back there was a pumpkin decorating contest. I “decorated” our team’s (I was the only one on our team that was interested) pumpkin with a Raspberry Pi inside and a monitor connected to the back of it while playing through a slideshow. I won a place that year and got a bunch of free food as a result.
Fast-forward to fall of 2017 and I’ve been told that the team I now reside in will be participating in the gingerbread house contest. Since my team is me and my boss, it looks like its completely up to me. I’ve never made a gingerbread house, so I thought I would have a little fun and throw in some technology… a WiFi hotspot that lets you control Christmas music!
Items Used
- NTC C.H.I.P. Computer
- Speaker (broken off of a wired headset)
- Battery
- Gingerbread House Kit
Steps
- The first step is to create a basic access point on the CHIP. This can be done with dnsmasq and hostapd. I used the settings from here, but changed the IP address to match my preferred configuration.
- The next step is to install a LAMP stack. Again, I followed the instruction from another site, here. I did not do the PHP logging or caching at the end of the article.
- Next, you want the site to act as a captive portal. There are two pieces to this. The first is to add the following line to /etc/dnsmasq.d/access_point.conf:
address=/#/10.0.0.1
This line will tell the browser that connects that any request should go to this address instead. However, this doesn’t tell the connecting device (phone for example) that this is a “captive portal” and requires signing in. To do this, we need a few extra lines added to the /etc/apache2/sites-enabled/000-default.conf file:
#apple RewriteEngine on RewriteCond %{HTTP_USER_AGENT} ^CaptiveNetworkSupport(.*)$ [NC] RewriteCond %{HTTP_HOST} !^10.0.0.1$ RewriteRule ^(.*)$ http://10.0.0.1/ [L,R=302] RedirectMatch 302 /hotspot-detect.html http://10.0.0.1/ # android RedirectMatch 302 /generate_204 http://10.0.0.1/ # windows RedirectMatch 302 /ncsi.txt http://10.0.0.1/I added these lines to the end of the inside of <VirtualHost> tag. Change the IP address to match your configuration.
- From here, you need to create your HTML pages. For this, I did some basic PHP files. Here are the basics, style as your leisure.
play.php<?php $songdir = "/var/www/html/songs/"; $songs = array("o-holy-night.mp3","faithful.mp3","harkherald.mp3","rocktree.mp3","deckhalls.mp3","wishmerry.mp3"); $songid = $_REQUEST["song"]; $songfile = $songdir . $songs[$songid]; // Kill the previous playing song $op = shell_exec("sudo /usr/bin/pkill mpg123"); $exec = "/usr/bin/mpg123 -o alsa "; $fullcmd = $exec . $songfile . " &"; $op = shell_exec("sudo $fullcmd"); ?>index.php
<html> <head> <title>Gingerbread House Guest WiFi</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22jquery-3.2.1.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22music.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <link rel="stylesheet" type="text/css" href="site.css" /> </head></pre> <body> <div class="container"> <span class="thanks">Thank you for using the Gingerbread House Guest WiFi. Unfortunately, we cannot actually provide you with Internet service, but we can provide you with Christmas music!</span> </div> <div class="container"> </div> <div id="buttons"> <button value="0" class="xmas">O Holy Night</button> <button value="1" class="xmas">O Come All Ye Faithful</button> <button value="2" class="xmas">Hark The Herald</button> <button value="3" class="xmas">Rockin' Around The Christmas Tree</button> <button value="4" class="xmas">Deck The Halls</button> <button value="5" class="xmas">We Wish You A Merry Christmas</button> <button value="stop" class="stop">Stop the Music!</button> </div> </body> </html>
music.js
$(document).ready(function() { $('button').click(function() { songid = $(this).val(); $.get("play.php?song="+songid, function(data,status) { }); }); - That’s the basics. Obviously, this isn’t a full step by step, so some troubleshooting required (I certainly needed to). If you have any questions, leave a comment.