眼动模块进阶开发：如何扩展新Blockly积木块与自定义图片ID

眼动模块进阶开发：如何扩展新Blockly积木块与自定义图片ID

【免费下载链接】eye-tracking-module源师兄扩展项目: 眼动模块 | 由源师兄组织创建项目地址: https://gitcode.com/yuanshixiong/eye-tracking-module

源师兄眼动模块是一个通过串口控制圆形屏幕眼动表情的开源扩展项目。本文面向新手开发者，手把手教你扩展新的 Blockly 积木块，并掌握自定义图片ID（pic_id）的使用方法，帮你快速给"眼睛"加上更多表情与动作。

📁 一、先认识项目里的 4 个关键文件

理解扩展开发之前，先了解每个文件负责什么：

💡 一句话总结：积木块（JS）负责"点一下"，Python 驱动负责"发指令"，两者通过积木类型名对应起来。

🔍 二、快速看懂积木如何变成 Python 代码

打开 blocksdef.js，每个积木块都有固定"双胞胎"结构：

1. 积木定义部分（Blockly.Blocks['ohcode_extend_eye_screen_show_color']）：描述积木长什么样，包括两个下拉菜单——串口引脚选择（P1/P2/P8/P12/P15/P16）和功能选择（清屏、白色、红色……）。
2. 代码生成部分（pythonGenerator.forBlock[...]）：把下拉菜单的值翻译成 Python 语句。例如选"红色"，就生成clear_screen_command(255,0,0,uart)，同时自动注入from CircularScreenExtend import *的导入语句（见 blocksdef.js#L19-L38）。

看懂这个"定义 → 生成"的对应关系，你就具备了扩展新积木块的全部基础。

🧩 三、扩展新积木块的 5 步方法

以"新增一个'换表情'积木块"为例，完整流程如下：

第 1 步：在 blocksdef.js 中定义新积木

复制一个现有积木的定义，改成一个全新的类型名（如ohcode_extend_eye_show_pic），并在appendField(new Blockly.FieldDropdown([...]))中放入你想要的选项。注意：每个选项是["显示文本", "内部值"]的成对结构，"内部值"会传给代码生成器。

第 2 步：编写对应的生成器函数

照着 blocksdef.js#L57-L77 的写法，为新类型名注册pythonGenerator.forBlock函数：用block.getFieldValue('字段名')取出下拉值，再用switch把每个值映射成一行 Python 调用，例如show_pic_command(20, uart)。

第 3 步：在 Python 驱动中实现命令函数

打开 library/CircularScreenExtend.py，确认目标函数已存在。如果还没有，可以仿照 clear_screen_command 的格式：组装0x5A 0xA5开头的数据帧 → 追加校验和（sum & 0xFF）→uart.write发送。

第 4 步：把积木注册进工具箱

编辑 category.json，在contents数组里追加一项：

{ "kind": "BLOCK", "type": "ohcode_extend_eye_show_pic" }

这里的type必须与第 1 步定义的积木类型名完全一致。

第 5 步：编译下载验证

在积木编辑器中重新加载扩展，确认新积木出现在"眼动模块"分类下，拼好后生成 Python 代码，检查输出是否符合预期。

🎨 四、自定义图片ID：给眼睛换表情

眼动模块屏幕上预先烧录了一批图片，每张图对应一个数字图片ID（pic_id）。核心函数是 show_pic_command：

• ID 范围：源码中有断言0 <= pic_id <= 72，超出范围会直接报错；
• 调用方式：show_pic_command(图片ID, uart)，发送后延时 50ms 等待屏幕刷新；
• 现有映射参考："向上看/向下看/向左看/向右看"等表情在 blocksdef.js#L67-L76 中分别映射到了图片ID 1、11、16、3、13、17；
• 组合动画示例：eye_blink 函数 通过依次播放图片ID[0, 19, 20, 21, 22, 23, 24, 25, 0]并间隔 200ms，实现了"眨眼"动画。

自定义新表情的技巧：

1. 先用 Python 脚本逐个遍历 0~72 的图片ID，观察屏幕内容，找出你想要的表情对应的 ID；
2. 把找到的 ID 写进积木下拉菜单（显示文本自定义，如["惊讶", "30"]）；
3. 在生成器switch中加一行case '30': return "show_pic_command(30, uart)\n"；
4. 若要做"动画"，仿照eye_blink写一个循环函数即可。

❓ 五、常见问题排查

• 积木不见了：检查 category.json 中的type是否与 blocksdef.js 里的积木名拼写完全一致；
• 生成代码报错：确认 Python 驱动里有对应函数名，且生成器返回语句以\n结尾；
• 屏幕没反应：检查串口引脚下拉值是否与硬件接线一致（P1/P2/P8/P12/P15/P16）；
• 图片ID报错：ID 必须在 0~72 之间，见 CircularScreenExtend.py#L43 的断言。

✅ 小结

掌握"积木定义 → 代码生成 → Python 驱动 → 分类注册"这条链路后，你就能为眼动模块不断添加新积木块、新表情和新动画。建议从最简单的"单张图片ID"积木练起，再逐步尝试组合式动画，祝扩展愉快！🚀

【免费下载链接】eye-tracking-module源师兄扩展项目: 眼动模块 | 由源师兄组织创建项目地址: https://gitcode.com/yuanshixiong/eye-tracking-module