Project Aurora: a Smart Gaming Mousepad for 20€

The basic idea is, why spending 50$ for a RGB mousepad which only features light shows? Okay, they are cool and ultra-thin, but they also add a software on your pc to customize light colors which is not exactly "lightweight" if you consider it just handle a bunch of leds and does nothing else... So I want to take RGB mousepads a step further, adding "some" other features:

capacitive buttons to fire macros (customizable via software)
oled screen to display real time statistics about your CPU/RAM usage or anything else you want to (because why not?)

I had some goals in this DIY:

must be affordable, which means, must not exceed 30€
must be easy to replicate with common tools as not everyone out there,
specially students like me, don't have a workshop (obviously...)
must be as much customizable as possible
must be thin. Nobody wants a 2cm thick mousepad
all the electronics must be inside the mousepad. No external adapters or proprietary cable
total cost must be competitive to other rgb mousepads already on the market

Okay so, are you ready to start? Let's go :)

Step 1: Parts and Tools

Plexiglass. I took 2 rectangle slabs with different thickness, 2mm and 4mm. The thicker is for the middle layer where light shines through by edge lighting; you will "sandwitch" it with the thinner slabs, making 3 layers. 2.50€ each, so 5€ from local diy store

A chinese Arduino Micro. 2€ from aliexpress
OLED i2c screen. You are free to choose the size, there are 2: 128x32 or 128x64... I had both, so I decided to use the first one. 4€ from aliexpress
WS2812B RGB led strip. I already had a 30leds/m as leftover but you may also go with the 60leds/m one. You'll get a more even light diffusion as result. 4€ from aliexpress
1 m plastic adhesive wrapping. It's better if you choose car wrapping paper because it's vinyl and features special channels anti-air bubbles so it will result in a easier application... however my local paint shop had these wrappings wich are a cheaper version of said wrapping paper so I decided to try it. 0.50€
sand paper, 180 and 240 grit. I took one sheet for each one, it's more than enough. 0.50€
4x 1,5MOhm resistors, maybe more, maybe less depending on how many capacitive buttons you want... I decided to put 3, but I'm not sure you will find someone who sells you 3 spare resistors as they cost nothing.I bought a 10-of resistors set for 0.20€.
Some wire, thinner is better (0.10mm is perfect). Few months ago I took apart an old radio (already broken) to see if there were some parts in a fairly good condition to save... I only saved wires.
Soldering iron. I already have one, bought from Amazon and guess what? It was one of those soldering kits from china. It is ultra cheap, but does its job.
Hot glue gun (I already have one)
2 sided tape. 2.50€ from local diy store.
Cutter. I used one I already have, even if the blade is very worn.
Standard adhesive tape.
Permanent marker.
A pair of tweezers as you need to be precise. They came with the soldering iron kit I bought.
Tin foil. Steal some from your kitchen.

Note: I already had a dremel so I decided to try cut the plexiglass by myself. However, some local diy shops have a cutting service charging you something like 1€ so if you don't have one, it's not a problem.

Note2: I omitted that you'll need a computer to program your arduino, as well as a cable to plug it but I think it's obvious... Also, in the first time I used a breadboard to test everything, specially the oled screen and the led strip.

