# 6.6 Draw

![](https://2132722362-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhmieditorp-manual%2F-M2grOgd14NEtTnRlj3O%2F-M2grbBkUJJ8AhcZdofd%2F0.png?generation=1584521967995918\&alt=media)

it provides function of drawing graphics, setting text, displaying pictures, this part contains Text, Line, Polygon, Cycle, Arc, Rectangle, Broken Line, Linear Scale, Arc scale, Table.

## 6.6.1 Date

**Introduction**

Date object displays local system date on the HMI screen

**Description**

![](https://2132722362-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0u7fewQOmu9vIPyLEl%2F-M4MpesoIpTBCMxvGDG3%2F-M4Mpw4nWa1wB7eyrwL6%2Fimage.png?alt=media\&token=082376a4-6755-4326-aa13-5f145d466eaa)

**1) Display**

**Open:** It locals to \[Shape] to select object background picture;

**Default:** Click it to reset object background;

**No Shape:** It sets transparent background for this object;

**Font:** It locals to \[Font library] to select font for text in object;

**2) Text color**

It sets color for text in object;

**3) Color**

Valid when select SVG picture from \[Shape], user can modify SVG color according to requirements;

**4) Data format**

It sets object display date or week, and format, detailed please refer to below table.

| **Classification** | **Properties**                                                   | **Display style**                                                                                   |
| ------------------ | ---------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
| Format             | Show date                                                        | <p>YYYY/MM/DD: year/month/day</p><p>MM/DD/YYYY: month/day/year</p><p>DD/MM/YYYY: day/month/year</p> |
| Show week          | <p>Chinese 1</p><p>English 1</p><p>Chinese 2</p><p>English 2</p> |                                                                                                     |

## 6.6.2 Time

**Introduction**

Date object displays local system time on the HMI screen

**Description**

![](https://2132722362-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhmieditorp-manual%2F-M2grOgd14NEtTnRlj3O%2F-M2grbBmdWkj07huvt2j%2F2.png?generation=1584521967997305\&alt=media)

**1) Display**

**Open:** It locals to \[Shape] to select object background picture;

**Default:** Click it to reset object background;

**No Shape:** It sets transparent background for this object;

**Font:** It locals to \[Font library] to select font for text in object;

**2) Text color**

It sets color for text in object;

**3) Color**

Valid when select SVG picture from \[Shape], user can modify SVG color according to requirements;

## 6.6.3 Text

**Introduction**

It adds text to HMI screen, and a object can be displayed in 8 languages (set in "All Languages") with a special address setting.

**Description**

![](https://2132722362-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0u7fewQOmu9vIPyLEl%2F-M4MpesoIpTBCMxvGDG3%2F-M4MqAdTypnJGnEnY1ux%2Fimage.png?alt=media\&token=750670d9-0539-47b5-ab20-78bf38fc8736)

**1) Current state**

It used to switch the object states, but \[Text] object only has one state, so this function is invalid.

**2) All language**

All object can support text in 8 languages.

**3) From text library**

If user already setting text in \[Text library], user can use text from \[Text library] directly.

**4) Windows**

It displays three languages content and provides text display setting access

**5) Text color**

It sets color for text in object;

**6) Text background**

It sets object background; it only supports color;

## 6.6.4 Table

**Introduction**

It is displayed in a table format in the HMI screen to meet the display needs of user.

**Description**

![](https://2132722362-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhmieditorp-manual%2F-M2grOgd14NEtTnRlj3O%2F-M2grbBomuSmxIceTQC5%2F4.png?generation=1584521968008536\&alt=media)

**1) General**

**Rows:** It sets rows for table;

**Columns:** It sets columns for table;

**Table line width:** It sets table line width, the larger the value, the thicker the line;

**Frame line width:** It sets table frame line width, the larger the value, the thicker the line;

**Border:** It sets table line color, including table line and frame line;

**Transparence:** It sets the transparency of the object background;

**Fill style:** There are two options for it, one is display background, and the other is no background;

**Background:** Valid when select display background in \[Fill style];

**2) View**

It is for preview object;

## 6.6.5 Line

**Introduction**

It is displayed in line format in the HMI screen to meet the display needs of user.

**Description**

![](https://2132722362-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhmieditorp-manual%2F-M2grOgd14NEtTnRlj3O%2F-M2grbBpg3uV636BUrl4%2F5.png?generation=1584521968018338\&alt=media)

**1) Display settings**

