這是藍色嗎？還是紅色？ - 顏色感測器校正

###### tags: `iot-car` `lab` 返回[物聯網智慧自走車](/s/5c7ggGf0Spqql5Gy31Cqzg) ## 這是藍色嗎？還是紅色？ <br> <span style="color:#F9BF45;">顏色感測器校正</span> ###### [點我開啟簡報模式](/@BEExANT-ta/B1KHGr5wK#) ###### <kbd>ESC</kbd> 鍵進入總覽模式 ###### <kbd>←</kbd> <kbd>↑</kbd> <kbd>↓</kbd> <kbd>→</kbd> 切換頁面 --- <center><img src="https://i.imgur.com/BImClNl.jpg" width=30%></img></center> 顏色感測器就像人體的==視錐細胞==一樣，能感受到光線中==不同波長的刺激==，進而定義不同的顏色，但沒校正過的機器就跟第一次來到這個世界的嬰兒一樣，需要有人教過才知道在一般人眼中的顏色名稱，首先我們要先==讓機器看到的顏色跟我們一樣==，不然機器就會像上面這張圖一樣。 ---- :::info :globe_with_meridians: 參考資源 - [彩色視覺](https://zh.wikipedia.org/wiki/%E5%BD%A9%E8%89%B2%E8%A7%86%E8%A7%89) - [Maker電子學 - 淺談色彩感測器的原理與應用](https://makerpro.cc/2018/11/principles-and-application-of-colorsensor/) ::: --- ## 目標 **校正自走車上四個方向的顏色感測器，並正確判斷白、黑、綠、紅、藍、黃、紫這七種顏色。** --- ## 設計原理 - 設定感測器亮度時，感測器會自動做白平衡。 - 以灰度卡方式進行==白平衡校正==，根據現場環境調整感測器光源。 - 自走車開機時會==自動調整一次光源==，但在光源改變後需要再設一次同樣的亮度才會正確的校正。 ---- - 為了方便調整判斷顏色，預設顏色資料包含==RGB值==及==轉換成HSL==所判斷的顏色，以下為RGB轉換HSL及HSL判斷顏色的函式。 ```javascript= // RGB轉換HSL function RGBToHSL(r, g, b) { r /= 255; g /= 255; b /= 255; let cmin = Math.min(r, g, b), cmax = Math.max(r, g, b), delta = cmax - cmin, h = 0, s = 0, l = 0; if (delta == 0) h = 0; else if (cmax == r) h = ((g - b) / delta) % 6; else if (cmax == g) h = (b - r) / delta + 2; else h = (r - g) / delta + 4; h = Math.round(h * 60); if (h < 0) h += 360; l = (cmax + cmin) / 2; s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)); s = +(s * 100).toFixed(1); l = +(l * 100).toFixed(1); return { h: h, s: s, l: l }; } // 從HSL判斷顏色 function HSLToColor(hsl) { if (hsl.s < 15 && hsl.l < 75) { return "黑"; } if ( ((hsl.h >= 0 && hsl.h < 20) || (hsl.h >= 320 && hsl.h <= 340)) && hsl.s > 40 && hsl.l > 80 && hsl.l < 95 ) { return "粉紅"; } if ((hsl.s < 30 && hsl.l > 90) || hsl.l > 95) { return "白"; } if ((hsl.h >= 0 && hsl.h < 20) || (hsl.h >= 320 && hsl.h <= 360)) { return "紅"; } if (hsl.h >= 20 && hsl.h < 75) { return "黃"; } if (hsl.h >= 75 && hsl.h < 170) { return "綠"; } if (hsl.h >= 170 && hsl.h < 250) { return "藍"; } if (hsl.h >= 250 && hsl.h < 320) { return "紫"; } } ``` ---- :::info :globe_with_meridians: 參考資源 - [自動白平衡–灰度世界演算法(Gray World Algorithm)](https://www.gushiciku.cn/pl/pjOc/zh-tw) - [白平衡的設定與灰卡校正](https://blog.xuite.net/diglela/wretch/108748756) - [HSL和HSV色彩空間](https://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4) - [RGB 轉換 HSV 及 HSL](https://www.ginifab.com.tw/tools/colors/rgb_to_hsv_hsl.html) - [Converting Color Spaces in JavaScript](https://css-tricks.com/converting-color-spaces-in-javascript/) ::: --- ## 範例程式碼新增程式檔並命名 ==顏色感測器校正==，將以下程式碼複製貼上程式編輯區執行。 ```javascript= let bright = "7"; colorF.set(bright); delay(500); colorB.set(bright); delay(500); colorL.set(bright); delay(500); colorR.set(bright); delay(500); colorF.set(bright); delay(500); colorB.set(bright); delay(500); colorL.set(bright); delay(500); colorR.set(bright); delay(500); console.log("校正結束"); return; ``` --- ## 程式解說逐行講解程式意義。 ---- ```javascript= let bright = "7"; ``` - 定義區域變數bright，作為顏色感測器==亮度==值。 ---- ```javascript=3 colorF.set(bright); delay(500); colorB.set(bright); delay(500); colorL.set(bright); delay(500); colorR.set(bright); delay(500); colorF.set(bright); delay(500); colorB.set(bright); delay(500); colorL.set(bright); delay(500); colorR.set(bright); delay(500); ``` - 將亮度值設定給自走車的顏色感測器。 - ==colorF==、==colorB==、==colorL==、==colorR== 分別代表設定 ==前==、==後==、==左==、==右== 四個方向的顏色感測器。 - 每次校正皆會執行==兩次==設定。 ---- ```javascript=15 console.log("校正結束"); return; ``` - 在程式最後加上 return 使程式==執行一次==後就不會繼續執行，待按下停止按鈕後才可重新執行。 --- ## 參數修改為方便實作，以下會將範例程式中可修改的參數標示出來，進行實作時只需修改對應參數，並觀察結果即可。 :::warning :zap: 詳細內建JS參數參考 - [內建Js參數及功能總覽](/s/wlfjvQBzRPCmJ8LCL3f2Fg) ::: ---- :::success **let bright = =="x"==;** ::: - x可代入 0 ~ A，A表示關閉顏色感測器的光源。 - 1 ~ 9 表示光源強弱，1最強，9最弱。 - 環境光源若夠亮，感測器的光源可以調弱，反之環境光源越暗，感測器光源則增強。 --- ## 範例影片 {%youtube -7kajfvzs8I %} <a class="btn btn-warning" style="width:100%;color:#333333;" href="/s/29-IaRauQSu8SVPubviBhw" role="button"> 手動與程式控制 **⇨** </a> <a class="btn btn-primary" style="width:100%;" href="/s/x0AHBcJtQdedjtE9Z8_x-A" role="button"> **⇦** 網頁功能總覽 </a>