Category Archives: Web Development

2048 on a Touchscreen Raspberry Pi

As I was checking out the latest accessories for the Raspberry Pi, I stumbled across this nice little shield at Adafruit: PiTFT Mini Kit – 320×240 2.8″ TFT+Touchscreen. Several days went by before I was certain I had to have it, and when it eventually arrived, I was not disappointed.

2048pi

To start, I followed the excellent setup guide, which went from the soldering (hint: use thin solder and a pointed tip) and software setup all the way to instructions on the display calibration. Before, during, and after verifying that everything was working, I kept wondering about all the things I could make with this thing. What I ended up landing on was building a portable 2048 gaming system. :-)

So, I began to do some research on how exactly I was going to control 2048 itself. At first I wasn’t sure whether I wanted to use a keyboard like peripheral to simulate the arrow keys, wire up buttons for use with RPi.GPIO / WiringPi, or to look into using swipe events.

Also I reasoned, since I didn’t plan on writing the game from scratch, running the original seemed ideal as it works in a plain ol’ web browser. And if that didn’t pan out, I would resort to booting it in command line mode, as there are a variety of C, Python, and Bash ports. Obviously there are other ways to approach this, especially if I were to be developing the game for market, but I was looking at it as a minimum viable prototype project (MVPP™). j/k

For the command line forks, the simplest way seemed to be a method involving launching the application, and then sending keystrokes such as ‘w’, ‘a’, ‘s’, or ‘d’ to /dev/tty1 using a small C utility:

s_key.c

#include <sys/types.h>
#include <sys/stat.h>
#include 
#include <sys/ioctl.h>

int main(void)
{
  int hTTY = open("/dev/tty1", O_WRONLY|O_NONBLOCK);
  ioctl(hTTY, TIOCSTI, "b");
  close(hTTY);
  return 0;
}

Another idea that came up was to start a tmux session and send keystrokes through it:

tmux send-keys -t SESSIONNAME Down
tmux send-keys -t SESSIONNAME Up

However, as much as I like the command line, for this project I wanted to avoid it for the UI. I also wondered how I would control it within X? The original 2048 didn’t seem to support using a mouse, or the touch screen from Adafruit, so I looked at utilizing XAUT or xdotool so that I could script out a solution that would be triggered from a button press.

Didn’t want to do any of those either. I did arrive at this solution though:

  • auto login to Linux without a password by modifying /etc/inittab:
    • look for a line like this: 1:2345:respawn:/sbin/getty --noclear 38400 tty1
    • change it to something like this: 1:2345:respawn:/sbin/getty --autologin {USERNAME} --noclear 38400 tty1
  • auto start LXDE
  • auto start Midori in fullscreen
  • and then make sure the default home page is set to the modified 2048.

The main difference from the original is that I have the app zoomed to 90%, and I swapped out the original touch event setup with one based on Hammer.js. This was done only to work with the touch screen and the events provided by Midori when swiping in various directions on the game board.

The only other functionality provided in the project is a listener script running in the background that is started from /etc/rc.local on bootup:

poweroff-on-gpio-23.sh

#!/usr/bin/env bash

#wiring pi pin 4 maps to gpio-23
/usr/local/bin/gpio mode 4 up

while true; do
  sleep .5
  if [ `/usr/local/bin/gpio read 4` -lt 1 ]; then
    sudo poweroff
  fi
done

This is to allow for a poweroff event to be sent to the Raspberry Pi, so that when I am done playing the game, I can get the unit to turn off without using a keyboard. Then, I power off the battery pack using a stylus on the underside of the unit.

Parts used:

Watch a video of it booting, a little game play, and the shutdown sequence here:


Checking out Bolt

Recently I was able to spend some time with Bolt, “a tool for Content Management, which strives to be as simple and straightforward as possible.”

Actually, It was very straightforward, as I only had to:

  • Clone the project from GitHub
  • Get Composer and install
  • Tweak my existing Nginx configuration
  • Export the entries from this installation of WordPress into XML
  • Enable the ImportWXR extension, and import the entries into the new Bolt database
  • And finally, tweak a few configs and Twig templates

Below you can see the entries and menu items from this blog (screenshots are from Firefox Mobile):


Tracking with Tasker

After finding Tasker for Android and realizing all of the potential it has, I had to try it out. To begin, I decided to build a prototype backend service for receiving the location signals sent from the app itself. The possibilities seemed endless. As the website states:

Tasker is an application for Android which performs tasks (sets of actions) based on contexts (application, time, date, location, event, gesture) in user-defined profiles or in clickable or timer home screen widgets.

What I came up with isn’t nearly as robust as something like Android Device Manager or services like Google+ location sharing, but it did allow me to think through the ins and outs of implementing products like these. The project requires:

  • Tasker
  • A web server that can run PHP 5.4 code
  • A terminal that can run PHP CLI 5.4 code

The sending portion involves thoroughly understanding the location intricacies of Tasker, and a basic idea of how it works. I configured it as shown in the following images:

The receiving portion is setup by checking out and building the git repository, as well as configuring hosting for public/index.php.

 git clone https://github.com/kherrick/tracking
 cd tracking/
 bin/build.sh

If everything is in place properly when Tasker posts to the service, the data can be stored in an sqlite database or a simple log file.

DT:4-15-2011_11.12@BATT:13,SMSRF:+15558675309,LOC:32.2000000,-64.4500000,LOCACC:49,LOCALT:165.3000030517578,LOCSPD:0.0,LOCTMS:1458423011,LOCN:32.2000000,-64.4500000,LOCNACC:101,LOCNTMS:1458423011,CELLID:GSM:10081.13345030,CELLSIG:4,CELLSRV:service
DT:4-15-2011_11.14@BATT:12,SMSRF:+15558675309,LOC:18.5000000,-66.9000000,LOCACC:49,LOCALT:165.3000030517578,LOCSPD:0.0,LOCTMS:1458423021,LOCN:18.5000000,-66.9000000,LOCNACC:101,LOCNTMS:1458423021,CELLID:GSM:11172.24255141,CELLSIG:4,CELLSRV:service

The final piece is to generate the output from the data stored. When tracker.php is executed on the command line, the help page is displayed showing the available arguments.

$ ./tracker.php 
Tracker version .001

Usage:
  [options] command [arguments]

Options:
  --help           -h Display this help message.
  --quiet          -q Do not output any message.
  --verbose        -v|vv|vvv Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug
  --version        -V Display this application version.
  --ansi              Force ANSI output.
  --no-ansi           Disable ANSI output.
  --no-interaction -n Do not ask any interactive question.

Available commands:
  help   Displays help for a command
  list   Lists commands
  map    Generate a Google static map URL.

In this version, the main command “map” parses through the included demo log file and returns a URL for a static map from Google, with location points marked.

$ ./tracker.php map -l logs/YYYY-MM-DD_post_capture_DOT_log
Processing...

http://maps.googleapis.com/maps/api/staticmap?size=640x640&;zoom=4&;sensor=false&;markers=32.2000000,-64.4500000|18.5000000,-66.9000000|25.4800000,-80.1800000|32.2000000,-64.4500000

The Bermuda Triangle
The Bermuda Triangle


Observations on HTML

In December of 2012 HTML5 became HTML5 Logofeature complete according to the W3C, “meaning businesses and developers have a stable target for implementation and planning.” They continued to describe HTML5 as, “the cornerstone of the Open Web Platform, a full programming environment for cross-platform applications with access to device capabilities; video and animations; graphics; style, typography, and other tools for digital publishing; extensive network capabilities; and more.”

What a long road. Think back to the turn of the century. Shortly after HTML 4.01 was published as a W3C recommendation and XHTML 1.0 had it’s turn, it was said to be “developed to make HTML more extensible and increase interoperability with other data formats.” I remember the routine. Best practices at the time were separating form from content, moving to CSS, utilizing unobtrusive JavaScript, and practicing graceful degradation. Don’t forget to close your tags. Make it XML. Oh, and the machines are coming! :-)

