2. Display

The mPython Board has a 1.3-inch OLED display with a resolution of 128x64. Use Google Noto Sans CJK Open source sans serif font. Font height 16 pixels. Supporting Chinese (both simplified and traditional), Korean, Japanese, latin alphabet and others text characters.

Hint

OLED is a derived class of machine.framebuf , so the method of inheriting framebuf can be consulted for details. framebuf()。

2.1. Text Display

Before use, first import the mpython module:

from mpython import *

hello,world text display:

# It is easy to see how the characters are displayed on the display, and the mode selects the pixel flip mode
oled.DispChar('hello,world!',0,0,mode=TextMode.rev)
# In the default mode, the background pixels of the character are off
oled.DispChar('hello,world!',0,16,mode=TextMode.normal)
oled.show()
../../_images/display_char_pixel.png

How character pixels are displayed on the mPython Board screen

  • DispChar(str,x,y) function can write text with coordinates in the upper left corner to FrameBuffer. str is for displaying text content, supports simplified Chinese, traditional Chinese, Japanese and Korean languages. x y is OLED display Starting xy coordinates. oled.show() to send FrameBuffer to OLED to refresh and display the screen。
  • Noto Sans CJK 16-pixel constant-height, unequal-width fonts are used. Different characters, the width will be different, as shown above。
Display Chinese or other language text of HELLO WORLD on OLED display:
1
2
3
4
5
6
7
from mpython import *

oled.DispChar('你好世界', 38, 0)
oled.DispChar('hello,world', 32, 16)
oled.DispChar('안녕하세요', 35, 32)
oled.DispChar('こんにちは世界', 24, 48)
oled.show()
../images/mPythonBoard-FrontView.png

Multiple language hello,world display

oled.fill(0)
oled.show()

In addition to clearing the display, you can also light up the entire screen pixels:

oled.fill(1)
oled.show()

Note

fill() fills the entire FrameBuffer area.

OLED display also supports setting of brightness of the screen:

oled.contrast(brightness)

Note

Range of brightness value is 0~255。

2.2. Basic shape drawing

Example: Draw lines.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
from mpython import *
import time

def testdrawline():
    for i in range(0,64):
        oled.line(0,0,i*2,63,1)
        oled.show()
    for i in range(0,32):
        oled.line(0,0,127,i*2,1)
        oled.show()
    time.sleep_ms(250)
    oled.fill(0)
    oled.show()
    for i in range(0,32):
        oled.line(0,63,i*4,0,1)
        oled.show()
    for i in range(0,16):
        oled.line(0,63,127,(64-4*i)-1,1)
        oled.show()
    time.sleep_ms(250)
    oled.fill(0)
    oled.show()
    for i in range(1,32):
        oled.rect(2*i,2*i,(128-4*i)-1,(64-2*i)-1,1)
        oled.show()

testdrawline()
../../_images/drawline.gif

OLED can draw some points, lines, rectangles and other shapes.

Pixel display:

oled.pixel(50,0,1)   #Set (50,0) pixel to 1, light up
oled.show()          #Refresh the display

Note

oled.pixel(x, y, [c] ) Can display pixel points, x ， y are point coordinates (x, y). c is the color value, when it is 1, the pixel is lit, if it is 0, it is no. If c is not given, get the color value of the specified pixel. If c is given, set the specified pixel to the given color.

Draw line:

oled.hline(0,1,20,1)  #Draw a horizontal line, starting point coordinates (0,1), line length 20
oled.show()
oled.vline(10,10,20,1)  #Draw a vertical line, starting point coordinates (10, 10), line length 20
oled.show()
oled.line(15,15,80,20,1)  #Draw a line in the direction of the start coordinate (15, 15) and end coordinate (80, 20)
oled.show()

