< > series

R-30*A/R-30*A Mate CONTROLLER

*Pendant Screen Customize Function

OPERATOR'S MANUAL

B-83114EN/01
 • Original Instructions

Before using the Robot, be sure to read the "FANUC Robot Safety Manual (B-80687EN)" and
understand the content.

• No part of this manual may be reproduced in any form.

• All specifications and designs are subject to change without notice.

The products in this manual are controlled based on Japan’s “Foreign Exchange and
Foreign Trade Law”. The export from Japan may be subject to an export license by the
government of Japan.
Further, re-export to another country may be subject to the license of the government of
the country from where the product is re-exported. Furthermore, the product may also be
controlled by re-export regulations of the United States government.
Should you wish to export or re-export these products, please contact FANUC for advice.

In this manual we have tried as much as possible to describe all the various matters.
However, we cannot describe all the matters which must not be done, or which cannot be
done, because there are so many possibilities.
Therefore, matters which are not especially described as possible in this manual should be
regarded as ”impossible”.
SAFETY
B-83114EN/01 SAFETY PRECAUTIONS

1 SAFETY PRECAUTIONS
For the safety of the operator and the system, follow all safety precautions when operating a robot and its
peripheral devices installed in a work cell.
In addition, refer to the “FANUC Robot SAFETY HANDBOOK (B-80687EN)”.

1.1 WORKING PERSON

The personnel can be classified as follows.

Operator:
• Turns robot controller power ON/OFF
• Starts robot program from operator’s panel

Programmer or teaching operator:

• Operates the robot
• Teaches robot inside the safety fence

Maintenance engineer:
• Operates the robot
• Teaches robot inside the safety fence
• Maintenance (adjustment, replacement)

- An operator cannot work inside the safety fence.

- A programmer, teaching operator, and maintenance engineer can work inside the safety fence. The
working activities inside the safety fence include lifting, setting, teaching, adjusting, maintenance,
etc..
- To work inside the fence, the person must be trained on proper robot operation.

During the operation, programming, and maintenance of your robotic system, the programmer, teaching
operator, and maintenance engineer should take additional care of their safety by using the following safety
precautions.

- Use adequate clothing or uniforms during system operation

- Wear safety shoes
- Use helmet

1.2 WORKING PERSON SAFETY

Working person safety is the primary safety consideration. Because it is very dangerous to enter the
operating space of the robot during automatic operation, adequate safety precautions must be observed.
The following lists the general safety precautions. Careful consideration must be made to ensure working
person safety.

(1) Have the robot system working persons attend the training courses held by FANUC.

FANUC provides various training courses. Contact our sales office for details.

s-3
 SAFETY PRECAUTIONS B-83114EN/01

(2) Even when the robot is stationary, it is possible that the robot is still in a ready to move state, and is
waiting for a signal. In this state, the robot is regarded as still in motion. To ensure working person
safety, provide the system with an alarm to indicate visually or aurally that the robot is in motion.
(3) Install a safety fence with a gate so that no working person can enter the work area without passing
through the gate. Install an interlocking device, a safety plug, and so forth in the safety gate so that the
robot is stopped as the safety gate is opened.

The controller is designed to receive this interlocking signal of the door switch. When the gate is
opened and this signal received, the controller stops the robot in an emergency. For
connection, see Fig.1.2 (a) and Fig.1.2 (b).

(4) Provide the peripheral devices with appropriate grounding (Class A, Class B, Class C, and Class D).
(5) Try to install the peripheral devices outside the work area.
(6) Draw an outline on the floor, clearly indicating the range of the robot motion, including the tools such
as a hand.
(7) Install a mat switch or photoelectric switch on the floor with an interlock to a visual or aural alarm that
stops the robot when a working person enters the work area.
(8) If necessary, install a safety lock so that no one except the working person in charge can turn on the
power of the robot.

The circuit breaker installed in the controller is designed to disable anyone from turning it on
when it is locked with a padlock.

(9) When adjusting each peripheral device independently, be sure to turn off the power of the robot.

RP1
Pulsecoder
RI/RO,XHBK,XROT
RM1
Motor power/brake

EARTH

Safety fence

Interlocking device and safety plug that are activated if the

gate is opened.

Fig. 1.2 (a) Safety Fence and Safety Gate

s-4
B-83114EN/01 SAFETY PRECAUTIONS

Dual chain
Panel board （Note）

EAS1 In case of R-30iA

Terminals EAS1,EAS11,EAS2,EAS21 or FENCE1,FENCE2
EAS11 are provided on the operation box or on the terminal block
of the printed circuit board.
EAS2
In case of R-30iA Mate
EAS21 Terminals EAS1,EAS11,EAS2,EAS21 are provided
on the emergency stop board or connector panel.
(in case of Open air type)

Termianls FENCE1,FENCE2 are provided

on the emergency stop board.
Single chain
Panel board
Refer to controller maintenance manual for details.
FENCE1

FENCE2

Fig.1.2 (b) Connection Diagram for Safety Fence

1.2.1 Operator Safety

The operator is a person who operates the robot system. In this sense, a worker who operates the teach
pendant is also an operator. However, this section does not apply to teach pendant operators.

(1) If you do not have to operate the robot, turn off the power of the robot controller or press the
EMERGENCY STOP button, and then proceed with necessary work.
(2) Operate the robot system at a location outside of the safety fence
(3) Install a safety fence with a safety gate to prevent any worker other than the operator from entering the
work area unexpectedly and to prevent the worker from entering a dangerous area.
(4) Install an EMERGENCY STOP button within the operator’s reach.

The robot controller is designed to be connected to an external EMERGENCY STOP button.

With this connection, the controller stops the robot operation when the external EMERGENCY
STOP button is pressed. See the diagram below for connection.

Dual chain
External stop button
Panel board
EES1
（Note）
EES11 Connecto EES1and EES11,EES2 and EES21or EMGIN1and EMGIN2.

EES2 In case of R-30iA

EES1,EES11,EES2,EES21 or EMGIN1,EMGIN2 are on the panel board.
EES21
In case of R-30iA Mate
EES1,EES11,EES2,EES21　are on the emergency stop board
or connector panel (in case of Open air type),.
Single chain EMGIN1,EMGIN2　are on the emergency stop board.
External stop button Refer to the maintenance manual of the controller for details.
Panel board
EMGIN1
EMGIN2

Fig.1.2.1 Connection Diagram for External Emergency Stop Button

s-5
 SAFETY PRECAUTIONS B-83114EN/01

1.2.2 Safety of the Teach Pendant Operator

While teaching the robot, the operator must enter the work area of the robot. The operator must ensure the
safety of the teach pendant operator especially.

(1) Unless it is specifically necessary to enter the robot work area, carry out all tasks outside the area.
(2) Before teaching the robot, check that the robot and its peripheral devices are all in the normal operating
condition.
(3) If it is inevitable to enter the robot work area to teach the robot, check the locations, settings, and other
conditions of the safety devices (such as the EMERGENCY STOP button, the DEADMAN switch on
the teach pendant) before entering the area.
(4) The programmer must be extremely careful not to let anyone else enter the robot work area.

Our operator panel is provided with an emergency stop button and a key switch (mode switch)
for selecting the automatic operation mode (AUTO) and the teach modes (T1 and T2). Before
entering the inside of the safety fence for the purpose of teaching, set the switch to a teach
mode, remove the key from the mode switch to prevent other people from changing the
operation mode carelessly, then open the safety gate. If the safety gate is opened with the
automatic operation mode set, the robot enters the emergency stop state. After the switch is set
to a teach mode, the safety gate is disabled. The programmer should understand that the
safety gate is disabled and is responsible for keeping other people from entering the inside of
the safety fence.

Our teach pendant is provided with a DEADMAN switch as well as an emergency stop button.
These button and switch function as follows:
(1) Emergency stop button: Causes an emergency stop when pressed.
(2) DEADMAN switch: Functions differently depending on the mode switch setting status.
(a) Automatic operation mode: The DEADMAN switch is disabled.
(b) Teach mode: Causes an emergency stop when the operator releases the DEADMAN
switch or when the operator presses the switch strongly.
Note)The DEADMAN switch is provided to place the robot in the emergency stop state when
the operator releases the teach pendant or presses the pendant strongly in case of emergency.
The R-30iA/ R-30iA Mate employs a 3-position DEADMAN switch, which allows the robot to
operate when the 3-position DEADMAN switch is pressed to its intermediate point. When the
operator releases the DEADMAN switch or presses the switch strongly, the robot enters the
emergency stop state.

The operator’s intention of starting teaching is determined by the controller through the dual
operation of setting the teach pendant enable/disable switch to the enable position and
pressing the DEADMAN switch. The operator should make sure that the robot could operate in
such conditions and be responsible in carrying out tasks safely.

The teach pendant, operator panel, and peripheral device interface send each robot start
signal. However the validity of each signal changes as follows depending on the mode switch
and the DEADMAN switch of the operator panel, the teach pendant enable switch and the
remote condition on the software.

s-6
B-83114EN/01 SAFETY PRECAUTIONS

In case of R-30iA Controller or CE or RIA specification of R-30iA Mate Controller

Software
Teach pendant
Mode remote Teach pendant Operator panel Peripheral device
enable switch
condition
Local Not allowed Not allowed Not allowed
On
AUTO Remote Not allowed Not allowed Not allowed
mode Local Not allowed Allowed to start Not allowed
Off
Remote Not allowed Not allowed Allowed to start
Local Allowed to start Not allowed Not allowed
On
T1, T2 Remote Allowed to start Not allowed Not allowed
mode Local Not allowed Not allowed Not allowed
Off
Remote Not allowed Not allowed Not allowed

You must make three-mode switch T1/T2 for RIA specification to start from Teach pendant.

In case of standard specification of R-30iA Mate Controller

Teach pendant enable switch Software remote condition Teach pendant Peripheral device
On Ignored Allowed to start Not allowed
Off Local Not allowed Not allowed
Remote Not allowed Allowed to start

(5) (Only when R-30iA Controller or CE or RIA specification of R-30iA Mate controller is selected.) To
start the system using the operator’s panel, make certain that nobody is the robot work area and that
there are no abnormal conditions in the robot work area.
(6) When a program is completed, be sure to carry out a test run according to the procedure below.
(a) Run the program for at least one operation cycle in the single step mode at low speed.
(b) Run the program for at least one operation cycle in the continuous operation mode at low speed.
(c) Run the program for one operation cycle in the continuous operation mode at the intermediate
speed and check that no abnormalities occur due to a delay in timing.
(d) Run the program for one operation cycle in the continuous operation mode at the normal
operating speed and check that the system operates automatically without trouble.
(e) After checking the completeness of the program through the test run above, execute it in the
automatic operation mode.
(7) While operating the system in the automatic operation mode, the teach pendant operator should leave
the robot work area.

1.2.3 Safety of the Maintenance Engineer

For the safety of maintenance engineer personnel, pay utmost attention to the following.

(1) During operation, never enter the robot work area.

(2) Except when specifically necessary, turn off the power of the controller while carrying out
maintenance. Lock the power switch, if necessary, so that no other person can turn it on.
(3) If it becomes necessary to enter the robot operation range while the power is on, press the emergency
stop button on the operator panel, or the teach pendant before entering the range. The maintenance
personnel must indicate that maintenance work is in progress and be careful not to allow other people
to operate the robot carelessly.
(4) When disconnecting the pneumatic system, be sure to reduce the supply pressure.
(5) Before the start of teaching, check that the robot and its peripheral devices are all in the normal
operating condition.
(6) Do not operate the robot in the automatic mode while anybody is in the robot work area.
(7) When you maintain the robot alongside a wall or instrument, or when multiple workers are working
nearby, make certain that their escape path is not obstructed.

s-7
 SAFETY PRECAUTIONS B-83114EN/01

(8) When a tool is mounted on the robot, or when any moving device other than the robot is installed, such
as belt conveyor, pay careful attention to its motion.
(9) If necessary, have a worker who is familiar with the robot system stand beside the operator panel and
observe the work being performed. If any danger arises, the worker should be ready to press the
EMERGENCY STOP button at any time.
(10) When replacing or reinstalling components, take care to prevent foreign matter from entering the
system.
(11) When handling each unit or printed circuit board in the controller during inspection, turn off the circuit
breaker to protect against electric shock.
If there are two cabinets, turn off the both circuit breaker.
(12) When replacing parts, be sure to use those specified by FANUC.
In particular, never use fuses or other parts of non-specified ratings. They may cause a fire or result in
damage to the components in the controller.
(13) When restarting the robot system after completing maintenance work, make sure in advance that there
is no person in the work area and that the robot and the peripheral devices are not abnormal.

1.3 SAFETY OF THE TOOLS AND PERIPHERAL DEVICES

1.3.1 Precautions in Programming

(1) Use a limit switch or other sensor to detect a dangerous condition and, if necessary, design the program
to stop the robot when the sensor signal is received.
(2) Design the program to stop the robot when an abnormal condition occurs in any other robots or
peripheral devices, even though the robot itself is normal.
(3) For a system in which the robot and its peripheral devices are in synchronous motion, particular care
must be taken in programming so that they do not interfere with each other.
(4) Provide a suitable interface between the robot and its peripheral devices so that the robot can detect the
states of all devices in the system and can be stopped according to the states.

1.3.2 Precautions for Mechanism

(1) Keep the component cells of the robot system clean, and operate the robot in an environment free of
grease, water, and dust.
(2) Employ a limit switch or mechanical stopper to limit the robot motion so that the robot or cable does
not strike against its peripheral devices or tools.
(3) Observe the following precautions about the mechanical unit cables. When theses attentions are not
kept, unexpected troubles might occur.
• Use mechanical unit cable that have required user interface.
• Don’t add user cable or hose to inside of mechanical unit.
• Please do not obstruct the movement of the mechanical unit cable when cables are added to
outside of mechanical unit.
• In the case of the model that a cable is exposed, Please do not perform remodeling (Adding a
protective cover and fix an outside cable more) obstructing the behavior of the outcrop of the
cable.
• Please do not interfere with the other parts of mechanical unit when install equipments in the
robot.

s-8
B-83114EN/01 SAFETY PRECAUTIONS

1.4 SAFETY OF THE ROBOT MECHANISM

1.4.1 Precautions in Operation

(1) When operating the robot in the jog mode, set it at an appropriate speed so that the operator can
manage the robot in any eventuality.
(2) Before pressing the jog key, be sure you know in advance what motion the robot will perform in the
jog mode.

1.4.2 Precautions in Programming

(1) When the work areas of robots overlap, make certain that the motions of the robots do not interfere
with each other.
(2) Be sure to specify the predetermined work origin in a motion program for the robot and program the
motion so that it starts from the origin and terminates at the origin.
Make it possible for the operator to easily distinguish at a glance that the robot motion has terminated.

1.4.3 Precautions for Mechanisms

(1) Keep the work areas of the robot clean, and operate the robot in an environment free of grease, water,
and dust.

1.4.4 Procedure to move arm without drive power in emergency or

abnormal situations
For emergency or abnormal situations (e.g. persons trapped in or by the robot), brake release unit can be
used to move the robot axes without drive power.
Please refer to controller maintenance manual and mechanical unit operator’s manual for using method of
brake release unit and method of supporting robot.

1.5 SAFETY OF THE END EFFECTOR

1.5.1 Precautions in Programming

(1) To control the pneumatic, hydraulic and electric actuators, carefully consider the necessary time delay
after issuing each control command up to actual motion and ensure safe control.
(2) Provide the end effector with a limit switch, and control the robot system by monitoring the state of the
end effector.

s-9
B-83114EN/01 TABLE OF CONTENTS

TABLE OF CONTENTS
SAFETY.......................................................................................................s-1
1 OVERVIEW ............................................................................................. 1
1.1 OVERVIEW ................................................................................................... 1
1.2 HARDWARE REQUIREMENTS .................................................................... 1
1.3 SOFTWARE REQUIREMENTS..................................................................... 1
1.4 RESTRICTIONS ............................................................................................ 2
1.5 CAUTIONS .................................................................................................... 2
2 iPENDANT WEB BROWSER ................................................................. 3
2.1 OVERVIEW ................................................................................................... 3
2.2 BROWSER MENUS ...................................................................................... 3
3 USING FANUC iPENDANT CONTROLS ............................................... 5
3.1 iPENDANT CONTROLS SUMMARY ............................................................ 5
3.2 RECOMMENDED ENVIRONMENT .............................................................. 5
3.3 INSTALLATION ............................................................................................. 5
3.4 Control Features Summary............................................................................ 7
4 FRONTPAGE .......................................................................................... 9
4.1 WORKING with SITE..................................................................................... 9
4.2 WORKING with PAGES ................................................................................ 9
4.2.1 File Names..............................................................................................................10
4.2.2 Meta Tags ...............................................................................................................11
4.2.3 Page Properties .......................................................................................................11
4.2.4 Window Size ..........................................................................................................11
4.2.5 Positioning..............................................................................................................13
4.2.6 HTML Editing........................................................................................................13
4.2.7 Fonts .......................................................................................................................13
4.2.8 Images ....................................................................................................................13
4.2.9 Links.......................................................................................................................13
4.2.10 Frames ....................................................................................................................14
4.2.11 Themes and Styles..................................................................................................14
4.3 PUBLISHING YOUR SITE........................................................................... 14
5 MAKING A CUSTOM iPENDANT SCREEN......................................... 17
5.1 CONTROL ARRANGEMENT ...................................................................... 17
5.2 COMMON CONTROL PROPERTIES ......................................................... 18
5.2.1 Object Tag ..............................................................................................................18
5.2.2 DataType and DataIndex........................................................................................18
5.2.3 Images ....................................................................................................................19
5.2.4 Border.....................................................................................................................20
5.2.5 Colors .....................................................................................................................20
5.2.6 Fonts .......................................................................................................................21
5.2.7 Alignment...............................................................................................................21
5.2.8 Monitor...................................................................................................................21
5.2.9 Function Key ViewType ........................................................................................22
5.2.10 Caption ...................................................................................................................22
5.2.11 Pulse DO.................................................................................................................23
c-1
TABLE OF CONTENTS B-83114EN/01

5.2.12 Port Simulation.......................................................................................................24

5.2.13 Positions .................................................................................................................24
5.2.14 Indirect DataType and DataIndex ..........................................................................27
5.2.15 PANEID .................................................................................................................28
5.2.16 Pipe.........................................................................................................................28
5.2.17 SetFocus .................................................................................................................29
5.2.18 ClickMe ..................................................................................................................29
5.3 Control Description ...................................................................................... 29
5.3.1 Label Control..........................................................................................................30
5.3.2 EditBox Control .....................................................................................................31
5.3.3 ToggleLamp Control ..............................................................................................32
5.3.4 CommandButton Control .......................................................................................35
5.3.5 ToggleButton Control.............................................................................................37
5.3.6 Multi Control..........................................................................................................39
5.3.7 AutoChange Control...............................................................................................40
5.3.8 MenuChange Control .............................................................................................41
5.3.9 ButtonChange Control............................................................................................42
5.3.10 ComboBox Control ................................................................................................43
5.3.11 Execution Control...................................................................................................46
5.4 CONTROL DESIGN ADVICE ...................................................................... 46
5.4.1 Error Code Dialog ..................................................................................................46
5.4.2 Error Code Messages..............................................................................................47

6 USING THE CHART CONTROL ........................................................... 49

6.1 CONTROL ARRANGEMENT ...................................................................... 51
6.2 COMMON CHART CONTROL PROPERTIES ............................................ 52
6.2.1 Object Tag ..............................................................................................................52
6.2.2 Fonts .......................................................................................................................52
6.2.3 General Chart Properties ........................................................................................53
6.2.3.1 Caption & CaptionFontSize............................................................................... 53
6.2.3.2 Annotation & AnnotateFontSize ....................................................................... 54
6.2.3.3 Name.................................................................................................................. 54
6.2.3.4 Border ................................................................................................................ 54
6.2.3.5 Foreground & Background Colors .................................................................... 54
6.2.3.6 Pipe .................................................................................................................... 54
6.2.3.7 PipeMonRate ..................................................................................................... 55
6.2.4 Chart config Tab.....................................................................................................55
6.2.4.1 ChartType .......................................................................................................... 56
6.2.4.2 Orientation ......................................................................................................... 56
6.2.4.3 LabelFontSize .................................................................................................... 56
6.2.4.4 LineScaleActive................................................................................................. 57
6.2.4.5 DataFontSize ..................................................................................................... 57
6.2.4.6 DataFormat ........................................................................................................ 58
6.2.4.7 DataShowValues ............................................................................................... 58
6.2.4.8 SampleScaleAspect............................................................................................ 58
6.2.4.9 SampleScale....................................................................................................... 58
6.2.4.10 SampleScaleFormat ........................................................................................... 59
6.2.4.11 SampleGrid ........................................................................................................ 59
6.2.4.12 DataScaleFormat(Line Chart)............................................................................ 59
6.2.4.13 DataScale ........................................................................................................... 59
6.2.4.14 DataScaleFormat (Bar Chart) ............................................................................ 60
6.2.4.15 DataGrid ............................................................................................................ 60
6.2.4.16 GridColor........................................................................................................... 60
6.2.4.17 GridType............................................................................................................ 60
6.2.5 Channel config Tab ................................................................................................61
c-2
B-83114EN/01 TABLE OF CONTENTS
6.2.5.1 ChN_Name ........................................................................................................ 62
6.2.5.2 ChN_Color......................................................................................................... 62
6.2.5.3 ChN_Source....................................................................................................... 62
6.2.5.4 ChN_Data .......................................................................................................... 62
6.2.5.5 ChN_Digital....................................................................................................... 63
6.2.5.6 ChN_State.......................................................................................................... 63
6.2.5.7 ChN_Rate .......................................................................................................... 63
6.2.5.8 ChN_DataScale.................................................................................................. 63
6.2.5.9 ChN_DataGrid................................................................................................... 63
6.2.5.10 ChN_AutoRange ............................................................................................... 64
6.2.6 Miscellaneous.........................................................................................................64
6.2.6.1 SampleMarkerN................................................................................................. 64
6.2.6.2 SampleMarkerColor .......................................................................................... 64
6.2.6.3 ChN_DataMarkerN............................................................................................ 64
6.2.6.4 Ch_Data_N ........................................................................................................ 65
6.2.6.5 ChN_Clear ......................................................................................................... 65
6.2.6.6 ChartClear.......................................................................................................... 65
6.3 CHART CONTROL DESCRIPTION ............................................................ 65
6.3.1 Bar Chart Control ...................................................................................................65
6.3.2 Line Chart Control..................................................................................................67
6.4 PROPERTIES with ADDITIONAL OPTIONAL VALUES.............................. 69
7 USING THE DRAWING CONTROL ...................................................... 70
7.1 CONTROL ARRANGEMENT ...................................................................... 71
7.2 COMMON DRAWING CONTROL PROPERTIES ....................................... 72
7.2.1 Object Tag ..............................................................................................................73
7.2.2 Fonts .......................................................................................................................73
7.2.3 Draw Tab................................................................................................................74
7.2.3.1 Caption............................................................................................................... 74
7.2.3.2 Name.................................................................................................................. 74
7.2.3.3 Foreground & Background Colors .................................................................... 75
7.2.3.4 Pipe .................................................................................................................... 75
7.2.3.5 PipeMonRate ..................................................................................................... 75
7.2.3.6 Border ................................................................................................................ 75
7.2.3.7 FastLoad ............................................................................................................ 76
7.2.4 Draw2 Tab..............................................................................................................76
7.2.4.1 Layer control...................................................................................................... 76
7.2.4.2 Scale................................................................................................................... 77
7.2.4.3 InvertY............................................................................................................... 77
7.2.4.4 Data.................................................................................................................... 77
7.2.5 The Entities.............................................................................................................77
7.2.5.1 Text.................................................................................................................... 77
7.2.5.2 Line.................................................................................................................... 78
7.2.5.3 Path .................................................................................................................... 78
7.2.5.4 Circ .................................................................................................................... 78
7.2.5.5 Rect.................................................................................................................... 78
7.2.5.6 Diam .................................................................................................................. 79
7.2.5.7 Imag ................................................................................................................... 79
7.2.6 Miscellaneous Properties........................................................................................79
7.2.6.1 Clear................................................................................................................... 80
7.2.6.2 Delete................................................................................................................. 80
7.2.6.3 LayerOn ............................................................................................................. 80
7.2.6.4 LayerOff ............................................................................................................ 80
7.2.7 Dynamic Entity Modifications ...............................................................................80

8 USING THE GRID CONTROL............................................................... 81

c-3
TABLE OF CONTENTS B-83114EN/01

8.1 INSERTING A GRID CONTROL ON A WEB PAGE.................................... 82

8.2 COMMON GRDI CONTROL PROPERTIES ............................................... 83
8.2.1 Object Tag ..............................................................................................................83
8.2.2 Fonts .......................................................................................................................84
8.2.3 Grid Tab .................................................................................................................85
8.2.3.1 Caption............................................................................................................... 85
8.2.3.2 Foreground & Background Colors .................................................................... 85
8.2.3.3 Pipe .................................................................................................................... 86
8.2.3.4 Pipe Mon Rate ................................................................................................... 86
8.2.3.5 Border ................................................................................................................ 86
8.2.3.6 FastLoad ............................................................................................................ 87
8.3 DISPLAY CONCEPTS................................................................................. 87
8.3.1 Conventions............................................................................................................87
8.3.2 Alignment...............................................................................................................88
8.3.3 Display, Pan and Zoom ..........................................................................................89
8.3.4 Dynamic Display ....................................................................................................90
8.3.5 Rendering ...............................................................................................................91
8.4 XML TO THE GRID ..................................................................................... 91
8.4.1 XML Tag................................................................................................................93
8.4.2 GRID Tag ...............................................................................................................93
8.4.3 TILE Tag ................................................................................................................94
8.4.4 TEXT Tag...............................................................................................................94
8.4.5 LINE Tag................................................................................................................95
8.4.6 RECTANGLE Tag .................................................................................................96
8.4.7 POLYGON Tag......................................................................................................97
8.4.8 CIRCLE Tag...........................................................................................................98
8.4.9 IMAGE Tag............................................................................................................99
8.4.10 BUTTON Tag.......................................................................................................100
8.4.11 DISPLAY Tag......................................................................................................102
8.4.12 Scroll Bars with The DISPLAY Tag....................................................................103
8.4.13 DELTILE Tag ......................................................................................................104
8.4.14 Modifying SHAPES .............................................................................................105
8.4.15 Modifying TILES .................................................................................................106
8.4.16 Dynamic Data.......................................................................................................106
8.4.16.1 Using the Pipe parameter................................................................................. 106
8.4.16.2 Using the Data parameter ................................................................................ 106

