Published October 5, 2022

Shortcut Keyboard

Shortcut Keyboard powered by Seeed Studio XIAO RP2040 featuring 4 mechanical switches and a 1.47 inch LCD Display.

AdvancedShowcase (no instructions)1,916

Things used in this project

Hardware components

Seeed Studio Seeed XIAO RP2040

1.47inch LCD Display Module

MX1B-L2NA

SK6812 2020

Resistor 200 Ohm

Resistor 1k

Resistor 10k

Diode 1N4007

Capacitor 100nF

TTP223 Touch-Module

Software apps and online services

Autodesk Fusion

Siemens Solid Edge

Keyshot

EasyEDA

Freerouting

Figma

ImageConverter565

Story

The SEEED Xiao series features a small footprint and many microcontrollers for various applications, all at low prices. This is one of the reasons why I use them in many of my projects. When I heard about the SEEED Fusion Keyboard design contest, it was clear to me that I wanted to participate. Since I've been playing around with LCD displays a lot lately, I wanted to use a display I had lying around. It was a 1.47 inch LCD display from Waveshare with a resolution of 172x320. I had never used this display in combination with the RP2040. So the first step was to hook up the display and get it working. The display came with a ST7789V3 driver. Fortunately, the TFT_ESPI library supported this driver. The only thing I had to do was to change the pinout definition and select the correct display driver. In short: Open the Arduino TFT_eSPI Library folder and navigate to the "User_Setups" folder. Then open Setup72_ESP32_ST7789_172x320.h change the Pinout to:

Setup72_ESP32_ST7789_172x320.h Pinout

Even though the file says ESP32, it will also work with the RP2040. Save the file and navigate back to the TFT_eSPI folder. Then open User_Setup_Select. Then comment out the #include <User_Setup.h> line and add #include <User_Setups/Setup72_ESP32_ST7789_172x320.h>. Save the file (make sure that all the other User Setups are commented out). After that, the display worked for me.

User_Setup_Select.h

After verifying that the display works, I started to work on the Design. I designed the circuit in EasyEDA and the housing in Fusion360 + Solid Edge and Keyshot for rendering. The final Design looked like this:

1 / 11

Detailed design process

While designing the PCB, I also worked parallel in Fusion 360 to design the housing and all the other components. For this purpose, I exported the outer shape of the PCB as a DXF file and imported it into Fusion360. I prefer this approach because I can easily adjust and update the DXF file in Fusion360 and then import it back into EasyEDA. After several iterations, the outer shape of the PCB looked like this:

Final PCB Design

Before I ordered the PCB, I wanted to make sure that all the dimensions were correct and all the components fit. So I just 3D printed the PCB and placed all the major components on it. I haven't seen many people do this, but in my opinion it's a good way to check the PCB design. Also, this dummy PCB can later be used to check the design of the case.

Critical components placed on 3D printed dummy PCB

After I was happy with the PCB design, I purchased it on the Seed Fusion Website. The process was very easy and quick. I was happy when the PCB design was approved. Instead of just waiting for the PCB to arrive, I went on with designing the housing and all the inner parts in detail. While designing the parts, I like to use Keyshot, which enables me to create realistic looking renders. After I was happy, I 3d printed all the parts & used a Lasercutter to cut out the acrylic cover. The final structure looked like this:

Inner structure

I also worked on the code, while waiting for the PCB. Fortunately, I didn't have to wait very long. The PCB arrived after just one week. I was not expecting the PCB to arrive that fast! But that was great because I could optimize the code with the final PCB. The quality of the PCB was amazing and also the outer dimensions were better than I expected:

PCB manufactured by Seeed Fusion

After receiving, I soldered all the components and tested if everything works properly. I started with the Neopixel LEDs continued with the mechanical switches and finally the Display. Everything worked as expected and I was very happy. Here are some pictures showing the PCB with all the components on it:

1 / 3

Concept description

The PCB features an LCD Screen which displays four icons to clarify the function of the mechanical switches. Next to the PCB is a touch sensor. When the touch sensor is activated, the display will scroll to the next page and display different icons. Aditionally there are several Neopixel Led's which can be used to signalize that a mechanical switch has been pressed. I also added the SEEED Studio Intro and the Challenge banner, which are shown when the Shortcut Keyboard is powered on. Here are some videos showing all the functions:

Shortcut Keyboard without the Cover

Shortcut Keyboard with the Cover

Keyboard with Fusion360 Icons

Code

The pages/symbols can be easily changed. Everything that needs to be changed is marked in the code. I used Figma to create the different pages. To do this, I simply created a frame with a resolution of 320x172 and inserted four icons. Here you can see the different pages I created. On the left side there are just some general functions (like copy, paste,...). On the right side I created shortcuts for Fusion 360.

Shortcut Examples

In order to display these on the LCD Screen, I exported the individual pages as PNG's. These PNG's then needed to be converted to RGB565 files. The easiest way to do this, was to use a tool called ImageConverter565. The tool can be found in the UTFT library and can be downloaded here.

ImageConverter565

