Webn 2.0 N-Designer+program+manual English r12 PDF

Designer Manual
Web-N Server 2.0

(User Manual)
N-Designer Ver. : 2.0.0

Produce: 2017. 8. 25
Revision: 2017. 9. 25 (rev.12)
e-mail:Lbhsb@naver.com
NETRAN
http://www.netran.co.kr
Table of Contents
1. CONFIGURING WEBN PROGRAM....................................................................................................................................... 9
1.1. WEBN PROGRAM CONFIGURATION ..................................................................................................................................................................... 10

1.1.1. N-Server System ....................................................................................................................................................................................... 10
1.1.2. N-Cloud System ........................................................................................................................................................................................ 11
1.2. WEB-N 2.0 PROGRAM INSTALL ........................................................................................................................................................................... 11
1.3. PUBLISH SETTINGS AND PERMISSIONS SETTINGS ............................................................................................................................................... 14
1.4. UNINSTALL PROGRAM ............................................................................................................................................................................................ 24
1.4 PROGRAM UPDATE .................................................................................................................................................................................................. 25
1.4.1. How to manually update ...................................................................................................................................................................... 26
1.4.2. How to auto-update ............................................................................................................................................................................... 26
2. MONITORING CONTROL METHOD ..................................................................................................................................27
2.1. N-SHOW PROGRAM .............................................................................................................................................................................................. 27

2.1.1. N-Show Program configuration menu ........................................................................................................................................... 28
2.1.1.1. Show (Settings)............................................................................................................................................................................................................... 28
2.1.1.2. Show (Status) ................................................................................................................................................................................................................... 29
2.1.1.3. Show (log) ......................................................................................................................................................................................................................... 31
2.1.1.4. Section ................................................................................................................................................................................................................................ 31
2.1.2. Exit N-Show Program ............................................................................................................................................................................. 32
2.2. WEB BROWSER ........................................................................................................................................................................................................ 33
2.3. APP ........................................................................................................................................................................................................................... 33
3. N-DESIGNER SCREEN LAYOUT ..........................................................................................................................................34
4. UPPER MENU (HOME) ........................................................................................................................................................35
4.1. CLIPBOARD ............................................................................................................................................................................................................... 35

4.1.1. Copy ................................................................................................................................................................................................................ 35
4.1.2. Paste................................................................................................................................................................................................................ 36
4.1.3. Clipboard(Cut) ............................................................................................................................................................................................ 36
4.2. FILE ............................................................................................................................................................................................................................ 37
4.2.1. Create a new folder ................................................................................................................................................................................. 37
4.2.2. Create a new page ................................................................................................................................................................................... 38
4.3. CHARACTER SETTING .............................................................................................................................................................................................. 40
4.4. SORT TEXT ................................................................................................................................................................................................................ 40
4.5. DRAWING ................................................................................................................................................................................................................. 41
4.5.1. Line .................................................................................................................................................................................................................. 41
4.5.1.1. Transparency .................................................................................................................................................................................................................... 42
4.5.1.2. Outline ................................................................................................................................................................................................................................ 42
4.5.1.3. thickness ............................................................................................................................................................................................................................ 42
4.5.1.4. dash...................................................................................................................................................................................................................................... 42
4.5.1.5. location ............................................................................................................................................................................................................................... 43
4.5.2. Square ............................................................................................................................................................................................................ 44
2
4.5.2.1. Width, Height .................................................................................................................................................................................................................. 45
4.5.2.2. transparency..................................................................................................................................................................................................................... 45
4.5.2.3. Fill color ............................................................................................................................................................................................................................. 45
4.5.2.4. Borderline .......................................................................................................................................................................................................................... 46
4.5.2.5. Rotation .............................................................................................................................................................................................................................. 46
4.5.2.6. Thickness, dash ............................................................................................................................................................................................................... 46
4.5.2.7. coordinates ....................................................................................................................................................................................................................... 46
4.5.2.8. Set corner angles .......................................................................................................................................................................................................... 47
4.5.3. Circle ............................................................................................................................................................................................................... 47
4.5.3.1. Width, height ................................................................................................................................................................................................................... 48
4.5.3.2. Transparency, Fill Color, Outline, Rotation, Left, Top, Outline Thickness, Outline Dash ............................................................... 48
4.5.4. Triangle .......................................................................................................................................................................................................... 49
4.5.4.1. Width, height ................................................................................................................................................................................................................... 50
4.5.4.2. Transparency, Fill Color, Outline, Rotation, Left, Top, Outline Thickness, Outline Dash ............................................................... 50
4.5.5. Right triangle .............................................................................................................................................................................................. 50
4.5.6. Polygon .......................................................................................................................................................................................................... 51
4.5.7. Parallelogram .............................................................................................................................................................................................. 51
4.5.8. Other shapes............................................................................................................................................................................................... 51
4.5.9. lmage.............................................................................................................................................................................................................. 52
4.5.9.1. Original size fixed image setting ........................................................................................................................................................................... 55
4.5.10. Text ................................................................................................................................................................................................................ 56
4.5.10.1. Horizontal alignment ................................................................................................................................................................................................ 57
4.5.10.2. Vertical alignment....................................................................................................................................................................................................... 58
4.5.10.3. Text color ........................................................................................................................................................................................................................ 59
4.5.10.4. Text Settings .................................................................................................................................................................................................................. 59
4.5.11. Button .......................................................................................................................................................................................................... 60
4.5.11.1. Output text .................................................................................................................................................................................................................... 62
4.5.12. Trend ............................................................................................................................................................................................................ 63
4.5.13. Fill color ...................................................................................................................................................................................................... 63
4.5.14. Contour line, outline ............................................................................................................................................................................. 65
4.5.14.1. Contour line thickness.............................................................................................................................................................................................. 67
4.5.14.2. Outline dash (dashed line) ..................................................................................................................................................................................... 69
4.5.15. Effect ............................................................................................................................................................................................................ 71
4.6. EDIT SHAPE ............................................................................................................................................................................................................. 73
4.6.1. order ............................................................................................................................................................................................................... 73
4.6.2. Align ................................................................................................................................................................................................................ 74
4.6.3. Rotation ......................................................................................................................................................................................................... 75
4.6.4. Group ............................................................................................................................................................................................................. 76
4.6.4.1. Group binding................................................................................................................................................................................................................. 76
4.6.4.2. Group unwinding .......................................................................................................................................................................................................... 77
4.7. SNAP, GRID SETTINGS ............................................................................................................................................................................................. 78
4.7.1. Snap ................................................................................................................................................................................................................ 78
4.7.2. Grid .................................................................................................................................................................................................................. 79
4.8. PREVIEW ................................................................................................................................................................................................................... 80
3
4.8.1. Preview function ........................................................................................................................................................................................ 80
4.8.1.1. Tag ........................................................................................................................................................................................................................................ 80
4.8.1.2. Reload ................................................................................................................................................................................................................................. 81
4.8.1.3. Window .............................................................................................................................................................................................................................. 81
4.9. OSTING ...................................................................................................................................................................................................................... 81
4.9.1. N- Server(Alone) Posting ...................................................................................................................................................................... 82
4.9.1.1. Project Connection ....................................................................................................................................................................................................... 82
4.9.1.2. User registration ............................................................................................................................................................................................................ 82
4.9.1.3. N-Server Publication Procedure............................................................................................................................................................................. 84
4.9.1.4. N-Server Post confirmation...................................................................................................................................................................................... 87
4.9.2. N-Cloud posting ....................................................................................................................................................................................... 89
5. UPPER MENU (PROJECT) ...................................................................................................................................................89
5.1. CREATE A NEW FOLDER .......................................................................................................................................................................................... 89

5.2. CREATE NEW PAGE ................................................................................................................................................................................................. 89
5.3. DELETE ...................................................................................................................................................................................................................... 90
5.4. RENAME.................................................................................................................................................................................................................... 92
5.5. PREVIEW ................................................................................................................................................................................................................... 94
5.6. PROJECT SETTINGS .................................................................................................................................................................................................. 94
5.7. RESOURCES .............................................................................................................................................................................................................. 94
5.8. REPORT ..................................................................................................................................................................................................................... 94
5.9. TAG ............................................................................................................................................................................................................................ 94
5.10. CONTROL, SCREEN SCRIPT .................................................................................................................................................................................. 94
5.11. EVENT ..................................................................................................................................................................................................................... 94
5.12. POSTING(PUBLISH) ............................................................................................................................................................................................... 94
5.13. CLOSE PROJECT..................................................................................................................................................................................................... 95
5.14. STATION ................................................................................................................................................................................................................. 97
5.15. USER REGISTRATION ............................................................................................................................................................................................. 98
5.15.1. registration ................................................................................................................................................................................................ 99
5.15.2. Delete user .............................................................................................................................................................................................. 100
5.15.3. Edit user.................................................................................................................................................................................................... 101
5.15.4. Refresh user ............................................................................................................................................................................................ 102
5.16. SETTINGS.............................................................................................................................................................................................................. 103
6. TOP MENU (SCREEN) ....................................................................................................................................................... 104
6.1. ZOOM IN, ZOOM OUT ......................................................................................................................................................................................... 104

6.2. 100% VIEW RATIO ................................................................................................................................................................................................ 105
6.3. FILL (PAGE VIEW RATIO)........................................................................................................................................................................................ 105
6.4. SETTINGS................................................................................................................................................................................................................. 106
7. TOP MENU (SETTINGS) ................................................................................................................................................... 107
7.1. BACKGROUND COLOR........................................................................................................................................................................................... 108

7.1.1. Background color gradation .............................................................................................................................................................. 109
7.2. IMAGE EDITING ...................................................................................................................................................................................................... 110
4
7.2.1. Edit Background Image ....................................................................................................................................................................... 113
7.2.2. Exit ................................................................................................................................................................................................................. 113
7.3. SET PAGE SIZE .................................................................................................................................................................................................. 114
8. PROJECT EXPLORER ......................................................................................................................................................... 115
8.1. PROPERTY ............................................................................................................................................................................................................... 116

