10. Graphical programming
10.1. Introduction
Since the teaching pendant is generally not connected to external peripherals such as keyboard and mouse, when accessing the robot WebAPP on the teaching pendant side, users can edit the robot teaching program through the graphical programming function. Functional standardization functions are implemented using the Blockly library, which can be integrated into the WebAPP system, and custom code blocks can be implemented as needed. After dragging and dropping programming, it is converted into a LUA program and sent and run through the existing instruction protocol.
By using graphical programming, it can be simple and easy to understand, easy to operate, and Chinese language operation.
The page is divided into three areas: “operation bar”, “toolbox toolbar” and “workspace code editing area”. The overall layout design is as follows.

Figure 10.1 Graphical programming interface
Operation bar
Load: responsible for reloading the workspace;
Import: responsible for importing related graphical programming programs;
Export: responsible for exporting the saved graphical programming programs in the workspace. The “Save” button function is to save the code block as the corresponding teaching program after editing is completed;
Save: responsible for saving the edited graphical code block;
Clear: responsible for quickly clearing the code editing area;
Code: responsible for translating code blocks into Lua code.
Toolbox
Code blocks containing all instructions and logic codes can be dragged to the workspace to create code blocks and edit them;
The Toolbox toolbar section will be further classified according to the instruction type;
Logic instructions: if-else, while, etc;
Basic motion instructions: PTP, LIN, ARC, etc. Instructions are classified according to application scenarios: gluing, welding, conveyor belts, etc. You can easily find the required code blocks during use.
Workspace: Graphical code blocks can be edited and displayed in the code editing area.
10.2. Logic Graphical Programming Commands
Logic Graphical Programming Commands include loops, numbers and other logic commands.

Figure 10.2 Logic Graphical Programming
10.2.1. If/Else Judgment Instruction
Drag the “If/Else Judgment Instruction” code block to enter the graphical editing interface workspace. (This instruction requires a certain programming foundation. If you need help, please contact us)

Figure 10.2-1 If/Else Judgment Instruction Code Block
10.2.2. While Instruction
Drag the “While Instruction” code block to enter the graphical editing interface workspace. (This instruction requires a certain programming foundation. If you need help, please contact us)
Add the input waiting condition after While, add the motion instruction code block inside while, and click Save. (For ease of operation, you can enter any do content and edit other instructions in the program to insert instead)

Chart 10.2-2 While instruction code block
10.2.3. Jump instruction
Drag the “Jump instruction” code block to enter the graphical editing interface workspace. (This instruction requires a certain programming foundation. If you need help, please contact us)
Jump name: Enter the jump name to determine the jump position

Figure 10.2-3 Jump instruction code block
Important
Jump name cannot start with a number
10.3. Variable class graphical programming command
Variable class graphical programming commands include create variable commands.

Figure 10.3 Variable class graphical programming
10.3.1. Variable instruction
Click the “Create” button to enter the variable name to be defined.
Drag the “Variable instruction” code block to enter the graphical editing interface workspace.
“Variable” instruction node, parameters:

Figure 10.3-1 Variable instruction code block
10.4. Function class graphical programming command
Function class graphical programming command includes create function command.

Figure 10.4 Function class graphical programming
10.4.1. Function method instruction
Drag the “Function method instruction” code block to enter the graphical editing interface workspace.
“Function method” instruction node, parameters:
Function name: the name of the function to be run.

Figure 10.4-1 Function method instruction code block
10.5. Motion graphic programming commands
Motion graphic programming commands include PTP, Lin, ARC and other motion commands.

Figure 10.5 Motion graphic programming
10.5.1. Point-to-point instruction
Drag the “point-to-point instruction” code block to enter the graphical editing interface workspace.
You can select the point you want to reach. The smooth transition time setting can make the movement from this point to the next point continuous. For the offset setting, you can choose to offset based on the base coordinate system and offset based on the tool coordinate system, and pop up the x, y, z, rx, ry, rz offset settings. The specific PTP path is the optimal path automatically planned by the motion controller.
“Point to point” instruction node, parameters:
Point name: teaching point
Debug speed (%): 0 ~ 100
Stop: false/true
Smooth transition (ms): Smooth transition time 0 ~ 500
Whether to offset No/base coordinate offset/tool coordinate offset When No is selected, the dx~drz parameter values are not effective
dx~drz: offset

Chart 10.5-1 Point-to-point instruction code block
10.5.2. Straight line instruction
Drag the “Straight line instruction” code block to enter the graphical editing interface workspace.
This instruction function is similar to the “point to point” instruction, but the path to the point reached by this instruction is a straight line.
“Straight line” instruction node, parameters:
Point name: teaching point
Debug speed (%): 0 ~ 100
Stop: false/true, when true is selected, the smooth transition parameter value is not effective
Smooth transition (mm): smooth transition radius 0 ~ 1000
Whether to seek: false/true
Seek point variable: REF0~99/RES0~99, when false is selected for whether to seek, the parameter is not effective;
Whether to offset: No
Joint overspeed protection: No/Yes
Processing strategy: Standard/Stop with error when overspeeding/Adaptive deceleration
Allowed deceleration threshold: 0~100

