Topic: Development

Building a Bartop Arcade Machine – Part 3

October 30, 2017

This is the last of the 3 part tutorial on how I created my own bartop arcade. Here are the first two parts incase you missed them:

Part 1
Part 2

Front button panel

This part of the build is really optional. I decided to put my 25 Cent buttons on the front of the machine along with a USB plug and headphone jack. The USB plug has come in really really handy, so I would very much recommend at least doing this.

If you’ve already drilled holes for other full size arcade buttons, then you’d do the exact same thing here. If you don’t have the 25 Cent buttons and want to use regular buttons, they are the exact same size holes.

Again, you’ll need to coat the outside of this panel with KILZ so you can paint it or stick an adhesive to it.

You can see the pictures below my front panel with the buttons and USB plug.

A good tip is to leave the wiring very long for the 25 Cent buttons. These required different voltage because of the LEDs and so I needed to route the power to a different source and needed much longer wire for it.

Cutting T Molding Grooves

You should do this before you get everything installed in the box so you can turn it on it’s side.

You’ll need a router, this bit, and this cutter.

Make sure you have the cutter spinning the correct way. I read that if you don’t it makes the MDF board smoke like crazy. Fortunately this didn’t happen to me.

Do a test run! Do not just cut it without cutting a small strip of T molding and testing out your cut on a scrap piece of MDF board. You’ll want to make sure the cut is centered and that your T molding, when in the grooves, doesn’t overlap the edge of the board.

Adjust the router so that the groove is exactly in the center of the board and then simple guide the router around it. Don’t insert the T molding until you’ve painted the entire box. Otherwise you’ll get paint on the T molding and some of it can be expensive.

Assembling the box

This is easily one of the more time consuming parts of the build. Measure 3 times before you cut. I had to redo the sides twice because things were slightly off.

After you have your bottom, sides, and back cut out, you’ll need to glue and screw (glew?) them together using the batons as you guides.

More importantly, at this point in your build, you should have the monitor/TV that you want to use. Make sure that the monitor doesn’t fit too tightly, but that you also have a plan for mounting it inside the box. I’ve seen all kinds of ways of mounting monitors inside of the box. You can leave it on the stand and just fasten it to the inside bottom of the box. Or you can use the mounting holes on the back of the monitor to mount it to a piece of wood that spans the entire width of the box, which is what I did (not pictured). I did this for one reason really; I wanted the inside bottom of the box to be free of anything so I could place my power strip, cooling fans, and anything else I needed.

For the most part, all of the pieces that I did not specifically mention like the marquee, the top of the box, and the area with the speakers just under the marquee will need to be cut to your exact width. Just as I mentioned before, I would base all of your measurements on how wide your control panel is. If your control panel is 50 inches wide, then your marquee needs to also be 50 inches or so wide. I ordered mine 52 inches wide so that I had room to cut it exactly the width that I wanted.

Wiring the Control Panel

This is going to be different depending on the controls that you buy and the number of buttons. Let me know if I can help on this part.
Here is a picture of the under side of the control panel. I’d say about 3/4 of the wiring was just plug and play. The USB controllers all came with USB boards that I can plug buttons into, which made it SUPER easy to setup. The rest of it I had to crimp a lot of ends on wires and figure out ways to get power to the controllers.

This is the USB Hub and all of the cables coming from the joysticks, buttons, spinner, and trackball. You can also see the wires for the first and second player buttons towards the bottom of the picture. Those wires needed to be very long so that they wouldn’t be pulled as I lifted up the control panel.

It’s basically a rats nest of wires and I could probably tidy it up a little. Most of the wires just aren’t that long so there is no danger of getting them hung on anything.

I can’t think of anything else to cover on this unless people want more information on the marquee or anything specific. Please feel free to contact me with any questions or if you need help on any part of your project.

Here is a gameplay video that lots of folks have been asking me to post:

Building a Bartop Arcade Machine – Part 2

July 31, 2017

First I want to say thanks to all the people that have reached out just to tell me how nice my build is. I poured a lot of time into it, and I don’t do things halfway. Hopefully these post will pass on some knowledge to others. Always feel free to ask questions and I’ll help where I can.

Control Panel

One person emailed me asking for a good starting place. I responded by saying to plan out your control panel first. My control panel changed three times and ultimately forced my to scale my monitor size up from 22″ to 27″. You can see the first iteration of the control panel that I made from cardboard here:

I would definitely construct everything in cardboard first just to get an idea of scale and measurements.