8.1.1. Setting .......................................................................................................................................................................................................... 116
8.1.1.1. Basic .................................................................................................................................................................................................................................. 117
8.1.1.2. Section, show ............................................................................................................................................................................................................... 118
8.1.2. Language .................................................................................................................................................................................................... 119
8.1.3. Alarm ............................................................................................................................................................................................................ 119
8.1.4. Connect ....................................................................................................................................................................................................... 120
8.1.5. Signature ..................................................................................................................................................................................................... 120
8.2. DATA........................................................................................................................................................................................................................ 121
8.3. SETTINGS (REPORT) ............................................................................................................................................................................................... 121
8.4. REFERENCE (TEMPLATE) ........................................................................................................................................................................................ 121
8.5. RESOURCE .............................................................................................................................................................................................................. 121
8.5.1. Audio ............................................................................................................................................................................................................ 122
8.5.2. Image ........................................................................................................................................................................................................... 123
8.6. PAGE ........................................................................................................................................................................................................................ 123
8.7. PROJECT EXPLORER ICON .................................................................................................................................................................................... 124
8.7.1. Change page name ............................................................................................................................................................................... 124
8.7.2. Page Delete ............................................................................................................................................................................................... 125
8.7.3. Copy Page .................................................................................................................................................................................................. 126
9. ANIMATION ....................................................................................................................................................................... 127
9.1. HOW TO SETUP ANIMATION ............................................................................................................................................................................... 128

9.2. CHANGE ANGLE ..................................................................................................................................................................................................... 129
9.2.1. Digital ........................................................................................................................................................................................................... 129
9.2.2. Analog .......................................................................................................................................................................................................... 132
9.2.2.1. Input value ..................................................................................................................................................................................................................... 133
9.2.2.2. Step ................................................................................................................................................................................................................................... 134
9.3. BACKGROUND CHANGE ....................................................................................................................................................................................... 136
9.3.1. Digital ........................................................................................................................................................................................................... 136
9.3.2. Analog .......................................................................................................................................................................................................... 138
9.3.2.1. Step ................................................................................................................................................................................................................................... 138
9.4. STROKE CHANGE.DIGITAL .................................................................................................................................................................................... 140
9.4.1. Digital ........................................................................................................................................................................................................... 140
9.4.2. Analog .......................................................................................................................................................................................................... 142
9.4.2.1. Step ................................................................................................................................................................................................................................... 142
9.5. OPACITY CHANGE(TRANSPARENCY) ................................................................................................................................................................... 144
9.5.1. Digital ........................................................................................................................................................................................................... 144
9.5.2. Analog .......................................................................................................................................................................................................... 146
5
9.5.2.1. Input value ..................................................................................................................................................................................................................... 147
9.5.2.2. Step ................................................................................................................................................................................................................................... 148
9.6. VISIBILITY CHANGE ............................................................................................................................................................................................... 150
9.6.1. Digital ........................................................................................................................................................................................................... 150
9.6.2. Analog .......................................................................................................................................................................................................... 152
9.6.2.1. Step ................................................................................................................................................................................................................................... 152
9.7. STROKE THICKNESS............................................................................................................................................................................................... 154
9.7.1. Digital ........................................................................................................................................................................................................... 154
9.7.2. Analog .......................................................................................................................................................................................................... 156
9.7.2.1. Input value ..................................................................................................................................................................................................................... 157
9.7.2.2. Step ................................................................................................................................................................................................................................... 158
9.8. FILL CHANGE ......................................................................................................................................................................................................... 160
9.8.1. Digital ........................................................................................................................................................................................................... 160
9.8.2. Analog .......................................................................................................................................................................................................... 162
9.8.2.1. Input value ..................................................................................................................................................................................................................... 164
9.8.2.2. Step ................................................................................................................................................................................................................................... 165
9.9. MOVE...................................................................................................................................................................................................................... 167
9.9.1. Digital ........................................................................................................................................................................................................... 167
9.9.2. Analog .......................................................................................................................................................................................................... 169
9.9.2.1. Input value ..................................................................................................................................................................................................................... 170
9.9.2.2 Step .................................................................................................................................................................................................................................... 171
9.10. RESIZE................................................................................................................................................................................................................... 174
9.10.1. Digital ........................................................................................................................................................................................................ 174
9.10.2. Analog ....................................................................................................................................................................................................... 176
9.10.2.1. Input value .................................................................................................................................................................................................................. 178
9.10.2.2. Step ................................................................................................................................................................................................................................. 179
9.11. BACKGROUND FLICKER ...................................................................................................................................................................................... 182
9.11.1. Digital ........................................................................................................................................................................................................ 182
9.11.2. Analog ....................................................................................................................................................................................................... 184
9.11.2.1. Input value .................................................................................................................................................................................................................. 186
9.12. STROKE FLICKER.................................................................................................................................................................................................. 191
9.12.1. Digital ........................................................................................................................................................................................................ 191
9.12.2. Analog ....................................................................................................................................................................................................... 193
9.12.2.1. Input value .................................................................................................................................................................................................................. 195
9.12.2.2. Step ................................................................................................................................................................................................................................. 196
9.13. ROTATE ................................................................................................................................................................................................................. 199
9.13.1 Digital ......................................................................................................................................................................................................... 199
9.13.2. Analog ....................................................................................................................................................................................................... 202
9.13.2.1. Input value .................................................................................................................................................................................................................. 203
9.13.2.2. Step ................................................................................................................................................................................................................................. 204
9.14. CHANGE IMAGE .................................................................................................................................................................................................. 207
10. USER INPUT ..................................................................................................................................................................... 210
10.1. USER INPUT SETTINGS........................................................................................................................................................................................ 211
6
10.2. NOT USED ............................................................................................................................................................................................................ 211
10.3. PAGE LOAD .......................................................................................................................................................................................................... 212
10.4. DIGITAL(BUTTON) ............................................................................................................................................................................................... 213
10.5. DIGITAL(DIALOG) ................................................................................................................................................................................................ 214
10.6. ANALOG(BUTTON) ............................................................................................................................................................................................. 216
10.7. ANALOG(DIALOG) .............................................................................................................................................................................................. 218
10.8. ANALOG(SLIDER) ................................................................................................................................................................................................ 220
10.9. STRING(DIALOG)................................................................................................................................................................................................. 222
10.10. REPORT .............................................................................................................................................................................................................. 223
10.11. CURRENT TIME OUTPUT FUNCTION .............................................................................................................................................................. 223
11. SETTING UP MULTI-SECTION MONITORING ............................................................................................................ 225
7
★ warning
N-Designer is an HMI program designed for free use by anyone without a separate authentication procedure.
This program is an release version.
In addition, there are no restrictions on the distribution of the drawing program created by the user using the
N-Designer program, and the program update is provided free of charge.
N-Designer program can be downloaded from our website (http://www.netran.co.kr).

Also, please send us the inconvenience or improvement by e-mail (lbhsb@naver.com) and we will review and
improve the program as soon as possible.
The contents of the manual and the functions of the product are subject to change without prior notice, and
NETRAN is not responsible for any problems caused by the use of this product.
 All brand and product names are trademarks or registered trademarks of their respective owners.
 MS Windows7 64-bit, Windows 8, 8.1, 10, and Windows Server2016 are registered trademarks of
Microsoft Corporation.
 SIEMENS PLC is a registered trademark of SIEMENS.
 ABB PLC is a registered trademark of ABB.
 MELSEC is a registered trademark of Mitsubishi.
 Cimon PLC is a registered trademark of CIMON CO.,LTD.
 LSIS, XGT, GLOFA and MASTER-K are registered trademarks of LSIS Co., Ltd.
 Chrome Browser is a registered trademark of Google.
8
1. Configuring WEBN Program
Free Use
The N-Designer HMI drawing program is free for anyone to use without authentication and can be monitored and
controlled on PC, tablet or smart phone without limitation of number of tags, number of connected devices,
continuous operation time and place.
Operating Environment
The minimum operating environment of N-Designer program is compatible with Pentium 4 or higher, MS Windows
7 64 bit operating system, Windows 8, 8.1, 10, and Windows Server2016.
Various Functions
Projects created with the N-Designer program can be monitored and controlled with N-Show, a PC monitoring
program, and can be monitored and controlled simultaneously in the web browser and smartphone apps on the
same screen without additional work.
The main functions of N-Designer program are not only basic functions of general HMI / SCADA, but also push alarm
texts to smartphone app, multi-section monitoring (multiplex monitor configuration), monitoring with Google map,
project encryption, trend, report function And so on.
Multiple Languages
Because WebN program supports multiple languages, it supports multiple languages in N-Designer and N-Show
programs, and it can be written in multiple languages on the monitoring screen so that the screen can be changed
to another language immediately while driving. The tool program is initially set to English, but you can use tool
programs in other languages, such as Hangul, from the Change Language menu. Basically, it provides two language
resource files, English and Korean. Language resource files are provided as xml files, so you can add or change them
in your preferred language by modifying them using programs such as MS Excel.
There is no limit to the number of languages you can add.
Multiple PC Multi Monitor

The WebN program runs as one communication server program and provides the function to monitor and control
using several PCs and several monitors at the same time. It is useful for building an integrated monitoring room
because you can operate several PCs and monitors from one central console PC.
Interface
The communication interface that can be connected to N-Designer also supports Modbus (RTU, TCP), DDE, and some
PLC-specific communication protocols. SIEMENS PLC, ABB PLC, MELSEC PLC, OPC-UA and MQTT will be developed in
sequence.
9
1.1. WebN program configuration
The WebN program is divided into an independent N-Server system and an N-Cloud system using cloud services.
1.1.1. N-Server System
N-Server system consists of N-Designer which creates monitoring project, N-Show program which is operated
by PC monitoring system, data service program which provides monitoring data service from web browser or
smartphone, and smartphone application program. All programs are free.
The N-Server system can independently build a monitoring system (Standalone Control & Monitoring System)
or operate as a client of the N-Cloud server, that is, as a station when used in conjunction with the N-Cloud
system.
The N-Server system can be designed using unlimited number of tags, and there are no restrictions on the
number of pages to be rendered, continuous operation time, and multi-PC / multi-monitor function.
Also, there are no restrictions on PLC controllers (dedicated controllers, universal controllers, educational boards
such as Arduino and Raspberry Pie).
In the N-Server system, the project created by N-Designer on the user's computer can be configured as an
internal IP or as a static IP
It is a system that can monitor and control by PC, Web browser and smartphone app without additional work.
When used in conjunction with the N-Cloud system, there is no need for a separate static IP, and you can connect
to the IDC center server and monitor it in the browser and smartphone apps.
10
1.1.2. N-Cloud System
The N-Cloud system enables users to monitor and control projects created with N-Designer on a web browser
or smartphone application without building an Internet server using a separate static IP and domain name.
At this time, you can selectively use the method of connecting the control system such as PLC directly to the
N-Cloud server and the method of connecting to the N-Cloud server through the PC using the function of
N-Server. (In general, PLC communication function is not supported by PLC. Therefore, if you need to connect
PLC directly, you need to use RTU equipment.)
The N-Cloud system is divided into a free version with a limited number of paid versions and tags.
If you want to use more tags, number of stations, number of IDs, you can select various types of paid services
classified by each function.
Projects created with N-Designer for use in N-Show can be configured to be monitored in the web browser or
smartphone app by connecting directly to the N-Cloud server by publishing settings without the need to add
or change them.
1.2. Web-N 2.0 Program install
You can download the program from the NETRAN website (http://www.netran.co.kr).
To install the N-Designer program after downloading, you must install .NET Framework 4.6 first.
Visit the Microsoft homepage at https://www.microsoft.com/hu-HU/download/details.aspx?id=48137
You can download the .NET Framework 4.6.
1) Double-click the WebN program icon to proceed with the installation.
11
2) Click more info
3) Click run(실행).
12
4) After the installation is completed and the installation is completed, the N-Desigener, N-Show, and updater
icons appear on the desktop.
installed
★ Regardless of the paragraph, the parts that explain the execution procedure in order are expressed in the same
format as 1), 2), 3), 4).
13
1.3. Publish settings and permissions settings
To publish from a Web browser, you must set Internet Information Services (IIS), Settings, and publish folder
permissions..
1) In the control panel of Windows, click [Programs and Features].
14
2) Click Turn Windows features on / off.
3) In the windows function settings window, check [Internet Information Service] and click the OK button.
15
4) Click [Close] button when the message that installation of that [Windows completed the requested
Changes] is displayed.
16
5) In the search field, type Internet Information Services, and then click IIS Manager.
17
6) Click [Add Website] menu.
7) Sets the name, application pool, and publishing file path.
① ②
① Enter the site name..

