![[DR]Dart platform - runProgram](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-02-15T14%3A35%3A03.197Z-abffe70c-c821-4ba2-ab59-ea2dde27674d&w=3840&q=75)
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 hooksyou 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.
5. Result
Share article