1.0.8 • Published 3 years ago
react-robotic-view v1.0.8
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 |