② Set the same as site name.
③ Set the path to [Document-> WebN2-> publish].
④ Click the OK button.
18
8) You need to change the publish folder security setting so that you can monitor and control it from
the web browser after publishing.
19
9) In the publish folder, right-click on the Properties menu.
20
10) Click Security, and then click Edit.
21
11) Click [Add] button.
12) Type everyone and click OK.
22
13) Check all permissions, Modify permission, and click the OK button to finish setting the publishing rights.
You can then access the publish folder in your web browser for monitoring and control.
23
1.4. Uninstall Program
Uninstalling the program can delete the WebN program from [Control Panel - Program Features] or a file in the
C drive path.
① To uninstall the N-Designer program, click the folder C: \ Program Files \ Web \ bin.
② Click the Uninstall file.
③ If a pop-up message appears, click the "Yes" button.
24
④
④ Ready to uninstall the program, check the desired conditions.

⑤ Click the OK button.
Removed
Remove icon
⑥ Once removed, the N-Desigener, N-Show, and Updater icons on your desktop will be deleted.
1.4 Program Update
You can double-click [Update icon] on the desktop to check the update history or proceed with the update.
25
1.4.1. How to manually update
To update manually, you can click the check in the Updates tab to proceed with the update.
1.4.2. How to auto-update
On the settings tab, check the automatically check for updates box, the update tray icon will appear in the
bottom right corner of the screen.
An update notification pop-up message appears on the tray icon when an update situation occurs.
26
2. Monitoring control method
You can monitor and control the work created by N-Designer with [N-Show Program], [Web Browser], [App]
2.1. N-Show Program
You can monitor and control the work created in N-Designer by executing N-Show program which is a PC
monitoring program.
Double-click [N-Show program icon] to display the posting screen of your project.
27
2.1.1. N-Show Program configuration menu
When you click [Alt] on the keyboard, you can see the N-Show program show, section, and window configuration
menu on the top bar.
When you click Alt again, the menu on the top bar disappears.
2.1.1.1. Show (Settings)
Click [Show - Settings] to display the main menu and language menu.
①
②
Main Menu
You can check the show number, server IP, port, authentication ID and password from main menu.
28
Language setting
You can change the Show program language setting in the Language menu.
②
①
2.1.1.2. Show (Status)
Click [Show-Status] to display the main menu and language menu.

①
29
Status menu
You can check the status of your communication connection by clicking Status.
30
2.1.1.3. Show (log)
Click [Show-Log] to check the communication connection status of the N-Show program, station, and I / O
driver.
2.1.1.4. Section
You can check section screen information by clicking [Section - Info].

①
At the bottom left, you can see the section, monitor number, and page name.
Click [Section - Reread] to refresh the show program.

①
31
If you click [Section - Close], it will be displayed on the tray icon on the bottom right.
Right-click [N-Show icon] on the tray icon and click [Section – open All Section], and the show program
section page reappears.
① ②
2.1.2. Exit N-Show Program
To exit the N-Show program, right-click the tray icon in the lower-right corner of the screen and click Exit to exit the
program.
32
2.2. Web browser
You can monitor and control the fixed IP or internal IP on your PC or smart phone by entering it into the address
bar of Google Chrome.
2.3. APP
Android smartphones can be monitored by installing SCADA / HMI Web-N after searching netran in Play Store.
33
3. N-Designer Screen Layout
Double-click the N-Designer program on the desktop and the full screen will appear.
① Upper menu
② Project
Browser
③
property
window
① Upper menu contains home, project, screen menu, and it consists of menus such as save, work, edit, print, link,
print.
② In the left Project Browser, it create the page classification, tag setting and script setting function.
③ In the property window, you can edit the detailed properties by clicking on the shape.
34
4. Upper menu (Home)
The top menu consists of clipboard, file, letter setting, text sorting, drawing, shape editing, [snap, grid], page, tool
and start menu.
⑦ ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨
⑦
① Clipboard ⑦ ⑦ ⑦
② File ⑦ ⑦
⑦
③ Character setting
④ Text
⑤ Drawing
⑥ Edit shape
⑦ Snap, grid
⑧ Page
⑨ Tools
⑩ Start menu
4.1. Clipboard
The Clipboard menu consists of Copy, Paste, and Cut.
4.1.1. Copy
Click [Copy icon] to copy [Drawing object].
Select
35
① Select [Drawing Object].
② Clicking [Copy Icon] copies the selected [Drawing Object].
4.1.2. Paste
You can paste the copied [Drawing Object] by clicking [Paste Icon].
Mouse drag
Paste Paste completed
① Click [Copy Icon] to copy the selected [Drawing Object].
② Click [Paste Icon], then select the first [Drawing Object] with the mouse and drag and move it to the
right to complete the paste.
4.1.3. Clipboard(Cut)
You can cut [Drawing Object] by clicking [Cut Icon].
Cut
Select delete
① Select [Drawing Object] to cut out.
② When you click [Cut Icon], the selected [Drawing Object] is deleted and saved in the clipboard, so
it can be used in paste.
36
4.2. File
The File menu consists of creating a new folder and creating a new page.
4.2.1. Create a new folder
Click [Create New Folder Icon] to create a new folder in the left tree menu.
① Click the Create New Folder icon.

② A new folder will be created in the left tree menu.
37
4.2.2. Create a new page
1) You can create a new page in the left tree menu by clicking [Create New Page icon].
2) When you click [Create New Page Icon], the Create New Page window appears.
① Enter a name.
② Enter the width and height. (Default value: width 1920, height 1080)
③ Default background color setting
④ Click the Create button.
38
3) When you complete the setup, a new page is created.
39
4.3. Character setting
You can set the text type, text size, thickness, slope, underline, strikethrough, and color.
① ②
③ ④ ⑤ ⑥ ⑦
① Text type
② Text size
③ Thickness of text
④ Text gradient
⑤ Text underline
⑥ Text cancellation line
⑦ Text color
4.4. Sort text
You can sort text middle, left, and right in the top alignment menu.
Middle sort
Left sort
Right sort
40
4.5. Drawing
You can set [Drawing Object], Insert, Fill Color, Outline, Effect, Trend, and Google Map monitoring in the Drawing
menu at the top.
Drawing Object
4.5.1. Line
You can create a line by clicking the [Line icon].
When you click the line, the line property window appears on the left side of the screen.
You can set transparency, outline, outline thickness, outline dash, and line coordinate values in the line properties
window.
①
②
③
④
⑤
41
4.5.1.1. Transparency
You can set the transparency of the line from 0 to 1 in increments of 0.1. The smaller the value you set, the
more transparent the line.
Set transparency to
0.5
4.5.1.2. Outline
Click [Outline Icon] to set the color.
Set color to DodgeBlue
4.5.1.3. thickness
You can set the thickness of the line. As the set value increases, the line thickness becomes thicker.
Set to line thickness 5
4.5.1.4. dash
As the set value increases, the interval between the dotted lines will increase.
Outline 2 to 4
42
4.5.1.5. location
The value increases as the X axis increases to the right with reference to the origin, and increases as the Y
axis decreases downward. X1, X2, Y1, and Y2 of the line indicate the marked point.
location [0, 0]
X1 X2 X
X increase
Y1
Y2
Y Y increase
43
4.5.2. Square
You can create a rectangle by clicking the square icon.
In the Rectangle Properties window, you can set [Width, Height], Transparency, Fill Color, Outline, Rotation,
[Outline Thickness, Outline Dash], [Left, Top], and [X, Y Radius].
“
②
③
⑤
⑥
44
4.5.2.1. Width, Height
Horizontal represents the width of the rectangle, vertical represents the height of the rectangle.
Height
Width
4.5.2.2. transparency
[See link description]
4.5.2.3. Fill color
You can set the color of the rectangle by clicking the [Color setting icon] and selecting the fill color.
① ②
① No Fill
② Fill color settings
The color of the rectangle changes to Blue.
Set the color to Rectangle

Blue
45
4.5.2.4. Borderline
4.5.2.5. Rotation
Rotation: Rotates clockwise by the input angle.
90 degrees input
90 degrees
rotation
4.5.2.6. Thickness, dash
4.5.2.7. coordinates
Left, Top: Top left vertex coordinates Left (px), Top (px) values
46
4.5.2.8. Set corner angles
X, Y Radius: Represents square corner angle.
X, Y set to 5
Corner angle changed
4.5.3. Circle
You can draw a circle by clicking the circle icon.

