Digital Watch Display - MicroPython

by tonygo2 in Circuits > Microcontrollers

4489 Views, 11 Favorites, 0 Comments

Digital Watch Display - MicroPython

Watch-6.jpg

As soon as my Waveshare RP2040 1.28" IPS LCD Board with Accelerometer & Gyroscope board arrived I thought of gauges and watch/clock faces. Here is my project to display the time on this terrific display.

Supplies

DSCN4505.JPG

This is all you need:

  1. Waveshare RP2040 1.28" IPS LCD Board with Accelerometer & Gyroscope
  2. Thonny Editor installed on your computer
  3. USB A - C cable

(I got my supplies from thepihut.com in UK but worldwide there are other suppliers.)

Here It Is Working

MVI 9396

If you have the display you can download the program and try it out.

This is running flat out and needs to be slowed down to show the correct time. I've left adding a suitable Real Time Clock to the user as there are so many to choose from. (You could just add a delay in the last line for a quick, dirty and not very accurate version. At the end I add delay based on time.time() which is a little better.)

The method I have used is to draw the blue dial and minute/second ticks just once at the start of the program. I then clear the screen inside the ticks by drawing a black circle. I then build up the rest of the display by adding first, the hour numbers and my name, the digital time, and then the hands: hours, minutes and seconds.

I developed the graphics commands over the past year. They include full colour control, 65K colours, routines for circles, rings, triangles, and an extended text system which can be displayed in three sizes and different alignments.

Libraries and Setup

w1-32.jpg

Here we import the libraries needed for the display and the graphic routines. We define the pins used for the display and show the start of the display driver. Waveshare provide their display drivers as Micropython code, very useful, and the start is shown here.

Initialise the Display Driver

w411-421.jpg

Here we have the colour control function which takes an RGB888 colour and converts it to RGB565 for the display. We also initialise the display.

Graphics Procedures

w521-568.jpg

These are the graphics procedures for circles, triangles etc. and the beginning of the extended text character definitions.

Text Routines

w816-858.jpg

Here is the end of the character definitions and the text procedures to write on the display.

Project Code

w850-898.jpg
Watch-1.jpg
Watch-2.jpg

The procedure to calculate the end point of a hand is defined here. It uses the math library and trigonometry with sine and cosine values.

The steps in drawing the dial are as follow:

  1. Draw large blue circle to fill the screen
  2. Draw radial white lines from the centre for the minute ticks
  3. Draw a black circle in the centre to leave a blue ring with 60 white ticks
  4. Draw radial hour ticks
  5. Draw a smaller black circle to leave the 12 hour ticks showing

Main Loop - Part # 1

w898-945.jpg
Watch-3.jpg

Here we:

  1. Increment the seconds counter and update minutes and hours as necessary.
  2. Calculate the end point of the three hands.
  3. Write the hour numbers on the screen
  4. Write the digital time on the screen

Main Loop - Part # 2

w946-end.jpg
Watch-5.jpg
Watch-6.jpg

In this last section we draw the hands, making use of the filled triangle procedure for the hour and minute hands and just a simple white line for the second hand.

At the end of the loop we update the display to show the changes.

At no point do we clear the whole screen.

It runs pretty quickly, much less than a second to pass through the loop.

Normal Speed

insert.jpg

If we change the initial time values, just before the loop to a few seconds ahead of the current time, and save the current time plus a few seconds using time.time() we can use the RP2040's built in time clock to try to keep our display on time.

At the bottom of the loop we add a delay loop which waits until the the next second arrives. This is held in the variable future. We increment future ready for the next loop.

This is not terribly accurate but gives a more realistic speed.

Conclusion

Watch-6.jpg

All the routines, in MicroPython, are included and you are free to make use of them as you wish. (Please give me an acknowledgement in your code if you publish it.) This system was developed for the range of Waveshare LCD displays but can easily be converted for displays from other manufacturers such as Pimoroni or Adafruit. (It is not as sophisticated as displayio or Pimoroni graphics but I think it is easier to use when you are starting out with coloured displays. You just need to change the screen driver, use framebuf and adjust the pixel(x,y,colour) instruction if you use other displays.)

I hope you have this Instructable interesting and useful.

I would appreciate some feedback and comments about other projects you would like to see.