Chapter 12 KingView For Internet Application 1

Chapter 3 Starting a Picture

In this chapter, you will learn how to:

Design a picture
Set up animation links and use common functions
Use script

Section 1 Designing a Picture

Creating a New Picture

How to set up a new picture:

1. From the project catalogue selection zone on the left side of the project browser select
Picture and then double click new from the menu on the right and a new picture dialogue
box will popup as shown below:

Figure 3-1 Dialog of new graph

2. Set a new Picture as follows:

Picture name: monitor and control centre
Corresponding file: pic00001.pic (auto-create, user can also self-define)
Note: monitor and control centre of reaction workshopmain picture
Chapter 12 KingView For Internet Application 2

Picture Type: overlay mode

Picture position:
Left: 0
Top: 0
Display Width: 800
Display Height: 600
Picture Width: 800
Picture Height: 600
Title bar: invalid
Size controls: valid
3. Click Confirm in dialogue box
TouchExploer will then produce a Picture named monitor and control centre according to
your specifications.

Using the Picture Toolbox

We can now draw all kinds of graphics. The main tool for drawing the graphics is in the
Picture Editing Tool Box, it automatically pops up when a new Picture is opened. Each button in
the toolbox has floated prompt which shows you hot to use each tool.
1. If the toolbox does not appear, select show toolbox from the Tools menu or press the
F10 shortcut key. The format of the tools in the toolbox is similar to that of the tools in
Windows, as figure 3-2 shows.

Figure 3-2 Picture toolbox

2. Selecting from the toolboxallows you to input text anywhere in the Picture, such
as Reaction Workshop Monitor and Control Picture
3. If you want to change the font, colour, or size of the text, first select the text, and click the
Chapter 12 KingView For Internet Application 3

font tool , then modify the text properties in the font dialogue box.

Using the Palette

