蓝牙ESP32 TFT +触摸宏键盘)

11,346

298

53

简介:蓝牙ESP32 TFT +触摸宏键盘)

About: Hi! I'm Dustin. I'm a electronics enthusiast/hobbyist who likes to build projects around microcontrollers and sometimes all discrete components. Most of my instructables come with a YouTube video.

Controlling your computer by using hotkeys and macros is a great way of speeding up your workflow. Unfortunately a device dedicated to doing that (for example Elgato's Stream Deck) will cost you about $120.

That is why I designed FreeTouchDeck. FreeTouchDeck will cost you about $20 (including shipping!) to make. It uses an ESP32 and a 3.5" touch screen. Keystrokes and macros are send via Bluetooth to your Windows, MacOS, or Linux computer.

You can customize your FreeTouchDeck by using the configurator. The configurator is a webpage that is hosted on the ESP32 itself. You can customize menus, buttons, logos and colours. You can also create your own button logos and upload them.

这是一个非常简单的构建,占用的时间少了一小时+几杯咖啡。我设计了它,所以它可以使用零件可以轻松找到的部件来构建,但如果您在邮递员到来之前不想等待一段时间,也可以在本地找到。

用品:

工具:

  • A soldering iron and solder.
  • Wire strippers (if you are not using the PCB).
  • 冲洗切割机。

第1步:了解有关FreetouchDeck的更多信息

在开始这个项目之前,观看我所做的视频可能是一个好主意。该视频本身并不是一个方法,但更多的是FreeTouchDeck的介绍以及它可以为您做的事情!

看了视频?让我们得到你需要的零件!

第2步:获取您需要的零件

如果you do not already have an ESP32 and an ILI9488 TFT + Touchscreen lying around. You can find them pretty cheap on AliExpress. I used these parts:

- A 38-pin ESP32-WROOM-32D Development Board from阿里巴巴全球速卖通*

- An ILI9488 TFT screen with XPT2046 touch controller from阿里巴巴全球速卖通*

- 可选的ESP32 + TFT组合器PCB(Gerber file)

Not all ILI9488 TFT screens are created equally. It is important to make sure you have selected触摸屏!

*完全披露:这些是联盟链接

Step 3: Hardware: Connect the TFT Screen to the ESP32

The wiring may seem a bit daunting at first. But don't let all the wires scare you. It is pretty straight forward. The images above will help you when you wire your TFT + Touchscreen to your ESP32. This is also decision making time. There are few options when it comes to connecting the two together. You can use a breadboard, you can use prototyping board or you can order a PCB specifically to connect the ILI9488 + touch to the 38-pin ESP32 DevKitC. I'd like to point out that the breadboard option is only an option for testing your connections and screen. It is not very practical to have on your desk and loose connections can cause problems.

重要的是要知道这些屏幕在3.3V时运行。将它们连接到5V会导致损坏!

这些是您需要从ESP32 - > Ili9488所需的连接:

3.3V - > VCC

GND -> GND

GPIO15 - > CS

GPIO4 - >重置

GPIO2 - > DC/RS

GPIO23 -> SDI(MOSI) and T_DIN

GPIO18 - > SCK和T_CLK

GPIO32 -> LED

GPIO21 -> T_CS

GPIO19 -> T_DO

GPIO27 - > T_IRQ

SDO(MOSI) is not used for the TFT screen, so you are left with one unconnected pin on the TFT module. That's ok!

如果您想订购PCB旨在使其轻松连接到TFT屏幕的ESP32,您可以在此处下载Gerber文件:https://github.com/dustinwatts/esp32_tft_combiner.

您还可以直接从PCBWAY订购,我发出的:

https://www.pcbway.com/project/shareproject/ESP32_TFT_Combiner_V1.html

Step 4: Software: Installing Arduino IDE Libraries

Installing the Arduino IDE ESP32 core.

Go toArduino- >Preferencesand click on the icon behind the input field for附加董事会管理人员网址.

Next, copy and paste the following link (without quotes) in the popup box:

"https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json"

Click OK and OK.

接下来,去工具- >Board: - >董事会经理and search for "ESP32". Install the latest version and click "Close".

Installing the necessary libraries.

FreeTouchDeckuses a few (some might call 6 more than a few) libraries. Three of these libraries can be installed though the the Library Manager. Go toSketch- >Include Library- >Manage Librariesand search for, and install the following libraries:

  • Adafruit-GFX-Library

  • TFT_eSPI

  • ArduinoJson

The other three libraries need to be downloaded manually. For each of them the process is the same so I'll describe just one of them.

Go to“https://github.com/dustinwatts/esp32-孔--keyboard”,点击 ”Code" and "下载.zip.".In the Arduino IDE, go toSketch- >Include Library- >添加.zip库

Repeat for the following libraries:

  • "https://github.com/me-no-dev/ESPAsyncWebServer"
  • “https://github.com/me-no-dev/AsyncTCP”

第5步:TFT屏幕配置

在编译和上传FreetouchDeck.ino草图之前,您必须编辑TFT_ESPI库中包含的user_setup.h文件。这可以在您的Arduino SketchBook文件夹中找到“libraries". If you have not renamed the TFT_eSPI library folder, the file user_setup.h can be found in TFT_eSPI-master. Here you will have to uncomment the lines that apply to your hardware configuration.

To make things easier, you can find the user_setup.h file you will need for this project in the downloaded repository in the "user_setup.h示例“文件夹。复制文件”ESP32_Dev_Kit_V1_ILI9488_Resistive.h" to "/TFT_eSPI-master/". Rename the "User_Setup.h" that is already there to "User_Setup.old“(以这种方式,你保持原件,以防出现问题)。现在重命名”ESP32_Dev_Kit_V1_ILI9488_Resistive.h" to "User_Setup.h“。(< - 区分大小写!)保存并关闭文件。

第6步:下载FreetouchDeck.ino并上传到ESP32

ESP Sketch Data Upload Tool

FreetouchDeck使用Spiffs(ESP32闪存)来存储使用的配置和图像。在将草图上载到ESP32之前,您需要将这些内容上传到ESP32。为此,您需要ESP32草图数据上传工具。您可以从github下载:“https:/github.com/me-no-dev/arduino-esp32fs-plugin”。按照GitHub上的说明安装该工具:

  • 从下载工具存档releases page.
  • 在您的Arduino SketchBook目录中,如果尚未存在,请创建工具目录。
  • 将工具解压缩到工具目录(路径看起来像/arduino/tools/esp32fs/tool/esp32fs.jar)。
  • Restart Arduino IDE.

(On MacOS create the tools directory in ~/Documents/Arduino/ and unpack the files there).

FreeTouchDeck.ino

在GitHub上,您可以找到FreetouchDeck的完整源代码。转到FreeTouchDeck Github存储库,然后单击“代码”和“下载.zip”:https://github.com/DustinWatts/FreeTouchDeck

Extract and rename the extracted folder to "FreeTouchDeck". Open the FreeTouchDeck.ino sketch in the Arduino IDE. This will also open a few other header (.h) files. You do not need to touch (pun intended) these.

Set your WiFi Settings

一旦你有FreetouchDeck.ino素描打开转到您拥有FreetouchDeck.ino素描的文件夹,打开“/data/config/wificonfig.json”. This is where you can enter you're WiFi SSID and Password so you can connect to your FreeTouchDeck to configure it

  • change "your_wifi_ssid." to the WiFi SSID you want FreeTouchDeck to connect to.
  • change "YOUR_WIFI_PASSWORD“到WiFi网络使用的密码。

上传the data folder

在将数据文件夹上传到ESP32之前,您将首先必须选择右分区方案。

  • Go to工具- >Board并选择ESP32 DEV模块。
  • Still under工具, selectPartition Scheme. ->“没有OTA(2MB App / 2MB Sciffs)”.
  • Plug in the ESP32.
  • Click on工具and select "ESP Sketch Data Upload".

Tip!: If the data upload fails, chances are you have the serial monitor open. If this happens, close the serial monitor and try again.

上传the sketch to the ESP32

After the data folder is successfully uploaded, you can go ahead and upload the FreeTouchDeck.ino sketch to the ESP32. The settings under tools besides thePartition Schemecan be left to the default.

Go to "Sketch“并选择”上传". This may take a while because it is a large sketch.

第7步:打印案例(可选)

Off course not necessary, but when you have built your FreeTouchDeck you can print a case for your FreeTouchDeck. This design will fit the screen and ESP32 with or without the combiner PCB.

这种情况设计为压配合。然而,您可以添加一款触摸CA胶水(疯狂的胶水),以保持顶部牢固地连接到底部。

You can find the case on Thingiverse:https://www.thingiverse.com/thing:4661069

我打印它在解放军0.2毫米层高度。The top doesn't need support if you print it face down. The bottom needs some minimal support if you print it with the opening down.

如果您想修改您喜欢的情况,您可以在Github上找到融合360文件:https://github.com/dustinwatts/freetouchdeck/tree/master/case/esp32_tft_combiner_case.

I've included some images of my slicer.

第8步:第一个启动

将草图上传和所有文件上传到ESP后,首先启动触摸校准屏幕。这是为了使FreeTouchDeck知道所有角落所在的位置,并且可以确定触摸是否落在按钮的界限内。

校准文件保存在ESP文件系统上。因此,如果使用“ESP32草图数据上载”将文件重新上传到ESP,则删除校准文件,您将再次呈现校准屏幕。

主屏幕有6个按钮。这些都是“菜单按钮”,因为他们带您到底层菜单。这些按钮具有不同颜色的颜色作为菜单中的功能按钮。在主屏幕上,您还将找到“设置”菜单。这将带您到菜单,您可以输入配置器。

Once the home screen is loaded, BLE is also started. You can now connect with your computer to the FreeTouchDeck. You might have to refresh your Bluetooth device list on your computer. After you see "FreeTouchDeck", you can connect to it. To test if Bluetooth works properly you can go in to the "Music" menu. And press "Mute" to see if a BLE connection is established.

Step 9: Configure Your FreeTouchDeck

您现在可以自定义您的FreeTouchDeck。FreetouchDeck在ESP32本身上寄出网站,您可以在其中配置菜单和按钮的每个菜单。您还可以自定义颜色并上传您自己的徽标。

启动配置器。触摸右下方按钮所以转到“Settings" page and then touch the "无线上网" button on the top left. Once the configurator has started you can open a web browser and go tofreetouchdeck.local.

要了解有关如何使用Configurator的详细了解Wiki在GitHub上.

1 Person Made This Project!

Recommendations

  • Anything Goes Contest

    Anything Goes Contest
  • Make it Real Student Design Challenge

    Make it Real Student Design Challenge
  • 阻止代码竞赛

    阻止代码竞赛

53 Discussions

1
Tormentor2202

13小时前

今天获得了我的新展示,触摸和达达,都罚款。
谢谢大家的帮助。仍然存在问题,但与FreeTouchDesk努力和软件无关。

0
188asia.com

13小时前回复

好!太棒了!也许我也可以帮助不相关的东西:)

