WS Pico 1.3" IPS LCD 240x240 Display Workout

by tonygo2 in Circuits > Microcontrollers

6237 Views, 9 Favorites, 0 Comments

WS Pico 1.3" IPS LCD 240x240 Display Workout

Still.jpg

In this tutorial I'm going to try out a new and useful little display from WaveShare with the following features:

  • Compatible with Raspberry Pi Pico
  • 1.3" IPS LCD
  • 240x240 resolution
  • 65K RGB colours
  • 4x user-programmable buttons
  • 1x Joystick - 5 buttons
  • Communicates via SPI

Specifications

  • Operating Voltage: 2.6-5.5V
  • Communication Interface: 4-wire SPI
  • Display Panel: IPS
  • Driver: ST7789
  • Resolution: 240x240 PixelsDisplay
  • Size: 23.40mm x 23.40mm
  • Pixel Size: 0.0975mm x 0.0975mmDimensions: 52mm x 26.5mm

You can plug the pins on the Pico directly into the sockets on the back of the display or use a Pico Decker or similar expander to access the unused Pico GPIO pins.

Supplies

USB cable

Thonny editor installed on your computer

Raspberry Pi Pico with pins soldered on.

Documentation and Driver

ws Pinout.jpg

WaveShare have provided excellent documentation and a MicroPython driver for the screen.

You can find the documentation here: www.waveshare.com/wiki/Pico-LCD-1.3

Looking at the pinout we find that the display leaves plenty of free GPIO pins for user projects: 0, 1 ,4, 5 ,6, 7, 14, 22, 26, 27, 28. These include I2C pins for connecting sensors/actuators and the 3 ADC pins for voltages/potentiometers.

The resources Tab provides access to a demonstration program in MicroPython. I downloaded it, unzipped it to access the contents and found MicroPython and C examples. I stuck with the MP, copied the code to Thonny, plugged in the display and Pico and tried it out.

I was pleased to find that it worked and allowed the user to press all the buttons and move the joystick to make squares on the screen change from white to red.

A quick look at the code showed that all the switches on the joystick and buttons had pull-ups so would have zero value when pressed. I noticed a few typos and incorrect labels so corrected them.

The colour system used is RGB565 meaning 5 bits for Red and Blue and 6 Bits for Green so I added my colour(r,g,b) routine to provide translation of RGB 3 byte values to 2 byte values used by the board.

The graphics routines for fills, lines, pixels, rectangles and text are provided by the framebuf library. This does not have circle routines, so I included my own.

I always like to test the edges and corner pixels of a new display as these throws up any problems with a driver.

I also moved the button square slightly to the left away from the frame to improve the balance.

The test program is available for download here:

Downloads

The Code - Part 1

ws1-45.jpg
WaveShare Pico 1.3" IPS LCD Display Demo - 240x240 pixels

This shows the importation of the necessary library routines. Math is needed for the circle routine, utime for delays and framebuf for the screen.

The GPIO pins used for the display are defined and the start of the WS supplied driver is shown. The driver is pretty long, work perfectly and very difficult to follow. Just copy, paste and use it!

