Johnny-Five 实战：在 Tessel 2 上用 JHD1313M1 RGB LCD 打造 CSS 颜色预览器

IoT机器人嵌入式【免费下载链接】johnny-fiveJavaScript Robotics and IoT programming framework, developed at Bocoup.项目地址https://gitcode.com/gh_mirrors/jo/johnny-five点击查看免费下载本文以 Johnny-Five 仓库中的docs/lcd-rgb-bgcolor-previewer-tessel.md指南为主体讲解如何在 Tessel 2 Grove 扩展板上驱动 JHD1313M1 RGB 背光 LCD并将css-color-names中全部颜色名称逐一在屏幕背景上轮播预览。读完本文你将掌握five.LCD的 JHD1313M1 控制器用法、bgColor()/cursor()/print()等链式 API以及通过board.repl.inject()把自定义交互函数注入 REPL 的调试技巧。一、示例概述RGB LCD 颜色预览器做了什么在 Johnny-Five 仓库中docs/lcd-rgb-bgcolor-previewer-tessel.md对应的可运行示例位于 eg/lcd-rgb-bgcolor-previewer-tessel.js。它做的事情非常直观用tessel-io将 Tessel 2 作为 Johnny-Five 的 IO 插件接入初始化一个控制器为JHD1313M1的five.LCD这是一块 16 列 × 2 行的 I²C RGB 背光 LCD常以 Grove 模块形式出现把屏幕背景色先设为yellow通过 REPL 注入一个preview()函数以每秒一次的速度把css-color-names包提供的所有 CSS 颜色名称逐一遍历每换一个颜色就更新背景色并在屏幕上打印该颜色名。运行方式与原文档一致在仓库根目录执行node eg/lcd-rgb-bgcolor-previewer-tessel.js启动后在 Johnny-Five 的 REPL 提示符中调用 preview()屏幕便会开始每秒钟切换一次背景色与文字从aliceblue、antiquewhite……一路轮播到最后一个颜色名后自动停止。二、完整代码与逐段解析以下是示例的完整源码与原文档代码一致来自 eg/lcd-rgb-bgcolor-previewer-tessel.jsvar five require(../); var Tessel require(tessel-io); var board new five.Board({ io: new Tessel() }); var colors Object.keys(require(css-color-names)); board.on(ready, () { var lcd new five.LCD({ controller: JHD1313M1 }); lcd.bgColor(yellow); var interval null; var index 0; board.repl.inject({ preview() { if (interval) { clearInterval(interval); index 0; } interval setInterval(() { if (index colors.length) { clearInterval(interval); return; } var color colors[index]; lcd.bgColor(color).cursor(0, 0).clear().print(color); }, 1000); } }); });逐段拆解如下1. 依赖与 IO 初始化var five require(../); var Tessel require(tessel-io); var board new five.Board({ io: new Tessel() });require(../)在示例目录内指向 Johnny-Five 包本身lib/johnny-five.js为入口tessel-io是 Tessel 2 的 Johnny-Five IO 插件将 Tessel 的引脚与 I²C 总线抽象成标准 IO 接口new five.Board({ io: new Tessel() })表示 Johnny-Five 不再自动探测串口而是直接通过 Tessel 2 访问硬件。注意文档仓库本身并未把tessel-io与css-color-names列为运行时依赖package.json的dependencies中主要包含serialport等因此运行本示例前需要先安装这两个包npm install tessel-io css-color-names2. 颜色清单的获取var colors Object.keys(require(css-color-names));css-color-names是一个把 CSS 颜色名映射为十六进制色值的 npm 包。Object.keys(...)直接取出全部颜色名称字符串数组约 148 个作为轮播的数据源。示例不关心色值本身因为 LCD 控制器内部会自行完成颜色名 → RGB的换算详见下文源码分析。3. LCD 初始化与初始背景色var lcd new five.LCD({ controller: JHD1313M1 }); lcd.bgColor(yellow);controller: JHD1313M1指定使用 JHD1313M1 驱动芯片的 I²C RGB LCD。创建实例后立即把背光设为黄色作为默认预览色。4. REPL 注入与轮播逻辑board.repl.inject({ preview() { ... } });board.repl.inject()是 Johnny-Five 提供的 REPL 扩展机制运行脚本时 Johnny-Five 会自动进入交互式 REPLinject能把任意对象/函数以指定名字暴露给开发者随时调用。这里注入的preview()完成两件事若已有正在运行的定时器先clearInterval并重置index 0支持重复触发重播否则以 1000ms 间隔启动setInterval依次取下一个颜色名执行链式调用lcd.bgColor(color).cursor(0, 0).clear().print(color);这条链的含义是bgColor(color)设置背光/背景颜色 →cursor(0, 0)把光标定位到第 0 行第 0 列 →clear()清屏 →print(color)输出当前颜色名。全部方法都返回this因此可以连续调用。遍历结束时index colors.length清除定时器并返回预览自动终止。三、接线图JHD1313M1 在 Tessel 2 上的连接方式原文档提供了该场景的面包板接线图与 Fritzing 工程文件与配套的 Tessel 2 Grove – RGB LCD Display 示例docs/lcd-rgb-tessel-grove-JHD1313M1.md共用同一套硬件连接接线与布局细节可打开 Fritzing 源文件查看docs/breadboard/lcd-rgb-tessel-grove-JHD1313M1.fzz。要点说明JHD1313M1 是 Grove 生态的 I²C RGB 背光 LCD16×2通过 Grove 线缆接驳到 Tessel 2 的 I²C 端口即可无需额外跳线因为走的是 I²C 总线示例代码中无需声明任何引脚——这正是new five.LCD({ controller: JHD1313M1 })不传pins的原因。四、源码级原理JHD1313M1 控制器如何工作要理解示例为何能零引脚配置需要看 Johnny-Five 对 JHD1313M1 的控制器实现位置在 lib/lcd.js 的Controllers.JHD1313M1lib/lcd.js。1. 双 I²C 地址设计LCD 与 RGB 各占一个地址JHD1313M1 在同一块模块上集成了两个 I²C 器件因此 Johnny-Five 用两个地址分别控制// LCD: 0x3E // RGB: 0x62 this.address { lcd: options.address || 0x3E, rgb: 0x62 };0x3EHD44780 兼容的字符 LCD 控制器寄存器/指令通道0x62RGB 背光控制器用于设置背景颜色与开关背光。默认行列配置为lines 2、rows 2、cols 16、dots 5x8可通过 options 覆盖。测试用例 test/lcd.jsLCD - I2C (JHD1313M1)套件test/lcd.js验证了这一点构造时会向i2cConfig转发{ lcd: 0xff, rgb: 0x62 }这样的地址对象并完成 14 次 I²C 写操作完成初始化。2. 初始化流程控制器初始化initialize按数据手册流程执行调用this.io.i2cConfig(options)配置 I²C 总线等待 50ms数据手册要求上电后至少 40ms 才能发命令代码预留 50ms连续发送DIMENSIONS | LINE[2]完成 2 行模式的功能设置依次执行this.on()开显示、this.clear()清屏、this.home()光标归位调用this.bgOn()点亮背光向 RGB 地址写入[0x08, 0xAA]若传入了options.color则设置该颜色否则默认bgColor(black)。初始化相关 I²C 写操作次数被测试用例精确断言i2cWrite.callCount 14见 test/lcd.js。3. 命令发送的底层细节JHD1313M1 的字符面通过两条 I²C 命令类型发送lib/lcd.js命令模式writeBits(0x80, value)写入[0x80, value]数据模式send(value)→writeBits(0x40, value)写入[0x40, value]。测试用例对此有精确断言例如lcd.command(15)对应写[62, [128, 15]]、lcd.send(15)对应写[62, [64, 15]]test/lcd.js。这里 62 即0x3E128 即0x8064 即0x40。clear()、home()等操作在控制器层以单条命令实现clear→command(0x01)、setCursor→command(row 0 ? col | 0x80 : col | 0xc0)lib/lcd.js。值得注意的是JHD1313M1 控制器的setCursor使用0x80/0xc0作为第 0/1 行的 DDRAM 起始地址与通用 LCD 的setCursor基于[0x00, 0x40, 0x14, 0x54]行偏移实现不同这正说明示例中cursor(0, 0)是先列后行的参数约定。4.bgColor()的颜色换算与写寄存器示例每次轮播都会调用lcd.bgColor(color)。控制器实现lib/lcd.js为bgColor: { value(red, green, blue) { const rgb RGB.ToRGB(red, green, blue); const address this.address.rgb; this.io.i2cWrite(address, [0x00, 0]); this.io.i2cWrite(address, [0x01, 0]); // TRY THIS IN ONE CALL! this.io.i2cWrite(address, [0x04, rgb.red]); this.io.i2cWrite(address, [0x03, rgb.green]); this.io.i2cWrite(address, [0x02, rgb.blue]); return this; } }首先把入参交给RGB.ToRGB来自 lib/led/rgb.js 的RGB.ToRGBlib/led/rgb.js统一换算成{ red, green, blue }字节然后向 RGB 地址依次写入控制寄存器与三原色寄存器0x04对应红色、0x03对应绿色、0x02对应蓝色。RGB.ToRGB支持非常丰富的输入形式这也是示例中能直接传颜色名yellow的原因颜色名如yellow、aliceblue内部通过converter.keyword.rgb(input.toLowerCase())把名称转换为 RGB 字节十六进制字符串如#ff0000或ff0000rgb(r, g, b)/rgba(r, g, b, a)字符串支持百分比形式三字节数组[r, g, b]、对象{red, green, blue}或直接传三个数值参数。测试用例 test/lcd.js 验证了bgColor([0, 0, 0])时ToRGB的调用及[98, [0, 0]]、[98, [1, 0]]、[98, [4, 0]]、[98, [3, 0]]、[98, [2, 0]]的寄存器写入序列98 即0x62。5. 背光的开关JHD1313M1 控制器还提供bgOn()/bgOff()bgOn()写[0x08, 0xAA]点亮背光bgOff()写[0x08, 0x00]熄灭背光。对应测试断言见 test/lcd.js。bgOn用的BACKLIGHT_ON寄存器值即REGISTER.BACKLIGHT_ON 0x08lib/lcd.js。五、交互式调试REPL 注入的两种用法本示例没有在ready回调里自动开跑而是把preview()注入 REPL 让开发者手动触发。这在调试与教学场景非常实用控制启动时机脚本启动后 LCD 只显示黄色背景你可以先观察硬件是否正常再在 REPL 中手动执行preview()随时重播再次调用preview()会先清掉旧定时器、重置索引从头再播一遍适合反复观察不同颜色的显示效果。如果想在脚本中自动启动轮播把board.repl.inject({...})之后追加一行board.repl.inject.preview()或直接在ready回调中调用preview()逻辑即可——仓库中 eg/lcd.js 等示例也展示了直接调用与 REPL 注入并存的组织方式。六、从预览器到完整应用可扩展方向本示例演示的 API 组合同样适用于更多 RGB LCD 应用场景传感器数据看板把bgColor()与温度/湿度传感器读数绑定例如高温时背景变红、低温时变蓝文字区域打印实时数值状态指示灯利用bgColor以颜色语义化表达设备状态就绪/忙碌/错误与 docs/lcd.md 中的其他 LCD 示例联动如lcd-autoscroll、lcd-i2c等理解cursor/print/clear/createChar的完整 API 面。七、小结与自查清单运行本示例时可对照以下要点排查依赖确认已安装johnny-five当前仓库根目录npm install即可、tessel-io、css-color-names硬件JHD1313M1 Grove 模块接在 Tessel 2 的 I²C 口上示例无需声明引脚REPL脚本运行后输入preview()触发颜色轮播控制器细节LCD 命令走0x3ERGB 寄存器走0x62bgColor()支持颜色名、十六进制、rgb()、数组与对象等多种输入测试佐证JHD1313M1 的初始化、命令/数据发送、bgOn/bgOff/bgColor行为均有 test/lcd.js 的断言覆盖可作为理解控制器行为的第一手资料。至此你不仅能在 Tessel 2 上复现CSS 颜色名轮播预览器也掌握了 Johnny-Five 中 I²C RGB LCD 的驱动原理与调试方法可以在此基础上扩展出自己的交互式彩色显示应用。赞分享IoT机器人嵌入式【免费下载链接】johnny-fiveJavaScript Robotics and IoT programming framework, developed at Bocoup.项目地址https://gitcode.com/gh_mirrors/jo/johnny-five点击查看免费下载相关推荐Johnny-Five 实战在 Tessel 2 上驱动 MAG3110 三轴磁力计指南针Compass 组件详解Johnny Five 实战在 Tessel 2 上驱动 MAG3110 三轴磁力计指南针Compass 组件详解 导读 本文围绕 docs/compasIoT机器人嵌入式Johnny-Five Color 传感器实战通过 EVShield EV3 在 RAW 模式下读取原始 RGB 颜色数据Johnny Five Color 传感器实战通过 EVShield EV3 在 RAW 模式下读取原始 RGB 颜色数据 本篇文章聚焦 johnny fivIoT机器人嵌入式bat 的 Markdown 高亮回归测试体系从 example.md 源码样本到 ANSI 快照对比bat 的 Markdown 高亮回归测试体系从 example.md 源码样本到 ANSI 快照对比 bat 仓库为每种受支持的语法都维护了一对“源码样本IoT机器人嵌入式创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考