When drawing a circle, press the Shift button. When you draw a circle, the circle is drawn with the same width
and height.
You can set [Width, Height], [Transparency, Fill Color, Outline, Rotation, Left, Top, Outline thickness, Outline dash]
in the Properties window of the circle.
47
4.5.3.1. Width, height
You can modify the size of the circle by setting the width and height of the circle
4.5.3.2. Transparency, Fill Color, Outline, Rotation, Left, Top, Outline Thickness, Outline Dash
48
4.5.4. Triangle
You can create a triangle by clicking [triangle icon] in the top menu.
When drawing a triangle, press [Shift button] and draw a triangle to draw a triangle with the same width and
height.
You can set the properties (Width, Height, Transparency, Fill color, Outline, Rotation, Thickness, Outline dash, Left,
Top) in the properties window of the triangle.
49
4.5.4.1. Width, height
horizontal is the width, vertical represents the height.
vertical
horizontal
4.5.4.2. Transparency, Fill Color, Outline, Rotation, Left, Top, Outline Thickness, Outline Dash
4.5.5. Right triangle
You can create a right triangle by clicking the [Right Triangle] icon in the top menu.
When drawing a triangle, hold down the Shift button and draw a triangle to draw a triangle with the same
width and height.
★ Right angle triangle, pentagon, parallelogram, and other shape property settings
50
4.5.6. Polygon
You can create a polygon by clicking [Polygon icon] in the top menu.
4.5.7. Parallelogram
You can create a parallelogram by clicking [Parallelogram icon] in the top menu.
4.5.8. Other shapes
You can create a shape by clicking [Other Shapes Icon] on the top menu.
51
4.5.9. lmage
1) Click [Image Icon] to draw an image on the page.
① Click [Image Icon].

② The mouse over the desired image size to create an image on the page.
③ Click [Image Icon] on the left property window.
52
2) A pop-up window appears where you can add images.
① Click [Add icon].

② Click the [Select] button.
3) A screen appears where you can add images.
① Select the image you want to add.

② Click the [Open] button.
53
4) When you add a selected image, it is added to the image list.
① Click the selected image.

② Click the [Select] button
5) the setting is completed, the image is printed on the page.
54
4.5.9.1. Original size fixed image setting
1) You can set the original size of the image by clicking the [Original Size icon].
②
③
① Select an image.
② Click the Image tab.
③ Click the [Original Size] icon.
55
4.5.10. Text
Click the [Text Icon] to draw the text.
① Click [Insert Text Icon].

② Create a text insert on the page.
③ You can set the text information in the text property window.
56
In the Insert Text Properties window, you can set horizontal alignment, vertical alignment, text color, [font, text
size, text, style, text, X radius, Y radius].
①
②
③
4.5.10.1. Horizontal alignment
Horizontal alignment allows text to be aligned left, right, and center.
Middle sort
Left sort
Right sort
57
4.5.10.2. Vertical alignment
Vertical alignment allows text to be aligned up, down, and center.
Middle sort
Top Sort
Bottom sort
58
4.5.10.3. Text color
You can change the text color by clicking the [Text Color Settings] icon.
① ② ① No text color
③ ② Text color setting
③ Text color type
Set Text Color Magenta
4.5.10.4. Text Settings
You can set font, font size, font thickness, style, text input, corner angle (X, Y radius).
① ① Set text font type

② ② Text size
③ ③ Text Thickness
④ ④ Text gradient
⑤ ⑤ Text contents
⑥ Text shape corner angle setting
⑥
※ For text input, you can input characters directly from the text or button by clicking the keyboard [F2].
After entering text,

press ENTER
59
4.5.11. Button
If you click the button after creating the button, the button property is displayed on the left property window.
The property contents can be modified and it will be reflected in the picture immediately after modification.
① Click [Button Icon].

② Create a button.
③ If you select the button, you can check [Button Properties Window] on the left screen.
60
In the [Button Properties window], choose [Width, Height, Transparency, Fill Color, Outline, Rotate, Outline
Thickness, Outline Dash, Left, Top], Output Image, Image Position, Image, Output Text, [Horizontal Alignment,
Color, font, font size, font, style, text, X, Y radius].
① [Width, Height, Transparency, Fill Color,

Outline, Rotate, Outline Thickness, Outline Dash]
① [See link description]
61
4.5.11.1. Output text
When you check the output text, a character appears on the button, and when unchecked, the character is
deleted.
Uncheck
★【Horizontal alignment, vertical alignment, font color, font, font size, letter, style, text, X, Y radius setting】
62
4.5.12. Trend
[See separate trend manual]
4.5.13. Fill color
1) You can set the fill color in the [left property window] or the fill color in the top menu.
2) You can set the color of [Drawing Object] by clicking [Fill Color Icon].
②
③
63
① Creates a [Drawing Object].
② Click [Fill Color Icon].
③ Select Blue color.
3) The color of the shape has changed with Blue color.
64
4.5.14. Contour line, outline
1) You can set the outline in the [Properties Window] on the left or set the outline color, thickness, and dash of
the line, shape in the top menu.
2) When you click [Outline Icon], a menu for setting the outline appears.
65
② Click [Outline Icon].
③ Red color is selected.
3) Changing the color with RED changes the outline of the [Drawing Object] to RED.
66
4.5.14.1. Contour line thickness
1) can set the thickness of the contour line by clicking on the weight menu.
①
④
① Click [Drawing Object] to select it.

③ Click the Thickness menu.
④ You can set the thickness of outline.
67
2) The thickness of the outline will change as set.
68
4.5.14.2. Outline dash (dashed line)
1) You can set the linetype by clicking the outline dash menu.
③
①
④

③ Select outline dash.
④ Select the dash type.
69
2) Setting the outline dash changes the outline of the [Drawing Object].
70
4.5.15. Effect
1) You can set the shadow effect for [Drawing Object] by clicking the Shadow effect menu.
②
③

② Click [Effect Icon].
③ Click the shadow effect icon menu.
④ Set the shadow effect.
71
2) Shadow effect When [Draw Object] is selected, the shadow effect setting is completed.
72
4.6. Edit shape
You can order, arrange, rotate, and edit groups of shapes.
4.6.1. order
You can set the order of [Drawing Object] by clicking [Drawing Object] to set the order and clicking [Order
icon].
[Drawing Object] has been set in order.
73
4.6.2. Align
You can set the alignment in 9 different ways by selecting all the [drawing objects] you want to align and clicking
the [Align icon].
74
4.6.3. Rotation
rotation has a menu of 90 degrees clockwise, counterclockwise, left and right up and down.
75
4.6.4. Group
You can click [Group Icon] to group multiple [Drawing Objects] into groups or to set group ungrouping.
4.6.4.1. Group binding
1) Click [Draw Objects] to set [Draw Objects] to Group Bundle.
2) [Group – Group binding]
3) Two [drawing objects] are set as one group.
76
4.6.4.2. Group unwinding
1) Click [Drawing Objects] grouped.
2) Click [Group - Ungroup].
3) Ungrouping is complete.
77
4.7. Snap, grid settings
You can set the page by checking the snap and grid.
4.7.1. Snap
You can set the unit interval by which you can move the snap by setting x and y at one time.
As the value of X increases, the X-axis interval at which the object can move at a time also increases.
As the value of Y increases, the Y-axis interval at which the object can move at a time also increases.
X=20, Y20
Snap x coordinate dotted line One interval has a value of 10. If x is set to 20, it moves to the interval of two points
each time it moves.
X=20
78
Snap y coordinate One dotted line has a value of 10. If you set y to 20, it will be moved by two spaces each time
you move.
Y=20
4.7.2. Grid
Set the value of grid X, Y to 20.
X=20, Y20
Grid x coordinate dotted line The value of one interval is 10. If x is set to 20, the spacing between points changes
from 10 to 20.
.
X=20
Grid Y coordinate dotted line The value of one interval is 10. Setting Y to 20 changes the spacing between points
from 10 to 20.
Y=20
79
4.8. Preview
Click [Home - Preview] to preview the operation status of the project in the preview window.
4.8.1. Preview function
When you click Preview, a preview window appears and consists of a [tag] menu and a [reload] menu.
4.8.1.1. Tag
Click the tag menu to check the status of the values in the preview setting window in the right simulator.
80
4.8.1.2. Reload
Clicking [Reload] menu will refresh the preview window.
4.8.1.3. Window
You can set the preview screen as full screen or reduced screen by clicking the [window] menu.
4.9. osting
Click [Home - Publish] to view the created work on your smartphone (web, app) or PC.
Publications can be published by selecting Alone (N-Server) publishing and Cloud publishing.
81
4.9.1. N- Server(Alone) Posting
N-Server (Standalone) posting can be watched and controlled by N-Server as a standalone system that processes
data service by inputting internal IP of static IP or router in Google Chrome browser by N-Designer.
Before publishing N-Server, you need to set up project connection and user registration before publishing
process normally.
4.9.1.1. Project Connection
You need to set the IP of the data server and the file server.
①
③
②
① Double-click the "Properties" menu in the left Project Browser.

② Click "Connect" in the project setting window.
③ Input data server and file server. (Default: 127.0.0.01, static IP or custom IP input)
4.9.1.2. User registration
You can confirm the operation process after posting by registering the user name and password by clicking
[User icon].
After posting in Google Chrome browser, user registration ID and password are required to complete
authentication.
82
When you click [User icon], the setting window appears.
If you click [Add icon], [User Editor window] is output.
① In the [User Editor Window], enter your name, nickname, ID, and password.
83
4.9.1.3. N-Server Publication Procedure
1) When you are finished setting up project connection and user registration, click [Publish icon].
2) When you click [Publish Button], [Publish Progress Window] appears.
②
Mode select
① Set the mode to Alone.

② Host is set as internal IP and port is input fixed value "19652".
③ Click [Next Button].
84
3) Click [Next Button].
4) Check Delete existing file and click [Next button].
85
5) Click [Publish button].
6) When the publication is complete, click [Close Button].
86
4.9.1.4. N-Server Post confirmation
Once the posting is completed, you can check the status of the operation with the static IP or internal IP in the
N-Show program and the web (Google Chrome browser).
- N-Show program
When the publication is completed, run the N-Show program on the desktop to confirm the operation.
- Checking Static IP (Internal IP)
1) If the fixed IP is 192.168.1.120, you can access http://192.168.1.120 in the Google Chrome browser url
window.
87
The login screen appears and you can check the operation status of the created job by entering the user
registration ID and password.
88
4.9.2. N-Cloud posting
[See separate N-Cloud manual]
5. Upper menu (Project)
Click [Project Tab] in the [Top Menu] to display the Create New Folder, Create New Page, Delete, Rename, Project
Properties, Tags, Resources, Close Project, Users, Settings menus.
③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑫ ⑭ ⑮ ⑯
⑪ ⑬
① ②
5.1. Create a new folder
5.2. Create New Page
89
5.3. Delete
1) Click [Delete icon] to delete the new folder or page from the left tree.
90
① Select the page you want to delete.
② Select and click [Delete icon].
2) Page2 has been deleted.
delete
91
5.4. Rename
1) You can change the name of a new folder or page by clicking the [Rename icon].
① You can change the [Folder Name] or [New Page Name].