Note

  • oled.hline(x, y, w, c ) You can draw a horizontal line, x ， y are the point coordinates (x, y), w is the line width, and c is the color value.
  • oled.vline(x, y, l, c ) You can draw vertical lines same way as above.
  • oled.line(x1, y1, x2, y2, c) Can draw lines in any direction, starting coordinate (x1, y1), ending coordinate (x2, y2), c is the color value.

Draw hollow / solid rectangle:

oled.rect(60,25,30,25,1)   #Draw a rectangle with starting coordinates (60, 25), width 30, height 25
oled.show()
oled.fill_rect(100,25,20,25,1)   #Draw the starting coordinates (100, 25), width 20, height 25 fill the rectangle with full color
oled.show()

Note

  • oled.rect(x, y, w, h, c) is used to draw a rectangular frame. A rectangular frame with a starting coordinate of (x, y), width w , height h , c is the color value.
  • oled.fill_rect(x, y, w, h, c) is used to draw a rectangle of fill color in the same way as rect(). Unlike rect(), only draw a rectangular frame.

Draw arc rectangle:

oled.RoundRect(40, 20, 50, 30, 5, 1)   #Draw an arc rectangle with starting coordinates (40, 25), width 50, height 30, and arc radius 5
oled.show()

Note

oled.RoundRect(x, y, w, h, r, c)is used to draw arc rectangle. A rectangular frame with a starting coordinate of (x, y), width w ， height h , arc radius r and c as color value.

For more OLED display operation and shape drawing, please refer to oled object 。

2.3. Display Image

First of all, we need to process the image into a size 128 * 64, a color depth of 1 or bmp format in black and white mode. You can use Photoshop or other image processing software.

The next step is to use the modulo tool to modulo the picture. There are PCtoLCD, lcd image converter and other module-taking software on the Internet, you can choose according to your preferences. The following is used Img2Lcd tool 。

  • Step 1. Import 128x64, bmp format pictures
  • Step 2. Select parameters, output data type [C language array]、 scan mode [horizontal scan]、grayscale output [monochrome]、width and height [128*64]
  • Step 3. Click Save to automatically generate modulus data.
../../_images/image2lcd.png

Assign the modulus data to the bmp array and display it on the OLED display.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
from mpython import *