As XHTML 2 approached it became clear that it would be an entirely new way of doing things, and not just an incremental approach that preserved compatibility. In 2004, Mozilla and Opera published the “Position Paper for the W3C Workshop on Web Applications and Compound Documents.” Some key sections included headings like, “Backwards compatibility, clear migration path”, “Users should not be exposed to authoring errors”, and “Scripting is here to stay.” Ultimately the initiatives were voted down and in response the WHATWG was formed. Between the years of 2007 and 2009, not only did the W3C accept WHATWG’s “Proposal to Adopt HTML5“, they allowed the XHTML 2 Working Group’s charter to expire, even going on to acknowledge that HTML5 would be the standard rather than the XML variant XHTML5. Regarding the two formats they wrote, “The first such concrete syntax is the HTML syntax. This is the format suggested for most authors.”

Since then, the whole web has been marching toward HTML5 domination, steadily learning best practice and implementation. In the earlier days I recall it not being as rapid as more recent, with people discussing the semantics, along with calls to prepare, but there has been a ton of solid information on the topic for awhile now and the momentum has shifted. Not only has the WHATWG decided that HTML is a living standard while the W3C publishes regular snapshots, the working draft of HTML 5.1 has been issued.

Lastly, I find it interesting to see the various web development strategies work themselves out as the craft changes. Graceful degradation (desktop centric) has steadily given way to a solid progressive enhancement (mobile first) approach as the web continues to gain in mobile traffic. In addition there are quite a few ideas going around on how to best accommodate all of the client browsers, especially in the comments. Should one start with an adaptive web design, and how is that related to responsive web design? Is one really a part of the other and should we have a strategy utilizing both? Maybe that’s the future… I guess it depends.

Time flies when you are having fun. Certainly I can be sure about one thing, I still like to close my tags. :-)

HTML5 Logo by W3C.


Visualizing Motion

The programmability of the Raspberry Pi comes in handy when you want to change the behavior of a circuit without moving a single wire. In this case, I decided the data I was logging with my former motion detection script was largely useless because it only ever recorded when a motion event occurred, but didn’t hint to how long it had happened for.

So, while I admit the new method probably isn’t the -best- way there is, I believe it to be incrementally better. :-) The main difference being that “sleep” is called for half a second in the mix to allow for the line to start at bottom, progress to top, and then back down after the event occurs. I suppose it is inaccurate in that motion didn’t actually happen exactly in this manner, but it does allow for a nicer graph. Google Chart Tools is used along with the PHP built-in web server effectively piping the “data.js” log file to Google for displaying. I know the Pi has to be online…

Finally every evening at 23:59, cron runs a maintenance script and moves the data around for archiving (I love this little linux box). My thoughts on further improvements have been pointing me toward PHPlot instead of the Annotated Time Line from Google or maybe even utilizing kst. Also I would like to avoid that half second delay in future revisions… oh, and I haven’t tested what happens if I dance around in front of the thing right at midnight. :-)

source for motion.sh

#!/bin/bash
function setup {
gpio export 17 out
gpio -g write 17 1
gpio export 18 in
start=0
echo The PIR sensor is initializing and calibration has begun.
i=0; while [ $i -lt 40 ]; do i=$(($i+1)); echo $i; sleep 1; done
}

function loop {
  while true
  do
    if [ `gpio -g read 18` -eq 1 ]; then #PIR sensor activated
      if [ $start -eq 0 ]; then
        echo '[new Date('`date +"%Y, "`$((`date +%m`-1))`date \
          +", %d, %H, %M, %S"`'), 0],' | tee -a \
          /opt/GoogleVisualization/app/data.js
        sleep .5
        echo '[new Date('`date +"%Y, "`$((`date +%m`-1))`date \
          +", %d, %H, %M, %S"`'), 1],' | tee -a \
          /opt/GoogleVisualization/app/data.js
        start=1;
      fi
    else #PIR sensor de-activated
      if [ $start -eq 1 ]; then
        echo '[new Date('`date +"%Y, "`$((`date +%m`-1))`date \
          +", %d, %H, %M, %S"`'), 1],' | tee -a \
          /opt/GoogleVisualization/app/data.js
        sleep .5
        echo '[new Date('`date +"%Y, "`$((`date +%m`-1))`date \
          +", %d, %H, %M, %S"`'), 0],' | tee -a \
          /opt/GoogleVisualization/app/data.js
        start=0;
      fi
    fi
  done
}

