用microbit連接LumexOLED

之前為了micro:bit顯示訊息只能有5*5的LED而寫了LCD1620的積木,讓micro:bit能顯示更多的訊息。但是,LCD1602只能顯示文字,而且比較沒有什麼動態的效果,剛好手邊有一個去年在CAVE舉辦的「放課後」的展覽買到的一塊LUMEX公司出的OLED(LUMEX LOD-H12864GP-X-UR),它可以顯示圖形、在OLED上畫幾何圖形,以及各種螢幕動態的效果,於是就有了為這個OLED寫個方便的makecode的積木的想法。但是沒想到一開始寫,才發現要在makecode上寫這個hex command的方法和在arduino上差很多,碰到很多釘子,但是,還好最後還是完成了初步的積木。其實這個OLED還有一些功能,因為時間的關係,我也沒有完全寫出它的功能,但已涵蓋了90%以上的功能了。我寫的積木,最主要能在OLED上顯示英文字串、畫幾何圖形、顯示圖片,以及各種畫面淡入淡出的特效,讓micro:bit也能有華麗的訊息顯示介面。大部份的OLED因為內部功能的限制,都只能顯示英文,但因為這個OLED具有顯示圖形的功能,基本上,要顯示各國文字,只要把文字轉成圖像,就能在這個OLED上顯示。

Lumex OLED的相關指令及工具程式如以下網址:

https://www.lumex.com/lod-h12864gp-x-ur

我寫的Lumex OLED積木套件的安裝網址為:

https://github.com/lioujj/pxt-oled

PS.最近寫micro:bit的外接模組的積木,愈寫愈有心得了............

一、線路連接

這個OLED需要5V的電源,而micro:bit只提供3V的電源,所以要為OLED額外提供5V電源,可以的做法有二種:

1、改裝USB線,用USB提供OLED電源。(作法請參考我的前一篇文章microbit連接LCM1602)

2、使用可切換5V及3V功能的micro:bit擴展板,在這裡我是使用凱斯電子的KSB039這個擴展板

http://www.buyic.com.tw/product_info.php?products_id=6728

OLED的線路--->micro:bit腳位

VSS----->GND

5V+----->外接5V+電源

RX------->micro:bit可用腳位

TX------->micro:bit可用腳位

LUMEX OLED

凱斯電子的KSB039擴展板

二、OLED顯示文字

OLED可顯示的文字大小有5*7以及8*16兩種,橫向有8行,以下為顯示溫度的積木範例。

所有的文字、影像以及幾何圖形的顯示,都可以選擇「立刻」或「稍候」,如果選擇稍候,則要「搭配OLED顯示畫面」或是「逐格顯示畫面」的積木,以特效方式顯現。

三、OLED顯示幾何圖案:

Lumex OLED的解析度為128*64,所以它的X軸為0~127,Y軸為0~63,在畫幾何圖案時,必須了解這X、Y軸座標。以下為程式範例以及顯示畫面。在這裡有用到顯示畫面的特效,所以每個幾何圖形的顯示時間都要設成「稍候」,才能讓這些特效發揮視覺效果。

四、OLED顯示圖形:

顯示圖形是所有積木裡面使用起來最複雜的部份,必須要先把圖形轉換成數字陣列,傳送到micro:bit,才能正確顯示圖形。OLED的解析度是128*64,轉換成數字陣列要用到1024個數字,在arduino可以吃得下這個1024的陣列顯現滿版的圖片,但是因為micro:bit記憶體太小,無法顯示這麼大的圖片。不過,倒是可以把圖片拆解成32*32的圖片,轉成數字陣列是128個數字,micro:bit能放下五個32*32的圖片,應該也夠用了。OLED可以顯示的小圖有這幾個:8*8、8*16、16*16、32*32,以下就以32*32的圖形為例:

1、文字轉為圖形的數字陣列:

如果要使用中文或是其他國家的語言顯示在OLED上,必須把文字轉成圖案,Lumex OLED已經有工具程式可以把字轉為圖案,工具程式下載連結為https://www.lumex.com/content/files/ProductAttachment/1030201753601-urcSetup.zip,操作畫面如下:

2、圖形轉成數字陣列:

先做好一個黑白的圖片,長寬都要一樣(例如200*200),然後到這個網站:

http://www.digole.com/tools/PicturetoC_Hex_converter.php,它可以幫我們把圖形轉成數字陣列,在這裡以轉成32*32的圖形數字陣列為例:

3、將我們拷貝好的數字陣列複製到makecode的JavaScript頁面,先輸入以下內容宣告一個array0數字陣列:

let array0:number[]=[]
array0=[ ]

將之前拷貝好的圖形的數字陣列貼上第二行的array0=[ ]的中括號裡面,有斷行沒關係。

4、切換回積木頁面,這時陣列積木會產生,但會拉得很長,將頁面拉至最下端,加入以下的積木: