从0到1开发串口屏Blockly扩展serial-display-module blocksdef.js实现完全教程【免费下载链接】serial-display-module源师兄扩展项目: 串口屏模块 | 由源师兄组织创建项目地址: https://gitcode.com/yuanshixiong/serial-display-module源师兄 serial-display-module 是一款串口屏 Blockly 扩展项目让你通过积木拖拽就能控制串口屏外接显示屏显示文字、图片和页面跳转。本教程面向新手从项目结构、积木定义到 blocksdef.js 实现与底层串口驱动带你完整走一遍从 0 到 1 开发串口屏扩展的全过程并教你举一反三地添加自己的新积木。 先认识项目4个文件构成完整串口屏扩展文件职责blocksdef.js定义积木外观 Python 代码生成规则核心category.json积木分类名、配色与分组config.json设备信息源师兄外接扩展屏 / 扩展显示屏library/screen_extend.py串口协议驱动生成屏幕命令字节流config.json 里的一句话概括了整个扩展的目标通过串口控制显示屏显示图片和文字。积木面板则在 category.json 中定义分类名为串口屏主题色是#84a740绿色所有积木按基础和获取数据两个标签分组。 第一步画积木——init() 的三大要素blocksdef.js 中的每个积木先注册外观。以显示文字积木为例它在 blocksdef.js 的注册结构只有三大要素端口输入槽appendDummyInput添加串口下拉框P1、P2、P5、P8、P11~P16、硬串口appendValueInput添加控件ID与显示内容两个可插值的接口连接关系setPreviousStatement/setNextStatement让它成为可上下堆叠的语句积木setInputsInline(true)让端口横向排列外观与说明setColour统一使用分类绿色#84a740setTooltip提供鼠标悬浮提示。 小技巧如果想要一块有结果、能塞进其他积木的值积木就改用setOutput——获取当前页面ID、获取按键状态等积木就是值积木。⚙️ 第二步代码生成——pythonGenerator.forBlock 的作用积木画好后关键问题是用户拖到画布上时它生成什么 Python 代码blocksdef.js 中每个积木都配一个pythonGenerator.forBlock[积木名]生成函数常用技巧有三招读下拉框block.getFieldValue(choose)拿到用户选择的串口读插值口pythonGenerator.valueToCode(block, id, ...)拿到端口插入值对应的代码自动注入 import往pythonGenerator.definitions_里写入语句代码顶部会自动出现from screen_extend import ...用户完全不用手写导入。最终生成的核心代码其实只有一行suart_1.write(show_text(2, 标签1))其中1是所选串口2与标签1来自 category.json 中设置的 shadow 默认值控件ID默认2、内容默认标签1新手不填任何值也能直接运行。 第三步category.json 分组与默认值积木定义完只需在 category.json 中登记即可出现在串口屏面板kind: BLOCKtype指向 blocksdef.js 里定义的积木名inputs下的shadow为每个端口设置灰色占位默认值kind: LABEL制造基础获取数据分隔标签让面板层次清晰。 8个串口屏积木功能一览积木名blocksdef.js 中的标识功能类型ohcode_extend_screen_show_text设置文字控件显示内容语句ohcode_extend_screen_show_pic设置图片控件显示图片语句ohcode_extend_screen_goto_pageN 秒后跳转到指定页面语句ohcode_extend_screen_set_button_enable打开/关闭按键触摸功能语句ohcode_extend_screen_set_button_state模拟按键按下/抬起语句ohcode_extend_screen_get_page_id获取当前页面ID值ohcode_extend_screen_get_button_state获取按键按下状态Boolean值ohcode_extend_screen_get_button_data获取按键自定义事件数据值ohcode_extend_screen_get_button_press获取按键按压次数值 规律很好记5 个控制积木都带串口下拉框4 个获取积木都以页面ID 按键ID为参数——这正是串口屏协议的命名习惯。 底层驱动 library/screen_extend.py 如何配合blocksdef.js 生成的代码最终调用的是 library/screen_extend.py 中的函数SUART(tx)在指定引脚上创建软串口SoftUART主屏与外接屏通过它通信show_text、show_pic、go_to_page按串口屏协议拼装命令字节流结构都是帧头 地址 数据 固定帧尾\xff\xfc\xff\xffget_button_state等函数先读取屏幕回传的数据再用analysis_data解析出页面、按键、按压次数等信息。一句话总结分工blocksdef.js 管长什么样和生成什么screen_extend.py 管怎么通信两者解耦扩展新功能时互不干扰。 获取代码与你的第一个扩展运行以下命令获取项目源码打开后以显示文字积木为模板照着写你自己的第一块积木git clone https://gitcode.com/yuanshixiong/serial-display-module开发新积木的三步检查清单在 blocksdef.js 写一对函数Blockly.Blocks[你的积木名]注册外观 pythonGenerator.forBlock[你的积木名]生成代码在 category.json 登记积木名和 shadow 默认值若需要新的屏幕命令在 library/screen_extend.py 增加对应协议函数。项目采用 Apache-2.0 协议发布可放心二次开发。掌握这套模式后你还能用同样方式为串口屏添加调节亮度关屏等新功能。【免费下载链接】serial-display-module源师兄扩展项目: 串口屏模块 | 由源师兄组织创建项目地址: https://gitcode.com/yuanshixiong/serial-display-module创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 从0到1开发串口屏Blockly扩展：serial-display-module blocksdef.js实现完全教程
从0到1开发串口屏Blockly扩展serial-display-module blocksdef.js实现完全教程【免费下载链接】serial-display-module源师兄扩展项目: 串口屏模块 | 由源师兄组织创建项目地址: https://gitcode.com/yuanshixiong/serial-display-module源师兄 serial-display-module 是一款串口屏 Blockly 扩展项目让你通过积木拖拽就能控制串口屏外接显示屏显示文字、图片和页面跳转。本教程面向新手从项目结构、积木定义到 blocksdef.js 实现与底层串口驱动带你完整走一遍从 0 到 1 开发串口屏扩展的全过程并教你举一反三地添加自己的新积木。 先认识项目4个文件构成完整串口屏扩展文件职责blocksdef.js定义积木外观 Python 代码生成规则核心category.json积木分类名、配色与分组config.json设备信息源师兄外接扩展屏 / 扩展显示屏library/screen_extend.py串口协议驱动生成屏幕命令字节流config.json 里的一句话概括了整个扩展的目标通过串口控制显示屏显示图片和文字。积木面板则在 category.json 中定义分类名为串口屏主题色是#84a740绿色所有积木按基础和获取数据两个标签分组。 第一步画积木——init() 的三大要素blocksdef.js 中的每个积木先注册外观。以显示文字积木为例它在 blocksdef.js 的注册结构只有三大要素端口输入槽appendDummyInput添加串口下拉框P1、P2、P5、P8、P11~P16、硬串口appendValueInput添加控件ID与显示内容两个可插值的接口连接关系setPreviousStatement/setNextStatement让它成为可上下堆叠的语句积木setInputsInline(true)让端口横向排列外观与说明setColour统一使用分类绿色#84a740setTooltip提供鼠标悬浮提示。 小技巧如果想要一块有结果、能塞进其他积木的值积木就改用setOutput——获取当前页面ID、获取按键状态等积木就是值积木。⚙️ 第二步代码生成——pythonGenerator.forBlock 的作用积木画好后关键问题是用户拖到画布上时它生成什么 Python 代码blocksdef.js 中每个积木都配一个pythonGenerator.forBlock[积木名]生成函数常用技巧有三招读下拉框block.getFieldValue(choose)拿到用户选择的串口读插值口pythonGenerator.valueToCode(block, id, ...)拿到端口插入值对应的代码自动注入 import往pythonGenerator.definitions_里写入语句代码顶部会自动出现from screen_extend import ...用户完全不用手写导入。最终生成的核心代码其实只有一行suart_1.write(show_text(2, 标签1))其中1是所选串口2与标签1来自 category.json 中设置的 shadow 默认值控件ID默认2、内容默认标签1新手不填任何值也能直接运行。 第三步category.json 分组与默认值积木定义完只需在 category.json 中登记即可出现在串口屏面板kind: BLOCKtype指向 blocksdef.js 里定义的积木名inputs下的shadow为每个端口设置灰色占位默认值kind: LABEL制造基础获取数据分隔标签让面板层次清晰。 8个串口屏积木功能一览积木名blocksdef.js 中的标识功能类型ohcode_extend_screen_show_text设置文字控件显示内容语句ohcode_extend_screen_show_pic设置图片控件显示图片语句ohcode_extend_screen_goto_pageN 秒后跳转到指定页面语句ohcode_extend_screen_set_button_enable打开/关闭按键触摸功能语句ohcode_extend_screen_set_button_state模拟按键按下/抬起语句ohcode_extend_screen_get_page_id获取当前页面ID值ohcode_extend_screen_get_button_state获取按键按下状态Boolean值ohcode_extend_screen_get_button_data获取按键自定义事件数据值ohcode_extend_screen_get_button_press获取按键按压次数值 规律很好记5 个控制积木都带串口下拉框4 个获取积木都以页面ID 按键ID为参数——这正是串口屏协议的命名习惯。 底层驱动 library/screen_extend.py 如何配合blocksdef.js 生成的代码最终调用的是 library/screen_extend.py 中的函数SUART(tx)在指定引脚上创建软串口SoftUART主屏与外接屏通过它通信show_text、show_pic、go_to_page按串口屏协议拼装命令字节流结构都是帧头 地址 数据 固定帧尾\xff\xfc\xff\xffget_button_state等函数先读取屏幕回传的数据再用analysis_data解析出页面、按键、按压次数等信息。一句话总结分工blocksdef.js 管长什么样和生成什么screen_extend.py 管怎么通信两者解耦扩展新功能时互不干扰。 获取代码与你的第一个扩展运行以下命令获取项目源码打开后以显示文字积木为模板照着写你自己的第一块积木git clone https://gitcode.com/yuanshixiong/serial-display-module开发新积木的三步检查清单在 blocksdef.js 写一对函数Blockly.Blocks[你的积木名]注册外观 pythonGenerator.forBlock[你的积木名]生成代码在 category.json 登记积木名和 shadow 默认值若需要新的屏幕命令在 library/screen_extend.py 增加对应协议函数。项目采用 Apache-2.0 协议发布可放心二次开发。掌握这套模式后你还能用同样方式为串口屏添加调节亮度关屏等新功能。【免费下载链接】serial-display-module源师兄扩展项目: 串口屏模块 | 由源师兄组织创建项目地址: https://gitcode.com/yuanshixiong/serial-display-module创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考