iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 10
2
IoT

IoT沒那麼難!新手用JavaScript入門做自己的玩具~系列 第 10

[Day 10]-用JavaScript控制Arduino吧!七彩霓紅燈~實作篇 Johnny Five 之 LED.RGB

  • 分享至 

  • xImage
  •  

IoT沒那麼難!新手用 JavaScript 入門做自己的玩具!(iT邦幫忙鐵人賽系列書)

★本系列文章已集結成冊,和系列文不同的是:

  • 本書使用大量的圖解來說明LED系列、多種感測器等原理。
  • 補足系列文程式碼的解說,增加逐行程式碼的詳細解說!
  • 全彩的書籍,用圖解的方式,讓讀者來理解Johnny-Five各種API的功能與效果,讓你不會只讀文字看到想睡覺而學不起來。

歡迎大家做出自己想要的玩具,為了樂趣而學習,讓學習變成你的樂趣!ヽ(・×・´)ゞ
讓Arduino也能用JavaScript創造出屬於自己的作品!

★購書連結-天瓏網路書局:
https://www.tenlong.com.tw/products/9789864345328

《IoT沒那麼難!新手用 JavaScript 入門做自己的玩具!(iT邦幫忙鐵人賽系列書)》
博客來、金石堂、momo、誠品、PChome、讀冊,均有販售喔!─=≡Σ((( つ•̀ω•́)つ
ISBN:9789864345328

今天要來實作七彩霓虹燈啦!ヽ(・×・´)ゞ

謎之音:不就是七個顏色輪流變嗎?? (╯°Д°)╯~ ┻━┻
本魯宅:不不~我們要加上不一樣的效果~當然不能都 抄襲官網的範例 啊 (ˇωˇ人)
謎之音:喔~原來是致敬啊.... (メ゚Д゚)メ

實作 - 有淡入效果的七彩霓虹燈~


程式碼

let five = require('johnny-five');

five.Board().on('ready', function() {
  let led = new five.Led.RGB({
    pins: [6, 5, 3],
    isAnode: true,
  });
  let i = 0;
  const rainbow = [
    '#FF0000',
    '#FF7F00',
    '#FFFF00',
    '#00FF00',
    '#0000FF',
    '#4B0082',
    '#8B008B',
  ];

  /*讓宣告的rainbow變數輪流跑*/
  this.loop(1000, () => {
    led.color(rainbow[i++]);
    if (i === rainbow.length) {
      i = 0;
    }
    /*利用JS阻塞機制讓i累加,進而產生fadeIn效果*/
    for (let i = 0; i < 100; i++) {
      (i => {
        setTimeout(function() {
          console.log(i);
          led.intensity(i);
        }, (i + 1) * 5);
      })(i);
    }
  });
});

首先分成三大區塊動作來看~

  1. 宣告變數與參數:
    因為顏色不多只有七個顏色,就用最簡單的我們把七個顏色的色碼寫為陣列來使用

  2. 顏色部分:
    利用 for迴圈 讓他輪流循環 紅→橙→黃→綠→藍→靛→紫 ,設定一秒後為下一個顏色!

  3. 淡入的效果:
    在進入下一個顏色內,呼叫 intensity()使LED亮度從0(暗) → 99(亮),藉此來呈現淡入的效果

但這邊會有個問題!

intensity 的 value 值,用 for 迴圈累加 i 值
因為 JavaScript 的 for 迴圈執行速度太快了,又沒有像C/C++有類似sleep延遲執行的指令,value 瞬間就會從0加到99了...

這樣以人眼來看根本看不出有LED有漸亮的效果....( ˘•ω•˘ )a
所以!參拜一下谷哥大神後,於是就有答案啦! ヾ(◎´・ω・`)ノ

原來 JS 有 for 迴圈的阻塞機制(註一),讓迴圈延遲幾毫秒後在繼續動作!

  /*利用JS阻塞機制讓i累加,進而產生fadeIn效果*/
  
  for (let i = 0; i < 100; i++) {
    (i => {
      setTimeout(function() {
        console.log(i);
        led.intensity(i);
      }, (i + 1) * 5);
    })(i);
  }

心之音:哇~這根本解救了我!
這樣我們就可以讓LED的亮度慢慢亮起來,產生淡入的效果了~ σ´∀´)σ

註一:
JS實現停留幾秒sleep,Js中for迴圈的阻塞機制,setTimeout延遲執行


進階實作 (並不是X


看透人生的七彩霓虹燈~ (謎之音:這殺小....朋友啦XD
沒錯!我們要呼應一下開頭!σ´∀´)σ

你的人生是怎樣的呢?
是色彩繽紛的人生嗎~還是充滿七彩光芒的人生呢~

本魯宅以這個例子來說明我的人生樣態

程式碼

let five = require('johnny-five');

five.Board().on('ready', function() {
  let led = new five.Led.RGB({
    pins: [6, 5, 3],
    isAnode: true,
  });
  let i = 0;
  const rainbow = [
    '#FF0000',
    '#FF7F00',
    '#FFFF00',
    '#00FF00',
    '#0000FF',
    '#4B0082',
    '#8B008B',
  ];

  /* 產生1~100的亂數,秒數調快一點讓LED有閃爍的效果 */
  this.loop(75, () => {
    randomNum = Math.floor(Math.random() * 100 + 1);
    led.intensity(randomNum);
  });

  /*讓宣告的rainbow變數輪流跑*/
  this.loop(1000, () => {
    led.color(rainbow[i++]);
    if (i === rainbow.length) {
      i = 0;
    }
  });
});

一樣分成三大區塊動作

宣告變數與參數 和顏色部分和上一個例子是一樣的,就不多說了~

19~23行,這次我們不用淡入的效果,我們用
Math.floor(Math.random() * 100 + 1)
亂數產生 1~100 的整數,再使用 led.intensity() 放入數值~

我的人生七彩霓虹燈做出來啦~ヽ(・×・´)ゞ

恩..........沒錯就是這樣......... Orz

本文到這邊先下台一鞠躬了~
有錯敬請留言改正,感謝您的閱讀啦<(_ _)>

文後

今天看到我們團隊Amos的推坑教2.0 訂閱排行榜 Top 10,有三個系列文上榜~
覺得Amos老師真的太厲害了~拼雙鐵,兩個都上榜!/images/emoticon/emoticon32.gif

金魚系列真的都很優質!有興趣歡迎訂閱下去啦!!

金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎
https://ithelp.ithome.com.tw/users/20112550/ironman/2799
金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎
https://ithelp.ithome.com.tw/users/20112550/ironman/2623

PS:我是來沾光的XD


本系列的程式碼皆會上傳到 GitHub 上開源
2019ironman-JS-IoT : https://github.com/tinatyc/2019ironman-JS-IoT
喜歡按個星星吧~乾蝦乾蝦<(_ _)>


同步連載於blogger-King 學習前端之人生
著作權為 Ying-chi Tzeng所有,轉載請告知,感謝您^^


上一篇
[Day 9]-用JavaScript控制Arduino吧!轉吧~轉吧~七彩霓紅燈~ 之 Johnny Five -LED.RGB
下一篇
[Day 11]-說好的物聯網呢?很重要一定要看!用 Socket.io 建立即時連線~簡介篇
系列文
IoT沒那麼難!新手用JavaScript入門做自己的玩具~33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言