---
# System prepended metadata

title: 這是藍色嗎？還是紅色？ - 顏色感測器校正
tags: [lab, iot-car]

---

---
title: 這是藍色嗎？還是紅色？ - 顏色感測器校正
slideOptions:
  transition: slide
  transitionSpeed: 'fast'
  theme: league
---

<!-- .slide: data-background="https://i.imgur.com/gJLfldF.jpg" data-background-color="#111111" data-background-opacity="0.2" -->

###### tags: `iot-car` `lab`  返回[物聯網智慧自走車](/s/5c7ggGf0Spqql5Gy31Cqzg)
## 這是藍色嗎？還是紅色？ <br> <span style="color:#F9BF45;">顏色感測器校正</span>

###### [點我開啟簡報模式](/@BEExANT-ta/B1KHGr5wK#)

###### <kbd>ESC</kbd> 鍵進入總覽模式

###### <kbd>&#8592;</kbd> <kbd>&#8593;</kbd> <kbd>&#8595;</kbd> <kbd>&#8594;</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"> 手動與程式控制 **&#8680;**  </a>

<a class="btn btn-primary" style="width:100%;"  href="/s/x0AHBcJtQdedjtE9Z8_x-A" role="button"> **&#8678;** 網頁功能總覽
</a>