Chart 10.5-2 Straight line instruction code block
10.5.3. Straight line (adjustable angular velocity at transition point) instruction
Drag the “Straight line (adjustable angular velocity at transition point) instruction” code block to enter the graphical editing interface workspace.
The function of this instruction is similar to the “point to point” instruction, but this instruction includes adjustable angular velocity at transition point.
“Straight line (adjustable angular velocity at transition point)” command node, parameters:
Maximum angular velocity: 0~300

Chart 10.5-3 Straight line (adjustable angular velocity at transition point) command code block
10.5.4. Straight line (seamPos) command
Drag the “Straight line (seamPos) command” code block to enter the graphical editing interface workspace.
This command function is used to use laser sensors in welding scenarios.
“Straight line (seamPos)” command node, parameters:
Point name: teaching point
Debug speed (%): 0 ~ 100
Stop: false/true, when true is selected, the smooth transition parameter value is not effective
Smooth transition (mm): smooth transition radius 0 ~ 1000
Weld cache data selection: execution planning data/execution record data;
Plate type: corrugated plate/corrugated plate/fence plate/oil drum/corrugated shell steel;
Whether to offset: No/base coordinate offset/tool coordinate offset/laser raw data offset When no is selected, the dx~drz parameter value is not effective
dx~drz: offset

Chart 10.5-4 Straight line (seamPos) command code block
10.5.5. Arc command
Drag the “Arc command” code block to enter the graphical editing interface workspace.
Arc motion contains two points, the first point is the transition point in the middle of the arc, and the second point is the end point. Both the transition point and the end point can be set to offset or not. You can choose to offset based on the base coordinate system and offset based on the tool coordinate system, set the x, y, z, rx, ry, rz offset, and the end point can set the smooth transition radius to achieve a continuous motion effect
“Arc” instruction node, parameters:
Arc middle point: teaching point
Whether to offset: No/base coordinate offset/tool coordinate offset When no is selected, the dx~drz parameter value is not effective
dx~drz: offset
Arc end point: teaching point
Whether to offset: No/base coordinate offset/tool coordinate offset When no is selected, the dx~drz parameter value is not effective
dx~drz: offset
Debug speed (%): 0 ~ 100
Stop: false/true, when true is selected, the smooth transition parameter value is not effective
Smooth transition (mm): smooth transition radius 0 ~ 1000

Figure 10.5-5 Arc instruction code block
10.5.6. Full circle command
Drag the “full circle command” code block to enter the graphical editing interface workspace.
Click the “full circle” command node to enter the node diagram editing interface.
Full circle motion includes two points, the first point is the full circle middle transition point 1, the second point is the full circle middle transition point 2, transition point 2 can be set whether to offset, the offset is effective for both transition point 1 and transition point 2.
“Full circle” command node, parameters:
Full circle middle point 1: teaching point
Full circle middle point 2: teaching point
Debug speed (%): 0 ~ 100
Whether to offset: No/base coordinate offset/tool coordinate offset When No is selected, the dx~drz parameter value is not effective
dx~drz: offset

Chart 10.5-6 Full circle instruction code block
10.5.7. Spiral instruction
Drag the “Spiral instruction” code block to enter the graphical editing interface workspace.
The spiral motion includes three points, which form a circle. In the third point setting page, there are several parameter settings, including the number of spiral turns, attitude correction angle, radius increment and axis direction increment. The number of spiral turns is the number of spiral motion turns. The attitude correction angle corrects the attitude at the end of the spiral and the attitude of the first point of the spiral. The radius increment is the increment of each circle radius, and the axis direction increment is the increment of the spiral axis direction. Set whether to offset. The offset is effective for the entire spiral trajectory.
“Spiral” command node, parameters:
Spiral middle point 1: teaching point
Spiral middle point 2: teaching point
Spiral middle point 3: teaching point
Debug speed (%): 0 ~ 100
Offset: No/base coordinate offset/tool coordinate offset When No is selected, the dx~drz parameter values are not effective
dx~drz: offset
Spiral turns: 0 ~ 100
Posture angle correction rx (°): -1000 ~ 1000
Posture angle correction ry (°): -1000 ~ 1000
Posture angle correction rz (°): -1000 ~ 1000
Radius increment (mm): -100 ~ 100
Rotation axis direction increment (mm): -100 ~ 100

