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.
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 projectmenu which is in the menu ofFile.
Step 3: Click on the
BlankModule Preset inModule▸User Modulemenu and click on thenextbutton.
Step 4: In the Project Setting popup, complete the following:
Fill out the spaces in the
Name,Package Name,Savelocation andDart-SDK Versionfield.For the
User Module category, chooseJog.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.tsxwhich is under the src file of the project file (com.xxxx.xxxx) to design your project will be automatically opened.
Step 6: For the display name in Dart-Platform, go to the
manifest.jsonfolder and change thenameto the Module name you want. After it, go back to theindex.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 File ▸ Save 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 Screenbelow 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.