認識螢幕模組

A.螢幕模組

模組連接一個LCD彩色螢幕顯示器，螢幕解析度爲240 x 240 px (像素)，可顯示JPG, BMP 等格式圖片。像素，組成點陣數位影像的最小方塊單位，每個方塊都有一個明確的位置和被分配的色彩數值，小方格顏色和位置就決定該圖像所呈現出來的樣子。如下圖所示：

我們以坐標系(X, Y)標明方塊的位置，X代表水準方向(X軸)，Y代表垂直方向(Y軸)，列螢幕的左上角為起始點(0, 0)（代表第一行，第一列），最大值為(239, 239)。
例如方塊(4, 3)，指方塊的位置由左而右第5列，由上至下第4行(因為X、Y座標均從0開始)。

<tr>
    <td width="50%"><img src="./media/ai/AI_g2.png" width="350"/></td>
    <td width="50%"><img src="./media/ai/AI_g3.png" width="350"/></td>
</tr>
<tr >
    <td colspan=2>活動：列出方格A及方格B的座標系：A __________ B __________</td>
</tr>

B.螢幕模組介紹

積木	指令	說明
	初始化	初始化螢幕
	改變螢幕狀態	旋轉螢幕方向、螢幕鏡面翻轉
	改變螢幕顏色	填充螢幕顏色：
	自定義螢幕顏色	填入不同的RGB（紅綠藍）值，達到自定義顏色的效果
	清除螢幕	清除螢幕
	參數調節	改變RGB值、XY坐標值和寬高值
	建立畫布	建立畫布並定義畫布的大小
	自定畫布幕顏色	填入不同的RGB（紅綠藍）值，達到自定義顏色的效果
	建立畫布	建立並儲存畫布在SD記憶卡
	顯示畫布	定義畫布在螢幕上的起始位置
	繪製文字	螢幕可以同時顯示文字及圖形，特別適合用作圖像識別。必須同時使用「建立畫布」及「顯示畫布」指令。
	繪製直線	在畫布上繪畫直線，輸入起點及終點坐標。可以選擇線條顏色及厚度。
	繪製矩形	在畫布上繪畫矩形，可以是實心或空心，輸入起點坐標及尺寸。可以選擇線條顏色及厚度。
	繪製圓形	在畫布上繪畫圓形，可以是實心或空心，輸入圓心的坐標及半徑。可以選擇線條顏色及厚度。
	繪製十字標	在畫布上繪畫十字標，輸入中心坐標。可以選擇線條延伸長度、厚度及顏色。
	繪製箭頭	在畫布上繪畫箭頭，輸入起點及終點坐標。可以選擇線條顏色及厚度。
	繪製圖片	在畫布上繪畫圖片，圖片從SD卡的檔路徑中選取，輸入起點坐標及縮放比例。
	顯示畫布	顯示指定畫布，畫布名可修改
	清除畫布	清除所選畫布中的所有內容

I. 基礎編程

活動一：在螢幕上顯示矩形圖案，設定坐標系(0,0)

1)AI模組｜圖像處理：「螢幕初始化」、「創建空白畫布」、「設定畫布坐標」

2)循環：「重複執行」

3)AI模組｜圖像處理：「繪製矩形」

4)AI模組｜圖像處理：「顯示畫布」

以上活動首先會建立一幅空白畫布並命名為「canvas」，畫布的大小設定為240 x 240。接著輸入「重複執行」指令，使螢幕不斷顯示矩形圖案，如果沒有使用該指令，矩形圖案只會顯示一次就消失。在「重複執行」指令中加入「繪製矩形」及「顯示畫布」指令並輸入參數如下：

繪製矩形	矩形樣式：實心起始座標：X=0, Y=0 尺寸：寛=1, 高=1 顏色：紅色厚度：1
顯示畫布	起始座標：X=0, Y=0

注：「建立畫布」是指建立圖像變數，將獲取的影像存放在變數中，作進一步使用。
運行結果：

##### 活動二：修改活動一程式，在螢幕上顯示延長橫線

1)循環：「計次」將指令並合在「重複執行」指令內，範圍設定為0-239，間隔=1 2)變數：「i」將變數「i」放在「繪製矩形」座標參數中的X值處
點按「運行」後觀察螢幕的變化，並簡短描述如下：
運行結果：不斷延長的直線

挑戰一：

修改活動二的程式，在螢幕上顯示一個紅色方塊，由左向右移動，每次移動一格。提示：嘗試運用以下積木
參考程式：
運行結果：

活動三：建立畫布顯示矩形圖案

在積木指令區點按以下指令，並依次放在積木編程區： 1)AI模組｜圖像處理：「螢幕初始化」 2)AI模組｜圖像處理：「建立畫布」、「設定畫布起始坐標」 3)循環：「重複執行」 4)AI模組｜圖像處理：「繪製矩形」 5)AI模組｜圖像處理：「顯示畫布」
運行結果：

此活動目標為理解路徑的概念：
從SD卡檔夾中讀取圖像，使用該圖像作為畫布，顯示在熒幕上，然後在此畫布上畫白色的矩形塊，學生可自行修改矩形塊位置、大小及顏色。 ##### 活動四：建立畫布顯示方框文字

在積木指令區點按以下指令，並依次放在積木編程區： 1)重複活動一的程式 2)AI模組｜圖像處理：「繪製文本」放在「繪製矩形」指令之下 3)AI模組｜圖像處理：「顯示畫布」（必要積木，否則不會顯示任何訊息）
運行結果：

挑戰二：

編寫程式，在螢幕正中心位置顯示白色方框，框內打印你的英文名。如下圖所示：提示：需要計算文字及方框的尺寸，對應螢幕的面積尺寸，修改文字及方框的座標位置，使二者能顯示在螢幕的正中心位置。
參考程式：