From b508f660e26606092e3f4dd0ae59c801d6ff3713 Mon Sep 17 00:00:00 2001 From: Chris Wilson <> Date: Thu, 13 Jan 2022 22:16:19 -0600 Subject: [PATCH 1/2] Robot Arm Element - Adds robot arm to storyboard. --- src/index.ts | 1 + src/react-types.ts | 2 + src/robot-arm-element.stories.ts | 37 +++++++++++ src/robot-arm-element.ts | 106 +++++++++++++++++++++++++++++++ 4 files changed, 146 insertions(+) create mode 100644 src/robot-arm-element.stories.ts create mode 100644 src/robot-arm-element.ts diff --git a/src/index.ts b/src/index.ts index 11b4a8f..ff76c2c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -49,3 +49,4 @@ export { MicrosdCardElement } from './microsd-card-element'; export { DipSwitch8Element } from './dip-switch-8-element'; export { StepperMotorElement } from './stepper-motor-element'; export { HX711Element } from './hx711-element'; +export { RobotArmElement } from './robot-arm-element'; diff --git a/src/react-types.ts b/src/react-types.ts index d01088b..ad67739 100644 --- a/src/react-types.ts +++ b/src/react-types.ts @@ -48,6 +48,7 @@ import { MicrosdCardElement } from './microsd-card-element'; import { DipSwitch8Element } from './dip-switch-8-element'; import { StepperMotorElement } from './stepper-motor-element'; import { HX711Element } from './hx711-element'; +import { RobotArmElement } from './robot-arm-element'; type WokwiElement = Partial & React.ClassAttributes; @@ -101,6 +102,7 @@ declare global { 'wokwi-dip-switch-8': WokwiElement; 'wokwi-stepper-motor': WokwiElement; 'wokwi-hx711': WokwiElement; + 'wokwi-robot-arm': WokwiElement; } } } diff --git a/src/robot-arm-element.stories.ts b/src/robot-arm-element.stories.ts new file mode 100644 index 0000000..95ab0c4 --- /dev/null +++ b/src/robot-arm-element.stories.ts @@ -0,0 +1,37 @@ +import { html } from 'lit'; +import './robot-arm-element'; + +export default { + title: 'Robot Arm', + component: 'wokwi-robot-arm', +}; + +const Template = ({ + sholderAngle, + elbowAngle, + wristAngle, + gripperAngle, + gripperColor, + armColor, + jointColor, +}) => + html``; + +export const Default = Template.bind({}); +Default.args = { + sholderAngle: 297, + elbowAngle: 52, + wristAngle: 56, + gripperAngle: 270, + gripperColor: '#eeeedd', + armColor: '#ffffdd', + jointColor: '#111111', +}; diff --git a/src/robot-arm-element.ts b/src/robot-arm-element.ts new file mode 100644 index 0000000..744aad5 --- /dev/null +++ b/src/robot-arm-element.ts @@ -0,0 +1,106 @@ +import { html, LitElement } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { ElementPin } from '.'; + +@customElement('wokwi-robot-arm') +export class RobotArmElement extends LitElement { + /** + * Angle of shoulder + */ + @property() sholderAngle = 297; + + /** + * Angle of elbow + */ + @property() elbowAngle = 52; + + /** + * Angle of wrist + */ + @property() wristAngle = 56; + + /** + * Angle of gripper + */ + @property() gripperAngle = 270; + + /** + * The color of the gripper + */ + @property() gripperColor = '#eeeedd'; + + /** + * The color of the arm + */ + @property() armColor = '#ffffdd'; + + /** + * The color of the joints + */ + @property() jointColor = '#111111'; + + readonly pinInfo: ElementPin[] = [ + { name: 'PWM1', y: 195, x: 25, number: 1, signals: [{ type: 'pwm' }] }, + { name: 'PWM2', y: 195, x: 30, number: 2, signals: [{ type: 'pwm' }] }, + { name: 'PWM3', y: 195, x: 35, number: 3, signals: [{ type: 'pwm' }] }, + { name: 'PWM4', y: 195, x: 40, number: 3, signals: [{ type: 'pwm' }] }, + ]; + + render() { + /* eslint-disable prettier/prettier */ + return html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; + } +} From a8862a1fba7f3ec334e6288e34da8b73ce7e0b0c Mon Sep 17 00:00:00 2001 From: Chris Wilson Date: Sun, 6 Feb 2022 13:22:02 -0600 Subject: [PATCH 2/2] Makes changes from PR #119 --- src/index.ts | 2 +- src/react-types.ts | 4 +- src/robot-arm-element.stories.ts | 37 ----- src/robot-arm-element.ts | 106 --------------- src/robotic-arm-element.stories.ts | 55 ++++++++ src/robotic-arm-element.ts | 209 +++++++++++++++++++++++++++++ 6 files changed, 267 insertions(+), 146 deletions(-) delete mode 100644 src/robot-arm-element.stories.ts delete mode 100644 src/robot-arm-element.ts create mode 100644 src/robotic-arm-element.stories.ts create mode 100644 src/robotic-arm-element.ts diff --git a/src/index.ts b/src/index.ts index ff76c2c..c1c63d5 100644 --- a/src/index.ts +++ b/src/index.ts @@ -49,4 +49,4 @@ export { MicrosdCardElement } from './microsd-card-element'; export { DipSwitch8Element } from './dip-switch-8-element'; export { StepperMotorElement } from './stepper-motor-element'; export { HX711Element } from './hx711-element'; -export { RobotArmElement } from './robot-arm-element'; +export { RoboticArmElement } from './robotic-arm-element'; diff --git a/src/react-types.ts b/src/react-types.ts index ad67739..c593875 100644 --- a/src/react-types.ts +++ b/src/react-types.ts @@ -48,7 +48,7 @@ import { MicrosdCardElement } from './microsd-card-element'; import { DipSwitch8Element } from './dip-switch-8-element'; import { StepperMotorElement } from './stepper-motor-element'; import { HX711Element } from './hx711-element'; -import { RobotArmElement } from './robot-arm-element'; +import { RoboticArmElement } from './robotic-arm-element'; type WokwiElement = Partial & React.ClassAttributes; @@ -102,7 +102,7 @@ declare global { 'wokwi-dip-switch-8': WokwiElement; 'wokwi-stepper-motor': WokwiElement; 'wokwi-hx711': WokwiElement; - 'wokwi-robot-arm': WokwiElement; + 'wokwi-robotic-arm': WokwiElement; } } } diff --git a/src/robot-arm-element.stories.ts b/src/robot-arm-element.stories.ts deleted file mode 100644 index 95ab0c4..0000000 --- a/src/robot-arm-element.stories.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { html } from 'lit'; -import './robot-arm-element'; - -export default { - title: 'Robot Arm', - component: 'wokwi-robot-arm', -}; - -const Template = ({ - sholderAngle, - elbowAngle, - wristAngle, - gripperAngle, - gripperColor, - armColor, - jointColor, -}) => - html``; - -export const Default = Template.bind({}); -Default.args = { - sholderAngle: 297, - elbowAngle: 52, - wristAngle: 56, - gripperAngle: 270, - gripperColor: '#eeeedd', - armColor: '#ffffdd', - jointColor: '#111111', -}; diff --git a/src/robot-arm-element.ts b/src/robot-arm-element.ts deleted file mode 100644 index 744aad5..0000000 --- a/src/robot-arm-element.ts +++ /dev/null @@ -1,106 +0,0 @@ -import { html, LitElement } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; -import { ElementPin } from '.'; - -@customElement('wokwi-robot-arm') -export class RobotArmElement extends LitElement { - /** - * Angle of shoulder - */ - @property() sholderAngle = 297; - - /** - * Angle of elbow - */ - @property() elbowAngle = 52; - - /** - * Angle of wrist - */ - @property() wristAngle = 56; - - /** - * Angle of gripper - */ - @property() gripperAngle = 270; - - /** - * The color of the gripper - */ - @property() gripperColor = '#eeeedd'; - - /** - * The color of the arm - */ - @property() armColor = '#ffffdd'; - - /** - * The color of the joints - */ - @property() jointColor = '#111111'; - - readonly pinInfo: ElementPin[] = [ - { name: 'PWM1', y: 195, x: 25, number: 1, signals: [{ type: 'pwm' }] }, - { name: 'PWM2', y: 195, x: 30, number: 2, signals: [{ type: 'pwm' }] }, - { name: 'PWM3', y: 195, x: 35, number: 3, signals: [{ type: 'pwm' }] }, - { name: 'PWM4', y: 195, x: 40, number: 3, signals: [{ type: 'pwm' }] }, - ]; - - render() { - /* eslint-disable prettier/prettier */ - return html` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `; - } -} diff --git a/src/robotic-arm-element.stories.ts b/src/robotic-arm-element.stories.ts new file mode 100644 index 0000000..469f7ae --- /dev/null +++ b/src/robotic-arm-element.stories.ts @@ -0,0 +1,55 @@ +import { html } from 'lit'; +import './robotic-arm-element'; + +export default { + title: 'Robotic Arm', + component: 'wokwi-robotic-arm', + argTypes: { + shoulderAngle: { control: { type: 'range', min: 240, max: 360 } }, + elbowAngle: { control: { type: 'range', min: 0, max: 134 } }, + gripperAngle: { control: { type: 'range', min: 264, max: 360 } }, + wristAngle: { control: { type: 'range', min: 0, max: 100 } }, + gripperColor: { control: { type: 'color' } }, + armColor: { control: { type: 'color' } }, + jointColor: { control: { type: 'color' } }, + }, + args: { + shoulderAngle: 240, + elbowAngle: 100, + gripperAngle: 280, + wristAngle: 56, + gripperColor: '#eeeedd', + armColor: '#ffffdd', + jointColor: '#111111', + }, +}; + +const Template = ({ + shoulderAngle, + elbowAngle, + wristAngle, + gripperAngle, + gripperColor, + armColor, + jointColor, +}) => + html``; + +export const Default = Template.bind({}); +Default.args = { + shoulderAngle: 297, + elbowAngle: 52, + wristAngle: 56, + gripperAngle: 270, + gripperColor: '#eeeedd', + armColor: '#ffffdd', + jointColor: '#111111', +}; diff --git a/src/robotic-arm-element.ts b/src/robotic-arm-element.ts new file mode 100644 index 0000000..f064e5b --- /dev/null +++ b/src/robotic-arm-element.ts @@ -0,0 +1,209 @@ +import { html, LitElement } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { ElementPin } from '.'; +import { GND, VCC } from './pin'; + +@customElement('wokwi-robotic-arm') +export class RoboticArmElement extends LitElement { + /** + * Angle of shoulder + */ + @property() shoulderAngle = 297; + + /** + * Angle of elbow + */ + @property() elbowAngle = 52; + + /** + * Angle of wrist + */ + @property() wristAngle = 56; + + /** + * Angle of gripper + */ + @property() gripperAngle = 270; + + /** + * The color of the gripper + */ + @property() gripperColor = '#eeeedd'; + + /** + * The color of the arm + */ + @property() armColor = '#ffffdd'; + + /** + * The color of the joints + */ + @property() jointColor = '#111111'; + + readonly pinInfo: ElementPin[] = [ + { name: 'PWM1', y: 195, x: 25, number: 1, signals: [{ type: 'pwm' }] }, + { name: 'PWM2', y: 195, x: 30, number: 2, signals: [{ type: 'pwm' }] }, + { name: 'PWM3', y: 195, x: 35, number: 3, signals: [{ type: 'pwm' }] }, + { name: 'PWM4', y: 195, x: 40, number: 3, signals: [{ type: 'pwm' }] }, + { name: 'VCC', y: 195, x: 44.5, number: 4, signals: [VCC()] }, + { name: 'GND', y: 195, x: 49, number: 5, signals: [GND()] }, + ]; + + render() { + const { elbowAngle, wristAngle, shoulderAngle, gripperAngle } = this; + return html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; + } +}