**Line:** It sets line color;

**Line type:** It sets line type; it provides 9 types for user;

**Transparence:** It sets the transparency of the object background;

**2) Line width control**

In basic display settings, the line width can't be changed, but user can change width by address.

Read the numerical value of address to control the width of line. Display range of numerical value: 1-10.

**3) Coordinate control**

Dynamically set the position coordinate between two points in line. Set four addresses respectively corresponding to the starting point and end point coordinate. If the numerical value of coordinate is over interface, the object will not be displayed.

**4) Color control**

Dynamically set the color of the line. The values of the color RGB are controlled by three addresses, and the value range from 0 to 255.

**5) View**

It is for preview object;

## 6.6.6 Polygon

**Introduction**

It is displayed in polygon format in the HMI screen to meet the display needs of user.

Right click to close polygon and then complete the creation procedure. Select the polygon, then click its point position to change its vertex coordinate after it is created.

**Description**

![](https://2132722362-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhmieditorp-manual%2F-M2grOgd14NEtTnRlj3O%2F-M2grbBqVpag3Gsq2H3Z%2F6.png?generation=1584521968015112\&alt=media)

**1) Display settings**

**Border color:** It sets border line color;

**Border type:** It sets border line type;

**Border width:** It sets border line width

**Transparence:** It sets the transparency of the object background;

**Coordinate editing:** It changes coordinate for all points in this object, as below shows;

![](https://2132722362-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhmieditorp-manual%2F-M2grOgd14NEtTnRlj3O%2F-M2grbBr7Mzj1a8Fbl51%2F7.png?generation=1584521968006512\&alt=media)

**Filling pattern:** It can't be modified now;

**Background:** It sets background color of object;

**2) Transparence control**

Read the numerical value of address, control the transparency; value range: 0-100.

**3) Color control**

Dynamically set the color of background. The values of the color RGB are controlled by three addresses, and the value range from 0 to 255.

**4) View**

It is for preview object;

## 6.6.7 Cycle/ Ellipse

**Introduction**

It is displayed as cycle in HMI screen to meet the display needs of user.

**Description**

![](https://2132722362-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhmieditorp-manual%2F-M2grOgd14NEtTnRlj3O%2F-M2grbBsP9T18vTFAP8u%2F8.png?generation=1584521968024817\&alt=media)

**1) Display settings**

**Border:** It sets border line color;

**Frame width:** It sets border line type;

**Frame type:** It sets border line width

**Pattern:** It sets background type, there are four types.

**Background:** It sets background color of object, invalid when select \[No fill] in \[Pattern]

**Transparence:** It sets the transparency of the object background;

**2) Transparence control**

Read the numerical value of address, control the transparency; value range: 0-100.

**3) Cycle**

Check if for circle; uncheck it for ellipse.

**4) Color control**

Dynamically set the color of background. The values of the color RGB are controlled by three addresses, and the value range from 0 to 255.

**5) Move Control**

Dynamically set the position coordinate and size of circle/ellipse when HMI is running.

**X axis:** The length value moved along the X axis comes from the set address;

**Y axis:** The length value moved along the Y axis comes from the set address;

**Radius address:** The radius length of the circle/ellipse from the set address;

## 6.6.8 Arc

**Introduction**

The software uses arc drawing to specify the starting point and ending point, using a counterclockwise drawing method. The contour, start and end points of the arc can be modified on the screen. If the user wants to change the start and end points of the arc on the screen, the arc should be selected firstly.

**Description**

![](https://2132722362-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0u7fewQOmu9vIPyLEl%2F-M4MpesoIpTBCMxvGDG3%2F-M4MqlovySDWRIVqqtAV%2Fimage.png?alt=media\&token=564a7d45-66a5-47e7-a7b2-b3cae1f7c7ab)

**1) View**

It is for preview object;

**2) Display settings**

**Border:** It sets border line color;

**Line type:** It sets border line width;

**Line width:** It sets border line type;

**Fill style:** It sets background type, there are four types.

**Transparence:** It sets the transparency of the object background;

**Background:** It sets background color of object, invalid when select \[No fill] in \[Pattern];

**3) Only show arc**

Check it for displaying arc; Uncheck it for displaying sector;

**4) Transparence control**

Read the numerical value of address, control the transparency; value range: 0-100.

