2020年4月16日 星期四

[AI] 8787影像故事:誰撿到這抹紅,520(Whoever finds the red, 520)

8787影像故事:

誰撿到這抹紅,520(Whoever finds the red, 520)


FB2http://gg.gg/TedLeeMicrobitFB/
URL2http://gg.gg/TedLeeMicrobit/

Line:ted2016.kpvs
Email:Lct4246@gmail.com
FB1http://gg.gg/TedLeeFB/
Bloghttp://gg.gg/TedLeeBlog/
URL1http://gg.gg/TedLeeURL/

Apr. 16, 2020
88x31.png[1]


難易度★★


主題

老皮的皮夾裡放有一封信https://reurl.cc/lVv93d),據說信中述說著一個美麗的動人故事。這個故事曾經被這位神仙姐姐https://reurl.cc/b57kMl)傳唱過。
在這8787主題課的最後一個單元裡,我們就以紅顏色8787及其週邊硬體盒子設計三個元素替老皮重譜一個屬於曾經的他的主題曲,就姑且
把它喚做:8787的影像故事

任務

老皮的女朋友小派的生日快到了。今年,小派想測試一下小彼特的彼特功練到哪個化境了,就故意以自己生日為由要考考他:「以小彼特小派三元素做出一個生日禮物。」大夥兒也幫幫忙一起破關吧!
(讓8787偵測到人臉後啟動快閃的七彩LED。)

材料

