2022年11月13日 星期日

[科技宝, Cagebot, 8787, AI, Arduino] 國廠祥儀科技寶智慧手臂 3/3:電控程式設篇

 國廠祥儀科技寶智慧手臂 3/3:

電控程式設計篇


Nov. 13, 2022
[1]

  [2][3]

本系列第三篇文章延續了第一篇《國廠祥儀科技寶智慧手臂 1/3:機構設計篇(https://reurl.cc/Wq1aWZ)》的解析,本文將進一步地著墨在控制板(Arduino Nano)PCA9685  8787 電控程式設計上(圖 1 最右方塊)。

圖 1:機電整合專案三大設計

完整的電控程式

我們先來看看將控制板、PCA9685 與 8787 三者整合後的完整程式(https://reurl.cc/585AlM)(註:祥儀的 RD 是以 Performio(https://www.performio.com)這套 IDE 來開發智慧手臂的測試程式的,所以,它的主程式為 main.cpp。我們打開這隻程式細看,setup()、loop() 依舊是 Arduino IDE 的 C/ C++ 語法。因此,只要將智慧手臂的函式庫(https://reurl.cc/58paLz)複製到Arduino IDE 預設的函式庫存放路徑 C:\Program Files (x86)\Arduino\libraries 或 C:\Users\<user>\Documents\Arduino\libraries 之下即可順利編譯之。):

黃色指令為用來預測 8787 移動路徑的卡爾曼濾波器(Kalman filter)的程式碼;
紫色指令為 PCA9685 伺服馬達擴充板的控制程式碼;
綠色指令為 威盛 8787 AI 視覺感測器的控制程式碼。

#include <Arduino.h>
#include <Wire.h>
#include <SoftwareSerial.h>
#include "PCA9685.h"
#include "SimpleKalmanFilter.h"
#include "Pixetto.h"

#define sevo1_pin 0
#define servo1_angle_min -90
#define servo1_angle_max 90
#define servo1_angle_init 0

#define sevo2_pin 1
#define servo2_angle_min -90
#define servo2_angle_max 90
#define servo2_angle_init 0

#define sevo3_pin 2
#define servo3_angle_min -90
#define servo3_angle_max 90
#define servo3_angle_init 0

#define sevo4_pin 3
#define servo4_angle_min -90
#define servo4_angle_max 90
#define servo4_angle_init 0

#define rxPin 11
#define txPin 9

Pixetto ss(rxPin, txPin);

PCA9685 driver;
// PCA9685 輸出 = 12 位 = 4096 步
// 20ms 的 2.5% = 0.5ms ; 20ms 的 12.5% = 2.5ms
// 4096 的 2.5% = 102 步;4096 的 12.5% = 512 步
PCA9685_ServoEval pwmServo1; // (0deg, 90deg, 180deg)
PCA9685_ServoEval pwmServo2; // (0deg, 90deg, 180deg)
PCA9685_ServoEval pwmServo3; // (0deg, 90deg, 180deg)
PCA9685_ServoEval pwmServo4; // (0deg, 90deg, 180deg)

SimpleKalmanFilter KalmanFilter_X(1, 1, 0.01);
SimpleKalmanFilter KalmanFilter_Y(1, 1, 0.01);

int servo1Pos, servo2Pos, servo3Pos; // 當前角度
int KalmanX, KalmanY;

void setup() {
  Wire.begin(); // Wire must be started first

  driver.resetDevices(); // Software resets all PCA9685 devices on Wire line
  driver.init(); // Address pins A5-A0 set to B000000
  driver.setPWMFreqServo(); // Set frequency to 50Hz

  driver.setChannelPWM(0, pwmServo1.pwmForAngle(servo1_angle_init));
  delay(10);
  driver.setChannelPWM(1, pwmServo2.pwmForAngle(servo2_angle_init));
  delay(10);
  driver.setChannelPWM(2, pwmServo3.pwmForAngle(servo3_angle_init));
  delay(10);
  driver.setChannelPWM(3, pwmServo4.pwmForAngle(servo4_angle_init));
  delay(10);

  ss.begin();
  ss.enableFunc(Pixetto::FUNC_COLOR_DETECTION);
  delay(10);
  Serial.begin(9600);
  
  servo1Pos = servo1_angle_init+90;
  servo2Pos = servo2_angle_init+90;
  servo3Pos = servo3_angle_init+90;
}

void loop() {
  if (ss.isDetected()) {
    Serial.print("x:");
    Serial.println(ss.getPosX());
    Serial.print("y:");
    Serial.println(ss.getPosY());
    Serial.print("w:");
    Serial.println(ss.getWidth());
    Serial.println("");
    KalmanX = KalmanFilter_X.updateEstimate(ss.getPosX());
    KalmanY = KalmanFilter_Y.updateEstimate(ss.getPosY());
    if (ss.getFuncID() == Pixetto::FUNC_COLOR_DETECTION) {
      if (ss.getTypeID() == Pixetto::COLOR_RED) {
        if (KalmanX >= 50) {
          servo1Pos -= 5;
          if (servo1Pos >= servo1_angle_max+90)
            servo1Pos = 180;
          driver.setChannelPWM(0, pwmServo1.pwmForAngle(servo1Pos-90));
        }
        else if (KalmanX <= 25) {
          servo1Pos += 5;
          if (servo1Pos <= servo1_angle_min+90)
            servo1Pos = 0;
          driver.setChannelPWM(0, pwmServo1.pwmForAngle(servo1Pos-90));
        }
        else if (KalmanY <= 17) {
          servo2Pos += 5;
          if (servo2Pos >= servo2_angle_max+70)
            servo2Pos = 160;
          driver.setChannelPWM(1, pwmServo2.pwmForAngle(servo2Pos-90));

        }
        else if (KalmanY >= 60) {
          servo2Pos -= 5;
          if (servo2Pos <= servo2_angle_min+90)
            servo2Pos = 0;
          driver.setChannelPWM(1, pwmServo2.pwmForAngle(servo2Pos-90));
        }

        if (servo2Pos <= 65) {
          servo3Pos = servo2Pos + 25;
          if (servo3Pos <= servo3_angle_min+90)
            servo3Pos = 0;
          driver.setChannelPWM(2, pwmServo3.pwmForAngle(servo3Pos-90));
        }
        else if (servo2Pos >= 85) {
          servo3Pos = servo2Pos + 10;
          if (servo3Pos >= servo3_angle_max+90)
            servo3Pos = 180;
          driver.setChannelPWM(2, pwmServo3.pwmForAngle(servo3Pos-90));
        }
        else {
          servo3Pos = servo3_angle_init;
          driver.setChannelPWM(2, pwmServo3.pwmForAngle(servo3Pos));
        }

      }
    }
  }
}

如圖 2 所示,電控程式是用來控制硬體運作的指令集合,因此,我們先要想像智慧手臂要如何動作,然後將之對應到伺服馬達群的一連串控制劇本(script)。例如,我們想要讓智慧手臂追蹤到紅球就伸爪去夾住它,將這段劇本翻譯成伺服馬達控制語言則變成:左右轉動伺服馬達 1 去追紅球,水平定位到之後再移動伺服馬達 3 重直定位到紅球蹤跡。接著,調整伺服馬達 2 調整紅球和 8787 遠近的深度(depth)。三軸鎖定紅球的位置後即可張爪夾球。

圖 2:電控程式學習拆解

圖 2 中最右邊的淺藍色方塊表示現今流行的伺服馬達控制程式界面概可分為積木程式、C/ C++ 和 MicroPython 的語法程式。
關於智慧手臂如何自動追蹤紅球,在 Notepad++ 文字編輯器中,我們將上述的程式碼打開,就能很清楚的看到圖 2 中紅框內所框選的即為實作的程式碼,它判斷的數據如圖 3 上半部圖示。此外,在追蹤移動時,為了讓 8787 永遠保持置中,圖 2 中的綠框處即為實作的程式碼,它的判斷數據如圖 3 的最下方圖示。

圖 2:自動追蹤的程式片斷

圖 3:自動追蹤紅球時 8787 的移動位置調整

電控程式之主控板及開發環境建置

智慧手臂的控制板是 Arduino Nano 的相容板,裝妥 CH340 驅動程式、從裝置管理員確認它被指派到的 COM 埠編號後,我們就可以使用 Arduino IDE (我們使用 V1.8.9(https://reurl.cc/06Xq3Y)版本,祥儀 RD 建議以 V1.8.X 版為佳──經我們測試,最新的 V2.0.x 版改幅度不小,不建議讀者們採用)來開啟祥儀研發的範例程式。其中,Board 設定為 Arduino Nano、Processor 設定為 ATmega32p (Old Bootloader)、Port 設定為裝置管理員中列出 CH34 的 COM 埠編號。
萬事皆備,我們就可以將 Arduino 界最著名的 Blink 範例程式(讓板載在 D13 腳位上的 SMD LED 閃爍)上傳到控制板來測試我們的開發環境是否全然準備妥當,如圖 4 所示。我們將 Blink 的程式碼摘列如下:

void setup() {
  // initialize digital pin LED_BUILTIN as an output.
  pinMode(LED_BUILTIN, OUTPUT);
}

void loop() {
  digitalWrite(LED_BUILTIN, HIGH);   // turn the LED on (HIGH is the voltage level)
  delay(1000);                       // wait for a second
  digitalWrite(LED_BUILTIN, LOW);    // turn the LED off by making the voltage LOW
  delay(1000);                       // wait for a second
}

圖 4:控制板在 Arduino IDE V.1.8.9 的設定

電控程式之 PCA9685

為了能準確的控制每一顆伺服馬達,我們應該要先弄清楚一顆伺服馬達是如何以指令程式達成控制的。從 Github 上取得 PCA9685 的控制程式碼 pwmtest.ino https://reurl.cc/06XNMo,我們將之調整成「單顆」伺服馬達的測試程式如下:

#include <Wire.h>
#include <Adafruit_PWMServoDriver.h>

Adafruit_PWMServoDriver pwm = Adafruit_PWMServoDriver();

#define SERVOMIN  150
#define SERVOMAX  600
#define USMIN  600
#define USMAX  2400
#define SERVO_FREQ 50

uint8_t servonum = 0;

void setup() {
  Serial.begin(9600);
  Serial.println("8 channel Servo test!");

  pwm.begin();
 
  pwm.setOscillatorFrequency(27000000);
  pwm.setPWMFreq(SERVO_FREQ);

  delay(10);
}

void setServoPulse(uint8_t n, double pulse) {
  double pulselength;
  
  pulselength = 1000000;
  pulselength /= SERVO_FREQ;
  Serial.print(pulselength); Serial.println(" us per period"); 
  pulselength /= 4096;
  Serial.print(pulselength); Serial.println(" us per bit"); 
  pulse *= 1000000;
  pulse /= pulselength;
  Serial.println(pulse);
  pwm.setPWM(n, 0, pulse);
}

void loop() {
  Serial.println(servonum);
  for (uint16_t pulselen = SERVOMIN; pulselen < SERVOMAX; pulselen++) {
    pwm.setPWM(servonum, 0, pulselen);
  }

  delay(500);
  for (uint16_t pulselen = SERVOMAX; pulselen > SERVOMIN; pulselen--) {
    pwm.setPWM(servonum, 0, pulselen);
  }

  delay(500);

  for (uint16_t microsec = USMIN; microsec < USMAX; microsec++) {
    pwm.writeMicroseconds(servonum, microsec);
  }

  delay(500);
  for (uint16_t microsec = USMAX; microsec > USMIN; microsec--) {
    pwm.writeMicroseconds(servonum, microsec);
  }

  delay(500);

  if (servonum > 7) servonum = 0; // Testing the first 8 servo channels
}

現在,我們已經學會了單顆伺服馬達了,接下來就可以輕鬆地把像圖 2 提及的智慧手臂動作劇本轉換成對應的四顆伺服馬達控制指令了,讀者們可以自行挑戰看看!

此外,卡爾曼濾波器的測試程式可從此 https://reurl.cc/X5V05M 下載測試並從中了解這個數學模型的使用方式。

電控程式之 8787

首先,在 Pixtto 公用程式(Pixetto Utility)中設定使用 8787 內建的顏色偵測(color detection) AI 模型,如圖 5 所示。

圖 5:在 Pixetto 公用程式中指定顏色偵測的內建 AI 功能

緊接著,因為智慧手臂的 Github(https://reurl.cc/58paLz)中已含有 8787 V1.5.1 版的 Arduino 函式庫,所以,在 Arduino IDE 中可以使用下列的語法架構如來設計:

if (ss.isDetected()) {
    if (ss.getFuncID() == Pixetto::FUNC_COLOR_DETECTION) {
        if (ss.getTypeID() == Pixetto::COLOR_RED) {
        //...
    }
}
}

關於 8787 內建的 AI 模型詳列如下,有興趣的讀者們可詳參 https://reurl.cc/qZN7Mp 這隻 C 語言的標頭檔(header file):

enum EFunc
{
FUNC_COLOR_DETECTION = 1,
FUNC_COLOR_CODE_DETECTION = 2,
FUNC_SHAPE_DETECTION = 3,
FUNC_SPHERE_DETECTION = 4,
FUNC_TEMPLATE_MATCHING = 6,
FUNC_KEYPOINTS = 8,
FUNC_NEURAL_NETWORK = 9,
FUNC_APRILTAG = 10,
FUNC_FACE_DETECTION = 11,
FUNC_TRAFFIC_SIGN_DETECTION = 12,
FUNC_HANDWRITTEN_DIGITS_DETECTION = 13,
FUNC_HANDWRITTEN_LETTERS_DETECTION = 14,
FUNC_CLOUD_DETECTION = 15,
FUNC_LANES_DETECTION = 16,
FUNC_EQUATION_DETECTION = 17,
FUNC_SIMPLE_CLASSIFIER = 18,
FUNC_VOICE_COMMAND = 19
};

[科技宝, Cagebot, 8787, AI, Arduino] 國廠祥儀科技寶智慧手臂 2/3:機電整合設計篇

 國廠祥儀科技寶智慧手臂 2/3:

機電整合設計篇


Nov. 13, 2022
[1]

 [2][3]

本系列第二篇文章延續了前一篇《國廠祥儀科技寶智慧手臂 1/3:機構設計篇(https://reurl.cc/Wq1aWZ)》的解析,本文將進一步地著墨在機電整合設計上(圖 1 中間方塊),仔細地剖析控制板(Arduino Nano)伺服馬達 16 路伺馬達擴充板 PCA9685 的電路設計。這三者的接線圖如圖 3,電路圖如圖 4 所示。註:智慧手臂的控制板在出廠的接線已改為以 D11(8787 Grove 的黃線接做為接收 Rx 的控制板接腳) 和 D9(8787 Grove 的白線接做為傳送 Tx 的控制板接腳) 和 8787 做四線對接交握(handshaking)通信,請讀者自行調整圖 2 和圖 3 的接腳接線。 

圖 1:機電整合專案三大設計

圖 2:智慧手臂接線圖

圖 3:智慧手臂電路圖

另一方面,因為伺服馬達與 8787 都是吃大電流的電子元件,以「多電源共地」方式拉電源是比較安穩的供電方式(圖 2 是以二顆 18650 的 7.4 V 電池並聯供電) [4]:

電源供應 1:供應 5V 給 PCA 9685 去控四顆伺服馬達
電源供應 2:供應 5V 給 8787
電源供應 3:供應 5V 給控制板 

機電整合之 Arduino Nano

智慧手臂使用祥儀自家設計的科技寶(Cagebot)控制板(https://reurl.cc/X5jn1a),這是一塊 Arduino Nano 的相容板子,使用前要先掛上 CH340 驅動程式(https://reurl.cc/VRDVK6)。然後在裝置管理員(device manager)(以 Windows 為例,其他作業系統請自行尋找)中可查看到作業系統所指派的序列埠(COM port)編號──此號碼很重要,一定要學會隨時查看,因為我們隨後會以 Arduino IDE 開發工具透過此通道將程式上傳到控制板中。

機電整合之伺服馬達

伺服馬達採用了閉迴路(closed-loop)迴授(feedback)機制(https://reurl.cc/aaV0vZ),使之能以 0~180 度控制其轉動角度。至於馬達內的各部件(parts),強烈建議讀者以破壞式學習(https://reurl.cc/aaV0vZ),透過逐一拆解的過程去印證這些組成部件的關連性,以建立知識的直覺(intutition)

機電整合之 PCA9685

(伺服)馬逹是以電生磁,磁生力的電磁作用轉動的,它在啟動瞬間需要較大的啟動電流去推動,因此,切勿貪圖一時方便直接將之接到控制板的 GPIO(General Purpose Input/ Output)接腳(pin)上。雖然偶一為之看不出它對控制板的傷害,但隨著多次的積累使用,其實是在加速控制板的老化(burnout),就好像一直往存款有限的戶頭大量提款,這筆存款就會很「快」地被提領殆盡的。因此,我們選擇了 16 路四線 I2C 匯流排(bus)介面的馬達擴充板 PCA9685(https://reurl.cc/58pVn7)來趨動智慧手臂的四軸。

機電整合之 8787

8787 以 Grove 四線(Tx 黃、Rx 白、+5V 紅、GND 黑)和控制板的 D11(Rx)與 D9(Tx)透過軟體序列(software serial)進行交握式通信。兩者間連接方式如圖 5 所示。其中,8787 的 micro USB 接頭可供影像輸出校正監控之用。強烈建議元成校正後請保持 8787 獨立供電,以確保它能正常工作。

圖 5:8787 接線圖

2022年11月5日 星期六

[科技宝, Cagebot, 8787, AI, Arduino] 國廠祥儀科技寶智慧手臂 1/3:機構設計篇

 國廠祥儀科技寶智慧手臂 1/3:

機構設計篇


Nov. 5, 2022
[1]

  [2][3]

當國產祥儀塑鋼積木手臂添加了威盛(VIA)的 Pixetto(文後皆以 8787 稱之)AI 視覺感測器(vision sensor)(文後皆以智慧手臂稱之)會產生什麼綜效?本系列文章將從機構與機電整合設計兩面向逐一解說這其中的秘辛。

套件學習法

廠商都幫忙把機構、機電整合、電控程式、教材包成懶人包了,剩下的就只是按圖施工(腦袋空空)了嗎?
一般而言,知識、技能的學習約莫有兩種方式:由上而下(top down)和由下而上(bottom up),如圖 1 所示。其中,因前者已經有了套件典範(paradigm),所以我們比較容易將之拆解(decompose)而學習,但會因結果已知而限制了創意的擴散思考設計。然而,從基礎的各個知識點按部就班依序學習完畢後才將之整合(integrate)而的設計亦是另有一番風景。不過,見樹不見林的盲點容易導致學完新的知識就忘了舊的。

圖 1:兩學習方法論

智慧手臂教學採由上而下方式將大部頭的知識點逐一拆解至容易理解的各個小塊知識基元來還原作品設計的各階段歷程,此套件學習法如圖 2 所示。我們期待學員們能以設計師(designer)的視野去綜覽 why、how、…等等緊密的設計思維來欣賞這隻智慧手臂的創造歷程,並經由親手仿作來體驗與學習。

圖 2:套件學習法

仿生

舉起您的手臂活動活動,覺察一下:圖 3 的 1 處關節(joint)可以 360 度運動,2、3 處只能在限定角度下運動,而 4 處可做抓取。

圖 3:人體手臂四關節

圖 4 的智慧手臂設計即是模仿人類的手臂運動,在 1~4 的關節點放上可以帶動的四顆伺服(servo)馬達(SG90 和 MG995)而使得它有四軸(axies)可以在空間中自由的運動。其中,伺服馬達 1 可 0~180 度左右轉動,伺服馬達 2、3 負責控制大、小手臂的上下運動,伺服馬達 4 則控制抓子的開合抓取。

圖 4:智慧手臂四軸

參考設計:MeArm

筆者在約莫數年前即接觸了著名的機器手臂開源(open source)專案 MeArm(https://reurl.cc/oZ1ArV),它是由底盤、大手臂、小手臂和夾子四段所組成(https://reurl.cc/QWLGNZ),

模仿人手動作的秘密在於四個馬達,前方馬達控制爪子的開合;左左兩個馬達用來控制手臂前後伸展及上下移動;安置於下方的馬達是讓整組機身左右旋轉。 ~https://reurl.cc/gQ212N

請讀者們自行比較智慧手臂和它運動方式的異同之處。

機構組裝

根據祥儀提供的第一手組裝指引,我們將之轉檔成圖 5 的影片供讀者們參考。我們強烈建議讀者們根據圖 4 所標示的軸編號,依照數字順序組裝時,每裝妥一軸即輕輕(太大力轉動會使伺服馬達齒輪損壞)轉動觀察它們是如何動作的─對比於人的手臂和 MeArm 設計的異同點為何?

圖 5:智慧手臂組裝

開光:智慧視覺感測器(smart vision sensor)

如圖 6 所示的 demo 影片,智慧手臂使用了 8787 內建的顏色偵測(color detection) AI 模型,並實現了有色物件自動追蹤的示例。機電整合及電控程式的分析將以後文詳述之。
關於 8787 一系列的介紹文章,可以參考筆者所著的「假 a 真 i(https://reurl.cc/28ZV5a)」專網。

圖 6:有色物件自動追蹤手臂

生活中的機器手臂應用

處在這個科技爆發的時代,我們更期待著新技術能從自動化進入到智慧化,乃至最後可以達到無人化的全新應用領域。像是從工廠自動化自動物流智慧工廠,到無人咖啡店,再到藝術創作或者是手術機器人,智慧手臂開始有了更進一步的生活應用。然而智慧手臂的設計還是從這些基礎學習開始的。因此,不管是由上而下的套件學習法或者是由下而上的按部就班學習法,找到自己的學習興趣仍是自我學習的重要任務──喜歡智慧手臂的讀者們,就從這裡開始吧!

翦影

關於本智慧手臂教學照片請有興趣的讀者參考 12345678。桃園蘆竹五校聯合 AI 教育成果發表會之成果影片請參考圖 7 中之連結連入觀看。

 
圖 7:成果發表會影片

2022年10月31日 星期一

[fChart, Python, 資料結構] 以 fChart 馭 Python:陣列(array)(9/11)

 以 fChart 馭 Python:

陣列(array)


Oct. 31, 2022
[1]

接續著本 fChart 系列前文《以 fChart 馭 Python:練 fChart 了沒?(1/11)》(https://reurl.cc/oeDGN3),我們將針對圖1 的「10 大項目之 8」的 14 個實例(可從https://reurl.cc/RXXDqr 下載),從
原始問題描述以流程圖表達解法
再對照流程圖寫出 Python 語法程式
的過程詳細說明整個問題解決(problem solving)過程。

圖 1:10 大項目之 8

陣列使用三部曲

陣列是什麼?如果我們用「鞋盒」來比擬「變數」,那麼數十雙的鞋子就得準備數十個鞋盒來放置鞋子,這時就有添加「鞋櫃」的必要了──陣列就像這個放鞋子的鞋櫃,它特別適合拿來儲存大量的資料以待後續處理。在圖 2 的邏輯示意圖中,我們建立了一個叫 list 的陣列,list 中的位置從 0 開始往下遞增一號。而每個位置中儲存的資料稱之為元素(element)

圖 2:陣列的邏輯圖示

程式設計中為什麼要使用陣列 [2]?我們以當紅炸子機人工智慧 AI 的影像處理(image processing)技術來說明要將一張張高解析度照片載入(load)到 CPU P 圖之前,需事前先將存放在大容量外部儲存媒體(external storage)中的原始圖片檔載入到記憶體(memory)內。因此,P 圖程式才能將這些影像資料透過數學計算處理。也就是說,在開始處理相片的像素(pixel)內含(https://reurl.cc/91EgvV)之前,程式中需要有一個對應的機制來暫時存放這些待運算的影像資料。而對比於數學矩陣的陣列結構就正好符於所需了(圖 1)。

 
圖 1:照片內部的像素資料

陣列使用有三個基本動作,我們將之稱為陣列使用的三部曲(本文使用「Code Editor」來介紹  Python 中陣列的使用語法)。詳細分述如下:
  1. 建立(create):依照圖 3 的選項操作建立一個名叫 list 的陣列,它的初始內容是空的(第 1 行)。註:第 2-3 行指定它的初始值。
    Python 語法:陣列名稱 = [初值 1, 初值 2, ...]
  2. :依照圖 4 的選項操作,在第 3 和 5 行,使用指定運算子(operator) = 在 list 的編號 1 和 2 位置存入新值 10 和字串 Joe Chen。
    Python 語法:陣列名稱[位置] = 指定值
  3. :取出 list 陣列中位置 0、1 和倒數第 1 和 2 個元素內容。
    Python 語法:陣列名稱[位置]

圖 3:建立陣列

圖 4:將元素存至陣列

圖 5:取用陣列元素

原始問題

我們試圖把會安老師編排的範例一一還原到初始的問題形式來帶領讀者們思考:

問題 --- 流程圖 ---> 解法

一連串的問題解決奇幻之旅。筆者再次強調,

「解決問題」是編程訓練的終極目的,而「流程圖」乃為邏輯表達之母(積木拼圖湊答案不是)。

1. 08-01.輸入與顯示一維陣列元素:將由鍵盤輸入的三個數字儲存至陣列後印出其內容
2. 08-
02.更改與取出陣列元素值:存取陣列中的元素
3. 08-03.在運算式中使用陣列元素:使用陣列完成溫度度量轉換計算。以變數實現的版本請參考拙著《以 fChart 馭 Python:運算子與運算式(https://reurl.cc/EXn8r1)》

流程圖與 Python 語法對轉

1. 08-01.輸入與顯示一維陣列元素:根據流程圖將 Python 程式轉換妥後以「08-01.輸入與顯示一維陣列元素」存檔執行後就能看到如圖 6 所對應的執行結果。

圖 6:將鍵盤輸入的值存到陣列中後印出其內容

2. 08-02.更改與取出陣列元素值根據流程圖將 Python 程式轉換妥後以「08-02.更改與取出陣列元素值.py」存檔執行後就能看到如圖 7 所對應的執行結果。

圖 7:存取陣列元素

3. 08-03.在運算式中使用陣列元素根據流程圖將 Python 程式轉換妥後以「08-03.在運算式中使用陣列元素.py」存檔執行後就能看到如圖 6 所對應的執行結果。


圖 8:使用陣列來實現溫度度量單位轉換

2022年10月22日 星期六

[micro:bit, digitalization] 自製影像(images)數位化(digitalization)的視覺化(visualization)教具

自製影像(images)數位化(digitalization)的視覺化(visualization)教具

Line:ted2016.kpvs
Email:Lct4246@gmail.com
FBhttps://pse.is/TedLeeFB

Oct. 22, 2022
[1]

108 課綱的國中端資訊科技科(https://reurl.cc/le3DG6)中明確規範了「數位化」這個主題的授課重點(圖 1)。
在我們所處環境中存在著各種形式的類比信號(analog signals)。然而,隨著電腦技術的發達,計算速度愈來愈快、記憶容量愈來愈大,因而造成將這些信號轉換成易於傳輸、儲存,並使用電腦做處理的數位形式便更加重要了。
本文將討論就影像(image)語音(speech)兩種信號數位化的技術──數位信號處理(Digital Signal Processing,DSP),我目前已開發出的 Excel 與小彼特(micro:bit)兩平台三種版本的視覺化工具以做為拋磚引玉之期盼。註:因語音的處理技術與影像類似,本文僅選擇先以影像數位化之視覺工具為基礎,語音部份且容後文再述。

圖 1:108 科技領綱中資訊科技科的學習內容包括「數位化」的概念

關於處理上述的兩種數位信號的方法很簡單,概念上就是將之細切後再根據顆粒大小編碼,也就是說,原影像切完的顆粒會變成最小的像素(pixel),再將每個像素的 RGB 值依大小編碼成二進值

取樣(sampling)分割(partitioning) 將圖 2 的愛心原始影像均等細切如圖 3,這個動作就好像在圖 2 上鋪上一層方格紙(graph papaer),格點愈密,顆粒愈小,其數量也愈多。

量化(quantization)編碼(encoding) 針對圖 3 中每一格點顏色的 RGB 值 [2] 轉換成對應的十進位值,例如:R = 127、G = 128、B = 129,圖 4)轉換成相對應的二進值(例如,(127, 128, 129)2 = 7F808116)。承前述,我們將圖 2 的所有格點以一位元的二進值轉換後如圖 5 所示。

圖 2:原始影像

圖 3:對影像取樣

圖 4:單一格點色彩的 RGB 值

圖 5:原始影像的量化二進值

視覺教具 1(Excel BW 版)

首先,我們最期待的視覺工具是像 DOS 時代的闇黑工具 PCTools(https://reurl.cc/W1p0mD)那般:修改影像的某塊像素值,螢幕上馬上讓狗狗的眼框帶出黑輪(https://reurl.cc/rRNEex)。

朝著這個目標前進,我們思考著用以下兩步驟來試試:

  1. 使用 Excel 的「內建函式」:如圖 6 所示,當上方 A1:E5 的 5×5 方陣(matrix)中的任何一格輸入 * 號時,在下方 A7:E11 方陣中所對應到的位置即顯示 1,表示上方此格被數化成 1(黑)。其中,下方方陣中的二進值 0(白)表示不包含在上方方陣的影像圖中。例如:當我們在上方陣的 B1 儲存格打上 * 時(已套用函式 =IF(B1 = "*",1,0),下方陣對應的 B7  儲存格立即顯示 1。
  2. 使用 Excel 的格化條件之「醒目提示」:如圖 7 所示,當下方陣任一儲存格中的值為 1 時(上方陣對應的儲存格已打入 *),使用圖 8 中「等於」的「醒目提示」功能替它上色。
最後,設定完成後的 GIF 動畫如圖 9 所示。

圖 6:使用「函式」if()


圖 7:格式化條件之醒目提示

圖 8:醒目提示條件設定


此「影像數位化的 Excel 視覺示例V2.xlsx」檔可從 https://reurl.cc/EROVeg 下載。


圖 9:在上方的 5×5 方陣中作畫,下方隨即顯示此方陣圖數位化的二進值

視覺教具 2(Excel RGB 版)

在教具 1 中,步驟 2 是以一個位元(0/1 兩種組合)來編碼每個格點。將之擴充成三位元(8 種組合)後,我們就可以將之擴充成本教具 2(動畫展示如圖 10 所示)。其中,為了簡化起見,我們將每一格點的色彩值限縮為 r/g/b 三值。

此 .xlsx 檔可從 https://reurl.cc/EROVeg 下載。


圖 10:以三位元編碼量化

視覺教具 3(小彼特版)

小彼特教育基金會(Micro:bit Educational Foundation)https://microbit.org日前在小彼特的開發平台 MakeCode 上發表了資料日誌(Data Logger)的一包新的擴充積木(extension blocks)https://reurl.cc/XVv9nj),如圖 11 所示。這個新增的功能是將板子所測得的數據直接寫成 MY_DATA.htm 網頁,並存在該小彼特的快閃記憶體(flash memory)中。


圖 11:資料日誌擴充積木

利用這個新功能,我們設計了以下這個操作方式來輔助數位化的教學:

按 A 左右移動,按 B 上下移動,按 A+B 畫點(並將此點記錄到資料日誌中)。

成果展示如圖 12 和 13 所示。


圖 12:小彼特 + 資料日誌

圖 13:「小彼特 + 資料日誌」動畫展示


和圖 3 類似,我們在資料日誌中建立相同的 5×5 影像表來記錄使用者在小彼特上繪製的圖案(圖 14)。詳細的積木程式請讀者們參考圖 15,完整程式碼可由 https://reurl.cc/4p2oZR 下載之。

圖 14:影像表格



 15:完整程式碼


影像、聲音數位化學習單

在還沒有發展出前述三種教具之前,筆者一直被林、康軒與南一三版本的國中資科九上的數位化內容僅做知識陳述所困擾,反覆思量著書本內講半天的理論,那到底我們拍好的美美照片轉成電腦能處理的二進值長的像怎樣?有沒有一種工具能讓我們改改、調調先去感受一下過程再來看理論知識呢?
在此因緣際會下,圖 14 的這份學習單就從筆者的腦袋中蹦了出來了。

 14:數位化學習單


[2] 光的三原色在八上理化的 4-5 光與顏色(https://reurl.cc/7p6WK1)中會教授。