**5) Color control**

Dynamically set the color of background. The values of the color RGB are controlled by three addresses, and the value range from 0 to 255.

**6) Angle control**

Dynamically set the shape of the arc, start angle and end angle are controlled separately by setting address.

**7) Angle**

It displays and sets the starting and ending angles of the arc.

## 6.6.9 Rectangle

**Introduction**

It is displayed as rectangle in HMI screen to meet the display needs of user.

**Description**

![](https://2132722362-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhmieditorp-manual%2F-M2grOgd14NEtTnRlj3O%2F-M2grbBu7ORH-cMKKMTe%2F10.png?generation=1584521968018723\&alt=media)

**1) View**

It is for preview object;

**2) Display settings**

**Border:** It sets border line color;

**Frame width:** It sets border line type;

**Frame type:** It sets border line width

**Pattern:** It sets background type, there are four types.

**Background:** It sets background color of object, invalid when select \[No fill] in \[Pattern]

**Transparence:** It sets the transparency of the object background;

**3) Transparence control**

Read the numerical value of address, control the transparency; value range: 0-100.

**4) Rounded rectangle**

Display rounded rectangle, set the numerical value of fillet, range:1-100.

**5) Color control**

Dynamically set the color of background. The values of the color RGB are controlled by three addresses, and the value range from 0 to 255.

**6) Move Control**

Dynamically set the position coordinate and size of circle/ellipse when HMI is running.

**X axis:** The length value moved along the X axis comes from the set address;

**Y axis:** The length value moved along the Y axis comes from the set address;

**Width:** The width of rectangle comes from the set address;

**Height:** The height of rectangle comes from the set address;

## 6.6.10 Broken line

**Introduction**

The line segments are linked end-to-end to form a broken line, whose vertex coordinate can be modified by drafting, just like polygon.

**Description**

![](https://2132722362-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhmieditorp-manual%2F-M2grOgd14NEtTnRlj3O%2F-M2grbBvBV_Wb1ZZZ0Y0%2F11.png?generation=1584521968014992\&alt=media)

**1) Display settings**

**Line color:** It sets line color;

**Line type:** It sets line type;

**Line width:** It sets line width

**Transparence:** It sets the transparency of the object line;

**Coordinate editing:** It changes coordinate for all points in this object, as below shows;

![](https://2132722362-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhmieditorp-manual%2F-M2grOgd14NEtTnRlj3O%2F-M2grbBwsHXDJyvLIKc2%2F12.png?generation=1584521967996814\&alt=media)

**2) Transparence control**

Read the numerical value of address, control the transparency; value range: 0-100.

**3) Line width control**

In basic display settings, the line width can't be changed, but user can change width by address.

Read the numerical value of address to control the width of line. Display range of numerical value: 1-10.

**4) View**

It is for preview object;

## 6.6.11 Linear scale

**Introduction**

The linear scale is a linear scale that draws the specified area with a bisector. The specific scale of the scale can be marked with static text.

**Description**

![](https://2132722362-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhmieditorp-manual%2F-M2grOgd14NEtTnRlj3O%2F-M2grbBxOmSv1yJMMj8k%2F13.png?generation=1584521968002849\&alt=media)

**1) Display settings**

**Line color:** It sets all line in object (including main and sub scale);

**Display direction:** It provides four modes for display;

**Main scale:** It sets the cell of the main scale;

**Sub scale:** It sets the cell of sub scale for every main scale;

**2) View**

It is for preview object;

## 6.6.12 Arc scale

**Introduction**

It displays the scale within the specified arc area. The arc scale needs to specify a center coordinate. The inner and outer circles have two concentric circles that specify the scale length and the display area. The scale is distributed counterclockwise between the start angle and the end angle.

**Description**

![](https://2132722362-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhmieditorp-manual%2F-M2grOgd14NEtTnRlj3O%2F-M2grbByk9KAcff9gblj%2F14.png?generation=1584521968016312\&alt=media)

**Line color:** It sets all line in object (including main and sub scale);

**Display direction:** It provides four modes for display;

**Main scale:** It sets the cell of the main scale;

**External radius:** It sets the distance from the center of the circle to the outer circle of object;

**Inner radius:** It sets the distance from the center of the circle to the inner circle of object;

**Start angle:** It displays and sets the start angles of the arc;

**End angle:** It displays and sets the end angles of the arc;