項目 品名 單位 數量
1 VTS-8787視覺感測器 1
2 micro USB傳輸線 1
3 Grove – 4x公端杜邦線+母座 to Grove 4pin連接線 1
4 Arduino Nano(FT232晶片) 1
5 mini USB傳輸線 1
6 麵包板 1
7 SSD1306 OLED液晶面板(I2C、128*64、0.96""、1602 LCD) 1
8 杜邦線(公母) 4
  • 如果讀者要將項目4的開發板換成Uno或其他Arduino版本,請自行將項目5的傳輸線做調當的調整。
  • 技術咨詢(手機加Line:https://reurl.cc/Vadax6)。

    造形設計(機構)

    記得將8787及其相關電路的尺寸考量進去。

      功能設計(電路、程式)

      先依照下表及圖1 [2]接妥8787、Nano與快閃LED的連接線路。

      NanoOLED8787
      D0
      A4SDA
      A5SCL
      5V
      GND短腳(-)



      圖1:接線圖。


      在Pixetto Utility上(圖2)選用人臉偵測功能,讓8787識別並套用之,詳細操作方法可參考拙著《使用VIA Pixetto視覺感測器的辨色功能》(https://reurl.cc/20LR8m)一文。

      圖2:在Pixetto Utility上選用顏色偵測功能。

      接著,在Pixetto Junior上拉出圖3的積木程式的基本架構(稍後我們將手動加上OLED控制的Arduino程式碼)。這個程式的設計邏輯為開機時在setup()的ㄈ字形積木中先初始化接在D0和D1腳接上的8787。
      接著,若8787「看見」紅色(在上一段選用Color Detection功能時會看見紅色物件會被綠框框出,並於左上顯示red(1)的綠字字樣)後就讓Nano板載在D13接腳上的LED閃爍0.3秒後關閉。否則,就將之熄滅。

      圖3:Pixetto Junior的Blockly程式碼。

      圖3積木程式自動生成的Arduino程式碼如下所示。

      #include <Arduino.h>
      #include <SmartSensor.h>

      SmartSensor ss(0,1);

      void setup() {
        ss.begin();
        pinMode(13, OUTPUT);
      } //end of setup()

      void loop() {
        if (ss.isDetected()) {
        // red color
        if (ss.getTypeID() == 1) {
        digitalWrite(13, HIGH);
        delay(300);
        }
        } else {
        digitalWrite(13, LOW);
        } //end of if
      } //end of loop()

      匯入OLED的函式庫 如圖5,在Pixetto Studio附的Arduino IDE(預設的路徑為C:\Pixetto\PixettoEditor\arduino)中,依照《Arduino 運用SSD1306 OLED 0.96吋 、0.91吋》(https://reurl.cc/1xGg7Y)一文提到的方式,匯入(import)Adafruit SSD1306Adafruit GFX Library兩隻函式庫(libraries),完成的結果如圖6所示。

      圖5:Pixetto Studio V1.0.1內含有V1.8.9版rduino IDE。

      圖6:匯入OLED控制的相關函式庫。


      Arduino IDE的幾個藏身處(存放路徑)
      檔案總管下我們使用暴力法從 C:\ 鉅細靡遺地搜出以下資訊:
      1. Pixetto Studio附帶:存在 C:\Pixetto\PixettoEditor\arduino 下,版次為V1.8.9(在V1.1.0版的Pixtto Studio中)。
      2. 自行下載安裝:預設路徑為 C:\Program Files (x86)\Arduino ,我們目前安裝的版本為V1.8.10。
        • 匯入的外部函式庫會自動存到 C:\Users\User\Documents\Arduino\libraries 。
      3. Windows App版:安裝在 C:\Program Files\WindowsApps\ArduinoLLC.ArduinoIDE_1.8.33.0_x86__mdqgnx93n4wtt ,我們裝的版本是V1.8.12。


      修改標頭檔
      根據《0.96寸 藍色 白色 IIC通信 小OLED顯示屏模塊 51單片機》(https://reurl.cc/9ERZLa)一文,將路徑「C:\Users\User\Documents\Arduino\libraries」下的「Adafruit_SSD1306.h」修改為正確的顯示尺寸:

           #define SSD1306_128_64
      //   #define SSD1306_128_32


      調整OLED輸出 參考《Coordinate System and Units》(https://reurl.cc/kdaVbr)內容說明,將《Arduino 運用SSD1306 OLED 0.96吋 、0.91吋》(https://reurl.cc/1xGg7Y)內的參考程式的testdrawstyles()函數修改如下:

      void showText(char text[]) {
        display.clearDisplay();
        display.setTextSize(5);             // 設定文字大小
        display.setTextColor(1);        // 1:OLED預設的顏色(這個會依該OLED的顏色來決定)
        display.setCursor(30,18);             // 設定起始座標
        display.print(text);        // 要顯示的字串
        display.display();                  // 要有這行才會把文字顯示出來
        //delay(1000);
      }


      加在一起 經過以上從Pixetto Junior自動生成程式架構、匯入Adafruit原廠的OLED函式庫及修改輸出顯式後可得到如下的完整程式:


      #include <SPI.h>
      #include <Wire.h>
      #include <Adafruit_GFX.h>
      #include <Adafruit_SSD1306.h>

      #include <Arduino.h>
      #include <SmartSensor.h>

      SmartSensor ss(0,1);

      #define SCREEN_WIDTH 128 // OLED 寬度像素
      #define SCREEN_HEIGHT 64 // OLED 高度像素

      // 設定OLED

      #define OLED_RESET     4 // Reset pin # (or -1 if sharing Arduino reset pin)
      Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

      void setup() {
        pinMode(13, OUTPUT);
        digitalWrite(13, HIGH);
        delay(500);
        digitalWrite(13, LOW);

        ss.begin();


        // 偵測是否安裝好OLED了

        if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { // 一般1306 OLED的位址都是0x3C
          Serial.println(F("SSD1306 allocation failed"));
        } //end of if

        // 顯示Adafruit的LOGO,算是開機畫面

        display.display();
        delay(1000); // 停1秒

        // 清除畫面

        display.clearDisplay();
      } //end of setup()

      void loop() {
        if (ss.isDetected()) {
          if (ss.getTypeID() == 1) {
            digitalWrite(13, HIGH);
            showText("520");
            //delay(300);
          }
        } else {
          showText("");
          display.display();
          digitalWrite(13, LOW);
        } //end of if
      } //end of loop()

      void showText(char text[]) {

        display.clearDisplay();
        display.setTextSize(5);             // 設定文字大小
        display.setTextColor(1);        // 1:OLED預設的顏色(這個會依該OLED的顏色來決定)
        display.setCursor(30, 18);            // 設定起始座標
        display.print(text);        // 要顯示的字串
        display.display();                  // 要有這行才會把文字顯示出來
      }// end of showText()

      最後,我們在圖7的Pixetto Junior內選用後就可以開開心心了!



      圖7:在Pixetto Junior內手動編輯Arduino程式碼上傳到Nano

      本單元的操作影片https://youtu.be/v5gEWFC1_UM 如圖8所示。

      圖8:展示影片。

        教學活動設計

        1. 加掛一個MP3播放器模組https://reurl.cc/E7o5XA),使得8787看到紅色後可以一邊播放《Whoever Finds This , I Love You》一邊在OLED顯示歌詞https://reurl.cc/Kk01MR),或一段話、一個點陣圖https://reurl.cc/ZOWLXV)。

          2020年4月5日 星期日

          [AI] 一見你就閃:使用VIA Pixetto視覺感測器之人臉偵測(Face Detection)功能

          一見你就閃:

          使用VIA Pixetto視覺感測器之人臉偵測(Face Detection)功能


          FB2http://gg.gg/TedLeeMicrobitFB/
          URL2http://gg.gg/TedLeeMicrobit/

          Line:ted2016.kpvs
          Email:Lct4246@gmail.com
          FB1http://gg.gg/TedLeeFB/
          Bloghttp://gg.gg/TedLeeBlog/
          URL1http://gg.gg/TedLeeURL/

          Apr. 5, 2020
          88x31.png[1]

          難易度★★★☆☆


          主題

          8787內建的AI影像處理(image processing)功能應用實作。

          任務

          小彼特女朋友小派的生日快到了。今年,小派想測試一下小彼特的彼特功練到哪個化境了,就故意以自己生日為由要考考他:「以小彼特我(小派)三元素做出一個生日禮物。」大夥兒也幫幫忙一起破關吧!
          (讓8787偵測到人臉後啟動快閃的七彩LED。)

          材料

          項目 品名 單位 數量
          1 VTS-8787視覺感測器 1
          2 micro USB傳輸線 1
          3 Grove – 4x公端杜邦線+母座 to Grove 4pin連接線 1
          4 Arduino Nano(FT232晶片) 1
          5 mini USB傳輸線 1
          6 麵包板 1
          7 RGB七彩快閃 LED燈 1
          8 130Ω電阻 1
          • 如果讀者要將項目4的開發板換成Uno或其他Arduino版本,請自行將項目5的傳輸線做調當的調整。
          • 技術咨詢(手機加Line:https://reurl.cc/Vadax6)。

            造形設計(機構)

            請參考禮物盒子https://reurl.cc/ZObNQV)或小造型盒https://reurl.cc/lVe49A)概念設計作品外觀。記得將8787及其相關電路的尺寸考量進去。

              功能設計(電路、程式)

              先依照下表及圖1接妥8787、Nano與快閃LED的連接線路。

              Nano 快閃LED 8787
              D0
              D1
              D7 長腳(+)
              5V
              GND 短腳(-)


              圖1:接線圖。


              在Pixetto Utility上(圖2)選用人臉偵測功能,讓8787識別並套用之(例如:以這個AI生成的偽人臉https://reurl.cc/NjRLAQ)來做為待識別影像),詳細操作方法可參考拙著《VIA Pixetto視覺感測器大開箱(unboxing):AI開發工具(Development Kits)篇》(https://reurl.cc/Qd6eVO)一文。

              圖2:在Pixetto Utility上選用人臉偵測功能。

              接著,在Pixetto Junior上拉出圖3的積木程式。這個程式的邏輯是一開機後先初使化8787。
              接著,若8787「看見」前述的人臉後就讓接在Nano D7接腳上的快閃七彩LED閃爍0.5秒。否則,就將之熄滅。

              圖3:Pixetto Junior的Blockly程式碼。

              圖3積木程式自動生成的Arduino程式碼如下所示。

              #include <Arduino.h>
              #include <SmartSensor.h>

              SmartSensor ss(0,1);

              void setup() {
                ss.begin();
                pinMode(7, OUTPUT);
              } //end of setup()

              void loop() {
                if (ss.isDetected()) {
                   if (ss.getTypeID() == 0) {
                digitalWrite(7, HIGH);
                delay(500);
                }
                } else {
                digitalWrite(7, LOW);
                } //end of if
              } //end of loop()

              本單元的操作影片https://youtu.be/XZImUASeAfg 如圖4所示。

              圖4:展示影片。

                教學活動設計

                1. 參考《快樂頌:使用VIA Pixetto視覺感測器之模板匹配(Template Matching)功能》(https://reurl.cc/lVe479)一文的做法接上蜂鳴器,使得8787看到小派後邊閃爍LED邊唱歌。

                  参考資料
                  1. 六種授權條款

                  2020年4月4日 星期六

                  [micro:bit] 蒸汽彼特(STEAM on micro:bit)II──主題10:卡路里大作戰之鋼鐵人反應爐燈環傳

                  蒸汽彼特(STEAM on micro:bit)II

                  主題10:卡路里大作戰之鋼鐵人反應爐燈環傳


                  FB2http://gg.gg/TedLeeMicrobitFB/
                  URL2http://gg.gg/TedLeeMicrobit/

                  Line:ted2016.kpvs
                  Email:Lct4246@gmail.com
                  FB1http://gg.gg/TedLeeFB/
                  Bloghttp://gg.gg/TedLeeBlog/
                  URL1http://gg.gg/TedLeeURL/

                  Apr. 4, 2020
                  88x31.png[1]

                   

                  難易度

                  ★★☆☆☆

                  主題

                  跑跑跑…向前跑,邊跑邊消耗多食的卡路里之外,還可以替鋼鐵人反應爐積累能量

                  任務

                  反應爐是鋼鐵人的心臟,為了讓他好好活下去,請督促小彼特每天都要按時運動好將卡路里燃燒後轉換成反應爐所需的能量。
                  廣播計步功能結合,每跑十步就讓燈環多亮一顆燈。待燈環全數點亮後還會放音樂

                  材料

                  編號品名單位數量
                  1小彼特主板2
                  2傳輸線1
                  3燈環(註)4
                  4魔鬼氈1
                  5瓦楞紙板/PP板/木板…1

                  造形設計

                  以上一小節第5項材料,參考圓扁盒造形https://reurl.cc/O1Ap6A)、https://reurl.cc/xZ9OWNhttps://reurl.cc/vDdeEA…來設計反應爐的外觀。請留意要預留放置小彼特的尺寸。

                  功能設計=硬(電路設計)+軟(程式設計)

                  電路設計 電路設計如右圖所示。藍色小彼特為發送端(transmitter,Tx),它連接KSB040鋰電擴充板https://reurl.cc/ex33gM)供電;紅色小彼特為接收端(receiver,Rx),除了和接收端一樣使用KSB040做為電力來源外,考量到燈環需要5V電源(主板只需3V),因此,我們再加上一塊KSB047 PWM轉接板https://reurl.cc/E7rryn)後,恰巧可以把原本是要給外接伺服馬達用的5V電源接腳挪拿來驅動燈環使用。操作影片https://reurl.cc/1xZGpQ)如右圖所示。這個組合除了輕巧、省接線外,售價上也不會比外接獨立電源來的貴。所以,選用KSB040再搭配KSB047就會是一個經濟而實惠的不錯選擇了。


                  如何選擇合適的擴充板(extension boards) 關於小彼特常用的擴充板可參考我們在MakerPro專欄中《micro:bit搭載KAISE週邊的引導式教學組合》(https://reurl.cc/z8ZM2e)一文的詳細介紹。以下,我們條列幾項重要的原則供讀者在有需要採購時較好依循:
                  1. 錢有涯,擴充無涯:硬體擴充本身就是個無底洞,需量(財/能)力而為之。
                  2. 專款專用,切忌包山包海:將所有元件集結在同一塊電路板子上雖可省去收找材料的麻煩,但一有某處單獨的零件損壞常會是再多新買一塊新品替代。更重要的是,在做作品時就會發現雖需求功能不多,但因為整塊板子全都包了,遂而無法客制量身訂作。
                  3. 教學需求至上:凡教學上用不到的硬體,請都放在最後再考量。
                  4. 學習常規,不學特例:筆者上課常和學生們笑言:「我們很懶,只要辛苦地一次把他們學會,之後就不用再多花時間學第二次。」某些廠商為了防呆或者是刻意簡化的接線方式,一開始學時無腦地喀喳就接好了,但只要是非該廠商推出的產品,就會立即發現接起線來東卡、西卡的。
                  5. 跟風無時停(台語):網上推坑不平之路很多,只要看推的人有沒在教學?有沒學員作品不斷的產出?大概就知道他們推薦東西的受測度了。以我們而言,我們得要站在教學第一線來考量。因為自己有在教學,所以會被學員操到金嚇嚇(台語)~。


                  程式設計 既然硬體先天就已畫分好了傳送端Tx和接收端Rx,軟體功能的程式撰寫當然也得遵循這個架構。Tx和Rx最基本的主/從式(Client/ Server)程式架構請參考以下這兩個連結:主Tx程式https://reurl.cc/oL1YMj)、從Rx程式https://reurl.cc/d02aM6)。
                  1. 傳送端的程式如某右圖所示。我們使用87號廣播通道(radio channel)來傳遞訊息。當傳送端的小彼特晃動時,將計步的記錄傳送出去後發出提示音效。(隨時按下按鈕A可發射代碼99表示要歸零重新開始。)完整的參考程式碼可按https://reurl.cc/9EGGjd下載
                  2. 接收端的程式如某右圖所示

                  Make Codehttps://makecode.microbit.org/)線上編輯工具中匯入燈環的擴充積木。本例是使用手邊的EzRing硬體,故需引入合適的積木擴充包https://reurl.cc/WdrrpL)。讀者若使用的是WS2812款式的燈環,則需匯入neopixel這包擴充積木
                  程式初始化時需指定和接收端相同的第87號廣播頻道。接著,我們要告訴接收端的小彼特是以P1(RX)和P2(TX)兩隻接腳來和EzRing傳遞序列(serial)控制資料(若是使用WS2812,則只要選用P1或P2一隻接腳來傳送5050 RGB LED的顯示資訊即可)。然後,再讓燈環閃礫一下表示備妥(ready)
                  當收到傳送端傳來的計步值時,則將結果顯示到燈環上(一步一顆、二步兩顆…)。
                  此外,若收到99的歸零訊息則將燈環換色後熄滅。
                  完整的參考程式碼可按
                  https://reurl.cc/vDdW11下載

                  展示影片請參考https://youtu.be/s-IAP8ER7Fg

                    教學活動設計

                    教學投影片可由https://reurl.cc/Y1v09o)下載。
                    1. 手勢控燈 參考右手邊的影片https://reurl.cc/qd5OQp),設計若干不同手勢(gestures)來操控燈環的顯示樣式(patterns)
                    2. 展示盒 TxRx


                    積木指標

                    Basic、Radio、Loops、Input、Logic、Math、Variables、Extensions

                    編程指

                    循序結構(sequence structure)判斷結構(decision structure)重覆結構(repetition structure)非同步事件處理(asynchronous event handling)

                    硬體指

                    擴充板、燈環。

                    参考資料
                    1. 六種授權條款