react-robotic-view

A visual robotic arm control component written in reactjs.

Features

react-robotic-view allows the user to control the movement of the arm by mouse or touch, and its internal control logic is an inverse kinematic algorithm.

Usage

Installation

yarn add react-robotic-view

Use in React

import { RoboticArmView, RoboticPalmView } from "react-robotic-view"

render() {
        return (
            <div className="demo">
                <RoboticArmView}/>
                <RoboticPalmView/>
            </div>
        )
    }

// css
.demo{
  display: grid;
  grid-template-columns: 50% 50%;
}

Open Attributes

The open attributes supported by RoboticView are shown in the table below

RoboticArmView

| Parameters | Description | Type | Available | Default | | ------------ | --------------------------------------------------------- | ------- | ----------- | ---------- | | showBorder | show canvas border | Boolean | - | false | | canvasWidth | set canvas width | Number | - | 300 | | canvasHeight | set canvas height | Number | - | 350 | | baseColor | set arm base color | String | | black | | jonitColor | set joint color | String | | brown | | leverColor | set lever color | String | | black | | endColor | set endpoint color | String | | aqua | | jointRadius | set joint radius | Number | | 10 | | baseRadius | set base radius | Number | | 40 | | leverWidth | set lever width | Number | | 15 | | isRosArm | In the case of ROS robots, the servo angle is not limited | Boolean | | false | | withLabel | show each servo current angle | Boolean | | false | | textColor | set angle text shown color | String | | #3CB371 | | fontStyle | set angle test font style | String | | 15px Arial | | ikSolution | Inverse kinematic algorithm solving approach | String | left, right | right |

RoboticPalmView

| Parameters | Description | Type | Available | Default | | ---------------- | ----------------------------- | ------- | --------- | ---------- | | showBorder | show canvas border | Boolean | - | false | | canvasWidth | set canvas width | Number | - | 300 | | canvasHeight | set canvas height | Number | - | 350 | | baseColor | set arm base color | String | | black | | jonitColor | set joint color | String | | brown | | leverColor | set lever color | String | | black | | endColor | set endpoint color | String | | aqua | | middleLeverWidth | set middle lever width | Number | | 20 | | leverWidth | set lever width | Number | | 15 | | jointRadius | set joint radius | Number | | 10 | | withLabel | show each servo current angle | Boolean | | false | | textColor | set angle text shown color | String | | green | | fontStyle | set angle test font style | String | | 15px Arial |

Change Events

• RoboticArmView

| Event name | Description | Callback parameters | | ---------------- | ------------------------------------------------------------ | ------------------------ | | onJointValueChange | Acquisition of the angle return data of the two-link robot arm | {angle1: 0 , angle2: 0} |

• RoboticPalmView

| Event name | Description | Callback parameters | | --------------- | ------------------------------------------------ | ------------------- | | onPalmValueChange | Get the angle at which the claw opens and closes | angle |