APPENDIX
A COMMANDING LINKS FROM KAREL............................................... 111
A.1 FORCE_LINK BUILT-IN ROUTINE ........................................................... 111
A.2 GENERIC LINKING FUNCTIONALITY...................................................... 111
A.3 GENERIC LINKING DETAILED INFORMATION....................................... 112
B DISCTRL_DIAG BUILT-IN .................................................................. 114
B.1 DIALOG BOX XML FILE............................................................................ 115
B.1.1 Tags and Attributes ..............................................................................................116
B.1.1.1 <DIALOG> </DIALOG>................................................................................ 116
B.1.1.2 <TEXT> </TEXT>.......................................................................................... 117
B.1.1.3 <DLGTILE> </DLGTILE> ............................................................................ 117
B.1.1.4 <object> </object>........................................................................................... 117
B.1.1.5 XML content example ..................................................................................... 118
B.1.1.6 KAREL program example ............................................................................... 119

c-4
B-83114EN/01 TABLE OF CONTENTS

C FLOW OF CREATION OF CUSTOM SCREEN .................................. 120

D USE OF TABLE TO ARRANGE CONTROLS .................................... 128

c-5
B-83114EN/01 1.OVERVIEW

1 OVERVIEW
This document is meant to provide detailed information on how to create, and use these custom screens
on an iPendant. Please refer to the FANUC Robotics SYSTEM R-30iA Controller Setup and Operations
Manual for information relating to iPendant screen navigation and iPendant-specific functions.

＊ NetFront by ACCESS Co. Ltd. is adopted for the Internet browser used in this product.

＊ NetFront is registered trademark of Access Co. Ltd. in Japan.

＊ Part of the software in this product includes modules developed by Independent JPEG Group.
＊ This product uses technology included in LZW patent of Unisys Co. Ltd. And is subject to the
following restrictions.
(1) Do not modify or copy the software of this product.
(2) Do not sell or provide any software derived from this product.
(3) Do not use the software of this product for purposes other than intended.
(4) Do not use technology included in LZW patent of Unisys Co. Ltd. without this product.

＊ Microsoft, Windows. WindowsXP, ActiveX, FrontPage are registered trademark of Microsoft

Corporation.
＊ All other product names identified throughout this manual are trademarks or registered trademarks
of their respective companies.

1.1 OVERVIEW
Putting iPendant control (parts of screens) on Web page enables followings in custom screens.
• Dynamic display and input of Register, System and KAREL Variables and I/O values
• Change between web pages (Manually and Automatically).
There are various iPendant controls. Please refer to Chapter 2 for overview of iPendant control. Please
refer to Section 2.4 to see what kinds of iPendant control you can use. For details of each control, please
refer to Chapter 4, 5, 6,7 and 8. To grasp big picture of creating custom screen, please refer to Appendix
C.

1.2 HARDWARE REQUIREMENTS

• iPendant
iPendant with touch panel is highly recommended.

1.3 SOFTWARE REQUIREMENTS

• Windows XP/XP Pro
• ROBOGUIDE
• Microsoft® FrontPage® 2003
Please refer to Section 2.3 for recommended developer environment and confirmation of installation.
Microsoft® FrontPage® 2003 and former version of FrontPage are referred simply as FrontPage
hereafter.

-1-
1.OVERVIEW B-83114EN/01

1.4 RESTRICTIONS
• Display on FrontPage, ROBOGUIDE and real controller are not same completely.
Please confirm display of screen on real iPendant.
• When viewing your page in the integrated browser the FANUC iPendant Controls will appear static,
since they are not connected to the robot controller.

1.5 CAUTIONS
Web pages are normally created on FrontPage and displayed on ROBOGUIDE. Then display of the pages
is finally confirmed on real iPendant. For these steps, following knowledge and operations are required. It
is desired to have basic knowledge of HTML.

• Basic operation to display screens on robot controller

• Adding link of stm file in Favorite of Browser screen and display of the file.
• Basic operation of ROBOGUIDE
For example, following operations are required.
• Creation of work cell
• Operation of virtual iPendant to display screens
• Identification of path of MC folder
• Basic operation of FrontPage
For example, following operations are required.
• To specify a directory as “site” of FrontPage
• To grasp tree structure of site
• Creation of new file in site
Please refer to Chapter 3 on creating Web page by FrontPage

• You can operate only one button on a screen at one time. You cannot use 2 or more buttons at the
same time.
• If you press 2 or more places on touch panel, touch panel may recognize wrong place, which is
different from touched place. Please touch only one place on touch panel.
• When touch panel is broken, the panel can recognize wrong place that are different from place
operator touched. Don’t use touch panel to set signals that can affect safety of system.
• Use touch panel by finger or dedicated pen for touch panel operation. If you use sharp object like
usual pens, touch panel may get broken
• When following dialog box is displayed on iPendant, touch panel may be broken. Turn down robot
controller and exchange iPendants

-2-
B-83114EN/01 2.iPENDANT WEB BROWSER

2 iPENDANT WEB BROWSER

2.1 OVERVIEW
The iPendant uses NetFront Browser v2.6, a web browser developed by ACCESS CO., LTD. ®. The
web site can be found at http://www.access.co.jp/english/products/nf.html.

Some of the major features of NetFront Browser are:

• HTML 3.2 + Frames with partial support for HTML 4.0
• JavaScript 1.1 equivalent
• Cookies
• Browser 16Kbyte Cache Support
• GIF, JPEG (progressive JPEG)

2.2 BROWSER MENUS

The iPendant BROWSER is available from the BROWSER entry on the main menu. (Typically the
second page of the Main Menu)

The iPendant BROWSER screen allows you to access web pages on the robot or web pages on any device
on the network with the robot. Please refer to “R-30iA/R-30iA Mate CONTROLLER Ethernet Function
OPERATOR’S MANUAL” (B-82974EN/01) for information on using the robot’s web server.

You can add your own links to the BROWSER [TYPE] menu, which is displayed by the F1 key. Ten
links are available in this [TYPE] menu. They are defined in the system variable $TX_SCREEN[n]
where:

• $TX_SCREEN[n].$DESTINATION specifies the browser link/URL.

• $TX_SCREEN[n].$SCREEN_NAME specifies the screen name to display in the menu.
Where n is 1 to 10

The screen name must be provided or the entry will not be shown.

Some example links are shown below:

Link Description
"http://pderob011" Default web page for robot pderob011
"http://pderob011/fr/example.htm" fr:example.htm on robot pderob011
"/fr/example.htm" example.htm which is on fr: device, uses relative address
based on connection
"http://172.22.200.202:9001" Default web page for a Virtual Robot on a PC
Please refer to “R-30iA/R-30iA Mate CONTROLLER Ethernet Function OPERATOR’S MANUAL
“ (B-82974EN/01) for more information. Some example setting of $TX_SCREEN[ ] and TYPE menu are
shown below.

-3-
2.iPENDANT WEB BROWSER B-83114EN/01

$TX_SCREEN[1].$DESTINATION = ‘http://pderob011’
$TX_SCREEN[1].$SCREEN_NAME = ‘pderob011’

$TX_SCREEN[2].$DESTINATION = ‘/fr/example.htm’
$TX_SCREEN[2].$SCREEN_NAME = ‘Example’

$TX_SCREEN[3].$DESTINATION = ‘/fr/status.htm’
$TX_SCREEN[3].$SCREEN_NAME = ‘User3’

NOTE
Don’t remove or overwrite pages set in $TX_SCREEN[ ] as default setting. They
are used by system software.

-4-
B-83114EN/01 3.USING FANUC iPENDANT CONTROLS

3 USING FANUC iPENDANT CONTROLS

The FANUC iPendant Controls are Microsoft ActiveX controls that allow you to create operator panel
context for the iPendant.

NOTE
Other Microsoft ActiveX controls cannot be used with the iPendant.

3.1 iPENDANT CONTROLS SUMMARY

The iPendant Controls main functions are as follows:

• Permit the dynamic display and input of Register, System and KAREL Variables, and I/O values.
• Change between web pages (Manually and Automatically).

3.2 RECOMMENDED ENVIRONMENT

The recommended developer environment is:

• Windows XP/XP Pro

• Microsoft® FrontPage® 2003 (All references to FrontPage and FrontPage screens in this
document are for FrontPage 2003)

FrontPage 2003 is the recommended application for development because it interacts with ActiveX
controls by displaying custom property pages and showing more information at design time. Other web
authoring tools can also be used; however you may have to enter all the ActiveX control parameters
manually.

3.3 INSTALLATION
To create custom screen, FANUC iPendant Controls must be installed to your PC. Please install
ROBOGUIDE because install of ROBOGUIDE installs automatically iPendant Controls, too. To confirm
installation, use following procedure.

Procedure 3-1 Confirmation of installation

Step
1 Start Microsoft FrontPage and open a new blank page. Refer to your FrontPage documentation for
more information.
2 Select Insert | Web Component from the menu bar. This brings up the Insert Web Component dialog
box.

-5-
3.USING FANUC iPENDANT CONTROLS B-83114EN/01

3 Select Advanced Controls in Component type list and select ActiveX Control in Choose a control
list. Then press Next. Dialog box similar to following is displayed.

4 If FANUC iPendant Controls do not appear, select Customize button. If they were installed
properly, you will see a screen where you can select all the FANUC iPendant Controls.

-6-
B-83114EN/01 3.USING FANUC iPENDANT CONTROLS

5 If you insert an ActiveX component, and it shows up with the following image in FrontPage:

You most likely installed the .ocx on a drive that is currently no longer available. (i.e. a networked
drive)

3.4 Control Features Summary

The following is a brief description of each control that is included with the FANUC Robotics iPendant
Controls:

• Label
Used to display the value of Register, Variable and I/O. Also used to display fixed strings and the
combination of fixed strings and digits.
• EditBox
Used to change the value of a Register, a Variable or an I/O point. Popup keyboard and iPendant
numeric keypad are supported.
• ToggleLamp
Used to change the color or image displayed by the control if the value of a Register, a Variable or
an I/O point, fulfills the specified single condition. Three types of lamps are available: panel, circle,
or an image. This control can also be used to display a fixed image.
• CommandButton
Used to write the specified value to a Register, a Variable or an I/O point. Two types of buttons are
available: rectangular pushbutton and image.
• ToggleButton
Used to write one of two specified values to a Register, a Variable or an I/O point based on the state
of the button. Three types of buttons are available: rectangular pushbutton, checkbox and image.
• Multi
-7-
3.USING FANUC iPENDANT CONTROLS B-83114EN/01

Used to display up to 10 different images or strings based on the value of a Register, a Variable or
an I/O point. It can be used to create simple animations like a progress bar.
• AutoChange
Used to change a page being displayed automatically based on the value of a Register, a Variable or
an I/O point. This can be used to change the displayed page from a TP or KAREL program.
• MenuChange
Used to select a page to be displayed from a popup menu. The pages are displayed when the button
is pressed. Two types of buttons are available: rectangular pushbutton and image.
• ButtonChange
Used to display the specified page. Two types of buttons are available: rectangular pushbutton and
image.
• ComboBox
Used to change the value of a Register, a Variable or an I/O point using a popup menu selection.
• Execution
Used to run the specified KAREL program when the page is loaded.
• Chart
Used to graphically display data from the controller as a bar or line chart.
• Drawing 2D
Used to draw Text, Lines, Paths, Circles, Rectangles, Diamonds or images on the iPendant
• GRID
Used to render Text, Lines, Circles, Rectangles, and Images registered to a grid.

Each control has several settable properties, which will be described later, but in general each control
allows you to set:

• Which numeric register, System variable, KAREL variable, or I/O type to use.
• The border of the control, which can be 3D (thin and bold border), straight (black and forecolor) and
none.
• The size, color, and font used by the control.

Chapter 5 describes these controls in detail.

-8-
B-83114EN/01 4.FRONTPAGE

4 FRONTPAGE
This chapter gives tips on using FrontPage 2003 to develop web pages for the iPendant. Refer to the
FrontPage documentation for complete details.

4.1 WORKING with SITE

FrontPage works with what is called a site to create and manage your site development. A site is all the
pages contained in your website. Whenever you work within FrontPage, you want to make sure you are
working within a site. If you are working with ROBOGUIDE, use the Open Site commands under File,
and point to the MC directory of your virtual robot as your site. FrontPage will insert several files that it
needs which will not affect the operation of the virtual robot.

If you are not working in ROBOGUIDE, then create a new site (from the File menu) somewhere on your
PC to store your files. Later you can “Publish” these files directly to the controller.

NOTE
You should put all your web files into one directory without any subdirectories.
Subdirectories are not fully supported on the R-30iA Controller.

4.2 WORKING with PAGES

When FrontPage is used, you can create content by inserting iPendant controls on a web page. Many
HTML tags and forms are also available for use. FrontPage gives you the option of viewing web pages as
a normal WYSIWYG (What You See Is What You Get) document or as HTML code, or previewing them
in the integrated browser.

NOTE
When viewing your page in the integrated browser the FANUC iPendant Controls
will appear static, since they are not connected to the robot controller.

The dialog box available from Tools | Page Options | Authoring Tab allows you to set up your
compatibility options specifically for iPendant:

-9-
4.FRONTPAGE B-83114EN/01

Microsoft FrontPage and SharePoint Technologies, VBScript, Java applets, Cascading style sheets (CSS),
Active Server Pages, and PNG graphics are not supported by iPendant and should be disabled.

4.2.1 File Names

Any web page that contains FANUC iPendant Controls must be saved with an .stm file extension or
iPendant will not recognize the FANUC iPendant controls. The file name must follow the robot’s 8.3
naming convention with no spaces.

Files that are specific to a particular language should end in a suffix. However, the links should not
include the suffixes. The web server will automatically find the correct file based on the current language
setting of the robot. For instance, if you link to arc.stm and the robot language is set to English, the web
server will find arc.stm if it exists. If it does not exist the Web Server will look for arceg.stm.

Language Suffix
English eg
Japanese jp
Kanji kn
French fr
German gr
Spanish sp

- 10 -
B-83114EN/01 4.FRONTPAGE

4.2.2 Meta Tags

Meta tags are used to instruct the browser about the page. One common use is to instruct the browser to
always refresh a page when the page is loaded. Unfortunately, not all browsers follow the same
conventions so the following 3 tags need to be specified on any page that you do not want cached by the
browser:

<meta http-equiv="Cache-Control" content="no-cache">

<meta http-equiv="Cache-Control" content="no-store">
<meta http-equiv="Pragma" content="no-cache">

NOTE
If cache is disabled, display of pages can get slow.

4.2.3 Page Properties

In the Design View, right-click the page, and then click Page Properties on the shortcut menu. This allows
you to change the background color and text color of a page. The page TITLE specified will be shown in
the Title bar on the iPendant when this page is displayed.

4.2.4 Window Size

To avoid scroll bars on your web pages, the size of the page should be the same as the size of the
iPendant screen:
Window Width Height
Single 624 363
Double 303 363
Triple Left 303 363
Triple Right 303 174
Status/Single Right 402 363

A table with 1 row and column can be inserted on a blank web page as a guideline with the width and
height set (in pixels) to the appropriate values from the table above.

- 11 -
4.FRONTPAGE B-83114EN/01

On real controller, set size of cell, too. Space in a cell, space between cells and width of boarder line can
affect to display. If you set width of boarder line to 0, you can have slightly larger display area but setting
size to 1 would be useful to use the table as outline during design of web page.

An alternative is to set the table height and width to 95% instead of specifying a pixel value. You may
still need to adjust your page once it is complete to eliminate scroll bars.

Use additional tables inside of this table for positioning of iPendant Controls as discussed in the next
subsection.
- 12 -
B-83114EN/01 4.FRONTPAGE

NOTE
Both the Horizontal and Vertical Scroll bars are 16 pixels wide, so if you design
pages that exceed the above sizes, you will need to take this into account.

4.2.5 Positioning
FrontPage has the ability to design web pages with pixel-precise positioning. This feature uses cascading
style sheets (CSS), which are not supported on iPendant.

The best way to position controls, text and images on an iPendant screen is through the use of tables
embedded inside of other tables. Use the Cell and Table Properties dialog boxes to get pixel-perfect
adjustments by right clicking on the table or cell and adjusting the necessary parameters. A Table toolbar
is also available.

4.2.6 HTML Editing

Inserting code into your web page is done in the “Code” view of FrontPage. To select this view, select
either the Split or Code view from the view bar at the bottom of the page.

To quickly select a section of code in the code window, use the Quick Tag Selector at the top of the page.
To enable the Quick Tag Selector go to View | Quick Tag Selector from the menu bar. You can select the
beginning tag in a tag set and FrontPage will highlight all the information that falls between the beginning
tag and the ending tag for that set. Or you can select View | Reveal Tags to have the tags displayed in the
Design View.

4.2.7 Fonts
The HTML tag <FONT SIZE=n> is supported on the iPendant. The following are the font sizes that
correspond to the HTML Font settings:
Tag Size on iPendant
Font size = 1 12 (hard to read)
Font size = 2 14
Font size = 3 14
Font size = 4 16
Font size = 5 18
Font size = 6 24
Font size = 7 24

Bold and underline are supported by the iPendant. Italic font will always display as bold.

4.2.8 Images
The iPendant supports GIF and JPG formats. Generally, GIF images are best used to display small
graphics, such as buttons, icons, and banners, or images that contain large blocks of solid colors and little
detail. Use the JPG format for images that contain a high level of detail or colors. The Picture Properties
dialog box can be used to set the attributes for the image.

4.2.9 Links
For navigation purposes, the iPendant MenuChange and ButtonChange controls can be used to select new
pages. The anchor (<a>) tag can also be used. The href attribute defines a source hyperlink. The value of
- 13 -
4.FRONTPAGE B-83114EN/01

the attribute is the URL of the destination. Typically, the URL should be a relative address, but it is
sometimes difficult to know the base address.

A URL can be any file or web page accessible from the robot or a KAREL program. Please refer to
“R-30iA/R-30iA Mate CONTROLLER Ethernet Function OPERATOR’S MANUAL” (B-82974EN/01)
for information on using KAREL or KCL.
Here are some examples for using URLs.

<a href="/mc/demo.stm">Demo</a>

NOTE
1 For execution of KAREL program, iPendant firmware version with v7.50P/06 or
later is needed. Firmware version is displayed at left upper corner of iPendant just
after cycle power.
2 If execution of KAREL does not create response page (when you want to simply
execute KAREL program), use /KARELCMD/ instead of /KAREL/.
3 In general, KAREL program have to create response page. When no response
page is required, create static variable return_code and set it to 204.

4.2.10 Frames
NOTE
Frames should be avoided if possible.
The iPendant supports frames but only 5 frames are available for use. Reserved target names of _blank
and _top should never be used since they will force the iPendant to log off the controller. Floating frames
(IFRAME tag) are not supported.

For instance, browsing to this web page and pressing ENTER on the link would cause a logout.
<html>
<body>
<center>
<a href="dologout.htm" target="_top">Press ENTER to Logout</a>
</center>
</body>
</html>

Pressing the MENUS key will log you back into the robot, however this may take several seconds.

4.2.11 Themes and Styles

FrontPage Themes and Styles are not supported in iPendant and should not be used.

4.3 PUBLISHING YOUR SITE

FrontPage allows you to publish your site to the robot. File | Publish Site brings up a dialog box. The
Remote Web Site Properties dialog box allows you to FTP your files to the robot. Your robot must have
an FTP server running. Please refer to “R-30iA/R-30iA Mate CONTROLLER Ethernet Function
OPERATOR’S MANUAL” (B-82974EN/01) for information on using FTP.

Select FTP as the server type and use ftp://robot_ip_addr/fr: to publish files on the FR: device as shown
below:

- 14 -
B-83114EN/01 4.FRONTPAGE

NOTE
The robot does not support subdirectory creation from FTP so you should only
publish files in the web’s current folder. If FrontPage is trying to publish files
created in another subdirectory such as _derived, you will need to remove these
files.

Once you click OK the Web Site tab will be displayed and FrontPage will attempt to connect to your
robot. After a successful connection is established you can choose which files to download to the robot.

- 15 -
4.FRONTPAGE B-83114EN/01

See the FrontPage Help for additional information on transferring and synchronizing files.

- 16 -
B-83114EN/01 5.MAKING A CUSTOM iPENDANT SCREEN

5 MAKING A CUSTOM iPENDANT SCREEN

The easiest way to create an easy operator panel or custom screen for the iPendant is by putting the
iPendant controls on the web page and by setting their properties.

5.1 CONTROL ARRANGEMENT

To insert an iPendant Control to your web in FrontPage, follow these steps:

Procedure 5-1 Insert an iPendant Control

Step
1 Position your cursor where you want the control to appear.
2 Select Insert | Web Component from the menu bar.
3 Select Advanced Controls in Component type list and select ActiveX Control in Choose a control
list. Then press Next.

4 Choose the control you want to insert from the list of available FANUC iPendant controls, and click
OK. The selected control is now inserted into your page.
5 Configure its properties by double-clicking on the control. The property dialog box that appears will
depend on the control you have inserted.

NOTE
FrontPage will not insert the Height and Width into the control parameters unless
you actually modify them. This will result in the control being the wrong size (very
small) on the iPendant. To solve the problem resize the control (by grabbing one
of the handles and moving it). This will put the current size into the parameters for
the control.

- 17 -
5.MAKING A CUSTOM iPENDANT SCREEN B-83114EN/01

Then on the Object Tag property page for the control you can reset the size to exactly what you want.

5.2 COMMON CONTROL PROPERTIES

Most of the controls have the following common properties.

5.2.1 Object Tag

The Object Tag dialog allows you to specify some standard attributes associated with your control. The
Name is used when an error occurs. The Width and Height can be specified in pixels. Of course, you can
resize the control by dragging the control’s handles with the mouse.

5.2.2 DataType and DataIndex

DataType specifies the type of the data to be monitored or modified depending on the type of control. The
allowable types can be selected from a dropdown box similar to the one below:

- 18 -
B-83114EN/01 5.MAKING A CUSTOM iPENDANT SCREEN

Following table shows meaning of items.

DataType Description
100 – Static Displays the strings specified in Caption.
101 – Numeric Register Displays the value of the numeric register specified in DataIndex.
102 – System Variable Displays the value of the System Variable specified in DataIndex.
103 – KAREL Variable Displays the value of the KAREL Variable specified in DataIndex.
104 – Dictionary Element Displays the dictionary element specified in DataIndex.
1 – DI Displays the value of DI specified in DataIndex.
2 – DO Displays the value of DO specified in DataIndex.
… Displays the value of the I/O type specified in DataType and DataIndex.

DataIndex specifies the number or the variable name associated with the DataType.
DataType DataIndex
101 – Numeric Register Index of register. For R[1], 1
102 – System Variable System variable name.
Type must be Integer, Real, Boolean, Short, Byte, or String. For
example,
$MNUTOOLNUM[1]
103 – KAREL Variable KAREL variable name.
Enclose the program name inside […]. The type must be Integer,
Real, Boolean, Short, Byte, or String. For example,

[USEREXT]STR_VAR
[USEREXT]STRUC_VAR.FIELD1
104 – Dictionary Element Specify the dictionary name and enclose the dictionary element inside
[…]. For example,

TPAR[5]
I/O (1-DI, 2-DO,……) Port number

5.2.3 Images
The Images dialog allows you to select the images to display when the ViewType is Image.

• The display size is automatically adjusted to the size of the image which is specified by FalseImage
or DataDefault for the Multi Control. Therefore the size of any other images specified should be
the same size as FalseImage. It is not possible to change the size using the mouse.
• It is necessary to copy all the image files which are specified to the directory on the iPendant where
the web page is located.
• If iPendant cannot find an image file, “No Image File” is displayed on the control.
- 19 -
5.MAKING A CUSTOM iPENDANT SCREEN B-83114EN/01

• FrontPage may not be able to find the Image files after the page is closed and reopened. You can
specify the directory containing the image files by setting a Registry String. An example is shown
below.

[HKEY_LOCAL_MACHINE\SOFTWARE\FANUC\FANUC Robotics iPendant Controls]

"CurrentDirectory"="v:\qa\ipendant\cgop\"

Or you can reselect one of the images from the Property Page dialog box. The ActiveX Controls
will set this registry key for you. You may need to select View | Refresh to refresh the web page.

• Transparent gif images are supported. The color that shows behind the image must be specified as
follows:

For CommandButton, MenuChange, ToggleButton, and ToggleLamp:

FalseColor is used when the image is not pressed.
TrueColor is used when the image is pressed.
BackColor should be set to the background color of the web page.

For Multi Control:

BackColor is used.

5.2.4 Border
Border Select the border design of the control out of the types shown below.

Each item has following meaning.

Border Description
0 - Thin3D Create a thin 3D line.
1 - None No border line.
2 - Black Create a thin black line.
3 - ForeColor Create a thin line whose color is the equal to the foreground color
(color used for displaying characters).
4 - Bold3D Create a bold 3D line.

5.2.5 Colors
The Colors dialog allows you to specify the color of certain elements. The iPendant supports 256 colors.
All controls have the following Colors associated with them:

ForeColor Specify the color of characters.

BackColor Specify the background color.

Some controls will have additional choices such as TrueColor and BackColor. (See the individual
controls for additional details)

- 20 -
B-83114EN/01 5.MAKING A CUSTOM iPENDANT SCREEN

5.2.6 Fonts
The Fonts dialog allows you to specify the font used with the control. The iPendant supports a subset of
the Fonts available in FrontPage. If you want the fonts to appear similar to how it will appear on iPendant,
then use the following font settings:

Tag Value
Font: Courier New
Font Style: Regular or Bold
Size: 14, 16, 18, or 24
Strikeout Do not check
Underline Do not check

The EasyPanel controls may convert 16 down to 15.75. If this happens, use 16.5.

5.2.7 Alignment
HAlign Selects the horizontal alignment of characters out of the types shown below.

HAlign Description
0 - Left Left align the text.
1 - Center Center the text.
2 – Right Right align the text.

