【物聯網】JavaScript快速開發智能硬件應用—ruff開箱篇(一)

前言

最近聽到有小夥伴們對ruff感興趣,我也跟着加入了大軍中,本篇文章展現了ruff的開發套件,以及入手後的小demo,後續持續更新
參考文獻
ruff官網
ruff思否首頁html

開箱

如同ruff官網展現的配件以下
圖片描述
圖片描述
圖片描述segmentfault

上手

ruff官方APIwindows

  • 我開發時使用的是windows系統,因此下載 Ruff SDK 1.11.10 (Windows-64bit): msi 安裝包
  • 建立項目文件,在當前目錄執行下面命令
# 查看版本號 (首次安裝好MSI若是執行下面命令不成功,能夠嘗試重啓電腦)
    rap --version
    # 初始化 Ruff 應用
    rap init
  • init後會建立項目工程,使用編輯器打開由 rap 自動生成的 src/index.js js文件進行編寫代碼,具體能夠參照下文demo,或者官網
  • 將 Ruff 開發板上的 USB 接口與 USB 電源線鏈接,開發板成功啓動後,會搭建一個名爲Ruff_[]的無線熱點
  • 鏈接這個無線熱點後,執行項目部署,執行下面命令
#項目部署
    rap deploy -s
  • 紅色板載 LED 點亮後表示已經運行成功

圖片描述

  • 主板運行起來後,開始好玩的東西,就是添加不一樣外設(外設就是圖一的配件)
  • 添加外設
#添加botton外設
    rap device add button
    
    #CK002爲外設型號 外設型號包裝上有寫 詳見上文圖三
    ? model: *CK002*
    
    #添加LED外設  下文DEMO須要用到LED外設,因此我這邊提早添加,流程參考上方
    rap device add led
  • 添加後開始進行硬件佈局,這時候記得將主板斷電
#硬件進行佈局和鏈接撒旦
    rap layout
    
    #查看硬件佈局的可視圖(不懂的外設怎麼裝,能夠看看這個)
    rap layout --visual

圖片描述
visual的視圖

  • 部署
#開始部署
    rap deploy -s
    #查看日誌
    rap log

七彩循環燈

ruff七彩循環燈編輯器

// 作了個按下botton外設,led外設 循環閃爍顏色,鬆開botton外設,中止led燈的小demo
$.ready(function (error) {
    if (error) {
        console.log(error);
        return;
    }

    const color = {
        red: 0xff0000,
        blue: 0x0000ff,
        green: 0x00ff00,
        purple: 0xff00ff,
        cyan: 0x00ffff,
        yellow: 0xffff00,
        white: 0x000000
    };
    
    const light = function(){
        setInterval(function () {
            $('#led').setRGB(color.blue);
          
            setTimeout(function () {
                $('#led').setRGB(color.green);
            }, 100);
            setTimeout(function () {
                $('#led').setRGB(color.cyan);
            }, 200);
            setTimeout(function () {
                $('#led').setRGB(color.red);
            }, 300);
            setTimeout(function () {
                $('#led').setRGB(color.purple);
            }, 400);
            setTimeout(function () {
                $('#led').setRGB(color.yellow);
            }, 500);
            setTimeout(function () {
                $('#led').setRGB(color.white);
            }, 600)
        }, 30);
    }
    // 在 `#button` 按下時點亮 `#led-r`.
    $('#button').on('push', function () {
        console.log('Button pushed.');
        light();
        $('#led-r').turnOn();
    });

    // 在 `#button` 釋放時熄滅 `#led-r`.
    $('#button').on('release', function () {
        console.log('Button released.');
        clearInterval(light);
        $('#led-r').turnOff();
    });
});

最終效果圖
圖片描述佈局

相關文章
相關標籤/搜索