Topic: Development

Building a Bartop Arcade Machine – Part 1


For a long long time, I’ve wanted to build an arcade machine of my own. I researched doing it about 17 years ago, but the cost and the time weren’t something that I had (and I guess I still don’t).

Since about 1998, I’ve been using the MAME (Multiple Arcade Machine Emulator) program to run ROMs (video games) of all of my favorite games from the 80s and 90s. So the really really tricky part of building the program to run the games has already been done.

But what about the computer to run the games on?

Advancements in technology have made it much much easier to build a low cost, high functioning arcade machine. The main issue that I kept running into was needing to build a mega computer with a large computer monitor to actually play the games on. 20 years ago, that would have been extremely expensive. But now that we have credit card sized computers, such as the Raspberry Pi, the cost is significantly lower.

There are dozens and dozens of plans for bartop arcade cabinets online, but none of them were exactly what I wanted. So I decided to make my own design from a combination of different designs I found. One problem that I discovered is that all of the bartop arcade machines that were built for two players were actually very crowded and having two grown adults playing at the same time would basically have them touching shoulders with no room to move at all. So I knew I would have to make mine much wider than any other designs.

First, here is a video of my finished cabinet:

So….let’s get right to it.

Parts/Tools List

  • Raspberry Pi 3
  • MDF Board – Both 3/4 inch and 1/2 inch (get a few in case you mess up)
  • A monitor – In this case, I went with this Sceptre 27″ Monitor
  • Micro SD Card – This depends on the image that you use and how many roms you want to load. I’m using a 128 GB card. We’ll get to the images and roms later.
  • Arcade buttons and joysticks – There are many to choose from. I went with these packages with 2 player joysticks, and another single player joystick since I planned on having 2 players, and an analog controller for analog games. The all come with buttons too!
  • Speakers – These Amazon speakers are great and easy to take apart.
  • Power Strip – I love this power strip (ISELECTOR 4-Outlet Surge Protector with 4 USB Output Power Strip Charging Station) because it’s got USB plugs in it as well. Not everything needs to be plugged into the Pi, so I went with this option and it’s been great.
  • A router
  • This router cutter for the T Molding – Whiteside 6700A Slotting Cutter 1-7/8CD 1/16CL 5/16Bore 3Wing
  • This router bit for the cutter – Whiteside Router Bits A200B Slotting Cutter
  • Screws. Get an assortment 1 inch, half inch, small, long. You never know what you’ll need for this.
  • Drill
  • Jigsaw
  • Circular saw or Skil Saw
  • URBEST Inlet Module Plug 5A Fuse Switch UR and CE Certification Male Power Socket 10A 250V 3 Pin IEC320 C14
  • USB & 3.5mm Dash Flush Mount Cable
  • 3ft HDMI Cable
  • Player 1 and Player 2 buttons – I bought these and they work well.
  • USB Hub – Here is a list of USB hubs that work with a Raspberry Pi. I’d suggest looking at it because I learned the hard way that not all hubs work. Don’t buy a USB 3.0 hub. Make sure it’s powered.
  • Marquee Light – I got this one and it’s very bright and works great.
  • T-molding – There are all kinds of colors here
  • 2 Spade Drill bits (if you use the buttons I used): 3/4 Inch bit and 1 1/8 Inch bit. This is to drill the button holes.
  • A dust mask
  • Eye goggles. Seriously. Get these and the dust mask. MDF board puts a lot of particles in the air when you cut and some of it is extremely bad for you. Plus it will irritate your eyes and lungs.

If you do my type of control panel, you’ll need all of these additional parts:

  • Trackball
  • Trackball LED – The LED module comes with this trackball.
  • Spinner
  • 25 Cent buttons with lights – Bought these and they are great!
  • 6 additional arcade buttons – There are all kinds here
  • LED Wiz (to light up the trackball LED)

I ordered my graphics from this place and they are amazing, sharp and vivid.

Prepping the Raspberry Pi

Raspberry Pi’s are really neat little things. You can do so many things with them. I’m running a development server with 4 of them, and I run a Plex server with another one that host thousands of movies online so I can watch them from anywhere.

