使用创客触摸屏创建多彩的用户界面

专为创客社区设计的微处理器板不仅吸引了渴望进入电子领域的发明家们的目光，也吸引了专业工程师们的目光。独立顾问、新创公司和大型工程组织内的团队在开发新产品时，都面临着巨大的时间和成本压力。通过使用经济实惠的开发板、扩展模块以及创客社区中不断完善的代码示例，可以化解这些压力。

利用现成的硬件可以快速配置试验台，实现像无线连接这样的基本功能。通过消除让射频电路正常工作或编写底层驱动程序等挑战性的工作，工程师可以快速将他们的注意力转移到为其应用开发更高层次的差异化功能上。

市面上有众多厂商提供各种各样的扩展板，可以利用像 Arduino 这样的既有生态系统，以一种简单的方法添加特殊功能，例如运动或环境感应、人体检测、接近感应、MEMS 麦克风、GPS 接收器或其他功能。这些资源可帮助工程师加快概念验证的建立和运行速度。

创建专业的用户界面

典型的创客方式是构建基于试验板的简单项目，使用机械开关和 LED 演示主要功能。要获得外观更专业的用户界面，可设计导入 LCD 模块或图形 TFT 显示屏设计，并结合按钮、小键盘或触摸屏传感器。

有多种彩色图形 TFT-LCD 适合与流行的创客板搭配使用。根据具体型号，它们可能是使用单独的电线连接的分线板，也可能设计为直接插入主板的扩展针座。有多个品牌提供了合适的显示屏，其中包括像 Adafruit、DFRobot 和 Mikroelektronika 这样的创客们非常熟悉的品牌，以及像 FTDI 这样的可能在专业工程师的圈内更为熟悉的品牌。常见的产品包括尺寸小于 1 英寸的微型彩色 TFT，到类似 2.8 英寸 Adafruit 1770 这样的触摸屏，以及 5 英寸以上的更大触摸屏。这些显示屏通常还提供 SD 卡插槽，适用于存储将在屏幕上显示的位图图像。

将板和屏幕组装到一起

显示屏可能设计成与单独的驱动器板配合使用，这会带来复杂的连接挑战。如果无法将显示屏直接插入驱动器，则可能需要适配器。另一方面，如果驱动器已集成到显示屏中，则可免除用户的接线任务。

有些显示屏（例如 DFRobot DFR0387）设计成直接插入常用开发板的扩展针座，从而构建出可以轻松内置到前面板或便携式外壳的简洁组件。这种 3.5 英寸触摸屏显示屏具有 320 x 480 像素的分辨率，并附带三个串行接口、一个 I²C 端口，以及一个可选择 5 V 或 3.3 V 输出的 5 V 电源，可与 Arduino DUE 板一起使用。

正确连接硬件后，显示屏很快便可以正常运行。通常可通过调整配套软件库附带的代码示例，来自定义包含按钮或滑块的 GUI，确定按钮或滑块的屏幕位置，选择颜色，以及定义触摸坐标。还有一种替代方法，即使用图形工具来设计 GUI，然后使用开源工具或专有工具创建相应的代码，以简化该任务。

方法 1.GUI 编码

要在屏幕上实现一些基本的触摸感应按钮，设计应该考虑按钮的形状、大小和位置、颜色，以及向用户确认已检测到触摸操作的可见响应。合适的响应可能包括短时或永久更改按钮的颜色，将按钮周边更改为其他颜色，隐藏按钮，或在屏幕上展示其他用户界面或图像。触摸屏区域需要映射到相同的总体显示屏区域，并且需要编写代码来检测这些按钮区域内的触摸操作，以及生成相应的响应。

通常可通过检查创客模块附带的示例应用来化解编码挑战。其中一个示例应用是 Adafruit 的 graphicstest，该应用可在显示屏上绘制线条、圆点、圆形和文本等对象。通过检查这些示例的源代码，可以获得关于如何创建用于展示图形或图像的自定义应用的基本信息，例如控制硬件所需的库、用于激活 SD 卡控制器或 TFT 驱动器 IC 的正确片选引脚编号，等等。

用于电容式触摸显示屏的 Adafruit FT6206 库包含示例程序 CapTouchPaint，该程序会创建五个触摸感应按钮，供用户选择使用红色、黄色、绿色、青色、蓝色或品红色进行着色。屏幕的剩余部分可用于着色，并在触摸后会呈现所选颜色的圆点或线条。

CapTouchPaint 源代码显示了如何在指定的位置创建一组具有指定大小、形状和颜色的触摸感应按钮。图 1 中的代码显示了如何在屏幕上绘制彩色选择框。默认选择设为红色，并指示为方框周围的白色边沿。

图 1：用于在 TFT 显示屏上绘制彩色选择框的 Adafruit 演示代码。

CapTouchPaint 示例还显示了如何检测触摸点。图 2 中的代码摘录描述了触摸检测如何更改选定颜色的按钮。

图 2：通过检测触摸点来控制按钮。

开源代码有许多优势，其中一点是，用户可以自由地使用和调整自己程序内的代码。使用开源代码可以占得先机，然后就可以比较轻松地强化特性，例如通过添加文本来描述每个按钮的功能（例如开始/停止、前进、倒退或菜单选择）等。

