RoboticView

A visual robotic arm control component written in Vuejs, with Vue2 support only.

Features

RoboticView 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

npm i robotic-view --S

Use in Vue

<template>
  <div class="demo">
    <robotic-arm-view />
    <robotic-palm-view />
  </div>
</template>

<script>
import { RoboticArmView, RoboticPalmView } from "robotic-view"
export default {
  name: 'robotic-view-demo',
  components: {RoboticArmView, RoboticPalmView }
}
</script>

<style scoped>
.demo{
  display: grid;
  grid-template-columns: 50% 50%;
}
</style>

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
xTranslation	The overall offset of the control to the X-axis	Number		0
yTranslation	The overall offset of the control to the Y-axis	Number		0
isUpperArm	Whether it is a three-link robot arm	Boolean	true, false	false
upperAngle	In the case of a three-link robot arm, the angle between the last link and the X-axis is precisely the parameter that needs to be set in order for the three-link robot arm to do the inverse kinematic calculation	Number		45
scale	Scaling factor to scale the overall control	Number		1

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
xTranslation	The overall offset of the control to the X-axis	Number		0
yTranslation	The overall offset of the control to the Y-axis	Number		0
scale	Scaling factor to scale the overall control	Number		1

Change Events

• RoboticArmView

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

• RoboticPalmView

Event name	Description	Callback parameters
palmValueChange	Get the angle at which the claw opens and closes	angle