[DR]Dart platform - runProgram

How to use the Dr.Dart platform

Feb 15, 2024

Before you start, you need to have these installed

Dr.Dart-Services (+ Docker)

Dr.Dart-Platform

if you not installed yet, you can follow the steps by this URL

1. Connecting with Dart-IDE

first, you have to save your IP in Dart-Platform.

then open Dr.Dart-IDE site

Create a new project and open it.

If you successfully save your IP in the Dr.Dart-Platform, your IP is enable to select like a above image.

2. Create a componet file

In my case, I’m planning to make a robotic that moves to the music.

So add a new file(tsx) to use a child component. Because child component can be use a React hook(useState, useRef…)

<Music moduleContext={this.moduleContext} />

After that, I set up like this


import React, { useState, useRef } from 'react';
import { ModuleContext, Context, IProgramManager, logger, IDartFileSystem } from 'dart-api';
import { Box, Button, Container, Divider, List, ListItem, ListItemText, Slider, Typography } from '@mui/material';

export interface INewComponentProps {
    moduleContext: ModuleContext;
}

export default function NewComponent(props: INewComponentProps) {
    const [audioManager] = useState(new Audio());
    const [isPlaying, setIsPlaying] = useState(false);
    const [currentTrackIndex, setCurrentTrackIndex] = useState(0);
    const [savedTime, setSavedTime] = useState(0);
	return ()
}

dart-api is a library that contains the robot hooks

you can refer this API-doc

mui is the CSS library built into the Dart-platform.

you can also refer this MUI guide

And I used those useState hook for control of various state.

3. Create a DRL file

Before use runProgram hook, you need to create a program that robot use.

Good thing is now we can make a DRL file in Dart-IDE latest version! So, click add and make a DRL file.

And then you can add a commands by use Block Code or use DRL code


set_singular_handling(mode=DR_AVOID)
set_velj(vel=60.00)
set_accj(acc=100.00)
set_velx(vel1=250.000, vel2=80.63)
set_accx(acc1=1000.000, acc2=322.50)
gLoopCountRev = 0
while gLoopCountRev < 1:
    movej(pos=[33.84, -7.70, 8.26, -3.65, 5.00, 0.00])
    movec(pos1=[-73.649, -8.648, 1246.313, 30.19, 5.55, -0.04], pos2=[-75.116, -8.939, 1445.865, 30.19, 5.55, -0.04])
    movel(pos=[0.00, 34.500, 1452.500, 0.00, 0.00, 0.00 ])
    movej(pos=[33.84, -7.70, 8.26, -3.65, 5.00, 0.00])
    movec(pos1=[-73.649, -8.648, 1246.313, 30.19, 5.55, -0.04], pos2=[-75.116, -8.939, 1445.865, 30.19, 5.55, -0.04])
    movel(pos=[0.00, 34.500, 1452.500, 0.00, 0.00, 0.00 ])
    movej(pos=[33.84, -7.70, 8.26, -3.65, 5.00, 0.00])
    movec(pos1=[-73.649, -8.648, 1246.313, 30.19, 5.55, -0.04], pos2=[-75.116, -8.939, 1445.865, 30.19, 5.55, -0.04])
    movel(pos=[0.00, 34.500, 1452.500, 0.00, 0.00, 0.00 ])
    movej(pos=[33.84, -7.70, 8.26, -3.65, 5.00, 0.00])
    movec(pos1=[-73.649, -8.648, 1246.313, 30.19, 5.55, -0.04], pos2=[-75.116, -8.939, 1445.865, 30.19, 5.55, -0.04])
    movel(pos=[0.00, 34.500, 1452.500, 0.00, 0.00, 0.00 ])
    movej(pos=[33.84, -7.70, 8.26, -3.65, 5.00, 0.00])
    movec(pos1=[-73.649, -8.648, 1246.313, 30.19, 5.55, -0.04], pos2=[-75.116, -8.939, 1445.865, 30.19, 5.55, -0.04])
    movel(pos=[0.00, 34.500, 1452.500, 0.00, 0.00, 0.00 ])
    movej(pos=[33.84, -7.70, 8.26, -3.65, 5.00, 0.00])
    movec(pos1=[-73.649, -8.648, 1246.313, 30.19, 5.55, -0.04], pos2=[-75.116, -8.939, 1445.865, 30.19, 5.55, -0.04])
    movel(pos=[0.00, 34.500, 1452.500, 0.00, 0.00, 0.00 ])
    gLoopCountRev = gLoopCountRev + 1
    tp_progress_ex(gLoopCountRev, 2147483647)

After that, come back to tsx file and import it! import drlPath from '../src/UserCommand/UserCommandDRL.drl';

And create a Function that run our new program


