Travel Signpost | UNIHIKER Tutorial: Learn Python with Graphical Programming for Beginners 02

Meimei Mar 28.2023

0 2537 Easy

Capturing a perfect moment at an internet-famous site during your travels can be made even more special with an artistic signpost, which can create a romantic and captivating atmosphere in your photos and videos. However, not all locations have interesting signposts readily available.

The UNIHIKER as a single board computer, can accomplish everything we desire. So in this lesson, we will use UNIHIKER to create a travel signpost. With just a power source, it brings you unique travel experiences.

Goal

Display the travel signpost on the UNIHIKER screen.

Get to Know

1. The sequential structure in programs

2. How to align coordinates

3. How to display rectangles and numbers in digital font on the UNIHIKER screen.

HARDWARE LIST

1 UNIHIKER

Link

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

Link

Software: Mind+

Download address: https://www.mindplus.cc

Hands-on Practice

Next, let's work together to display a travel signpost on the UNIHIKER screen. We will divide this task into two parts: displaying the outline of the signpost and displaying the text.

Task 1: Displaying the outline of the signpost

In this task, we'll start by learning how to display rectangles on the UNIHIKER screen. Then we will utilize the UNIHIKER screen coordinates and appropriate alignment settings to determine the coordinates of each part of the signpost outline, thus completing the display of the signpost outline.

Task 2: Displaying texts on the signpost

After task 1 is completed, we'll proceed to learn how to display digital font numbers on the UNIHIKER screen, and then display texts on the signpost.

Task 1: Displaying signpost outline

1. Hardware Connection

Connect UNIHIKER to the computer via a USB cable.

2. Software Preparation

Open Mind+, select the Python mode, click on "Extensions" to load UNIHIKER, then connect to it, and wait for the interface below to appear. Save the current project and you can start to write the project program.

3. Write a Program

(1) Analyze the signpost outline structure

To program UNIHIKER to display a signpost outline on its screen, here we split the signpost into four parts: an orange rounded rectangle, a white solid rectangle, a hollow rectangle, and a black solid rectangle.

Since the split parts are all rectangles, we can look for the command containing the keyword "rectangle" in the "Screen Display" under the UNIHIKER category in the command area, then drag out the corresponding rectangle command blocks: Object name displays rectangle at X0Y0 width 100 height 200 line width 1 border color blue, Object name shows filled rectangle at X0Y0 width 100 height 200 fill color blue (×2), Object name shows rounded fill rectangle at X0Y0 width 100 height 200 corner radius 5 fill color blue.

Note: There are many commands in the "Screen Display" under the UNIHIKER category, and sometimes it is difficult to find what you're looking for. So, Mind+ provides a quick command search tool located at the top of the command area. Please refer to the image below to learn how to use it.

When you find the blocks, place them under the preset code Python main program start in the order shown in the figure below.

(2) Set the size and coordinates of the signpost outline

Based on the codes above, now we need to set the width, height, and coordinates of each rectangle according to the position where you want to put the signpost on the screen.

Note: By default, the X and Y coordinates represent the top left corner in rectangles.

To ensure that the signpost appears centered on the UNIHIKER screen (240x320), its outline size needs to be set accordingly. We can set the overall size of the signpost to be slightly smaller than the screen size, for example, set its width to 210 pixels and height to 280. And the width and height of each rectangle can be determined based on its position relative to one another in the signpost. Here we provide an example of how to set the size of the signpost for reference, as shown below. Please note that the actual height of the rounded rectangle is slightly larger than what is displayed on the screen, as its lower part is obscured by the white rectangle.

After the signpost size has been determined, we can calculate the coordinates of each rectangle based on the outline size, rectangle width and height. Let's take the orange rounded rectangle as an example, and see how to determine its coordinates (x,y).

Then fill in the details of the orange rounded rectangle display command based on the calculation results.

Similarly, you can calculate the coordinates for the white solid rectangle, the hollow rectangle, and the black solid rectangle. It should be noted that the width, height, and coordinates of the white solid rectangle are the same as those of the black hollow rectangle. The codes are shown in the figure below:

4. Run the program

Click Run and observe the display effect on the UNIHIKER screen (as shown below).

Task 2: Display texts on the signpost

1. Write a Program

The outline of the signpost has been displayed in the last task. Next, we'll set the coordinates of the text to be displayed based on the position of the rectangles in the outline. You can disconnect the UNIHIKER and run Python code to adjust the text coordinates in the pop-up window.

(1) Display white text

We'll display the white text in the upper part of the signpost with a font size of 10. To put the text "I'm waiting for you on DF planet" inside the orange rectangle, which means it appears at the lower right part of point A (15, 20), we need to set the x-coordinate of the text to be greater than 15,and the y-coordinate greater than 20.

Move the y-coordinate down by 10 pixels, i.e., set it to 30, and try adjusting the x-coordinate to find the appropriate value. The result is shown in the figure below.

The last one is the most appropriate coordinates of the white text, (22, 30).

(2) Display the black text

Similarly, we can determine the y-coordinate of the black text inside the white rectangle. Its y-coordinate is still 10 greater than that of point B (15, 60), which means the y-coordinate should be set to 70. But there is a special number that needs to be displayed.

The black text to be displayed is "Unihiker Stop 2". We divide the text into two parts: "Unihiker Stop" and "2". Set the font size for the first part to 10, and determine the appropriate size for the second part based on the space it occupies. The space between the two parts can be adjusted in the pop-up window that appears after running Python code (refer to the figure below to complete coordinate settings).

It should be noted that the number "2" is displayed by the block: The object name shows the imitation digital tube font "1234" in X0Y0 font size 20 color blue. Change to the corresponding content when using it.

At last, we display the two words "north" and "south" using a smaller font size and calculate the coordinates in a similar way. The complete program for the project is shown below:

2. Run the Program

Step 1: Connect to UNIHIKER

Step 2: Click Run

Step 3: View the result

You can see the signpost displayed on the UNIHIKER screen.

Knowledge Base

1. Sequential Structure

In Lessons 1 and 2, we designed our program step by step in the order of the content to be displayed. This kind of program structure written in a sequential order is called a sequential structure. It is the simplest program structure where the code is executed from top to bottom, one after another. For example, in this lesson the program flowchart can be described as follows:

2. Command Learning

In this lesson, we mainly use the rectangle display command and imitation digital tube display command. Now let’s get to know these commands in detail.

Challenge

1. You have already known how to display rectangles. How about creating a tunnel effect on the UNIHIKER screen by displaying a constantly expanding square using the "wait 1 seconds" block and the rectangle display blocks?