Skip to main content
Skip table of contents

Create your first Module

In this page, we will have a tutorial in both video and document. With both, you might learn easily how to create a module. This is a short Tutorial video for creating your first Jog module. For more detailed tutorial, keep reading this page which has more information and descriptions that you can easily follow.

https://youtu.be/sf6-cCfI92I

This is an example of Jog module. In this page we will make this same module by following some easy steps.

Result Project of the Tutorial in Dart-IDE

Result Module of the Tutorial in Dart-Platform

Note

For more understanding of the ecosystem of Dart-Suite, See the What is Dart-Suite?.

1. Create a new project

To make a module, you need to create a new project for in Dart-IDE first.

  • Step 1: Access to Dart-IDE (https://ide.drdart.io)

  • Step 2: Click on the New project menu which is in the menu of File.

  • Step 3: Click on the Blank Module Preset in ModuleUser Module menu and click on the next button.

  • Step 4: In the Project Setting popup, complete the following:

    • Fill out the spaces in the Name, Package Name, Save location and Dart-SDK Version field.

    • For the User Module category, choose Jog.

    • Click Finish.

Tips

How to select a module category?

  • Process: It is designed to sequence tasks and execute completed tasks effectively for only one module.

    • e.g. Palletizing, Machine tending Module

  • Task Editor: A task-managing module capable of managing and executing tasks, akin to Doosan Robotics' Task Editor module.

    • e.g. Task editor, Code editor Module

  • Device Setting: A comprehensive module providing the UI for configuring device settings, incorporating user commands for For easy the device use in the Task Editor.

    • e.g. Gripper Module

  • User Command: A versatile module allowing users to add command blocks in the Task Editor, including features from older versions such as WCI and Skill (V2.X). It is characterized by not displaying the module's main screen and icon on the Home screen.

    • e.g. Custom move command Module

  • Jog: A practical module enabling the manual operation of robots.

    • e.g. Custom jog Module

  • Dashboard: A dynamic module for monitoring a variety of values.

    • e.g. Cocktail, Ice cream, Smart factory Module

  • Etc: etc.

What is the package name?

Usually, the Package Name is composed of 3 parts (com . company name . your module name) with three dots that separate these parts. The first part is freestyle so that you can write any names, acronyms, etc. This may help you remember or distinguish the package from other modules. The middle part is usually for your company name. The last part is for your module name which you have already entered in the Name field. By following the form, for example, the Package Name is com.doosan.palletizing.

  • Step 5: After processing, the index.tsx which is under the src file of the project file (com.xxxx.xxxx) to design your project will be automatically opened.

Document - Guides - Beginner's Guide - Create your first module - index.tsx file
  • Step 6: For the display name in Dart-Platform, go to the manifest.json folder and change the name to the Module name you want. After it, go back to the index.tsx.

Note.

For more information on manifest.json, refer to the page Manifest.json.

Shortcut - When you code your module,

Be sure to manually click FileSave or Ctrl+S because Dart-IDE cannot save the items automatically.

2. Drag & Drop the Typography Basic Component

Now the preparation for your module is ready. We will write “Hello Dr. Dart!” for the module.

  • Step 1: Uncheck the Code which is on the top right so that you can do drag & drop more easily.

  • Step 2: Also, click the Fit to Screen below the UI Preview for your appropriate sight.

  • Step 3: In the COMPONENT PALETTE, search the Basic Component called “Typography”. Finding it, drag & drop it to your UI Preview.

  • Step 4: If you dragged and dropped the typography successfully, the PROPERTY page will have a list for the setting. In the list, find the TEXT section and write “Hello Dr.Dart!” for the text.

  • Step 5: Set the Font-size as 80 px and the Font-weight as bold.

Shortcut - When you want to move within the UI Preview,

Be sure to push the Space button + Mouse Left button. The grip hand icon will appear.

3. Drag & Drop the Box Components

Now, you have done the Typography part which becomes the title in this screen.

From now on we will add some Basic Components in our project.

  • Step 1: Search “Box” Component within the BASIC COMPONENT.

  • Step 2: Drag & Drop the Box under the typography.

  • Step 3: Drag & Drop another Box component right below the first box.

4. Insert User Component into Box Component

In this part, we will insert the User Component into the boxes we have drag&dropped in the former process.

  • Step 1: First, close the dropdown menu of BASIC COMPONENT then the USER COMPONENT dropdown will appear.

  • Step 2: In the USER COMPONENT find the Simulator View Component and drag & drop it to the Box component included in the UI Preview right below the ‘Hello Dr.Dart!’.

  • Step 3: Next, find another USER COMPONENT named JointJogView and drag & drop it to the box next to the Simulator View Component.

  • Step 4: Finally, downsize the Width of each box to 50 % (Be aware of the unit) in SIZE Section.

Note.

Make sure you have put these USER COMPONENTS in each box. You can check the status via the COMPONENT TREE right below the COMPONENT PALETTE.

5. Insert Box Components into Stack Component

Now, we will add another BASIC COMPONENT to make the two USER COMPONENTS displayed in a row.

  • Step 1: Add the Stack Component which is included in the BASIC COMPONENT. (Place it below the typography in the UI Preview)

  • Step 2: If you see the COMPONENT TREE section, you can see or change the structure of the whole components. To change the structure, you can click the icon displayed on each component. With this function, Put the two Box Components (which include USER COMPONENT each) into the Stack component.

  • Step 3: Click the Stack component in the COMPONENT TREE again. The property will appear.

  • Step 4: In the property, you will see the DEFAULT STYLE section. Change the style to “row”, then you will see the result as below.

Finally your first module is complete!

Save the file again, and we will go to the next step for building this module.

JavaScript errors detected

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

If this problem persists, please contact our support.