② Click the [Rename icon].
92
2) New Folder 1 changed to Folder.
93
5.5. Preview
5.6. Project settings
It is the same as the left Project Browser Properties menu.
5.7. Resources
5.8. Report
See separate report manual
5.9. Tag
See separate tag editor manual
5.10. Control, screen script
Control script and screen script refer to separate manual
5.11. Event
Event will be included in next version.
5.12. Posting(Publish)
94
5.13. Close Project
1) You can close the project by clicking the [Close Project icon].
95
2) [Close Project] is completed.
3) If you click [Close Project Icon] again, [Left Project Browser] is also deleted.
96
5.14. Station
You must enter the station serial ID and password to access the N-Cloud server.
(For details, refer to the description of the Tag Station Manual Station section.)
97
5.15. User registration
The user registration icon generates ID and password to be entered in authentication after posting in web browser.
Click [User icon] in the [Top menu], and the Edit User window appears.
In the [User Editor Window], you can add or delete users who can use N-Designer to edit them.
98
5.15.1. registration
Click [Add icon] to register user ID and password.

The user ID and password are used for authentication when publishing from N-Show program and N-Server
program (fixed IP, internal IP posting).
① Click [Add icon].

② Enter [User Name, Nickname, ID, Password].
③ Click [OK] button to add user.
If you check activation or Enable, the registration of the user ID is completed. If the check is canceled, the
registration of the ID is canceled.
99
5.15.2. Delete user
Click [Registered User] and click [Delete icon] to delete the registered user ID.
① Click [Delete icon].

② Click [Yes Button] to delete the selected user.
100
5.15.3. Edit user
You can modify the user information by clicking [Registered users] and clicking the [Edit icon].
Click [edit icon] to enter nickname, ID and password.
① Click [edit icon]

② User information can be modified.
③ Click [OK] button to complete the modification.
101
5.15.4. Refresh user
① You can re-read the user list information by clicking the [Refresh icon].
②
User list
102
5.16. Settings
You can check the connection test by clicking [Setup Icon].
① Project connection success or failure is output.
① It is the current default value and can be modified and used for remote publishing. (Refer to separate manual
when revising)
② Confirm project connection success or failure
103
6. Top menu (screen)
When you click on the Screen tab from the top menu, the setting menus for setting the screen will appear.
② ③ ④
①
6.1. Zoom in, Zoom out
Each time you click [Enlarge Icon], the view scale of drawing page will be enlarged.
In contrast, each time you click [Collapse Icon], the view scale of drawing page will be reduced.
104
6.2. 100% view ratio
Click the [100% icon].
The page view ratio is set to 100%.
enlargement
Screen 50% ratio Screen 100% ratio
6.3. Fill (page view ratio)
Click the [Fill icon].
It is set to the full page view ratio.
Full page
view
105
6.4. settings
You can set the snap and grid by clicking [Setting Icon].
Snap, grid description [See link description]
106
7. Top menu (Settings)
Click the Settings tab to display the menus.
107
On the Settings tab, you can edit the background color, background image, and page size settings.
① ② ③
7.1. Background color
Click [Background Color Icon] on the top menu to display the [Setting Window] for setting the color.
1) Set to blue color.
2) When you select a color in the [Settings] window, the background color of the page changes to blue.
108
7.1.1. Background color gradation
You can set the gradation effect for the page background color by clicking the gradation in the [Settings]
window.
No gradation, light gradation, dark gradation settings.
light gradation
dark gradation
109
7.2. Image editing
You can insert a page background image by clicking the [Image Icon].
① Click [Image Icon].

② Drag the image size with the mouse.
③ Click [Image Icon].
110
On the screen where you can add an image, click [Add icon].
You can insert a background image by selecting an image from the path that contains the image file.
① Select an image.
② Click the Open button.
111
The image set according to the created image size is output.
① Some images are output, not the whole image, to fit the image size you have created.
② Click the Image tab.
112
If you click the [Original Size] icon, the full size will be set according to the size of the created image.
① Click the [Original Size] icon.

② The image is adjusted to the original size of the image.
7.2.1. Edit Background Image
Background images can be ordered, sorted, rotated, and grouped.
7.2.2. Exit
Click [Exit Button] to close [Background Image] and switch the screen to [Setting Tab Menu].
113
7.3. Set Page Size
You can set the page size by entering the width and height.
The default setting is FULL HD size 1920 X 1080.
Set page size
Width 1920 x height 1080 Width 1000 x height 600
114
8. Project Explorer
The left tree consists of properties, data, references, resources, and pages in the Project Explorer.
115
8.1. Property
The properties menu consists of setting, lanauage, alarm, signature, and publish.
①
②
③
④
⑤
8.1.1. Setting
The Setting menu consists of basic, section, and show menus.
116
8.1.1.1. Basic
After the N-Show program is loaded after the posting, the main menu is displayed for a while, and the idle
screen is edited.
③
④
① Set the background color of the standby screen

② Set logo image on standby screen
③ Set logo image size
④ Set logo image transparency
117
8.1.1.2. Section, show
In the Sections menu, you can set the multi-section function (multi-monitor).
Each time you add a section or a show, one monitor can be added.
If you add three sections and a show, you can monitor them on four different monitors.
(Section and show are added one by default)
[See Related Links for Using Multi-Sections]
118
8.1.2. Language
In the Language menu, you can set up multiple languages. (Korean and English are supported by default)
Users can create their own language files and use them as additional languages.
8.1.3. Alarm
You can set the alarm details in the alarm menu.
①
②
③
① If you check "No Alarm", the whole alarm will not be used.
② If you check the alarm can be used to set the alarm tag list by setting the alarm.
③ If Enable Alarm Sound is checked, alarm sound output set when alarm occurs is activated.
④ If Alarm Popup check box is checked, an alarm message window will be displayed on the popup screen when
an alarm occurs.
119
8.1.4. Connect
In the Connection menu, you can set the guest account use status, data server, and file server IP.
(Refer to separate manual for remote setting)
①
②
① Remote connection can be set from outside.

② If you check [Use guest account] and check it locally, you can confirm the animation operation by entering
guest in ID and password after posting without creating user ID separately.
③ When the Web-N program is executed by an external server, the data server inputs the external server IP.
(Default fixed value: 127.0.0.1)
④ The file server enters the IP of the server where the N-Designer page is posted.
(Default fixed value: 127.0.0.1)
8.1.5. Signature
You can register the project title, address, telephone number, and author name.
120
8.2. Data
See separate manual
8.3. Settings (report)
See separate manual
8.4. Reference (template)
Will be implemented in next version
8.5. Resource
You can double-click the resource menu to register audio and image files and insert them into the page.
① Click the resource file to add audio and image files.
★ Video file menu will be added in next version.
121
8.5.1. Audio
When you click [Add icon], a resource pop-up window appears to add the audio file.
① You can add audio files by clicking the [Add icon].
You can use [Audio File] in the tag by selecting the file in the folder with [Audio File].
① Click [Audio File].

② Click [Open button].
122
8.5.2. Image
It is the same as the method set in Home - [Insert image icon].
8.6. Page
If you expand the left tree, [Page Name] appears. Double-click [Page Name] to display the page on the right.
Page
Page Folder
Page Name
123
8.7. Project Explorer icon
The Project Explorer icon consists of renaming the page, deleting the page, and copying the page.
① ② ③
① Change page name

② Delete page
③ Copy page
8.7.1. Change page name
You can change the page name by clicking [Page Icon].
① Click the page name.

② Click the Change Page Name icon and
change the page name.
124
8.7.2. Page Delete
You can delete the page by clicking [Delete Page Icon].
③
①
① Click the page name.

② Click the Delete Page icon and a popup message will be displayed.
③ Click Yes to delete the page.
125
8.7.3. Copy Page
You can click [Copy Page Icon] to copy the entire operation page created on the page.
The values set for each object are also copied.
Copy Page
<page1(1)> <page1>
126
9. Animation
You can set up a digital, analog animation by creating an object in the Draw menu.
Animation types can be set to change the angle, change the fill color, change the line color, change the transparency,
change the visibility state, change the line thickness, fill, move, resize, flicker (background color), blink (line color)
Animation setting screen
127
9.1. How to setup Animation
1) You can bring up the animation setting window in two ways.

Double-click the object or click the left animation menu to display the animation setting window.
Double-click
① Double-click the rectangle in [Drawing Object] to display the animation setting window.
② Click [Drawing Object] and click [Animation Icon] in the Properties window. The [Animation Setting
Window] appears.
You can animate the object and click [Ctrl + i] on the keyboard to see the animation information set on that object.
If you click [Ctrl + i] again, animation information disappears.
① ②
① Color Fill Animation

② Rotation animatio
128
9.2. Change angle
9.2.1. Digital
1) Double-click [Drawing Object] to display [Animation Setting Window].
Double-click
2) You can set the angle change animation in the [Animation Settings Window].
129
① Click the [Animation tab].
② Click [Add icon] to display the animation type.

③ Click [Change Angle].
④ Click the [OK] button.
3) Set to digital tag.
① Click [Browse] to display [Tag Explorer Window].

② In the [Tag Explorer Window], click the digital tag.
③ Click the [OK] button.
130
4) Type, digital tag display, angle setting screen is added.
① If checked by default, the animation process is skipped and the animation is checked.
You can check the animation process.
② Digital Tag Setting
③ Angle can be set when ON or OFF.
④ Click the [OK] button to complete the setting.
5) When the ON value is set, the angle of [drawing object] is changed to 90 °, and when the OFF value is set, the
angle of [drawing object] is changed to 180 °.
ON value OFF value
131
9.2.2. Analog
1) In the Animation Settings window, select Change angle and click Browse. (Same as digital tag setting)
2) Set to [Analog Tag].
① When you click [Browse], [Tag Explorer Window] appears.

