Customizable OLED keyboard that adapts to the apps you use
Already have an account? Log in.
To make the experience fit your profile, pick a username and tell us what interests you.
How it works:
Without the appropriate desktop software, Keybon is just a programmable keyboard. The goal was to add the ability to configure the device from windows and change keyboard layouts on the go. I decided to create a windows forms application in C#.
The application works like this: You connect to the keyboard via a COM port. Then you configure the icons that are displayed on the OLED screens and the macro functions for each button. This can be done via drag&drop for the images. The button commands need to be entered in a way the “sendkeys” method can interpret them. For example, +{h}{e}{l}{l}{o} prints “Hello” when pressing the corresponding button. You can create up to 8 layouts, but there is really no hardware limitation to this. As the layouts are only saved on the computer, the STM32’s memory is not the limiting factor. When a layout is activated, the application sends a command to the keyboard that disables its HID function. After that, the nine images are transferred via the COM port as a stream of bytes. This takes only a few milliseconds, so the change on the actual OLEDs is instant. To each layout a set of windows processes can be added. The software constantly checks what application is running in the foreground. If for example Google Chrome is opened, the software instantly switches to the matching layout.
As this was is my first C# project, making the app took some time and effort. By splitting the functionality into small parts, each problem became solvable. Detecting foreground apps has fortunately been well documented. Writing images to the keyboard was just a matter of efficiently splitting bitmaps into bytes. One of the most complicated part was saving and loading settings. I decided to use the feature built into Visual Studio, that saves a single .xml file to “users/appdata/…”. This way the .exe works without an install or a visible settings folder. As .xml files are text based the bitmap information needs to be serialized first and reassembled into an image later. After all I am quite happy with the companion software. There are of course plenty of usability features that could be added, but the basic functionality is sufficient to use the keyboard productively.
For connecting the keyboard to a computer, USB was the obvious choice. Not having to care about low-energy was a welcome change from my previous, mostly battery-powered projects. The first microcontroller that came to my mind was the Atmega32U4 as it has built-in USB support and does not need a separate USB to serial converter. But one problem is its small SRAM with only 2kB. When using displays their pixel values are usually saved in RAM, so that the image can be easily manipulated. For a first iteration of the keyboard, I was planning to use nine OLEDs with 64x48 pixels each. This adds up to 3456 bytes of memory. It would be possible to use the Atmega with some software trickery, like keeping only one screen in memory and cycling through them. But I did not want to risk running into performance problems later. Instead, I decided to use the ST STM32F1 as it is cheap, has USB support and upwards of 20kB RAM. It also is officially Arduino-compatible, known for being used in the Blue-Pill boards.
With all parts select I created a compact PCB that would hold nine OLEDs. The board contains mounting point for the 3D-printed button mechanism. On the “chin” of the device, where the levers of the last row of screen sit, there is just enough room for a USB-C connector and the STM32F1.Ultimately the wiring of this PCB is very simple. The STM32 is supplied by the USB connection and a 3.3V regulator. The regulator (AP2112K) also powers the nine LEDs, which contain internal dc-dc converters to create their working voltage of around 9V. USB-C is used for the connector, but it is wired as regular USB2.0. As the OLEDs can only assume one of two I²C addresses I had to use SPI. That means they share all data lines but they each have their own chip select.
Assembling the board can be tricky as the OLEDs have to be soldered in first before the 3D-printed mounts are put in place. There is only enough room to get them in place in a certain order without damaging the display connectors. I did not want to leave the PCB and mechanisms exposed so designed and printed a simple case. The PCB snaps into it and the buttons get covered with a face plate. I originally planned to put transparent acrylic on the OLED panels, but it looks much nicer without them. As the screens are made from glass, scratches should not be a big issue.
The STM32 can be programmed via USB after initially flashing the USB bootloader (stm32duino bootloader). Currently there are two different Arduino implementations for the STM32 boards. An official one by ST and the Arduino_STM32 port by Roger Melbourne. The latter contains more features, including some that are needed for this project. To make the keyboard work as a HID (human interface device) I used the STM32F1 USB composite library. With this library the STM32 cannot just mimic a HID device, but a serial port simultaneously. This enables the keyboard to be controlled over a COM port while still being an independent HID keyboard. The firmware I created is very simple as the Adafruit GFX library includes most the code needed to drive the displays. What turned out to be much more complicated was the desktop app that would be used to control the keyboard.
The first task was to figure out how to build a button with an integrated display. There actually are off-the-shelf solutions: NKK switches manufacture tactile switches with color displays. But at a crazy 50€ or more per key these are out of the question. Early on I decided to use small OLED displays as they are widely available and inexpensive at under 3€.
I found that 0.66in OLEDs are just the right size to allow for a compact keyboard. And their 64x48 pixels provide enough resolution to display useful icons. The displays consist of a glass panel with a flex connector that can be soldered directly to the PCB. When bending the connector under the display glass, a gap of a few mm is formed, just enough to fit a thin tactile switch in it. What’s left is a mechanism that supports the display so that when the OLED is pushed, the tactile switch is pressed.
Figuring out the key mechanism turned out to be challenging. The display has a big surface area compared to the tiny tactile switch. When pressing the button, the force needs to be evenly distributed. If not, pressing on the edge of the OLED will just rotate it around the button. I learned this when I 3D-printed my first OLED mount. It simply holds the display in place but does not limit its rotation:
Laptop keyboards solve this by using a scissor mechanism that restricts the key to a linear motion. However, I could not think of an easy way to 3D-print this mechanism without making it unnecessarily big. The solution for me was to add a cantilever to the display mount. This lets the display rotate around the point where the levers are connected to the PCB and the motion is sufficiently linear for the tactile switch to be pressed.
I continued to create a single button keyboard as a proof of concept. After a few iterations the mechanism was working. Whatever point on the screen was pushed, the button was actuated with a satisfying tactile click. The cantilever mechanism is very compact as it does not add to the height of the OLED itself. It also can be stacked to allow for a tight placement of multiple buttons in a keyboard. For this, the lever of one key overlaps with the screen of the next.
With the basics of the macro keyboard working, I went on to select the remaining electronic components.
Whether you work with CAD design software or edit videos, keyboard shortcuts can really speed up your workflow. Dedicated macro keyboards take this even further by moving the most frequently used commands to individual buttons. While these keyboards are widely available both as commercial products and as DIY projects, they usually are restricted to a predefined set of functions like media controls. There are some exceptions: The Elgato Stream Deck is a keyboard with a cleverly integrated LCD touch display behind transparent buttons. Each button can be configured to have different functions and icons depending on the application you are currently using. Considering the high cost of these devices I set myself the goal of creating a cheaper DIY alternative that is fully configurable.
Well, I would not recommend doing this for a commercial product, it would at least need some kind of screen protector. But the OLEDs are quite robust. I doubt you could crack the screen unintentionally with your finger when it is mounted like this. The flat flex cables are more fragile, they are probably the first thing to break over time.
I just ordered the parts and PCBs. I'm so exited :)
One question: How did you flash the inital Bootloader? Why did you not expose some header for that purpose?
Super Projekt. Vielen Dank, dass du es teilst :)
Tere was an issue in the BOM: The 4.7µF capcitors were linked to parts with 0805 footprint, but the footprint used on PCB is 0603.
Oh, i'm wrong. In the eagle file they are 0805. But in the BOM they are listed as 0603. But the 0603 should also fit. Not the first time i have to fiddle with wrong sized SMD parts ;)
Freut mich!
First, power the device up via USB and pull RESET to GND while the BOOT1 jumper is shorted. This will put the STM32 in programming mode. If you are careful you can do this with tweezers instead of soldering. After that you can connect a USB-Serial adapter to the TX, RX and GND pins that are exposed on the back of the PCB. Flash the "generic_boot20_pc13.bin" via the STMFlashLoader software. Links to the files are in the "electronics" project log. If something doesn't work you can ask me or look into one of the tutorials for the "blue pill" board, the process is identical.
Great project! I'd really like to create one of these for my self. I'm Just curious What process you used to Solder all the components to the board. Did use a Reflow Oven and paste or what to solder the Oled's cable etc... Soldering everything by hand including the The Micro controller would be seemly extremely difficult. Thx
I usually solder the boards with only a regular soldering iron. In a reflow oven the displays would probably need some kind of specialized mount, hand soldering is much easier.
Hi! This is super nice project, and I'd like to reproduce it since a macro keyboard could be really super useful for me!
Do you happen to have BOM list around, with the references you used? The schematic is not detailed enough for a proper order based on your design!
Thanks!
Thank you! I've just added a BOM with links to LCSC to the GitHub page:
https://github.com/CoretechR/Keybon/blob/main/Eagle%20Files/Keybon%20REV%201.1%20BOM.csv
if I wanted to do this project, too, could you give me a hint where to buy the Parts from the BOM file ? I mean where did you buy the board? I have never worked with such stuff like self designed boards and dont even know how much that costs.
@HannesBro Sure, I ordered most of the components from LCSC. They don't have the OLEDs in stock right now but most 0.66 OLEDs should be compatible. Good suppliers for PCBs are OSHPark in the US and Aisler in Germany. They both accept .brd files directly and will show you a preview and the calculated cost of the board before ordering. As the PCB ist quite large it's about 30~40€ for 3 of them.
really cool project .i saw a macro keyboard the other day and was wondering y the keys need to be hand written and lo and behold i see your amazing oled keys
[this comment has been deleted]
I'm not much of a code monkey, but this project seems to lay the ground work for a separate single screen - it's already got mech switches, so combine the 9 screens into one, and make a case where the screen is separate from the buttons. From a home game design perspective, this doesn't push any boundaries, and practically it will take up quite a bit more desk space.
If you want a touchscreen macro pad, there are numerous Android apps that will serve this function with a low end/repurposed tablet or smartphone, also, there are no design hurdles to be overcome with this approach.
I, for one, hate touchscreens or capacitive input for simple buttons. There's no way to navigate them without taking your eyes off of your work. You can't rest your finger on one that you will be using repetitively, and sometimes they register a tap while you are trying to hover over them. If you are trying to hover, your finger can wander. There's no tactile/audible response when you've clicked it. The list goes on... There's good reason why game controllers are still button based and not just touchscreens with ergonomic handles, and our desktop keyboards aren't slabs of glass we feverishly tap away at.
Wow - this is a stunning project and quite a creative use of the OLED screens like this. I also like their mounting :)
One thing that concerns me a bit is that I never think of these screens as very sturdy, but at the same time, I doubt they will see much abuse here, so it should be fine :)
Maybe I'll do something similar for some of my upcoming DIY Smart Home things, the way everything looks flush and neat is wonderful.
Thanks! I was concerned about the OLEDs at first, but they are really sturdy. The mount would snap long before the glass breaks.
Ahhh that is good to know, I was going to use one of those smaller OLED screens in an upcoming wearable project.
I made some bad experiences with a WaveShare 128x128 OLED Module where the corners of the OLED screen weren't supported at all, and all the control traces ran through it, so it wasn't too hard to accidentally snap. I guess a good mount design alleviates that.
What about the effects of the pressure on the screen's internal structure? Keep us posted if you see any wear or changes!
I love that this is clicky. At first glance I thought "that's pretty cool, too bad I hate capacitive buttons" Very cool 3d printed clickers, I would not have come up with something this simple.
Does anybody know if there a piece of software similar to this companion app that changes what a keystroke does on a per app basis?
Edit: I don't think this project is simple, just the the switches, and I mean simple-smart vs complex-stupid. I would have made the switches delicate, finicky, difficult to print and assemble, and I would have spent a ton of time designing them.
Kudos.
Do you have a kit available? This is a great design!
This is fantastic matey!
I've been looking for something like this for a long while. There's a few out there, but none as slim as this. The companion app makes it a winner for me.
Congratulation on your project ! very professional and very helpful device. If I have time, I will build it later on. I used these displays for my robot and they are wonderful, they are easy to use and when you put a bezel around, they look awesome.
Max.K
RasmusB
Guy Dupont
pcadic
SAYANTAN PAL
It looks like the screen are being pressed directly, do you think there will be issues with strain? Possibly leading to cracking? I've got a bag of 0.44" OLED screen that were also destined for a keyboard, but with a much (much) more complex mounting system specifically to limit contact on the screen.