Select Display Palette from the tool menu, or select from the toolbox, the palette
will then open. (Note: to close the palette, select againas figure 3-3 shows:

Objects Zone

Color Zone

Figure 3-3 The palette window

To change the font colour, select the text, you wish to change, select Font Colour from the
Objects Zone in the Palette, and then select the colour in the Colour Zone; the text colour
will change accordingly.

Using the Wizards Manager

Select Open Wizards in the Wizards Manager menu or press the F12 shortcut key to
open the Wizards Manager as figure 3-4 shows:
Chapter 12 KingView For Internet Application 4

Figure 3-4 Wizards manager

The use of the Wizards Manager reduces the difficulty of interface design for the engineer.
Users can easily focus their attention on the work of maintaining the database and strengthening
logic control within the software. Thus the design period is greatly reduced. The wizard is very
easy to use and ensures a consistent appearance throughout the program. The wizards are
available to allow engineers to create their own specific designs. Advanced users can purchase
additional packages containing more wizards and improved driver development software.

Select Reactor from the left side of the Wizards Managerdouble click on any of the
wizard in the reactor group such as , and the Wizards Manager will automatically close. A |_
mark will then appear in place of the cursor. Click the mouse in the picture and the Reactor
will then appear as a Raw_Oil_Reactor. You can then drag the reactor into its proper place,
change its size, and use to label it as a Raw_Oil_Reactor.
Repeating the above operational steps, using different wizards from the Wizards Manager,
such as a Catalyst_Reactor or a Refined_Oil_Reactor. This allows you to develop your picture to
exemplify your specific industry scene.

Finishing the Picture

1. To insert a pipe line select the Pipe tool from the toolbox, the cursor shape will
change to a +, decide where you want the pipeline to start and end then press and hold the left
hand mouse button at the starting point and drag the cursor over to the end point, then double
click and the pipeline graphic will appear in the picture. If the Pipe needs to curve at any point,
place the cursor over the point at which you want the pipe to curve, press and hold the left mouse
Chapter 12 KingView For Internet Application 5

button and move the mouse in one motion to define the curve.
2. To change the colour of the pipeline, select the Pipe, then from the Object zone of the
palette select Line Colour then choose the colour from the Colour zone, the Pipe will then
change colour accordingly. Similarly to change the width of the Pipe, place the cursor over the
pipeline, right click, select Pipeline width from the menu, you can then modify the width
according to your specifications.
3. Open the Wizards Manager, select from the valve wizards group, double-click it and
click the mouse anywhere in the reaction workshop monitor and control picture, the wizard will
then appear and you can move it to Pipe between Raw_Oil_Reactor and Refined_Oil_Reactor,
drag the rim to change its size, label it: Raw_Oil_Output_Valve.
Repeat the above operational steps to add a Catalyst_Output_Valve and a
Refined_Oil_Output_Valve.
We have now finished a simple reaction workshop picture as figure 3-5 shows:

Figure 3-5 Reaction Workshop Monitoring Graph

This can be made simpler or more complicated using the different wizards provided
4. Select Save All from the File menu to save the picture.
Chapter 12 KingView For Internet Application 6

Section 2 Animation Link

In this chapter, you will:

Understand the concept of animation link
Master the method of defining animation link

The Role of the Animation Links

Animation link means the relationship between a graphic in a picture and the database tag.

Setting Up an Animation Depth

1. Double-click the graphic Raw_Oil_Reactor; the Animation link dialogue box for this
object will appear as shown:

Figure 3-6 Animation link dialogue box for Raw_Oil_Depth

The dialogue box is set up as follows:

Tag name: \\local\ Raw_Oil_Depth
Filling colour: green
Minimum: 0 Holding percent: 0
Maximum: 100 Holding percent: 100
2. Select confirm to finish the animation link set-up. From now on raw oil depth will
change in synch with the tag Raw_Oil_Depth.
Chapter 12 KingView For Internet Application 7

Using the same method we can set-up animation links with catalyst reactor and refined oil
reactor, the linked tags are: \\local\Catalyst_Depth, \\local\Refined_Oil_ Depth.
The operator will probably need know the precise value of reactor depth not just the visual
change; this can be set up using the analog value animation link.
3. Select from the tool box, input string #### beside the Raw_Oil_Reactor, this
string is free and when the system is running the content of string will be filled by the output
analog value.
4. Double click on the text object ####, animation link dialog box will popup. Select the
analog value output; the dialogue box will then appear as shown below.

Figure 3-7 Animation link dialogue box for analog value output

Set the dialogue box as follows:

Expression: \\local\Raw_Oil_Depth
Integer digit: 2
Decimal fraction: 0
Align mode: left
5. Select confirm to complete the animation link, when running, the practical value of
Raw_Oil_Reactor will display in textbox ####.
Using the same method we can set up animation link with Catalyst_Reacter and
Refine_Oil_Reactor, the linked tags are: \\local\Catalyst_Depth, \\local\Refined_Oil_Depth.

Set Up Valve Animation

1. Double click the graphic Raw_Output_Valve, the animation link dialogue box will
appear as shown below.
Chapter 12 KingView For Internet Application 8

Figure 3-8 Animation link of Raw_Oil_Output_Valve

The dialogue box is set up as follows:

Tag name (discrete tag): \\local\Raw_Oil_Output_Valve
Colour when closed: red
Colour when open: green
2. Select confirm to finish setting up the raw oil output valve. When the system is running
the valve colour will change from red (closed) to green (open) and vice versa whenever it is
pressed, thus providing the user with control over the valve.
3. Using the same method we can set up animation links for the catalyst output valve and the
refined oil output valve, the linked tags are: \\local\Catalyst_Output_Valve,
\\local\Refined_Oil_Output_Valve.

Set Liquid Flow Animation

1. Define a memory and integer tag in tagname dictionary:

Tag name: Control_Flow
Tag type: memory and integer
Initial value: 0
Minimum: 0
Maximum: 100
2. Select Pipe from the tool box, draw a pipeline in the picture as figure 3-9 shows:
Chapter 12 KingView For Internet Application 9

Figure 3-9 Protract pipeline

3. Double-click the pipeline in the picture and the animation link dialogue box will popup,
click the Flow option in the dialogue box and dialogue box for setting the pipeline flow
connection will appear as figure 3-10 shows:

Figure 3-10 Dialogue for pipeline flow link

Set the dialogue box:

Expression: \\local\Control_Flow
4. \\Local\Control Flow above is a memory and integer tag, which means when the program
is running if you do not change its value it will stay at the initial value (which is 0). Then how to
change its value and make the tag change with liquid flow? Place a text in the picture;
double-click this text and the animation link dialogue box will popup, select analog value
output and animation value output connection dialogue box will popup, click ? to select the
Control_Flow tag as figure 3-11 shows:
Chapter 12 KingView For Internet Application 10

Figure 3-11 Dialogue for analog value output link

Similarly, connect the analog value input; click confirm to finish setting the text animation
link.
5. Save all and switch to the running picture. Modify the text value, the water flow can be
seen in the pipeline as figure 3-12 shows:

Figure 3-12 Water flow in pipeline

Introduction to the Animation Properties

1. Hide Link
Hide Link is used to either display or hide linked objects according to the value of the
expressed condition. Create a text object Liquid Depth is too high to display the alarm status
which will be displayed when the value of the tag Liquid_Depth is greater than 100. The
design status of KingView appears as below:
Chapter 12 KingView For Internet Application 11

Figure 3-13 Hide Link design

Double-click the red circle; click Hide in the animation link dialogue box and popup
Hide Link dialog.

Figure 3-14 Hide link dialogue box

Input the display/hide condition. Click ? to view the defined tag name and the tag range.
Provided the value of the condition expression is 1 (true), the linked object is displayed or
hidden.
2. Blink Link
The Blink link can be used to make the linked object wink when the condition expression is
true. A wink is easily noticed, so is often used to notify the user of abnormal status.
Create a red circle to show the alarm status which can wink when the value of the tag
Liquid depth is greater than 100. The design status of KingView appears as below. When the
value of the tag Liquid_Depth is greater than 100, the red object winks whilst the system is
running.
Chapter 12 KingView For Internet Application 12

Figure 3-15 Blink link design

To set an animation link: click blink in the animation link dialogue box for and the
following dialogue box will popup:

Figure 3-16 Blink link dialogue box

Input Condition expression for the wink, when the condition is true, the graphic begins to
blink; when the expression is false, the graphic will stop blinking. Click ?To view the defined
tag name and tag range.
3. Zoom Link
The zoom link makes the size of the connected graphic change in accordance with a change
in the value of the connection expression. Take a thermometer for example. Draw a rectangle to
represent mercury (Set the Zoom link property for animation link), which will change in
response to the change in the Temperature tag. Click Zoom link in the animation link
dialogue box and the Zoom link dialogue box will popup as figure 3-17 shows:
Chapter 12 KingView For Internet Application 13

Figure 3-17 Zoom link dialogue box

Input the permitted link expression in to the expression edit box, click ? to view the
defined tag name and range.
Expression: \\local\Temperature
Minimum:
Correlative value: 0
Holding percentage: 0
Maximum:
Correlative value: 100
Holding percentage: 100
Select the direction of the zoom change. It has five directions, which are shown by the
indicator next to the Select direction button. The arrow indicates the direction of the change.
The blue point is the reference point. Click Select direction to select the direction. Click
confirm to save the settings, switch to the running picture, and the zoom effect of thermometer
can now be seen.
4. Rotation Link
The rotation link is used to make the position of the object in the picture change according to
the value of the connected expression. For example: Create a pointer, which shows the change of
the tag Pump_Speed based on the angle of the pointer.
Chapter 12 KingView For Internet Application 14

Figure 3-18 A pointer meter

Click Rotation link in the animation link dialogue box:

Figure 3-19 Rotation link dialogue box

Input the link expression. Click ? to view the defined tag name and range.
Expression: \\local\Pump_Speed
Max counterclockwise angle: 0
Correlative value: 0
Max clockwise angle: 360
Correlative value: 100
Click confirm to save the settings then switch to the running picture to view the rotation
status of the meter.
5. Horizontal Slider Input Link
Create a horizontal slider to change the value of the tag Pump_Speed.

Figure 3-20 Horizontal sliders

Chapter 12 KingView For Internet Application 15

Click Horizontal slider input from the animation link dialogue box:

Figure 3-21 Horizontal slider input link dialogue box

Input the tag corresponding to the graphic object, click ? to view the defined tag name and
range.
Expression: \\local\Pump_Speed
Shift distance:
Left: 0
Right: 100
Correlative value:
Leftmost: 0
Rightmost: 100
Click confirm and save then switch to the running picture. When you drag the graphic
object with a horizontal slider input link, the value of the corresponding tag will change. When
tag value changes the position of graphic object will also change.
Set animation link of the vertical slider using the same method.

Bitmap

1. Prepare a section of the picture as figure 3-22 shows:

Chapter 12 KingView For Internet Application 16

Figure 3-22 Bitmap (1)

2. Enter the KingView development system; click the Bitmap icon in the toolbox, using
the mouse draw a rectangle in the picture as figure 3-23 shows:

Figure 3-23 Bitmap (2)

3. Select this bitmap object; right click to open the float style menu as figure 3-24 shows:
Chapter 12 KingView For Internet Application 17

Figure 3-24 Bitmap (3)

4. Select the load from file command to paste the picture, which has been prepared as
figure 3-25 shows:

Figure 3-25 Bitmap (4)

Review

1. Be able to use the various animation links offered by KingView.

2. Be familiar with KingView syntax format and simple script and be able to use it to switch
between screens, exit the project and so on.