4 colours are defined: red, green blue and white as hexadecimal 2 byte values - difficult to understand. (I've explained how the colour() routine works in a previous Instructable.)

The Code - Part 2

ws155-199.jpg

This shows the last few lines of the screen driver, the colour(R,G,B) and ring(cx,cy,r,cc) routines.

The start of the main program sets to brightness level to mid level and clears the display to a dark grey using my colour(0 routine.

The Code - Part 3

ws200-243.jpg

Here we first set up the button and joystick switches with internal pull-ups.

The next section draws a red frame round the edge pixels of the display and puts a white pixel in each corner. The text is then written to the screen just once.

The variable running is set to True to control the main loop, which will terminate if running is re-set to False.

The main loop looks at the value of each of the 7 switches in turn. If pressed, showing a value of zero, the corresponding square on the display is turned RED and the switch value printed in the REPL.

If the switch is not pressed the corresponding square is set to WHITE.

The Code - Part 4

ws244-285.jpg

This section checks more of the switches.

The Code - Part 5

ws286-end.jpg

Here the final switch is tested and then we look to see if switches A and Y are pressed together, the condition to terminate the looping. If so, running is set to False and we drop out of the loop.

We then start the 'tidy-up' sequence. A series of concentric rings are drawn in yellow and 'Halted' is displayed for 3 seconds before the screen is cleared to black and the execution stops.

The main problem with this screen is the very small size of the text characters provided by the built in font in framebuf and the tiny pixel size of only 0.0975mm x 0.0975mm. What we really need is a larger size of text to make things easier to read.

Change the Font

Variable text sizes on a WaveShare Display
Fonts Code.jpg

Les Wright published a solution to the very small font problem on the Pimoroni Forum for the Pimoroni Display. It was written in pure MicroPython and is easy to follow. I have modified it to work on this WaveShare display and added code for an addition size - 3. You can find a link to the forum at the top of the code. I suggest that you take a look at the discussion on the forum and at the suggestion from Steve Borg, which was followed.

As you can see from the video the size 1 version is even smaller than the framebuf font but sizes 2 and 3 are very useful.

I've provided the essential code to produce the text in the video and the full code as a download as the font definitions and routines are pretty long.

The True and False can be replaced with 1 and 0 to speed up typing. I'm not too keen on the slow, terminal like effect and will probably set both the final parameters to zero, to speed things up, and add my own LCD.show() where needed.

Now that I can produce easily readable text it is time to move onto a full project the give the display a real workout.

Menu Project Controlled by the Joystick

Menu driven workout for WS 240x240 display

Here you can view the finished project and look at the full code.

The program is pretty long, over 600 lines of code, and well commented. It contains the data and routines of the font system and the the 7-segment system, described in a previous Instructable. Each of the menu items have their own sections. Much of it should be pretty easy to follow. I provide images and comments on the more interesting bits.

A choice from the menu is high-lighted in blue by pushing the joystick UP and DOWN and then actioned by pressing the joystick central button straight down. The selection runs and then returns to the menu for further selections until HALT is picked.

I suggest you view the video, download the code and open it in Thonny.

Downloads

The Menu

Menu code.jpg

The top part displays the menu. The current selected item is shown in BLUE and the other items in YELLOW.

Putting this amount of text on the screen takes a considerable amount of processing and provides some 'de-bounce time' when reading the switches. We only look at the UP, DOWN and CTRL switches at this time. the variable running is set to False which ends the menu loop when Halt is selected.

Finishing Off

Finishing off.jpg

We drop out of the menu loop to this section. It displays the HALTED screen in a wide yellow circle and then shuts down the screen.

The Bar Graph

Bar code.jpg

The horizonal bar graph is controlled by the LEFT and RIGHT switches on the joystick. Button Y is used to terminate the action and return to the menu. Notice that the colour of the bar changes from BLUE to RED as the value is increased. The loop is controlled by the active variable.

7 Segment Section

7seg code.jpg

This section calls on a data table and seg() procedure saved earlier in the program. It demonstrates a simple and compact method of getting large numbers on a graphical display.

Lines and Circles

LandC code.jpg

This quite basic section demonstrates the high resolution of the display. It may be small but there are plenty of pixels.

Many Calculations

maths.jpg

Drawing Sine/Cosine curves and Circles require many calculations. The Pico and WS display managed the task pretty quickly. The Cosine drawing only updates the screen at the end while the Sine is updated after each pixel.

The sharp eyed may have noticed that my display at has 'stuck pixel' in the lower right quadrant of the screen. (It is always lit - even after a black screen fill.) I've not had that happen before but It may be because the pixels on this display much smaller than those on my other screens. (My supplier, ThePiHut, are send a free replacement - thank you.)

I hope you will give this project a try. The resources (Pico, screen and USB cable) are all very reasonably priced and can be used for a variety of other projects.

I hope you have enjoyed this tutorial and have found it useful. I'm happy to receive comments and questions.