My ending design for the control panel wasn’t actually done in cardboard, but at that point I had done the control panel two times and figured that the final iteration was good enough to call “final”. After the design was finished, I sent it off to GameOnGrafix.com and got it printed up. I highly recommend them. They print amazing quality and they provide you with a cutting template.

This is where you’ll need the spade drill bits that I mentioned on the tool list. The larger size is for the full size arcade buttons and the smaller size is for the control buttons that I placed near the player two button in the upper right corner. I used a jigsaw to cut out the square holes for the joysticks after using a drill to start the hole.

I also used the template to cut the curve on the bottom. But because I’m terrible with a jigsaw, I cut just a little away from the edge and used a file to get the shape just right. I’d highly recommend this technique.

Here is the finished control panel board. I covered it will KIlZ Primer because the sticker adhesive for the control panel print out will not stick to MDF Board without it. This is very important. Nearly everything in the build is covered with KILZ first before I paint or stick anything to it. MDF board just doesn’t do well without being primed first.

Next, I used a router to cut out the areas for buttons, the joysticks, and the trackball. Fortunately, the previous owners of our house left a ton of stuff and told us they didn’t want it. This included a very nice router. Lucky me! All you need to do is hold the casing for these up to the control panel bottom and trace them. You can see that all of my buttons didn’t need to be routed. Only the ones that weren’t tall enough to feed through the control panel. Again I’ll warn, please wear a mask and goggles or you will cough for days and your eyes will irritate you. It also works well to scare your kids. 🙂

Next I stuck the control panel sticker on. TAKE YOUR TIME WITH THIS. Do not rush it. The GameOnGrafix.com website says to practice this a few times to get the feel of the material and I couldn’t agree more with that. Before you remove the adhesive backing, just practice to make sure you are lining up with the cuts and the button holes. You’ll have to trim the sticker likely, so make sure you hold it up to the control panel you cut t make sure it lines up perfectly.

After that, you’re free to start installing buttons and joysticks. I was SO excited to get to this part because it was finally taking shape. And my daughter had a ton of fun messing around with it even though she had no idea what it was.

Building the sides of the box

I still hadn’t realized at this point that the control panel was so large that it made my monitor size that I planned for seem like a dwarf scale monitor (sorry, but I’m not Tyrion Lannister). But I did know that the previously planned sides of the box weren’t going to be long enough to support the control panels depth. So my previous template for the sides looked like this:

This was taken from the StarCade templates on this site. Here is the PDF I used in case the link changed.

A few things on this particular template. All I really used it for was the general shape of the sides. I felt like the baton placement wasn’t ideal for my setup, so I only used the bottom and the back baton guides. The rest of the batons, I placed using this image as a guide taken from this PDF:

The other thing that I liked about the above plans was how the curve of the lower part of the side was and how the small front part of the sides leans in towards the base of the side. It just seemed like a nicer, sleeker design. So I ended up using the StarCade template that I posted above, combined with the batons and front panel from the WeeCade. It’s the control panel area of the sides that I had to elongate. Unfortunately, there isn’t a design or template for this. I just had to measure a longer area for it to match my control panel. So, having said that, I’d say to complete your control panel first, so then you can measure the exact depth you need for the side panels.

Here are my cut side panels and batons:

The back and bottom of the box

The back of the box could have been done a million different ways probably. I knew I may need to eventually get into the back of the box to fix things or replace something. In hindsight, I wish that I had made it slightly easier to remove the control panel without messing anything up. Granted, it really just slides out of the case, but I wish I had put hinges on it to flip upward or something. There are few things in the back that I need to access as the Raspberry Pi and USB hub sit directly under the control panel.

Anyway, I just bought some hinges and a lock for the back and cut an opening. Keep in mind that there are batons on both sides that the back has to fasten to. You can see in the middle picture below that I made the back batons much larger to support the back and the constant opening and closing of the door as well as supporting the top part of the arcade and helping to support the monitor weight.

Nothing fancy about the bottom or the top. I simply cut the MDF board to fit the entire footprint of the box based on the monitor size. At this point I realized I needed a larger monitor. It’s a 27″ monitor that is pictured above.

Update: I’ve gotten a few questions about how to cut the back door out of the board. I used a drill to make several small holes in the corner of the door area. When you have a hole big enough to put the blade of the jigsaw through, then you should be able to start cutting along the lines that you marked off for the door. The door size should be big enough for you to reach into and tinker with the wiring. Honestly, I ended up making it easier to lift the control panel out and very rarely open the back door. My Pi and USB hub sit under the control panel rather than in the back. There is just more room for cables and it doesn’t turn into a rats nest.

Power outlet