VAlign Selects the vertical alignment of characters out of the types shown below.

VAlign Description
0 - Top Top align the text.
1 - Center Center the text.
2 - Bottom Bottom align the text.

5.2.8 Monitor
The Monitor dialog allows you to specify whether the item specified in the DataType field is Monitored
or Updated Periodically and the time interval in milliseconds used to monitor or update the data. If the
Periodic checkbox is not checked (FALSE) the data will be monitored at the specified rate and the current
value will only be sent to the iPendant if the value has changed since the last period. If the Periodic
checkbox is checked (TRUE) the value of the item specified in the DataType field will be sent to the
iPendant at the interval rate regardless of whether or not it has changed since the last update. Monitoring
the data is more efficient because the data is only sent from the robot to the iPendant when the data has
changed.

The interval time will default to 250 ms. The minimum interval time is 100 ms. The periodic switch will
default to unchecked (FALSE).

Identical monitors for the iPendant are shared, even across multiple pages. The lowest interval time is
used. For instance, if the page in the left window is monitoring DI[1] at 250 ms and the page in the right
window starts monitoring DI[1] at 100 ms, then the left page will also monitor at 100 ms. If the right
page is changed to another page, the left page will continue to monitor at 100 ms until the page is
changed.

The Monitor dialog allows you to specify FastLoad:

- 21 -
5.MAKING A CUSTOM iPENDANT SCREEN B-83114EN/01

• Checked
Specifies that properties that are set to their corresponding “default” values are not included in the
web page. This effectively saves load time.

• Unchecked
Specifies that all parameters are included in the web page, whether they have “default” values or not.

5.2.9 Function Key ViewType

The following iPendant Controls will support the Function Key ViewType:

• EditBox Control
• CommandButton Control
• ToggleButton Control
• ButtonChange Control
• MenuChange Control
• ComboBox Control

The ViewType will display a dropdown box with F2 – F5 and F7 – F10 as selections. F1 and F6 are not
available because the controller reserves them for the [ TYPE ] function key. If a function key is
selected, then the iPendant control will be invisible, but it will register itself with the FunctionKey control.
The iPendant control can reside anywhere on the visible portion of the web page. If it is not on the
visible portion (scroll bars are necessary to see it) then it may not be created. It is only operational if it
has been created. The control can be any size as long as it is big enough to be created. The size
doesn’t matter since it is invisible.

To avoid cursoring to the invisible control, use tabindex=”-1” in the object tag like following example.
<object classid="clsid:71060660-0E45-11D3-81B6-0000E206D650" id="FRIPEditBox1"
width="116" height="50" tabindex="-1">
<param name="Caption" value="F2">
<param name="ViewType" value="1">
...
</object>

The button caption and/or button images will be used by the FunctionKey control. Both TrueImage and
FalseImage are used. The Image, if specified, is displayed first; and the Caption, if specified, is
displayed next. Properties that are ignored include most of the display properties:

• Font
• Halign
• VAlign
• Border

All FunctionKey controls will use their color properies, such as ForeColor and BackColor.

5.2.10 Caption
If the DataType value is other than 100 – Static, the string in the caption is managed as a format string
(Some control does not use caption as format property). The “%v” in the string is converted as the value
of the specified variable. When the format string is NULL, only the value of the specified variable is
displayed. Any C Style Format specifier may also be used instead of “%v”. In the example below, the
left side shows the result and the “fmt:” shows the format string that was specified in the Caption.

- 22 -
B-83114EN/01 5.MAKING A CUSTOM iPENDANT SCREEN

If the Caption contains multiple words and it doesn’t fit into the available columns, it is automatically
split into multiple rows. If the automatic split is not appropriate, the Caption can be manually split into
multiple rows by adding \n where appropriate. You may use %n anywhere in the Caption to suppress
the value and show only the Caption.

5.2.11 Pulse DO
The feature allows the user to pulse a digital output port for a specified number of milliseconds. In
FrontPage, if the user selects DataType = DO for CommandButton or ToggleButton, then the Pulse
Checkbox will be enabled. Once the Pulse checkbox is clicked, the ms textbox is enabled.

- 23 -
5.MAKING A CUSTOM iPENDANT SCREEN B-83114EN/01

If Time is zero, no pulse will occur. A pulse always writes the value in SetValue and then after the time
has expired, writes the reverse. So if the port is “normally off”, SetValue can be set to True to pulse it
on. If the port is “normally on”, SetValue can be set to False to pulse it off.

The default is 100 ms.

5.2.12 Port Simulation

This feature allows the user to display and modify the port simulation status for an I/O signal. In
FrontPage, if the user selects an I/O type for DataType that supports simulation, then the Simulation
Checkbox will be enabled.

The Port Simulation Type will be similar to the Boolean type. It automatically displays SIMULATE,
UNSIMULATE but you can specify the string precision in the Caption field. So if Caption = "%.1S"
(note precision is after the period), then only "S" or "U" will be displayed.

If "SIM" or "UNSIM" is desired, then the ComboBox Control or Multi Control can be used instead.
These controls allow you to specify whatever strings you want displayed. ComboBox is used to both
monitor and modify the simulation status while Multi is used to only monitor the simulation status.

5.2.13 Positions
The Label Control allows positions to be displayed.

DataType Specifies the type of the position data to be monitored:

- 24 -
B-83114EN/01 5.MAKING A CUSTOM iPENDANT SCREEN

The allowable types can be selected from a dropdown box similar to the one above:

Where:
DataType Description
105 – Position Register Displays the value of the Position Register specified in DataIndex.
106 – KAREL Position Displays the value of the KAREL Position specified in DataIndex.
107 – Current Position Displays the value of the Current Position in the representation specified in
DataIndex.
108 – Tool Frame Displays the value of the Tool Frame, MNUTOOL[GroupNum, frmid], whose
frmid is specified in DataIndex.
109 – Jog Frame Displays the value of the Jog Frame, [TPFDEF]JOGFRAMES[GroupNum,
frmid], whose frmid is specified in DataIndex.
110 – User Frame Displays the value of the User Frame, $MNUFRAME[GroupNum, frmid], whose
frmid is specified in DataIndex.

DataIndex Specifies the number or the variable name associated with the DataType.

DataIndex Description
Position Registers, Tool Frame, Index of Position Register or Frame
Jog Frame, User Frame
KAREL position Program and variable name.
Enclose the program name inside […].
[USEREXT]POSN
[USEREXT]XYZEXT
[*SYSTEM*]$GROUP[1].$UFRAME
Current Position representation is specified. JOINT is the default.

JOINT
WORLD
USER

GroupNum Specifies the group number associated with the DataType/DataIndex if more than one group
is available on the robot controller. Not used for KAREL Positions that are inherently defined for a
single group.

PosAlign Selects the position alignment from the types shown below.
PosAlign Description
0-Default Align the position similar to Position Menu.
1-SubWindow Align the position similar to TPP and Position Register subwindows.
2-Vertical Align the position vertically.
The other properties of the label control are also used, such as Fonts, Border, Halign, Valign, and Colors.
Here are some examples of the current position with different alignments:
- 25 -
5.MAKING A CUSTOM iPENDANT SCREEN B-83114EN/01

All position types have a default title. However, you can override the default title by specifying the
Caption parameter. Each PosAlign is different:

PosAlign Caption
0-Default Truncates the caption to 19 characters
1-SubWindow Truncates the caption to 5 characters
2-Vertical Uses the entire caption. You can split the caption using \n.

The comment for Position Registers and Frame Positions is shown on a separate line.

- 26 -
B-83114EN/01 5.MAKING A CUSTOM iPENDANT SCREEN

The default title for a KAREL position is its name. It will be shown on the comment line instead of the
top line.

5.2.14 Indirect DataType and DataIndex

Five different Indirect DataType/DataIndex keywords can be used in any iPendant control parameter that
defines a String. The special keywords !INDIRECT1, !INDIRECT2, … !INDIRECT5 will be used to
specify indirection. The indirect value is read as a string and substituted into the parameter.

• Multiple keywords can be used in a parameter.

DataIndex: $MCR_GRP[!INDIRECT1].!INDIRECT2

• Multiple parameters can contain keywords.

DataIndex: $MCR_GRP[!INDIRECT1].$DRY_JOG_OVR
Caption: !INDIRECT2

• A keyword can be used multiple times.

DataType: 101 – Numeric Register
DataIndex: !INDIRECT1
Caption: !INDIRECT1

• Indirect keyword is allowed when specifying Indirect DataType/DataIndex.

Indirect2DataType: 101 – Numeric Register
Indirect2DataIndex: !INDIRECT1

In FrontPage, the Indirect Property tab can be used to set up the Indirect DataType/DataIndex properties.
The indirection is evaluated each time the page is loaded. The Indirect DataType/DataIndex properties are
monitored so they will change dynamically.

An example of indirection in the EditBox Control:

The KAREL program, indirect.kl, contains a variable, regno: INTEGER, which is used to determine the
register number to display.

<param name="Caption" value="R[!Indirect1] : %v">

<param name="DataType" value="101">
<param name="DataIndex" value="!Indirect1">
<param name="Indirect1DataType" value="103">
<param name="Indirect1DataIndex" value="[indirect]regno">

- 27 -
5.MAKING A CUSTOM iPENDANT SCREEN B-83114EN/01

5.2.15 PANEID
iPendant can display multiple screens at the same time. Display area of each screen is called “pane”.
The special keyword !PANEID can be used in any iPendant control’s parameter that defines a String.
The proper value is substituted into the parameter according to the table below:

!PANEID Description
1 The first iPendant pane
2 The second iPendant pane
3 The third iPendant pane
4-9 Panes for Internet Explorer connections

An example of indirection in the EditBox Control:

The KAREL program, indirect.kl, contains an array variable, regno: ARRAY[9] OF INTEGER, which is
used to determine the register number to display for each pane.

<param name="Caption" value="Pane Id: !paneid, R[!Indirect1] : %v">

<param name="DataType" value="101">
<param name="DataIndex" value="!Indirect1">
<param name="Indirect1DataType" value="103">
<param name="Indirect1DataIndex" value="[indirect]regno[!paneid]">

5.2.16 Pipe
Properly configured iPendant controls will actively monitor and modify controller information and
processes without you having to write code on the controller. There are times, however, where you
might require additional flexibility and control. The Pipe mechanism provides this ability.

If you configure an iPendant control’s Pipe parameter to have a value of a filename,

<param name="Pipe" value="mypipe!paneid.dat">

you will be able to send the control commands while it is active. Open the file using the string “PIP:” as
its device prefix. Then write string commands to the file in the format:

id=”control_id” param_name=”new_value”

where:
control_id is the string you provided in the Object tag Name field
param_name is the name of the parameter you wish to modify.
new_value is the new value you want to assign to the parameter

A KAREL example to change the caption of the label control named Label_1 follows.

OPEN FILE f1 (‘AP’, ‘PIP:mypipe1.dat’)

WRITE f1 (‘ Id=”Label_1” caption=”This is my new caption”’)

Remember, Label_1 must have been configured to listen to pipe “mypipe!paneid.dat” at design time.

- 28 -
B-83114EN/01 5.MAKING A CUSTOM iPENDANT SCREEN

5.2.17 SetFocus
Use the SetFocus parameter to tell the browser to give focus to or remove it from the control. This only
applies to the following controls that can accept focus.

• EditBox Control
• CommandButton Control
• ToggleButton Control
• ButtonChange Control
• MenuChange Control
• ComboBox Control

SetFocus must be issued through the pipe mechanism.

Sending a value of “1” directs the browser to give focus to the identified control. Sending a value of “0”
sets the focus to the parent HTML page, essentially removing focus from the identified control.

5.2.18 ClickMe
Use the ClickMe parameter to tell the browser to send the action event to the control. This looks to the
control exactly as if the user had clicked on it. This only applies to the following controls that can be
clicked.

• EditBox Control
• CommandButton Control
• ButtonChange Control
• MenuChange Control
• ComboBox Control

ClickMe must be issued through the pipe mechanism.

The value sent has no meaning at this time, but we suggest sending a 1 as other values may have
significance in the future.

5.3 Control Description

This section describes the controls that can be used on iPendant, in order.

- 29 -
5.MAKING A CUSTOM iPENDANT SCREEN B-83114EN/01

5.3.1 Label Control

The value of a Register, System or KAREL Variable or I/O is displayed as shown in the figure above.
Fixed strings can also be displayed.

NOTE
1 If the read value is Boolean I/O type, ON/OFF string is displayed.
2 If the read value is Boolean var type, TRUE/FALSE string is displayed.
3 If the DataType value is 100 – Static, the string in Caption is displayed as a fixed
string.
4 If the DataType value is other than 100 – Static, the string in caption is managed
as a format string.

Property

Property can be divided into the groups shown below.

Related data for read : DataType, DataIndex
Related display : ForeColor, BackColor, Caption, Font, Border

Property Description
Caption Specify the fixed String or format string. (Refer to Note)(The maximum is 128 characters.)
ForeColor Specify the color of characters.
BackColor Specify the background color.
Font Specify the font name, font style and size.
HAlign Specify the horizontal alignment of characters.
VAlign Specify the vertical alignment of characters.
DataType Specify the type of the data for display.
DataIndex Specify the number or the variable name.
IOSim Used only for I/O types. When TRUE, the port simulation status is displayed instead of the
actual point.
Interval Specify the interval time in ms.
Periodic Specify whether to monitor the data or send periodically.
- 30 -
B-83114EN/01 5.MAKING A CUSTOM iPENDANT SCREEN

Property Description
Border Select the border design of the control.
PosAlign Used only for position types. Selects the position alignment from the types shown below.
0 - Default Align the position similar to Position Menu.
1 - Subwindow Align the position similar to TPP and Position Register subwindows.
2 - Vertical Align the position vertically.
GroupNum Used only for position types. Specifies the group number associated with the
DataType/DataIndex if more than one group is available on the robot controller. Not used for
KAREL Positions which are inherently defined for a single group.

5.3.2 EditBox Control

This is used to change the value of a Register, System or KAREL Variable (except XYZWPR type) or
I/O.
The specified data value can also be monitored and displayed.
When you select this control on the page, the virtual keyboard is displayed and it accepts input.
Three kinds of virtual keyboards are supported, NumericKey, FullKey and NumericInc.

NOTE
If the written variable is Boolean type, you can use 0/1 value.

Property

Properties can be divided into the groups shown below:

Related data for read : DataType, DataIndex
Related display : ForeColor, BackColor, Caption, Font, Border
Related virtual keyboard : Type

Property Description
Caption Specify the fixed String. (The maximum is 128 characters.)
ForeColor Specify the color of characters.
BackColor Specify the background color.

- 31 -
5.MAKING A CUSTOM iPENDANT SCREEN B-83114EN/01

Property Description
Font Specify the font name, font style and size.
HAlign Specify the horizontal alignment of characters.
VAlign Specify the vertical alignment of characters.
DataType Specify the type of the data for display and change.
DataIndex Specify the number or the variable name.
IOSim Used only for I/O types. When TRUE, the port simulation status is displayed and changed
instead of the actual point.
Interval Specify the interval time in ms.
Periodic Specify whether to monitor the data or send periodically.
Border Select the border design of the control.
Type Select the type of virtual keyboard.
0 - NumericKey Display the virtual keyboard for numeric input.
1 - FullKey Display the virtual keyboard for alpha and numeric input.
2 - NumericInc Display the virtual keyboard for numeric input. Numeric key and several
other keys are displayed on the key board.
ValueMin Specify the minimum value. Available only when NumericKey is selected.
ValueMax Specify the maximum value. Available only when NumericKey is selected.
IncrValue This is used only when NumericInc type is selected. This decides incremental/decremental
value when increment/decrement key is pressed.

NOTE
On ROBOGUIDE, dialog box is displayed instead of virtual keyboard. Whatever
type you use, there is little difference in appearance of dialog boxes.

5.3.3 ToggleLamp Control

This is used to change the color of the control if the value of a Register, System or KAREL Variable
(except XYZWPR type) or I/O fulfills the specified condition with the specified value or not.
The six kinds of condition operators, EQ, NE, LT, LE, GT and GE are supported. Three kinds of lamps
are available. They are the panel, the circle, and the image.
In case of the image type, by exchanging the two kinds of images, a toggle lamp can be created. It is also
possible to display a fixed image.
- 32 -
B-83114EN/01 5.MAKING A CUSTOM iPENDANT SCREEN

NOTE
EQ, NE and so on is comparison operator that is decided by property,
CmpOperator. It is used for evaluation to decide color/Image to display.
CmpOperator is used in following way.

CmpOperator:[read value] [condition expression] [standard value for

compare](e.g. X LT Y means X < Y)

The expression is valued like this.(read value : DataType, DataIndex)(condition

expression : CmpOperator)(standard value for compare : CmpValue)

Property
Property can be divided into the groups shown below:
Related data for read: DataType, DataIndex
Related display: ForeColor, BackColor, Caption, Font, Border, ViewType
Related specifying display color: TrueColor, FalseColor
Related displayed image: TrueImage, FalseImage
Related specifying operation: CmpOperator, CmpValue

Property Description
Caption Specify the fixed String. (The maximum is 128 characters.)
ForeColor Specify the color of characters.
BackColor Specify the background color.
Font Specify the font name, font style and size.
HAlign Specify the horizontal alignment of characters.
VAlign Specify the vertical alignment of characters.
DataType Specify the type of the data to display. The following data types are supported
100 - Static
Not used usually. If ViewType is image type, the image specified in FalseImage is displayed
as fixed.
101 - Numeric Register
Compare the value of register specified in DataIndex with CompareValue.
102 - System Variable
Compare the value of the System Variable specified in DataIndex with CompareValue.
103 - KAREL Variable
Compare the value of the KAREL Variable specified in DataIndex with CompareValue.
I/O
Compare the value of I/O specified in DataType and DataIndex with CmpValue.
DataIndex Specify the number or the variable name.
IOSim Used only for I/O types. When TRUE, the port simulation status is displayed instead of the
actual point.
Interval Specify the interval time in ms.
Periodic Specify whether to monitor the data or send periodically.
Border Select the border design of the control.
ViewType Select the type of the button to display.
0 - Panel Specify the panel type.
1 - Circle Specify the circle type.
3 - Image Specify the image type.

- 33 -
5.MAKING A CUSTOM iPENDANT SCREEN B-83114EN/01

Property Description
Type Select the data type to transact.
0 - Logical
Data is transacted as Boolean type. The setting of CmpOperator and the value of
CmpValue are ignored.
1 - Numerical
Data is transacted as numerical type. The setting of CmpOperator and the value of
CmpValue is applied.
CmpOperator Select the condition expression evaluated as TRUE (Refer to Note 1). This value is effective
when Type is numerical.
0 - EQ Specify the equal case (=).
1 – NE Specify the not equal case (<>).
2 - LT Specify the less than case (<).
3 – LE Specify the less than or equal case (<=).
4 - GT Specify the greater than case (>).
5 – GE Specify the greater than or equal case (>=).
CmpValue Specify the standard value for comparison. If the result of comparison between read value and
this value is TRUE, TrueColor or TrueImage is displayed. Otherwise FalseColor or FalseImage
is displayed. This value is effective when Type is numerical.
TrueColor Specify the color to be displayed when the read value fulfill the condition expression.
FalseColor Specify the color to be displayed when the read value does not fulfill the condition expression.
TrueImage Specify the image to be displayed when the read value fulfill the condition expression. Used
only in case that ViewType is Image type.
FalseImage Specify the image to be displayed when the read value does not fulfill the condition expression.
Used only in case that ViewType is Image type.

When ViewType is image type, Images property page is available.

When … is clicked, it is possible to specify the property using the file dialog. See the following screen for
an example.

- 34 -
B-83114EN/01 5.MAKING A CUSTOM iPENDANT SCREEN

5.3.4 CommandButton Control

Used to write the specified value to a Register, System, or KAREL Variable (except XYZWPR type) or
I/O whenever the button is pushed.
The image button is also available.
The monitor function for the written data is not supported.

Property
Property can be divided into the below groups:
Related data for read: DataType, DataIndex
Related display: ForeColor, BackColor, Caption, Font, Border, ViewType
Related specifying image: TrueImage, FalseImage
Related specifying written value: SetValue

- 35 -
5.MAKING A CUSTOM iPENDANT SCREEN B-83114EN/01

Property Description
Caption Specify the fixed String.
ForeColor Specify the background color.
BackColor Specify the font name, font style and size.
Font Specify the font name, font style and size.
HAlign Specify the horizontal alignment of characters.
VAlign Specify the vertical alignment of characters.
DataType Specify the type of the data to change. The following data types are supported:

100 - Static Not used usually.

101 - Numeric Register Change the value of register specified in DataIndex.
102 - System Variable Change the value of the System Variable specified in
DataIndex.
103 - KAREL Variable Change the value of the KAREL Variable specified in
DataIndex.
I/O Change the value of I/O specified in DataType and DataIndex.
DataIndex Specify the number or the variable name.
IOSim Used only for I/O types. When TRUE, the port simulation status is displayed and changed
instead of the actual point.
Interval Select the border design of the control.
Border Select the border design of the control.
ViewType Select the type of the button to display.
0 - Normal Specify the normal button.
1 - Image Specify the image button.
Type Select the data type to transact.
0 - Logical Data is transacted as Boolean type. (SetValue is TRUE/FALSE)
1 - Numerical Data is transacted as numerical type. The value of SetValue is applied.
2 - String Data is transacted as String type. The value of ValueStr is applied.
SetValue Specify the value written when the button is pushed for Logical or Numerical types.
ValueStr Specify the string value written when the button is pushed for String type.
TrueImage Specify the image to be displayed when the button is pushed. Used only in case that
ViewType is Image type.
FalseImage Specify the image to be displayed when the button is not pushed. Used only in case that
ViewType is Image type.
TrueColor Specify the background color to be used when a transparent image is pressed. Used only in
case that ViewType is Image type.
FalseColor Specify the background color to be used when the transparent image is not pressed. Used
only in case that ViewType is Image type.

- 36 -
B-83114EN/01 5.MAKING A CUSTOM iPENDANT SCREEN

5.3.5 ToggleButton Control

Used to change the value of a Register, System or KAREL Variable (except XYZWPR type) or I/O to the
specified value following the ON(Pushed)/OFF(Popped) status of the button.
The monitor function for the written data is also supported.
The image button is also available.

NOTE
1 The specified variable is rewritten with the specified value just after this button is
operated. However the function to hold the specified value is not supported.
2 In case of numeric type, the value set by On/Off of button is
TrueValue/FalseValue.
3 In case of logical type, the value set by On/OFF of button is fixed value
(TRUE/FALSE) and it is not possible to change this value except to Invert it.
4 In case of numeric type, if the value of the specified Register, System/KAREL
Variable and I/O is changed neither TrueValue nor FalseValue, the status of the
button will follow the setting of the OtherPhase.

Property
Property can be divided into the below groups:
Related data for read: DataType, DataIndex
Related display: ForeColor, BackColor, Caption, Font, Border, ViewType
Related specifying display color : TrueColor, FalseColor, TrueStrColor, FalseStrColor
Related specifying image: TrueImage, FalseImage
Related specifying standard value: Type, TrueValue, FalseValue

Property Description
Caption Specify the fixed String.
TrueCaption Specify the fixed String when the value is TRUE.
If not specified, Caption is used.
ForeColor Specify the color of characters.
BackColor Specify the background color.

- 37 -
5.MAKING A CUSTOM iPENDANT SCREEN B-83114EN/01

Property Description
Font Specify the font name, font style and size.
HAlign Specify the horizontal alignment of characters.
VAlign Specify the vertical alignment of characters.
DataType Specify the type of the data to change. The following data types are supported:
100 - Static
Not used usually.
101 - Numeric Register
Change the value of register specified in DataIndex.
102 - System Variable
Change the value of the System Variable specified in DataIndex.
103 - KAREL Variable
Change the value of the KAREL Variable specified in DataIndex.
I/O
Change the value of I/O specified in DataType and DataIndex.
DataIndex Specify the number or the variable name.
IOSim Used only for I/O types. When TRUE, the port simulation status is displayed and changed
instead of the actual point.
Momentary When TRUE, the button status is changed to ON when pressed and OFF when released. This
only works when the button is pressed with the Touch Panel or if the mouse is pressed in
Internet Explorer.
Interval Specify the interval time in ms.
Periodic Specify whether to monitor the data or send periodically.
Border Select the border design of the control.
ViewType Select the type of the button to display. Specify the image button.
0 - Normal Specify the normal button.
1 - CheckBox Specify the checkbox button.
2 - Image Specify the image button.
Type Select the data type to transact.
0 - Logical Data is transacted as Boolean type. The value of TrueValue and
FalseValue is ignored.
1 - Numerical Data is transacted as numerical type. The value of TrueValue and
FalseValue is applied.
Invert Specifies the value should be inverted. This value is effective when Type is Logical. When
button status is ON, value written is OFF (FALSE). When button status is OFF, value written is
ON (TRUE).
TrueValue Specify the value written when the button status is changed to ON (TRUE). This value is
effective when Type is numerical.
FalseValue Specify the value written when the button status is changed to OFF (FALSE). This value is
effective when Type is numerical.
OtherPhase Specify the status (TRUE/FALSE) in case that the value is equal to neither TrueValue nor
FalseValue. This value is effective when Type is numerical.
TrueColor Specify the color displayed when the read value is equal to TrueValue or not equal to
FalseValue.
FalseColor Specify the color displayed when the read value is equal to FalseValue or not equal to
TrueValue.
TrueStrColor Specify the color of characters displayed when the read value is equal to TrueValue or not
equal to FalseValue. Used when the ViewType is not the image type.
FalseStrColor Specify the color of characters displayed when the read value is equal to FalseValue or not
equal to TrueValue. Used when the ViewType is not the image type.
TrueImage Specify the image to be displayed when the button status is ON. Used only in case that
ViewType is Image type.
FalseImage Specify the image to be displayed when the button status is OFF. Used only in case that
ViewType is Image type.
Confirm Specify a confirmation popup should be displayed before setting the button status to ON. This
parameter must be typed into the HTML.
<param name="Confirm" value="-1">
- 38 -
B-83114EN/01 5.MAKING A CUSTOM iPENDANT SCREEN

5.3.6 Multi Control

