Contents
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
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F09535c88-7789-4820-9158-4ae62342203e%252F32691648-89b3-4569-8128-35f4e73f8d2a%252FUntitled.png%3Ftable%3Dblock%26id%3D10e05c0e-bba9-4855-a2be-9a41ee6302ad%26cache%3Dv2&w=3840&q=75)
first, you have to save your IP in Dart-Platform.
then open Dr.Dart-IDE site
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F09535c88-7789-4820-9158-4ae62342203e%252Ff50f5578-f0b0-476d-b2ee-ee4eccc52f6b%252FUntitled.png%3Ftable%3Dblock%26id%3D9400df70-fe87-4e78-8867-22a8ab26ffc3%26cache%3Dv2&w=3840&q=75)
Create a new project and open it.
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F09535c88-7789-4820-9158-4ae62342203e%252Fe1e00cf8-9add-48b1-8aaf-cc00c1fde020%252FUntitled.png%3Ftable%3Dblock%26id%3Dea315923-d508-488c-9456-cabbc3ca9f0f%26cache%3Dv2&w=3840&q=75)
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.
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F09535c88-7789-4820-9158-4ae62342203e%252F6d4c9dcf-f07d-4f6c-8abf-ef6a8fdea578%252FUntitled.png%3Ftable%3Dblock%26id%3D432cc54c-04ce-41e0-b615-f980822c9052%26cache%3Dv2&w=3840&q=75)
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.
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F09535c88-7789-4820-9158-4ae62342203e%252Fcac42ca7-fc6e-43eb-87e0-f2205637a39d%252FUntitled.png%3Ftable%3Dblock%26id%3D624b39bd-4ecc-4b69-a701-6dee53e0fbc7%26cache%3Dv2&w=3840&q=75)
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
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F09535c88-7789-4820-9158-4ae62342203e%252Fbab98454-5ab6-4e90-91d6-437385c740d9%252FUntitled.png%3Ftable%3Dblock%26id%3D2572b62a-faef-49c8-bf0c-6106e4d692e4%26cache%3Dv2&w=3840&q=75)
You can find out our new module in the platform.
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F09535c88-7789-4820-9158-4ae62342203e%252F00580a40-c3df-4ebd-94db-b2d54814cc67%252FUntitled.png%3Ftable%3Dblock%26id%3D9bc6df54-52bb-48da-a682-45150b7b6dad%26cache%3Dv2&w=3840&q=75)
5. Result
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F09535c88-7789-4820-9158-4ae62342203e%252F70c3ec1f-84ef-4ab9-ba4c-5e64295a216d%252FScreen_Recording_2024-02-15_at_18.30.57.gif%3Ftable%3Dblock%26id%3D880702d2-8472-44ac-9fe4-b5ffe580d6af%26cache%3Dv2&w=750&q=75)
Share article