Project 7: Poster Drawing Board

Last lesson we learned to display cached and TF card images on the screen. This lesson we’ll continue learning screen-related knowledge, master drawing graphics and adding text on it to make a billboard.

Project Objectives

Knowledge Objectives

1. Learn the types of shapes supported on the UNIHIKER K10.
2. Display different shapes using built-in drawing functions.

Practical Objective

Draw static and dynamic billboards with text at the screen top, draw high-rises and the sun at the bottom. Final effect as below:

Materials List

Preparations

Hardware

Connect the UNIHIKER K10 to the computer with a USB cable.

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'll use UNIHIKER K10 to draw and display the target graphics in two steps.
Task 1: Static Drawing of Advertising Artwork
In this task, we'll program to draw a static advertising artwork on the screen.
Task 2: Dynamic Drawing of Billboard 
In this task, we'll modify the billboard to dynamic drawing based on Task 1.

Task 1: Static Drawing of Advertising Artwork

Code

Graphically, the advertising artwork has three parts: billboard, high-rises and sun. We’ll draw them one by one next.
1.Draw billboard

Set proper line/border width before drawing. The block is in the "Screen" category of UNIHIKER K10 library: “set line widt (1)” block. As shown below:

When drawing shapes, use the block “cache draw rectangle (filled) at X(40) Y(40) W(80) H(120) border (red) fill (blue)” in the "Screen" category of UNIHIKER K10 library. As shown below:

Start coordinates refer to the rectangle's top-left corner; adjust them with the learned screen coordinate knowledge. Also, we can adjust the background color with“set background color (white)”block in the "Screen" category of UNIHIKER K10 library. As shown below:

Reference code below:

Note: Must add“show cached content”block at last, or program won't run properly.
Next, add text to billboard using the 11th block in UNIHIKER K10 library’s "Screen" category: “cache text (“UNIHIKER”) at X:(0) Y:(0) font (24*24) color (blue) wrap (50) auto-clear (yes)”.
Reference code below:

Note: Set "auto-clear" to "no" in cache display text, otherwise it clears all content after coordinates to background color, including existing text, lines, and images. As shown below:

2.Draw high-rises

High-rises are divided into external outline (drawn with lines) and internal doors and windows (drawn with rectangles). External outline drawing uses the“cache draw line from X1() Y1() to X2() Y2() color(blue)”block in the UNIHIKER K10 "Screen" library. As shown below:

The key to drawing is finding corresponding coordinates. Sketch on paper to confirm them before coding for convenience and fewer errors, taking a high-rise's outline and top-left window as an example.
Corresponding code and coordinates below:

3.Draw sun

The sun's center is drawn with “cache draw circle (filled) at X(120) Y(160) r(80) border (red) background fill (blue)”block in the UNIHIKER K10 "Screen" module. As shown below:

For the sun's center, fill with red; draw the surrounding "rays" in yellow. Take my billboard drawing as an example: the red center circle has center (190,125) and radius r=18; outer rays are 20 long, with a 2-unit line distance from the ray's inner end to the circle.
After confirming all point coordinates, take drawing the center and two vertical rays as an example.
Corresponding code and coordinates below:

4.Structured code

Putting all above code in main function is redundant. Next,we will learn program encapsulation to simplify main program. Program encapsulation uses“Make a Block”under "My Blocks" directory. As shown below:

Specific usage as follows:

After function definition, the following interface appears:

① The block shown appears in Scripts Area; we need to add encapsulated function content below it.
② Corresponding block appears in Blocks Palette, usable in main program.
Note: For structured code, functions and their usage, see the Knowledge Base.
Following the above method, we define three blocks "billboard", "building" and "sun" to encapsulate the billboard, building and sun respectively. The final encapsulation results are as follows:

Complete read code is shown below:

Run the Code

Click the“Upload”button, wait for the upload to complete,then the screen will draw the corresponding static graphics.

Have a Try

With the given coordinates of high-rises and the sun above, try to draw and display the complete advertising artwork.
Tip: Just add "Draw Rectangle" or "Draw Line" blocks to the packaged function module.

