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