② Click [Analog Tag] in [Tag Explorer Window].
132
3) A screen to set the type, input value, and step is added.
① If checked by default, animation process will be skipped and check if animation is running.
② Input value and step can be selected and set.
(Analog tag sets input value and step.)
9.2.2.1. Input value
1) If you click the input value, you can set Min, Max input and angle, and click the step to set the angle
according to the input range.
133
① Set Min 7, Angle 90 °, Max 10 Set Input 10 Angle 180 °.
If a value between 7 and 10 is input, the angle will change from 90 ° to 180 °.
2) The angle changes to the set value.
When Min is set to 7 in [Drawing Object], [Drawing Object] changes the angle to 90 ° clockwise.
When Max is set to [Drawing Object] with setting value 10, [Drawing Object] changes the angle 180 °
clockwise.
9.2.2.2. Step
1) You can click the step to set the angle according to the input range.
① Sets the angle according to the input range.
② Click [Add icon] to add [Set value range].
134
2) Set the Value Range.
①
②
③
① When the input range is 1 to 10, set the angle to 90 °.

② When the input range is from 11 to 20, set the angle to 180 °.
③ When the input range is from 21 to 30, set the angle to 270 °.
4) The angle changes according to the input value.
If the input value is between 1 and 10, the [Drawing Object] changes clockwise 90 °.
If the input value is between 11 and 20, [Drawing Object] changes the angle 180 ° clockwise.
If the input value is between 21 and 30, the [Drawing Object] changes the angle 270 ° clockwise.
135
9.3. Background Change
9.3.1. Digital

2) In [Animation Setting Window], [Fill Color Change Animation] can be set.
①
②
① Click the Animation tab.
② Click [Add icon] to display animation type.

③ Click [Change Fill Color] animation.
136
①
②

4) Type, digital tag display, color setting screen is added.
① Set color when ON, OFF. (ON: Red, OFF: Silver)

② Click the [OK] button to complete the setting.
137
5) When the ON value is set, the color of [Drawing Object] is changed to RED. When the OFF value is set, the
color of [Drawing Object] is changed to Silver.
ON value OFF value
9.3.2. Analog
9.3.2.1. Step
1) In the [Animation Settings window], select [Change Fill Color], and click [Browse].
2) Set to analog tag.

138
3) A screen for setting the type, step, and value range is added.
①
②
① Analog tag step menu

② You can set the color by setting [Value range].
③ Click [Add icon] to add the [Value range] setting.
4) The color set to the set range is changed.
If the input value is 5, the color of [Drawing Object] changes to Blue.
If the input value is 10, the color of [Drawing Object] changes to yellow.
139
9.4. Stroke Change.Digital
9.4.1. Digital
1) When you create a line and double click it, [Animation Setting Window] appears.
2) In [Animation Setting Window], [Fill Color Change Animation] can be set.
①
②
① Click [Animation tab].

③ Click [Change Line Color] animation.
140
① When you click [Browse], the Tag Explorer window appears.

4) Type, digital tag display, line color setting screen is added.
① Color setting when ON, color setting when OFF. (ON: Brown, OFF: Orange)
141
5) When the ON value is set, the line color changes to Brown. When the OFF value is set, the line color changes
to orange.
ON value OFF value
9.4.2. Analog
9.4.2.1. Step
1) In [Animation Setting Window], select [Change Line Color] and click [Browse].

142
3) A screen to set the type, step, and value range is added.
①
②

② You can set the color by setting [Value range].
③ Click [Add icon] to add [Set value range].
If the input value is 5, the line color changes to Black.
If the input value is 14, the line color is changed to Khaki.
143
9.5. Opacity Change(transparency)
9.5.1. Digital

2) [Transparency Change Animation] can be set in [Animation Setting Window].
①
②

③ Click [Transparency Change Animation].
144
① Set the transparency to 0.8 at ON and to 0.4 at OFF.

(Transparency can be set from 0.1 to 1, more transparent from 1 to 0.1.)
145
5) When the ON value is set, the transparency of the rectangle is set to 0.8. When the OFF value is set, the
transparency of the rectangle is set to 0.4.
ON vlaue 0.8 OFF value 0.4
9.5.2. Analog
1) Select the transparency setting in the [Animation Setting Window] and click [Browse].

146
3) The screen to set the type, input value, and step is added.
① Input value and step can be selected and set.

1) If you click the input value, you can set Min, Max input and angle, and click the step to set the transparency
according to the input range.
① Set Min input value to 1, Transparency 0.1 and set Max input value 10 to Transparency 1.
147
(When a value between 1 and 10 is input, the transparency changes from 0.1 to 1.)
2) Transparency changes with the set value.
If the input value is between 1 and 10, the transparency changes from 0.1 to 1.)
Input value1 Input value5 Input value 10
9.5.2.2. Step
1) You can click the step to set the angle according to the input range.
① Sets the transparency according to the input range.

② Click [Add icon] to add value range setting.
148
2) Set the value range.
①
②
③
① Set the transparency to 0.3 when the input range is from 1 to 10.
② Set the transparency to 0.6 when the input range is from 11 to 20.
③ Set the transparency to 0.9 when the input range is from 21 to 30.
3) Transparency is set according to the input value.
If the input value is between 1 and 10, the transparency of [Drawing Object] is set to 0.3.
149
9.6. Visibility Change
9.6.1. Digital

2) In [Animation Setting Window], you can set [Show State Change Animation].
①
②

③ Click the [Change Display State] animation.
150

① Visible when ON, Collapsed when OFF.

151
5) [Drawing Object] is displayed when ON value is set, and [Drawing Object] disappears when OFF value is set.
ON value OFF value
9.6.2. Analog
9.6.2.1. Step
1) In the Animation Settings window, select the Show setting and click [Browse].

152
3) A screen to set the type, step, and value range is added.
①
②

② You can set the color range by setting the value range.
③ Click [Add icon] to add value range setting.
If the input value is 5, [Drawing Object] is displayed.
If the input value is 15, [Drawing Object] disappears.
153
9.7. Stroke Thickness
9.7.1. Digital

2) In [Animation Setting Window], you can set [Line Thickness Animation].
①
②

③ Click [Change Line Thickness] animation
154

4) Type, digital tag display, contour thickness setting screen is added.
②
① Set the contour thickness to 3 when ON, and set the contour thickness to 1 when OFF.
155
5) When the ON value is set, the outline thickness of the [Drawing Object] is set to 3, and when the OFF value
is set, the thickness of [Drawing Object] is set to 1.
ON value OFF value
9.7.2. Analog
1) In the Animation Settings window, select Change outline thickness and click Browse.
(Same as digital tag setting)


156
1) If you click the input value, Min, Max input and angle are set, and if you click the step, you can set the
outline according to the input range.
① Min sets the contour thickness to 2 for input 10 and sets the contour thickness to 4 for Max input 15.
2) The outline thickness is changed by the set value.
If the input value is between 10 and 15, the thickness of the contour line changes according to the input value.
Input 10 Input 13 Input 15
157
9.7.2.2. Step
1) Click the step to set the contour thickness according to the input range.
① Sets the contour thickness according to the input range.
158
①
②
③
① Set the contour thickness to 2 when the input range is from 1 to 10.
② Set the contour thickness to 3 when the input range is from 11 to 20.
③ Set the contour thickness to 4 when the input range is from 21 to 30.
4) The contour thickness is set according to the input value.
If the input value is between 1 and 10, the outline thickness of the rectangle is set to 2.
159
9.8. Fill Change
9.8.1. Digital

2) You can set [Fill Animation] in [Animation Setting Window].

③ Click [Fill] animation.
160

4) Type, digital tag display, fill setting screen is added.
②
③
① Set [Fill Color]. (Blue color setting)

② Set [Fill Direction]. (Set to the right)
161
③ Set Fill%. (ON: 80%, OFF: 30% fill setting)
④ Click the [OK] button to complete the setting.
5) When ON value is set, 30% fill is set to the right direction.
6) When the OFF value is set, the 80% fill is set to the right.
9.8.2. Analog
1) In the Animation Settings window, select Fill and click Browse. (Same as digital tag setting)
162
② In the Tag Explorer window, click Analog Tag.

163
1) If you click the input value, fill can be set according to Min and Max input value.
If Min is input 7, fill is set to 50%. If Max is input 13, fill is set to 90%.
2) The fill is changed to the set value.
If the input value is between 7 and 13, the fill% changes according to the input value.
Input 7 Input 10 Input 13
164
9.8.2.2. Step
1) You can set the fill according to the input range by clicking the step.
②
③
① Set the fill color.

② Set the fill direction.
③ Set [Fill Value Range].
④ Click [Add icon] to add value range setting.
①
②
③
① When the input range is 1 to 5, set the fill to 30%.

② Set the fill to 60% when the input range is from 6 to 10.
③ Set the fill to 90% when the input range is from 11 to 15.
165
3) The fill is set to match the entered value.
If the input value is between 1 and 5, a 30% fill of the rectangle is set.
If the input value is between 6 and 10, 60% fill of the rectangle is set.
If the input value is between 11 and 15, 90% fill of the rectangle is set.
166
9.9. Move
9.9.1. Digital

2) You can set moving animation in [Animation Setting Window].

③ Click [Go] Animation.
167

4) Type, digital tag display, fill setting screen is added.
① Set to [50,30] when ON, and [50,90] when off.

② Click the OK button to complete the setting.
168
5) When the button is turned on by the coordinates [0,0] of the rectangle, it moves to the coordinates [50,30].
When it is OFF, it moves to the coordinates [50,90].
(0,0) (0,0)
(50, 30)
(50,90)
BUTTON=ON
BUTTON=OFF
9.9.2. Analog
1) In the Animation Settings window, select Move and click Browse.

169

1) If you click the input value, it moves to the set coordinates according to Min, Max input value.
① If Min is input 7, set coordinates [50,30]. If Max is input 15, set coordinates [50,30].
② Click the [OK] button.
170
2) [Drawing Object] is moved to the set value.
If the input value is 7, it moves to the coordinates [50,30] of [Drawing Object] and if you enter 15, it moves to
the coordinates [50,90] of [Drawing Object].
(0,0) (0,0)
(50, 30)
(50,90)
Input:7
Input:15
9.9.2.2 Step
1) Click the step to set the movement according to the input range.
① Set the input range and the coordinates to be moved.