Code Review

Category	Blocks	Function
		Sets the width of the lines and borders in pixels.If this block is not called, the default line width/border width is 1
		Draws a line segment of the specified color according to the start point coordinates (X1, Y1) and end point coordinates (X2, Y2).
		Draws a circle with the specified radius based on the center coordinates (X, Y). Also, you can set whether the circle is solid (filled/unfilled), border and fill color.
		Draws a rectangle starting at the upper-left corner of the rectangle at the specified position (coordinates). You can set the width and height of the rectangle, the border color, and the fill color.
		Sets the background color of the screen. If not set, the background color of the screen defaults to white.

Task 2: Dynamic Drawing of Billboard

Code

Based on Task 1, we will make the billboard dynamic with color switching to better fit advertising features.

As shown, take line drawing order AB→BC→CD→DA as an example. For AB, vertical coordinate is constant, horizontal coordinate changes from 23 to 23+190. Reflect this with a variable (±5 per loop), and use “repeat until()” under the Control Module (as shown below) to control the variable's range.

Note: For block functions of the Control module, see the Knowledge Base.
Corresponding code as follows:

Per the above logic and method, try dynamically drawing the billboard's other three sides.
To achieve continuous dynamic drawing of the billboard, after a single drawing is done, we will cover the previously drawn content with a rectangle and redraw the billboard.
The complete sample program is as follows:

Run the Code

Click the“Upload”button, wait for the upload to complete,,then the screen will draw the dynamic billboard.

Code Review

Category	Blocks	Function
		Repeat internal execution until the specified condition is met.
		Check if two contents are equal.

Knowledge Base

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

Types of Shape Display for UNIHIKER K10

UNIHIKER K10 shape display consists of four core types in total, all implemented through dedicated blocks under the "Screen" category, and other complex graphics can be composed of these four basic shapes.
The corresponding positions of the shape display blocks are as follows:

Structured Code, Functions and Their Usage

1.What is Structured Code:

The core of structured code is to "package" code segments with relatively independent functions through "function encapsulation" (modularization). The main code connects the logical flow of the entire project by calling these functions, thereby enhancing the code’s readability, reusability and maintainability.

2、Advantages of Structured Code:

3、Structured Code for the UNIHIKER K10:
Code structuring for the UNIHIKER K10 mainly involves custom modules in the function library. After clicking to define a function, it can then be called in the main code.

Several points to note when defining a function:

Introduction to Control Blocks

In Task 2, we used the control block "repeat until ()". Next, we will summarize the control blocks we have learned and their differences.
 

Blocks	Function	Characteristics	Applicable Scenarios
	No time/condition limits; run internal program in a continuous loop	No stop condition; permanent loop, for continuous operation	Continuous operation of UNIHIKER K10 main code, real-time monitoring functions
	Pause code for 1 second; resume automatically when time is up	Fixed 1s pause, no trigger condition; only for time delay	Step-by-step operations that need fixed intervals
	Pause program; resume only when set conditions are met	Resume on condition met; variable pause time, depends on condition fulfillment	Scenarios that need to wait for a specific state
	Run internal code in a fixed loop 10 times; end automatically and resume follow-up code	Fixed loop count, runs for specified times; no extra stop conditions	Repeated operations with a fixed number of times
	Run corresponding code when set conditions are met; skip the module if not	Execute only when condition is met; no action if not, no "else" branch	Operations triggered by a single condition
	Run one set of code if condition is met; run another preset set if not	Has two branches (met/not met); covers logic for both scenarios	Scenarios requiring two-way logic processing
	Loop internal code; stop only when set conditions are met	Stop on condition met; variable loop count, depends on condition fulfillment	Dynamic drawing tasks, operations dependent on state changes

Challenge Task

On the screen, besides drawing graphics, you can also do visualization—convert data into line, bar and pie charts, etc. This clearly shows data trends or proportions for wider application. Please convert the given data into a bar chart as a reference.

Tip: Draw axes, map data to them by proportion, then draw with straight lines.
Sample program below: