XMOVE3.0 handheld terminal-software introduction (2): Color Screen GUI control library implemented on a 2KB memory Microcontroller

I. Summary

The development of embedded systems is changing with each passing day. Android and ios have already been able to beat the powerful force in the world of Saipan. The interface is one of the most important factors. But have you considered creating a system and writing an interface library? Self-made systems on single chip microcomputer can train programming and architecture design capabilities.

These interface libraries are implemented on the driver for underlying point-and-line drawing, based on my XMOVE motion sensing system. It is basically unrelated to hardware. Supports 320*240 resolution for color screens. Due to the overly complicated development of different resolutions (think about where you need to calculate the layout of each point, which is a big problem for Android and other systems ), therefore, I have not considered other resolutions too well.

I have written an article about menu switching and task implementation. This article describes the GUI library I have implemented on a low-memory embedded system. It took a lot of time to develop this interface, but the number of hardware equipped with these interface libraries and systems was no more than three. That's exactly what we should say: a closed road is difficult to achieve long-term development. However, in an embedded environment, customization and specialization are also normal. Do you have any questions ?!

Although the function is still limited, it cannot be as "beautiful" as the mainstream embedded system: such as gradient, but this is a 2 kb, 8 MHz microcontroller! It cannot be quickly moved at all, or it will become very stuck .... I spent a lot of time optimizing all kinds of images and special effects during my winter vacation in my senior year. Now, if I don't take out many of my work that year, I have to go into the garbage basket of history. Sad.

It has the following features:

• Rich control elements for most scenarios
• Pseudo multi-thread display (single-chip microcomputer does not have multiple threads. Therefore, it is required to update different controls visually at the same time)
• Dynamic Interface (simple sliding and gradient effect)
• Support both black and white screen systems

If you are a member of Alibaba Cloud who develops embedded interfaces, I believe my articles will inspire you.

The following video demonstrates the dynamic effect:

　　XMOVE handheld terminal Demo Video

 

 

Hardware Overview: Self-made handheld motion sensing Terminal

Software Overview: features of handheld terminals

Software introduction (1): menu implementation and task switching of a concise Embedded System

Software introduction (II): Color Screen GUI control library implemented on 2 kb memory Single Chip Microcomputer

Software introduction (III): Tetris implemented on 2 kb memory Single Chip Microcomputer

Software introduction (4): Ultra-Simplified five-game algorithm implemented on a 2 kb memory Single Chip Microcomputer

Software introduction (5): T9 Chinese Input Method Based on 2 kb memory Single Chip Microcomputer

 

Ii. Basic Structure

You can use the following structure to represent the entire control library:

Controls can be combined to display a complex interface, as shown in:

　　

III. Basic Function implementation

Considering that the underlying driver is not universal, I have not provided the interface Implementation of the underlying driver.

The following functions provide functions for some basic GUI function libraries.

/* Function: BoxGUI (unsigned char * title) function: generate a desktop parameter that overwrites the screen on the LCD: No */void BoxGUI (unsigned char * title) // graphic interface window function/* function: TaskBoxGUI_P (x1, y1, x2, y2, u8 * title) function: parameters for generating variable size task Bottom Frame on the LCD: (x1, y1) coordinates in the upper left corner, (X2, Y2) coordinates in the lower right corner, title is the window title */void TaskBoxGUI_P (x1, y1, x2, y2, u8 * title, u8 MoveEN) // graphical interface window function/* function: ShowMountGUI (x, y, float Mount, u8 Range, color, u8 Font) function: display the variable position floating point value parameter on the LCD: (x, y) coordinate value in the upper left corner of the number, mount the floating point number to be displayed, range indicates the length of the number. The Color is displayed from the left. For Font types, see LCD instructions */void ShowMountGUI (x, y, float Mount, u8 Range, color, u8 Font)/* function: void TaskBoxGUI (unsigned char * title) function: Display fixed size and position task Bottom Frame parameters on the LCD: tilte: Display title Return Value: no */void TaskBoxGUI (unsigned char * title)/* function: unsigned char myListGUI (u8 x, u8 y, u8 ** list, u8 mount) function: fixed size display on the LCD, variable position list menu interface parameters: (x, y) to display coordinates, ** list storage list pointer array, mount, the number of lists to be displayed. Note that the returned value cannot exceed the array size. Value 0: indicates that the user is forcibly exited, and 1-mount: returns the selected items of the current user (Note: Starting from 1) */unsigned char myListGUI (u8 x, u8 y, u8 ** list, u8 * title, u8 MaxMount, u8 LRMaxMount, u8 UDMaxMount, u8 OneLRLength, u8 OneUDLength)

 

Iii. display of actual results

1. Dialog Box function:

/* Function: unsigned char MessageGui (unsigned char * title, unsigned char * message, unsigned char Type) function: Display fixed-size non-Type interface parameters on the LCD: * title: the title to be displayed. message: The information to be displayed. Type: display style 0: only definite items are displayed. 1: whether there are two options. 2: unconfirmed return values: 1: Select Yes, 0, or no. If Type = 0 or 2, the return value is 1 */unsigned char MessageGui (unsigned char * title, unsigned char * message, unsigned char Type)

