Skip to content

Commit b508f66

Browse files
author
Chris Wilson
committed
Robot Arm Element - Adds robot arm to storyboard.
1 parent 14c2cd1 commit b508f66

File tree

4 files changed

+146
-0
lines changed

4 files changed

+146
-0
lines changed

‎src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,3 +49,4 @@ export { MicrosdCardElement } from './microsd-card-element';
4949
export { DipSwitch8Element } from './dip-switch-8-element';
5050
export { StepperMotorElement } from './stepper-motor-element';
5151
export { HX711Element } from './hx711-element';
52+
export { RobotArmElement } from './robot-arm-element';

‎src/react-types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ import { MicrosdCardElement } from './microsd-card-element';
4848
import { DipSwitch8Element } from './dip-switch-8-element';
4949
import { StepperMotorElement } from './stepper-motor-element';
5050
import { HX711Element } from './hx711-element';
51+
import { RobotArmElement } from './robot-arm-element';
5152

5253
type WokwiElement<T> = Partial<T> & React.ClassAttributes<T>;
5354

@@ -101,6 +102,7 @@ declare global {
101102
'wokwi-dip-switch-8': WokwiElement<DipSwitch8Element>;
102103
'wokwi-stepper-motor': WokwiElement<StepperMotorElement>;
103104
'wokwi-hx711': WokwiElement<HX711Element>;
105+
'wokwi-robot-arm': WokwiElement<RobotArmElement>;
104106
}
105107
}
106108
}

‎src/robot-arm-element.stories.ts

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { html } from 'lit';
2+
import './robot-arm-element';
3+
4+
export default {
5+
title: 'Robot Arm',
6+
component: 'wokwi-robot-arm',
7+
};
8+
9+
const Template = ({
10+
sholderAngle,
11+
elbowAngle,
12+
wristAngle,
13+
gripperAngle,
14+
gripperColor,
15+
armColor,
16+
jointColor,
17+
}) =>
18+
html`<wokwi-robot-arm
19+
sholderAngle=${sholderAngle}
20+
elbowAngle=${elbowAngle}
21+
wristAngle=${wristAngle}
22+
gripperAngle=${gripperAngle}
23+
gripperColor=${gripperColor}
24+
armColor=${armColor}
25+
jointColor=${jointColor}
26+
></wokwi-robot-arm>`;
27+
28+
export const Default = Template.bind({});
29+
Default.args = {
30+
sholderAngle: 297,
31+
elbowAngle: 52,
32+
wristAngle: 56,
33+
gripperAngle: 270,
34+
gripperColor: '#eeeedd',
35+
armColor: '#ffffdd',
36+
jointColor: '#111111',
37+
};