setup; loop

 
excerpt of data.js

[new Date(2012, 10, 28, 08, 06, 30), 0],
[new Date(2012, 10, 28, 08, 06, 31), 1],
[new Date(2012, 10, 28, 08, 07, 10), 1],
[new Date(2012, 10, 28, 08, 07, 11), 0],
[new Date(2012, 10, 28, 08, 07, 16), 0],
[new Date(2012, 10, 28, 08, 07, 17), 1],
[new Date(2012, 10, 28, 08, 07, 22), 1],
[new Date(2012, 10, 28, 08, 07, 23), 0],

 
source for index.php

<?php
$hostname='bb.local';
$directory='/opt/GoogleVisualization/app/';
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type"
    content="text/html; charset=utf-8" />
  <title>Karl's Passive Infrared Sensor Graph</title>
  <script type="text/javascript" 
    src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1', {packages: 
      ['annotatedtimeline']});
    function drawVisualization() {
      var data = 
        new google.visualization.DataTable();

      data.addColumn('datetime', 'Date');
      data.addColumn('number', 'Status');

      data.addRows([
        <?php include ('data.js'); ?>
      ]);

      var annotatedtimeline = new
        google.visualization.AnnotatedTimeLine(
        document.getElementById('visualization'));
        annotatedtimeline.draw(data, 
        {'displayAnnotations': true});
    }

    google.setOnLoadCallback(drawVisualization);

  </script>
</head>
<body style="font-family: Arial;border: 0 none;">
  <h1>Karl's Passive Infrared Sensor Graph</h1>
  <div id="visualization" style="width: 900px; height: 300px;">
  </div>
  <br />
  <a href="http://<?php echo $hostname ?>/archive">Archive</a>
</body>
</html>

 
source for the maintenance script

#!/bin/bash
directory=$(date +"%Y-%m-%d")
sleep 60 #wait until midnight, cron is set for 23:59 as this keeps the directory names and dates aligned
mkdir /opt/GoogleVisualization/app/archive/$directory
mv /opt/GoogleVisualization/app/data.js /opt/GoogleVisualization/app/archive/$directory/
cp -pr /opt/GoogleVisualization/app/index.php /opt/GoogleVisualization/app/archive/$directory/


Responsive Design View in Firefox

With the faster release cycle and updating of Firefox, it’s been interesting to see features show up in the application like they do in web sites. They’re there the next time you load it, and are discovered almost by accident if you do not go searching for them on purpose.

The other day, while testing various display sizes on this very site, I noticed a new developer tool that was released called Responsive Design View. This special viewing mode was released in Firefox 15, and allows for various device sizes to be represented using the Gecko layout engine without too much hassle.

How nice. :-) The last feature I found out by accident that made me think, “wow cool,” was the 3D view that was released in Firefox 11. It would have been wonderful to have while developing some animated tabs I had running on here back in the day. Particularly because they would pop up from behind the main container of content on the site… so I had to visualize them behind there waiting for an event to happen to send them shooting up via some jQuery effects.


Drupal Modules

I recently completed a project for a customer that afforded me the opportunity to dive into Drupal on better terms. On my first introduction to the software several years back (and Joomla for that matter) I determined I would be able to use my cross-browser theming skills more effectively if I chose WordPress as a base CMS.

This time around I was able to spend a considerable chunk of time reading the documentation (especially around the Theming Guide) and examples on other’s sites. Some topics online seemed incomplete so I did end up reviewing some chapters in a few books on Drupal 7 in particular. In my mind it seems like the developers of WordPress and Drupal are migrating toward each other in feature sets, but delivering solutions from different perspectives.

WordPress appears to be geared more toward out of the box social publishing, with an easy installer, and an easy updater. It can be pushed in almost any direction, but doesn’t seem to be the goal of the software creators. Drupal on the other hand feels more like a collection of building blocks for a web database. While Drupal has fields, blocks, regions, views, and fine grained permissions with roles… URL aliases require a module to automate their selection. There’s even a module to hook up Filemaker Pro and Drupal.

Back to the modules:

I utilized the following:

For spam free contact forms (almost):

For easy page editing:

For dynamic content:

For development and style: