Laptop Control Box

This project was inspired by Apples recent addition of the touch bar to the new Macbook pro. It runs on Arduino Nano and interfaces with Processing via USB connection, creating a unique + intuitive way to interact with my Laptop.

It has a 5 button interface which allows me to launch apps, open folders and pull up my favorite websites with a quick button press. This version currently gives me to access 24 different functions which are divided into 6 categories of 4 functions for ease of use, these categories include: Tools, Media, Browser, Utilities, Social and Lifestyle. Categories can be navigated through using the small button on the side and each category is visualized with a unique color by an RGB led within the device, illuminating the plastic buttons from underneath. These colors allow me to associate which category the software is in without looking at the screen.

As precedent for this project I took these words from Apples Chief Design Officer about the touch bar:

"We're introducing a new way to interact with your notebook, a multi touch bar provides a more intuitive, more immediate connection to your content. Commands that were once hidden are now visible, easily accessible and also customizable." - Jonathan Ive.

In short: The Laptop Control Box allows you to assign specific applications and functions to each button which can then be launched without the need to navigate through your Laptop, improving accessibility to content.

As someone who creates a lot of digital content on a Laptop I find myself constantly bouncing between various software's, files, and windows frequently during projects. Traditionally, navigating through this content requires the mouse / trackpad which can be time consuming when trying to work efficiently. Fortunately, with inspiration from Apple I was able to create a device that innovates upon the traditional MacBook workflow.

This Instructable outlines the full creative process from manufacturing and coding to final product. It has been designed to interface with a MacBook Pro but can easily be adapted for Windows.

All laser cutting files and code are attached and open source.

Step 1: Parts List

The Design requires only a few parts:

• Arduino Nano
• 4x 12mm button switches
• 1x 6mm button switch
• Pine wood block (or equally strong wood)
• 3mm Acrylic plastic sheet
• Perf board
• Keyes RGB led module
• Jumper wires
• Heat-shrink tubing
• 5x 10k ohm resistors
• Soldering iron + solder
• Super glue
• Mounting foam

You will need access to a laser cutter and a drill press.

Step 2: Prototyping the Circuit

For this step I recommend using a breadboard to prototype the circuit. The fritzing diagram attached to this step shows the final circuit I settled on.

The circuit is pretty simple; It uses 5 switch buttons (4x 12mm buttons, 1x 6mm button) and an RGB led Module.

All 5 of the buttons are wired the same way, 1 10k ohm resistor on the bottom right pin which is grounded, 1 positive power wire to the bottom left pin attached to the nanos VIN pin and 1 transmission wire on the top right which goes to DIN pins 1-6 on the Arduino nano.

When you have created the full circuit as shown in the fritzing sketch you should be able to upload the TEST Arduino code attached to this step to test if the circuit is working. To test this code, upload it to the Arduino and open the serial monitor. Set the serial monitor to 9600 baud and press some of the buttons to see if they respond. If it is working properly each button should write a number between 1-5 to the serial monitor when pressed. Each time you press the button that writes 5 to the monitor the RGB led should change color, iterating through an array of possible colors.

After you've tested the circuit with the attached code you can move onto the next step where I will show you how to connect this circuit to processing and gain control over your laptop.

Step 3: Connecting to the Laptop

Firstly you will need to head over to Processing.org and install Processing 3.

Processing is a development environment build for designers which is perfect for creating java applications and visualizing your ideas. The coding style is very similar to Arduino with a few small fundamental differences.

The .pde file attached to this step (within the .zip file) is the code I have written that allows Arduino to interface with your laptop.

It has a built in function called launch(); which lets you launch any application or folder that is stored on your Laptop.

The code uses this function along with link(); which is similar but handles launching websites instead.

These commands are executed when 1-4 top buttons are pressed, each one is assigned to a specific application, web address or folder.