另一种方法可用于创建功能更强大的控制面板，即，以图形方式将用户界面描述为将要写入到显示屏的位图。可以在控制器板存储器（例如 Arduino 板载闪存或 SD 卡）中存储一个或多个描述各种用户界面屏幕的 .bmp 图像文件。图 3 显示了如何通过将 SD 卡中的 .h 库文件添加到“include”列表中，使代码能够检索卡中的数据。

图 3：使应用能够与 SD 卡通信。

可使用多个示例来演示如何从存储器检索 .bmp 文件，并在显示屏中展示该图像。图 4 显示了 Adafruit spitftbitmap 示例中的一段代码摘录，该代码专为 1.44 英寸 2088 和其他类似尺寸 Adafruit TFT 显示屏中使用的控制器而编写。可在线获取许多替代位图查看器程序。

图 4：用于显示位图文件的 TFT 控制器代码。

方法 2.使用图形设计工具

Memory Imprint Studio 发表的一篇博客中建议了如何将图形设计方法与编程混合使用，帮助创建复杂的用户界面。该博客建议使用开源的 Inkscape 编辑器等矢量图形编辑器来创建表示为图形 SVG 文件的用户界面的外观和风格。将画板大小设为与所选 TFT LCD 相同的大小，这将确保在显示屏上精确地复制按钮、滑块或其他物件的位置。

该博客还建议使用 EMACS 开源文档操作工具，从 SVG 文件提取坐标。EMACS 可以自动生成代码，描述图形布局，然后将其上传到 Arduino。此处描述的方法还参考了以下事实：矢量图形编辑器这类应用使用 24 位色，而一些创客板不支持标准的 24 位色，但可能支持 16 位或 18 位色深。为帮助开发人员确保以所需的颜色渲染屏幕上的图形，Memory Imprint Studio 提供了一个 RGB 5:6:5 计算器，针对任意所需颜色，以兼容 Arduino 的 5:6:5 格式生成正确的等效十六进制代码。

Jeremy Saglimbeni 是许多 Adafruit 用户熟悉的一位创客，他在使用 Adafruit 彩色 TFT 显示屏和 Arduino 板为一个简单家庭自动化系统开发菜单型用户界面时，也解决了 8:8:8 到 5:6:5 的颜色转换问题。此演示包含多个不同的屏幕，以便家庭自动化用户能够控制房屋内的各种系统，并且允许调整亮度和休眠时间等主要用户界面偏好。设置休眠时间，在保持非活动状态几秒钟后关闭显示屏背光，这有助于节省电池供电型应用的电能。它还显示了如何通过定期监测电池电压来构建作为充电状态指标器的电池电量计。当电压跌至阈值水平时，填充电池图标的剩余像素的颜色将变为红色，以向查看者发出可视化警告。

在 Instructables 这样的创意分享网站可找到在受 ILI9341 芯片控制的 TFT 显示屏（如 Adafruit 1770 和其他显示屏）上绘制图形的更多帮助。此示例显示了如何显示在 Arduino 的板载闪存中存储的而不是在显示屏模块的 SD 卡中存储的图像，且基于 Adafruit_ILI9341 库中的示例。

FTDI 通过在其网站提供演示程序，为类似的开发方法提供支持。这些程序可以与 CleO50A 等 FTDI 显示屏配合使用，该显示屏还提供了其他硬件接口，例如摄像机输入接口和 I²S 及 CAN 总线接口。

自动生成代码

由于开源软件可以自由地使用和修改，因此可通过利用现有的代码示例和其他创客分享的经验，无需任何花费便可开始开发图形用户界面。

图 5：MikroElektronika Visual TFT 帮助创客使用拖放操作创建复杂的 GUI。

如果开发预算中可以腾出一些工具预算，则可采用类似 Mikroelektronika Visual TFT（图 5）这样的环境，它为设计人员提供了一种低成本的方法，通过向项目中拖放所需的可视化元素来创建 GUI。这些元素可能是按钮、滑块、时钟、标签、动画或其他物件。用户可以同使用矢量图形编辑器一样创建图层、组合组件，以及定义驱动底层嵌入式系统的事件。作为统一工作流的一部分，GUI 以 mikroC、mikroBasic 或 mikroPascal 自动完成编码，并且可在编译器 IDE 中对代码进行任何修改。Visual TFT 本身支持所有 Mikroelektronika 板和控制器，以及 FTDI 的 EVE GUI 平台和图形控制器。Visual TFT 最近还集成了编译器，从而允许用户顺利完成以图形方式构思创意到最终完成 GUI 代码的完整过程。

总结

网络上存在广泛的创客硬件及相关开源代码选择，为专业工程师提供了快速启动项目的宝贵资源。除了提供建立快速概念验证的部件之外，还有机会创建外观和风格均与最终产品预期非常接近的复杂原型。

市场上有众多厂商在提供触摸感应彩色图形显示屏，都能让工程师快速实现具有专业外观的用户界面。具体可操作的方法很多，如利用示例程序直接编写简单的功能代码，或使用免费的在线图形工具或 Visual TFT 这类专有环境来构建定制 GUI。许多可靠的社区项目都提供在线访问服务，通过这些项目可帮助专业工程师们与创客社区建立联系，并为社区的持续成功做出贡献。