#### 回到 [`教學大綱`](https://md.kingkit.codes/s/siSKyknlU) / [`Web:AI 程式積木`](https://md.kingkit.codes/s/X4vMmbtp_)
<style>
blockquote.announcement {
background-color: #f4aa14;
height: 50px;
width: 100%;
display: flex;
justify-content: center;
border-left: none;
}
blockquote.announcement p {
color: white;
height: 100%;
align-items: center;
display: flex;
}
.announcement a {
background-color: rgba(0, 0, 0, 0.2);
text-decoration: none;
padding: 6px 16px;
border: 1px;
border-radius: 8px;
color: #fff;
line-height: 30px;
}
</style>
<blockquote class="announcement">
<p>
Webduino 學習手冊網站即將改版,提供您更好的閱讀體驗!<a
href="https://resource.webduino.io/docs/webai"
target="_blank"
rel="noopener"
>搶先試用</a
>
</p>
</blockquote>
# LCD 螢幕
Web:AI 內建一塊 2.3 吋 LCD 螢幕,可以使用程式積木配合感測器、控制器、按鈕開關等物聯網相關硬體設備,將執行的結果顯示在螢幕上,達成各種跨領域應用。
## LCD 顯示文字
「LCD 顯示文字」積木能夠讓 Web:AI 的螢幕上顯示指定的英文字、數字,更可以搭配其它積木的互動,讓程式執行結果展示在 LCD 螢幕上。

## LCD 畫文字
「LCD 畫文字」積木是將 Web:AI 的螢幕以畫布的方式畫上指定的文字,更可以透過積木組合,讓文字顯示在圖片上面。

> 因為「LCD 畫文字」積木在程式邏輯是將螢幕設定一張畫布,所以如下方的積木會讓「LCD 顯示文字」積木的「ABCDE」被覆蓋。
>
> 
## 清除 LCD 畫面
「清除 LCD 畫面」積木可以將 LCD 畫面原本的顯示的任何文字或執行結果清除,方便繼續執行後續步驟。

### 範例:3 秒後清除 LCD 畫面
1. 使用「LCD 顯示文字」積木讓 LCD 螢幕顯示 Hello World。
2. 下方放入「等待」積木設定 3 秒,並加入「清除 LCD 畫面」積木。
3. 按下執行,可以看到螢幕顯示 **Hello World**,等待 3 秒之後,螢幕畫面中的文字消失。

## LCD 畫直線
「LCD 畫直線」積木可以同時在螢幕中畫出 **多條** 直線,並可以設定線段的起點、終點、顏色、線粗、箭頭。
> 箭頭的端點位在終點位置。

### 範例:畫出紫色箭頭
1. 使用「LCD 畫直線」積木,設定起點、終點的 x、y 位置、顏色、線粗,箭頭選擇「顯示」。
2. 按下執行,可以看到 LCD 螢幕顯示紫色箭頭線段。

## LCD 畫圓
「LCD 畫直線」積木可以同時在螢幕中畫出 **多個** 圓形,並可以設定圓形的位置、半徑、顏色、線粗、是否填滿。

### 範例:畫一張臉
1. 如下方程式範例,使用「LCD 畫圓」積木設定座標、半徑及是否填滿,做出眼睛和鼻子。
2. 使用「LCD 畫直線」積木做出嘴巴。
3. 按下執行,可以看到完成一張臉在 LCD 螢幕上。

## LCD 畫矩形
「LCD 畫直線」積木可以同時在螢幕中畫出 **多個** 矩形,並可以設定矩形的位置、寬高、顏色、線粗、是否填滿。
> 矩形的起點 x、y 是依據矩形左上角的座標而定。

## LCD 顯示圖片
「LCD 顯示圖片」積木可以讓 LCD 螢幕顯示出拍攝的圖片,或是存放在 Web:AI 開發板中的圖片。

### 開發板預設的圖檔:
- logo:Webduino Logo
- m01:笑臉
- m02:閉眼
- mleft:向左看
- mright:向右看
- mrun:>o<
- red:紅色小怪獸
- blue:藍色小怪獸
- yellow:黃色小怪獸
- green:綠色小怪獸
### 範例:照相畫面
1. 使用「LCD 顯示圖片」積木,裡面放入「拍攝圖片」積木。
2. 因為這樣的程式設計只能顯示一次固定的畫面,因此需要讓程式不斷執行。
3. 在最外層放入「無限重複」積木。
4. 按下執行,可以看到開發板開啟照相鏡頭功能,顯示鏡頭拍攝的畫面。

> 關於照相畫面的更多應用變化,可以參考:[照相畫面](https://md.kingkit.codes/s/3KhHmkwBd#%E7%85%A7%E7%9B%B8%E7%95%AB%E9%9D%A2)。
### 範例:改變表情
1. 使用「建立陣列」積木放入各種圖檔名稱。
2. 在外層使用「取出陣列元素並執行」積木,讓程式會根據陣列中的元素逐項執行。

3. 放入「LCD 顯示圖片」積木,顯示圖片、檔名為「變數 i」
4. 讓表情每 1 秒改變一次,因此放入「等待 1 秒」積木。
5. 目前的程式執行到最後一個項目就會停止,並不會永久重複,所以在最外層放入「無限重複」積木。
6. 按下執行,可以看到螢幕不斷變換表情。

## 照相畫面
「拍攝照片」積木可以使用鏡頭拍攝一次畫面,配合「無限重複」積木就可以達成照相鏡頭的效果。

另外也可以使用「變數」積木替拍攝照片命名,透過命名來做出更多變化。

> 以上兩種積木組合方式執行後會達到相同的結果,差別在於若是要做出更多應用變化,就需要搭配「變數」積木的命名。
## LCD 畫圖片
「LCD 畫圖片」積木內建了各種使用積木畫出的範例圖案,可以直接選用並直接顯示在螢幕上,不需要使用大量積木來畫出。

### 範例:畫出人臉
1. 放入「LCD 畫圖片」積木,選單選擇人臉。
2. 按下執行,可以看到螢幕顯示人臉。
