Quick Start

This chapter will introduce you to the development process of the Dobot+ ecosystem accessories, including project resource structure and related concepts.

Installation Steps

Please follow these steps to install the developer tools.

1. Install the Developer Tools
   Execute the following command to install the Dobot+ toolkit:

   npm install -g dobot-plus-toolkit 

2. Verify Installation
   After successful installation, the system will register a command-line tool named dpt. You can check the available commands and options using the following command:

   $ dpt
   Usage: dpt [options] [command]
   
   Dobot plugin toolkit
   
   Options:
     -v, --version    output the version number
     -h, --help       display help for command
   
   Commands:
     create           create a new plugin
     dev [options]
     lua              run lua scripts
     gui [options]    configure the project with web GUI
     build [options]  build plugin for production
     help [command]   display help for command

Creating a Plugin

To create a new plugin folder, execute the following command:

dpt create

This command will prompt the developer to provide the following information:

• Plugin Name: The plugin name must not be the same as any subfolder in the current directory.
• Description (optional): Default is empty.
• Version Number: The default value is 1-0-0-test. The version number should follow the format [major]-[minor]-[patch]-[status], connected by -. The status should be represented in lowercase letters; it is recommended to use fields like test, stable, or rc.
• Real Device IP Address: The default is 192.168.5.1, which can be changed later during debugging.

After completing the required information as prompted, the tool will create a folder named as specified by the developer, containing the necessary source code templates for plugin development and automatically installing required dependencies.

Successful Creation Example

When the plugin is successfully created, you will see information similar to the following:

 $ dpt create
? Please input plugin name
 my-plugin
? Please input plugin description This is a description
? Please input plugin version 1-0-0

Packages: +345
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 346, reused 343, downloaded 2, added 345, done

dependencies:
+ antd 5.20.1
+ axios 1.7.3
+ i18next 23.12.3
+ pubsub-js 1.9.4
+ react 18.3.1
+ react-dom 18.3.1
+ react-i18next 15.0.1
+ react-redux 9.1.2
+ redux 5.0.1

devDependencies:
+ @types/node 20.14.15 (22.2.0 is available)
+ @types/pubsub-js 1.8.6
+ @types/react 18.3.3
+ @types/react-dom 18.3.0
+ @types/react-redux 7.1.33
+ @typescript-eslint/eslint-plugin 7.18.0 (8.1.0 is available)
+ @typescript-eslint/parser 7.18.0 (8.1.0 is available)
+ add 2.0.6
+ css-loader 7.1.2
+ eslint 8.57.0 (9.9.0 is available)
+ eslint-plugin-react-hooks 4.6.2
+ eslint-plugin-react-refresh 0.4.9
+ postcss-loader 8.1.1
+ sass 1.77.8
+ sass-loader 16.0.0
+ style-loader 4.0.0
+ ts-loader 9.5.1
+ typescript 5.5.4
+ url-loader 4.1.1
+ webpack 5.93.0

Done in 24.3s

If there are any issues during the installation process, the developer can enter the newly created plugin folder in the current directory and manually install the required dependencies.

npm install

⚠️ During the installation process, the pnpm installation steps will be executed automatically; please allow this operation. Warnings that appear regarding certain dependencies are normal; the actual success of the initialization will be based on the final log.

File Structure

The Dobot+ ecosystem accessories are divided into three main modules: plugin installation interface, graphical programming blocks, and script programming instructions. All are configured using config.json, and the system supports internationalization and quick navigation features.

my-plugin
├── .dobot # Built-in methods, components, lua scripts, etc.
├── .vscode # VSCode configuration files
├── Resources # Resource folder
│   ├── document 
│   │   └── config.json
│   ├── i18n # Internationalization resources
│   │   ├── client # Translation resources for block programming, script programming, and plugin display on the client
│   │   │   ├── de.json # German
│   │   │   ├── en.json # English
│   │   │   ├── es.json # Spanish
│   │   │   ├── hk.json # Traditional Chinese
│   │   │   ├── ja.json # Japanese
│   │   │   ├── ko.json # Korean
│   │   │   ├── ru.json # Russian
│   │   │   └── zh.json # Chinese
│   │   └── plugin # Internationalization translation resources for the plugin UI
│   │       ├── de.json
│   │       ├── en.json
│   │       ├── es.json
│   │       ├── hk.json
│   │       ├── ja.json
│   │       ├── ko.json
│   │       ├── ru.json
│   │       └── zh.json
│   └── images
│       └── pallet.svg
├── configs # Configuration files
│   ├── Blocks.json  # Configuration file for block programming
│   ├── Main.json    # Plugin information configuration file
│   ├── Scripts.json # Configuration file for function programming
│   └── Toolbar.json # Toolbar configuration file
├── dpt.json # Controller configuration file for debugging
├── lua # Lua script folder for the controller
│   ├── daemon.lua  # Main process
│   ├── httpAPI.lua # Process for responding to HTTP requests
│   ├── userAPI.lua # External interfaces for script programming and block programming
│   └── utils # Lua utility functions
│       ├── await485.lua # Tools for using the 485 channel
│       ├── mqtt.lua # MQTT connection tools
│       ├── num_convert.lua # Numerical calculation tools
│       ├── util.lua # General utility tools
│       └── variables.lua # Variable module
├── package.json
├── pnpm-lock.yaml
├── tsconfig.json
└── ui # Plugin UI interface
    ├── Blocks.tsx # Block dialog page
    ├── Main.tsx # Plugin main page
    └── Toolbar.tsx # Plugin toolbar

• The Resources folder mainly stores static resources, including but not limited to images, videos, and international translation resources. Developers can add new resources to this folder as needed.
• The lua folder stores Lua scripts. After the plugin installation is complete, the controller uses Lua scripts to control the robotic arm and end-effector.
  • daemon.lua - The main process; after the plugin is installed, the main Lua process will be automatically invoked to execute the programs in this script.
  • httpAPI.lua - The HTTP module; the GUI sends data to the controller via POST requests, and the controller calls the corresponding methods in the HTTP module to control the robotic arm and end-effector.
  • userAPI.lua - Corresponds to the functionalities of script programming and block programming; methods in this module are called based on relevant configurations during script and block programming.
  • utils -
    • await485.lua - The robotic arm communicates with the end-effector through the 485 channel. When communicating, the 485 channel may be occupied, which can lead to data transmission or reading failures. This module encapsulates lock operations for the 485 channel to read and write data.
    • mqtt.lua - A tool for establishing MQTT connections for the controller to push messages to the host computer.
    • num_convert.lua - A tool for numerical conversion.
    • tcp.lua - A tool for establishing TCP connections between the robotic arm and end-effector.
    • util.lua - General utility functions.
    • variables.lua - Definitions of constants and variables.

Development and Debugging

When developing a plugin, it is necessary to plan the functionalities that the plugin installation interface should provide, and then organize the interface functionality. The development of the Dobot+ ecosystem accessory pages uses the React framework for front-end development, while the interface development uses Lua.

During the development and debugging phase, the dpt command must be run in the plugin project folder. Use the cd command to navigate to the corresponding plugin project folder:

# For example, cd c:/users/username/testPlugin
cd <plugin project path>

Step 1: Main Control Interface

• Develop the plugin's main control interface in the ui/Main.tsx file.
• Configure the basic information that needs to be displayed on the plugin installation interface in the configs/Main.json file, including the plugin name, version number, and description.

During the page development, you can use the following command for style adjustments and event binding:

dpt dev

The output will be as follows (some content omitted):

dpt dev
Starting server...
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.111.51:8080/
<i> [webpack-dev-server] Content not from webpack is served from 
...
...
webpack 5.93.0 compiled successfully in 7147 ms

Wait for the page to compile. Click the Preview|Debug button for the page you want to debug to enter the corresponding preview page.

Step 2: Plugin and Controller Communication

The navigation bar and plugin control interface communicate with the controller via the HTTP protocol. Upon receiving the software's HTTP request, the controller looks for the corresponding plugin and specific function based on the request URL and executes that function.

For example:

• When a button is clicked in the UI, it sends a request: http://192.168.5.1:22001/pluginName/testMethod.
• Upon receiving the HTTP request, the host computer looks up the installed plugins in the controller using pluginName and finds the function named testMethod in the lua/httpAPI.lua file of that plugin.
• Once the testMethod function is correctly located, the controller executes the Lua code within that function.
• If the function has a return value, it will send the return value back to the UI as an HTTP response.

Configure Graphical Programming Blocks

Step 1: Configure Blocks

Configure the relevant information for block programming in the configs/Blocks.json file of the plugin project. For specific configuration items, please refer to the Block Configuration Section.

Step 2: Block Scripts

In block programming, each block module needs to execute certain Lua code. Users can write their own code or use the methods provided in the plugin.

For example:

In the lua/userAPI.lua file, there is an OnRegist method. This function will execute after the plugin is installed and will expose certain functions for block and script programming modules.

function userApiModule.OnRegist()
    EcoLog(" --- OnRegist ....  --- ")
    -- 0. Export interfaces
    local isErr = ExportFunction("test", userApiModule.demoMethod1) or
        ExportFunction("demo", userApiModule.demoMethod2) or
        ExportFunction("example", userApiModule.demoMethod3)
    -- 1. Error handling       
    if isErr then
        EcoLog(" --- ERR to  register .... --- ", isErr)
        dobotTool.SetError(0)
    end
end

In the code above:

• The function demoMethod1 from the userApiModule module is exposed as a function named test.
• The function demoMethod2 from the userApiModule module is exposed as a function named demo.
• The function demoMethod3 from the userApiModule module is exposed as a function named example.

In the block programming configuration, under the block_code field, you can use the functions named test, demo, and example.

Configure Script Programming

Step 1: Configure Commands

Configure command parameters in the configs/Scripts.json file of the plugin project.

Refer to the Script Command Configuration Parameters to learn how to generate command configurations.

Multilingual Support

Internationalization content is divided into two parts:

• Resources/i18n/client: Translations for scenarios where the plugin is used on the client side, including plugin descriptions, block translations, script programming translations, etc.
• Resources/i18n/plugin: Internationalization translations for the control page after the plugin is installed.

To add multilingual translations, locate the Resources/i18n/client directory and configure the language packs accordingly.

For example, for Chinese and English translations:

• In Resources/i18n/client/zh.json, add under the config field:

  {
    "config": {
      "tr_description": "扩展IO插件"
    }
  }

• In Resources/i18n/client/en.json, add under the config field:

  {
    "config": {
      "tr_description": "Extended IO plugin"
    }
  }

• In configs/Main.json, use the following configuration:

  {
    "name": "EXTIO",
    "version": 1,
    "description": "%{tr_description}"
  }

Using the method above, the corresponding translation language will be displayed based on the language setting of the DobotStudio Pro software interface.

Note:

If multilingual support is used, translations for at least Simplified Chinese and English must be configured, with English being the default display language.

Build and Use

Build the Plugin

After completing the development, debugging, and optimization of the plugin, you can execute the final build process by running:

dpt build

Once the program executes successfully, a dist folder and an output folder will appear in the current directory:

• The dist folder contains the plugin code after this build, allowing developers to check the build results.
• The output folder contains the compressed zip file, with the filename format <plugin_name>-<version_number>.zip, which is the actual plugin used for import on the client side.

Using the Plugin

• Navigation Bar Entry
  

• Importing the Plugin
  

  Plugins with the same name need to be uninstalled before importing an already installed plugin.

• Select Plugin Zip Package
  

  The plugin zip package is a compressed file in zip format, and the naming format is:
  <plugin_name>_v<major_version>-<minor_update_version>-<fix_version>-<version_status: test, stable, rc>.zip