‎src/robot-arm-element.ts

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import { html, LitElement } from 'lit';
2+
import { customElement, property } from 'lit/decorators.js';
3+
import { ElementPin } from '.';
4+
5+
@customElement('wokwi-robot-arm')
6+
export class RobotArmElement extends LitElement {
7+
/**
8+
* Angle of shoulder
9+
*/
10+
@property() sholderAngle = 297;
11+
12+
/**
13+
* Angle of elbow
14+
*/
15+
@property() elbowAngle = 52;
16+
17+
/**
18+
* Angle of wrist
19+
*/
20+
@property() wristAngle = 56;
21+
22+
/**
23+
* Angle of gripper
24+
*/
25+
@property() gripperAngle = 270;
26+
27+
/**
28+
* The color of the gripper
29+
*/
30+
@property() gripperColor = '#eeeedd';
31+
32+
/**
33+
* The color of the arm
34+
*/
35+
@property() armColor = '#ffffdd';
36+
37+
/**
38+
* The color of the joints
39+
*/
40+
@property() jointColor = '#111111';
41+
42+
readonly pinInfo: ElementPin[] = [
43+
{ name: 'PWM1', y: 195, x: 25, number: 1, signals: [{ type: 'pwm' }] },
44+
{ name: 'PWM2', y: 195, x: 30, number: 2, signals: [{ type: 'pwm' }] },
45+
{ name: 'PWM3', y: 195, x: 35, number: 3, signals: [{ type: 'pwm' }] },
46+
{ name: 'PWM4', y: 195, x: 40, number: 3, signals: [{ type: 'pwm' }] },
47+
];
48+
49+
render() {
50+
/* eslint-disable prettier/prettier */
51+
return html`
52+
<style>
53+
text {
54+
user-select: none;
55+
}
56+
</style>
57+
<svg version="1.1" width="70mm" height="52mm" viewBox="0 0 350 260" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
58+
<!-- Terminals -->
59+
<g>
60+
<rect x="29" y="243" width="28" height="7" fill="${this.armColor}"/>
61+
<rect x="32" y="250" width="1" height="9" fill="${this.jointColor}"/>
62+
<rect x="38" y="250" width="1" height="9" fill="${this.jointColor}"/>
63+
<rect x="45" y="250" width="1" height="9" fill="${this.jointColor}"/>
64+
<rect x="52" y="250" width="1" height="9" fill="${this.jointColor}"/>
65+
</g>
66+
<g transform="translate(46.71 210.57)">
67+
<!-- Shoulder -->
68+
<g transform="rotate(${this.sholderAngle})">
69+
<path transform="translate(-1.27)" d="m1-36c-19.63 0-36.04 16.39-36.04 36s16.41 36 36.04 36 98.75-9 113.12-10c14.38-1 26.03-11 26.03-26s-11.65-24-26.03-26c-14.37-2-93.49-10-113.12-10z" fill="${this.armColor}" stroke="${this.jointColor}" stroke-miterlimit="10" stroke-width="2"/>
70+
71+
<!-- Elbow -->
72+
<g transform="translate(113) rotate(${this.elbowAngle})">
73+
74+
<!-- Wrist -->
75+
<g transform="translate(98) rotate(${this.wristAngle})">
76+
<path d="m57 15c8.28-1 15-6.72 15-15s-6.72-14-15-15-45.4-6-57-6-21 9.4-21 21 9.4 21 21 21 48.72-5 57-6z" fill="${this.armColor}" stroke="${this.jointColor}" stroke-miterlimit="10" stroke-width="2"/>
77+
78+
<!-- Fingers -->
79+
<g transform="translate(69.65 10.9) rotate(-${this.gripperAngle})">
80+
<g transform="translate(38.91 -6.36) rotate(${this.gripperAngle})">
81+
<path d="m-7.5 8.54c-3.47-0.41-7-3-7-7.5s3.53-7.1 7-7.5c3.47-0.41 33.33 2.61 36.19 3.11 2.91 0.51 4.81 1.81 4.81 4.5 0 2.7-1.9 4-4.81 4.5-2.86 0.5-32.72 3.29-36.19 2.89z" fill="${this.gripperColor}" stroke="${this.jointColor}" stroke-miterlimit="10" stroke-width="2"/>
82+
</g>
83+
<path d="m36.5 8.14c3.47-0.41 7-3 7-7.5s-3.53-7.1-7-7.5c-3.47-0.41-31.33-1-36.19-1-4.87 0-8.81 3.8-8.81 8.5 0 4.69 3.94 8.5 8.81 8.5 4.86 0 32.72-0.6 36.19-1z" fill="${this.gripperColor}" stroke="${this.jointColor}" stroke-miterlimit="10" stroke-width="2"/>
84+
<circle cx="36" cy=".64" r="3.5" fill="${this.jointColor}" stroke="${this.jointColor}" stroke-miterlimit="10" stroke-width="2"/>
85+
<circle cy=".64" r="4.5" fill="${this.jointColor}" stroke="${this.jointColor}" stroke-miterlimit="10" stroke-width="2"/>
86+
</g>
87+
<g transform="translate(69.5 -10.5) rotate(${this.gripperAngle})">
88+
<g transform="translate(40.91 4.68) rotate(-${this.gripperAngle})">
89+
<path d="m-7.5 9.54c-3.47-0.41-7-3-7-7.5s3.53-7.1 7-7.5c3.47-0.41 33.33 2.61 36.19 3.11 2.91 0.51 4.81 1.81 4.81 4.5 0 2.7-1.9 4-4.81 4.5-2.86 0.5-32.72 3.29-36.19 2.89z" fill="${this.gripperColor}" stroke="${this.jointColor}" stroke-miterlimit="10" stroke-width="2"/>
90+
</g>
91+
<path d="m35.89 7.18c3.42-0.4 6.9-3 6.9-7.5s-3.48-7.09-6.9-7.5c-3.43-0.4-30.91-1-35.7-1-4.8 0-8.69 3.81-8.69 8.5 0 4.7 3.89 8.5 8.69 8.5 4.79 0 32.27-0.59 35.7-1z" fill="${this.gripperColor}" stroke="${this.jointColor}" stroke-miterlimit="10" stroke-width="2"/>
92+
<circle cx="35" cy="-.32" r="3.5" fill="${this.jointColor}" stroke="${this.jointColor}" stroke-miterlimit="10" stroke-width="2"/>
93+
<circle cy="-.32" r="4.5" fill="${this.jointColor}" stroke="${this.jointColor}" stroke-miterlimit="10" stroke-width="2"/>
94+
</g>
95+
</g>
96+
<path d="m99 21c11.6-1 21-9.4 21-21s-9.4-20-21-21-84.64-5-99-5-26 11.64-26 26 11.64 26 26 26 87.4-4 99-5z" fill="${this.armColor}" stroke="${this.jointColor}" stroke-miterlimit="10" stroke-width="2"/>
97+
<circle r="9" fill="${this.jointColor}" stroke="${this.jointColor}" stroke-miterlimit="10" stroke-width="2"/>
98+
<circle cx="98" r="8" fill="${this.jointColor}" stroke="${this.jointColor}" stroke-miterlimit="10" stroke-width="2"/>
99+
</g>
100+
<circle r="12" fill="${this.jointColor}" stroke="${this.jointColor}" stroke-miterlimit="10" stroke-width="2"/>
101+
</g>
102+
</g>
103+
</svg>
104+
`;
105+
}
106+
}

0 commit comments

Comments
 (0)