These files than need to be copied to the Arduino Project folder and need to be included in the code. Also, the color of the individual pages can be set and the individual Commands, that should be sent when the mechanical switches are pressed, need to be defined. The last step is to define the number of pages. All the other things are handled by the rest of the code. The full project folder can be found in the GitHub repository, which is linked below.

Conclusion

I was happy with the outcome of this project. I hope it also shows that the Seeeduino Xiao is perfect for projects like this. Likewise, I was very pleased with the quality of the SEEED Fusion board & I would like to thank the SEEED team for organizing competitions like this one. Here are a few more pictures of the build:

1 / 5

Things that could be optimized

One thing I would probably change is to remove the touch button and the Neopixel LEDs and use a larger LCD screen instead.Also, I would probably look for an LCD module that I could solder directly to the board. I would also replace the mechanical buttons with smaller push buttons. This way it would be possible to add additional buttons. It would also be possible to reduce the thickness of the case and board. Here is a rendering of what I have in mind:

Concept for future project

Schematics

Code

//For the full code, visit the github repository 
//https://github.com/Beckju96/Shortcut_Keyboard

#include <TFT_eSPI.h> 
#include <Adafruit_NeoPixel.h>
#include "PluggableUSBHID.h"
#include "USBKeyboard.h"
#include "seeed_intro.h"
#include "Contest_Screen.h"

//Step 1: include pages here:
#include "page_1.h"
#include "page_2.h"
#include "page_3.h"
#include "page_4.h"

//Step 2: Define the number of pages (counting from 1 not 0):
int number_of_pages = 4;

//Step 3: Add all pages to the array:
const unsigned short* pages[] = {
  page_1, 
  page_2, 
  page_3, 
  page_4};


USBKeyboard Keyboard;

TFT_eSPI tft = TFT_eSPI(); 
TFT_eSprite screen = TFT_eSprite(&tft);

int touchpad = D2;
int buttonpin = A1;

//Step 4: Define the colors of the Neopixel LEDs when powering on
int r = 0;
int g = 0;
int b = 100;

//Step 5: Open Keyboard_Setup.ino 

///// Don't change the code below ////

int current_page = 1;
int z = 0;  //variable used for for swipe animation 

#define NUMPIXELS 6
int PIN = D3;
Adafruit_NeoPixel pixels(NUMPIXELS, PIN, NEO_GRB + NEO_KHZ800);


void setup() {
  pinMode(touchpad, INPUT);
  pinMode(buttonpin, INPUT);
  pixels.begin();

  pixels.setPixelColor(0, pixels.Color(r/8, g/8, b/8));
  pixels.show();

  pinMode(D6, OUTPUT);
  digitalWrite(D6, LOW);
  tft.init();
  tft.setRotation(1);
  tft.fillScreen(TFT_BLACK);
  tft.setSwapBytes(true);
  digitalWrite(D6, HIGH);
  screen.createSprite(320, 172);
  screen.setSwapBytes(true);
  delay(2000);
  intro();
  delay(3000);
  tft.pushImage(0, 0, 320, 172, Contest_Screen);
  delay(3000);
  tft.pushImage(0, 0, 320, 172, pages[0]);
 }

void loop() {

  //void check_touchpad();

int buttonState = digitalRead(D2);

if(buttonState == 1)
{
  current_page = current_page +1;
  if(current_page==5)
  {
    current_page=1;
  }
   set_color(current_page);
   z = z+1;
   screenswipe();
  }

int buttonvalue = analogRead(buttonpin);

if(buttonvalue  > 100)
{
delay(20);
int buttonvalue = analogRead(buttonpin); //check Value again, to avoid wrong Readings

  if (buttonvalue >= 900)
{
  delay(20);
  buttonvalue = analogRead(A1);
  if (buttonvalue >= 900)
{
 send_key(1, current_page); 
  delay(200);
  }
}
if (buttonvalue <900 && buttonvalue >820)
{
  delay(20);
  buttonvalue = analogRead(A1);
  if (buttonvalue <900 && buttonvalue >820)
{
  send_key(2, current_page); 
  delay(200);
  }
}

if (buttonvalue <=820 && buttonvalue >760)
{
  delay(20);
  buttonvalue = analogRead(A1);
  if (buttonvalue <820 && buttonvalue >760)
{
  send_key(3, current_page); 
  delay(200);
  }  
}
  
if (buttonvalue <=760 && buttonvalue >700)
{
  delay(20);
  buttonvalue = analogRead(A1);
  if (buttonvalue <=760 && buttonvalue >700)
{
  send_key(4, current_page); 
  delay(200);
  } 
}

//signalize buttonpress by showing Neopixel Animation:  
for(int i=1; i<NUMPIXELS; i++) { // For each pixel...

    // pixels.Color() takes RGB values, from 0,0,0 up to 255,255,255
    // Here we're using a moderately bright green color:
    pixels.setPixelColor(i, pixels.Color(r, g, b));

    pixels.show();   // Send the updated pixel colors to the hardware.

    delay(30); // Pause before next pass through loop
}
  
for(int i=1; i<NUMPIXELS; i++) { // For each pixel...
  
    pixels.setPixelColor(i, pixels.Color(0, 0, 0));

    pixels.show();   // Send the updated pixel colors to the hardware.

    delay(20); // Pause before next pass through loop
}
    
  } 
}