171
2) Set the Value Range.
①
②
③
① When the input range is 1 to 10, set to [30,50].

② Set the coordinate [50,70] when the input range is from 11 to 20.
③ Set the coordinate [60,90] when the input range is from 21 to 30.
3) The coordinate movement is set according to the input value.
If the input value is between 1 and 10, [Drawing Object] is moved from [0,0] to [30,50].
(0, 0)
(30, 50)
172
If the input value is between 11 and 20, [Drawing Object] is moved from the [0,0] reference to the coordinate
[50,70].
(0, 0)
(50, 70)
If the input value is between 21 and 30, [Drawing Object] is moved from [0,0] to [60,90].
(0, 0)
(50, 70)
173
9.10. Resize
9.10.1. Digital

2) You can set resize animation in [Animation Setting Window].

③ Click the [Resize] animation.
174
① Click [Browse] and the Tag Explorer window will appear.

4) The type, digital tag display, size change setting screen is added.
① Set the size change direction. (Resize all directions setting)

② It is set to 3 times bigger when turned ON, and it is set to the original size when OFF.
175
5) When the ON value is set, the rectangle is tripled in all directions.
6) When the OFF value is set, the rectangle changes to its original size.
9.10.2. Analog
1) In the [Animation Setting Window], select Resize and click [Browse].
176
③ the [OK] button.

177
1) If you click the input value, you can set the size change according to the input value of Min and Max.
①
②
① Set the direction to change the size.

② If Min is 20, input is 2 times bigger. If Max is 30, input is 4 times bigger.
2) The size of [Drawing Object] is changed with the set value.
If the input value is 20, [Drawing Object] is doubled.
If the input value is 30, [Drawing Object] becomes 4 times larger.
178
9.10.2.2. Step
1) Click the step to set the size change according to the input range.
①
②
① Sets the resize direction. (Resize to the left middle)

② Set the input range and change the size.
③ Click [Add icon] to add a range of values.
179
①
②
③
① Set [Drawing Object] to double when the input range is 1 to 8.

② Set the [Drawing Object] to be 3 times larger when the input range is 9 to 15.
③ Set the [Drawing Object] to be 4 times larger when the input range is from 16 to 22.
4) The size change is set to match the entered value.
If the input value is between 1 and 8, [Drawing Object] is doubled.
If the input value is between 9 and 15, the [Drawing Object] is tripled.
180
If the input value is between 16 and 22, the [Drawing Object] is increased by 4 times.
181
9.11. Background Flicker
9.11.1. Digital

2) [Background color flashing animation] can be set in [Animation setting window].
①
②

③ Click [Blink Background Color] animation.
182
A. Click [Browse] and the Tag Explorer window will appear.

B. In the [Tag Explorer Window], click the digital tag.
C. Click the [OK] button.
4) Type, digital tag display, background color blinking screen is added.
②
③
① Set the blinking color (Color 01: Blue, Color 02: Red)
② Set ON to blink the background when ON.
③ Set interval of blinking time to 1 second.
183
5) When ON value is set, [Drawing Object] changes color to Blue, RED and operates.
6) When the OFF value is set, the [Drawing Object] stops blinking.
9.11.2. Analog
1) In the Animation Settings window, select Background color blinking and click Browse.
① Click Browse and the Tag Explorer window will appear.
184

185
① Set the blinking color. (Color 01: Blue, Color 02: Red)
② If you enter 6, it flashes once but it is set to 0.3 second. If you input 9, it will flash for 1 second.
- boundary value
- Use Min, max boundary value
If the set object is 6 ~ 9 after posting, the blinking speed will also change stepwise from 300ms to 1000ms.
When the object is set to a value of 6 or less, it blinks at 300ms. When the value of 9 or more is set, it blinks
at 1000ms.
186
- Use Min boundary value Do not use Max
If the value of 6 is set to the object set after publishing, the background color will blink at 300ms speed, and
if 6 ~ 9 value is input, the flickering speed will also change stepwise from 300ms to 1000ms.
If the object is set to a value of 6 or less, it will flash at 300ms. If the value is set to 9 or more, the object will
be set to its initial value.
- Do not use Min threshold. Use Max.
If the value of 6 is set to the object that is set after posting, the background color will blink at 300ms speed.
If 6 ~ 9 value is input, the flickering speed will also change gradually from 300ms to 1000ms.
If the object is set to a value of 6 or less, the object is set to its initial value, and the object blinks at 1000 ms
even if a value of 9 or higher is set.
- Disable Min, Max boundary value
If the value of 6 is set to the object that is set after posting, the background color will blink at 300ms speed.
If 6 ~ 9 value is input, the flickering speed will also change gradually from 300ms to 1000ms.
If the object is set to a value of 6 or less, a value of 9 or more is set, the object is set to its initial value.
As a result, when using the min boundary value, the animation is operated with the min value set even if the
value below the min value is generated. If the Max value is above the max value, animation is performed at the
set speed. This works.
187
2) The background color flicker operates with the set value.
If the input value is 6, the color changes to blue and red every 0.3 seconds.
If the input value is 9, the color changes to blue and RED every 1 second.
188
9.11.2.2. Step
1) Click [Step] to set [Fill Flash] according to the input range.
② By setting the value within the input range, you can set the time period that flashes the background
color.
189
①
②
③
① When the input range is from 1 to 10, set the cycle of background color blinking to 200ms.
② When the input range is from 11 to 20, set the period for blinking the background color to 500ms.
③ When the input range is from 21 to 30, set the cycle of background color blinking to 1000ms.
4) [Background color blinking] is activated according to the setting value in the input range.
If the input value is between 1 and 10, [Drawing Object] blinks Blue, RED every 0.2 seconds.
If the input value is between 11 and 20, [Drawing Object] blinks Blue, RED every 0.5 seconds
190
If the input value is between 21 and 30, [Drawing Object] blinks Blue, RED every second.
9.12. Stroke Flicker
9.12.1. Digital

2) [Line color blink animation] can be set in [Animation setting window].
①
②

③ Click [Line Color Blinking] animation.
191

② In the Tag Explorer window, click the digital tag.
4) Type, digital tag display, line color blinking screen is added.
②
③
④
② Set ON to blink the background when ON.
③ Set the interval of flashing once to 0.4 seconds.
192
5) When the ON value is set, the color of the rectangle changes to Blue and RED.
6) When the OFF value is set, the square stops blinking.
9.12.2. Analog
1) In the Animation Settings window, select Line Color Blinking and click Browse.
193
② In the Tag Explorer window, click Analog Tag.
3) A screen for setting the type, input value, step, and line color blinking is added.

194
① Sets the flashing color. (Color 01: Blue, Color 02: Red)
② If the input value is 11, the outline of [drawing object] blinks once and is set to 0.2 second time If you
enter 21, the contour of [Drawing Object] will blink once, and it will be set to 0.5 second.
2) The background color flicker operates with the set value.
If the input value is 11, the outline of [Drawing Object] changes color to Blue, RED every 0.2 seconds and
works.
If the input value is 21, the outline of the drawing object is changed to Blue, RED, and operates every 0.5
second.
When the input value between 11 ~ 21 is set, it blinks at the speed of 200ms ~ 500ms.
195
9.12.2.2. Step
1) By clicking on the step, you can set the line flicker according to the input range.
② By setting the value within the input range, you can set the time period in which the line blinks.
196
①
②
③
① When the input range is from 1 to 10, set the period of blinking of the [Drawing Object] outline to 200 ms.
② When the input range is from 11 to 20, set the period of blinking of [drawing object] outline to 500ms.
③ When the input range is from 21 to 30, set the period of blinking of [Drawing Object] outline to 1000ms.
4) The outline of [Drawing Object] blinks according to the set value in the input range.
If the input value is between 1 and 10, the contour of [Drawing Object] blinks Blue, RED every 0.2 seconds.
If the input value is between 11 and 20, the outline of [Drawing Object] blinks Blue, RED every 0.5 seconds.
197
If the input value is between 21 and 30, the outline of the rectangle flashes Blue, RED every second.
198
9.13. Rotate
9.13.1 Digital

2) You can set the rotation animation in [Animation Setting Window].
① Click [Add icon] to display the animation type.

② Click the [Rotation] animation.
199

4) Type, digital tag display, rotation setting screen is added.
①
②
③
④
① If you check counterclockwise, the rotation works counterclockwise.
② Turn ON to enable rotation.
③ Set the time taken to rotate once to 0.3 seconds.
200
5) If the input value is ON value, it rotates in 0.3 second time interval of [drawing object].
6) If the input value is OFF value, rotation of [drawing object] is stopped.
201
9.13.2. Analog
1) In the [Animation Setting Window], select the rotation and click [Browse].

3) A screen to set the type, input value, step, and rotation is added.
202
① If input value is set to 5, the rotation cycle time is set to 0.3 seconds, and when the input value is set
to 8, the rotation cycle is set to 0.8 seconds.
② Click [OK] button.
2) [Drawing Object] rotates with the set value.
If the input value is 5, [Drawing Object] rotates every 0.3 seconds.
If the input value is 8, [Drawing object] rotates every 0.8 seconds.
203
9.13.2.2. Step
1) You can click the step to set the rotation according to the input range.
① You can set the rotation period of [Drawing Object] by setting a value within the input range.
② Click [Add icon] to add a range of values.
204
①
②
③
① When the input range is 1 to 10, set the rotation period of [drawing object] to 0.3 seconds.
② When the input range is 11 to 20, set the rotation period of [drawing object] to 0.5 seconds.
③ When the input range is 21 to 30, set the rotation period of [drawing object] to 1 second.
3) [Drawing object] rotates according to the set value in the input range.
If the input value is between 1 and 10, [Drawing Object] rotates every 0.3 seconds.
If the input value is between 11 and 20, [Drawing Object] rotates every 0.5 seconds.
205
If the input value is between 21 and 30, [Drawing Object] is rotated every 1 second.
206
9.14. Change image
Click the [Image change animation] to set the image change behavior.
Create an image insert and click the [Image icon].
Register the image file to be registered.
207
Double-click [Insert Image], click [Add icon] in the Animation menu, and click Change Image Animation
In the animation menu, register the digital tag and set the illumination image turned on when turned on and
turned off when turned off.
②
③
208
Check digital button in user input menu and register as digital tag.
Set the button type to DigitalToggle.
① ③
When you click on the light icon to publish, ON, OFF the group.
ON OFF
209
10. User input
You can create [Drawing Objects] to set digital and analog actions.
Click the User Input tab to display the configuration menu.

