ruff implement a responder

最新推荐文章于 2025-12-18 10:02:55 发布

原创最新推荐文章于 2025-12-18 10:02:55 发布 · 520 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ruff #javascript #按键抢答器

ruff 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Ruff开发板和按键模块制作一个简单的按键抢答器项目。通过三个按键实现不同颜色LED灯的点亮及重置功能，详细记录了从硬件连接到软件编程的全过程。

这里写图片描述

前几天入了ruff的板子，今天撸了官网的官方教程SOS 求救灯，还有后面的课后练习-按键抢答器。

按键抢答器

使用三个按键模块和两个板载LED灯。
- 如果按键 A 按下，板载蓝灯（led-b）亮；
- 按键 B 按下，板载红灯（led-r）亮；
- 按键 C 用于重置抢答器，C 键按下，两灯都灭；
- 按键 A 或 B 按下后，直到按下按键 C 重置抢答器，即使另一按键按下，两LED 灯也不会有变化。

效果演示

这里写图片描述

实践

材料清单

我看了看后面的回复

因为套件里面只有两个大按钮，就使用板载的button-k2来作为重置按钮了

2个大按键模块
ruff板子
6根杜邦线

部署项目

在此之前你需要参看官网写的
- 起步走
- ruff开发的基本步骤

我这里用的是AP模式部署

step1:新建项目文件夹

mkdir responder
cd responder

step2:项目初始化

rap init

step3:添加外设(参照这里)

rap device add button_a
? model: CK002

rap device add button_b
? model: CK002

step4:硬件布局按图连线

rap layout --visual

这里写图片描述

事件绑定

src/index.js具体的代码
switchLed() 根据按钮的id来选择要触发的事件

function switchLed(id){
    switch(id){
        case 'button_a': 
            if(!$('#led-b').isOn()) $('#led-r').turnOn();
            break;
        case 'button_b': 
            if(!$('#led-r').isOn()) $('#led-b').turnOn();
            break;
        case 'button-k2': 
            $('#led-r').turnOff();
            $('#led-b').turnOff();
            break;
    }
}

$.ready 中代码逻辑

$.ready(function (error) {
    if (error) {
        console.log(error);
        return;
    }
    $('#button_a').on('push', function(){
        console.log('Button_a pushed.');
        switchLed('button_a');
    });
    $('#button_b').on('push', function(){
        console.log('Button_b pushed.');
        switchLed('button_b');
    });
    $('#button-k2').on('push', function(){
        console.log('Button-k2 pushed.');
        switchLed('button-k2');
    });
});