total cost: ~19€(let's say 20€ to add some gap)

I thinkthe price is fair considering for the same price you can buy a chinese rgb mousepad that isn't even software controlled, IF Amazon puts it on sale.

Step 2: Capacitive Sensors

This is the sensor you're gonna use as a button to fire macros. Making one is very easy: cut a tiny square of tinfoil, take a wire, strip one end and attach it to the foil with some tape, making sure they are in contact with eachother.

It works because the foil acts as a capacitor armor, and the other armor to complete a parallel plate capacitor is your finger. In between, there's a dielectric: plexiglass, in our case. So by measuring the capacitance you can know how far your finger is, thus you can write a sketch to choose at which capacitance measurement trigger the "button pressed" state.

In the pictures above you can see a capacitive sensor I made with a jumper, just to try if physics works (spoiler: it really does), as well as the final wiring diagram. To plug the sensor to arduino, you need to choose a send and a receive pin (in this case, D3 and D4 for key 1) and put a 1.5MOhm resistor between these two.

Step 3: Cutting the Plexiglass Slabs

warning: do not pull off the protecting film on the panel until you finish cutting everything or you may break it!

You should choose which size you want your mousepad: mine is 25cm x 20.6cm, but you can choose whatever measures you like; just mind that the bigger it is, the more leds you need so the total cost can increase a little.

After choosing the size, draw some guidelines with a permanent marker. Plexiglass is very easy to cut, you can just use a cutter and then snap it. Because my cutter is not suitable for plexiglass (doesn't even work properly for paper...) I tried with a Dremel. I never used a rotary tool before, but there's a first time for everything... I had no idea which bit to choose, neither at which speed to use it. I decided to go with a "standard" cutting disc after trying the conical router bit (I think it's more suited for woodworking).

As you can see from pictures, turned out pretty good even if the edge is quite rough. At the end of this step you should have 3 identical rectangles, 2 of which are 2mm thick, and one (that goes in the middle) 4mm thick. This will result in a 8mm thick mousepad which is not as much as it seems to be, it's barely noticeable, at least to me because I use to rest my wrist completely on the surface of the pad and not on the edge.

Step 4: Carving the Middle Layer

this steps only involves the middle layer so just take the 4mm panel and put the rest away.

With a permanent marker, draw some lines on the surface: these lines should form a channel which will be the housing for the led strip. They should be wide the same as your strip is +1cm to leave some room for wiring the end pins with no hassle. It's perfectly fine if you choose cut a frame instead of an U shape as I did, in fact it is even better because you'll have even more space for a later "cable management"... just mind to leave something in the middle to contrast your hand weight providing support to the thinner plexiglass we're going to use to close everything.

Also, draw an housing in the upper part of the panel for the arduino and one in the lower left for the oled display. In the pictures you can see that I made a hole with a drill bit just as a starting point for cutting.

About buttons, I started this project planning to wire 4 buttons but I thought they were too much and I was worried the cables wouldn't fit, so I went for 3 instead. This time I didn't drill a hole through the panel but I stopped at about half height, I did this because the wire is in contact with the foil using just plain tape and is helpful to have a hard surface behind it, so it won't fall in the hole if something goes wrong (i.e., the cable detaches by slipping). To do this, I used a conical router bit.

Step 5: Lower and Upper Layer

Let's start with the lower layer: you need 2 holes, one corresponding to the screen housing, and one corresponding to the arduino housing. That's it.

The upper layer, actually doesn't need a hole but now comes one of the hardest steps of this build: the arduino is 7mm thick, this mousepad is 8mm thick (2+2+4mm), the upper panel is 2mm thick as well as the lower (which we already drilled) so we need to route a 1mm deep rectangle to have a 1mm thickness panel in the portion corresponding the arduino usb port. It's not a hard thing to do, but having a rotary tool helps a lot here.

In the picture, you can see that I also made some channels to wire everything easier.

Step 6: Sanding Everything

It's time to smooth out the edges. Where there are more rough edges, use 180 grit. You have to sand the edges inside and outside the frame, this will result in a uniform and smooth lighting.

Once you finish, peel off the protective film from all the panels and clean everything with a wet scottex.

Tip: you may be more comfortable in sanding by wrapping a thin strip of paper to a little brick of wood; this way you will have a better grip and you can apply a uniform pressure to the surface of the paper in contact with the edge.

bonus pictures: I really couldn't wait to see the result of edge lighting (I have never seen it in real life!) so I tried to shine some leds through the panel: the result is just amazing. The "dark shape" on the diodes is a tinfoil I used to improve reflectivity (I also tried without, but using it gives a huge difference).

Step 7: Wrapping Time!

Yayyy :)

This step is just for the lower panel: take the wrapping paper and cut it in such a way to end up with a rectangle bigger than your mousepad size (but not too much, just take 2cm from each bezel). Now it's like applying a screen protection to your smartphone: before peeling off the adhesive, make sure the surface is perfectly clean. Start applying from one side helping you with a smooth implement like a credit card, this will remove air bubbles.

Once you finish, you can attach toghether the lower and the middle layer using small pices of 2 sided tape, as you can see from pictures. You can also see that I put some other tinfoil along some edges, I did this just to improve reflectivity along the sides where there are no leds.

Step 8: Testing the Electronics

You don't want to start soldering something that doesn't even work, right? We need to test the oled screen and the led strip. To do this I used a spare arduino which I soldered all the headers, because I needed to use it on a breadboard. The wiring is exactly the same as step 2, just mind that the screen MUST be plugged on pin A6-A5 as those are the i2c communication lines.

To test them, you can use the code here. Mind that pic.h is a header file, so you have to import it in your IDE.

Expected result: the led strip should fade all colors meanwhile the display should print the Asus ROG logo.

You can also simply use the default examples inside the libraries of the components (I choosed FastLED library to handle the rgb strip), it's up to you. Of course, remember to add the libraries to the arduino IDE!

Step 9: Wrapping the Upper Panel

Before starting, you need to measure the size of the visible area your display has, relative to the edges of the panel. If you don't want to take any measurement, you can put some layers of tape on the screen, draw with the marker a rectangle surrounding the visible portion and cut along the edges: you just made a perfect sized screen protection for your screen. Then stick the "screen protection" on the plexiglass and start wrapping: because it has a slight thickness, you'll be able to see the borders through the plastic wrapping.

So, wrap the upper panel as we did before but in this step is crucial to avoid air bubbles, as this will be the surface on which will glide your mouse. the more air bubbles, the less tracking precision your mouse will have.

Once you finish, with an exacto knife cut a window to see the screen. Again, the blade must be new otherwise won't turn out good (yea I know, I've been stupid and I used the same crappy cutter but I rushed the final steps because I was too hyped to see it finished... a good reason to make another one :D).

Tip: you can't choose a completely reflective surface (such as polished/satin black) for the paper otherwise your mouse won't work. Instead, choose a matte finish like I did. Carbon look wrapping should also work, as well as the sticker bomb but if you go for the carbon look one, consider that are not flat because of the "3D finish" (=your mouse will be louder when gliding).

Step 10: Wiring Everything

We're almost there: it's time to wire all the electronics inside the mousepad.

All components must be without any pin: if there are, desolder them. You can't add extra thickness, for example, my led strip came with extra wires soldered so I decided to take everything off as the wires were too thick. All the cables must be measured with enough precision, except those connected to the screen which is better to leave a little loose, to help you making the final adjustments.

In the pictures, you can see that the led strip came presoldered with a proprietary connector, so I just cutted the heatshrink protection they put and desoldered everything; also the oled display came with presoldered pins, so again I had to remove them before proceeding. I had a spare 2 pieces of 2 leds each and since I decided to put 4 leds on each side (so my mousepad has a total of 4x3=12 leds), I soldered these 2 pieces toghether just by making a "bridge" between the connectors using tin.

I used some hot glue to help me hold everything in place and in fact it worked just fine.

When you are ready, cut some other tin foil and tape it on the leds with the reflecting side facing towards the light source, this will hugely improve reflectivity.

Step 11: Closing the Mousepad

This is the last step. Once you wired and tested everything, cut some small squares of 2 sided tape and put them on the corners, then center the display with the window you made on step 9 and fix it in place using hot glue.

When you are ready to close it, choose a starting point from which align the panel to the other two.

Step 12: Programming

The hardware part is over but now it's time to switch your head into programming mode: up to now, you can just control your mousepad by loading sketches using arduino IDE, which it's not that bad if you have a lot of time to waste editing each time multiple lines of code: better to have a software running in background on your computer, which talks directly to Arduino via serial communication.

Luckily for you, I open sourced everything about this project so on my Github repository you can find the arduino firmware as well as the software to run on your computer: of course if you want to try doing everything by yourself it's perfectly fine, in fact this is the most boring part of this diy, so if you don't feel like doing it then no problem. PRs are welcome, of course! the program is not finished yet, in fact it can just do basic things like setting individual leds or with a certain layout but I'm a student and I don't have much free time :S

In the pictures you can see some tests I did during the process of building everything, if I had to place them on a timeline made of these DIY steps then I would choose to insert them on step 8 but I decided to not include them because, you know, they are just coding and testing, including studying solutions to have the best edge lighting as possible (like, varying the number of leds and the distance between them to get a uniform light without mixing too much the individual colors). I also included a picture about an attempt with the oled screen to display real time satistics about my computer (cpu, ram usage etc.) and some others about the development of the user interface.

Step 13: Enjoy!

Thank you for reading this instructable! this is the first one I wrote and as you may have guessed, it also is my very first diy project ever done before. I really had fun making it and I'm really a lot into sharing everything, so I loved to keep in mind during all these steps that I was going to publish this project to make everything available for everyone. If you have any questions, feel free to ask! And suggestions for further improvements are also welcome, of course. :)

I want to spend some words about the choices I did regarding the software:

I choosed Java as programming language because it's the language used to write the arduino IDE so it provides me a flawless serial communication with the board, also it's "write once run everywhere" (cit.) so, considering that I planned to share this project with everyone, supporting multiple platforms like windows and linux is not that bad after all
If I choosed C# as programming language instead, I would be able to hook directly into d3d12 to use the oled screen as an FPS display (basically the same way as FRAPS does) but sacrificing portability for such a feature it's not a wise choice, at least to me
I know, the UI pretty much sucks LOL the point is, a builder makes your life easier if you want a static interface but this is not the case as you can choose how many leds you have, so I went for the crappiest but most versatile solution. You are free to make your own personal graphics and this is what I'm going to do... maybe.
A further improvement could be implementing the SteelSeries engine to show in-game statistics when you play CS:GO or whatever game is supported by that library... but I can't run those games on my laptop, so I couldn't even be able to start trying with this. Nevermind!