Project 6：Electronic Photo Album

In the last lesson, we mastered the LCD display principle and the general method for text display on the UNIHIKER K10 screen. In this lesson, we will continue to use the screen display function to make a small electronic photo album and complete the project of image switching and sticker display.

Project Objectives

Knowledge Objectives

1.Learn what screen refresh rate.
2.Learn the difference between displaying cached images and TF card images .
3.Display images on the UNIHIKER K10 screen.

Practical Objective

Make an electronic photo album with UNIHIKER K10：Scroll through photos and overlay decorative stickers, switching them using the A/B buttons.

Materials List

Preparations

Hardware

Connect the UNIHIKER K10 to the computer using a USB Cable.

Note: See Knowledge Hub for the introduction to MicroSD Memory Card.

Software

Open Mind+ v2, switch to“Upload Mode”, connect the UNIHIKER K10 as shown in the figure below, and load the UNIHIKER K10 library.

Hands-on Practice

Next, we will use the screen display function of UNIHIKER K10 to make an electronic photo album in three steps.
Task 1: Image Display
First, we will display cached images and TF card images on the screen respectively.
Task 2: Sticker Display
Then, we will add stickers to the displayed images and learn the differences between cached images and TF card images.
Task 3: Sticker Switching
Last, we will use Buttons A and B to switch stickers up and down respectively.

Task 1: Image Display

Code

There are two image display methods on UNIHIKER K10: cached image display and TF card image display.
Method 1: Cached Image Display

To read cached image data, use the “cache local image at X()Y()” under the “Screen”of “UNIHIKER K10”, as shown below:

You can select the cached image to display and adjust its size in settings icon; 
X and Y can be used to adjust the image position (coordinates correspond to the image’s top-left corner), as shown below.

The complete program code is shown below:

Method 2: TF Card Image Display

When displaying TF card image, store the desired images in the microSD card in advance. Specific methods are as follows:

Next comes the program coding:
To read microSD card image data, use “cache TF card image “image.png” at X()Y()” block under“Screen”of “UNIHIKER K10”, as shown below.

Unlike cached image display, image size cannot be adjusted here—resize images before storage. Other logic is basically the same as cached images.
The complete program code is shown below:

Run the Code

Click the“Upload”button, wait for the upload to complete, and you will see the corresponding image on the screen.

Have a Try

Building on the above learning, try using “wait ( ) seconds” in “Control” to achieve scrolling display of album images. Reference code is as follows:

Code Review 

Category	Blocks	Function
		Display the local picture at the specified location (coordinates), you can set the display size of the picture on the k10 display by adjusting the width and height of the image size.
		Display pictures in TF memory card at specified location (coordinates), support to display png, jpg and bmp format pictures.

Task 2: Sticker Display

Code 

Similar to Task 1, there are two ways to add stickers on the image. The overall programming logic is the same as in Task 1; just add sticker display after showing the image.
Likewise, to display stickers using TF card images, store the stickers in the TF card in advance. The specific files to save are as follows:

The display code for a single sticker is shown below:
(1)Cached Sticker Display                    （2）TF Card Sticker Display

The corresponding screen display results are as follows:

Thus, we understand the necessity of learning TF card image display: cached images do not support transparent backgrounds, and only TF cards can be used to load such images.
Note: See the Knowledge Hub for differences between cached image display and TF card image display.

Run the Code

Click the“Upload”button.After the upload completes,you can observe the image content displayed on the screen.

Task 3: Sticker Switching

Code 

In this task, we will learn to use buttons to switch stickers up and down based on scrolling display of cached images.
First, save the stickers to be switched into the TF card. The specific files are as follows:

Name sticker images uniformly as "frame +‘number’+ .png" to facilitate subsequent programming.
Buttons and sticker display are two relatively independent modules. To quickly switch between stickers, define a variable “sticker”—its value determines which sticker to display on the screen.
Then use buttons A/B to control the variable value (see figure below for logic). The variable then controls the displayed image name in the main program to switch stickers.

In the main program's “forever”, use "join(apple)(banana)" block from "operator" for the file name in the sticker display block (see below for location).

The code related to the corresponding sticker display is shown below:

Note 1: Since TF card sticker names consist of three parts, "join(apple)(banana)" block needs to be used twice.
Note 2: In the sticker serial number display section, force-convert the variable sticker from string type to integer type.
The complete program code is shown below:

Run the Code

Click the“Upload”button.After the upload completes, the screen images switch periodically; press buttons A/B to switch stickers up and down.

Code Review

Category	Blocks	Function
		An interrupt is triggered when the on-board key A/B is pressed/released.
		Concatenate separated strings into one continuous string.
		Convert string to integer or decimal.

Knowledge Base

Next, let's learn and summarize the hardware knowledge used in this lesson.

Screen Refresh Rate

Screen refresh rate is the number of times the screen updates images per second, measured in Hz. It directly determines dynamic smoothness—the higher the Hz, the smoother the motion.
In daily scenarios, the human eye generally deems 60Hz sufficient to eliminate obvious stutters. When exceeding 75Hz, most people can clearly perceive smoother motion. The two UNIHIKER K10 blocks related to screen refresh rate are both in the “Screen”.
1、show cached content
Display the cached contents on the screen.When using display-related commands (e.g., text, shapes, pictures), this block has to be added to display the content.
2、clear screan
Immediately clears pictures, text, lines, and graphics displayed on the screen.Then use "cache ...image..." to show desired content for screen refresh.

TF card

 
TF card (or microSD card) is a portable removable storage device, mainly used to expand storage space, store various data for electronic devices, and is compatible with phones, tablets, cameras, etc.—a common option for supplementary built-in storage.

The TF card of UNIHIKER K10 can store data like images, music and recordings (see related blocks in figure), meeting storage expansion needs for projects such as electronic photo albums and music players. This project uses it to store images and stickers for making an electronic photo album.

After learning about TF cards, we will next discuss the differences between cached images and TF card images in display, based on the program behavior differences observed in Task 2.
 

Differences Between Cached Images And TF Card Images In Display
 

Additionally, cached images do not support transparent background stickers—transparent areas turn black after adding. This is because cached image data is stored directly in memory. To prevent raw image data from exceeding memory limits and meeting display requirements, the program performs preprocessing like compression and conversion, resulting in black transparent areas.

Challenge Task

In the above exercise, image switching runs continuously. Try using buttons A/B to control image and sticker switching separately, so as to get the desired fixed image-sticker combinations.
Tip: Set two variables to control image and sticker switching separately.
Reference program as follows: