LAB03 - 電晶體與呼吸燈

###### tags: `js-iot` `lab` 返回[電子電路實驗與JavaScript物聯網應用](/s/8Q89ww-EQlOg8zy7XSTlCw) ## LAB 03 <br> <span style="color:#F9BF45;">電晶體與呼吸燈</span> ###### [點我開啟簡報模式](/@BEExANT-ta/BkbojrRBF#) ###### <kbd>ESC</kbd> 鍵進入總覽模式 ###### <kbd>←</kbd> <kbd>↑</kbd> <kbd>↓</kbd> <kbd>→</kbd> 切換頁面 --- ## 目標 **在網頁上控制PWM輸出，並利用電晶體將訊號放大來控制多個LED，比較未使用電晶體時的LED亮度，並搭配網頁程式控制製作呼吸燈。** --- ## 使用材料 - **JavaScript開發板** - **ULN2803電晶體** - **220 、 1KΩ電阻** - **LED** - **杜邦線** --- ## 線路圖 :::warning :zap: 圖上麵包板正負極與實際不同，需注意正負極 ::: ---- <center> <img src="https://i.imgur.com/wma96BD.png" width="75%"></img> </center> --- ## 設計原理 - 利用達林頓電路的特性將經過LED的電流放大數倍，能夠使用==一個訊號==讓==多個LED保持亮度==不減弱。 - 當輸出達到==最小==或==最大==值改變狀態，使PWM輸出不斷==遞增遞減==，讓LED燈產生明暗的變化。 --- ## 範例程式新增程式檔並命名 ==LAB03 - 電晶體與呼吸燈==，將以下程式碼複製貼上程式編輯區執行。 ```javascript= window.light = 0; window.state = "暗"; if (light == 0) { state = "暗"; } if (light >= 100) { state = "亮"; } if (light < 100 && state == "暗") { light = light + 10; pwm[0].set(light); } if (state == "亮") { light = light - 10; pwm[0].set(light); } console.log("目前亮度: " + light); delay(300); ``` --- ## 程式解說逐行講解程式意義。 ---- ```javascript= window.light = 0; ``` - 以全域變數定義 light 的值為 0。 - 作為PWM輸出值的變數。 ==在程式編輯區執行中只在第一次迴圈時執行== ---- ```javascript= window.state = "暗"; ``` - 以全域變數定義 state 的值為 "暗"。 - 作為判斷目前LED狀態的變數。 ==在程式編輯區執行中只在第一次迴圈時執行== ---- ```javascript= if (light == 0) { state = "暗"; } if (light >= 100) { state = "亮"; } ``` - 判斷==light值是否等於0==(全暗)。 - 為真時 state 設為"暗"。 - 判斷==light值是否大於等於100==(全亮)。 - 為真時 state 設為"亮"。 - 表示當light值達到==最大==或==最小==時，狀態將變成==亮==或==暗==。 ---- ```javascript= if (light < 100 && state == "暗") { light = light + 10; pwm[0].set(light); } ``` - 判斷==light值是否小於100== ==且== ==state是否等於"暗"==。 - 為真時將==light設為light + 10==，將第一個==PWM輸出值設為light==。 - 表示當light值未達最大時且狀態為暗時，將LED==增加10%的亮度==。 ---- ```javascript= if (state == "亮") { light = light - 10; pwm[0].set(light); } ``` - 判斷==state是否等於"亮"==。 - 為真時將==light設為light - 10==，將第一個==PWM輸出值設為light==。 - 表示當light值達到最大時且狀態為亮時，將LED==減少10%的亮度==。 --- ## 參數修改為方便實作，以下會將範例程式中可修改的參數標示出來，進行實作時只需修改對應參數，並觀察結果即可。 :::warning :zap: 詳細內建JS參數參考 - [內建Js參數及功能總覽](/s/51F8nDF3Ss6M2DmGoRJQbA) ::: ---- :::success **light = light + ==x==;** **light = light - ==x==;** ::: - x可代入 0 ~ 100，表示每次亮度==增加==/==減少==的比例。 ---- :::success **pwm[==x==].set(==y==);** ::: - x可代入0 ~ 7，表示第1 ~ 8個PWM輸出腳位，y可代入0 ~ 100，表示PWM輸出的大小。 --- ## 範例影片(待更新) {%youtube mG2afduDPf4 %} <a class="btn btn-warning" style="width:100%;color:#333333;" href="/s/I1J0QniMRX66m652SJx1BA" role="button"> PCA9685、I²C與伺服馬達 **⇨** </a> <a class="btn btn-primary" style="width:100%;" href="/s/iBzaKT_rQb2OzkyF3FJLwA" role="button"> **⇦** PWM與電晶體 </a>