Used to change a maximum of 10 kinds of images or strings if the value of Register, System or KAREL
Variable (except XYZWPR type) and I/O is within specified range or not. It is the multi version of
ToggeLamp and can be used to create animations, such as progress bars.

For example:
If the read value is within ValueMin01 through ValueMax01, therefore ValueMin01 <= (read value)
<= ValueMax01 is fulfilled, the strings or image specified in Data01 is displayed.

NOTE
1 If the read value is within the multi specified range, the smallest number
condition is applied.
2 If the read value is out of all specified ranges, the default image or string
(specified in DataDefault) is displayed.

Property
Property can be divided into the groups below:
Related data for read: DataType, DataIndex
Related display: ForeColor, BackColor, Font, Border, Type
Related specifying standard value:
DataDefault, Data01 - Data10, ValueMin01 - ValueMin10, ValueMax01 - ValueMax10

Property Description
ForeColor Specify the color of characters. This is effective when ViewType is label.
BackColor Specify the background color.
Font Specify the font name, font style and size. This is effective when ViewType is label.
HAlign Specify the horizontal alignment of characters. This is effective when ViewType is label.
VAlign Specify the vertical alignment of characters. This is effective when ViewType is label.

- 39 -
5.MAKING A CUSTOM iPENDANT SCREEN B-83114EN/01

Property Description
DataType Specify the type of the data to display. The following data types are supported:
100 - Static
Not used usually.
If ViewType is label, the strings specified in DataDefault are displayed.
If ViewType is image, the image specified in DataDefault is displayed.
101 - Numeric Register
Compare the value of register specified in DataIndex is within ValueMinXX through
ValueMaxXX, and XX is 01 through 10 in order.
102 - System Variable
Compare the value of the System Variable specified in DataIndex is within ValueMinXX
through ValueMaxXX, and XX is 01 through 10 in order.
103 - KAREL Variable
Compare the value of the KAREL Variable specified in DataIndex is within ValueMinXX
through ValueMaxXX, and XX is 01 through 10 in order.
I/O
Compare the value of I/O specified in DataType and DataIndex is within ValueMinXX
through ValueMaxXX, and XX is 01 through 10 in order.
DataIndex Specify the number or the variable name.
IOSim Used only for I/O types. When TRUE, the port simulation status is displayed instead of the
actual point.
Interval Specify the interval time in ms.
Periodic Specify whether to monitor the data or send periodically.
Border Select the border design of the control.
ViewType Select the type of the button to display.
0 - Label
Display strings. DataDefault, Data01 - Data10 are treated as the strings for display.
1 - Image
Display image. DataDefault, Data01 - Data10 are treated as the image file name.
DataDefault Specify the strings or the image file name if the read value does not fulfill any condition.
Data01 - Data10 Specify the strings or the image file name if the read value fulfills the condition. These data
correspond to the same ordinal condition.
ValueMin01 - Specify the start value of the condition range. It is possible to set 10 conditions from 01 to 10.
ValueMin10
ValueMax01 - Specify the end value of the condition range. It is possible to set 10 conditions from 01 to 10.
ValueMax10

5.3.7 AutoChange Control

An invisible control that is used to change the web page automatically if the value of Register, System or
KAREL Variable (except XYZWPR type) or I/O is within specified range or not. Used to change the web
page from the teach pendant program.

For example:
If the read value is within ValueMin01 through ValueMax01, therefore ValueMin01 <= (read value)
<= ValueMax01 is fulfilled, the web page specified in PageName01 is displayed.

NOTE
1 If the read value is within the multi specified range, the smallest number
condition is applied.
2 If the read value is out of all specified ranges, the change of web page is not
done.
3 The condition is ignored during screen initialization.
4 This control is invisible at run-time.
5 For logical variable set 0 for FALSE, and 1 for TRUE
- 40 -
B-83114EN/01 5.MAKING A CUSTOM iPENDANT SCREEN

Property
Property can be divided into the below groups.
Related data for read: DataType, DataIndex
Related specifying standard value:
PageName01 - PageName10, ValueMin01 - ValueMin10, ValueMax01 - ValueMax10
Property Description
DataType Specify the type of the data to monitor. The following data types are supported:
100 - Static
Not used usually.
101 - Numeric Register
Compare the value of register specified in DataIndex is within ValueMinXX through
ValueMaxXX and XX is 01 through 10 in order.
102 - System Variable
Compare the value of the System Variable specified in DataIndex is within ValueMinXX
through ValueMaxXX, and XX is 01 through 10 in order.
103 - KAREL Variable
Compare the value of the KAREL Variable specified in DataIndex is within ValueMinXX
through ValueMaxXX, and XX is 01 through 10 in order.
I/O
Compare the value of I/O specified in DataType and DataIndex is within ValueMinXX
through ValueMaxXX, and XX is 01 through 10 in order.
DataIndex Specify the number or the variable name.
IOSim Used only for I/O types. When TRUE, the port simulation status is monitored instead of the
actual point.
Interval Specify the interval time in ms.
Periodic Specify whether to monitor the data or send periodically.
PageName01 - Specify the web page to display when the read value fulfills the condition. These data
PageName10 correspond to the same ordinal condition.
ValueMin01 - Specify the start value of the condition range. It is possible to set 10 conditions from 01 to 10.
ValueMin10
ValueMax01 - Specify the end value of the condition range. It is possible to set 10 conditions from 01 to 10.
ValueMax10

5.3.8 MenuChange Control

Used to select the web page from the popup menu. The menu is displayed when the MenuChange button
is clicked and can have a maximum of 10 items. The image button is also available.

- 41 -
5.MAKING A CUSTOM iPENDANT SCREEN B-83114EN/01

NOTE
It is necessary to set menu item without a break. When there is a null data in
PageCaptionXX, the rest of data after the null data is not displayed, even if there
is effective data after the null data.

Property
Property can be divided into the following groups.
Related display: Caption, ForeColor, BackColor, Font, Border
Related changing content: PageCaption01 - PageCaption10, PageName01 - PageName10
Related specifying image: TrueImage, FalseImage

Property Description
Caption Specify the fixed String.
ForeColor Specify the color of characters.
BackColor Specify the background color.
Font Specify the font name, font style and size.
HAlign Specify the horizontal alignment of characters.
VAlign Specify the vertical alignment of characters.
Border Select the border design of the control.
ViewType Select the type of the button to display.
0 – Normal Specify the normal button.
1 – Image Specify the image button.
PageCaption01 - Specify the strings displayed on popup menu for selecting menus. These data correspond to the
PageCaption10 same ordinal PageNameXX.
PageName01 - Specify the page name displayed after popup menu is selected. These data correspond to the
PageName10 same ordinal PageCaptionXX.
TrueImage Specify the image to be displayed when the button is pushed. Used only in case that ViewType
is Image type.
FalseImage Specify the image to be displayed when the button is not pushed. Used only in case that
ViewType is Image type.

5.3.9 ButtonChange Control

Used to display the specified web page. Can also be used to perform a command using a URL. (KCL and
KCLDO Commands). The image button is also available.

- 42 -
B-83114EN/01 5.MAKING A CUSTOM iPENDANT SCREEN

Property
Property can be divided into the below groups.
Related display: Caption, ForeColor, BackColor, Font, Border
Related specifying image: TrueImage, FalseImage
Related changing content: PageName

Property Description
Caption Specify the fixed String.
ForeColor Specify the color of characters.
BackColor Specify the background color.
Font Specify the font name, font style and size.
HAlign Specify the horizontal alignment of characters.
VAlign Specify the vertical alignment of characters.
Border Select the border design of the control.
ViewType Select the type of the button to display.
0 - Normal Specify the normal button.
1 - Image Specify the image button.
PageName Specify the page name displayed after button is pushed or specify a command to perform using
a URL.
TrueImage Specify the image to be displayed when the button is pushed. Used only in case that ViewType
is Image type.
FalseImage Specify the image to be displayed when the button is not pushed. Used only in case that
ViewType is Image type.

5.3.10 ComboBox Control

The ComboBox Control allows the selection of an item from a popup menu. The control displays the
currently selected item. When the button is clicked (enter key), a popup list is displayed. When an
item is selected, the selected value and selected text is written to the specified data on the controller.
The selected value is monitored so can be dynamically changed.

The selection list can be populated by various data fields:

• List of programs with program type filter.
• Contents of KAREL string array.
• Dictionary elements.
• List of file names.

- 43 -
5.MAKING A CUSTOM iPENDANT SCREEN B-83114EN/01

Property
Related display of button:
Property Description
Caption Specify the format string.
ForeColor Specify the color of characters.
BackColor Specify the background color.
Font Specify the font name, font style and size.
HAlign Specify the horizontal alignment of characters.
VAlign Specify the vertical alignment of characters.
Border Select the border design of the control.
ViewType Select the type of the button to display.
0 Normal Specify the normal button.
1-8 Specify the function key.

Related selection of list:

Property Description
DataType Specify the type of the data for the selected value of the list.
DataIndex Specify the number or the variable name of the data for the selected value of the list.
IOSim Used only for I/O types. When TRUE, the port simulation status is displayed and changed
instead of the actual point.
Interval Specify the interval time in ms.
Periodic Specify whether to monitor the data or send periodically.
TextType Specify the type of the data to set for the selected text of the list. Not valid if the Type property
is set to ProgramType or FileType.
TextIndex Specify the number or the variable name to set for the selected text of the list. Not valid if the
Type property is set to ProgramType or FileType.

Related list:
Property Description
Type Specify the type of the ComboBox.
0 - ListType Not available in this release.
1 - ProgramType
Similar to %pk in the Form Manger. The list is populated by the loaded programs on the
robot. The ProgType property is used to further classify which types of programs are
included in the list. The list is updated every time the list is displayed. Upon selection of the
list, the program name is copied to the data specified by DataType/DataIndex.
2- VariableType
Similar to %v in the Form Manger. The list is populated by a KAREL string array. The
DataSource property is used to specify the KAREL string array. The list is updated every
time the list is displayed. Upon selection of the list, the value is copied to the data specified
by DataType/DataIndex. The string is copied to the data specified by TextType/TextIndex.
3 - DictionaryType
Similar to %w in the Form Manager. The list is populated by a dictionary element. The
DataSource property is used to specify the starting dictionary element. The list is updated
every time the list is displayed. Upon selection of the list, the value is copied to the data
specified by DataType/DataIndex. The string is copied to the data specified by
TextType/TextIndex.
4 - FileType
The list is populated by the file names. The DataSource property is used to specify the
directory. The list is updated every time the list is displayed. Upon selection of the list, the
file name is copied to the string specified by DataType/DataIndex.

- 44 -
B-83114EN/01 5.MAKING A CUSTOM iPENDANT SCREEN

Property Description
ProgType Specify the program type if the Type property is set to ProgramType.
1 - TP programs
The list is populated by only TP programs (default).
2 - KAREL programs
The list is populated by only KAREL programs.
6 - All
The list is populated by TP, KAREL, and VR programs.
16 - TP & KAREL
The list is populated by TP and KAREL programs.
DataSource Specify the source used to populate the list when the Type property is set to VariableType,
DictionaryType, or FileType.

Usage of DataSource property depends on value of Type.

Type Description
VariableType DataSource should specify a KAREL string array. Each element of the array should define a
choice in the list. The first element in the array is related to the value 0 and is never used. The
second element is related to the value 1 and is the first item in the list. This is defined for
compatibility with the Form Manager. The last item is either the end of the array or the first
uninitialized value. For example, DataSource = “[RUNFORM]CHOICES”

[RUNFORM] CHOICES:ARRAY[6] OF STRING[12] =

[1] *uninit*
[2] 'Red' <= value 1
[3] 'Blue' <= value 2
[4] 'Green' <= value 3
[5] ‘Yellow’ <= value 4
[6] *uninit*

Example for Boolean type:

[RUNFORM] IOSIM:ARRAY[3] OF STRING[12] =
[1] *uninit*
[2] 'UNSIM' <= value 0 for Boolean types
[3] 'SIM' <= value 1 for Boolean types
DictionaryType DataSource should specify the starting dictionary element. This first element is related to the
value 1. One dictionary element is needed to define each entry in the list. The last entry
should be followed by a dictionary element that contains “\a”. For example, DataSource =
“FORM[9]”
$9
“Red” * value will be set to 1
$-
“Blue” * value will be set to 2
$-
“Green” * value will be set to 3
$-
“Yellow” * value will be set to 4
$-
“\a” * specifies end of list

Example for Boolean type, DataSource = “FORM[9]”

$9
“UNSIM” * value 0 for Boolean types
$-
“SIM” * value 1 for Boolean types
$-
“\a” * specifies end of list

- 45 -
5.MAKING A CUSTOM iPENDANT SCREEN B-83114EN/01

Type Description
FileType DataSource should specify a File Specification. If no DataSource is specified, all files on the
default device of the robot are shown.

Some examples of DataSource:

MF: \*.DT
*.DT (uses default device)
FR: \*.DT

5.3.11 Execution Control

The Execution Control can be used to specify a KAREL program to run. The Execution Control will be
invisible on the page. It can reside anywhere on the visible portion of the web page. If it is not on the
visible portion then it may not be created. It is only operational if it has been created. Only one Execution
Control should be used per web page.

After the page is completely loaded, the KAREL program is run. If the KAREL program is not loaded, it
will not be run. The KAREL program will already be running if another pane has the same web page
loaded. A static variable, ref_cnt, is created and maintained. The KAREL program is aborted when no
panes are left to process. The KAREL program can increment the reference count if you wish it to remain
running: ref_cnt = ref_cnt + 1

Property

Property Description
Name Specify the name of the KAREL program.
Type Select the type of execution.
0 - KAREL Run a KAREL program.
Parameter1 – Specify the string parameter to set in $UI_PANEDATA[PANEID].$PARAMETER1 through
Parameter8 $UI_PANEDATA[PANEID].$PARAMETER8.

5.4 CONTROL DESIGN ADVICE

The process speed shows a tendency to be slow as the number of controls on the page increases. Using
Image files, the process speed shows a tendency to be slow as the number of colors increase.

5.4.1 Error Code Dialog

When an error occurs, a dialog appears, such as

The error title contains the error. The object name and error content is displayed in the dialog box. See
Subsection “5.2.1 Object Tag” for details on changing the object name.

- 46 -
B-83114EN/01 5.MAKING A CUSTOM iPENDANT SCREEN

5.4.2 Error Code Messages

Error content Content, Cause, Remedy

Access initialize error. Content:
Error occurred trying to access the specified data type.
Cause:
Specified DataType and/or DataIndex were not valid.
Remedy:
Specify a valid type in DataType and valid index in DataIndex. To
access a dictionary element use dict_name[element_number], such as
TPAR[5]
Register access initialize error. Content:
Error occurred trying to access the specified Register.
Cause:
Specified register number doesn’t exist on the robot.
Remedy:
Specify the register number in DataIndex which exists on the robot.
System Variable access initialize Content :
error. Error occurred trying to access the specified System Variable.
Cause :
Specified System Variable doesn’t exist on the robot.
Remedy :
Specify the System Variable name in DataIndex which exists on the
robot, such as $MNUTOOLNUM[1]. The System Variable type must be
Integer, Real, Boolean, Short, Byte, or String.
KAREL Variable access initialize Content :
error. Error occurred trying to access the specified KAREL Variable.
Cause :
Specified KAREL Variable doesn’t exist on the robot.
Remedy :
Specify the KAREL Variable name in DataIndex which exists on the
robot, such as [KRLPRG]KRLARY[1]. The KAREL variable type must
be Integer, Real, Boolean, Short, Byte, or String.
I/O access initialize error. Content :
Error occurred trying to access the specified I/O port.
Cause :
Specified I/O type or port number doesn’t exist on the robot.
Remedy :
Specify the I/O type in DataType and the port number in DataIndex
which exists on the robot.
Write error. Content :
Error occurred trying to write the data.
Cause :
Data may be out of valid range.
Remedy :
Check the new value is within a valid range. Check the DataType and
DataIndex are specified correctly.
No write access to data. Content :
Error occurred trying to write the data.
Cause :
Tried to write data which is write protected.
Remedy :
Try to set manually at control start.

- 47 -
5.MAKING A CUSTOM iPENDANT SCREEN B-83114EN/01

Error content Content, Cause, Remedy

No Image File. Content :
No Image File is shown instead of the specified image.
Cause :
Specified image file could not be loaded from the robot.
Remedy :
Verify the image file is specified correctly as a control parameter.
Verify the image file is copied to the correct device and directory on the
robot.
HTTP/1.0 404 File Not Found Content :
“HTTP/1.0 404 File Not Found” is shown instead of the specified web
page.
Cause :
Specified web page could not be found on the robot.
Remedy:
Verify the web page is specified correctly as a control parameter.
Verify the web page is copied to the correct device and directory on the
robot.

- 48 -
B-83114EN/01 6.USING THE CHART CONTROL

6 USING THE CHART CONTROL

The Chart control is a means to graphically render data on the iPendant or an externally connected
browser such as Internet Explorer.

The Chart control is configured through properties within the web page to control the display and
configure the data sources. A Chart has one or more channels or data sources. These sources are supplied
from the robot controller, and specified by name and monitor rate.

Properties of the control also determine the scaling, format, colorization and layout of many of the
Chart’s characteristics.

A Chart may be specified as either a Bar or Line chart.

1) Bar chart:

2) Line chart

These charts can be oriented horizontally or vertically.

A maximum of 8 channels per Chart can be configured and active at one time.

- 49 -
6.USING THE CHART CONTROL B-83114EN/01

Conventions:
Usually axes are referred to as X-axis and Y-axis for 2-dimensional charting. This gets confusing when
horizontal or vertical orientation requires translation to the browser or plug-in native coordinate system.
Instead we will use the following nomenclature regardless of the orientation:

- SampleAxis or SampleScale
SampleAxis or SampleScale refer to the sample index.
For a Bar Chart this is the base axis of the bars.

For a Line Chart this is the common axis among multiple channels. It may be time, or just a running
sample increment but it is common and relates the individual channels.

- DataAxis or DataScale
DataAxis or DataScale refers to the data value of the channel.
For a Bar Chart this is common to all channels.
For a Line Chart this is independent among all channels since its scaling will dictate the visibility of
small or large changes in the channels data value.

The easiest way to create chart on the screen for the iPendant is by putting the Chart controls on the web
page and by setting its properties.

The characteristics controlling items such as chart layout, orientation, data source, labels, colors, etc. can
be controlled by the user setting the appropriate properties of the Chart control.

Initially when a chart control is first inserted on the web page, by Microsoft FrontPage, it is displayed
with the default light gray background in 200 by 160 pixel size. The two text items in the control reflect
the Caption and size (width and height). These are dynamically updated when the size or Caption is
changed.

As the chart is resized and channels are enabled, the display changes dynamically to give a general feel
for the overall layout.

- 50 -
B-83114EN/01 6.USING THE CHART CONTROL

6.1 CONTROL ARRANGEMENT

To insert a Chart Control to your web in FrontPage, follow these steps:
Procedure 6-1 Insert a Chart Control
Step
1 Position your cursor where you want the control to appear.
2 Select Insert | Web Component from the menu bar.
3 Select Advanced Controls in Component type list and select ActiveX Control in Choose a control
list. Then press Next.

4 Choose the FANUC iPendant Chart Control from the list of available FANUC iPendant controls,
and click OK. The Chart control is now inserted into your page.

- 51 -
6.USING THE CHART CONTROL B-83114EN/01

NOTE
If the FANUC iPendant Chart Control is not an option in the list, use the
Customize… button to enable it. If the option is not available under the
Customize… setup, then the proper software for the FANUC controls has not
been installed.

5 The particular properties can be configured from the ActiveX property pages. Either double click on
the control or right click and select ActiveX Control Properties.

6.2 COMMON CHART CONTROL PROPERTIES

A Chart control has the following properties.

6.2.1 Object Tag

The Object Tag dialog allows you to specify some standard attributes associated with your control. The
Name is used when an error occurs. The width and height can be specified in pixels or percentage (%).
Of course, you can resize the control in FrontPage by dragging the control’s handles with the mouse.

The remaining properties are grouped by their property page tab.

6.2.2 Fonts
The font properties associated with the chart as the “defaults” are modified from the Fonts property page.
Text strings use these “default” settings when no other font attributes are specified.

Item Description
Font Font specifies the name of the font passed in the Font property.
Font Style Font Style can specify regular, bold, italic and italic bold. This affects whether the properties
FontBold and FontItalic are optionally passed.

- 52 -
B-83114EN/01 6.USING THE CHART CONTROL

Item Description
Size FontSize specifies the size of the font. It is passed in the FontSize property.
The iPendant has built-in fonts for 12, 14, 16, 18 and 24-point fonts. Valid ranges of font sizes
are 12 through 24. Use one of following values.

12 Specifies 12 point font.

14 Specifies 14 point font.
16 Specifies 16 point font.
18 Specifies 18 point font.
24 Specifies 24 point font.
Strikeout Strikeout specifies whether the FontStrikethrough property is passed.
Underline Underline specifies whether the FontUnderline property is passed.

NOTE
1 Font, Strikeout and Underline has no effect on iPendant
2 For the iPendant only regular and bold have an effect, italic and bold italic are
ignored.
3 iPendant does not support font of 8point and smaller because it is hard to read
such font.

6.2.3 General Chart Properties

6.2.3.1 Caption & CaptionFontSize

Caption specifies a text string to be displayed as a general label for the chart. This string is centered at the
top of the Chart control, in the control’s foreground color and font properties. CaptionFontSize is used to
override the “default” font size specified from the Fonts property tab.

- 53 -
6.USING THE CHART CONTROL B-83114EN/01

6.2.3.2 Annotation & AnnotateFontSize

Annotation specifies a text string to be displayed as a note for the chart. This string is centered at the
bottom of the Chart control, in the control’s foreground color and font properties. AnnotateFontSize is
used to override the “default” font size specified from the Fonts property tab.

6.2.3.3 Name
Name is a text string that specifies an association to a KAREL program on the controller.
Currently, when the Chart control is instantiated, the control checks for the existence of two program
variables on the controller. This variable can be used to pass text commands in the format and with the
content of other properties to dynamically affect the Chart control’s operation.

[name] cmdstr
If the variable exists and is of type STRING the control creates a monitor for this variable. Strings of
commands can be written (set) to this variable and are delivered to the Chart control to affect ‘dynamic’
actions such as data updates or changes in some chart properties.

[name]cmdack
If the variable exists and is of type BOOLEAN or INTEGER, the Chart control uses this variable to
acknowledge that commands have been accepted via the command variable and acted on. The cmdack
variable is set TRUE or 1 when that command is accepted by the plug-in.

NOTE
The Name parameter can utilize !PaneID. Please refer to subsection 5.2.15 for
Pane ID.

6.2.3.4 Border
Border select the border surrounding the Chart control. Allowable values are:

>0 A 3 dimensional raised border, that number of pixels thick.

=0 No border line.
<0 A 3 dimensional depressed border, that number of pixels thick.

6.2.3.5 Foreground & Background Colors

The Colors dialog allows you to specify the color of certain elements. Colors associated with the Chart
control are:

ForeColor Specify the “default” color of any entity that does not have an explicit color defined.
BackColor Specify the “default” background color.

NOTE
Colors are specified as a decimal value represent bbggrr (blue green red)
format, where as hexadecimal value preceded by the # sign are in rrggbb ( red
green blue) format. For example; ForeColor = 10531008 (decimal) is the same
as ForeColor = #C0B0A0 (hex).

6.2.3.6 Pipe
Pipe is a text string that specifies a named data file created on the controller and only associated with the
PIP: device.
- 54 -
B-83114EN/01 6.USING THE CHART CONTROL

This file is used to dynamically deliver data to the Chart control on the iPendant. The name can be any
8.3-formatted name, for example: chart1.dat.
The name of this file is sent to the controller when the chart control is instantiated on the iPendant. The
file name is concatenated to PIP: and the file opened. If the file does not exist then the file is created and
opened for read. If the file does exist prior to this, the file is opened for read access and a seek to the end
of file done to eliminate the possibility of stale data.

When the last chart control using this file is gone, the file is deleted.

NOTE
The Pipe parameter can utilize !PaneID. Please refer to subsection 5.2.15 for
Pane ID.

6.2.3.7 PipeMonRate
PipeMonRate specifies the time in milliseconds at which the Pipe file data is sampled.

NOTE
This value should be specified at a rate that give reasonable performance and
display update. The controller will enforce a minimum of 100ms.

6.2.4 Chart config Tab

Chart config properties differ slightly between a Bar chart and Line chart. For the Bar chart the Chart
config tab is as follows:

And for a Line chart the Chart config tab is as follows:

- 55 -
6.USING THE CHART CONTROL B-83114EN/01

NOTE
The Data Scale and Sample Scale properties have different meanings between
the two types of charts (Bar or Line).

6.2.4.1 ChartType
ChartType specifies the type of chart as a numeric value. Allowable values are:

1 Displays a bar chart

2 Displays a line chart

6.2.4.2 Orientation
Orientation specifies the chart’s orientation on the iPendant as a numeric value. Allowable values are:

1 Displays a horizontal chart

2 Displays a vertical chart

6.2.4.3 LabelFontSize
LabelFontSize specifies the font size of the channels data labels.
The iPendant has built-in fonts for 12, 14, 16, 18 and 24-point fonts. Valid ranges of font sizes are 12
through 24. Use one of following values.

12 Specifies 12 point font.

14 Specifies 14 point font.
16 Specifies 16 point font.
18 Specifies 18 point font.
24 Specifies 24 point font.

NOTE
iPendant does not support font of 8point and smaller because it is hard to read
such font.

- 56 -
B-83114EN/01 6.USING THE CHART CONTROL

6.2.4.4 LineScaleActive
LineScaleActive is set from the “Channel Scale Active:” box. It controls which data scale(s) are selected
for display on a line chart. When multiple channels are configured and active a chart may display in two
ways.

1 A multiple ‘stacked’ charts each with their individual data scales.

2 A single chart, with one channel selected for the data scale. In this case the data scale edge will be in
the color of the corresponding channel (in the following example it is channel 2, or lime). When
channels are overlaid in this manner the non-selected channels are still scaled to their own data scale.

Following values are available.

LineScaleActive Description
0 Channels are independently displayed in a ‘stacked’ fashion
1 to 8 Channels are overlaid. The value selects the channel to display the data scale for. All other
channels are still called along the data scale by their own data scale.

