Interactive Art Museum | UNIHIKER Tutorial: Learn Python with Graphical Programming for Beginners 07

Meimei Apr 07.2023

0 1928 Medium

Along the River During the Qingming Festival is a world-famous realistic painting scroll that captures the bustling scenes of the capital of the Northern Song Dynasty and its beautiful natural scenery. The painting is 528.7cm long and 24.8cm wide. In this lesson, we will display this masterpiece on the UNIHIKER screen and creates interactive ways for you to enjoy this artwork.

Goal

Display the original image and its thumbnail on the UNIHIKER screen. You can explore the original image in detail by moving it up, down, left, and right. And the thumbnail provides a current position indicator for the image. Also, you can give it likes by tapping the Like button on the screen.

Get to Know

1. How to use the arithmetic operators "+, -, /"

2. How to move the image continuously

3. How to display the QR code on the UNIHIKER screen

HARDWARE LIST

1 UNIHIKER

Link

1 Type-C&Micro 2-in-1 USB Cable

Link

Software: Mind+

Download address: https://mindplus.cc/

Hands-on Practice

To interact with the painting Along the River During the Qingming Festival, we need to first design an interactive interface that allows users to explore the image in detail by moving the cursor, view the thumbnail for easy navigation, and give likes to the painting. This project can be divided into the following three parts:

Task 1: Display the homepage

First, we'll make a homepage to guide people to enter the interface of the Along the River During the Qingming Festival.

Task 2: Move the image

Then, add a function that allows us to use the screen cursor to move the painting up, down, left, and right. But due to the painting's large size, it may be difficult to know the current position within the scroll, a thumbnail with a positioning box is added to help us quickly locate the position.

Task 3: Set up a like button

In task 3, we'll set an interactive button at the bottom of the UNIHIKER screen. Press the button, then a large thumb-up icon shows up on the screen.

Task 1: Display the homepage

1. Hardware Connection

Connect UNIHIKER to the computer via a USB cable.

2. Software Preparation

Open Mind+, and complete the software preparation according to the figure below.

3. Write a Program

Before writing the program, let's first analyze the functions required for this task. This task can be roughly divided into three parts: display text, display the QR code, and set up an enter button.

(1) Display text

There will be three different lines of text on the homepage, and each line is a new text object.

(2) Display the QR code

How to display a QR code on the screen? There are two methods: 1. Save a QR code image and display it as an image. 2. Use the The object name shows the QR code content at X Y side length command. The specific usage is as follows:

Run the program above to see if the The object name shows the QR code content at X Y side length command can generate a QR code for the text content Along the River During the Qingming Festival and display it on the screen.

(3) Set up an enter button

Add a button with a width of 200 and a height of 30 at the coordinates (20, 270) on the screen. The text "Click the button to enter" should be displayed on the button.

4. Run the Program

Click on Run and observe the display effect on the UNIHIKER screen after running the program above successfully (as shown below).

5. Have a Try

When you scan the QR code displayed on the homepage with WeChat, Ins, or Facebook, the text "Along the River During the Qingming Festival" appears on your screen.

Next, you can try improving the program function to display a detailed introduction to the Along the River During the Qingming Festival painting (the introduction can be sourced from the relevant Wikipedia page) after scanning the QR code. The interface is shown in the figure:

Tip: Replace the displayed QR code content with the Wikipedia URL for Along the River During the Qingming Festival.

Wikipedia URL:

https://en.wikipedia.org/wiki/Along_the_River_During_the_Qingming_Festivall

Task 2: Move the image

1. Write a Program

We have displayed a simple homepage in the last task. Next, we want to enter the painting’s interface by pressing the enter button. The objects required for the new page are shown in the figure below.

(1) Display the original image

Drag the "Along the River During the Qingming Festival" image into the file in the project.

Use the Object name shows image at X0Y0 command to display the image at the position (0, 0) on the screen.

(2) Display the thumbnail, thumbnail box, and positioning box

The width of the original image is 1833 and the height is 500. So how can we scale down the image by a factor of 10 and display it on the upper-left corner of the screen? To do that, we can use The number parameter of the update object name is command and set the height to 50.

To distinguish the thumbnail image from the background original image, we can draw a rectangular box around the thumbnail. After the original image with a size of 1833*500 is scaled down by a factor of 10, its size becomes 183.3*50. So we need a rectangular box with a width of 183.3 and a height of 50.

The positioning box on the thumbnail indicates the position of the currently displayed interface on the original image. As the size of the thumbnail and the original image is in a ratio of 1:10, the positioning box size should also be in a ratio of 1:10 to that of the UNIHIKER screen, which has a size of 240*320. Therefore, the size of the positioning box is 24*32.

(3) Move the image left and right

To determine whether a visitor wants to view the left or right part of the image, we can use the When a mouse move event is received, return coordinates XY to get the mouse cursor's x-coordinate, and then use an if-then-else statement to determine which side of the screen the cursor click is on. If x >= 160, the cursor is on the right side; if x

After that, how can we move the image on the screen? We can make it move to the left or right by changing its z-coordinate on the screen, as the way shown below:

The coordinates of the original image are (0,0). To change its x-coordinate continuously, we can create a variable img_x.

(4) Move the positioning box

We have successfully achieved the left and right movement of the original image, but the positioning box won’t move with it. To solve the issue, we can use The number parameter of the update object name is command to update the x-coordinate of the positioning box. The positioning box is the screen size scaled down by a factor of 10, so when the image on the screen moves by img_x, the box should move on the thumbnail by img_x / -10 (The positioning box moves in the opposite direction of the original image. For instance, when the original image moves to the left, the right part of the image shows on the display, so the positioning box should go to the right).

The program example is as follows:

(5) Switch between pages

After running the program above, we can move the image to the left and right, and the positioning box will also move along with it on the thumbnail. However, the programs for tasks 1 and 2 are run separately, which means there is currently no connection between the homepage and the original image. So, we need to integrate them to enable seamless switching between the two pages when the button on the homepage is clicked. The complete program is as follows.

Note: All objects on all pages must be created below the block Python main program start. Objects not required for the first page must be hidden by setting their x-coordinate to 240, which puts them out of the screen area. When we enter the second page, we just need to delete the objects in the first one if they are not required.

2. Run the Program

Click Run to run the program, and we'll enter the homepage, then click the button at the bottom to enter the image movement page. On this page, we can click on the left or right part of the screen to move the image to the left and right, and the positioning box will move along with the image.

3. Have a Try

Can you add a function to move the image up and down based on the program above? Then you can move the image up, down, left, and right. Meanwhile, the positioning box should move along with it.

Tip: Create a variable img_y, and you can move the image up and down by changing its value.

Task 3: Set up a like button

1. Write a Program

Before getting started, let's analyze what functions we need to implement in this task. We need to add a Like button first, then if the button is pressed, a thumb-up image appears and moves upwards from where the Like button stays at.

(1) Set objects as invisible under the Python main program start

The program in this task should be added to the program in Task 2. We need to set the Like button and thump-up image as invisible under the Python main program start block.

Note: The thump-up image needs to be loaded into the project from the image resources file first.

(2) Display the button object on the interface

Click the "Click the button to enter" on the homepage, then the like button appears at position (100, 280) on the second page. To do that, we need to update the number parameter x of the Like button to 100.

(3) Move the thump-up image upwards

To move the thump-up image upwards, we will again use the command The number parameter y of the update object name is. And we create a new variable like_y to move the thump-up image upwards when the like button is pressed. Since these are all learned before, we won't go into too much detail here. The full program is shown below:

2. Run the Program

Click Run, and the homepage will be displayed on the UNIHIKER screen. You can enter the image movement interface by clicking on the button there. Then you can click on different positions on the screen to view the whole painting in detail. If you come across something that piques your interest, tap on the Like button on the screen to give it a like.

Knowledge Base

1. Arithmetic operators

Arithmetic operators are operators used for mathematical operations. In Mind+, arithmetic operators mainly include + (addition), - (subtraction), * (multiplication), and / (division). For example, in the expression 3+2, the operands are 3 and 2, the arithmetic operator is "+", and the result returned is the result of 3+2, which is 5.

The arithmetic operator "+" adds two values. For example, if the value of the variable img_x is 10, the result returned by adding 1 to it is 11.

The arithmetic operator "-" subtracts two values. For example, if the value of the variable img_x is 10, the result returned by subtracting 1 from it is 9.

The arithmetic operator "*" multiplies two values. For example, if the value of the variable img_x is 10, the result returned by multiplying it by 2 is 20.

The arithmetic operator "/" divides two values. For example, if the value of the variable img_x is 10, the result returned by dividing it by -10 is -1.

In a program, an arithmetic operator takes two operands and the returned result of the operation outcome. The operands can be constants, variables, or expressions, and arithmetic rules are consistent with those in mathematics.

2. Moving Images Continuously

By continuously changing the value of the variable img_x, we can move the image left or right on the screen. You may wonder why? Let's analyze it.

(1) We display the image at the position (0,0) on the screen at first, as shown in the figure below:

(2) Then we create a variable img_x as the x-coordinate of the image. Changing the value of img_x will change the x-coordinate of the image.

(3) To move the image one unit to the left, we can subtract 1 from img_x, then the coordinate of the image becomes (img_x-1, 0).

(4) To move the image to the left continuously, we just need to continuously subtract 1 from img_x, which requires the assignment statement.

An assignment statement assigns an expression result to a variable, in this case, we assign the result of img_x-1 to img_x. For example, when img_x is 0, img_x-1=-1, which is then assigned to img_x. After the calculation, img_x is -1.

The next time the statement is executed, img_x-1 becomes -1-1, which is -2, and the result will be assigned to img_x again. The img_x is decreased by 1 for each execution, and the image can move continuously to the left.

To move the image to the right, we can change to use img_x+1. Similarly, we can move the image up and down by creating a variable img_y to change the y-coordinate of the image.

3. Command Learning

Challenge

Currently, we can give likes to the paintings that we enjoy. However, we still can’t see how many likes a painting has received. To address this, we can utilize a variable to count the number of likes and display this count on the painting page, allowing users to see the popularity of the painting.

Tip: Count the likes. When the Like button is pressed once, the variable for count increases by 1.