1.0.3 • Published 1 year ago
robotic-view v1.0.3
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 --SUse 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 |