Figure 10.5-7 Spiral instruction code block
10.5.8. New spiral instruction
Drag the “New Spiral Instruction” code block to enter the graphical editing interface workspace.
Click the “New Spiral” instruction node to enter the node graph editing interface.
The new spiral motion is an optimized version of the spiral motion. This instruction only requires one point plus the configuration of various parameters to realize the spiral motion. The robot takes the current position as the starting point. The user sets the debugging speed, whether to offset, the number of spiral turns, spiral inclination, initial radius, radius increment, axis direction increment and rotation direction. The number of spiral turns refers to the number of spiral turns of the spiral line. The spiral inclination refers to the angle between the tool Z axis and the horizontal direction. The posture correction angle corrects the posture at the end of the spiral line and the posture of the first point of the spiral line. The initial radius refers to the radius of the first circle. The radius increment refers to the increment of each circle radius. The axis direction increment refers to the increment of the spiral axis direction. The rotation direction is clockwise and counterclockwise.
“New spiral” command node, parameters:
Spiral start point: teaching point
Debug speed (%): 0 ~ 100
Offset: No/base coordinate offset/tool coordinate offset When No is selected, the dx~drz parameter values are not effective
dx~drz: offset
Spiral turns: 0 ~ 100
Spiral inclination (°): -100 ~ 100
Initial radius: 0 ~ 100
Radius increment (mm): -100 ~ 100
Rotation axis direction increment (mm): -100 ~ 100
Rotation direction: clockwise/counterclockwise

Chart 10.5-8 New spiral instruction code block
10.5.9. Horizontal spiral instruction
Drag the “Horizontal spiral instruction” code block to enter the graphical editing interface workspace.
The “H-Spiral” instruction is a horizontal space spiral motion. This instruction is set after the single-segment motion (straight line) instruction.
“Horizontal spiral” instruction node, parameters:
Spiral radius: 0~100mm
Spiral angular velocity: 0~2rev/s
Rotation direction: spiral clockwise/counterclockwise
Spiral inclination: 0~40°

Figure 10.5-9 Horizontal spiral instruction code block
10.5.10. Spline instruction
Drag the “Spline instruction” code block to enter the graphical editing interface workspace.
This instruction is divided into three parts: spline group start, spline segment and spline group end. The spline group start is the start mark of the spline motion. The spline segment currently only contains the SPL segment in the node diagram. The spline group end is the end mark of the spline motion.
“Spline-SPTP” instruction node, parameters:
Point name: teaching point
Debug speed (%): 0 ~ 100

Figure 10.5-10 Spline instruction code block
10.5.11. New spline instruction
Drag the “New spline instruction” code block to enter the graphical editing interface workspace.
This instruction is a spline instruction algorithm optimization instruction, which will replace the existing spline instruction in the future. This instruction is divided into three parts: multi-point trajectory start, multi-point trajectory segment and multi-point trajectory end. Multi-point trajectory start is the starting mark of multi-point trajectory movement. Multi-point trajectory segment is to set each trajectory point. Click the icon to enter the point adding interface. Multi-point trajectory end is the end mark of multi-point trajectory movement. Here you can set the control mode and debugging speed. The control mode is divided into given control point and given path point.
“New Spline” instruction node, parameters:
Control mode: teach point
Global average connection time: integer type, greater than 10, default value is 2000ms
“New Spline-SPL” instruction node, parameters:
Point name: teach point
Debug speed (%): 0 ~ 100
Smooth transition radius: 0 ~ 1000
Is it the last point: No/Yes

Chart 10.5-11 New Spline Instruction Code Block
10.5.12. Swing Instruction
Drag the “Swing Instruction” code block to enter the graphical editing interface workspace.
“Swing” instruction node, parameters:
Number: 0~7

Figure 10.5-12 Swing instruction code block
10.5.13. Point offset instruction
Drag the “point offset instruction” code block to enter the graphical editing interface workspace.
This instruction is an overall offset instruction. Enter each offset. The intermediate motion instructions will be offset based on the base coordinates (or workpiece coordinates).
“Point offset” command node, parameters:
∆x: offset, -300~300
∆y: offset, -300~300
∆z: offset, -300~300
∆rx: offset, -300~300
∆ry: offset, -300~300
∆rz: offset, -300~300

Figure 10.5-13 Point offset command code block
10.5.14. Servo command
Drag the “Servo command” code block to enter the graphical editing interface workspace.
Servo control (Cartesian space motion) instructions, which can control the robot motion through absolute posture control or based on the current posture offset.
“Servo” command node, parameters:
Movement mode: absolute position/base coordinate offset/tool coordinate offset
x: offset, -300~300
y: offset, -300~300
z: offset, -300~300
rx: offset, -300~300
ry: offset, -300~300
rz: offset, -300~300
Proportional coefficient x: 0~1
Proportional coefficient y: 0~1
Proportional coefficient z: 0~1
Proportional coefficient rx: 0~1
Proportional coefficient ry: 0~1
Proportional coefficient rz: 0~1
Acceleration (%): 0~100
Speed (%): 0~100
Command cycle (s): 0.001~0.016
Filter time (s): 0~1
Scale up: 0~100

