Difference between revisions of "Pico-OLED-2.23"

From Waveshare Wiki
Jump to: navigation, search
m (Text replacement - "default={{#urlget:amazon|default}}" to "default={{#ifeq: {{#urlget:amazon|0}}|{{#urlget:Amazon|0}}| default|}}")
m (Text replacement - "{{#urlget:amazon|default}}=display" to "{{#ifeq: {{#urlget:amazon|0}}|{{#urlget:Amazon|0}}| default|}}=display")
Line 8: Line 8:
 
|category=[[:Category:OLEDs / LCDs|OLEDs / LCDs]], [[:Category:LCD|LCD]]
 
|category=[[:Category:OLEDs / LCDs|OLEDs / LCDs]], [[:Category:LCD|LCD]]
 
|brand=Waveshare
 
|brand=Waveshare
|{{#urlget:amazon|default}}=display
+
|{{#ifeq: {{#urlget:amazon|0}}|{{#urlget:Amazon|0}}| default|}}=display
 
|website_cn=[https://www.waveshare.net/shop/ 官方中文站点]
 
|website_cn=[https://www.waveshare.net/shop/ 官方中文站点]
 
|website_en=[https://www.waveshare.com/pico-oled-2.23.htm Waveshare website]
 
|website_en=[https://www.waveshare.com/pico-oled-2.23.htm Waveshare website]

Revision as of 01:36, 13 May 2022

Pico OLED 2.23
Pico LCD 2.23

2.23inch OLED Display Module for Raspberry Pi Pico, 128x32, SPI/I2C
{{{name2}}}

{{{name3}}}

{{{name4}}}

{{{name5}}}

Overview

Provide Pico C & Python demo.

Features

Item Parameters
Supply Voltage 3.3V/5V
Operating Current 40mA
Controller SSD1305
Communication Interface 4-wire SPI / I2C
Resolution 128 x 32 Pixels
Pixel Size 0.41 × 0.39(mm)
Display Size 55.02 × 13.1(mm)
Outline Dimensions 63.00 x26.00(mm)

Pinout

Pico-OLED-1.3-details-inter.jpg

LCD and the controller

The built-in controller used in this OLED is SSD1305, which has 132 × 64 bit SRAM, supports a maximum 132 × 64 pixels screen, and supports SPI/I2C/8bit 8080 parallel port. The solution of this screen is 128 × 32 pixels, so the internal SRAM is not fully used. This module uses four-wire SPI and I2C interfaces, with good compatibility and high transmission speed.

I2C Communication Protocol

Pico OLED 2.23 Spec02.jpg

  • In I2C communication, a 7-bit slave address + 1-bit read/write bit is sent first, waiting for a response from the device.
  • After the slave device responds, it then sends a control byte, which determines whether the bytes sent later are commands or data, and then waits for the slave device to respond.
  • After the slave device answers again, if a command is sent, only one byte of the command is sent. If data is sent, only one byte can be sent, or multiple bytes of data can be sent in succession, depending on the situation.

SPI Communication Protocol

Pico motor-SPI.jpg

  • As shown above, the data on SDIN is shifted into an 8-bit shift register on the rising edge of each SCLK in the order of MSB before LSB.
  • The D/C# is sampled every 8th clock, and the data in the shift register is written to the Graphics Display Memory (GDDRAM) or Command Register at the same count clock.
  • In serial mode, only write operations are allowed. Write operation procedure in 4-wireSPI mode.

Pico User Guide

Hardware connection

Please take care of the direction when you connect Pico, a USB port is printed to indicate. You can also check the pin of Pico and the OLED board when connecting.
You can connect the display according to the table.

OLED Pico Description
VCC VSYS Power Input
GND GND GND
DIN GP11 MOSI pin of SPI, data transmitted from Master t Slave
CLK GP10 SCK pin of SPI, clock pin
CS GP9 Chip selection of SPI, low active
DC GP8 Data/Command control pin (High:data; Low: command)
RST GP12 Reset pin, low active
SDA GP6 I2C data input
SCL GP7 I2C clock input

Connection (Directly)

Pico-OLED-2.23-details-3.jpg

Connection(with adapter board)

Pico-OLED-2.23-5.jpg

I2C

As the module adopts SPI by default, you must modify the backside resistor when connecting with an I2C device.
Pico OLED 2.23 Guide.png

Setup environment

Please refer to Raspberry Pi's guide: https://www.raspberrypi.org/documentation/pico/getting-started/

Download Demo codes

Open terminal and run the following command:

sudo apt-get install p7zip-full
cd ~
sudo wget  https://files.waveshare.com/upload/3/3d/Pico_OLED_code.7z
7z x Pico_OLED_code.7z -o./Pico_OLED_code
cd ~/Pico_OLED_code
cd c/build/

Run the Demo codes

This guide is based on Raspberry Pi.

C examples

Open a terminal and enter the directory of C codes:

cd ~/Pico_OLED_code/c/

Open main.c and select the corresponding module:

sudo nano main.c 

If the display you use is Pico-OLED-2.23, you need to uncomment the line OLED_2in23_test(). Then press ctrl+c, then press Y and enter to save and exit as follows:

Pico-OLED-2.3-3.png

Create a build folder and add SDK:
For example, if the path of SDK is ../../pico-sdk
Then you should create a build and add the path like these:

#mkdir build
cd build
export PICO_SDK_PATH=../../pico-sdk
#export PICO_SDK_PATH=/home/pi/pico/pico-sdk

Run cmake.. command to generate Makefile file.

cmake ..

Run make command to build.

make -j

When the compilation is complete, the uf2 file will be generated inside the build folder. Press and hold the button on the Pico board, connect the Pico to the USB port of the computer via the micro USB cable, and then release the button. Once connected, the computer will automatically recognize a removable disk (RPI-RP2) and copy the uf2 file to the recognized removable disk (RPI-RP2).


Python Example

1): Press and hold the button on the Pico board, connect the Pico to the USB port of your computer via the micro USB cable, and then release the button.
After connecting, the computer will automatically recognize a removable disk (RPI-RP2)
       
2): Copy the pico_micropython_20210121.uf2 file from the python directory to the recognized removable disk (RPI-RP2)
   
3): Update Thonny IDE
    sudo apt upgrade thonny
       
4): Open Thonny IDE (click on Raspberry logo -> Programming -> Thonny Python IDE)
    Select Tools -> Options... -> Interpreter
    Select MicroPython (Raspberry Pi Pico and ttyACM0 port)
       
5): Open the python/Pico-OLED-2.23/Pico-OLED-2.23(spi).py file in the Thonny IDE
    Then just run the current script (small green triangle)

Codes Analysis

C

Bottom hardware interface

We package the hardware layer for easily porting to the different hardware platforms.
DEV_Config.c(.h) in the directory:...\c\lib\Config

  • Data type:
#define UBYTE   uint8_t
#define UWORD   uint16_t
#define UDOUBLE uint32_t
  • Module initialize and exit:
void DEV_Module_Init(void);
void DEV_Module_Exit(void);
Note:
1.The functions above are used to initialize the display or exit handle.
  • GPIO write/read:
void 	DEV_Digital_Write(UWORD Pin, UBYTE Value);
UBYTE 	DEV_Digital_Read(UWORD Pin);
  • SPI transmit data
void DEV_SPI_WriteByte(UBYTE Value);

Application functions

We provide basic GUI functions for testing, like draw point, line, string and so on. The GUI function can be found in directory:..\c\lib\GUI\GUI_Paint.c(.h).
LCD PICO GUI 1.png
The fonts used can be found in directory: RaspberryPi\c\lib\Fonts
LCD rpi Font.png

  • Create a new image, you can set the image name, width, height, rotate angle and color.
void Paint_NewImage(UWORD *image, UWORD Width, UWORD Height, UWORD Rotate, UWORD Color, UWORD Depth)
Parameter:
 	image : Name of the image buffer, this is a pointer;
 	Width : Width of the image;
 	Height: Height of the image;
 	Rotate: Rotate angle of the Image;
 	Color : The initial color of the image;
 	Depth : Depth of the color
  • Select image buffer: You can create multiple image buffers at the same time and select the certain one and drawing by this function.
void Paint_SelectImage(UBYTE *image)
Parameter:
 	image: The name of the image buffer, this is a pointer;
  • Rotate image: You need to set the rotate angle of the image, this function should be used after Paint_SelectImage(). The angle can 0, 90, 180, 270
void Paint_SetRotate(UWORD Rotate)
Parameter:
 	Rotate: Rotate angle of the image, the parameter can be ROTATE_0, ROTATE_90, ROTATE_180, ROTATE_270.
【Note】Afer rotating, the place of the first pixel is different as below
Pico LCD Rotate.jpg
  • Image mirror: This function is used to set the image mirror.
void Paint_SetMirroring(UBYTE mirror)
Parameter:
 	mirror: Mirror type if the image, the parameter can be MIRROR_NONE、MIRROR_HORIZONTAL、MIRROR_VERTICAL、MIRROR_ORIGIN.
  • Set the position and color of pixels: This is the basic function of GUI, it is used to set the position and color of a pixel in the buffer.
void Paint_SetPixel(UWORD Xpoint, UWORD Ypoint, UWORD Color)
Parameter:
 	Xpoint: The X-axis position of the point in the image buffer
 	Ypoint: The Y-axis position of the point in the image buffer
 	Color : The color of the point
  • Color of the image: To set the color of the image, this function always be used to clear the display.
void Paint_Clear(UWORD Color)
Parameter:
 	Color: The color of the image
  • Color of the windows: This function is used to set the color of windows, it is always used for updating partial areas like displaying a clock.
void Paint_ClearWindows(UWORD Xstart, UWORD Ystart, UWORD Xend, UWORD Yend, UWORD Color)
Parameter:
 	Xstart: X-axis position of the start point.
 	Ystart: Y-axis position of the start point.
 	Xend: X-axis position of the end point.
 	Yend: Y-axis position of the end point
 	Color: Color of the windows.
  • Draw point: Draw a point at the position (Xpoint, Ypoint) of the image buffer, you can configure the color, size, and style.
void Paint_DrawPoint(UWORD Xpoint, UWORD Ypoint, UWORD Color, DOT_PIXEL Dot_Pixel, DOT_STYLE Dot_Style)
Parameter:
 	Xpoint: X-axis position of the point.
 	Ypoint: Y-axis position of the point
 	Color: Color of the point
 	Dot_Pixel: Size of the point, 8 sizes are available.
 	 	 typedef enum {
 	 	 	 DOT_PIXEL_1X1  = 1,	// 1 x 1
 	 	 	 DOT_PIXEL_2X2  , 		// 2 X 2
 	 	 	 DOT_PIXEL_3X3  , 	 	// 3 X 3
 	 	 	 DOT_PIXEL_4X4  , 	 	// 4 X 4
 	 	 	 DOT_PIXEL_5X5  , 		// 5 X 5
 	 	 	 DOT_PIXEL_6X6  , 		// 6 X 6
 	 	 	 DOT_PIXEL_7X7  , 		// 7 X 7
 	 	 	 DOT_PIXEL_8X8  , 		// 8 X 8
 	 	} DOT_PIXEL;
 	Dot_Style: Style of the point, it define the extednded mode of the point.
 	 	typedef enum {
 	 	   DOT_FILL_AROUND  = 1,		
 	 	   DOT_FILL_RIGHTUP,
 	 	} DOT_STYLE;
  • Draw line: Draw a line from (Xstart, Ystart) to (Xend, Yend) in the image buffer, you can configure the color, width, and style.
void Paint_DrawLine(UWORD Xstart, UWORD Ystart, UWORD Xend, UWORD Yend, UWORD Color, LINE_STYLE Line_Style , LINE_STYLE Line_Style)
Parameter:
 	Xstart: Xstart of the line
 	Ystart: Ystart of the line
 	Xend: Xend of the line
 	Yend: Yend of the line
 	Color: Color of the line
 	Line_width: Width of the line, 8 sizes are available.
 	 	typedef enum {
 	 	 	 DOT_PIXEL_1X1  = 1,	// 1 x 1
 	 	 	 DOT_PIXEL_2X2  , 		// 2 X 2
 	 	 	 DOT_PIXEL_3X3  ,		// 3 X 3
 	 	 	 DOT_PIXEL_4X4  ,		// 4 X 4
 	 	 	 DOT_PIXEL_5X5  , 		// 5 X 5
 	 	 	 DOT_PIXEL_6X6  , 		// 6 X 6
 	 	 	 DOT_PIXEL_7X7  , 		// 7 X 7
 	 	 	 DOT_PIXEL_8X8  , 		// 8 X 8
 	 	} DOT_PIXEL;
 	 Line_Style: Style of the line, Solid or Dotted.
 	 	typedef enum {
 	 	 	 LINE_STYLE_SOLID = 0,
 	 	 	 LINE_STYLE_DOTTED,
 	 	} LINE_STYLE;
  • Draw a rectangle: Draw a rectangle from (Xstart, Ystart) to (Xend, Yend), you can configure the color, width, and style.
void Paint_DrawRectangle(UWORD Xstart, UWORD Ystart, UWORD Xend, UWORD Yend, UWORD Color, DOT_PIXEL Line_width, DRAW_FILL Draw_Fill)
Parameter:
 	Xstart: Xstart of the rectangle.
 	Ystart: Ystart of the rectangle.
 	Xend: Xend of the rectangle.
 	Yend: Yend of the rectangle.
 	Color: Color of the rectangle
 	Line_width: The width of the edges. 8 sizes are available.
 	 	typedef enum {
 	 	 	 DOT_PIXEL_1X1  = 1,	// 1 x 1
 	 	 	 DOT_PIXEL_2X2  , 		// 2 X 2
 	 	 	 DOT_PIXEL_3X3  ,		// 3 X 3
 	 	 	 DOT_PIXEL_4X4  ,		// 4 X 4
 	 	 	 DOT_PIXEL_5X5  , 		// 5 X 5
 	 	 	 DOT_PIXEL_6X6  , 		// 6 X 6
 	 	 	 DOT_PIXEL_7X7  , 		// 7 X 7
 	 	 	 DOT_PIXEL_8X8  , 		// 8 X 8
 	 	} DOT_PIXEL;
 	Draw_Fill: Style of the rectangle, empty or filled.
 	 	typedef enum {
 	 	 	 DRAW_FILL_EMPTY = 0,
 	 	 	 DRAW_FILL_FULL,
 	 	} DRAW_FILL;
  • Draw circle: Draw a circle in the image buffer, using (X_Center Y_Center) as the center and Radius as the radius. You can configure the color, width of the line, and the style of the circle.
void Paint_DrawCircle(UWORD X_Center, UWORD Y_Center, UWORD Radius, UWORD Color, DOT_PIXEL Line_width, DRAW_FILL Draw_Fill)
Parameter:
 	X_Center: X-axis of center
 	Y_Center: Y-axis of center
 	Radius: radius of circle
 	Color:  Color of the circle
 	Line_width: The width of arc, 8 sizes are available.
 	 	typedef enum {
 	 	 	 DOT_PIXEL_1X1  = 1,	// 1 x 1
 	 	 	 DOT_PIXEL_2X2  , 		// 2 X 2
 	 	 	 DOT_PIXEL_3X3  ,		// 3 X 3
 	 	 	 DOT_PIXEL_4X4  ,		// 4 X 4
 	 	 	 DOT_PIXEL_5X5  , 		// 5 X 5
 	 	 	 DOT_PIXEL_6X6  , 		// 6 X 6
 	 	 	 DOT_PIXEL_7X7  , 		// 7 X 7
 	 	 	 DOT_PIXEL_8X8  , 		// 8 X 8
 	 	} DOT_PIXEL;
 	Draw_Fill: Style of the circle: empty or filled.
 	 	typedef enum {
 	 	 	 DRAW_FILL_EMPTY = 0,
 	 	 	 DRAW_FILL_FULL,
 	 	} DRAW_FILL;
  • Show Ascii character: Show a character in (Xstart, Ystart) position, you can configure the font, foreground and background.
void Paint_DrawChar(UWORD Xstart, UWORD Ystart, const char Ascii_Char, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background)
Parameter:
 	Xstart: Xstart of the character
 	Ystart: Ystart of the character
 	Ascii_Char: Ascii char
 	Font: five fonts are available:
 	 	font8:5*8
 	 	font12:7*12
 	 	font16:11*16
 	 	font20:14*20
 	 	font24:17*24
 	Color_Foreground: foreground color
 	Color_Background: background color
  • Draw string: Draw string at (Xstart Ystart) , you can configure the fonts, foreground, and the background
void Paint_DrawString_EN(UWORD Xstart, UWORD Ystart, const char * pString, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background)
Parameter:
 	Xstart: Xstart of the string
 	Ystart: Ystart of the string
 	pString:String
 	Font: five fonts are available:
 	 	font8:5*8
 	 	font12:7*12
 	 	font16:11*16
 	 	font20:14*20
 	 	font24:17*24的
 	Color_Foreground: foreground color
 	Color_Background: background color
  • Draw Chinese string: Draw Chinese string at (Xstart Ystart) of the image buffer. You can configure fonts (GB2312), foreground, and background.
void Paint_DrawString_CN(UWORD Xstart, UWORD Ystart, const char * pString, cFONT* font, UWORD Color_Foreground, UWORD Color_Background)
Parameter:
 	Xstart: Xstart of string
 	Ystart: Ystart of string
 	pString: string
 	Font: GB2312 fonts, two fonts are available                                                                                 :
 	 	font12CN:ascii 11*21,Chinese 16*21
 	 	font24CN:ascii 24*41,Chinese 32*41
 	Color_Foreground: Foreground color
 	Color_Background: Background color
  • Draw number: Draw numbers at (Xstart Ystart) of the image buffer. You can select font, foreground, and background.
void Paint_DrawNum(UWORD Xpoint, UWORD Ypoint, int32_t Nummber, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background)
Parameter:
 	Xstart: Xstart of numbers
 	Ystart: Ystart of numbers
 	Nummber: numbers displayed. It supports int type and 2147483647 is the maximum supported
 	Font: Ascii fonts, five fonts are available:
 	 	font8:5*8
 	 	font12:7*12
 	 	font16:11*16
 	 	font20:14*20
 	 	font24:17*24
 	Color_Foreground: Foregroud color
 	Color_Background: Background color
  • Draw float numbers: Draw float number at (Xstart Ystart) of image buffer, you can configure fonts, foreground, and background.
void Paint_DrawFloatNum(UWORD Xpoint, UWORD Ypoint, double Number,  UBYTE Decimal_Point,	sFONT* Font,    UWORD Color_Foreground, UWORD  Color_Background);
Parameter:
 	Xstart: Xstart of the number
 	Ystart: Ystart of the number
 	Nummber: The float number. Double type.
        Decimal_Point: The decimal number 
 	Font: Ascii fonts, five fonts are available.:
 	 	font8:5*8
 	 	font12:7*12
 	 	font16:11*16
 	 	font20:14*20
 	 	font24:17*24
 	Color_Foreground: Foreground
 	Color_Background: Background
  • Display time: Display time at (Xstart Ystart) of the image buffer, you can configure fonts, foreground, and background.
void Paint_DrawTime(UWORD Xstart, UWORD Ystart, PAINT_TIME *pTime, sFONT* Font, UWORD Color_Background, UWORD Color_Foreground)
Parameter:
 	Xstart: Xstart of time
 	Ystart: Ystart of time
 	pTime: Structure of time
 	Font: Ascii font, five fonts are available
 	 	font8:5*8
 	 	font12:7*12
 	 	font16:11*16
 	 	font20:14*20
 	 	font24:17*24
 	Color_Foreground: Foreground
 	Color_Background: Background

Support

If you require technical support, please go to the Support page and open a ticket.