There is a massive community behind Processing who have contributed hundreds of libraries to expand its potential uses. The program I have written makes use of a Serial library which lets processing communicate with Arduino through a USB connection. In this instance the Arduino sends a number from 1-5 over to Processing depending on which one of the five buttons has been pressed. I have mapped all 5 of these signals into the processing code to make an interactive user interface as shown in the video attached to this step.

The interface allows the user to toggle through 6 sets of functions each with 4 options. The video shows me navigating through and launching applications + opening files and bookmarks.

Step 4: Building the Box

The base is constructed of Pine wood, by cutting a 85mm x 85mm x 27mm (width,length,depth)
section I was left with a solid block of wood that was both durable and elegant looking. Through subtractive manufacturing I was able to fit all of the electronics within this wooden volume. This basically means I cut away at the wood to make space for all of the internal parts.

Ideally this could have been done with a CNC router but I decided to go old school and excavated the wooden volume using drill-bits and reams.

The button interface is constructed using 3mm acrylic plastic in frosted white which has been laser cut to shape. The frosted white finish is perfect for diffusing the RGB light that will glow underneath the buttons.

The laser cut buttons are mounted to the button switches. To achieve this I increased the surface area of the button switches by gluing small plastic rings around them to increase their diameter and then gluing the plastic buttons ontop.

The four button switches are then soldered to perf board and sit directly under the top plastic layer so the plastic buttons are flush with the top surface. The fifth button is a smaller button switch and is embedded in the side of the wooden housing in an 8mm hole.

The Arduino Nano is embedded at the very bottom of the device with its USB input exposed through the edge of the wood by a hole large enough to fit the USB cable.

Step 5: Soldering the Final Circuit

The first thing you want to do is secure the Arduino Nano to the base of the wood, ideally at the lowest possible point so it wont get in the way of the wiring. To secure the Nano tightly I glued some foam to the base to hold the Arduino around its edges. The important thing here is to keep the Arduino pressed hard against the inside edge of the wood with its USB input available from the outside through a hole in the side.

You will then need to cut two smaller sections of perfboard to sit behind the Arduino. The reason for this is to seperate all of the ground wires from the positive wires while connecting them to their pairs.

You will now need to solder the positive and negative leads from the 4 main button switches to their corresponding perf board sections as shown in the fritzing diagram attached to this step. repeat this for the 5th side button, making sure not to solder any negitive wires to the positive perf board and vise versa!

Now you can begin connecting the buttons transmission wires to the Arduino Nano. The order is as follows (when viewed from the top):

Top left button: Transmission wire to D2

Top right button: Transmission wire to D3

bottom left button: Transmission wire to D4

bottom right button: Transmission wire to D5

The fifth button is a little different and should be done carefully to make sure it can eventually fit through the side hole when soldered. Its transmission wire should be soldered to pin D7 on the Arduino.

The RGB led should be fitted in against the inside surface of the plastic so it will illuminate the 4 button interface from inside. It's ground pin should be soldered to the - perfboard as shown in the fritzing diagram.

This led should have 3 transmission pins:

Red: transmission wire to D13

Green: transmission wire to D12

Blue: transmission wire to D11

Once all of this has been done press the completed circuit into the wooden housing as compact as possible. Make sure no wires are touching that shouldn't as this could cause the whole circuit to fail.

You should now be ready to glue your buttons on as pictured in the last two images attached to this step.

Step 6: *extra* Crafting a Carry Pocket

You will need:

• 300x300mm Felt fabric x3
• Stitching needle and thread
• Laser cutter or scissors

After using the completed Laptop Control Box I decided I wanted to take it with me in my Laptop bag to use on the go. To protect it from scratches and damage while moving around I designed a quick laser cut carry pocket out of felt. The design is very simple, I just cut the two shapes shown in the third image from woolen felt along with an acrylic black felt lining and stitched them at the edges using what they call a blanket stitch.

I then stitched a button onto the main body of the pocket with a piece of string on the flap that wraps around it to keep it closed.