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.

Comments

[JibinL]

Does this codes works on Win7 32bit?

[Carl Gordon Media]

Yes the code should work on windows 7, however you will need to adapt the application addresses within the processing code to the right locations for the .exe files that will launch your apps. These will be specific to your own computer.

[Echochrome3]

Would this be something that could be created for a Windows computer? If so, how?

[Carl Gordon Media]

Yeah this could easily be adapted for windows, it would just involve changing the application addresses within the software for the apps you want to launch with the buttons.

[actuonix]

Awesome project!

[Carl Gordon Media]

Thanks!

[Quantz]

Carl, I am having trouble getting your code to work. I built the circuit, installed Processing and cannot get the Arduino and my Mac to communicate. I definitely have the correct serial port selected in Processing as it's the same one that I used in the Arduino IDE. Now I admit I am new to Arduino, but the <test_code.ino> file I downloaded and the <Laptop_buddy_rgb.ino> look identical to me. Shouldn't they be different? Please let me know. Thanks!

[Carl Gordon Media]

Hey sorry about that! I realise now I accidentally saved the test code over the final code before uploading it. I have just fixed, tested and
uploaded the new working .ino file to step 5 as <Laptop_buddy_rgb2.ino>

The only difference between the test code and this one is the 'Serial.println' function has been changed to 'Serial.write'.

Println is used to print the data to the serial monitor whereas write is used to transfer the data to processing through the port. Hope this fixes your project and let me know if you have any more questions.

Best of luck!

[Quantz]

Thanks for your prompt response, Carl! I was thinking that the change would be exactly as you stated. I've got it loaded up and everything is working just fine.

I've got a couple of cool ideas for a different style of enclosure. I won't spoil the surprise, but I'll be sure to post some pictures when I have it finished.

Thanks again and thanks for the great Instructable!

Bill S. (Quantz)

[Carl Gordon Media]

No problem, thanks for noticing there was a mistake.

Awesome I'll be keen to see what you come up with, if I were to do it again I'd add a 6th button on the side that brings up the user interface.

[kapilsaxena]

I like it, may be i will not use it as often. I will prefer cmd+ spacebar and search the name. but loved the concept and super effort.

[CalebGreer]

Right there with you.

[victor.feria.75]

It is a great project for learning more about serial communication from Arduino to PC. I have done something similar but using a touchpad.

[Carl Gordon Media]

Thanks, I have been wanting to build something like this ever since I learnt about serial communication.

[cvogler3]

Thank you for the great idea and plans. I recently changed jobs that require the use of a Mac Air.. what I miss most is the ability to use "Display Fusion" on Windows to move a screen/window to my second monitor with a single click. Anyway that this can be coded
-window selected
-button pushed
-window moves back and forth between monitors

Thanks again!

[Carl Gordon Media]

Glad to hear you like the project, That would be a really cool function to have in this design! If I ever upgrade to have a second monitor I might just try that out.

[JasbatDrummer]

YOU should be designing for Apple.
They need you.
The iphone 7's a joke, the touchbar's laugable too, I'm even talking bout the watch...
WHY is Apple not releasing producta like this anymore?!

[Carl Gordon Media]

Haha thank you I wish I was. I'd love to get in there and push the limits of what they're making. Maybe some day ;)

[CalebGreer]

Awesome. I love using shortcuts, hotkeys, commands and all that mish-mash. This sounds like a really useful tool. Incredible job!

[Carl Gordon Media]

Thanks man! I love anything that speeds up my workflow too.