robotic-view

1.0.3 • Public • Published

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

Package Sidebar

Install

npm i robotic-view

Weekly Downloads

1

Version

1.0.3

License

MIT

Unpacked Size

69.6 kB

Total Files

3

Last publish

Collaborators

  • ceoifung