We’ll be using RetroPie, a retro gaming emulation operating system specifically for Raspberry Pi, to transform the Pi into your central computer for the cabinet. Not only does RetroPie play arcade games, but it also plays NES, Super NES, SEGA, and a bunch of other systems. It’s pretty incredible.

Depending on the size of your micro SD card, you’ll want to hunt down a RetroPie image. There are tons listed here:

I’m not a fan of downloading things through online downloading companies like MegaDownloads. Most of them will charge you for large downloads or at least want you to sign up for an account to access anything. So I prefer to use the torrent links. I’ve set my Pi up to use Rey’s Image. Here is a magnet link to the sd card image. It will likely take 5-8 hours to download the .img file because they are huge. There are lots of different RetroPie images online if you just search for them. I’ve tried a handful and Rey’s Image is by far the most solid build and is almost problem free.

Once you download the .img file, you’ll need to transfer the img on to the SD card. I’d highly recommend either the Apple Pi Baker or Etcher to transfer your .img file to the sd card.

After you transfer the image to your SD card, you should be able to put in the Raspberry Pi and fire it up. For some folks, that may be enough. You could easily just hook that up to any TV and attach your controllers to your Pi and be done with it. But for us, we’re building an arcade cabinet and doing things the hard way. :-)


As I mentioned before, I wasn’t able to find the exact blueprints that I wanted, so I elongated parts of various blueprints and created my own layouts for the cabinet.

Here are some blueprints that you can print off and cut from. You’ll likely have to print these off and tape them together unless you have a large format printer:

My cabinet has a deeper marquee area by just an inch or so, and the control panel area is deeper by about 10 inches to accommodate the trackball, spinner and the extra joystick. It’s also much much wider than most bartop arcade cabinets you’ll find online.

The control panel blueprints are a completely different issue. That depends on a lot of things. Do you want MAME control buttons? Do you want coin buttons, or player start buttons, or both? Do you want a full 8 button control panel or just 3-4 buttons? Trackball? Spinner?

One of the first thing I would research is the number of buttons your favorite systems use. In the end I opted for 8 buttons. I’d rather have too many, than too few and not be able to play a certain game. Plus…and I just realized this, the more buttons you have, the more you can program to do different things, and the less you have to depend on a keyboard. Check this page out for all of the different system button layouts.


If you want the exact Photoshop PSD control panel file I made, here it is. It’s huge (over 200M) and you’ll need the NASA fonts. I designed this entire thing myself, and after all this time, I just realized that I misspelled multiple (multipule). I’ll post the marquee design later.

Before you cut MDF board…

Before you start cutting MDF board, it would really be helpful to make a full scale model to help you get all of your measurements. Make it out of cardboard so that you can draw on it and cut it easily. You’ll want to also print out your templates for the control panel. I setup all of my buttons and played a few games just to see if I like the layouts. I ended up changing the button layout 3 times until I found the one that I liked.

20170306_182952 20170302_101118









You can see on the first photo that the bottom part of the side of the cabinet doesn’t extend far enough out to support such a large control panel. So I knew I’d have to customize the sides. You can also see where I traced the blueprint for the marquee area on the side, and how I extended it out further to accommodate my speakers and lights.

Here is the second part.

The Drupal Commerce Address Duplication Issue

Recently I was working on a very large Drupal Commerce website that required many addresses for shipping (not billing) per customer.

The setup of the site was rather unique and required us to create many custom modules utilizing. We also needed a way to create orders on the front end of the site (the shopping cart side) and the back end of the site (the administrators side).

One thing that we noticed was that the checkout process on the front end and back end were very different. As a front end user, it’s the pretty typical shopping cart experience, but the backend was very different.

Going through the order creation process, we noticed there wasn’t a good way to search for a user. But even if we did manage to reference the user correctly using their email address, we couldn’t select one of their previously user addresses for an order.

Enter in the Commerce Admin Order Advanced module.

This module was exactly what we needed to search for customers and pick a previously used address that is stored as a Customer Profile in Commerce (and the address book if you’re using the AddressBook module).