const programManager = props.moduleContext.getSystemManager(Context.PROGRAM_MANAGER) as IProgramManager;
// run program
    const runProgram = async () => {
        const fileSystem = props.moduleContext.getSystemLibrary(Context.DART_FILE_SYSTEM) as IDartFileSystem;
        let subProgram = `from DRCF import *\r\n`;
        const drl = await fileSystem.readFile(props.moduleContext, drlPath);
        subProgram += drl;
        const result = await programManager.runProgram(subProgram, null, null, false);
        logger.debug(`Start Program Result = ${result}`);
    };

This is the way how to use runProgram hook in React.

4. Add dart-api and run it!

And you can complete rest of things


import React, { useState, useRef } from 'react';
import { ModuleContext, Context, IProgramManager, logger, IDartFileSystem } from 'dart-api';
import { Box, Button, Container, Divider, List, ListItem, ListItemText, Slider, Typography } from '@mui/material';
import drlPath from '../src/UserCommand/UserCommandDRL.drl';
export interface INewComponentProps {
    moduleContext: ModuleContext;
}
export default function NewComponent(props: INewComponentProps) {
    const [audioManager] = useState(new Audio());
    const [isPlaying, setIsPlaying] = useState(false);
    const [currentTrackIndex, setCurrentTrackIndex] = useState(0);
    const [savedTime, setSavedTime] = useState(0);

    const programManager = props.moduleContext.getSystemManager(Context.PROGRAM_MANAGER) as IProgramManager;
    const tracks = [
        {
            title: 'Track 1',
            url: 'https://p.scdn.co/mp3-preview/0ba9d38f5d1ad30f0e31fc8ee80c1bebf0345a0c',
        },
        {
            title: 'Track 2',
            url: 'https://p.scdn.co/mp3-preview/c2bca95698cc381f0a1a9111095156d15ebd4698',
        },
        // Add more tracks as needed
    ];

    const stProgram = () => {
        programManager
            .stopProgram(1)
            .then((result) => {
                if (result) logger.info('Program stoped successfully.');
                else logger.warn('Failed to stop program.');
            })
            .catch((e: Error) => {
                logger.warn(`Failed to stop program by ${e}.`);
            });
    };

    const setProgram = () => {
        if (isPlaying) {
            programManager
                .pauseProgram()
                .then((result) => {
                    if (result) {
                        logger.info('Program paused successfully.');
                    } else {
                        logger.warn('Failed to pause program.');
                    }
                })
                .catch((e: Error) => {
                    logger.warn(`Failed to pause program by ${e}.`);
                });
        } else if (savedTime) {
            programManager
                .resumeProgram()
                .then((result) => {
                    if (result) {
                        logger.info('Program resume successfully.');
                    } else {
                        logger.warn('Failed to resume program.');
                    }
                })
                .catch((e: Error) => {
                    logger.warn(`Failed to resume program by ${e}.`);
                });
        } else {
            runProgram();
        }
    };

    // run program
    const runProgram = async () => {
        const fileSystem = props.moduleContext.getSystemLibrary(Context.DART_FILE_SYSTEM) as IDartFileSystem;
        let subProgram = `from DRCF import *\r\n`;
        const drl = await fileSystem.readFile(props.moduleContext, drlPath);
        subProgram += drl;
        const result = await programManager.runProgram(subProgram, null, null, false);
        logger.debug(`Start Program Result = ${result}`);
    };

    const playPauseToggle = (index: number) => {
        if (isPlaying) {
            audioManager.pause();
            setProgram();
            setSavedTime(audioManager.currentTime);
        } else {
            setCurrentTrackIndex(index);
            audioManager.src = tracks[index].url;
            audioManager.currentTime = savedTime;
            audioManager.play();
            setProgram();
        }
        setIsPlaying(!isPlaying);
    };

    const stop = () => {
        audioManager.pause();
        audioManager.currentTime = 0;
        stProgram();
        setSavedTime(0);
        setIsPlaying(false);
    };
    return (
        <Container
            sx={{
                'width': '300px',
                'height': '100px',
            }}
            id="container_3e3f"
        >
            <div>
                <Typography
                    variant="h5"
                    gutterBottom
                    sx={{
                        'textAlign': 'center',
                    }}
                >
                    Music Player
                </Typography>
                <List>
                    {tracks.map((track, index) => (
                        <div key={index}>
                            <ListItem>
                                <ListItemText primary={track.title} />
                                <Button onClick={() => playPauseToggle(index)}>
                                    {isPlaying && currentTrackIndex == index ? 'Pause' : 'Play'}
                                </Button>
                            </ListItem>
                            <Divider />
                        </div>
                    ))}
                </List>
                <div>
                    <Button onClick={stop}>Stop</Button>
                </div>
            </div>
        </Container>
    );
}

Press the RUN button at the top right to distribute the created source code to the Build and Local environments

You can find out our new module in the platform.

[DR]Dart platform - runProgram

1. Connecting with Dart-IDE

2. Create a componet file

3. Create a DRL file

4. Add dart-api and run it!

5. Result

More articles

[ROS]run DR robot in ROS - installing note2

[ROS]run DR robot in ROS - installing note1