01 入門及顯示篇

(2021/08/03)

參考資料：


(2019/06/04)

參考資料：

一、刷入 MicroPython 韌體

  • 先確定已安裝驅動程式(CH340)，當web:bit接上電腦時，可得知自己所使用的埠數，如COM5

    • 下載燒錄軟體及韌體 (目前的最新版本為20190528版)

    • 下載網址：https://share.weiyun.com/5fuK9ak

    • 下載完後解壓縮，並執行Flashtool.exe

      • 點右方的Flash來燒錄韌體 (同資料夾內的firmware.bin)，如有更新的韌體再改為此名，放此資料夾下

二、下載MicroPython最簡單編輯器 mpy-editor

  • 可以在下方寫一些簡單程式

    • 初識REPL (如上圖)

    • 使用 MicroPython 的一个主要的优点是交互式的 REPL ，REPL（read-evaluate-print loop）代表读取﹣求值﹣输出循环。 REPL 对于学习一门新的编程语言具有很大的帮助，因为它能对初学者写的程序立刻做出回应，这意味着你执行代码，并能马上查看结果，而无需经过先编译再上传的繁琐步骤。

    • Python REPL 提示符，表示为 >>>

三、寫下第一個程式

  • 寫上第一個程式

      • from microbit import *

      • display.show(Image.HAPPY)

    • 第一行 from microbit import * 的意思是我需要使用 microbit 函式庫中的所有内容。

    • 第二行就是利用 display 函式來顯示內建的 Image 圖案

  • 按下Run

    • 這時，就會看到web:bit顯示紅色的笑臉圖案

    • 顯示一個文字或數字

    • from microbit import *

    • display.show("A") (最下方有介紹如何修改顯示顏色)

四、顯示內建圖案

  • 內建圖案的名稱

    • Image.HEART

    • Image.HEART_SMALL

    • Image.HAPPY

    • Image.SMILE

    • Image.SAD

    • Image.CONFUSED

    • Image.ANGRY

    • Image.ASLEEP

    • Image.SURPRISED

    • Image.SILLY

    • Image.FABULOUS

    • Image.MEH

    • Image.YES

    • Image.NO

    • Image.CLOCK12, Image.CLOCK11, Image.CLOCK10, Image.CLOCK9, Image.CLOCK8, Image.CLOCK7, Image.CLOCK6, Image.CLOCK5, Image.CLOCK4, Image.CLOCK3, Image.CLOCK2, Image.CLOCK1

    • Image.ARROW_N, Image.ARROW_NE, Image.ARROW_E, Image.ARROW_SE, Image.ARROW_S, Image.ARROW_SW, Image.ARROW_W, Image.ARROW_NW

    • Image.TRIANGLE

    • Image.TRIANGLE_LEFT

    • Image.CHESSBOARD

    • Image.DIAMOND

    • Image.DIAMOND_SMALL

    • Image.SQUARE

    • Image.SQUARE_SMALL

    • Image.RABBIT

    • Image.COW

    • Image.MUSIC_CROTCHET

    • Image.MUSIC_QUAVER

    • Image.MUSIC_QUAVERS

    • Image.PITCHFORK

    • Image.XMAS

    • Image.PACMAN

    • Image.TARGET

    • Image.TSHIRT

    • Image.ROLLERSKATE

    • Image.DUCK

    • Image.HOUSE

    • Image.TORTOISE

    • Image.BUTTERFLY

    • Image.STICKFIGURE

    • Image.GHOST

    • Image.SWORD

    • Image.GIRAFFE

    • Image.SKULL

    • Image.UMBRELLA

    • Image.SNAKE

  • 試看看顯示各種圖案吧！