But right off the bat, we noticed that ever single time we placed and order for a user, their address profile was duplicated. So one customer would have dozens of the same addresses entered into the system. You can see from he screenshot above, the same address is showing in the dropdown twice.

In one test, I had at least 20 of the same addresses in the system for one user. So if a manager went to go create an order, the same address was showing up over and over again. This didn’t seem like a very good user experience.

The strange thing is that, after we did some research, we realized that the address duplication was default commerce behavior.

Customer Profiles seem to endlessly duplicate!

Our solution was to allow the duplicate address to be created, but if the address is being referenced from an already existing customer profile, the new profile that is created when the order is saved would be set to deactivated.

// Load the current shipping profile
  $profile_dedup = commerce_customer_profile_load($form_state['values']['shipping_profile']);

  // If the profile is set and has an ID
  if(isset($profile_dedup->profile_id)) {
      // Load the referenced customer profile into the order
      $profile = commerce_customer_profile_load($profile_dedup->profile_id);

      // Set the status to deactivated so the shipping profile doesn't show up in the select box
    $profile->status = 0;
    // Save the profile as deactivated

Twitter Lite Drupal Module

A while back, I was working on a Drupal website that needed to be lightweight and flexible. One of the requirements was a Twitter feed.

Now, don’t get me wrong, the official Twitter Drupal module is nice and has some great features. I have always felt like it’s a little bloated and not as easy as it should be to make a Twitter feed.

I decided to make a quick an easy to use module to solve my problem.

I’m naming it Twitter Lite since it is the lite version of the Twitter module. It doesn’t have all of the features that the Twitter module has.

This module creates two Twitter feed blocks. You can also choose how many tweets to show per block.

Eventually I’ll extend this to show hashtag searches as well as usernames. For now, it only uses usernames.

There are some fallbacks that need to be made also.

Feel free to try it out on your own Drupal 7 site.

Please feel free to let me know if you have any bug reports or issues with the module. I’d like to actively maintain this and prep it for Drupal 8.

Drupal Sandbox Project Page:

Github repo:

Being a successful Drupal Developer

I’m a web developer. I enjoy what I do. A lot.

About 7 years ago, I discovered what it was that I was missing in web development. Drupal.

Drupal is open source software maintained and developed by a community of over 1,000,000 users and developers. (That’s taken directly from Drupal’s website.)

The first Drupal website I put together was a combination of downloading modules, hacking themes, and generally having no idea what I was doing. But it was fun and I was learning what Drupal was. I recall it was just after Drupal 6 was launched. Seems like it was eons ago.

I wish I could go back and yell at the developer I was then for not doing things a better way. Knowing what I know now, my development skills have dramatically improved and I try very hard to stay within the Drupal Best Practices documentation.

Here are some of my tips for being a successful Drupal developer.

Don’t hack core!

This is basically one of the cardinal rules of Drupal development. Hacking core files of Drupal means updating the site will likely break everything. Also hacking modules means that you won’t be able to update them for bug fixes and troubleshooting.

Learn to use the Drupal API

Eventually, you’ll find the need to write functions and do crazy things with your code. The fun part of developing for Drupal is that the API rocks. I mean, really rocks. There are so many cool functions and code snippets for doing things that would otherwise take you forever to write/code yourself. Learn to use things like node_load(), path_to_theme(), node_save(). These three functions are simple but extremely useful. Use case: I recently wrote a module that went through 20,000 nodes for a Drupal website, retrieved data from another website using their API, brought that data back to my project site, then saved the data using node_save(). Doing that by hand, no. It would take weeks on top of weeks. The script I wrote took 90 seconds. Boom. Drupal Magic.

Contribute to the Drupal Community

Whether you contribute code, testing, or bug reports, Drupal thrives off the community. This is something that I failed at for a while. I simply felt that I wasn’t good enough to contribute to discussions or code. However, simply reporting a bug is useful to the community. If you’ve used a module and had an issue with it’s basic usage, report it. Search for the bug you’re reporting first. It could be that it’s a duplicate issue. Please please please search for the issue first. Don’t be a lazy Googler.

Learn Version Control

This may be one of the most valuable takeaways from this post. Version control isn’t just used by the Drupal community, it’s used by coders everywhere for a wide variety of things. Personally, I use Git for version control, but there are many other options. Some people find it very daunting to do things in Command Line or Terminal (that thing that looks like MS-Dos for those that don’t know). It’s really very simple though. If you learn version control, you’re value to a company will go up significantly. I promise. Here are a few sites that might help:

  • Easy Guide –
  • Try Git –
  • GitHub –

Learn helpful shortcuts

For a long long time, when I setup a Drupal website, there was a lot of downloading, decompressing files, placing modules and themes in the correct place, then finally starting to work on the project. Enter Drush. If you are using Command Line/Terminal, then Drush will be your best friend. Using Drush, you can download Drupal, setup themes and install them, download modules and install them, update Drupal, backup you site, and a slew of other things using very basic and easy commands. It’s cut down my setup time to just a few minutes. Read up on Drush here.

Setup local development environments

Gone are the days where you had to have a server to work on a website. There are some very easy to setup tools that you can use to setup your site on your desktop or laptop so you can work on it anywhere without the internet. I once worked on a local website for 2 hours while my train was stuck in a cellular dead zone in Virginia. Try using MAMP to setup your local environment so you can get coding and work on your sites from anywhere.

Attend conferences and meetups

Speaking for myself, I learned Drupal development from a hand full of very gifted developers over a long period of time. It never hurts to find a developer willing to share some knowledge with you. The best resource to learn Drupal is by going to conferences and meetups to hear people speak on a wide variety of topics. Maybe you can even take some training. Drupal Con is a big one. I’ve never had the opportunity to go, but something tells me that I will soon. My favorite conference was the 2011 Do It With Drupal (DIWD) conference by Lullabot. My mind was blown about every 60 seconds. I came back understanding more about development skills, Drupal development, and the future of the web. Here are some highlights from that conference.

Don’t be closed minded to other technologies

I love Drupal. We know this. But I also love WordPress. I can hear some developers now: What’s that you say! Traitor! Burn him!

Calm down people. Being a web developer doesn’t mean I only want to do things my way or I only want to use one technology to do things. You need to learn when and where specific software and tools will work best. If someone says to me “I want a website, but I’m not that good at computers, but I do want to write blog post” then I’m likely gonna recommend WordPress. But if someone comes to me and said, “I want a custom website where I can load in videos, pictures, and other content. I also want to sell things, etc etc” then I’d likely recommend Drupal.

Having said that, there are other options outside of Drupal and WordPress that I’ve also used from time to time. Flat-file CMS’ are popping up everywhere. they are lightweight and easy to setup. One of my favorites is GetSimple. Another one is Pico.

Hopefully this will help someone figure out what they need to learn to be more successful at Drupal development. As always, feel free to contact me if you have any questions. Except for haters. You guys can jump in front of a bus.

Simple Fixed Header Javascript/CSS

I’ve done several post on fixed headers. I get a lot of emails about them and a lot of site traffic. Obviously, a lot of people find them useful. So I’m going to post the simplest way that I know to make one. Be it in Drupal or WordPress, or even flat-file sites; this is the easiest way that I do fixed headers.

Below you’ll see some javascript. Take a look at it and then I’ll explain.

$(function () {
	//store the element
	var $top = $('.navigation-wrap');

	//store the initial position of the element
	    if($(document).scrollTop() > 200) {
		  // if so, add the fixed class
		} else {
		  // otherwise remove it

The first line is the basic shorthand document ready jquery opening. So we’ll skip to the next few lines.

var $top = $('.navigation-wrap');

Where you see ‘.navigation-wrap’, you’ll want to replace this with your header wrapper selector or whatever selector you have that you want to fix to the top of the viewport. This is storing the selector as a variable called “$top”.

Next you’ll see a function that detects scroll events on the browser window.


Then the fun stuff…

if($(document).scrollTop() > 200) {
    // if so, add the fixed class
} else {
    // otherwise remove it

This code basically tells your viewport “Hey, when I scroll down greater than 200px, I want to do something.” In this case, we are adding a class to the previously referenced variable called “$top”.

The fun part of this is that you can also remove the class by using an else statement, which you can see above.

Feel free to adjust the ‘200’ to whatever you’d like it to be. Or if you’re really brave, you can use the script that I posted about viewport size to calculate the size of your first div, and make the menu stick after you’ve scrolled that distance. Just like my homepage does. :-)

Now, in your stylesheet, you’ll need to add some style to the selector that you’re fixing to the top. Pretty simple. Something like this..

.navigation-wrap.fixed {

Hope this helps someone!

Adjust div height based on viewport

Did you ever wonder how some sites scale their intro or top homepage area to be the size of the entire screen? It certainly looks good on larger screens with background images or large images.

This is accomplished with some pretty easy javascript or jquery.

Below you’ll see a function that targeting a div with the ID ‘top-header’. Since that div is given a width of 100%, the height is the only thing we need to worry about.

This code will set the div height to whatever the height of your viewport window is on page load.

function viewport_height() {
      var window_height = $(window).height();


$(window).resize(function() {

Convert Taxonomy Term ID (tid) to alias url path

While working on a tremendously large Drupal 7 project, I found myself needing to convert Taxonomy tid’s to full URLs. The easiest solution was to just print out the value of the field after the taxonomy path url, like this:


A problem with this is that it’s not following the alias naming conventions that you may have setup for your site. In my case, I had hundreds of taxonomy terms that were setup with specific URLs.

Luckily, Drupal has it’s own function to link the terms to their alias URLs.

$url = drupal_lookup_path('alias', 'taxonomy/term/'. $known_tid);

So in my case, I was able to write a foreach statement to cycle through all of my terms that have been referenced through an entity reference field.

foreach ($node->field_related_issues['und'] as $val) {
    $tid = $val['taxonomy_term']->tid;
    $url = drupal_lookup_path('alias', 'taxonomy/term/'. $tid);
    echo '<li><a href="/' . $url . '">' . $val['taxonomy_term']->name . '</a></li>';			    

Twitter Feed Using Php


To start off the year, I’ll post something that I’ve been using a lot in the last month or so for a few sites that I’ve built.

A few years ago, Twitter ended support for their 1.0 API and all twitter feeds across the net began to crash if they weren’t updated to the new 1.1 API. I remember that day well because years past clients were calling wondering why their twitter feeds were no longer working. Naturally, if I were under a maintenance contract they would have been fixed prior to the API changes.

Below is a quick and easy snippet for getting your twitter feed to work using the 1.1 API and OAuth. To use this you’ll need to login to Twitter and create an app, then enter your app information in the token and key areas.


	$host = '';
	$method = 'GET';
	$path = '/1.1/statuses/user_timeline.json'; // api call path

	$query = array( // query parameters
	    'screen_name' => '[ENTER YOUR TWITTER USERNAME HERE]',
	    'count' => '1' // How many tweets do you want to show?

	$oauth = array(
	    'oauth_consumer_key' => $consumer_key,
	    'oauth_token' => $token,
	    'oauth_nonce' => (string)mt_rand(), // a stronger nonce is recommended
	    'oauth_timestamp' => time(),
	    'oauth_signature_method' => 'HMAC-SHA1',
	    'oauth_version' => '1.0'

	$oauth = array_map("rawurlencode", $oauth); // must be encoded before sorting
	$query = array_map("rawurlencode", $query);

	$arr = array_merge($oauth, $query); // combine the values THEN sort

	asort($arr); // secondary sort (value)
	ksort($arr); // primary sort (key)

	// http_build_query automatically encodes, but our parameters
	// are already encoded, and must be by this point, so we undo
	// the encoding step
	$querystring = urldecode(http_build_query($arr, '', '&'));

	$url = "https://$host$path";

	// mash everything together for the text to hash
	$base_string = $method."&".rawurlencode($url)."&".rawurlencode($querystring);

	// same with the key
	$key = rawurlencode($consumer_secret)."&".rawurlencode($token_secret);

	// generate the hash
	$signature = rawurlencode(base64_encode(hash_hmac('sha1', $base_string, $key, true)));

	// this time we're using a normal GET query, and we're only encoding the query params
	// (without the oauth params)
	$url .= "?".http_build_query($query);

	$oauth['oauth_signature'] = $signature; // don't want to abandon all that work!
	ksort($oauth); // probably not necessary, but twitter's demo does it

	// also not necessary, but twitter's demo does this too
	function add_quotes($str) { return '"'.$str.'"'; }
	$oauth = array_map("add_quotes", $oauth);

	// this is the full value of the Authorization line
	$auth = "OAuth " . urldecode(http_build_query($oauth, '', ', '));

	// if you're doing post, you need to skip the GET building above
	// and instead supply query parameters to CURLOPT_POSTFIELDS
	$options = array( CURLOPT_HTTPHEADER => array("Authorization: $auth"),
	                  //CURLOPT_POSTFIELDS => $postfields,
	                  CURLOPT_HEADER => false,
	                  CURLOPT_URL => $url,
	                  CURLOPT_RETURNTRANSFER => true,
	                  CURLOPT_SSL_VERIFYPEER => false);

	// do our business
	$feed = curl_init();
	curl_setopt_array($feed, $options);
	$json = curl_exec($feed);

	$twitter_data = json_decode($json);

	function linkify_tweet($twitter_data) {

		//Convert urls to <a> links
		$twitter_data = preg_replace("/([\w]+\:\/\/[\w-?&;#~=\.\/\@]+[\w\/])/", "<a target=\"_blank\" href=\"$1\">$1</a>", $twitter_data);

		//Convert hashtags to twitter searches in <a> links
		$twitter_data = preg_replace("/#([A-Za-z0-9\/\.]*)/", "<a target=\"_new\" href=\"$1\">#$1</a>", $twitter_data);

		//Convert attags to twitter profiles in <a> links
		$twitter_data = preg_replace("/@([A-Za-z0-9\/\.]*)/", "<a target=\"_blank\" href=\"$1\">@$1</a>", $twitter_data);

		return $twitter_data;


/* 	print_r($twitter_data); */

// Use the print_r above to view all of the twitter settings and data that you want to use

Below is a basic example of how you would parse the twitter data using the code above.

<div id="tweet">
	<div class="row">
		<div class="large-10 columns tweet-wrap">
			<span class="date"><?php 

						$date = new DateTime($twitter_data[0]->created_at);
						$date->setTimezone(new DateTimeZone('America/New_York'));
						$formatted_date = $date->format('M d, Y');
						echo $formatted_date;			

			<span class="tweet-text"><?php echo linkify_tweet($twitter_data[0]->text); ?></span>
			<div class="intents">
				<span class="reply"><a target="_blank" href="<?php echo $twitter_data[0]->id; ?>"><i class="fi-arrow-left small"></i> Reply</a></span>
				<span class="retweet"><a target="_blank" href="<?php echo $twitter_data[0]->id; ?>"><i class="fi-loop small"></i> Retweet</a></span>					<span class="favorite"><a target="_blank" href="<?php echo $twitter_data[0]->id; ?>"><i class="fi-star small"></i> Favorite</a></span>

You may need to download the OAuth code from here:

Display only the first menu link in Drupal 7

This is a useful Drupal 7 code snippet that can echo out the first (or whatever link you prefer) link in a menu. Recently, I used this to create a menu with one link used for a Donation button. I wanted to prevent any other items being echoed or inserted into a block area, so I used this so that the first menu item was always the only one that would be shown. It was useful since, on other pages, the full menu with other links under “Donate” was used in Block form.

$menu_depth = 1;
$menu_tree = menu_tree_output(menu_tree_all_data('menu-donate', null, $menu_depth));
print drupal_render($menu_tree);

Using Javascript to get a variable from a URL

Sometimes, within a website, you see variables that are passed through the URL. The variable part of the URL usually looks something like this:

In the above example, ‘tab’ is equal to ‘mo’ and ‘authuser’ is equal to ‘0’.

This snippet below with let you extract the values of variables by parsing the URL. It specifically looks for the & and = symbols so you’ll need to make some changes to the regex part (/[?&]+([^=&]+)=([^&]*)/gi) if you’re using symbols other than that.

function getUrlVar() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    return vars; 
var tab = getUrlVar()["tab"];
var user = getUrlVar()["authuser"];