#图片bitmap数组
bmp = bytearray([\
0X00,0X00,0X00,0X00,0X03,0XC7,0XFC,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,
0X00,0X00,0X00,0X00,0X1E,0XFF,0XFC,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,
0X00,0X00,0X00,0X31,0X70,0X3F,0XFC,0X00,0X00,0X00,0X03,0XE0,0X00,0X00,0X00,0X00,
0X00,0X00,0X01,0XC2,0XB8,0X1F,0XF8,0X00,0X00,0X00,0X1F,0XF9,0X00,0X00,0X00,0X00,
0X00,0X18,0X00,0XF2,0X7C,0X1F,0XF0,0X00,0X30,0X01,0XFF,0XFF,0XFF,0XE0,0X00,0X00,
0X00,0XFF,0XFF,0XEF,0XCE,0X3F,0X80,0X01,0XFE,0X3F,0XBF,0XFF,0XFF,0XFF,0XE0,0X00,
0X03,0XFF,0XFF,0XFF,0X1E,0X3E,0X1C,0X01,0XFC,0XFF,0XFF,0XFF,0XFF,0XFF,0XFE,0X00,
0X03,0XFF,0XFF,0XF8,0X0C,0X38,0X00,0X07,0XBF,0XFF,0XFF,0XFF,0XFF,0XFF,0XF8,0X00,
0X0F,0XFF,0XFF,0XF0,0X60,0X18,0X00,0X0F,0XBF,0XFF,0XFF,0XFF,0XFF,0XFE,0X70,0X00,
0X0C,0X0F,0XFF,0XE0,0XF8,0X00,0X00,0X07,0X9F,0XFF,0XFF,0XFF,0XFF,0XE0,0X40,0X00,
0X10,0X0F,0XFF,0XF0,0XF8,0X00,0X00,0XC7,0X3F,0XFF,0XFF,0XFF,0XFF,0XC0,0X60,0X00,
0X00,0X0F,0XFF,0XF9,0XFC,0X00,0X01,0X47,0XFF,0XFF,0XFF,0XFF,0XFF,0XE0,0X20,0X00,
0X00,0X0F,0XFF,0XFB,0XFC,0X00,0X01,0X6F,0XFF,0XFF,0XFF,0XFF,0XFF,0XF8,0X00,0X00,
0X00,0X0F,0XFF,0XFF,0XC4,0X00,0X00,0X3F,0XFF,0XFF,0XFF,0XFF,0XFF,0XFC,0X00,0X00,
0X00,0X0F,0XFF,0XFF,0XC6,0X00,0X00,0X7F,0XFF,0XFF,0XFF,0XFF,0XFF,0XFC,0X00,0X00,
0X00,0X0F,0XFF,0XFF,0XE0,0X00,0X00,0X3F,0XF9,0XF3,0XFF,0XFF,0XFF,0XFC,0X00,0X00,
0X00,0X1F,0XFF,0XFF,0X00,0X00,0X01,0XF2,0XF8,0X33,0XFF,0XFF,0XFF,0XF8,0X00,0X00,
0X00,0X3F,0XFF,0XFE,0X00,0X00,0X01,0XE1,0XBF,0XB9,0XFF,0XFF,0XFF,0XF0,0X00,0X00,
0X00,0X3F,0XFF,0XF8,0X00,0X00,0X03,0XC0,0XA7,0XF9,0XFF,0XFF,0XFF,0X10,0X00,0X00,
0X00,0X3F,0XFF,0XF0,0X00,0X00,0X01,0X8C,0X07,0XFD,0XFF,0XFF,0XFF,0XC8,0X00,0X00,
0X00,0X3F,0XFF,0XF0,0X00,0X00,0X00,0XFC,0X00,0XFF,0XFF,0XFF,0XFF,0XC8,0X00,0X00,
0X00,0X1F,0XFF,0XC0,0X00,0X00,0X03,0XFE,0X20,0XFF,0XFF,0XFF,0XFF,0XC0,0X00,0X00,
0X00,0X1F,0XFF,0X80,0X00,0X00,0X03,0XFF,0XFF,0XFF,0XFF,0XFF,0XFF,0XE0,0X00,0X00,
0X00,0X17,0XE0,0X80,0X00,0X00,0X07,0XFF,0XFF,0XFD,0XFF,0XFF,0XFF,0XE0,0X00,0X00,
0X00,0X07,0XC0,0X80,0X00,0X00,0X0F,0XFF,0XFF,0X7C,0X7F,0XFF,0XFF,0XE0,0X00,0X00,
0X00,0X0B,0XC0,0X00,0X00,0X00,0X0F,0XFF,0XFF,0X7F,0X83,0XFF,0XFF,0XD0,0X00,0X00,
0X00,0X01,0XC0,0X40,0X00,0X00,0X1F,0XFF,0XFF,0XBF,0XC3,0XFF,0XFF,0X80,0X00,0X00,
0X00,0X03,0XCC,0X28,0X00,0X00,0X1F,0XFF,0XFF,0X9F,0XC0,0XF8,0XFC,0X00,0X00,0X00,
0X00,0X00,0XF8,0X08,0X00,0X00,0X1F,0XFF,0XFF,0XDF,0X80,0XF0,0X7C,0X08,0X00,0X00,
0X00,0X00,0X1E,0X00,0X00,0X00,0X1F,0XFF,0XFF,0XCE,0X00,0XE0,0X3E,0X08,0X00,0X00,
0X00,0X00,0X0E,0X00,0X00,0X00,0X1F,0XFF,0XFF,0XF8,0X00,0X60,0X1E,0X08,0X00,0X00,
0X00,0X00,0X02,0X10,0X00,0X00,0X1F,0XFF,0XFF,0XF2,0X00,0X60,0X06,0X04,0X00,0X00,
0X00,0X00,0X03,0X3F,0X00,0X00,0X0F,0XFF,0XFF,0XFE,0X00,0X20,0X10,0X06,0X00,0X00,
0X00,0X00,0X00,0X7F,0X80,0X00,0X07,0XFF,0XFF,0XFE,0X00,0X10,0X10,0X02,0X00,0X00,
0X00,0X00,0X00,0X7F,0XF0,0X00,0X03,0XCF,0XFF,0XFC,0X00,0X00,0X08,0X30,0X00,0X00,
0X00,0X00,0X00,0X7F,0XF0,0X00,0X00,0X03,0XFF,0XF8,0X00,0X00,0X18,0X60,0X00,0X00,
0X00,0X00,0X00,0XFF,0XF8,0X00,0X00,0X03,0XFF,0XF0,0X00,0X00,0X18,0XE0,0X00,0X00,
0X00,0X00,0X00,0XFF,0XFE,0X00,0X00,0X03,0XFF,0XE0,0X00,0X00,0X0C,0XE8,0X40,0X00,
0X00,0X00,0X00,0XFF,0XFF,0X80,0X00,0X03,0XFF,0XE0,0X00,0X00,0X0C,0XE8,0X3C,0X00,
0X00,0X00,0X00,0XFF,0XFF,0XE0,0X00,0X01,0XFF,0XC0,0X00,0X00,0X04,0X00,0X0E,0X00,
0X00,0X00,0X00,0XFF,0XFF,0XE0,0X00,0X01,0XFF,0XC0,0X00,0X00,0X01,0XC0,0X0F,0X00,
0X00,0X00,0X00,0X7F,0XFF,0XE0,0X00,0X01,0XFF,0XC0,0X00,0X00,0X00,0X00,0X00,0X00,
0X00,0X00,0X00,0X3F,0XFF,0XC0,0X00,0X01,0XFF,0XE0,0X00,0X00,0X00,0X00,0X40,0X00,
0X00,0X00,0X00,0X3F,0XFF,0XC0,0X00,0X01,0XFF,0XE2,0X00,0X00,0X00,0X00,0XE4,0X00,
0X00,0X00,0X00,0X1F,0XFF,0XC0,0X00,0X01,0XFF,0XE6,0X00,0X00,0X00,0X07,0XE4,0X00,
0X00,0X00,0X00,0X0F,0XFF,0XC0,0X00,0X01,0XFF,0X8C,0X00,0X00,0X00,0X0F,0XFE,0X00,
0X00,0X00,0X00,0X07,0XFF,0X80,0X00,0X01,0XFF,0X0C,0X00,0X00,0X00,0X1F,0XFE,0X00,
0X00,0X00,0X00,0X07,0XFF,0X80,0X00,0X00,0XFF,0X8C,0X00,0X00,0X00,0X7F,0XFF,0X00,
0X00,0X00,0X00,0X07,0XFE,0X00,0X00,0X00,0XFF,0X08,0X00,0X00,0X00,0XFF,0XFF,0X00,
0X00,0X00,0X00,0X07,0XFC,0X00,0X00,0X00,0XFE,0X00,0X00,0X00,0X00,0XFF,0XFF,0X00,
0X00,0X00,0X00,0X07,0XFC,0X00,0X00,0X00,0X7E,0X00,0X00,0X00,0X00,0XFF,0XFF,0X00,
0X00,0X00,0X00,0X07,0XF8,0X00,0X00,0X00,0X7C,0X00,0X00,0X00,0X00,0XFF,0XFF,0X00,
0X00,0X00,0X00,0X07,0XF8,0X00,0X00,0X00,0X78,0X00,0X00,0X00,0X00,0XF1,0XFE,0X00,
0X00,0X00,0X00,0X07,0XE0,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X80,0X7C,0X00,
0X00,0X00,0X00,0X07,0XF0,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X78,0X02,
0X00,0X00,0X00,0X03,0XC0,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X02,
0X00,0X00,0X00,0X03,0X80,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X20,0X08,
0X00,0X00,0X00,0X03,0XC0,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X10,
0X00,0X00,0X00,0X03,0X80,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X40,
0X00,0X00,0X00,0X03,0XC0,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,
0X00,0X00,0X00,0X01,0X80,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,
0X00,0X00,0X00,0X00,0XC0,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,
0X00,0X00,0X00,0X00,0X60,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,
0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,
])