6.2.4.5 DataFontSize
DataFontSize specifies the font size of the channels data value fields.
The iPendant has built-in fonts for 12, 14, 16, 18 and 24-point fonts. Valid ranges of font sizes are 12
through 24. Use one of following values.

- 57 -
6.USING THE CHART CONTROL B-83114EN/01

12 Specifies 12 point font.

14 Specifies 14 point font.
16 Specifies 16 point font.
18 Specifies 18 point font.
24 Specifies 24 point font.

NOTE
iPendant does not support font of 8point and smaller because it is hard to read
such font.

6.2.4.6 DataFormat
DataFormat specifies the format in which the channel’s data value will be displayed. The display appears
in the legend, near the channel’s label, if DataShowValues = 1.

The format is in ‘C’ printf format for a single precision floating point number. For example; %9.3f

Default if not specified is %9.3f.

NOTE
Currently %f is the only allowed format.

6.2.4.7 DataShowValues
DataShowValues specifies whether or not the value of each channel is displayed in a table near the
channels label and in the DataFormat.

Allowable values are:

0 Do not display values

1 Display the values.

Default if not specified is 0.

6.2.4.8 SampleScaleAspect
The Aspect box sets SampleScaleAspect. It specifies a SAMPLE SCALE multiplier value. This is a
simple multiplier value applied to the sample scale after the SampleScale Minimum and Maximum values.
A Typical use might be to equate samples to time.

NOTE
There are no explicit checks on the bounds of this value. It is simply used as a
multiplier, so it could also be a value > 1.

6.2.4.9 SampleScale
SampleScale specifies the sample scale’s minimum and maximum extent, since all LINE CHART
channels have one common sample scale.

This property only pertains to a Line chart.

The extents can be specified as a pair of comma separated numbers (min,max), or a single value.

- 58 -
B-83114EN/01 6.USING THE CHART CONTROL
Following values are available.
SampleScale Description
min If value < 0, max is assumed 0.
min,max Min and max as specified.
max If value > 0, min is assumed 0.
For a horizontal Line chart; min is the left value and max is the right value.
For a vertical line chart; min is the bottom value and max is the top value.

NOTE
For a Bar Chart this property is ignored.

6.2.4.10 SampleScaleFormat
SampleScaleFormat specifies the format of the sample scale labels.

This property only pertains to a Line chart.

The format is in ‘C’ printf format for a single precision floating point number. For example; %3.1f

Default if not specified is %3.1f

NOTE
Currently %f is the only allowed format.

6.2.4.11 SampleGrid
SampleGrid is controlled by the Grid Markers box. It specifies the interval of a grid to be displayed along
the SampleScale.

This property only pertains to a Line chart.

Allowable values are:

0 No grid is displayed.
>0 Display grid in increment of this along the axis.

6.2.4.12 DataScaleFormat(Line Chart)

DataScaleFormat specifies the format of the DataScale labels.

This property only pertains to a Line chart.

The format is in ‘C’ printf format for a single precision floating point number. For example; %3.1f

Default if not specified is %3.1f.

NOTE
Currently %f is the only allowed format.

6.2.4.13 DataScale
DataScale specifies the data scale’s minimum and maximum extent, since all BAR CHART channels
have one common data scale.
- 59 -
6.USING THE CHART CONTROL B-83114EN/01

This property only pertains to a Bar chart.

The extents can be specified as a pair of comma separated numbers (min,max), or a single value.

Following values are available.

DataScale Description
min If value < 0, max is assumed 0.
min,max Min and max as specified.
max If value > 0, min is assumed 0.
For a horizontal Bar chart; min is the left value and max is the right value.
For a vertical Bar chart; min is the bottom value and max is the top value.

NOTE
For a Line Chart this property is ignored.

6.2.4.14 DataScaleFormat (Bar Chart)

DataScaleFormat specifies the format of the data scale labels.

This property only pertains to a Bar chart.

The format is in ‘C’ printf format for a single precision floating point number. For example; %3.1f

Default if not specified is %3.1f

NOTE
Currently %f is the only allowed format.

6.2.4.15 DataGrid
DataGrid is controlled by the Grid Markers box. It specifies the interval of a grid to be displayed along
the DataScale.

This property only pertains to a Bar chart.

Allowable values are:

0 No grid is displayed.
>0 Display grid in increment of this along the axis.

6.2.4.16 GridColor
GridColor specifies the color for the Grid lines.

NOTE
There is only one color for both Sample and Data scale grids.

Default if not specified is the same color as the data and sample scales.

6.2.4.17 GridType
GridType is controlled by the Ticks checkbox. It specifies how the Grid lines are displayed.

- 60 -
B-83114EN/01 6.USING THE CHART CONTROL
Allowable values are:

0 Grid lines are displayed all the way across the chart.
1 Grid lines are displayed as “tick” marks along the axis scale(s).

6.2.5 Channel config Tab

Channel config properties of a Bar Chart control are:

Or for a Line Chart control are:

The only significant difference is that for a Line Chart the Data Scale properties can be set on a per
channel basis.

The Channel number selects the channel number (N) that the remainder of the properties on this tab
affects.

Allowable numbers are 1 through 8.

- 61 -
6.USING THE CHART CONTROL B-83114EN/01

6.2.5.1 ChN_Name
ChN_Name specifies a text string to be used as name for the channel.

This is displayed on the chart as the Channel label in the channel’s color (specified by chN_Color).

Default if not specified is “chN_Name”, where the numeric channel number replaces N.

NOTE
If the name is specified with a leading $, it is interpreted as a system variable
which should be of type KSTRING. In this case, the contents of the string
variable will be used as the name.

6.2.5.2 ChN_Color
ChN_Color specifies the color for the channel.

The color value can be specified in the hexadecimal or decimal format that the ForeColor and BackColor
use.

Default if not specified it the chart’s foreground color (specified by ForeColor).

6.2.5.3 ChN_Source
ChN_Source specifies the source of data monitored from the controller.

The source can specify any of the following. Note that where indexes are appropriate, they are specified
enclosed by [ ].

Following values are available.

DataScale Description
numreg[n] Numeric register n.
$sysvar System variable.
[prog]var KAREL variable.
DIN[n] Digital in n.
DOUT[n] Digital out n.
ANIN[n] Analog in n.
ANOUT[n] Analog out n.
RDI[n] Robot digital in n.
RDO[n] Robot digital out n.
GPIN[n] Group in n.
GPOUT[n] Group out n.

6.2.5.4 ChN_Data
ChN_Data specifies data for a single channel as a single or sequence of data points.

Values are specified as a comma separated series of data values:

data Data is one channel data point.

data, data,… Data is a sequence channel data points.

This can be used to create a ‘static’ chart where all data is supplied as web page content.

- 62 -
B-83114EN/01 6.USING THE CHART CONTROL

6.2.5.5 ChN_Digital
ChN_Digital specifies whether this channel should be represented as an analog or digital signal with
square transitions.

This property only pertains to a Line chart.

Allowable values are:

0(not checked) Channel is analog representation.

1(checked) Channel is digital representation.

As a digital representation, the transition is made at the next sample that changes.

6.2.5.6 ChN_State
ChN_State specifies whether the specified channel is on or off from the Active: checkbox.

Allowable values are:

0 (not checked) Channel is off (inactive).

1 (checked) Channel is on (active).

6.2.5.7 ChN_Rate
ChN_Rate specifies the rate in milliseconds that the channel source is monitored at from the Sample rate:
input.

NOTE
When multiple channels are active the fastest rate among all channels is used as
the monitor rate for all channels.

6.2.5.8 ChN_DataScale
ChN_DataScale specifies the data scale minimum and maximum extents for a Line Chart.

This property only pertains to a Line chart.

The extents can be specified as a pair of comma separated numbers (min,max), or a single value.

Following values are available.

ChN_DataScale Description
min Assumed if value < 0, max is then 0.
min,max Min and max specified.
max Assumed if value > 0, min is then 0.

6.2.5.9 ChN_DataGrid
ChNDataGrid specifies the interval of a grid to be displayed along the DataScale.

This property only pertains to a Line chart.

- 63 -
6.USING THE CHART CONTROL B-83114EN/01

Allowable values are:

0 No grid is displayed.
>0 Display grid in increment of this along the axis.

6.2.5.10 ChN_AutoRange
ChN_AutoRange species that a channel can auto range or peak detect.

To avoid false peaks, the number of points that must exceed the min or max data scale can be specified.

The value is a comma-separated pair of numbers representing state and number of consecutive points
(state,npoints).

Item Description
state This is a numeric flag that turns auto range on or off. Following values are available.
0 Do not autorange
!=0 Auto range after n consecutive points fall outside the data scale.
npoints This specifies the number of consecutive points that must be outside the data scale, on either
extreme, before autoscale takes effect.

6.2.6 Miscellaneous

