使用 M5Stack Core2 构建一个随机笑话生成器

在本次可视化编程的 Visuino 教程中，我们将使用 M5Stack Core2 从一个免费的在线 API 中获取笑话，并在屏幕上以交互式的方式进行展示。

当您按下设备上的第一个按钮时，M5Stack Core2 中的 ESP32 会连接到互联网，并从官方笑话 API 请求一个随机笑话。笑话的第一部分，即所谓的“铺垫部分”，会显示在屏幕上——通常是一个问题或幽默的开场白。

按下第二个按钮就会揭示出笑点，从而结束这个笑话并传递出其中的幽默效果。

该笑话数据以 JSON 格式从 API 中获取，然后在 Visuino 中进行处理，将开头部分和结尾部分分开，以便在按下按钮时能在恰当的时间显示出来。

通过使用 Visuino 的拖拽式可视化界面，您可以轻松配置 Wi-Fi 连接、向笑话 API 发送 HTTP 请求，并将接收到的文本显示在 M5Stack Core2 屏幕上。

该项目展示了如何构建一个可联网的交互式设备，该设备能够从在线 API 中获取实时数据，并以有趣且吸引人的方式呈现这些数据。

如果你喜欢尝试新事物，那么你可以轻松地对这个项目进行修改或扩展——比如增加笑话的分类、在设定的时间后自动加载新的笑话、将笑话显示在外部显示屏上，或者将你最喜欢的笑话本地保存下来。

第 1 步：您将需要的物品/材料

M5Stack Core2 ESP32 物联网开发套件

注意：您还可以使用任何其他配备显示屏和 Wi-Fi 的板子。

第 2 步：启动 Visuino 软件，并选择 M5 Stack 核心 2 板型。

按照第一张图片所示启动 Visuino。在 Visuino 中点击“Arduino 组件”中的“工具”按钮(图 1)。当对话框出现时，如图 2 所示选择“M5 Stack Core 2”。

第 3 步：设置 Wi-Fi

选择 M5 Stack 内核 2 板，在编辑器中依次点击“模块”>“WiFi”>“接入点”，然后点击“[...]”按钮，这样就会打开“接入点”窗口。在该编辑器中，将 WiFi 接入点拖到左侧。

•在属性窗口中，在“SSID”选项下输入您无线网络的名称

•在“密码”这一栏中，填写您无线网络的访问密码。

•关闭“接入点”窗口

•在左侧的编辑器中，选择“模块>无线网络>套接字”，点击[...]按钮，这样就会打开“套接字”窗口。将 TCP/IP 客户端从右侧拖到左侧，然后在属性窗口中设置端口为 37 。

•关闭“套接字”窗口

第 4 步：在 Visuino 设置界面中

选择 M5 Stack 核心 2 板，在属性窗口中展开“模块>TFT 显示器>元素” 然后点击“元素”处的 3 个点。

•在“元素”窗口中，将“覆盖屏幕”拖至左侧。

•在“元素”窗口中，将“文本字段”拖至左侧;在属性窗口中，将尺寸设置为 3，选择“自动换行”为“是”，将“Y 值”设置为 10。

•关闭“元素”窗口

第 5 步：在 Visuino 中添加组件

•添加 2 个“延时按钮”组件

•添加“HTTP 客户端”组件

•添加“延迟”组件

•添加“字符转文本”组件

•添加“拆分 JSON 对象”组件

•添加“文本开/关切换”组件

•添加“文本多源合并”组件

第 6 步：在 Visuino 中解析 JSON 数据

用鼠标右键点击“SplitJSONArray1”，然后在菜单中点击“解析 JSON 数组...”

在“JSON 数组”窗口中粘贴以下示例代码：

或者复制粘贴以下内容：

{"类型": "一般", "开场白": "达斯·维达是怎么知道卢克圣诞节会收到什么礼物的?", "高潮": "他能感觉到那些礼物的存在。"， "编号"： 116}

第 7 步：在 Visuino 中设置组件

•选择“Switch1”，然后在属性窗口中将“启用时发送”设置为“启用”。

选择“CharToText1”，然后在属性窗口中将“最大长度”设置为 300 。

•选择“Delay1”，然后在属性窗口中将“Interval”(间隔)设置为 2000000 。

•选择“HTTPClient1”，然后在属性窗口中将“Host”设置为“www.official-joke-api.appspot.com”

•双击“HTTPClient1”，然后在“请求”窗口中将“获取”拖到左侧，在“属性”窗口中将“URL”设置为 /random_joke

第 8 步：在 Visuino 连接组件中

•将 M5 Stack Core 2 中的“TCP 客户端 1”引脚(输出)连接到“延迟 1”引脚(启动)上。

•将“Delay1”引脚[输出]与 M5 堆叠式核心 2 中的“TCP 客户端 1”引脚相连[断开连接]

•将“Delay1”引脚(输出端)与“CharToText1”引脚(时钟端)连接起来。

•将 M5 Stack Core 2 的“远程连接”端口连接至“HTTPClient1 > GET1”端口的“时钟”端口。

•将“按钮1”引脚[输出]与“HTTP客户端1 > GET1”引脚[时钟]连接起来。

•将“M5 栈核心 2 > TFT 显示器 > 触摸 > 按钮 A”引脚(输出)连接到“按钮 1”引脚(输入)

•将“M5 栈核心 2 > TFT 显示器 > 触摸 > 按钮 B”引脚(输出)连接到“按钮 2”引脚(输入)

•将“HTTPClient1”引脚(输出)连接至“M5 Stack 核心 2 > WiFi > TCP 客户端 1”引脚(输入)

•将“HTTPClient1 > GET1 > Response > Content”引脚(输出)连接到“CharToText1”引脚(输入)

•将“CharToText1”引脚(输出)连接到“SplitJSON1”引脚(输入)

•将“SplitJSON1 > setup”引脚(输出)连接至“MultiMerger1”引脚(0)

•将“SplitJSON1 > punchline”引脚(输出)连接到“Switch1”引脚(输入)

•将“按钮2”引脚[输出]与“开关1”引脚[启用]连接起来

•将“Switch1”引脚[输出]与“MultiMerger1”引脚[1]连接起来。

务必按照相同的顺序进行连接：

•将“MultiMerger1”引脚[输出]与“M5 栈式核心 2 > TFT 显示器 > 填充屏幕 1”引脚[时钟]连接起来。

•将“MultiMerger1”引脚[输出]与“M5 层叠核心 2 > TFT 显示器 > 文本字段 1”引脚[输入]连接起来。

•将“MultiMerger1”引脚[输出]与“M5 堆叠核心 2 > TFT 显示器 > 文本字段 1”引脚[时钟]连接起来。

第 9 步：生成、编译并上传代码

在 Visuino 中，点击底部的“构建”选项卡，确保选择了正确的端口，然后点击“编译/构建并上传”按钮。

第 10 步：播放

如果为 M5 栈式核心供电，按下第一个触摸按钮，显示屏应开始显示笑话内容;而如果按下中间的触摸按钮，显示屏则应显示笑话的结尾部分。

本文编译自hackster.io