最近聽到有小夥伴們對ruff感興趣,我也跟着加入了大軍中,本篇文章展現了ruff的開發套件,以及入手後的小demo,後續持續更新
參考文獻
ruff官網
ruff思否首頁html
如同ruff官網展現的配件以下segmentfault
ruff官方APIwindows
# 查看版本號 (首次安裝好MSI若是執行下面命令不成功,能夠嘗試重啓電腦) rap --version # 初始化 Ruff 應用 rap init
#項目部署 rap deploy -s
#添加botton外設 rap device add button #CK002爲外設型號 外設型號包裝上有寫 詳見上文圖三 ? model: *CK002* #添加LED外設 下文DEMO須要用到LED外設,因此我這邊提早添加,流程參考上方 rap device add led
#硬件進行佈局和鏈接撒旦 rap layout #查看硬件佈局的可視圖(不懂的外設怎麼裝,能夠看看這個) rap layout --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(); }); });
最終效果圖佈局