五、顯示Hello,World

    • 利用 display.scroll("Hello,World") 滾動(跑馬燈)函數

    • 改變顯示的顏色

    • 預設顏色為紅色

    • 相較於 microbit，web:bit 的 led 屏幕採用的是 RGB 燈(ws2812b)

    • 韌體已預置了8種顏色

      • black = [0, 0, 0] 黑

      • Red = [2, 0, 0] 紅

      • Orange = [2, 1, 0] 橘

      • Yellow = [2, 2, 0] 黃

      • Green = [0, 2, 0] 綠

      • Blue = [0, 0, 2] 藍

      • Indigo = [0, 2, 2] 靛

      • Purple = [2, 0, 2] 紫

      • [紅(R),綠(G),藍(B)] 數字0(無亮)~255(最亮)

    • 顯示 黃色文字(以下發現錯誤)

      • 正確程式

        • from display import*display = Display()display.scroll("Hello, World!", Yellow)

    • 每個字母顯示的顏色不一樣

      • from display import*

      • display = Display()

      • color = [Red, Orange, Yellow, Green, Blue, Indigo, Purple]

      • display.scroll("ROYGBIP", color)

      • 新建了一個列表 color

      • 上面每個字母顏色不一樣

    • 自訂顏色及亮度

      • [紅(R),綠(G),藍(B)] 數字0(無亮)~255(最亮)

      • from display import *

      • display = Display()

      • mycolor = [3,3,3]

      • display.scroll("hello",mycolor)

      • 不要用太亮，會傷眼睛

六、顯示自行設計的圖案

  • 程式內容 (亮度為0~9)

    • from microbit import *

    • boat = Image("01010:"

    • "01010:"

    • "01010:"

    • "99999:"

    • "09990")

    • display.show(boat)

    • 畫出一隻船的圖形來，但發現顏色的亮暗並不明顯

    • 中間的部份也可成 boat = Image("01010:01010:01010:99999:09990")

七、製作簡易動畫

  • 利用列表來建立多個圖案的列表，如上方介紹內建的圖案中，有兩組是由多個圖案組成的

    • Image.CLOCK12, Image.CLOCK11, Image.CLOCK10, Image.CLOCK9, Image.CLOCK8, Image.CLOCK7, Image.CLOCK6, Image.CLOCK5, Image.CLOCK4, Image.CLOCK3, Image.CLOCK2, Image.CLOCK1

    • Image.ARROW_N, Image.ARROW_NE, Image.ARROW_E, Image.ARROW_SE, Image.ARROW_S, Image.ARROW_SW, Image.ARROW_W, Image.ARROW_NW

  • 列表表示法：

    • 列表名稱 = [ 內容1, 內容2, 內容3, .. ]

    • 內建了兩個列表 Image.ALL_CLOCKS 和 Image.ALL_ARROWS

    • 連續顯示 Image.ALL_CLOCKS 列表的圖案，並形成一個動畫

      • 內建的Image.ALL_CLOCKS = [Image.CLOCK12 , Image.CLOCK1 , Image.CLOCK2 ..... Image.CLOCK11 ]

      • from microbit import *

      • display.show(Image.ALL_CLOCKS, loop=True, delay=100)

      • 上面程式的loop控制是否一直重複顯示；delay控制每一圖案的停留時間

      • 同理也可試用

        • display.show(Image.ALL_ARROWS, loop=True, delay=100)

    • 製作船下沉的程式

      • from microbit import *

      • boat1 = Image("05050:"

      • "05050:"

      • "05050:"

      • "99999:"

      • "09990")

      • boat2 = Image("00000:"

      • "05050:"

      • "05050:"

      • "05050:"

      • "99999")

      • boat3 = Image("00000:"

      • "00000:"

      • "05050:"

      • "05050:"

      • "05050")

      • boat4 = Image("00000:"

      • "00000:"

      • "00000:"

      • "05050:"

      • "05050")

      • boat5 = Image("00000:"

      • "00000:"

      • "00000:"

      • "00000:"

      • "05050")

      • boat6 = Image("00000:"

      • "00000:"

      • "00000:"

      • "00000:"

      • "00000")

      • all_boats = [boat1, boat2, boat3, boat4, boat5, boat6]

      • display.show(all_boats, delay=500, loop=True)

  • 改變顏色

    • 程式範例

      • from microbit import *

      • from display import * (用上面介紹的 display = Display() 也可以)

      • display.show(Image.ALL_CLOCKS, color=Blue, loop=True, delay=100)