The user input menu consists of Disable, Page Load, Digital (Button, Dialog), Analog (Button, Dialog, Slider), String
Dialog, Digital Dialog, Report.
210
10.1. User input settings
User input can be set in two ways.
Double Click
① Double-click [Drawing Object], and the action setting window appears.

② Click [Drawing Object] and click [User Input Icon]. The setting window appears.
10.2. Not used
When [Disable] is selected, the user input setting is not used.
211
10.3. Page load
A page load is a menu that moves from the current page to another page.
②
①
① Select the page load.

② Click [Tag selection icon].
③ Select [Link to page].
When linking [Drawing Object] from Page1 to Page2, it moves to page2 when [Drawing Object] is clicked.
page1 Page2
212
10.4. Digital(Button)
[Digital Button Menu] allows you to control the [Drawing Object] set by the digital animation by creating a button.
To control with the [Digital Button], you must set the button animation and set the [Digital Button Menu] on the
button.
③
①
① Select [Digital Button].

② Click [Tag selection icon] to select digital tag.
③ Select [Button Type]. (ON, OFF, Toggle)
213
Set Digital Fill Color Change Animation to [Drawing Object], set Yellow when the button is ON, and Blue when the
button is OFF. (Button Toggle setting)
When the button is clicked ON, [Drawing Object] changes color to Yellow, and when the button is OFF, [Drawing
Object] changes color to Blue.
Button=ON
Button=OFF
10.5. Digital(Dialog)
In [Digital Dialog Menu], when [Dialog Popup Window] appears, digital animation can be operated according to
the setting value.
③
① ④
⑤
① Select the Digital Dialog button.

② Click [Tag selection icon] to select the digital tag.
③ Select the button type. (ON, OFF)
④ If you check "Use OK", a confirmation popup window will appear.
⑤ Enter the title content.
⑥ ON, OFF Input the output text.
214
Set Digital Line Color Change Animation in [Drawing Object], set it to Brown in ON (1), Gray in OFF (0).
If you click the Button the [line color change dialogue window] appears. Clicking ‘1’ changes the line color of
[Drawing Object] to Brown.
Button
If you click the Button the [line color change dialogue window] appears. Clicking ‘0’ changes the line color of
[Drawing Object] to Gray.
Button
215
10.6. Analog(Button)
The [Analog Button Menu] allows you to control the [Drawing Object] for which the analog animation is set up
by creating a button.
To control with the [Analog Button], you must set the animation on the graphic and set the [Analog Button Menu]
on the button.
③
④
⑤
⑥
①
① Select [Analog Button].

② Click [Tag selection icon] to select analog tag.
③ Select the button type.
(StepUp: Each time you click the button, the value increases.)
(StepDown: Decrease value each time button is clicked.)
④ If you check "Use OK", a confirmation popup window will appear.
⑤ If you set up the step, it increases by the button setting by the step setting value.
(If the step is set to 1, it increases by 1 each time the button is clicked. When the step is set to 2, it increases
by 2 each time the button is clicked.)
⑥ Set the step range.
(In the animation, the range of values must be included in the step range.)
⑦ Click [OK] button.
216
In [Drawing Object], set the [analog fill color change animation], change the color from 1 to 10 to Red, and from
11 to 20, change the color to Blue.
The button type is set to StepUP, the step is set to 1, and the step range is set to 1 to 20.
Each time the button is clicked, the number is counted. The color of [Drawing Object] changes from 1 to 10 to Red,
and from 11 to 20, the color of [Drawing Object] changes to Blue.
1 to 10 11 to 20
217
10.7. Analog(Dialog)
You can select [Analog Dialog] to operate the analog tagged animation.
① ⑤
① Select Analog Dialog.

③ Set the button type to Analog Input.
④ Enter the title and contents.
⑤ Set the input range.
⑥ Click the OK button.
218
In [Drawing Objects], set [Animation of analog fill color change], set Red to 1 to 10, Blue to 11 to 20.
If you click the button and enter 8 in the input window, the color of [Drawing Object] changes to Red.
Button
① Click the button and set it to 8 in the input window.

② The color of [Drawing Object] is changed to Red.
Button
① Click the button and set it to 13 in the input window.

② The color of [Drawing Object] is changed to Blue.
219
10.8. Analog(Slider)
You can select Analog slider to confirm the animation setting change according to the slider movement.
④
⑤
① ⑥
⑦
① Select Analog Dialog.

③ Set the direction in which the slider moves.
④ Set the movable value.
⑤ Set the range of the first value end value when the slider moves.
⑥ The slider can be set to release or press mode.
Releases mode changes the slider value by moving the slider while clicking the mouse, releasing the mouse
click changes the slider value, and Press mode changes the slider value in real time when the mouse is
clicked.
⑦ Press mode You can set the output time interval when the slider moves.
⑧ Click the OK button.
220
Change the animation fill color of [Drawing Object], set the animation, Red from 1 to 30, Blue from 31 to 60, and
green from 61 to 100.
Create a text output object and set it to print the value each time the slider moves.
Each time the object 1 moves up, the real time value is output from the text output window on the right side. The
object 2 is set. Red is changed from 1 to 30, Blue is changed from 31 to 60, and green is changed from 61 to 100.
221
10.9. String(Dialog)
You can output the text string to the text output window by selecting [String dialog].
③
④
⑤
⑥
① Select a string dialog box.

② Click [Tag selection icon] and select String tag.
③ Set Stringinput.
④ If you check "Use Confirmation", a popup window for entering a string appears.
⑤ Enter the title.
⑥ Enter the content.
⑦ Click the OK button.
Create a text output window and register a String tag, such as a rectangle object. If you click on the rectangle
object, the string input window appears, and when you enter a character, the characters typed in the text output
window are output.
222
10.10. Report
[Refer to separate report manual]
10.11. Current time output function
You can output the current time by creating a button or text output window.
Create buttons and text output windows.
Double-click each text output window and button and click the Options menu.
Check on the option menu at a time.
①
②
223
When you publish, real-time current time is output to text output window and button.
224
11. Setting up multi-section monitoring
To set up a multi-monitor, first add a new page.
① Click [Create New Page].

② Set the page name, [width, height, default background color].
③ Click [Create button]
225
①
① Double-click the [Left Project Explorer] property to set it.
① [Project Setting Window] appears on the screen and click section.

② Click [Add button].
226
①
① Click [Find].
① Click [Second page name] in the [Browse] path.

② Click [OK] button.
227
①
① After setting, click [OK] button.
③
②
① Click [Show] in [Project Setting Window].

② Click [Add button].
③ Click [Add button] and set [2. Section].
228
① Click OK button
If you run [show program] after posting, you can monitor each page from two monitors.
Once the monitor is added, you can add a new page and add sections and shows from the project settings
window.
If you enter "multi" in the _index page and "section" in the page2 page and publish, Monitor 1 will output multi
and monitor 2 will output the section.
Monitor 1(_index) Monitor2(page2)
229

Webn 2.0 N-Designer+program+manual English r12 PDF

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Webn 2.0 N-Designer+program+manual English r12 PDF

Загружено:

Авторское право:

Доступные форматы

Designer Manual

Web-N Server 2.0

N-Designer Ver. : 2.0.0

1.1. WEBN PROGRAM CONFIGURATION ..................................................................................................................................................................... 10

2. MONITORING CONTROL METHOD ..................................................................................................................................27

2.1. N-SHOW PROGRAM .............................................................................................................................................................................................. 27

3. N-DESIGNER SCREEN LAYOUT ..........................................................................................................................................34

4. UPPER MENU (HOME) ........................................................................................................................................................35

4.1. CLIPBOARD ............................................................................................................................................................................................................... 35

5. UPPER MENU (PROJECT) ...................................................................................................................................................89

5.1. CREATE A NEW FOLDER .......................................................................................................................................................................................... 89

6. TOP MENU (SCREEN) ....................................................................................................................................................... 104

6.1. ZOOM IN, ZOOM OUT ......................................................................................................................................................................................... 104

7. TOP MENU (SETTINGS) ................................................................................................................................................... 107

7.1. BACKGROUND COLOR........................................................................................................................................................................................... 108

8. PROJECT EXPLORER ......................................................................................................................................................... 115

8.1. PROPERTY ............................................................................................................................................................................................................... 116

9. ANIMATION ....................................................................................................................................................................... 127

9.1. HOW TO SETUP ANIMATION ............................................................................................................................................................................... 128

10. USER INPUT ..................................................................................................................................................................... 210

10.1. USER INPUT SETTINGS........................................................................................................................................................................................ 211

11. SETTING UP MULTI-SECTION MONITORING ............................................................................................................ 225

N-Designer program can be downloaded from our website (http://www.netran.co.kr).

Multiple PC Multi Monitor

1.1.1. N-Server System

1.2. Web-N 2.0 Program install

1) Double-click the WebN program icon to proceed with the installation.

1) In the control panel of Windows, click [Programs and Features].

7) Sets the name, application pool, and publishing file path.

① Enter the site name..

12) Type everyone and click OK.

③ If a pop-up message appears, click the "Yes" button.

④ Ready to uninstall the program, check the desired conditions.

1.4 Program Update

1.4.2. How to auto-update

2.1. N-Show Program

2.1.1.1. Show (Settings)

2.1.1.2. Show (Status)

Click [Show-Status] to display the main menu and language menu.

You can check section screen information by clicking [Section - Info].

Click [Section - Reread] to refresh the show program.

2.1.2. Exit N-Show Program

The Clipboard menu consists of Copy, Paste, and Cut.

Click [Copy icon] to copy [Drawing object].

② Clicking [Copy Icon] copies the selected [Drawing Object].

Paste Paste completed

① Click [Copy Icon] to copy the selected [Drawing Object].

You can cut [Drawing Object] by clicking [Cut Icon].

① Select [Drawing Object] to cut out.

4.2.1. Create a new folder

① Click the Create New Folder icon.

4.4. Sort text

You can create a line by clicking the [Line icon].

Click [Outline Icon] to set the color.

Set color to DodgeBlue

Set to line thickness 5

You can create a rectangle by clicking the square icon.

[See link description]

4.5.2.3. Fill color

The color of the rectangle changes to Blue.

Set the color to Rectangle

[See link description]

Rotation: Rotates clockwise by the input angle.