void screenswipe()
{
int x = 0;
int y = 172;

if(z<number_of_pages){ 
  
while (x >-(172-40))
{
screen.pushImage(0, x, 320, 172, pages[z-1]);
screen.pushImage(0, y, 320, 172, pages[z]);
screen.pushSprite(0, 0);

x= x-40;
y= y-40;
delay(1);
}
screen.pushImage(0, -172, 320, 172, pages[z-1]);
screen.pushImage(0, 0, 320, 172, pages[z]);
screen.pushSprite(0, 0);


}

if(z==number_of_pages){  
while (x >-(172-40))
{
screen.pushImage(0, x, 320, 172, pages[z-1]);
screen.pushImage(0, y, 320, 172,pages[0]);
screen.pushSprite(0, 0);

x= x-40;
y= y-40;
delay(1);
}
screen.pushImage(0, -172, 320, 172, pages[z-1]);
screen.pushImage(0, 0, 320, 172, pages[0]);
screen.pushSprite(0, 0);

z=0;
}




}

void intro()
{
  int x = 70;
  tft.pushImage(0,0, 320, 172, seeed_1);
  delay(x);
  tft.pushImage(0,0, 320, 172, seeed_2);
  delay(x);
  tft.pushImage(0,0, 320, 172, seeed_3);
  delay(x);
  tft.pushImage(0,0, 320, 172, seeed_4);
  delay(x);
  tft.pushImage(0,0, 320, 172, seeed_5);
  delay(x);
  tft.pushImage(0,0, 320, 172, seeed_6);
  delay(x);
  tft.pushImage(0,0, 320, 172, seeed_7);
  delay(x);
  tft.pushImage(0,0, 320, 172, seeed_8);
  delay(x);
  tft.pushImage(0,0, 320, 172, seeed_9);
  delay(x);
  tft.pushImage(0,0, 320, 172, seeed_10);
}

//Step 6: set the color of the LEDs for each page:

void set_color(int page)
{
  if (page == 1)
  {
  r = 0;
  g = 0;
  b = 100;
  }
  if (page == 2)
  {
  r = 0;
  g = 100;
  b = 0;
  }
  if (page == 3)
  {
  r = 100;
  g = 0;
  b = 0;
  }
  if (page == 4)
  {
  r = 100;
  g = 100;
  b = 100;
  }

  pixels.setPixelColor(0, pixels.Color(r/8, g/8, b/8)); //decrease the brightness of the status LED
  pixels.show();

}


//Final Step: Define your shortcuts here 
//To add pages, just copy and paste additional if statements (page ==5 , page == 6, ...) and add the button definition:
//Example: Keyboard.key_code('s', KEY_CTRL); Keyboard.printf("a"); Keyboard.media_control(KEY_VOLUME_UP);

void send_key(int button, int page){

  if (page == 1)
  {
    if(button == 1)
    {
    Keyboard.key_code('c', KEY_CTRL);
    }
    if(button == 2)
    {
    Keyboard.key_code('y', KEY_CTRL);  
    }
    if(button == 3)
    {
    Keyboard.key_code('z', KEY_CTRL); 
    }
    if(button == 4)
    {
    Keyboard.key_code('v', KEY_CTRL); 
    }

  }

    if (page == 2)
  {
    if(button == 1)
    {
    Keyboard.key_code(KEY_F11);
    }
    if(button == 2)
    {
    Keyboard.key_code('e', KEY_LOGO);  
    }
    if(button == 3)
    {
    Keyboard.key_code('s', KEY_CTRL);   
    }
    if(button == 4)
    {
    Keyboard.key_code('f', KEY_CTRL);   
    }

  }
  if (page == 3)
  {
    if(button == 1)
    {
    Keyboard.key_code('t', KEY_CTRL);   
    }
    if(button == 2)
    {
    Keyboard.key_code(KEY_F5); 
    }
    if(button == 3)
    {
    Keyboard.key_code('l', KEY_LOGO);  
    }
    if(button == 4)
    {
    Keyboard.key_code('r', KEY_CTRL); 
    
    }

  }

  if (page == 4)
  {
    if(button == 1)
    {
    Keyboard.media_control(KEY_VOLUME_DOWN);
    delay(50);
    Keyboard.media_control(KEY_VOLUME_DOWN);

    }
    if(button == 2)
    {
    Keyboard.media_control(KEY_VOLUME_UP); 
    delay(50);
    Keyboard.media_control(KEY_VOLUME_UP);  
    }
    if(button == 3)
    {
    Keyboard.media_control(KEY_STOP);   
    }
    if(button == 4)
    {
    Keyboard.media_control(KEY_PLAY_PAUSE); 
    }

  }
  //add if statements here...

}

Credits

Julian Becker

1 project • 2 followers

Shortcut Keyboard

Things used in this project

Hardware components

Software apps and online services

Story

Detailed design process

Concept description

Code

Conclusion

Things that could be optimized

Custom parts and enclosures

3D Data

Schematics

Schematic

Code