oled.bitmap(0, 0, bmp, 128, 64, 1)
oled.show()         #刷新显示屏
../../_images/earth.png

After assigning the modulus data to the bmp array, draw the picture to the OLED display:

oled.bitmap(0, 0, bmp, 128, 64, 1)
oled.show()

Note

oled.bitmap(x, y, bitmap, w, h, c) can draw bitmap patterns, x 、y are the coordinates x, y of the starting point of the upper left corner, bitmap is the name of the pattern btyearray byte array, w is the width of the pattern, h is the height of the pattern, c is the color value, the pixel is on when 1 and the pixel is off when``0`` .

2.4. Dynamic display

Combined with the display of the above still frames, you can divide the dynamic picture to be displayed into each frame and send it to the OLED display to display it frame by frame！

Different from the above picture using bmp format. This time use pbm (Portable BitMap) format pictures, you can use Photoshop to convert to pbm format.

pbm data format:

P4
#CREATOR：GIMP PNM filter version 1.1
128 64
<data>

The first three lines of the pbm data format are set to label the image. Then the image data. The first line indicates the image format, and the second line is a comment, usually the program used to create it. The third line is the image size。 The latter is the image data we need. Data storage per pixel bit stream, 1 means pixel is on, 0 means pixel is off.

Dynamic display material download