6.2.6.1 SampleMarkerN
SampleMarkerN specifies one of four markers that appear as lines parallel to the sample axis on a line
chart in the color specified by the SampleMarkerColor. (N = marker #)

This property only pertains to a Line chart.

Values are specified as a comma separated pair:

SampleMarkerN Description
0 Sample marker is off
state, value state is 1 or 0 for on or off, value is along the sample axis.

6.2.6.2 SampleMarkerColor
SampleMarkerColor specifies the color of the sample markers.

This property only pertains to a Line chart.

This is in the decimal or hexadecimal format that the ForeColor and BackColor use.

6.2.6.3 ChN_DataMarkerN
ChN_DataMarkerN specifies one of four markers PER CHANNEL that appear as lines parallel to the data
axis on the chart in the channels color. (N = marker #)

Values are specified as a comma separated pair:

ChN_DataMarkerN Description
0 data marker is off
state, value state is 1 or 0 for on or off, value is along the data axis.

- 64 -
B-83114EN/01 6.USING THE CHART CONTROL

6.2.6.4 Ch_Data_N
Ch_Data_N specifies data for ALL channels.

NOTE
This is not to be confused with ChN_Data.

Values are specified as a comma separated series of data:

Data_ch1,… ,data_chN Data is the actual sequence of data points.

This sequence may be a repeating sequence on data points that are distributed among N channels. For
example: Ch_Data_3=1,2,3,4,5,6,7,8,9,10 causes:

1,4,7,10 Sent to channel 1.

2,5,8 Sent to channel 2.
3,6,9 Sent to channel 3.

This can be used to create a ‘static’ chart where all data is supplied as web page content.

NOTE
No accounting is made to make sure that the number of data points is integral to
the number of channels (N) specified.

6.2.6.5 ChN_Clear
ChN_Clear specifies that channel N is to be cleared, that is all data is deleted.

6.2.6.6 ChartClear
ChartClear specifies that all channels on a chart are to be cleared, that is all data is deleted.

6.3 CHART CONTROL DESCRIPTION

This section describes the charting controls that can be used on iPendant.

6.3.1 Bar Chart Control

• A Bar Chart control presents data in the familiar format of 2-dimensional bars.

• Each bar represents a separate channel with specific characteristics to uniquely identify it.
- 65 -
6.USING THE CHART CONTROL B-83114EN/01

• A legend is supplied to identify the channel by name and optionally show the current value.

• The current limitation supports monitoring up to 6 channels simultaneously.

• Each bar (channel) is scaled evenly across the sample axis.

• DataScaleMarkers can be placed on the chart sample scale. These are independent, 4 for each
channel.

• Data types that can be monitored are specified by the channel source as native controller data type.
These are monitored at set intervals and converted internally from their native data type to floating
point.

Property
Property can be divided into the groups shown below.

This first group should be considered static and not changed once the control is created:

Property Description
id Specifies an ID string.
height Specifies the height in pixels or %.
width Specifies the width in pixels or %.
FastLoad used internally by property editor.
ChartType Specifies the chart type, Bar or Line
FontSize Specifies the default font size.
Name Specifies the name to relate to a KAREL program.
Pipe Specifies the name of the pipe file.
Orientation Specifies orientation as horizontal or vertical.
ForeColor Specifies the default foreground color.
BackColor Specifies the background color.

The following may be change dynamically:

Property Description
Annotate Specifies the annotation text string to display.
CaptionFontSize Specifies the font size of the caption text.
LabelFontSize Specifies the font size of the channel label text.
DataFontSize Specifies the font size of the channel data value.
AnnotateFontSize Specifies the font size for the annotate text.
Border Specifies the border thickness in pixels of the control.
DataScale Specifies the data scale extents.
GridType Specifies the grid type, whole lines or ticks.
GridColor Specifies the default gridline color.
DataGrid Specifies data scale grid increments.
DataShowValues Specifies that data value be displayed in the legend.
DataFormat Specifies the ‘C’ format for the display of the data values.
ChanMonRate Specifies the default rate for channel monitors in milliseconds.
PipeMonRate Specifies the pipe file monitor rate in milliseconds.
CmdMonRate Specifies the CmdStr variable monitor rate in milliseconds. (Currently set the same as
PipMonRate).
ch_Data_N Specifies a comma separated data stream, N repeating channels per sample.

- 66 -
B-83114EN/01 6.USING THE CHART CONTROL
The following can occur 1 per channel N:
Property Description
chN_Name Specifies the text label for the channel legend.
chN_Color Specifies color of the channel.
chN_Source Specifies the source to start a monitor on the controller.
chN_Rate Specifies the monitor rate in milliseconds.
chN_State Specifies if the channel is active, on or not.
chN_Spread Not implemented.
chN_Data Specifies a comma separated data stream for the channel.
chN_AutoRange Specifies that the channel should auto range.
chN_DataMarkerN Specifies one of 4 markers along the data scale.

6.3.2 Line Chart Control

• A Line Chart control presents data in the familiar format that is similar to an oscilloscope trace.

• A chart can have independent graphs of each channel in a ‘stacked’ fashion, or can have all channels
overlaid on one graph. When the channels are overlaid one channel can be selected to have its
DataScale displayed, in this case the data scale is displayed in the color of the active channel.
Otherwise, the DataScale is displayed in the Chart control’s default ForeColor.

• When displayed in stacked mode, the channels are evenly sized and distributed over the display area
of the control.

• A legend is supplied to identify the channel by name and optionally show the current value.

• The current limitation supports monitoring up to 6 channels simultaneously.

• All channels share a common sample axis.

• DataScaleMarkers can be placed on the chart sample scale. These are independent, 4 for each
channel.

• Up to 4 Sample Scale markers can be places on the Chart. These are common to all channels.

• Data types that can be monitored are specified by the channel source as native controller data type.
These are monitored at set intervals and converted internally from their native data type to floating
point.

Property
Property can be divided into the groups shown below.

- 67 -
6.USING THE CHART CONTROL B-83114EN/01

This first group should be considered static and not changed once the control is created:
Property Description
id Specifies an ID string.
height Specifies the height in pixels or %.
width Specifies the width in pixels or %.
FastLoad used internally by property editor.
ChartType Specifies the chart type, Bar or Line
FontSize Specifies the default font size.
Name Specifies the name to relate to a KAREL program.
Pipe Specifies the name of the pipe file.
Orientation Specifies orientation as horizontal or vertical.
ForeColor Specifies the default foreground color.
BackColor Specifies the background color.

The following may be change dynamically:

Property Description
Annotate Specifies the annotation text string to display.
CaptionFontSize Specifies the font size of the caption text.
LabelFontSize Specifies the font size of the channel label text.
DataFontSize Specifies the font size of the channel data value.
AnnotateFontSize Specifies the font size for the annotate text.
Border Specifies the border thickness in pixels of the control.
LineWeight Specifies line thickness.
GridType Specifies the grid type, whole lines or ticks.
GridColor Specifies the default gridline color.
SampleScale Specifies the sample scale extents.
SampleGrid Specifies sample scale grid line increments.
SampleScaleAspect Specifies a multiplier for the SampleScale.
DataShowValues Specifies that data value be displayed in the legend.
DataFormat Specifies the ‘C’ format for the display of the data values.
SampleScaleFormat Specifies the ‘C’ format for the SampleScale extents and markers.
DataScaleFormat Specifies the ‘C’ format for the DataScale extents and markers.
LineScaleActive Specifies if Line chart(s) are overlaid or stacked, and if overlaid which channel is selected as
the data scale.
SampleMarkerN Specifies one of 4 markers along the SampleScale.
SampleMarkerColor Specifies the default SampleMarker colors.
ChanMonRate Specifies the default rate for channel monitors in milliseconds.
PipeMonRate Specifies the pipe file monitor rate in milliseconds.
CmdMonRate Specifies the CmdStr variable monitor rate in milliseconds. (Currently set the same as
PipMonRate).
ch_Data_N Specifies a comma separated data stream, N repeating channels per sample.

The following can occur 1 per channel N:

Property Description
chN_Name Specifies the text label for the channel legend.
chN_Color Specifies color of the channel.
chN_Digital Specifies the channel is digital if 1.
chN_Source Specifies the source to start a monitor on the controller.
chN_Rate Specifies the monitor rate in milliseconds.
chN_DataScale Specifies the channels data scale extents.
chN_DataGrid Specifies data scale grid line.
- 68 -
B-83114EN/01 6.USING THE CHART CONTROL

Property Description
chN_State Specifies if the channel is active, on or not.
chN_Spread not implemented.
chN_Data Specifies a comma separated data stream for the channel.
chN_AutoRange Specifies that the channel should auto range.
chN_DataMarkerN Specifies one of 4 markers along the data scale.

6.4 PROPERTIES with ADDITIONAL OPTIONAL VALUES

A few of the properties were extended to add optional values that can be used. This was done for the sake
of compactness and backwards portability.

• chN_DataMarkerN=”flag,value[,color]”
color is an optional parameter. It modifies only this one single marker.

• SampleMarkerN=”flag,value[,color]”
color is an optional parameter. It modifies only this one single marker.

- 69 -
7.USING THE DRAWING CONTROL B-83114EN/01

7 USING THE DRAWING CONTROL

The Drawing control is a means to render line graphics on the iPendant or an externally connected
browser such as Internet Explorer. The following example is one with each type of drawing entity
rendered.

Properties of the control also determine the scaling, format, colorization and layout of many of the
Drawing’s characteristics.

Conventions:
The Drawing control is a ‘white board’ that line art entities are placed on. These entities have
characteristics (or properties that are unique to each).

Entities are:
• Text – as in an ASCII string
• Line – a single element drawn from point 1 to point 2
• Path – a sequence of lines
• Circle – a circle empty or filled
• Rectangle – a rectangle empty or filled, square cornered or rounded
• Diamond – a diamond (not filled)
• Image – a picture, source: .jpg, .gif or .png file

Entities have attributes. Some general ones are:

• Name - an ASCII name to identify the entity
• Color - a color
• Fill color – color of the fill
• Height & width, or radius – to determine its size
• Location – to locate its origin (x,y)
• Points – Begin and end locations
• Layer – drawing layer that the entity belongs to.

Each entity belongs to a layer. By default if not specified the entity belongs to layer 0.
• Layer 0 is always (ON) displayed.
• Other layers 1 through 9 can be turned on or off.

The normal coordinate system for the Drawing control on the iPendant (and IE) is:
• Upper left is 0, 0
- 70 -
B-83114EN/01 7.USING THE DRAWING CONTROL

• Upper right is + max X

• Lower Left is + max Y

To simplify things an ‘InvertY’ flag is defined to translate the coordinate system to:
• Upper left is + max Y
• Upper right is + max X
• Lower Left is 0, 0

The easiest way to create drawing on the screen for the iPendant is by putting the Drawing control on the
web page and by setting its properties.

Initially when Microsoft FrontPage inserts a drawing control on the web page, it is displayed with the
default light gray background in 200 by 160 pixel size. The two text items in the control reflect the
Caption and size (width and height). These are dynamically updated when the size or Caption is changed.

The characteristics controlling items such as orientation, fonts, colors, etc. can be controlled by the user
setting the appropriate properties of the Drawing control.

7.1 CONTROL ARRANGEMENT

To insert a Drawing Control to your web in FrontPage, follow these steps:
Procedure 7-1 Insert a Drawing Control
Step
1 Position your cursor where you want the control to appear.
2 Select Insert | Web Component from the menu bar.
3 Select Advanced Controls in Component type list and select ActiveX Control in Choose a control
list. Then press Next.

- 71 -
7.USING THE DRAWING CONTROL B-83114EN/01

3 Choose the FANUC iPendant Drawing 2D Control from the list of available FANUC iPendant
controls, and click OK. The Drawing control is now inserted into your page.

NOTE
If the FANUC iPendant Drawing 2D Control is not an option in the list, use the
Customize… button to enable it. If the option is not available under the
Customize… setup, then the proper software for the FANUC controls has not been
installed.

4 The particular properties can be configured from the ActiveX property pages. Either double click on
the control or right click and select ActiveX Control Properties.

7.2 COMMON DRAWING CONTROL PROPERTIES

A Drawing control has the following properties.

- 72 -
B-83114EN/01 7.USING THE DRAWING CONTROL

7.2.1 Object Tag

The Object Tag dialog allows you to specify some standard attributes associated with your control. The
Name is used when an error occurs. The width and height can be specified in pixels or percentage (%).
Of course, you can resize the control in FrontPage by dragging the control’s handles with the mouse.

The remaining properties are grouped by their property page tabs.

7.2.2 Fonts
The font properties associated with the drawing as the “defaults” are modified from the Fonts property
page. These “default” settings are used by the Text string entities when no other font attributes are
specified.

Item Description
Font Font specifies the name of the font passed in the Font property.
Font Style Font Style can specify regular, bold, italic and italic bold. This affects whether the properties
FontBold and FontItalic are optionally passed.
Size Size specifies the size is the font. It is passed in the FontSize property.
The iPendant has built-in fonts for 12, 14, 16, 18 and 24-point fonts. Valid ranges of font sizes
are 12 through 24. Use one of following values.

12 Specifies 12 point font.

14 Specifies 14 point font.
16 Specifies 16 point font.
18 Specifies 18 point font.
24 Specifies 24 point font.
Strikeout Strikeout specifies whether the FontStrikethrough property is passed.
Underline Underline specifies whether the FontUnderline property is passed.

- 73 -
7.USING THE DRAWING CONTROL B-83114EN/01

NOTE
1 Font, Strikeout and Underline has no effect on iPendant
2 For the iPendant only regular and bold have an effect, italic and bold italic are
ignored.
3 iPendant does not support font of 8point and smaller because it is hard to read
such font.

7.2.3 Draw Tab

7.2.3.1 Caption
Caption is a text string that is passed as a property but not used. It is there as an aid to the developer since
it is displayed on the FrontPage design and preview views.

7.2.3.2 Name
Name is a text string that specifies an association to a KAREL program on the controller.

Currently, when the Drawing control is instantiated, the control checks for the existence of two program
variables on the controller. These variables can be used to pass text commands in the format and with the
content of other properties to dynamically affect the Drawing control’s operation.

[name]cmdstr
If the variable exists and is of type STRING the control creates a monitor for this variable. Strings of
commands can be written (set) to this variable and are delivered to the Drawing control to affect
‘dynamic’ actions such as data updates or changes in some properties.

[name]cmdack
If the variable exists and is of type BOOLEAN or INTEGER, the Drawing control uses this variable to
acknowledge that commands have been accepted via the command variable and acted on. The cmdack
variable is set TRUE or 1 when that command is accepted by the plug-in.
- 74 -
B-83114EN/01 7.USING THE DRAWING CONTROL

NOTE
The Name parameter can utilize !PaneID. Please refer to Subsection 5.2.15 for
Pane ID.

7.2.3.3 Foreground & Background Colors

The Colors dialog allows you to specify the color of certain elements. Colors associated with the Drawing
control are:

ForeColor Specify the “default” color of any entity that doesn’t have an explicit color defined.
BackColor Specify the background color.

NOTE
Colors are specified as a decimal value represent bbggrr (blue green red)
format, where as hexadecimal value preceded by the # sign are in rrggbb ( red
green blue) format. For example; ForeColor = 10531008 (decimal) is the same
as ForeColor = #C0B0A0 (hex).

7.2.3.4 Pipe
Pipe is a text string that specifies a named data file created on the controller and only associated with the
PIP: device.

This file is used to dynamically deliver data to the drawing control on the iPendant. The name can be any
8.3-formatted name, for example: drawing1.dat.

The name of this file is sent to the controller when the drawing control is instantiated on the iPendant.
The file name is concatenated to PIP: and the file opened. If the file does not exist then the file is created
and opened for read. If the file does exist prior to this, the file is opened for read access and a seek to the
end of file done to eliminate the possibility of stale data.

When the last drawing control using this file is gone, the file is deleted.

NOTE
The Pipe parameter can utilize !PaneID. Please refer to Subsection 5.2.15 for
Pane ID.

7.2.3.5 PipeMonRate
PipeMonRate specifies the time in milliseconds at which the Pipe file data is sampled.

NOTE
This value should be specified at a rate that give reasonable performance and
display update. The controller will enforce a minimum of 100ms.

7.2.3.6 Border
Border Selects the size of the border surrounding the Drawing control.

Allowable values are:

- 75 -
7.USING THE DRAWING CONTROL B-83114EN/01

>0 A 3 dimensional raised border, that number of pixels thick.

=0 No border line.
<0 A 3 dimensional depressed border, that number of pixels thick.

7.2.3.7 FastLoad
FastLoad is selected by the checkbox.

Checked
Specifies that properties that are set to their corresponding “default” values are not included in the
web page. This effectively saves load time.

Unchecked
Specifies that all parameters are included in the web page, whether they have “default” values or not.

7.2.4 Draw2 Tab

7.2.4.1 Layer control

A Drawing has 10 layers.

• Layer 0 is always displayed. By default if an entity does not have a layer attribute, it belongs to layer
0 and is always displayed.

• Other layers 1 through 9 can be turned on or off by the check boxes. These check boxes control the
value of two parameters LayerOn and LayerOff.

• Both parameters are can be a comma separated lists of layers to turn on or off.

LayerOn Specifies a comma separated list of layers to turn on.

LayerOff Specifies a comma separated list of layers to turn off.

- 76 -
B-83114EN/01 7.USING THE DRAWING CONTROL
Examples are:

LayerOn=”n” Turns on layer n

LayerOff=”n,m,o” Turns off layers n,m and o.

7.2.4.2 Scale
Scale specifies a multiplier applied to both the X and Y scaling.

NOTE
This is used as a simple multiplier and can result in display peculiarities for each
display entity. The default for this setting should be left at 1.0.

7.2.4.3 InvertY
InvertY specifies that the Y scale is inverted.

• Normally the Y scale begins at the top and increases + to the bottom.

• When inverted the Y scale begins at the bottom and increases + to the top.

Checked
Y inverted. Y scale begins at the bottom and increases + to the top.
Unchecked
Y Not inverted. Y scale begins at the top and increases + to the bottom.

7.2.4.4 Data
Data Specifies a raw data string that the user can type in.

• This is supplied to the Drawing control via the Data parameter.

• Since the value is a string and should not contain double quotes, a single quote should be used in
place of double quotes. During processing all single quotes in the data value will be converted to
double quotes.

NOTE
This implies that single quotes cannot be handled or escaped. They should not
be used.

7.2.5 The Entities

7.2.5.1 Text
Text specifies a text entity on the drawing.

Attributes as follows:
Attribute Description
text[=id] Text entity with optional id
layer=n Optionally specifies the layer it belongs to. Default is layer 0
font=f Specifies font size, +/- can be used to increment or decrement from the default font size
locate=x,y Specifies x, y origin relative to the white board

- 77 -
7.USING THE DRAWING CONTROL B-83114EN/01

Attribute Description
color=cvalue Specifies color as hex or decimal value
bold=b bold ( 1=bold, 0=nobold )

7.2.5.2 Line
Line specifies a line entity on the drawing.

Attributes as follows:
Attribute Description
line[=id] Line entity with optional id
layer=n Optionally specifies the layer it belongs to. Default is layer 0
points=x1,y1,x2,y2 Specifies the beginning point x1,y1 and ending point x2,y2
color=cvalue Specifies color as hex or decimal value

7.2.5.3 Path
Path specifies a path entity on the drawing. The path entity is a sequence of continuous lines along a
sequence of points.

Attributes as follows:
Attribute Description
path[=id] Path entity with optional id
layer=n Optionally specifies the layer it belongs to. Default is layer 0
points=x1,y1,x2,y2,…,xn,yn Specifies the beginning point that a sequence of lines are drawn along
color=cvalue Specifies color as hex or decimal value

7.2.5.4 Circ
Circ specifies a circle entity on the drawing.

Attributes as follows:
Attribute Description
circ[=id] Circle entity with optional id
layer=n Optionally specifies the layer it belongs to. Default is layer 0
locate=x,y Specifies x, y origin relative to the white board
color=cvalue Specifies color as hex or decimal value
radius=r Specifies the circles radius r in pixels.
weight=w Specifies a thickness w in pixels
fill=fcolor Optional fill color in hex or decimal
halign=align Horizontal alignment (left, center, right), Default = left
valign=align Vertical alignment (top, middle, bottom), Default = bottom

7.2.5.5 Rect
Rect specifies a rectangle entity on the drawing.

Attributes as follows:
Attribute Description
rect[=id] Rectangle entity with optional id
layer=n Optionally specifies the layer it belongs to. Default is layer 0
locate=x,y Specifies x, y origin relative to the white board
color=cvalue Specifies color as hex or decimal value

- 78 -
B-83114EN/01 7.USING THE DRAWING CONTROL

Attribute Description
height=h Specifies height as h pixels
width=w Specifies width as w pixels
fill=color Optional fill color in hex or decimal
halign=align Horizontal alignment (left, center, right), Default = left
valign=align Vertical alignment (top, middle, bottom), Default = bottom
radius=r Specifies the radius r in pixels of the corners.

7.2.5.6 Diam
Diam specifies a diamond entity on the drawing.

Attributes as follows:
Attribute Description
diam[=id] Diamond entity with optional id
layer=n Optionally specifies the layer it belongs to. Default is layer 0
locate=x,y Specifies x, y origin relative to the white board
color=cvalue Specifies color as hex or decimal value
height=h Specifies height as h pixels
width=w Specifies width as w pixels
halign=align Horizontal alignment (left, center, right), Default = left
valign=align Vertical alignment (top, middle, bottom), Default = bottom

7.2.5.7 Imag
Imag specifies an image entity on the drawing.

Attributes as follows:
Attribute Description
imag[=id] Image entity with optional id
layer=n Optionally specifies the layer it belongs to. Default is layer 0
locate=x,y Specifies x, y origin relative to the white board
height=h Specifies height as h pixels, default is file image height
width=w Specifies width as w pixels, default is file image width
halign=align Horizontal alignment (left, center, right), Default = left
valign=align Vertical alignment (top, middle, bottom), Default = bottom
imagename=path Specifies the source file name and path of the image

7.2.6 Miscellaneous Properties

The following properties are available but have limited use unless used for dynamic drawing.

If a Name is designated for a Drawing control, then KAREL variables as described for the Name property
can be used to deliver dynamic commands to the drawing control. For example, a drawing with Name =
drawing1

KCL> set def drawing1

KCL> create var command string[127]
KCL> create var cmdack integer
Go to the web page that creates drawing1
KCL> set var command = ‘….’ Will deliver this data to the drawing.

- 79 -
7.USING THE DRAWING CONTROL B-83114EN/01

7.2.6.1 Clear
Clear specifies that the entire drawing be cleared, leaving only the blank white board displayed.

7.2.6.2 Delete
Delete=id specifies that an entity previously created with id be deleted. It is permanently removed from
the drawing.

7.2.6.3 LayerOn
LayerOn specifies a single layer or comma-separated list of layers that are turned ON. All entities that
belong to these layers are then displayed.

7.2.6.4 LayerOff
LayerOff specifies a single layer or comma-separated list of layers that are turned OFF. All entities that
belong to these layers are not displayed. These entities are not deleted they are simply not displayed.

7.2.7 Dynamic Entity Modifications

Using the ID to specify an already existing entity, you can modify any of the entities properties without
deleting and redrawing it.

For example, assume the following entities are drawn:

text=t1 layer=1 string='This is the title' font=12 color=8421440 locate=220,20 valign=bottom
halign=center
path=pth1 color=255 points=5,25;430,25;430,230;5,230;5,25 layer=3
circ=c1 layer=4 color=16711680 locate=40,45 radius=10

Later, by using the ID, properties of those entities can be modified without deleting and redrawing the
whole entity:

text=txt1 color=#0000ff Changes the text txt1 to red

circ=c1 locate=10,10 Makes circle c1’s origin 10, 10
path=pth1 points=10,10,20,20 Adds two more points to whatever points exist for path pth1.

- 80 -
B-83114EN/01 8.USING THE GRID CONTROL

8 USING THE GRID CONTROL

The GRID control is a means to display SHAPE graphics (text, lines, rectangles, circles, images, etc) on a
web page aligned in a manner controlled by XML.

The GRID control divides the display real estate into a 2 dimensional array of evenly spaced tiles.
SHAPES can then be aligned to the individual tiles for display. The SHAPES are generally located and
sized relative to the TILEs making it easy to resize the entire display.

The GRID control also makes use of inheritance. The control itself has basic characteristics such as color
and font information. The GRID is a child of the control, so characteristics not explicitly declared is
inherited from the control. This filters down to the TILE belonging to the GRID and SHAPEs belonging
to a TILE.

A simple display using the GRID control is the following:

NOTE
Here tile outlines have been turned on to show where the tiles are located.
Normally the outlines would not be turned on.

In this example a grid 5 tiles wide by 6 tiles high is displayed.

• Tile 1,1 (upper left) contains the red text “(1,1)” centered in it.
• Tile 1,1 also has a line from tile 1,1,beginning at 100% of the width and 50% of the height. The
length of the line is 300% of the origin tile’s width at 1,1.
• Tile 5,1 (upper right) has the blue text “(5,1)”.
• Tile 3,4 contains a .gif image center in it, height is 150% and width is 75%.
• Tile 2,3 also contains 2 white rectangles. The inner one has rounded corners.
• Tile 5,5 contains a yellow circle. Its diameter is specified as 50% of the width of the tile.

The GRID control itself is specified by the user in html syntax within a .stm file, see Section 8.1
“INSERTING A GRID CONTROL ON A WEB PAGE”.

The content of the GRID, TILES and SHAPES are specified in XML (Extensible Markup Language) and
is furnished to the Grid control in one of 2 ways:

- 81 -
8.USING THE GRID CONTROL B-83114EN/01

• most often through a pipe file (This is specified in the control’s “pipe” property),
• through the “data” property of the web page itself.

8.1 INSERTING A GRID CONTROL ON A WEB PAGE

To insert a Grid Control to your web in FrontPage, follow these steps:
Procedure 8-1 Insert a Grid Control
Step
1 Position your cursor where you want the control to appear.
2 Select Insert | Web Component from the menu bar.
3 Select Advanced Controls in Component type list and select ActiveX Control in Choose a control
list. Then press Next.

4 Choose the FANUC iPendant Grid Control from the list of available FANUC iPendant controls, and
click OK. The Grid control is now inserted into your page.

- 82 -
B-83114EN/01 8.USING THE GRID CONTROL

NOTE
If the FANUC iPendant GRID Control is not an option in the list, use the
Customize… button to enable it. If the option is not available under the
Customize… setup, then the proper software for the FANUC controls has not
been installed.

5 Once the control is inserted into your web page you will see a blank control, with the size in pixels
as:

NOTE
You can grab the edges of the Grid control and stretch it to resize.

6 The particular properties can be configured from the ActiveX property pages. Either double click on
the control or right click and select ActiveX Control Properties.

8.2 COMMON GRDI CONTROL PROPERTIES

A Grid control has the following properties.

From here on we’ll use the term of attributes, since these can be more closely equated to XML content.

8.2.1 Object Tag

The Object Tag dialog allows you to specify some standard attributes associated with your control.

• Name is used when an error occurs.

• Width and Height can be specified in pixels or percentage (%). Of course, you can resize the control
in FrontPage by dragging the control’s handles with the mouse.

- 83 -
8.USING THE GRID CONTROL B-83114EN/01

The remaining properties are grouped by their property page tabs.

8.2.2 Fonts
The font properties associated with the GRID as the “defaults” are modified from the Fonts property page.
These “default” settings are used by the Text string entities when no other font attributes are specified.

Item Description
Font Font specifies the name of the font passed in the Font property.
Font Style Font Style can specify regular, bold, italic and italic bold. This affects whether the properties
FontBold and FontItalic are optionally passed.

- 84 -
B-83114EN/01 8.USING THE GRID CONTROL

Item Description
Size Size specifies the size of the font. It is passed in the FontSize property.
The iPendant has built-in fonts for 12, 14, 16, 18 and 24-point fonts. Valid ranges of font sizes
are 12 through 24. Use one of following values.

12 Specifies 12 point font.

14 Specifies 14 point font.
16 Specifies 16 point font.
18 Specifies 18 point font.
24 Specifies 24 point font.
Strikeout Strikeout specifies whether the FontStrikethrough property is passed.
Underline Underline specifies whether the FontUnderline property is passed.

NOTE
1 Font, Strikeout and Underline has no effect on iPendant
2 For the iPendant only regular and bold have an effect, italic and bold italic are
ignored.
3 iPendant does not support font of 8point and smaller because it is hard to read
such font.

8.2.3 Grid Tab

8.2.3.1 Caption
Caption is a text string that is passed as a property but not used. It is there as an aid to the developer since
it is displayed on the FrontPage design and preview views.

8.2.3.2 Foreground & Background Colors

The Colors dialog allows you to specify the color of certain elements. Colors associated with the Grid
control are:
- 85 -
8.USING THE GRID CONTROL B-83114EN/01

ForeColor Specify the “default” color of any entity that does not have an explicit color
defined.
BackColor Specify the background color.

NOTE
Colors are specified as a decimal value represent bbggrr (blue, green, red)
format, where if they are set as hexadecimal value preceded by the # sign, they
are in rrggbb (red, green, blue) format.

8.2.3.3 Pipe
Pipe is a text string that specifies a named data file created on the controller and only associated with the
PIP: device.

This file is used to dynamically deliver data to the Grid control on the iPendant. The name can be any
8.3-formatted name, for example: xgrid.dat.

The name of this file is sent to the controller when the Grid control is instantiated on the iPendant. The
file name is concatenated to PIP: and the file opened. If the file does not exist then the file is created and
opened for read. If the file does exist prior to this, the file is opened for read access and a seek to the end
of file done to eliminate the possibility of stale data.

When the last Grid control using this file is gone, the file is deleted.

NOTE
The Pipe parameter can utilize !PaneID. Please refer to Subsection 5.2.15 for
PaneID, which is recommended for proper functioning in a multi-pane
environment. So specifying xgrid!PaneID.dat will allow a unique pipe file to exist
on a per pane basis.

8.2.3.4 Pipe Mon Rate

PipeMonRate is an integer value (>0) that specified the number in millisecond rate at which the controller
checks for data in the pipe file.

The controller will enforce a maximum rate (most likely 100ms) as the lower end of the range.

NOTE
When multiple controls specify the same pipe file the fastest monitoring rate will
take effect for all the controls monitoring this file.

8.2.3.5 Border
Border selects the size of the border surrounding the Grid control.

Allowable values are:

>0 A 3 dimensional raised border, that number of pixels thick.

=0 No border line.
<0 A 3 dimensional depressed border, that number of pixels thick.

- 86 -
B-83114EN/01 8.USING THE GRID CONTROL

8.2.3.6 FastLoad
FastLoad is selected by the checkbox.

Checked
Specifies that properties that are set to their corresponding “default” values are not included in the
web page. This effectively saves load time.

Unchecked
Specifies that all parameters are included in the web page, whether they have “default” values or not.

8.3 DISPLAY CONCEPTS

The GRID control is simply a container within a web page to display graphics. It is placed on a web page
specified in a .stm file. The .stm file is required so that the OBJECT syntax is properly translated to the
EMBEDDED syntax when used with the iPendant.

8.3.1 Conventions
The grid is laid out and referenced as follows:

The user can specify separate and/or optional padding each of the 4 sides independently. This padding is
specified in # of pixels.

- 87 -
8.USING THE GRID CONTROL B-83114EN/01

The GRID is then broken up into TILES, with attributes of:

• # columns wide in the horizontal direction. The origin TILE (1) being at the left.
• # rows high in the vertical direction. The origin TILE (1) being at the top.
• default foreground and/or background color, otherwise the colors are inherited from those specified
in the Grid Control.
• padding in # of pixels
• touchable flag
• version

Each TILE has attribute(s):

• an assigned id string
• row location within the grid
• column location within the grid
• default foreground and/or background color, otherwise the colors are inherited from those specified
in the GRID.
• each tile can contain SHAPES: images, text, lines, circles, rectangles, etc.
• each TILE can specify the layer that is currently displayed.

Each SHAPE within a tile has attributes of:

• an assigned id string,
• location, relative to the tile. Negative offsets are allowed! Location is a % of the TILE dimension,
• size, IMAGEs can be sized by width and height, if not specified the corresponding height and width
are defaulted to the tile height or width,
• color, which if not specified is inherited from the TILE,
• and optionally, the SHAPE can belong to a TILE’s layer 0 through 9. Layer 0 is the default and is
always displayed.

NOTE
.png files should not be used for images

8.3.2 Alignment
SHAPES associated with a TILE are aligned relative to that TILE. The pixels are referenced relative to
the tile and the origin (1,1) within the tile is selected as:
• X: 1 at top left going positive to the right
• Y: 1 at the top left going positive down.

For instance consider the following example tile that is 10 pixels wide by 9 pixels high.

Alignment presents issues depending on the size of the tile in pixels, especially if the height and width is
an even number of pixels.

So the pixel at (A) in the TILE is the origin.

- 88 -
B-83114EN/01 8.USING THE GRID CONTROL

8.3.3 Display, Pan and Zoom

Since the SHAPES belong to TILES, and TILES belong to the GRID, the simple matter of moving
around in the display is accomplished by specifying an origin TILE and dimensions to display.

Consider the following; a grid is initially created as 4 tiles wide by 8 tiles high is in example (A).

The XML string:

<DISPLAY pos=”2,2” dims=”3,4”/>

will cause the a subset of the GRID to be displayed as in example (B).

- 89 -
8.USING THE GRID CONTROL B-83114EN/01

The GRID may be displayed in its entirety as in (A). Here the whole GIRD occupies most of the display
real estate.

But as the GRID tile count is increased, TILEs become smaller; the items in these TILEs shrink. At some
point there is too much information and the TILEs become too small to provide recognizable information.
So we need to display a part of the grid.

In (B) a part of the gird is selected for display. What parts and how much is determined by the
management software as part of the application on the robot controller.

NOTE
Example (B) also has a scroll bar indicator to aid the user in navigating.

8.3.4 Dynamic Display

The GRID control can be dynamically updated by PIPE file mechanism. Refer to Subsection 8.4.16
“Dynamic Data”.

There are many methods:

(1) TILEs contain layers 0 through 16.
(a) Layer 0 is always displayed.
(b) Layers 1 through 16 can be turned on or off by the user using the MODTILE tag.
(c) A SHAPE can be in any layer 0 through 16
(2) TILEs may be deleted
All SHAPEs belonging to the TILE are automatically deleted.
(3) TILEs may be modified
- 90 -
B-83114EN/01 8.USING THE GRID CONTROL
Changing parameters such as color and font characteristics
(4) SHAPEs may be modified
Changing all parameters associated with the SHAPE

8.3.5 Rendering
As previously described the GRID contains TILEs and each TILE contains SHAPEs.

When a TILE is created, it is put into the tail of a linear list. TILEs are processed in order in this list from
beginning to end. So it is important when architecting the display to consider the order in which TILEs
are placed in the XML.

Next, a TILE itself can be thought of as a linear list of SHAPEs. As each SHAPE is specified (created) on
the TILE it is placed at the end of this list.

When the rendering for the tile is done, the linear list of SHAPEs is processed. The SHAPES are
individually handled in the following order:

1 Button
2 Image
3 Circle
4 Rectangle
5 Text
6 Line

8.4 XML TO THE GRID

XML is standard Extensible Markup Language.

The Grid control understands a fairly strict XML syntax, a set of tags and attributes, as detailed in the
following sections. Although the Grid control ignores unknown attributes, the user should be cautioned
that, unknown attributes cause errors to be reported and can introduce delays in rendering or other
iPendant problems.

As an example, the display produced in Chapter 8 Using the GRID Control.

- 91 -
8.USING THE GRID CONTROL B-83114EN/01

Is produced by the following XML:

(a) is XML header information. This is not required for by GRID but is included for completeness.
(b) is the opening XML tag for the GRID.
(c) is the opening TILE tag for the TILE located at 1,1
(d) is TEXT “(1,1)” with font +2 more than the Grid control defaults, and in red
(e) is a LINE in green from the right side of the TILE (loc=”100,50”) for 400%.
(f) is the end tag for the TILE at 1,1
(g) is the opening XML tag for the TILE at 5,1
(h) is TEXT “(5,1)” with font +2 more than the Grid control defaults, and in blue
(i) is the end tag for the TILE at 5,1
(j) is the opening XML tag for the TILE at 3,4
(k) specifies and IMAGE ipend.gif, with a size of 75% the width of the TILE and 150% of the height
(l) is the end tag for the TILE at 3,4
(m) is the opening XML tag for the TILE at 2,3
(n) specifies a rounded RECTANGLE (corner radius=”6”), aligned top and left, 200% of the TILE’S
height and width
(o) specifies a RECTANGLE, aligned top and left, 270% of the TILE’s height and width
(p) is the end tag for the TILE at 2,3
(q) is the opening XML tag for the TILE at 5,5
(r) Specifies a CIRCLE, in yellow, 90% of the TILE’S height
(s) Is the end tag for the TILE at 5,5
(t) Is the DISPLAY tag that causes the actual rendering of the TILES. This specifies that the TILE on
pos=”1,1” is the origin (upper left hand corner) and the display is 5 tile wide by 6 tiles high. Padding
around the borders is 6 pixels.

NOTE
Verbose is the flag that turns on the TILE outlining.

The typical hierarchy of XML syntax, which the Grid control expects, is:
<?xml version="1.0"?>
<GRID>
<TILE …>
<TEXT …>string</TEXT>
<LINE …/>
<RECTANGLE …/>
<CIRCLE …/>
<IMAGE…>file</IMAGE>
- 92 -
B-83114EN/01 8.USING THE GRID CONTROL
<BUTTON … />
</TILE>
<DISPLAY …/>
<DELTILE …/>
<MODTILE/>
<MODTEXT>string</MODTEXT>
<MODLINE …/>
<MODRECTANGLE …/>
<MODCIRCLE …/>
<MODIMAGE…>file</IMAGE>
<MODBUTTON … />
</GRID>

8.4.1 XML Tag

The following standard xml tag should be sent first:

<?xml version="1.0"?>

8.4.2 GRID Tag

The GRID tag in the XML file data encapsulates a GRID and all of its sub-members. A GRID is
composed of TILES and is X columns by Y rows. It has optional characteristics of color and padding to
the display edges.

Prototype grid tag is:

<GRID id=”userid” bclr=”backcolor” fclr=”forecolor” font=”size” pad=”#pixels” padl=”#pixels”
padt=”#pixels” padr=”#pixels” padb=”#pixels” verbose=”#”>
......
</GRID>

Optional parameters:
Attribute Description
id="userid" Specifies an optional user supplied ASCII identifier.
bclr="backcolor" Specifies the background color. Supersedes the control’s background color. If not specified then
the control’s background color is inherited.
fclr="forecolor" Specifies the forefround color. Supersedes the control’s foreground color. If not specified then
the control’s foreground color is inherited. Inheritance to TILE is not supported. Specify fclr in
TILE and shapes on it as required.
font="size" Specifies the font size. If not present then the control’s font size is inherited.
pad="#pixels" Specifies general padding, for all sides of the display.
padl="#pixels" Specifies padding for the left side of the display. Optional, if specified it overrides the general
padding above.
padt="#pixels" Specifies padding for the top of the display. Optional, if specified it overrides the general
padding above.
padr ="#pixels" Specifies padding for the right side of the display. Optional, if specified it overrides the general
padding above.
padb="#pixels" Specifies padding for the bottom of the display. Optional, if specified it overrides the general
padding above.
touch="method" Specifies that the GRID is touchable. Method is a bit mask:
4 = event on BUTTON
verbose="#" Specifies debug level. This is internal.
99 will put a 1 pixel wide outline around TILES for ease of alignment.

- 93 -
8.USING THE GRID CONTROL B-83114EN/01

The <GRID> tag is the only permissible way to begin a grid.

8.4.3 TILE Tag

A GRID contains TILEs. Each tile is placed at a specific row and column within the GRID.

TILEs contain SHAPEs to be displayed. All SHAPEs placed on a tile are located relative to the tile’s
origin, which is the upper left hand corner pixel of the tile. Columns go positive right and rows go
positive down.

Prototype tile tag is:

<TILE id="user_ID" pos="col#,row#" layeron="layerlist" layeroff="layerlist" bclr="backcolor"
fclr="forecolor" font="size">
......
</TILE >

Required parameters:
Attribute Description
pos="col#,row#" Specifies the position as column and row in the grid. Both rows and cols must be > 0.

Optional parameters:
Attribute Description
id="userid" Specifies a user supplied ASCII identifier.
layeron="layerlist" Specifies a comma-separated list of layers that are ON for this tile
layeroff="layerlist" Specifies a comma-separated list of layers that are OFF for this tile.
Layerlist = “*” is a special case that turns off all layers. Except of course layer 0 which is
always displayed.
bclr="backcolor" Specifies the background color. Supersedes the GRID’s background color. If not specified
then the GRID’s background color is inherited.
fclr="forecolor" Specifies the foreground color. Supersedes the GRID’s foreground color. If not specified then
the GRID’s foreground color is inherited.
font="size" Specifies the font size. If not present then the control’s font size is inherited.

In general:
• The <TILE> tag must be enclosed within a <GRID> tag.
• A <TILE> tag can only encapsulate SHAPEs as outlined in the following sections.
• A <TILE> can encapsulate multiple SHAPEs.
• TILEs can be deleted using the <DELTILE> tag.
• TILEs can be modified using the <MODTILE> tag.

8.4.4 TEXT Tag

A TEXT tag declares a text string to be displayed relative to the tile that it belongs to.

There are two origins to be concerned with:

• The TILE origin pixel (1,1) is at the upper left hand corner.
• The TEXT string origin, which the user can specify by the alignment argument. This argument
specifies the vertical origin of the string as top, center or bottom and the horizontal origin as left,
middle or right.

After that the string is offset by the % of the tile dimensions specified in the offset.
- 94 -
B-83114EN/01 8.USING THE GRID CONTROL

Text string

loc=”%x,%y”

Text origin

Tile
Tile origin 1,1

Prototype text tag:

<TEXT id="userid" clr="color" align="vert,horiz" font="size" loc="%x,%y" layer="layer#"
curs="index">Text string</TEXT>

Optional parameters:
Attribute Description
id="userid" Specifies a user supplied ASCII identifier.
clr="color" Specifies text color. If not specified then the TILE’s foreground color is inherited.
align="vert,horiz" Specifies the vertical and horizontal alignment of the text string.

Vertical values can be:

• Top
• Middle (default if not specified)
• Bottom
(These can be abbreviated as “t”, “m” or “b”)

Horizontal values can be:

• Left
• Center (default if not specified)
• Right
(These can be abbreviated as “l”, “c” or “r”)
font="size" Specifies the font size. If not present then the TILE’s font size is inherited.
loc="%x,%y" Specifies the offset relative to the TILE’s origin. If not specified then the
(50,50) is used. These values are % relative to the TILE’s height and width.
layer="layer#" Specifies the layer that the TEXT belongs to relative to the TILE. Values
can be 0 to 9, if not specified then layer 0 is used.
curs="index" Cursor index, will draw an underline at the specified index of the string.
0 = cursor off.
1 to strlen = cursor position.
> strlen = cursor 1 character past the end of the string.
Text string Is the text string to be displayed. If the string contains “\n”
(not a new line character), then the line is broken there and multi-line text can be written.

NOTE
In the case of multi-line text, the general horizontal and vertical alignment is
extended on to each line.

8.4.5 LINE Tag

A LINE tag declares a line to be displayed relative to the tile that it belongs to.

There are two origins to be concerned with:

• The TILE origin pixel (1,1) is at the upper left hand corner.
• The LINE origin.
- 95 -
8.USING THE GRID CONTROL B-83114EN/01

After that the LINE is offset by the % of the tile dimensions specified in the offset.
loc="%x,%y" Line origin

Tile origin 0,0

Tile

eloc= "%x,%

Prototype text tag:

<LINE id="userid" loc="%x,%y" layer="layer#" clr="color" eloc="%x,%y "/>

Required parameters:
Attribute Description
loc="%x,%y" Specifies the offset relative to the TILE’s origin. If not specified then (50,50) is used. These
values are % relative to the TILE’s height and width.
eloc="%x,%y" Specifies the end of the LINE relative to the TILE’s origin. These values are % relative to the
TILE’s height and width.

Optional parameters:
Attribute Description
id="userid" Specifies a user supplied ASCII identifier.
layer="layer#" Specifies the layer that the LINE belongs to relative to the TILE. Values can be 0 to 16, if not
specified then layer 0 is used.
clr="color" Specifies line color. If not specified then the TILE’s foreground color is inherited.

8.4.6 RECTANGLE Tag

A RECTANGLE tag, which can be abbreviated as RECT, declares a rectangle to be displayed relative to
the tile that it belongs to.

There are two origins to be concerned with:

• The TILE origin pixel (1,1) is at the upper left hand corner.
• The RECTANGLE origin, which the user can specify by the alignment argument. This argument
specifies the vertical origin of the rectangle as top, center or bottom and the horizontal origin as left,
middle or right.

After that the rectangle is offset by the % of the tile dimensions specified in the offset.

Rectangle
loc="%x,%y"

Rectangle origin

Tile origin 0,0

Tile

Prototype rectangle tag:

<RECTANGLE id="userid" clr="color" align="vert,horiz" loc="%x,%y" layer="layer#"
size="%width,%height[,radius]" wt="#pixels" fill="color" radius="radius"/>
- 96 -
B-83114EN/01 8.USING THE GRID CONTROL

Optional parameters:
Attribute Description
id="userid" Specifies a user supplied ASCII identifier.
clr="color" Specifies line color. If not specified then the TILE’s foreground color is inherited.
align="vert,horiz" Specifies the vertical and horizontal position of origin of rectangle.
Vertical values can be:
• Top
• Middle (default if not specified)
• Bottom
Horizontal values can be:
• Left
• Center (default if not specified)
• Right
loc="%x,%y" Specifies the offset relative to the TILE’s origin. If not specified then (50,50) is
used. These values are % relative to the TILE’s height and width.
layer="layer#" Specifies the layer that the RECTANGLE belongs to relative to the TILE.
Values can be 0 to 9; if not specified then layer 0 is used.
size="%width,%height[,radius]" Specifies the width and height as a % of the tile.
And optional radius of the rectangle. Width and height are % relative to
the tile’s width and height. Optional radius makes this a rounded rectangle with
corner radius of #pixels.
wt="#pixels" Specifies the line weight in #pixels. If not present the default is 1.
fill="color" Specifies the fill color for the RECTANGLE, also serves as a flag.
If not present then the rectangle is not filled.
radius="#pixels" Specifies a corner rounding radius in # of pixels. If not present then corners
are not rounded.

NOTE
Fill and radius cannot be specified together.

8.4.7 POLYGON Tag

A POLYGON tag declares a 3 or 4 sided polygon to be displayed relative to the tile that it belongs to.

The polygon is defined by three or four vertices, each located as a % of the tile dimensions relative to the
tile’s origin (upper left hand corner). A straight line is drawn between each successive vertex and from
the last vertex to the first.

vrtx1="%x,%y"

vrtx4="%x,%y"

vrtx2="%x,%y"

Tile
Tile origin 0,0 vrtx3="%x,%y"

Prototype POLYGON tag:

<POLYGON id="userid" clr="color" align="vert,horiz" loc="%x,%y" layer="layer#"
size="%width,%height[,radius]" wt="#pixels" fill="color" radius="radius"/>

- 97 -
8.USING THE GRID CONTROL B-83114EN/01

Optional parameters:
Attribute Description
id="userid" Specifies a user supplied ASCII identifier.
clr="color" Specifies line color. If not specified then the TILE’s foreground color is inherited.
vrtx1="%x,%y" Specifies the offset to the first vertex relative to the TILE’s origin.
vrtx2="%x,%y" Specifies the offset to the second vertex relative to the TILE’s origin.
vrtx3="%x,%y" Specifies the offset to the third vertex relative to the TILE’s origin.
vrtx4="%x,%y" Specifies the offset to the fourth vertex relative to the TILE’s origin.
This is optional and if not present, a triangle is drawn.
layer="layer#" Specifies the layer that the POLYGON belongs to relative to the TILE.
Values can be 0 to 9; if not specified then layer 0 is used.
fill="color" Specifies the fill color for the POLYGON.
If not present then the rectangle is not filled.

8.4.8 CIRCLE Tag

A CIRCLE tag declares a circle to be displayed relative to the tile that it belongs to.

There are two origins to be concerned with:

• The TILE origin pixel (1,1) is at the upper left hand corner.
• The CIRCLE origin, which the user can specify by the alignment argument. This argument specifies
the vertical origin of the circle as top, center or bottom and the horizontal origin as left, middle or
right.

After that the circle is offset by the % of the tile dimensions specified in the offset.

loc="%x,%y"

Circle origin

Tile
Tile origin 0,0

Prototype circle tag:

<CIRCLE id="userid" clr="color" align="vert,horiz" loc="%x,%y" layer="layer#" wt="#pixels"
diameter="%diameter"/>

Optional parameters:
Attribute Description
id="userid" Specifies a user supplied ASCII identifier.
clr="color" Specifies line color. If not specified then the TILE’s foreground color is inherited.
align="vert,horiz" Specifies the vertical and horizontal alignment of origin of circle
Vertical values can be:
• Top
• Middle (default if not specified)
• Bottom
Horizontal values can be:
• Left
• Center (default if not specified)
• Right
loc="%x,%y" Specifies the offset relative to the TILE’s origin. If not specified then (50,50) is
used. These values are % relative to the TILE’s height and width.

- 98 -
B-83114EN/01 8.USING THE GRID CONTROL

Attribute Description
layer=" layer#" Specifies the layer that the CIRCLE belongs to relative to the TILE.
Values can be 0 to 9, if not specified then layer 0 is used.
wt="#pixels" Specifies the line weight in #pixels. If not present the default is 1.
diameter="%diameter" Specifies the CIRCLE’s diameter as a % of the TILE it is
contained in. If not present then 100% is assumed.

8.4.9 IMAGE Tag

An IMAGE tag places an IMAGE (.jpg or .gif) into a tile for display.

There are two origins to be concerned with:

• The TILE origin pixel (1,1) is at the upper left hand corner.
• The IMAGE origin, which the user can specify by the alignment argument. This argument specifies
the vertical origin of IMAGE as top, center or bottom and the horizontal origin as left, middle or
right.

After that IMAGE is offset by the % of the tile dimensions specified in the offset.

The size of the IMAGE relative to the tile can be specified as percentages of the size of the TILE. If not
specified the IMAGE is sized to 100% of the TILE.
IMAGE origin

loc="%x,%y"
Tile origin 0,0

Tile

Prototype IMAGE tag:

<IMAGE id="userid" clr="color" align="vert,horiz" loc="%x,%y"
size="%width,%height">image.gif</IMAGE>

Required parameters:
Attribute Description
image.gif Specifies the file name of the image. This can be absolute or relative URL.
Allowable file types are .gif and .jpg

Optional parameters:
Attribute Description
id="userid" Specifies a user supplied ASCII identifier.
bclr="color" Specifies the color show if there is transparency in the image.
align="vert,horiz" Specifies the vertical and horizontal alignment of Image origin.
Vertical values can be:
• Top
• Middle (default if not specified)
• Bottom
Horizontal values can be:
• Left
• Center (default if not specified)
• Right

- 99 -
8.USING THE GRID CONTROL B-83114EN/01

Attribute Description
loc="%x,%y" Specifies the offset relative to the TILE’s origin. If not specified then (50,50) is
used. These values are % relative to the TILE’s height and width.
layer="layer#" Specifies the layer that the IMAGE belongs to relative to the TILE.
Values can be 0 to 16, if not specified then layer 0 is used.
size="%width,%height" Specifies the width and height as a % of the tile.
Width and height are % relative to the tile’s width and height.
If the size is not specified then the 100% is assumed.

NOTE
.png files should not be used for images

NOTE
For proper color rendering image files should be created with a Standard
Windows Color Pallet.

NOTE
For a .gif file specifying a transparency color, the transparent color can be
specified by the clr parameter, or inherited from TILE’s bclr parameter.

8.4.10 BUTTON Tag

BUTTONs are intended to be used just like a panel push button. A BUTTON can be constructed in such a
way that it conveys information or state as well as accepting an action.

The information or state is pretty much under the programmer’s control. The BUTTON tag defines the
basic framing around the button shape. The content can be other SHAPES placed on the BUTTON. These
include TEXT, RECTANGLES, CIRCLES, IMAGES, etc. The programmer then has control of these
SHAPES as well as colors.

NOTE
Use BUTTON tag only when iPendant with touch panel is used.

If the iPendant is capable of touch then touch sense is maintained by the iPendant control itself.

• Release or mouse up is sensed and can be sent back to the controller in a manner specified by any or
all of the 2 parameters: kcod or url.
• Press or mouse down is sensed and can be sent back to the controller in a manner specified by any or
all of the 2 parameters: kcod2 or url2.

Buttons have the same concept of alignment as the other SHAPEs.

A few examples of BUTTONS and different states are:

- 100 -
B-83114EN/01 8.USING THE GRID CONTROL

Prototype BUTTON tag:

<BUTTON id="userid" bclr="color" align="vert,horiz" loc="%x,%y" layer="#"
size="%width,%height" latch="state" kcod="#" tprq="#1,#2" url="urlstring" kcod2="#"
tprq2="#1,#2" url2="urlstring"/>

Optional parameters:
Attribute Description
id="userid" Specifies a user supplied ASCII identifier.
bclr="color" Specifies the background color.
align="vert,horiz" Specifies the vertical and horizontal alignment of origin of button.
Vertical values can be:
• Top
• Middle (default if not specified)
• Bottom
Horizontal values can be:
• Left
• Center (default if not specified)
• Right
loc="%x,%y" Specifies the offset relative to the TILE’s origin. If not specified then
the TILE’s origin (50,50) is used. These values are % relative to the TILE’s
height and width.
layer="layer#" Specifies the layer that the TEXT belongs to relative to the TILE.
Values can be 0 to 9, if not specified then layer 0 is used.
size="%width,%height" Specifies the width and height as a % of the tile.
Width and height are % relative to the tile’s width and height.
look="style" or “style,x" Specifies the button style:
“0” = not a button
“1” = user defined border
“2.x” = 2D border with x pixels thickness
“3.x” = 2D border with x pixels thickness
latch="state" Specifies that the button is latchable, or controlled by the user.
State is one of:
0 = button is not currently pressed
1 = button is currently pressed
nolatch="state" Specifies that the button is not latchable. State is meaningless but must be
supplied for XML completeness.
kcod="#" Specifies a 1 byte key code value that is sent back to the controller
on the release or mouse up event.

- 101 -
8.USING THE GRID CONTROL B-83114EN/01

Attribute Description
url="urlstring" Specifies a URL string to be sent back to controller’s the web server on the
release or mouse up event.
Some examples are:
url=”/KCL/show%20var%20$version”
url="/KCLDO/reset”
url="/KCLDO/set%20port%20tpout[1]=1">KCLDO set port tpout[1]=1</a>
url="/KCLDO/set%20var%[program]somevar%20”
kcod2="#" Specifies a 1 byte key code value that is sent back to the controller
on the press or mouse down event.
url2="urlstring" Specifies a URL string to be sent back to controller’s the web server on the
press or mouse down event. Examples can be found under the description of
url, above.

8.4.11 DISPLAY Tag

The display tag defines what part of the whole grid is visible on the display. This is how pan and zoom is
implemented. (See Subsection 8.3.3 “Display, Pan and Zoom”).

For example, a GRID may have been defined as 100 by 200 and its tiles populated. This is too large to
display any amount of detail that the user might make sense of.

The DISPLAY tag defines the origin tile and an X, Y extent, as a dimension, to display. The origin tile
will be the top left TILE actually displayed. And the ending extent TILE will be in the lower right.

Additionally the DISPLAY tag can supersede the default font, pad, foreground and background colors,
and specify display of scroll bars to aid the user in visualizing where they are within the whole grid.

Prototype DISPLAY tag:

<DISPLAY pos="col#,row#" dims="#cols,#rows" bclr="color" font="size" pad="pixels"
padt="pixels" padr="pixels" padb="pixels" padl="pixels" scrollbar="style"
hscroll="thick,pos,amount" vscroll="thick,pos,amount"/>

Required parameters:
Attribute Description
pos="col#,row#" Specifies the position as column and row in the grid that is the origin to be
displayed.

Optional parameters:
Attribute Description
dims="#cols,#rows" Specifies the dimensions, # columns and # rows to be displayed.
bclr="color" Specifies the tile’s background color for all tiles in the range of pos by dims.
It supersedes the TILE’s background color. If not specified then the TILE’s
background color is not affected.
font="size" Specifies the font size. If not present then the TILE’s font size is inherited.
pad="#pixels" Specifies general padding, for all sides of the display.
padl="#pixels" Specifies padding for the left side of the display.
padt="#pixels" Specifies padding for the top of the display.
padr ="#pixels" Specifies padding for the right side of the display.
padb="#pixels" Specifies padding for the bottom of the display.
scrollbar="style,bgcolor,fgcolor" Specifies the style 1, through 10. 0 = No scrollbar.
hscroll="thick,offset,amount" Specifies the horizontal scroll bar characteristics.
Refer to Subsection 8.4.12 “Scroll Bars with The DISPLAY Tag”.
vscroll="thick,offset,amount" Specifies the vertical scroll bar characteristics.
Refer to Subsection 8.4.12 “Scroll Bars with The DISPLAY Tag”.
- 102 -
B-83114EN/01 8.USING THE GRID CONTROL
So we might want to only display a 10 by 12 area within the grid. The DISPLAY tag does that.

An example would be:

<DISPLAY pos=”1,4” dims=”10,12”/>

This starts at the tile located at 1,4 within the GRID and displays TILEs 10 columns wide by 12 rows
high.

8.4.12 Scroll Bars with The DISPLAY Tag

Additionally the display tag allows the user to display scroll bars along the right side of the control and at
the bottom.

Scroll bars are normally used to represent where the current offset is within the total possible display.

The horizontal scrollbar and vertical scrollbar are completely independent and under the control of the
user, as XML content.

Scroll bars are specified as part of the <DISPLAY> tag because at the time the DISPLAY command is
issued the user should have a good handle of what portion and offset within the total they are showing.

Overall length is automatically sized to the edges of the tiles

offset

(origin ) thickness

X0 or Y0 amount

Prototype DISPLAY tag: (Only part of attribute is shown)

<DISPLAY . . . scrollbar=”style,bgcolor,fgcolor” hscroll=”thickness,offset,amount”
vscroll=”thickness,offset,amount”/>

Optional parameters to the DISPLAY tag:

Attribute Description
scrollbar="style,[bgcolor[,fgcolor]]" Specifies a style of scroll bar and optionally a foreground and background
color. Valid styles are 1 through 10 as depicted below.
hscroll="thickness,[offset[,amount]]" Specifies the horizontal scrollbar characteristics:
• thickness is # of pixels wide.
• offset is the center of the scroll slider from the origin in %
• amount is the length of the scroll slider in %
vscroll="thickness,[offset[,amount]]" Specifies the vertical scrollbar characteristics:
• thickness is # of pixels wide. 0 indicates no scrollbars.
• offset is the center of the scroll slider from the origin in %
• amount is the length of the scroll slider in %
• A thickness of 0 on any scrollbar means, do not display it.
• Offset must be between 0 and 100%.
• Amount must be between 0 and 100%.

- 103 -
8.USING THE GRID CONTROL B-83114EN/01

8.4.13 DELTILE Tag

The GRID plug-in maybe sent many TILEs that are not being displayed or may not even be relevant
anymore.

The DELTILE tag is implemented to delete unneeded TILEs. This also frees up internal memory that the
plug-in is holding onto.

Prototype DELTILE tag:

<DELTILE id="userid" pos="col#,row#" dims="#cols,#row"/>

Required parameters:
Either
Attribute Description
id="userid" Specifies a user supplied ASCII identifier.
or
Attribute Description
pos="col#,row#" Specifies the position as column and row in the grid that is the
origin to be deleted.
dims="#cols,#rows" Specifies the dimensions, # columns and # rows to be deleted.
or both.

As with the previous example the GRID control may have been sent hundreds of TILEs, for example a
display of 100 by 200.
- 104 -
B-83114EN/01 8.USING THE GRID CONTROL

• If we want to clear row 10 entirely:

<DELTILE pos="1,10" dims="100,1"/>

• If we want to clear column 5 entirely:

<DELTILE pos="5,1" dims="1,200"/>

• If we want to clear all tiles from column 20 & row 10 through column 90 & row 190:

<DELTILE pos="20,10" dims="71,181"/>

8.4.14 Modifying SHAPES

When a SHAPE is created, it is done in the context of being associated with a TILE. A requisite to the
GRID control being useful is to be able to modify or change the characteristics of SHAPES being
displayed. And to do so dynamically!

One way to accomplish this would be to delete the TILE that the SHAPE is associated with and recreate
the necessary TILE and SHAPE. But remember the TILE may have many associated SHAPES and it is
most likely a waste of time and processor since we would have to recreate many SHAPES. And of course
there are more complication when rendering order is important.

Recall that all the SHAPE tags have a user specifiable identifier, id=”userid”. This userid string is:
a non-case sensitive string that should uniquely identify a shape.
it can contain space characters.

Each SHAPE tag has a corresponding <MODxxxx….. > tag that will accept the same parameters as the
definition tag.

For example, the TEXT tag :

<TEXT id="string 1" clr="#0000ff" font="14" loc="50,50">Normal</TEXT>

Can be modified by :
<MODTEXT id="string 1" clr="#ff0000">Alarm</MODTEXT>

This changes the blue text from ”Normal” to ”Alarm” in red.

The following is the correlation of the definition tag to the modifier tag.
Definition tag Modification tag
<TEXT … <MODTEXT …>
<LINE … <MODLINE …>
<RECTANGLE … <MODRECTANGLE …>
<RECT … <MODRECT …>
<CIRCLE … <MODCIRCLE …>
<IMAGE … <MODIMAGE …>
<BUTTON … <MODBUTTON …>
Please consult the corresponding section of the definition tag to verify the proper parameters.
In the modification tag if a parameter is not specified, then the original parameter setting is left
unchanged.

- 105 -
8.USING THE GRID CONTROL B-83114EN/01

8.4.15 Modifying TILES

In the same way that SHAPES can be modified, TILE can be too. Remember that a TILE is a container
that can have many SHAPES associated with it. Careful structuring of the whole display can mean that a
simple modification to a TILE can affects a large number of SHAPEs, either through the use of layers or
using inherited characteristics such as font, colors, etc.

The TILE definition tag has two ways of identifying the TILE. Using the id=”userid” and the
combination pos=”col#,row#” and dims=”#cols,#rows” parameters.

Like the SHAPE tag, the userid string is a non-case sensitive string that should uniquely identify a TILE.
The id parameter is optional. The pos parameter is not.

Using these two parameters we can modify a TILE in one of 3 ways:

1 Specifying only the id parameter:

<MODTILE id=”tile #12” layeroff=”*” layeron=”1” />

Will modify the TILE with the id of “tile #12” to turn off all layers, and turn on layer 1.

2 Specifying only the pos:

<MODTILE pos=”1,12” layeroff=”*” layeron=”1”/>

Will modify the TILE at position 1,12 to turn off all layers, and turn on layer 1.

<MODTILE pos=”2,2” dims=”2,3” bclr=”#ff0000”/>

Will modify all the TILES starting at position 2,2 in a rectangular array down to the TILE at position
3,4 modifying their background color to RED.

3 Specifying both the id and pos:

<MODTILE id=”panel” pos=”1,1” dims=”2,5” layeron=”2”/>

This will turn on layer 2 for all tiles with the id “panel” in the TILES starting at position 1,1 through
position 2,5.

8.4.16 Dynamic Data

The following parameters are available but have limited use, except for dynamic rendering.

8.4.16.1 Using the Pipe parameter

The Pipe parameter of the Grid control specifies a data file located on the PIP: device. Once created, the
controller will attempt to deliver data written to this pipe file to the control(s) using it.

8.4.16.2 Using the Data parameter

The data parameter of the web page can also be used to get XML content to the Grid control.

For example within the <OBJECT . . . in the .stm file:

- 106 -
B-83114EN/01 8.USING THE GRID CONTROL

<param name="data" value="<GRID><TILE pos='1,1'><TEXT font='+2'

clr='#ff0000'>(1,1)</TEXT><LINE clr='#00ff00' loc='100,50' eloc='400,50'/></TILE><TILE
pos='5,1'><TEXT clr='#0000ff' font='+2'>(5,1)</TEXT></TILE><TILE pos='3,4'><IMAGE
size='75,150'>ipend.gif</IMAGE></TILE><TILE pos='2,3'><RECTANGLE clr='#fff0f0'
align='top,left' size='200,200' radius='6'/><RECTANGLE clr='#fff0f0' align='top,left' loc='10,10'
size='270,270'/></TILE><TILE pos='5,5'><CIRCLE clr='#ffff00'
diameter='90'/></TILE><DISPLAY Pos='1,1' DiMS='5,6' verbose='98' pad='6'/>">

Notice that several special things must be done:

• The data value itself must be framed in double quotes “.
• Since the data value must be framed in double quotes, any double quotes in the XML content should
be converted to single quotes. The GRID control internally will translate single quotes to double
quotes before processing the “data” parameter.
• Since single quotes are translated to double quotes, single quotes cannot be used.

Additionally the entire content of the data value parameter could be a separate file that is included with
server side includes:

<param name="data" value="<!--#include file=data.xml -->">

Here, the file data.xml is included in the data stream to the Grid control.

- 107 -
APPENDIX
B-83114EN/01 APPENDIX A.COMMANDING LINKS FROM KAREL

A COMMANDING LINKS FROM KAREL

A.1 FORCE_LINK BUILT-IN ROUTINE
A built-in FORCE_LINK is provided to command links from a KAREL program. This allows the
KAREL user to have complete control over the display screen from a programming standpoint. This
allows for Wizards and other complex Web based programs to be written in KAREL.

FORCE_LINK( pane_id: integer; url: string)

iPendant can display multiple screens by dividing whole screen. Each display area is called “pane”.
pane_id Description
tp_panel = 1 The first iPendant pane
tp2_panel = 2 The second iPendant pane
tp3_panel = 3 The third iPendant pane
tp3_panel is available only when system software version is 7DA5/06 or later.

url can be any valid URL location. Following table shows some examples.
FORCE_LINK Description
FORCE_LINK(TP_PANEL, '/mc/ipctrl.htm') Force MC: \ipctrl.htm into 1st pane of iPendant.
FORCE_LINK(TP2_PANEL, '/mc/ipctrl.htm') Force MC: \ipctrl.htm into the 2nd pane of
iPendant.
FORCE_LINK(tp_panel, 'refresh=prim') Force the page in the primary pane to be
refreshed.
FORCE_LINK (tp_panel, 'refresh=dual') Force the page in the 2nd pane to be refreshed.
FORCE_LINK (tp_panel, 'refresh=third') Force the page in the 3rd pane to be refreshed.
FORCE_LINK (TP_PANEL, 'current=/mc/ipctrl.htm') Force MC:\ipctrl.htm into the currently focused
frame of iPendant.
FORCE_LINK (TP_PANEL, Move focus to the 1st pane of iPendant.
'/SOFTPART/GENLINK?focus=prim')
FORCE_LINK (TP_PANEL, Set screen configuration to dual mode, display
'/SOFTPART/GENLINK?config=double&prim=editpage,HOME_ HOME_IO in the 1st pane and move focus to the
IO&focus=dual') 2nd pane.

A.2 GENERIC LINKING FUNCTIONALITY

Linking written in Section A.1 are built on top of generic linking. Generic linking provides the following
key capabilities:

• Specification of any menu page in the system as a URL.

• Specification of any program edit as a URL.
• Specification of any of the three “panes” on iPendant as the destination for a link.
• Specification of links into multiple panes from a single complex link
• Specification explicitly or implicitly of any display configuration.

By bringing our menus in as URL’s we can now specify links in a generic way that can either be Web
pages in the traditional sense or our legacy menus.

The exact syntax of these is in a section to follow.

- 111 -
A.COMMANDING LINKS FROM KAREL APPENDIX B-83114EN/01

A.3 GENERIC LINKING DETAILED INFORMATION

All of the generic links are of the form:

href="/SOFTPART/GENLINK?parameter=value&etcetera"

There can be as many parameter=value pairs as are required to specify the link. In this case there are a
fixed number of potential parameters with a fixed number of potential values. The order of the parameter
value pairs is not relevant.

The parameter definitions are:

• PRIM – Put the URL in the parameter in the primary (1st , left) pane.
• DUAL– Put the URL in the parameter in the dual (2nd, right) pane.
• TRIPLE – Put the URL in the parameter in the triple (3rd, lower right) pane.
• CURRENT-Put the URL in the parameter in the pane, which currently has focus.
• OTHER - Put the URL in the parameter in the primary pane when linked from dual or triple; put it in
the dual pane when linked from the primary pane.
• FOCUS – Set the focus pane
• CONFIG – Set the screen configuration

The parameters and values are:

• PRIM=MENUPAGE,spid,scid | EDITPAGE,name | ‘ArbitraryURL’

• DUAL=MENUPAGE,spid,scid | ‘ArbitraryURL’
• TRIPLE=MENUPAGE,spid,scid | ‘ArbitraryURL’
• OTHER=MENUPAGE,spid,scid | EDITPAGE,name | ‘ArbitraryURL’
• CURRENT= MENUPAGE,spid,scid | EDITPAGE,name | ‘ArbitraryURL’
• FOCUS= PRIM | DUAL | TRIPLE
• CONFIG= SINGLE | STATSING | DOUBLE | TRIPLE

The operations are case insensitive. In the case of the MENUPAGE links, the softpart ID and screen ID of
the target menu is also specified. In the case of an EDITPAGE the name of the program to launch in the
editor is also supplied.

Softpart ID and screen ID depend screen to be displayed.

NOTE
1 Don’t use value that is not written in following table.
2 url is specified by STRING. Value in following table is INTEGER. Convert
value in the table to STRING in some way, by CNV_INT_STR( ) for example.
Constant that start with SPI_ are INTEGER that corresponds to sp_id. Constant that start with SCR_
corresponds to screen id.

Softpart ID Screen id Description

SPI_TPHINTS 1 UTILITIES Hints
SPI_TPPRGADJ 1 UTILITIES Prog Adjust
SPI_TPMIRROR 1 UTILITIES Mirror Image
SPI_TPSHIFT 1 UTILITIES Program Shift
SPI_TPTSTRUN 1 TEST CYCLE
SPI_TPMANUAL, SCR_MACMAN MANUAL Macros
SPI_TPOTREL 1 MANUAL OT Release
SPI_TPALARM SCR_ALM_ALL ALARM Alarm Log

- 112 -
B-83114EN/01 APPENDIX A.COMMANDING LINKS FROM KAREL

Softpart ID Screen id Description

SPI_TPALARM SCR_ALM_MOT ALARM Motion Log
SPI_TPALARM SCR_ALM_SYS ALARM System Log
SPI_TPALARM, SCR_ALM_APPL ALARM Appl Log
SPI_TPDIGIO 1 I/O Digital
SPI_TPANAIO 1 I/O Analog
SPI_TPGRPIO 1 I/O Group
SPI_TPROBIO 1 I/O Robot
SPI_TPUOPIO 1 I/O UOP
SPI_TPSOPIO 1 I/O SOP
SPI_TPSETGEN 1 SETUP General
SPI_TPFRAM 1 SETUP Frames
SPI_TPPORT 1 SETUP Port Init
SPI_TPMMACRO, SCR_MACSETUP SETUP Macro
SPI_TPREFPOS 1 SETUP Ref Position
SPI_TPPWORD 1 SETUP Passwords
SPI_TPHCCOMM 1 SETUP Host Comm
SPI_TPSYRSR 1 SETUP Prog Selecct
SPI_TPFILS 1 FILE
SPI_TPSTATUS SCR_AXIS STATUS Axis
SPI_TPMEMORY 1 STATUS Memory
SPI_TPVERSN 1 STATUS Version ID
SPI_TPPRGSTS 1 STATUS Program
SPI_TPSFTY 1 STATUS Safety Signals
SPI_TPUSER 1 USER
SPI_TPSELECT 1 SELECT
SPI_TPTCH 1 EDIT
SPI_TPREGIS SCR_NUMREG DATA Registers
SPI_SFMPREG SCR_POSREG DATA Position Reg
SPI_TPSYSV SCR_NUMVAR DATA KAREL Vars
SPI_TPSYSV SCR_POSVAR DATA KAREL Posns
SPI_TPPOSN 1 POSITION
SPI_TPSYSV SCR_CLOCK SYSTEM Clock
SPI_TPSYSV SCR_SYSVAR SYSTEM Variables
SPI_TPMASCAL 1 SYSTEM Master/Cal
SPI_TPAXLM 1 SYSTEM Axis Limits
SPI_TPUSER2 1 USER2

- 113 -
B.DISCTRL_DIAG BUILT-IN APPENDIX B-83114EN/01

B DISCTRL_DIAG BUILT-IN
The KAREL built-in DISCTRL_DIAG can be used to display and control a dialog box on the iPendant
screen. The legacies teach pendant is not supported. The built-in will return status 9147, "TP firmware
version is too old".

Syntax : DISCTRL_DIAG(file_spec, term_mask, term_char, status)

Input/Output Parameters:

[in] file_spec : STRING

[in] term_mask : INTEGER
[out] term_char : INTEGER
[out] status : INTEGER

%ENVIRONMENT Group :UIF

Details:
• file_spec specifies the device and filename of the XML file defining the dialog box. If no device
name is specified, the default device is used.
• term_mask is a bit-wise mask indicating conditions that will terminate the dialog box. This should
be an OR of the constants defined in the include file klevkmsk.kl.

kc_prev_key -- PREV key

kc_enter_key -- Enter key
kc_func_key -- Function keys

0 is also a valid term_mask if one or more of the controls on the dialog box are used to dismiss it.

• term_char receives a code indicating the character or other condition that terminated the dialog box.
The codes for key terminating conditions are defined in the include file klevkeys.kl. Keys normally
returned are pre-defined constants as follows:

ky_cancel -- Dialog box was dismissed

ky_prev – Prev key was pressed (only if kc_prev_key mask is used)
ky_enter – Enter key was pressed (only if kc_enter_key mask is used)
ky_new_menu -- A new menu was selected

• DISCTRL_DIAG will display the dialog box on the teach pendant device over top of the menu
being displayed.
• status explains the status of the attempted operation. If status returns a value other than 0, an error
has occurred.
• If the KAREL program is aborted, the dialog box is automatically dismissed.

A Dialog Box can contain a single item like a string entry or it can be a collection of several items such as
string entry and buttons. The following are some of the items that may be included in a Dialog Box.

• Discrete buttons (Yes, No, OK, Cancel etc.)

• Labels
• String entry
• Numeric entry

- 114 -
B-83114EN/01 APPENDIX B.DISCTRL_DIAG BUILT-IN
The Dialog Box uses standard iPendant Controls on an independent window to provide these items.

The size and location of the Dialog Box are configurable and it can be displayed across multiple panes.

B.1 DIALOG BOX XML FILE

To make a Dialog Box, you must first create an XML file to define the box and then store that file in
controller memory (FR:, MC:, etc.) where it can be accessed by the KAREL built-in. The XML file is an
ASCII file with .xml extension. Later, to display the box, you call the KAREL built-in DISCTRL_DIAG
and provide it the name of the XML file.

The XML file defines the following items:

• General layout of the Dialog Box and position of all items

• Definition of the items on the Dialog Box
• Standard iPendant Control information including:
• Size and color
• Label text
• Data type
• Data index

Tags and attributes are used to define these items. The typical layout of a dialog box XML file is:
<DIALOG [DIALOG attributes] > - One of these required in the file

<TEXT [TEXT attributes]>title</TEXT> - An optional title

<DLGTILE [DLGTILE attributes] > - One for each control.

<object [object attributes] > - One per DLGTILE

<object parameter> - iPendantControl parameters
.
.
.
<object parameter>
</object> - End of object

</DLGTILE> - End of tile

<DLGTILE [DLGTILE attributes] > - Next tile in dialog box

<object [object attributes] >

<object parameter>
.
.
.
<object parameter>
</object>

</DLGTILE>

</DIALOG> - End of Dialog Box

There can only be one Dialog Box definition per XML file.

- 115 -
B.DISCTRL_DIAG BUILT-IN APPENDIX B-83114EN/01

B.1.1 Tags and Attributes

Several XML tags are defined to describe a dialog box and the iPendant Controls that make it up.

• <DIALOG> </DIALOG> - The overall dialog box

• <TEXT> </TEXT> - An optional dialog box title
• <DLGTILE> </DLGTILE> - The individual tiles that contain each iPendant Control
• <object> </object> - The actual iPendant Controls that make up the dialog box

<DIALOG> </DIALOG>

<DLGTILE> </DLGTILE>

<object> </object>

B.1.1.1 <DIALOG> </DIALOG>

This tag defines the overall dialog box window including the size and its location on the screen. The
location is based on the whole screen and not an individual pane.

Prototype is as follows.
<DIALOG posx="col#" posy="row#" width="#cols" height="#rows" bgcolor=”color#”>
........
</DIALOG>

Attribute Description
posx="col#" Specifies the column position of the dialog box.
posy="row#" Specifies the row position of the dialog box.
width="#cols" Specifies the width of the dialog box in pixels.
height="#rows" Specifies the height of the dialog box in pixels.
bgcolor="color#" Specifies the background color in RGB values.

- 116 -
B-83114EN/01 APPENDIX B.DISCTRL_DIAG BUILT-IN

B.1.1.2 <TEXT> </TEXT>

This is an optional tag that defines a title for the dialog box. The location is based on the overall dialog
box window. Only one TEXT tag is supported.
Prototype is as follows.
<TEXT clr="color#" font="font#" align="horiz,vert" loc="x,y" dims=”#cols,#rows”>
........
</TEXT>

Attribute Description
clr="color#" Specifies the foreground color in RGB values.
font="font#" Specifies the font size.
align="horiz,vert" Specifies the horizontal (left,center,right) and vertical (top,middle,bottom) alignment within
the text area.
loc="x,y" Specifies the column and row within the dialog box.
dims="#cols,#rows" Specifies the width and height in pixels of the text area.

B.1.1.3 <DLGTILE> </DLGTILE>

This tag defines the size and location of individual tiles on the dialog box that will contain the iPendant
Controls. Their location is based on the overall dialog box window. This tag also contains a special
attribute that defines whether selecting this control will dismiss the dialog box. There must be at least one
<DLGTILE> tag with this attribute set to 1 when calling DISCTRL_DIAG with term_mask = 0. If one of
more of the iPendant Controls need to use enter or prev to operate than term_mask should be 0.

Prototype is as follows.
<DLGTILE posx="col#" posy="row#" width="#cols " height="#rows" type=”dismiss”>
........
</DLGTILE>

Attribute Description
posx="col#" Specifies the column position of the entity within the dialog box.
posy="row#" Specifies the row position of the entity within the dialog box.
width="#cols" Specifies the width of the entity in pixels.
height="#rows" Specifies the height of the entity in pixels.
Specifies whether the dialog box will be dismissed when this entity is selected.
type="dismiss" 1 = dismiss, 0 or not specified = not dismissed.

B.1.1.4 <object> </object>

This tag is the normal tag for an iPendant Control. It defines one control in each tile on the dialog box.
The format of the object tag is the standard format for iPendant Controls. The information can be copied
verbatim from the HTML view of a web page editor.

This is an example of a typical object tag:

<object classid="clsid:7106065C-0E45-11D3-81B6-0000E206D650"
id="FRIPLabel1" width="300" height="35">
<param name="_Version" value="65536">
<param name="_ExtentX" value="2646">
<param name="_ExtentY" value="1323">
<param name="_StockProps" value="6">
<param name="Caption" value="Dialog Box">
<param name="FontName" value=" Courier New ">
- 117 -
B.DISCTRL_DIAG BUILT-IN APPENDIX B-83114EN/01

<param name="FontSize" value="16">

<param name="DataType" value="100">
<param name="DataIndex" value>
<param name="Interval" value="250">
<param name="FastLoad" value="1">
<param name="BackColor" value="13554646">
</object>

Note the parameters that start with _, such as “_Version”, are not required and can be omitted. In addition,
the width and height on the object tag is not used. The width and height on the DLGTILE is used instead.

B.1.1.5 XML content example

To create the Dialog Box XML file, you first create the iPendant Controls using a web page editor such as
FrontPage. Then you copy and paste the <object> .. </object> sections into the Dialog Box XML as
shown below.

Below is an example of an XML file that defines the following dialog box.

This box contains three iPendant Controls, a Label (“Continue program?”) and two Toggle Buttons
(“YES” and “NO”). When a Toggle Button is pressed, the KAREL variable is set and the dialog box is
dismissed.

<DIALOG posx="220" posy="170" width="220" height="140" bgcolor="#C0C0C0">

<!—Continue program? -->

<DLGTILE posx="10" posy="10" width="200" height="50">
<object classid="clsid:7106065C-0E45-11D3-81B6-0000E206D650" id="LABEL1">
<param name="Caption" value="Continue program?">
<param name="DataType" value="100">
<param name="FontSize" value="16">
<param name="ForeColor" value="16777215">
<param name="BackColor" value="255">
</object>
</DLGTILE>

<!-- Yes -->

<DLGTILE posx="30" posy="70" width="60" height="50" type="1">
<object classid="clsid:7106066C-0E45-11D3-81B6-0000E206D650" id="TGBTN1">
<param name="Caption" value="YES">
<param name="DataType" value="103">
<param name="DataIndex" value="[runyesno]yes">
<param name="FontSize" value="16">
<param name="TrueColor" value="12632256">
<param name="FalseColor" value="12632256">

- 118 -
B-83114EN/01 APPENDIX B.DISCTRL_DIAG BUILT-IN
<param name="BackColor" value="16777215">
</object>
</DLGTILE>

<!-- No -->
<DLGTILE posx="120" posy="70" width="60" height="50" type="1">
<object classid="clsid:7106066C-0E45-11D3-81B6-0000E206D650" id="TGBTN2">
<param name="Caption" value="NO">
<param name="DataType" value="103">
<param name="DataIndex" value="[runyesno]no">
<param name="FontSize" value="16">
<param name="TrueColor" value="12632256">
<param name="FalseColor" value="12632256">
<param name="BackColor" value="16777215">
</object>
</DLGTILE>
</DIALOG>

B.1.1.6 KAREL program example

This subsection shows a KAREL program example that shows dialogbox with XML file of previous
subsection. This sample asuumes that XML file is MC:\DLGYESNO.XML.
--
-- KAREL program to display dialog box
--
PROGRAM runyesno

%NOLOCKGROUP
%ENVIRONMENT uif

%INCLUDE klevkmsk
%INCLUDE klevccdf

VAR
term_char: INTEGER
status: INTEGER
yes: BOOLEAN
no: BOOLEAN

BEGIN
yes = FALSE
no = FALSE
DISCTRL_DIAG('MC:\DLGYESNO.XML', kc_prev_key, term_char, status)
IF term_char = ky_prev THEN
no = TRUE
ENDIF
IF yes = TRUE THEN
WRITE TPERROR (CHR(cc_home) + CHR(cc_clear_win) + 'Continue program')
ELSE
WRITE TPERROR (CHR(cc_home) + CHR(cc_clear_win) + 'Do not continue program')
ENDIF
END runyesno

- 119 -
C.FLOW OF CREATION OF CUSTOM SCREEN APPENDIX B-83114EN/01

C FLOW OF CREATION OF CUSTOM

SCREEN
This appendix shows flow of creation of an example custom screen. The example screen has an button
(EditBox control) that shows and sets value of R[1]. File of the screen is test_01.stm. Flow is as follows.
1 Create new workcell by ROBOGUIDE
2 Open MC directory as site by FrontPage
3 Create new page
4 Insert button (EditBox control) and set property
5 Save the file as test_01.stm
6 Display created screen by ROBOGUIDE

Procedure C-1 Steps from workcell creation to display of custom screen

Step
1 Creat workcell by ROBOGUIDE
Function to display custom screen is basic. No software option is required for display of custom
screen.

2 Select [ Tools | Explorer] to display workcell directory.

3 Remember path of MC directory of virtual robot

4 Start FrontPage
5 Select [File | Open Site ] from menu bar

- 120 -
B-83114EN/01 APPENDIX C.FLOW OF CREATION OF CUSTOM SCREEN

6 In [Open Site] dialog box, specify MC directory whose path is checked at step 3

7 If the directory has never been opened as site, [Add FrontPage Information to the Folder] dialog box
is displayed. Select Yes.

8 Specified directory is opened as site. Usually, content of the directory is displayed.

- 121 -
C.FLOW OF CREATION OF CUSTOM SCREEN APPENDIX B-83114EN/01

9 Select [File | New ] from menu bar

10 [New] task page is displayed. Select [Blank page] under [New page].

11 New page is created. Usually it is named as new_page_1.htm. We call so here after.

- 122 -
B-83114EN/01 APPENDIX C.FLOW OF CREATION OF CUSTOM SCREEN

12 In new_page_1.htm displayed by design view, move cursor to start of the page.

Just like figure above, cursor is near left upper corner of the page.

13 Select [Insert | Web Component] from menu bar. It displays [Insert Web Component] dialog box.

14 Select [Advanced Controls] in [Component type] list and select [ActiveX control] in [Choose a
control] list. Then Press Next. Dialog box like following is displayed.
15 Select FANUC iPendant EditBox Control and press Finish.

- 123 -
C.FLOW OF CREATION OF CUSTOM SCREEN APPENDIX B-83114EN/01

16 EditBox is placed on web page

17 Click the EditBox and drag handle to adjust size.

18 Double click the EditBox to display [ActiveX Control Properties] dialog box

- 124 -
B-83114EN/01 APPENDIX C.FLOW OF CREATION OF CUSTOM SCREEN

19 Confirm [Edit Box] tab is selected. Set [DataType] to [101-Numeric Register] and set [DataIndex] to
1. Press OK.

20 Select [File | Save as…] from menu bar. Save the web page as test_01.stm under MC directory.
Please note that extension is stm.
21 Display iPendant by ROBOGUIDE
22 Select MENU->next page->BROWSER to display BROWSER screen.
23 Display Browser Favorite screen by F1 [ TYPE ]-> Browser.
If Web Server is displayed, press next key and F5 Favorite.

24 Select “Add a Link”.

- 125 -
C.FLOW OF CREATION OF CUSTOM SCREEN APPENDIX B-83114EN/01

25 Screen like following is displayed. Input “EditBox test” to “Enter a Name” and “/mc/test_01.stm” to
“Enter an Address”. Press Continue.

26 Link is added as following figure. Select address of added link.

- 126 -
B-83114EN/01 APPENDIX C.FLOW OF CREATION OF CUSTOM SCREEN

27 The page is displayed.

Button on left upper corner shows value of numeric register 1 (R[1]). You can change value of R[1]
by dialog box that is displayed by click on the button.

- 127 -
D.USE OF TABLE TO ARRANGE CONTROLS APPENDIX B-83114EN/01

D USE OF TABLE TO ARRANGE CONTROLS

If you place two or more iPendant control in a web page, we recommend you to use table. We also
recommend placing only one control in one cell of the table. This sometimes makes display of the page
by FrontPage more similar to display by ROBOGUIDE and by real iPendant than display without
following the recommendation.
Following figure is example that placed 15 Label control in a table with 1 cell.

Figure D (a): Placing controls in a cell of table

Display by ROBOGUIDE can be different.

Figure D (b): Untidy display by ROBOGUIDE

- 128 -
B-83114EN/01 APPENDIX D.USE OF TABLE TO ARRANGE CONTROLS

Figure D (a) and D (b) show difference between FrontPage and ROBOGUIDE. In addition, display can
be different between ROBOGUIDE and real iPendant. Placing more than 2 controls in a cell can cause
this difference.
If you place only one control in one cell, it sometimes makes adjustment of display easier. If you insert
table in a cell, place one control in an innermost cell.
Speaking about Figure D (a), insert table 3 by 5 to a table 1 by 1. Placing one Label control to each cell of
inside table (3 by 5). Figure D (c) shows the result of the change. Figure D (d) shows improved display on
ROBOGUIDE.

Inside table
(3 rows and 5 columns)
Outside Table (1 row and 1 column)

Label control
Figure D (c): Placing one control in one cell of inner table

Figure D (d): Display by ROBOGUIDE

- 129 -
B-83114EN/01 INDEX

INDEX
DataFontSize..................................................................57
<A> DataFormat ....................................................................58
Alignment..................................................................21,88 DataGrid.........................................................................60
Annotation & AnnotateFontSize ....................................54 DataScale .......................................................................59
AutoChange Control ......................................................40 DataScaleFormat (Bar Chart).........................................60
DataScaleFormat(Line Chart) ........................................59
<B> DataShowValues............................................................58
Bar Chart Control...........................................................65 DataType and DataIndex ...............................................18
Border .............................................................20,54,75,86 Delete .............................................................................80
BROWSER MENUS........................................................3 DELTILE Tag..............................................................104
BUTTON Tag ..............................................................100 <DIALOG> </DIALOG> ............................................116
ButtonChange Control ...................................................42 DIALOG BOX XML FILE..........................................115
Diam...............................................................................79
<C> DISCTRL_DIAG BUILT-IN.......................................114
Caption.................................................................22,74,85 DISPLAY CONCEPTS .................................................87
Caption & CaptionFontSize ...........................................53 DISPLAY Tag .............................................................102
CAUTIONS .....................................................................2 Display, Pan and Zoom..................................................89
Ch_Data_N.....................................................................65 <DLGTILE> </DLGTILE>.........................................117
Channel config Tab ........................................................61 Draw Tab .......................................................................74
Chart config Tab ............................................................55 Draw2 Tab .....................................................................76
CHART CONTROL DESCRIPTION............................65 Dynamic Data ..............................................................106
ChartClear ......................................................................65 Dynamic Display ...........................................................90
ChartType ......................................................................56 Dynamic Entity Modifications.......................................80
ChN_AutoRange ............................................................64
ChN_Clear .....................................................................65 <E>
ChN_Color .....................................................................62 EditBox Control .............................................................31
ChN_Data.......................................................................62 Error Code Dialog..........................................................46
ChN_DataGrid ...............................................................63 Error Code Messages .....................................................47
ChN_DataMarkerN ........................................................64 Execution Control ..........................................................46
ChN_DataScale ..............................................................63
ChN_Digital ...................................................................63 <F>
ChN_Name.....................................................................62 FastLoad....................................................................76,87
ChN_Rate.......................................................................63 File Names .....................................................................10
ChN_Source ...................................................................62 FLOW OF CREATION OF CUSTOM SCREEN........120
ChN_State ......................................................................63 Fonts........................................................... 13,21,52,73,84
Circ.................................................................................78 FORCE_LINK BUILT-IN ROUTINE.........................111
CIRCLE Tag ..................................................................98 Foreground & Background Colors ....................... 54,75,85
Clear...............................................................................80 Frames............................................................................14
ClickMe..........................................................................29 FRONTPAGE ..................................................................9
Colors.............................................................................20 Function Key ViewType................................................22
ComboBox Control ........................................................43
CommandButton Control ...............................................35 <G>
COMMANDING LINKS FROM KAREL ..................111 General Chart Properties ................................................53
COMMON CHART CONTROL PROPERTIES ...........52 GENERIC LINKING DETAILED INFORMATION..112
COMMON CONTROL PROPERTIES .........................18 GENERIC LINKING FUNCTIONALITY ..................111
COMMON DRAWING CONTROL PROPERTIES .....72 Grid Tab.........................................................................85
COMMON GRDI CONTROL PROPERTIES...............83 GRID Tag ......................................................................93
CONTROL ARRANGEMENT............................17,51,71 GridColor .......................................................................60
Control Description........................................................29 GridType........................................................................60
CONTROL DESIGN ADVICE .....................................46
Control Features Summary...............................................7 <H>
Conventions ...................................................................87 HARDWARE REQUIREMENTS ...................................1
HTML Editing ...............................................................13
<D>
Data ................................................................................77
i-1
INDEX B-83114EN/01

<I> PROPERTIES with ADDITIONAL OPTIONAL

Imag ...............................................................................79 VALUES ....................................................................69
IMAGE Tag ...................................................................99 PUBLISHING YOUR SITE ..........................................14
Images .......................................................................13,19 Pulse DO ........................................................................23
Indirect DataType and DataIndex ..................................27
INSERTING A GRID CONTROL ON A WEB PAGE .82 <R>
INSTALLATION.............................................................5 RECOMMENDED ENVIRONMENT ............................5
InvertY ...........................................................................77 Rect ................................................................................78
iPENDANT CONTROLS SUMMARY...........................5 RECTANGLE Tag.........................................................96
iPENDANT WEB BROWSER ........................................3 Rendering.......................................................................91
RESTRICTIONS .............................................................2
<K>
KAREL program example ...........................................119 <S>
SAFETY ....................................................................... s-1
<L> SampleGrid ....................................................................59
Label Control .................................................................30 SampleMarkerColor.......................................................64
LabelFontSize ................................................................56 SampleMarkerN .............................................................64
Layer control ..................................................................76 SampleScale...................................................................58
LayerOff.........................................................................80 SampleScaleAspect........................................................58
LayerOn .........................................................................80 SampleScaleFormat .......................................................59
Line ................................................................................78 Scale...............................................................................77
Line Chart Control .........................................................67 Scroll Bars with The DISPLAY Tag............................103
LINE Tag .......................................................................95 SetFocus.........................................................................29
LineScaleActive .............................................................57 SOFTWARE REQUIREMENTS.....................................1
Links ..............................................................................13
<T>
<M> Tags and Attributes ......................................................116
MAKING A CUSTOM iPENDANT SCREEN .............17 Text ................................................................................77
MenuChange Control .....................................................41 <TEXT> </TEXT> ......................................................117
Meta Tags.......................................................................11 TEXT Tag ......................................................................94
Miscellaneous.................................................................64 The Entities ....................................................................77
Miscellaneous Properties................................................79 Themes and Styles .........................................................14
Modifying SHAPES.....................................................105 TILE Tag........................................................................94
Modifying TILES.........................................................106 ToggleButton Control ....................................................37
Monitor ..........................................................................21 ToggleLamp Control......................................................32
Multi Control..................................................................39
<U>
<N> USE OF TABLE TO ARRANGE CONTROLS ..........128
Name .........................................................................54,74 USING FANUC iPENDANT CONTROLS.....................5
USING THE CHART CONTROL.................................49
<O> Using the Data parameter.............................................106
<object> </object> .......................................................117 USING THE DRAWING CONTROL ...........................70
Object Tag.......................................................18,52,73,83 USING THE GRID CONTROL ....................................81
Orientation .....................................................................56 Using the Pipe parameter .............................................106
OVERVIEW .................................................................1,3
<W>
<P> Window Size..................................................................11
Page Properties...............................................................11 WORKING with PAGES.................................................9
PANEID .........................................................................28 WORKING with SITE.....................................................9
Path ................................................................................78
Pipe .................................................................28,54,75,86 <X>
Pipe Mon Rate................................................................86 XML content example .................................................118
PipeMonRate.............................................................55,75 XML Tag .......................................................................93
POLYGON Tag .............................................................97 XML TO THE GRID .....................................................91
Port Simulation ..............................................................24
Positioning .....................................................................13
Positions .........................................................................24

i-2
 Revision Record

FANUC Robot series R-30iA/R-30iA Mate CONTROLLER

iPendant Screen Customize Function OPERATOR’S MANUAL (B-83114EN)

01 Feb.,2010

Edition Date Contents Edition Date Contents

 B-83114EN/01

* B - 8 3 1 1 4 E N / 0 1 *