2. List controls

You can select different items by rotating the terminal (requires gyroscope Support)

/* Function: unsigned char ListGUI (unsigned char ** list, unsigned char * title, unsigned char mount) function: Display fixed size and fixed position on the LCD (in the center of the LCD) parameters on the list menu interface: see function declaration return values of myListGUI (): see function declaration of myListGUI () */unsigned char ListGUI (unsigned char ** list, unsigned char * title, unsigned char mount)

3. dynamic curve control

This curve uses the pseudo-multithreading technology developed by myself. Multiple curves can be dynamically displayed. This figure shows the real-time display of the Three-Axis acceleration curve.

/* Function: void CurveDraw (x, y, Wide, Long, unit, Color, u8 * title, float mount, flag) function: graphic function parameters of the LCD display curve control: (x, y) coordinates in the upper left corner of the control to be displayed. Wide indicates the width of the control (upper and lower calculation, pixel), LONG: length (left and right calculation, pixel), Unit: the maximum value to be displayed. COLOR: The COLOR title to be displayed. title: the title to be displayed. float: The floating point value. flag: The position flag to be displayed, when flag = 0, all controls are refreshed. Return Value: 1: 0 is displayed successfully. display failed */u8 CurveDraw)

 

4. Virtual Keyboard Control

My system only provides six solid buttons. To solve the problem of complex keyboard input, I used a virtual full keyboard control. You can change the red box position in the interface by rotating ~ When the red box is moved to the virtual key, click OK to display the screen.

/* Function: u8 VirtualFullKeyBoardInput (x, y, u8 * KeyX, u8 * KeyY, u8 * Key) function: Input sub-function parameters of the virtual keyboard: (x, y) the coordinates in the upper left corner of the Control. KeyX and KeyY indicate the coordinates of X and Y on the current numeric keyboard. The ranges are 0-10, 0-4, and keys are the returned items, for details, see FullKeyBoardData [] array declaration return value: 0: the user jumps out or selects a special function key. 1: The user selects a common character. For details about its usage, see the specific code */u8 VirtualFullKeyBoardInput (2010x, wxy, u8 * KeyX, u8 * KeyY, u8 * Key)

5. Chart controls

The bar chart is displayed. With the quantity and size of menu items, the position of the bar chart is dynamically modified to achieve the best display effect.

/* Function: u8 HistogramGUI (u8 ** List, 2010* Num, u8 num, u8 * title) function: display the bar chart control parameters: List, storing arrays with different titles, num stores an array of values of different items. num indicates the number of items to be displayed. The title Return Value of the title control is 0: two numbers are different. 1: The data is the same, */u8 HistogramGUI (u8 ** List, 1300* Num, u8 num, u8 * title)

6. slide bar Control

You can change the value by moving the slider.

/* Function: u8 SliderGUI (x, y, Length, u8 * title, RangeLow, RangeHigh, u8 step, * Data) function: select the control parameter for the numeric value in the sliding mode: (x, y) coordinates in the upper left corner of the control, length, length of the displayed control (from left to right), RangeLow: the lowest value, RangeHigh: maximum Value: step: data selection step. data: pointer returned value of data storage: 0: control error or user deselected. 1: The user successfully uses the control, data exists in Data */u8 SliderGUI (x, y, Length, u8 * title, RangeLow, RangeHigh, u8 step, * data)

7. Timeline Display Control

/* Function: void clock_GUI (x, y, r, u8 * rdata, u8 TotalFreshEN) function: Clock Control Parameters for LCD display time: (x, y) coordinates in the upper left corner of the control to be displayed. rdata indicates the global variable pointer of the storage time, and r indicates the radius of the circular area. Be sure not to return the value beyond the range allowed by the LCD: No */void clock_GUI (x, y, r, u8 * rdata, u8 TotalFreshEN)

8. Long Integer numeric input control

9. Main Menu Display Control

The system currently supports multiple menu styles. The following figure shows two of them:

/* Function: void DrawIconAndTitle (x, y, u8 Index, u8 PictSize, u8 Type, u8 TitleOrPict) function: subfunction of the main menu interface, used to generate a single parameter: (x, y) coordinates in the upper left corner of the control to be displayed. Index indicates the specific position in the sub-Menu list. PictSize indicates the image size to be displayed. TYPE indicates that the anti-white option 0 indicates that the image is not reversed, and 1 indicates that the image is reversed, titleOrPict control to write or draw, so that the returned value can be faster: No */void DrawIconAndTitle (x, y, u8 Index, u8 PictSize, u8 Type, u8 TitleOrPict)

And the following menu style:

Other controls are omitted because they have already appeared in other related articles.

Iv. Summary

The interface controls displayed in this article are only a small part. other controls include the password input control and the Chinese Input Method control. this is a senior who had a big headache in the heat. He wrote the code library in the next line of the IDE without code prompts. this interface library contains about 3000 lines of code.

　　

If you have any questions, feel free to contact us.