Emotion Cards | UNIHIKER Tutorial: Learn Python with Graphical Programming for Beginners 04
Emotional highs and lows can be part of the typical human experience—we can all go through emotional shifts during different periods in our lives. You may want to be alone when feeling down, but yearn to share your thoughts when feeling fired up. In this lesson, we are going to make emotion cards with UNIHIKER to show our current emotions.
Goal
Change the content of emotion cards using the button on the UNIHIKER screen.
Click the button icon"change expressions" to change the expression and display the corresponding caption text.
Click the button "OK", then the two buttons disappear, and the emotion card is generated.
Get to Know
1. The knowledge of callback functions in programs
2. The reference point of the UNIHIKER
3. How to remove objects from the UNIHIKER screen
4. How to display screen buttons and circles on the UNIHIKER screen
Software: Mind+
Download address: https://www.mindplus.cc
Hands-on Practice
In this lesson, we will use screen buttons to change the content of emotion cards and generate the final card. To accomplish this, we will divide the project into two tasks: displaying the initial emotion card interface and changing expressions.
Task 1: Display the initial emotion card
Here we will learn how to display dynamic expressions and circles, how to use the reference point of UNIHIKER, and then complete the display of the initial emotion card.
Task 2: Change expressions
Then, we will learn how to operate the button icon on the UNIHIKER screen, how to change and remove objects, and then change expressions and generate the final emotion card through button implementation.
Task 1: Display the emotion card
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
At first, the UNIHIKER needs to display an initial emotion card on the screen, which features a circular frame, dynamic expression, and text. Let’s do it one by one.
(1) Display a circular frame
The frame is an orange circle. The command for circle display is in "Screen Display" under the "UNIHIKER" category in the command area. You can search for commands containing the keyword "circle", drag out the command Object name shows a circle at X120 Y100 radius 50 line width 1 border color blue, and set the object name, line width, and color. Then place the command under the preset code Python main program start.
Note: The x and y coordinates of the circle represent the center of the circle.
(2) Add dynamic expressions
In the previous lesson, we learned that dynamic expressions are displayed by switching between multiple images. However, the UNIHIKER provides the command Object name shows built-in dynamic expression Smile at X0Y0 interval 0.2 seconds with available 9 built-in dynamic expressions, which allows us to add expressions more easily. You can search for the keyword "dynamic expression" and drag out the corresponding command.
After that, we need to put the expression in the frame properly by setting its coordinates and size.
When setting the position of the expression, it is important to ensure that the reference point of the expression is the same as the center of the circular frame. Here we can set the center point of the expression as its reference point, also the coordinate point representing the position of the image.
The block for doing that is The reference point of the update object name is Center. You can search for commands containing the keyword "reference point", drag out the block and put it under the expression display block, and modify the code accordingly.
Note: For more details about reference points, please refer to the "Knowledge Base."
To set the size of the expression, you can use the block The number parameter of the update object name is you learned in the previous lesson to change its width or height. The complete reference code is shown below:
4. Run the program
Click Run and the UNIHIKER screen will display the dynamic expression and its frame (as shown below).
5. Have a Try
You have learned the command for setting the reference point of an object. A piece of text can be treated as a whole object. Now, please try using the method of modifying the reference point to align the x-coordinate of the "emotion cards" text with the circular expression frame.
Task 2: Change expressions
1. Write a Program
The initial emotion card has been displayed in the first task. Now we will learn how to set up screen buttons.
(1) Add screen buttons
The command for adding buttons on the UNIHIKER screen is Object name add button "button" at X0Y0 width 40 height 30 click callback function button_click1. You can search for the keyword "add button" and drag out the corresponding command.
Next, you can set the object name, displayed text, position, and callback function name for the "change expressions" and "OK" buttons according to the remaining space on the UNIHIKER screen.
(2) Set functions of buttons
The function of a button is implemented through the "callback function" in the button display command. And it requires the command When the click callback function button_click1 is triggered to achieve the button function. You can search for the keyword "callback function", drag out the corresponding command and change the callback function name, which should be consistent with that in the previously-added button block. Let's take the "change expressions" button as an example:
Note: In the program, the UNIHIKER's add button command and callback function command must appear in pairs. Additionally, the callback function is generally used to implement the function triggered by a certain operation. For more information on "callback functions", please refer to the "Knowledge Base".
After modifying the corresponding callback function command, you can write the code for the button function below it, step by step. Next, we will learn how to implement the function of the "change expressions" and "OK" buttons.
(a) Function of "change expressions" button
The "change expressions" button is used to change expressions. And the command to be used is Update expression object expression source is. You can search for the keyword "expression source" to find the corresponding command, modify the "expression object" and "expression source", and place it under the callback function command of the corresponding button.
You can also add caption text for the corresponding expression by using The text content parameter of the update object name is "Hello" command and modifying the text content.
(b) Function of "OK" button
Clicking the "OK" button will make all buttons disappear and generate the final emotion card. To make the buttons disappear, you need to use the Remove Object command. Search for the command containing the keyword "remove object" and specify the object to be removed in the command. For example, the object name of the "change expressions" button is set as "button1", so we can modify the command to Remove Object button1 and place it under the callback function command of the corresponding button.
You can remove the "OK" button in the same way. The reference codes for displaying "change expressions" and "OK" buttons and implementing their functions are shown below:
2. Run the Program
Check the connection of the UNIHIKER board, click Run, and you can see the initial emotion card along with two buttons on the screen.
Click the "change expressions" button, and the expression changes; Click the "OK" button, all the button icons disappear, and an emotion card is made.
Knowledge Base
1. Callback Function
A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. Just like the expression changes triggered by button clicks in this lesson. When using a callback function, the command for triggering it and the corresponding callback function command must appear in pairs. Usually, the callback function command appears first in a particular program. During code execution, the operation code triggers the execution of the callback function. Once the execution is completed, the operation code proceeds to the next line of code. The whole code execution process is shown below:
2. Reference Point of the UNIHIKER
Most of the elements displayed on the UNIHIKER are shapes with areas. If we want to describe their position using coordinates, we need to determine which position point on the shape the coordinates represent, and this point is called the "reference point". The reference point of the text, buttons, images and other elements displayed on the UNIHIKER screen can be modified, but the reference point of shapes such as rectangles and circles cannot be modified.
The UNIHIKER sets a total of 9 reference points, namely up, down, left, right, center, upper-left, lower-left, upper-right, and lower-right. Thus, to display an image at the center of the UNIHIKER screen, represented by a red dot with coordinates (120, 160) in the figure below, we have 9 possible options.
3. Command Learning
In this lesson, we mainly use the commands for button display, callback function, dynamic expression, and removing objects. Now let's get to know them in detail.
Challenge
We have already implemented the emotion card project, but there are not enough available expressions. Try enriching the project by:
(1) Adding other buttons to enable switching between more dynamic expressions.
(2) Adding a "reset" button that, when clicked, resets the card to its initial state.
Emotion Cards.rar Table of Contents for this Tutorial Series：
03 Journey to the West Stage Play
12 Vital Capacity Data Visualization