Something that I decided, after doing some research, was to do my own wiring for the power plug and use a power strip with USB plugs on it to power some things rather than having to run cables up to the Pi or to the USB hub. This ended up being a really good idea and I’d recommend it if you have USB cooling fans or LEDs.

You can see in the back and sides section of this post, the power adapter hanging down after I installed it. I simply cut the end off an old extension cord that we had and used that. It made a lot more sense to do that than ruin the cable to an expensive power strip. Hopefully these images will help people wire their power adapter plug the correct way. It took a lot of research for me to find the correct way. Before I plugged it up, my dad (thanks dad!) helped me test it as he is much more familiar with electronics than I am.

Painting the sides

With both of the sides primed with KILZ, I opted for a really heavy lacquered finished. I just used spray paint in a vented area. I probably put about 5 coats on each side. About 2 cans worth probably. Make sure that your sides are level because the paint will run a little if it’s not. Also make sure there is no breeze or you could get wrinkles or debris in your paint.

I painted the sides with a flat black paint first just to make sure I was ok with the color choice and to offer a little more primer.

Here are the sides attached and painted:

Here’s the third part of the tutorial.

Building a Bartop Arcade Machine – Part 1

July 15, 2017

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.

Game On Grafix

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: http://www.arcadepunks.com/retro-pi-downloads-page/

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. 🙂

Blueprints

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.

Update
I get a lot of email about my side panels and measurements, so I’ve finally gotten around to creating these. They aren’t to scale but they are pretty close. Most of the measurements are pretty accurate, but it’s hard to get absolute measurements because of the curves on the corners.

Here is a PDF of the plans.

I did not include the curve radius on the front part of the side panel because I totally freehanded this. Basically what I did was cut all part of the side panel except for that curve. I trimmed it so it was pretty close to what I wanted and then sketched the curve. Then I cut it with a jigsaw and used a file to make it smooth and even.

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.

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

August 16, 2015

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
    commerce_customer_profile_save($profile);    
  }

Twitter Lite Drupal Module

March 12, 2015

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: https://www.drupal.org/sandbox/tk421jag/2451325

Github repo: https://github.com/jasonglisson/twitter_lite

Being a successful Drupal Developer

February 27, 2015

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 – http://rogerdudler.github.io/git-guide/
Try Git – https://try.github.io/levels/1/challenges/1
GitHub – https://github.com/

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

February 24, 2015

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
	$(window).scroll(function(){
	    if($(document).scrollTop() > 200) {
		  // if so, add the fixed class
		  $top.addClass('fixed');
		} else {
		  // otherwise remove it
		  $top.removeClass('fixed');
		}
	});
});

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.

$(window).scroll(function(){

Then the fun stuff…

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

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 {
    position:fixed;
}

Hope this helps someone!

Adjust div height based on viewport

January 25, 2015

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();
      $('#top-header').height(window_height);
}

viewport_height();

$(window).resize(function() {
  viewport_height();
});

Convert Taxonomy Term ID (tid) to alias url path

January 19, 2015

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:

/taxonomy/term/$tid

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

January 10, 2015

HAPPY NEW YEAR!

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.


	$token = '[YOUR TOKEN FROM THE APP SETTINGS]';
	$token_secret = '[YOUR TOKEN SECRET FROM THE APP SETTINGS]';
	$consumer_key = '[YOUR CONSUMER KEY FROM THE APP SETTINGS]';
	$consumer_secret = '[YOUR CONSUMER SECRET FROM THE APP SETTINGS]';

	$host = 'api.twitter.com';
	$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);
	curl_close($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=\"http://twitter.com/search?q=$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=\"http://www.twitter.com/$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><br>
			<span class="tweet-text"><?php echo linkify_tweet($twitter_data[0]->text); ?></span>
			<div class="intents">
				<span class="reply"><a target="_blank" href="https://twitter.com/intent/tweet?in_reply_to=<?php echo $twitter_data[0]->id; ?>"><i class="fi-arrow-left small"></i> Reply</a></span>
				<span class="retweet"><a target="_blank" href="https://twitter.com/intent/retweet?tweet_id=<?php echo $twitter_data[0]->id; ?>"><i class="fi-loop small"></i> Retweet</a></span>					<span class="favorite"><a target="_blank" href="https://twitter.com/intent/favorite?tweet_id=<?php echo $twitter_data[0]->id; ?>"><i class="fi-star small"></i> Favorite</a></span>
			</div>
		</div>
	</div>
</div>

You may need to download the OAuth code from here: https://github.com/abraham/twitteroauth/tree/master/src