First upload the pre-prepared pbm pictures of each frame to the root directory of the file system of the control panel.

Read the image data stream frame by frame and display it on the OLED display:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
from mpython import *
import framebuf,time


images = []
for n in range(1,7):
    with open('scatman.%s.pbm' % n, 'rb') as f:
        f.readline() # Magic number
        f.readline() # Creator comment
        f.readline() # Dimensions
        data = bytearray(f.read())
    fbuf = framebuf.FrameBuffer(data, 128, 64, framebuf.MONO_HLSB)
    images.append(fbuf)

oled.invert(1)
while True:
    for i in images:
        oled.blit(i, 0, 0)
        oled.show()
        time.sleep(0.1)
../../_images/scatman.gif

IMport mpython and framebuf module:

from mpython import *
import framebuf

Open each frame of picture in binary read-only format:

with open('scatman.%s.pbm' % n, 'rb') as f:
    f.readline()       # Image format
    f.readline()       # explanatory note
    f.readline()       # Image size
    data = bytearray(f.read())
fbuf = framebuf.FrameBuffer(data, 128, 64, framebuf.MONO_HLSB)
images.append(fbuf)     #Assign each frame of data to the list

Use file.read() in the program to read the image data stream frame by frame. Note, the first three lines are not the data we need, use readlines() to discard it. Create a FrameBuffer object for each frame of data stream and store all frame buffers in the images list.

Note

open(file, mode) is used to open a file and return the file object. file is the file name, mode mode to open file, rb Open a file in binary format for read-only, generally used for non-text files such as pictures, etc.

Note

framebuf.FrameBuffer(buffer, width, height, format) can build frame buffer objects, buffer buffer data, width is the picture width，height is the picture height，format is the format of FrameBuffer, That is, the scan mode of data output when the corresponding picture is taken：framebuf.MONO_HLSB is horizontal；framebuf.MONO_VLSB is vertical.

Display the stored frame buffer frame by frame to the OLED display:

oled.blit(i, 0, 0)
oled.show()

Note

oled.blit(fbuf, x, y) use OLED to display picture frames，fbuf as FrameBuffer object, x 、y coordinates x、y of the starting point.