Skip to main content
Skip table of contents

Visual Scripting

Visual Scripting is a tool in Dart-IDE that uses a graphical interface to help the developer create programs based on visual representations of logic rather than writing it out in the required language syntax.

How to open the visual scripting panel?

  • Step 1. Open Dart-IDE

Access: https://ide.drdart.io

  • Step 2. Open your project

Document - Dar-IDE - DRL Generator - Open project
  • Step 3. Add the file UI.tsx(File name doesn’t matter). It will show you Code Editor and UI Preview.

You must use the Visual Scripting function after creating separate *.tsx file.

  • Step 4. To activate Visual Scripting in UI.tsx, add and save the Button Component to the UI Preview .

  1. Select UI.tsx file in the EXPLORER window.

  2. Activate VISUAL SCRIPTING window by clicking the Visual Scripting checkbox.

  3. Select Button in the COMPONENT PALETTE window by mouse, and drag & drop it to the UI Preview window.

  4. Click the Save button at the bottom of the Visual Scripting window. Then, UI.visualScripting.ts file is automatically created. This file is only used internally, and the user does not need to edit it.

If you open other file .tsx or create new one, its own Visual Scripting panel will be shown.

Vice versa, when you turn back to the current file .tsx , The Current Visual Scripting panel will be shown.

  • Step 5. To display UI tsx screen in the Index.tsx screen, replace the code within the Index.tsx to the following code.

Note.

When released, we plan to provide the function that allows you to create modules only with Visual Scripting without any code modifications.

JS
import {
    BaseModule,
    Context,
    IDartFileSystem,
    IProgramManager,
    Message,
    ModuleScreen,
    ModuleScreenProps,
    System,
} from 'dart-api';
import React from 'react';
import { ThemeProvider } from '@mui/material/styles';
import { getDBManager, runAppDrl } from './drlUtil';
import NewComponent from './UI';

// IIFE for register a function to create an instance of main class which is inherited BaseModule.
(() => {
    System.registerModuleMainClassCreator((packageInfo) => new Module(packageInfo));
})();
class Module extends BaseModule {
    getModuleScreen(componentId: string) {
        if (componentId === 'MainScreen') {
            return MainScreen;
        }
        return null;
    }
}
class MainScreen extends ModuleScreen {
    constructor(props: ModuleScreenProps) {
        super(props);
    }
    render() {
        return (
            <ThemeProvider theme={this.systemTheme}>
                {/* Put this code in this location*/}
                <NewComponent context={this.moduleContext} />
            </ThemeProvider>
        );
    }
}

The added code in the default template is as follows.

  • Added code in order to load NewComponent of UI.tsx from the top of the text

JS
import NewComponent from './UI';
  • Code that added NewComponent component inside render() within the MainScreen Class

JS
<ThemeProvider theme={this.systemTheme}>
    {/* Put this code in this location*/}
    <NewComponent context={this.moduleContext} />
</ThemeProvider>

Now in UI.tsx, you can compose the UI Component placement and Visual Scripting. In the Index.tsx screen (start screen), the same screen as the screen configured in UI.tsx will be displayed.

Types of Component in Visual Scripting

1) Basic Component Node

Component

1

Accordion View

2

Alert

3

Button

4

Checkbox

5

CircularProgress

6

Dialog

7

Fab

8

LinearProgress

9

Radio

10

RadioGroup

11

Select

12

Slider

13

Snackbar

14

Switch

15

Tab

16

TextField

17

ToggleButton

18

ToggleButtonGroup

19

Tooltip

Refer to this link for further information: Basic Component Node.

2) User Component Node

Component

1

3D Simulator View

2

Get Pose

3

Move To

4

Joint Jog View

5

Task Jog View

6

Joint Pose Control

7

Task Pose Control

8

Digital Input Monitoring

9

Digital Output Test Button

10

Analog Input Monitoring

11

Analog Output Test Button

12

Robot Pose Monitoring

Refer to this page for further information: User Component Node

3) Logic Component

Component Node

1

If Node

2

Switch Node

3

Looping Node

Refer to this link for further information: Logic Component Node

4) Read & Write Data Component Node

Component

1

Data Mapping Node

2

State Node

3

Customer Node

Refer to this link for further information: Read & Write Data Component Node

5) API Component Node

Component

1

API Node: getCurrentPos()

2

API Node: getUserCoordinate()

3

API Node: moveStop()

4

API Node: moveJoint()

5

API Node: moveJointPosH2R()

6

API Node: getDigitalInput()

7

API Node: getDigitalOutput()

8

API Node: getAnalogInput()

Refer to this link for further information: API Node

Articles

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.