Chart 10.5-14 Servo command code block
10.5.15. Trajectory command
Drag the “Trajectory command” code block to enter the graphical editing interface workspace.
In this command, the user first needs to have a recorded trajectory.
“Trajectory” command node, parameters:
Select trajectory file: recorded trajectory
Debug speed (%): 0 ~ 100, default value is 25

Chart 10.5-15 Trajectory command code block
10.5.16. TrajectoryJ command
Drag the “TrajectoryJ command” code block to enter the graphical editing interface workspace.
In this command, the user first needs to have a recorded trajectory, and the trajectory file can be pre-imported in the teaching program interface. The trajectory command and trajectoryJ command are suitable for the general interface of the camera directly giving the trajectory. When there is a discrete trajectory point file in a fixed format, it can be imported into the system to make the robot move according to the trajectory of the imported file.
“Track J” command node, parameters:
Select track file: recorded track
Debug speed (%): 0 ~ 100, default value is 25
Track mode: path point/control point

Chart 10.5-16 Track J command code block
10.5.17. Track reproduction command
Drag the “Track reproduction command” code block to enter the graphical editing interface workspace.
In this command, the user first needs to have a recorded track.
When programming, first use the point-to-point command to reach the corresponding track starting point, then select the track in the track reproduction command, select the smooth track, and set the debugging speed. The track loading command is mainly used to pre-read the track file and extract it into a track command for better application in conveyor belt tracking scenarios.
“Trajectory Reproduction” command node, parameters:
Trajectory name: recorded trajectory
Smooth trajectory: No/Yes
Debug speed (%): 0 ~ 100, default value is 25

Chart 10.5-17 Trajectory Reproduction Command Code Block
10.5.18. DMP Command
Drag the “DMP Command” code block to enter the graphical editing interface workspace.
DMP is a method of trajectory imitation learning, which requires planning the reference trajectory in advance. In the command editing interface, select the teaching point as the new starting point, click “Add” and “Apply” to save the command. The specific path of DMP is a new trajectory that imitates the reference trajectory with a new starting point.
“DMP” command node, parameters:
Point name: teaching point
Debug speed (%): 0 ~ 100, default value is 100

Chart 10.5-18 DMP command code block
10.5.19. Tool conversion instruction
Drag the “Tool conversion instruction” code block to enter the graphical editing interface workspace.
Select the tool coordinate system to be automatically converted, click “Add” and “Apply” to save the instruction. The tool coordinate system are automatically converted.
“Tool conversion” instruction node, parameters:
Tool coordinate system: Tool coordinate system table

Figure 10.5-19 Tool conversion instruction code block
10.5.20. Workpiece conversion instruction
Drag the “Workpiece conversion instruction” code block to enter the graphical editing interface workspace.
Select the workpiece coordinate system to be automatically converted, the points in the workpiece coordinate system are automatically converted.
“Workpiece conversion” instruction node, parameters:
Workpiece coordinate system: Workpiece coordinate system table

Chart 10.5-20 Workpiece conversion instruction code block
10.6. Control class graphical programming commands
Control class graphical programming commands include Wait, IO and other control commands.

Figure 10.6 Control Class Graphical Programming Commands
10.6.1. Wait Command
Drag the “Wait Command” code block to enter the graphical editing interface workspace.
This command is a delay command, which is divided into four parts: “WaitMs”, “WaitDI”, “WaitMultiDI” and “WaitAI”.
“Wait” command node, parameters:
Wait time (ms): The delay waiting time unit is milliseconds, enter the number of milliseconds to wait

Figure 10.6-1 Wait command code block
“Wait DI” command node, parameters:
DI port number: Ctrl-DI0 ~ Ctrl-CI7(WaitDI,[0~15]), End-DI0 ~ End-DI1(WaitToolDI,[0~1])
Status: false/true
Maximum time (ms): 0 ~ 10000
Wait timeout processing: stop error/continue execution/keep waiting

Figure 10.6-2 Wait for DI instruction code block
“Wait for multiple DI” instruction node, parameters:
Condition: and/or
Condition selection: select the port number of the bit state to be turned on, separated by commas, such as DI0, DI1
True value corresponding port: select the port number of the true value, separated by commas, such as DI0, DI1
Maximum time (ms): 0 ~ 10000, maximum waiting time
Waiting timeout processing: stop error/continue execution/wait forever

Figure 10.6-3 Wait for multiple DI instruction code block