0
nrd4lif.

8 days ago

来自亚马逊的订购零件,并从PCBWAY完成了PCB。需要找到一个电源,但我可以使用的房子周围有些东西。任何想法PCB到达需要多长时间?中国总是有质疑的。

0
188asia.com

Reply 7 days ago

嗨nrd4lif!任何USB电源都会很好,它不会吸取大量的电流。PCBWAY的PCB通常会很快到达,尽管截止当前取决于您选择的送货方式。

0
nrd4lif.

Reply 18 hours ago

这个PCB看起来是否正确?看起来没有像你的一张照片所做的。

0
188asia.com

15小时前回复

Ow no! That is absolutely not correct! PCBWay has shared the wrong file! I have changed this immediately! If you send me a messagedustin_watts@yahoo.com......我会做得对!

0
L_87B

4天前

HI! This looks emazing.
I have 2 questions, englis is not my native languige so plase forgive me if the questions are silly.
如果
i understand correctly, the configuration is done on the macro keypad
itself, so after the first configuration i can use it on different
computers without any other configuration, right?
第二个问题,只有一个有线吗?
Thanks,

0
Tormentor2202

21小时前回复

Yes you can configurate your device via wifi. If you are in a new wifi network you have to change the wificonfig file and upload it to the esp32 again

0
Dirk-K-69

3 days ago

写信给esp32工作很棒。
script is starting without crash ... more than all other sctripts i try before.
但我只看到屏幕的一半。
哪里可能是我的错误?

0
188asia.com

Reply 2 days ago

戴德克!你用的是什么屏幕?你看到哪个部分屏幕(顶部,左转等)?

0
Dirk-K-69

Reply 2 days ago

Hi,
我使用“2.8 TFT SPI 240x320 v1.2”显示。(从后面的文字......没有更多信息)
I see the first and second button from line 1 and the half of next line buttons.
从显示使用分辨率后:
// Set the width and height of your screen here:
//#define SCREEN_WIDTH 480
//#定义屏幕_height 320
#define SCREEN_WIDTH 320
#define screen_height 240.
... i have all 6 buttons.
我可以从屏幕校准中触摸标记......
... but afterwards the press don't hit the button.
看起来是按钮位置是硬编码的,并没有注册改变的分辨率?
i have to "stretch" the touch data by 1.5 :
t_x = t_x /1.5;
t_y = t_y /1.5;
now i hit the button.
PS: i have a lot of fun .... great! Many Thanks!

0
188asia.com

Reply 2 days ago

Hmm.. I have tries this with the smaller screen. I know some people who have done this. I will have to see what their experience is, but if this is a fix, I will include this in the software!

0
Tormentor2202

回复3天前

也不确定颜色是否正确

0
Dirk-K-69

回复3天前

Hi,
和你一样的问题......我想。
How do you change the resolution?

0
Tormentor2202

回复3天前

I changed the part in the FreeTouchDeck.ino theres a line where you can change the resolution

0
Dirk-K-69

Reply 2 days ago

ok, thanks.
screen is ok now.
to get a working touch position i divide the touch-data by 1.5
near line 610:
.....
#万一

// korrektur触摸位置
t_x = t_x /1.5;
t_y = t_y /1.5;

// Check if the X and Y coordinates of the touch are within one of our buttons
for(Uint8_t b = 0; b <6; b ++)
{
如果(按下&& key [b] .contains(t_x,t_y))
......

0
Tormentor2202

Reply 2 days ago

我真的很喜欢你。但它都是一样的。校准过程本身就没有机会触摸角落。并且没有触摸符号的回应。也许你可以向我提供来自TFT_ESPI的Setup_h和.ino的FreetouchDeck文件夹吗?你还有Ili 9341吗?我也在setup_h中更改了这一行。
// Only define one driver, the other ones must be commented out
#define ili9341_driver.
//#定义ST7735_Driver //为此显示定义下面的附加参数
//#define ILI9163_DRIVER // Define additional parameters below for this display
//#define S6D02A1_DRIVER
.....

0
Tormentor2202

Reply 2 days ago

I think the key to my Proplem is, to figure out, why the ESP ist calibrating the touch by itself. Even when i unconnect all the Touch relevant pins its still the same. :-//