From 1796961c1cb1f151eb2b9bfe9e63f607da874358 Mon Sep 17 00:00:00 2001 From: bonnyr Date: Wed, 7 Sep 2022 18:36:41 -0700 Subject: [PATCH 1/8] VID2805 Dual Stepper Element - initial commit --- src/index.ts | 1 + src/react-types.ts | 2 + src/vid2805-dual-stepper-element.stories.ts | 75 +++++++++ src/vid2805-dual-stepper-element.ts | 167 ++++++++++++++++++++ 4 files changed, 245 insertions(+) create mode 100644 src/vid2805-dual-stepper-element.stories.ts create mode 100644 src/vid2805-dual-stepper-element.ts diff --git a/src/index.ts b/src/index.ts index 6c40d20..46704ab 100644 --- a/src/index.ts +++ b/src/index.ts @@ -50,3 +50,4 @@ export { DipSwitch8Element } from './dip-switch-8-element'; export { StepperMotorElement } from './stepper-motor-element'; export { HX711Element } from './hx711-element'; export { KS2EMDC5Element } from './ks2e-m-dc5-element'; +export { VID2805DualStepperElement } from './vid2805-dual-stepper-element'; diff --git a/src/react-types.ts b/src/react-types.ts index 9be81b7..083a798 100644 --- a/src/react-types.ts +++ b/src/react-types.ts @@ -49,6 +49,7 @@ import { DipSwitch8Element } from './dip-switch-8-element'; import { StepperMotorElement } from './stepper-motor-element'; import { HX711Element } from './hx711-element'; import { KS2EMDC5Element } from './ks2e-m-dc5-element'; +import { VID2805DualStepperElement } from './vid2805-dual-stepper-element'; type WokwiElement = Partial & React.ClassAttributes; @@ -103,6 +104,7 @@ declare global { 'wokwi-stepper-motor': WokwiElement; 'wokwi-hx711': WokwiElement; 'wokwi-ks2e-m-dc5': WokwiElement; + 'wokwi-vid2805-dual-stepper': WokwiElement; } } } diff --git a/src/vid2805-dual-stepper-element.stories.ts b/src/vid2805-dual-stepper-element.stories.ts new file mode 100644 index 0000000..a6dc604 --- /dev/null +++ b/src/vid2805-dual-stepper-element.stories.ts @@ -0,0 +1,75 @@ +import { html } from 'lit'; +import './vid2805-dual-stepper-element'; +import { StepperHand } from './vid2805-dual-stepper-element'; + +export default { + title: 'VID2805 Dual Stepper', + component: 'wokwi-vid2805-dual-stepper', + argTypes: { + outerLength: { control: { type: 'range', min: 20, max: 70 } }, + outerAngle: { control: { type: 'range', min: 0, max: 360 } }, + outerColour: { control: { type: 'color' } }, + outerShape : { options: ['arrow' , 'plain', 'fancy'], control: { type: 'select'}}, + innerLength: { control: { type: 'range', min: 20, max: 70 } }, + innerAngle: { control: { type: 'range', min: 0, max: 360 } }, + innerColour: { control: { type: 'color' } }, + innerShape : { options: ['arrow' , 'plain', 'fancy'], control: { type: 'select'}}, + }, + args: { + outerLength: 20, + outerAngle: 0, + outerColour: 'grey', + outerShape: 'plain', + innerLength: 20, + innerAngle: 0, + innerColour: 'darkgrey', + innerShape: 'plain', + }, +}; + + +// .innerHand = ${new ClockHand(innerLength, innerColour, innerShape, innerAngle)} +// .outerHand = ${new ClockHand(outerLength, outerColour, outerShape, outerAngle)} + + +const Template = ({outerLength, outerAngle, outerColour, outerShape, + innerLength, innerAngle, innerColour, innerShape, +innerHand, outerHand }) => html``; + +export const Default = Template.bind({}); +Default.args = { + // outerLength: 20, + // outerAngle: 0, + // outerColour: 'grey', + // outerShape: 'plain', + // innerLength: 20, + // innerAngle: 0, + // innerColour: 'darkgrey', + // innerShape: 'plain', + + innerHand: new StepperHand(25, "red", "plain", 225), + outerHand: new StepperHand(30, "green", "plain", 270), +}; + +export const NineOclock = Template.bind({}); +NineOclock.args = { + innerHand: new StepperHand(70, "silver", "plain", 90), + outerHand: new StepperHand(60, "gold", "plain", 0), +}; + +export const SameLength = Template.bind({}); +SameLength.args = { + innerHand: new StepperHand(20, "blue", "plain", 0), + outerHand: new StepperHand(20, "green", "plain", 180), +}; diff --git a/src/vid2805-dual-stepper-element.ts b/src/vid2805-dual-stepper-element.ts new file mode 100644 index 0000000..8925318 --- /dev/null +++ b/src/vid2805-dual-stepper-element.ts @@ -0,0 +1,167 @@ +import { html, LitElement, svg } from 'lit'; +import { customElement, property} from 'lit/decorators.js'; +import { ElementPin } from '.'; + + +export type HandShape = 'arrow' | 'plain'; // | 'fancy'; + +export class StepperHand { + + /** + * length used to control hand length + */ + length : number = 25; + + /** + * colour used to paint the hand + */ + colour : string = ''; + + /** + * hand shape selects from predefined shape paths + */ + shape : HandShape = 'plain'; + + /** + * the current hand angle + */ + angle : number = 0; + + + + constructor(length = 25, colour = '', shape : HandShape = 'plain', angle = 0){ + this.angle = angle; + this.colour = colour; + this.shape = shape; + this.length = length; + } + +} + +@customElement('wokwi-vid2805-dual-stepper') +export class VID2805DualStepperElement extends LitElement { + + @property() outerHand = new StepperHand(); + @property() innerHand = new StepperHand(); + + readonly pinInfo: ElementPin[] = [ + { name: 'A1+', y: 237, x: 98, number: 1, signals: [] }, + { name: 'A1-', y: 237, x: 108, number: 2, signals: [] }, + { name: 'B1+', y: 237, x: 117, number: 3, signals: [] }, + { name: 'B1-', y: 237, x: 127, number: 4, signals: [] }, + { name: 'A2+', y: 237, x: 137, number: 5, signals: [] }, + { name: 'A2-', y: 237, x: 147, number: 6, signals: [] }, + { name: 'B2+', y: 237, x: 157, number: 7, signals: [] }, + { name: 'B2-', y: 237, x: 167, number: 8, signals: [] }, + ]; + + + readonly handMap : {[key:string] : string } = { + "outer_plain_hand" : "m0,0 c0,5,4,9,9,9,3.28,0,6.13-1.73,7.7-4.33v.03c.5-.8,1.2-1.6,2.1-2.1,.8-.5,1.8-.8,2.8-.8h${len}c1,0,1.8-.8,1.8-1.8s-.8-1.8-1.8-1.8h-${len}c-1,0-1.9-.3-2.8-.8-.8-.5-1.6-1.2-2.1-2h0c-1.56-2.64-4.43-4.4-7.74-4.4-5,0-9,4.1-9,9Zm3.5,0c0-3,2.4-5.4,5.5-5.4s5.5,2.4,5.5,5.4-2.5,5.4-5.5,5.4-5.5-2.4-5.5-5.4Z", + "outer_arrow_hand" : "m0,0 c0,5,4,9,9,9,3.89,0,7.16-2.42,8.43-5.85,.3-.58,.78-1.16,1.27-1.45,.6-.3,1.29-.4,1.99-.2,0,0,0,0,0,0h.01s.9,.2,.9,.2l34.4-1.7-34.4-1.9-.9,.3c-.7,.2-1.4,.1-2-.2-.6-.3-1.1-.8-1.3-1.5,0,0-.01,.02-.02,.02C16.13,2.41,12.89,.05,9.05,.05c-5,0-9,4-9,9Zm3.5,0c0-3.1,2.5-5.5,5.5-5.5s5.5,2.5,5.5,5.5-2.5,5.5-5.5,5.5-5.5-2.5-5.5-5.5Z", + "inner_plain_hand" : "m0,0 c 0 2.6 2.1 4.7 4.7 4.7 c 1.27 0 2.41 -0.5 3.25 -1.31 h 0 c 0.5 -0.49 1.1 -0.89 1.8 -1.19 c 0.7 -0.3 1.4 -0.4 2.1 -0.4 h ${len} c 1 0 1.8 -0.8 1.8 -1.8 s -0.8 -1.8 -1.8 -1.8 h -${len} s -0.06 0 -0.06 0 c -0.7 0 -1.5 -0.1 -2.1 -0.4 c -0.7 -0.3 -1.3 -0.7 -1.8 -1.2 h 0 c -0.84 -0.8 -1.98 -1.3 -3.24 -1.3 c -2.6 0 -4.7 2.1 -4.7 4.7 Z m 2.7 0 c 0 -1.1 0.9 -2 2 -2 s 2 0.9 2 2 s -0.9 2 -2 2 s -2 -0.9 -2 -2 Z", + "inner_arrow_hand" : "m0,0 c0,2.6,2.1,4.7,4.7,4.7,1.37,0,2.59-.59,3.44-1.52v.02c.7-.7,1.5-1.2,2.5-1.5s2-.3,2.9-.1h-.04l.9,.2,86.5-1.8-86.5-1.8-.9,.2h.04c-1,.2-2,.2-2.9-.1-1-.3-1.8-.8-2.5-1.5v.02c-.86-.93-2.08-1.52-3.44-1.52-2.6,0-4.7,2.1-4.7,4.7Zm2.7,0c0-1.1,.9-2,2-2s2,.9,2,2-.9,2-2,2-2-.9-2-2Z", + } + + + render() { + + const x = 112.3; // x location of shaft point + const y = 50; // y location of shaft point + const innerOff = 4.7; // offset to center of inner hand's ring + const outerOff = 9; // offset to center of outer hand's ring + let trY = 0; + + let inner_svg = this.handMap['inner_' + this.innerHand.shape + '_hand']; + let outer_svg = this.handMap['outer_' + this.outerHand.shape + '_hand']; + + // todo: validate hands + + // replace length from args + if (this.innerHand.length > 70) { + this.innerHand.length = 70; + } + if (this.outerHand.length > 70) { + this.outerHand.length = 70; + } + + inner_svg = inner_svg.replaceAll("${len}", this.innerHand.length.toString()); + outer_svg = outer_svg.replaceAll("${len}", this.outerHand.length.toString()); + + const ml = Math.max(this.innerHand.length, this.outerHand.length); + if (ml > 30) { + trY = ml - 30; + } + + return html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; + } +} + + + + + +/** + * + */ + + From c60938dafbc4e28aab7ffeab14814da40ac33b00 Mon Sep 17 00:00:00 2001 From: bonnyr Date: Fri, 9 Sep 2022 22:31:23 -0700 Subject: [PATCH 2/8] fix: change replaceAll to split/join to allow supporting all browsers --- src/vid2805-dual-stepper-element.stories.ts | 4 ++-- src/vid2805-dual-stepper-element.ts | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/vid2805-dual-stepper-element.stories.ts b/src/vid2805-dual-stepper-element.stories.ts index a6dc604..2999671 100644 --- a/src/vid2805-dual-stepper-element.stories.ts +++ b/src/vid2805-dual-stepper-element.stories.ts @@ -58,8 +58,8 @@ Default.args = { // innerColour: 'darkgrey', // innerShape: 'plain', - innerHand: new StepperHand(25, "red", "plain", 225), - outerHand: new StepperHand(30, "green", "plain", 270), + innerHand: new StepperHand(25, "red", "arrow", 225), + outerHand: new StepperHand(30, "green", "arrow", 270), }; export const NineOclock = Template.bind({}); diff --git a/src/vid2805-dual-stepper-element.ts b/src/vid2805-dual-stepper-element.ts index 8925318..f994185 100644 --- a/src/vid2805-dual-stepper-element.ts +++ b/src/vid2805-dual-stepper-element.ts @@ -58,9 +58,9 @@ export class VID2805DualStepperElement extends LitElement { readonly handMap : {[key:string] : string } = { "outer_plain_hand" : "m0,0 c0,5,4,9,9,9,3.28,0,6.13-1.73,7.7-4.33v.03c.5-.8,1.2-1.6,2.1-2.1,.8-.5,1.8-.8,2.8-.8h${len}c1,0,1.8-.8,1.8-1.8s-.8-1.8-1.8-1.8h-${len}c-1,0-1.9-.3-2.8-.8-.8-.5-1.6-1.2-2.1-2h0c-1.56-2.64-4.43-4.4-7.74-4.4-5,0-9,4.1-9,9Zm3.5,0c0-3,2.4-5.4,5.5-5.4s5.5,2.4,5.5,5.4-2.5,5.4-5.5,5.4-5.5-2.4-5.5-5.4Z", - "outer_arrow_hand" : "m0,0 c0,5,4,9,9,9,3.89,0,7.16-2.42,8.43-5.85,.3-.58,.78-1.16,1.27-1.45,.6-.3,1.29-.4,1.99-.2,0,0,0,0,0,0h.01s.9,.2,.9,.2l34.4-1.7-34.4-1.9-.9,.3c-.7,.2-1.4,.1-2-.2-.6-.3-1.1-.8-1.3-1.5,0,0-.01,.02-.02,.02C16.13,2.41,12.89,.05,9.05,.05c-5,0-9,4-9,9Zm3.5,0c0-3.1,2.5-5.5,5.5-5.5s5.5,2.5,5.5,5.5-2.5,5.5-5.5,5.5-5.5-2.5-5.5-5.5Z", + "outer_arrow_hand" : "m 0 0 c 0 5 4 9 9 9 c 3.89 0 7.16 -2.42 8.43 -5.85 c 0.3 -0.58 0.78 -1.16 1.27 -1.45 c 0.6 -0.3 1.29 -0.4 1.99 -0.2 c 0 0 0 0 0 0 h 0.01 s 0.9 0.2 0.9 0.2 l ${len} -1.7 l -${len} -1.9 l -0.9 0.3 c -0.7 0.2 -1.4 0.1 -2 -0.2 c -0.6 -0.3 -1.1 -0.8 -1.3 -1.5 c 0 0 -0.01 0.02 -0.02 0.02 c -1.38 -3.72 -4.38 -5.72 -8.38 -5.72 c -5 0 -9 4 -9 9 Z m 3.5 0 c 0 -3.1 2.5 -5.5 5.5 -5.5 s 5.5 2.5 5.5 5.5 s -2.5 5.5 -5.5 5.5 s -5.5 -2.5 -5.5 -5.5 Z", "inner_plain_hand" : "m0,0 c 0 2.6 2.1 4.7 4.7 4.7 c 1.27 0 2.41 -0.5 3.25 -1.31 h 0 c 0.5 -0.49 1.1 -0.89 1.8 -1.19 c 0.7 -0.3 1.4 -0.4 2.1 -0.4 h ${len} c 1 0 1.8 -0.8 1.8 -1.8 s -0.8 -1.8 -1.8 -1.8 h -${len} s -0.06 0 -0.06 0 c -0.7 0 -1.5 -0.1 -2.1 -0.4 c -0.7 -0.3 -1.3 -0.7 -1.8 -1.2 h 0 c -0.84 -0.8 -1.98 -1.3 -3.24 -1.3 c -2.6 0 -4.7 2.1 -4.7 4.7 Z m 2.7 0 c 0 -1.1 0.9 -2 2 -2 s 2 0.9 2 2 s -0.9 2 -2 2 s -2 -0.9 -2 -2 Z", - "inner_arrow_hand" : "m0,0 c0,2.6,2.1,4.7,4.7,4.7,1.37,0,2.59-.59,3.44-1.52v.02c.7-.7,1.5-1.2,2.5-1.5s2-.3,2.9-.1h-.04l.9,.2,86.5-1.8-86.5-1.8-.9,.2h.04c-1,.2-2,.2-2.9-.1-1-.3-1.8-.8-2.5-1.5v.02c-.86-.93-2.08-1.52-3.44-1.52-2.6,0-4.7,2.1-4.7,4.7Zm2.7,0c0-1.1,.9-2,2-2s2,.9,2,2-.9,2-2,2-2-.9-2-2Z", + "inner_arrow_hand" : "m 0 0 c 0 2.6 2.1 4.7 4.7 4.7 c 1.37 0 2.59 -0.59 3.44 -1.52 c 0.7 -0.7 1.5 -1.2 2.5 -1.5 s 2 -0.3 2.9 -0.1 l 0.9 0.2 l ${len} -1.8 l -${len} -1.8 l -0.9 0.2 c -1 0.2 -2 0.2 -2.9 -0.1 c -1 -0.3 -1.8 -0.8 -2.5 -1.5 c -0.86 -0.93 -2.08 -1.52 -3.44 -1.52 c -2.6 0 -4.7 2.1 -4.7 4.7 z m 2.7 0 c 0 -1.1 0.9 -2 2 -2 s 2 0.9 2 2 s -0.9 2 -2 2 s -2 -0.9 -2 -2 z", } @@ -85,8 +85,8 @@ export class VID2805DualStepperElement extends LitElement { this.outerHand.length = 70; } - inner_svg = inner_svg.replaceAll("${len}", this.innerHand.length.toString()); - outer_svg = outer_svg.replaceAll("${len}", this.outerHand.length.toString()); + inner_svg = inner_svg.split("${len}").join(this.innerHand.length.toString()); + outer_svg = outer_svg.split("${len}").join(this.outerHand.length.toString()); const ml = Math.max(this.innerHand.length, this.outerHand.length); if (ml > 30) { From 0f1697569571c366b15578fba5c56fd2b7f85675 Mon Sep 17 00:00:00 2001 From: bonnyr Date: Tue, 13 Sep 2022 06:04:25 -0700 Subject: [PATCH 3/8] added debug view --- src/vid2805-dual-stepper-element.stories.ts | 24 ++++++ src/vid2805-dual-stepper-element.ts | 84 ++++++++++++++------- 2 files changed, 79 insertions(+), 29 deletions(-) diff --git a/src/vid2805-dual-stepper-element.stories.ts b/src/vid2805-dual-stepper-element.stories.ts index 2999671..69de18c 100644 --- a/src/vid2805-dual-stepper-element.stories.ts +++ b/src/vid2805-dual-stepper-element.stories.ts @@ -32,6 +32,12 @@ export default { // .outerHand = ${new ClockHand(outerLength, outerColour, outerShape, outerAngle)} +export const VIS2805 = () => html` + + + +`; + const Template = ({outerLength, outerAngle, outerColour, outerShape, innerLength, innerAngle, innerColour, innerShape, innerHand, outerHand }) => html` 30) { + trY = ml - 30; + } + return { + x : x, + y: y, + innerOff : innerOff, + outerOff: outerOff, + trY : trY + } + } + + get pinInfo(): ElementPin[] { + const { x, y, innerOff, outerOff, trY} = this.coords(); + + return [ + { name: 'A1+', y: trY, x: 58 * mmToPix, number: 1, signals: [] }, + { name: 'A1-', y: trY, x: 65 * mmToPix, number: 2, signals: [] }, + { name: 'B1+', y: trY, x: 72 * mmToPix, number: 3, signals: [] }, + { name: 'B1-', y: trY, x: 79 * mmToPix, number: 4, signals: [] }, + { name: 'A2+', y: trY, x: 86 * mmToPix, number: 5, signals: [] }, + { name: 'A2-', y: trY, x: 93 * mmToPix, number: 6, signals: [] }, + { name: 'B2+', y: trY, x: 100 * mmToPix, number: 7, signals: [] }, + { name: 'B2-', y: trY, x: 107 * mmToPix, number: 8, signals: [] }, + ]; + + } readonly handMap : {[key:string] : string } = { @@ -66,11 +94,11 @@ export class VID2805DualStepperElement extends LitElement { render() { - const x = 112.3; // x location of shaft point - const y = 50; // y location of shaft point - const innerOff = 4.7; // offset to center of inner hand's ring - const outerOff = 9; // offset to center of outer hand's ring - let trY = 0; + // const x = 112.3; // x location of shaft point + // const y = 50; // y location of shaft point + // const innerOff = 4.7; // offset to center of inner hand's ring + // const outerOff = 9; // offset to center of outer hand's ring + // let trY = 0; let inner_svg = this.handMap['inner_' + this.innerHand.shape + '_hand']; let outer_svg = this.handMap['outer_' + this.outerHand.shape + '_hand']; @@ -88,13 +116,11 @@ export class VID2805DualStepperElement extends LitElement { inner_svg = inner_svg.split("${len}").join(this.innerHand.length.toString()); outer_svg = outer_svg.split("${len}").join(this.outerHand.length.toString()); - const ml = Math.max(this.innerHand.length, this.outerHand.length); - if (ml > 30) { - trY = ml - 30; - } + const { x, y, innerOff, outerOff, trY} = this.coords(); + return html` - + - - - - - - - - - + + + + + + + + From 805a1bfdc6ae14a105e3f525309eece0b7f8f4fe Mon Sep 17 00:00:00 2001 From: Bonny Rais Date: Sun, 18 Sep 2022 18:29:10 +0900 Subject: [PATCH 4/8] interim step - no pinInfo --- src/vid2805-dual-stepper-element.stories.ts | 99 +++++---- src/vid2805-dual-stepper-element.ts | 226 ++++++++++---------- 2 files changed, 164 insertions(+), 161 deletions(-) diff --git a/src/vid2805-dual-stepper-element.stories.ts b/src/vid2805-dual-stepper-element.stories.ts index 69de18c..d7ca01d 100644 --- a/src/vid2805-dual-stepper-element.stories.ts +++ b/src/vid2805-dual-stepper-element.stories.ts @@ -6,14 +6,14 @@ export default { title: 'VID2805 Dual Stepper', component: 'wokwi-vid2805-dual-stepper', argTypes: { - outerLength: { control: { type: 'range', min: 20, max: 70 } }, - outerAngle: { control: { type: 'range', min: 0, max: 360 } }, - outerColour: { control: { type: 'color' } }, - outerShape : { options: ['arrow' , 'plain', 'fancy'], control: { type: 'select'}}, - innerLength: { control: { type: 'range', min: 20, max: 70 } }, - innerAngle: { control: { type: 'range', min: 0, max: 360 } }, - innerColour: { control: { type: 'color' } }, - innerShape : { options: ['arrow' , 'plain', 'fancy'], control: { type: 'select'}}, + outerLength: { control: { type: 'range', min: 20, max: 70 } }, + outerAngle: { control: { type: 'range', min: 0, max: 360 } }, + outerColour: { control: { type: 'color' } }, + outerShape: { options: ['arrow', 'plain', 'fancy'], control: { type: 'select' } }, + innerLength: { control: { type: 'range', min: 20, max: 70 } }, + innerAngle: { control: { type: 'range', min: 0, max: 360 } }, + innerColour: { control: { type: 'color' } }, + innerShape: { options: ['arrow', 'plain', 'fancy'], control: { type: 'select' } }, }, args: { outerLength: 20, @@ -21,40 +21,49 @@ export default { outerColour: 'grey', outerShape: 'plain', innerLength: 20, - innerAngle: 0, - innerColour: 'darkgrey', - innerShape: 'plain', + innerAngle: 0, + innerColour: 'darkgrey', + innerShape: 'plain', }, }; - // .innerHand = ${new ClockHand(innerLength, innerColour, innerShape, innerAngle)} // .outerHand = ${new ClockHand(outerLength, outerColour, outerShape, outerAngle)} - export const VIS2805 = () => html` `; -const Template = ({outerLength, outerAngle, outerColour, outerShape, - innerLength, innerAngle, innerColour, innerShape, -innerHand, outerHand }) => html``; +const Template = ({ + outerLength, + outerAngle, + outerColour, + outerShape, + innerLength, + innerAngle, + innerColour, + innerShape, + innerHand, + outerHand, +}) => html` + +`; export const Default = Template.bind({}); -Default.args = { +Default.args = { // outerLength: 20, // outerAngle: 0, // outerColour: 'grey', @@ -64,36 +73,36 @@ Default.args = { // innerColour: 'darkgrey', // innerShape: 'plain', - innerHand: new StepperHand(25, "red", "arrow", 225), - outerHand: new StepperHand(30, "green", "arrow", 270), + innerHand: new StepperHand(25, 'red', 'arrow', 225), + outerHand: new StepperHand(30, 'green', 'arrow', 270), }; export const NineOclock = Template.bind({}); -NineOclock.args = { - innerHand: new StepperHand(70, "silver", "plain", 90), - outerHand: new StepperHand(60, "gold", "plain", 0), +NineOclock.args = { + innerHand: new StepperHand(70, 'silver', 'plain', 90), + outerHand: new StepperHand(70, 'gold', 'plain', 0), }; export const SixOclock = Template.bind({}); -SixOclock.args = { - innerHand: new StepperHand(70, "silver", "plain", 180), - outerHand: new StepperHand(60, "gold", "plain", 0), +SixOclock.args = { + innerHand: new StepperHand(70, 'silver', 'plain', 180), + outerHand: new StepperHand(60, 'gold', 'plain', 0), }; export const ThreeOclock = Template.bind({}); -ThreeOclock.args = { - innerHand: new StepperHand(70, "silver", "plain", 270), - outerHand: new StepperHand(60, "gold", "plain", 90), +ThreeOclock.args = { + innerHand: new StepperHand(70, 'silver', 'plain', 270), + outerHand: new StepperHand(60, 'gold', 'plain', 90), }; export const TenPastTen = Template.bind({}); -TenPastTen.args = { - innerHand: new StepperHand(70, "silver", "plain", 60), - outerHand: new StepperHand(60, "gold", "plain", 300), +TenPastTen.args = { + innerHand: new StepperHand(70, 'silver', 'plain', 60), + outerHand: new StepperHand(60, 'gold', 'plain', 300), }; export const SameLength = Template.bind({}); -SameLength.args = { - innerHand: new StepperHand(20, "blue", "plain", 0), - outerHand: new StepperHand(20, "green", "plain", 180), +SameLength.args = { + innerHand: new StepperHand(20, 'blue', 'plain', 0), + outerHand: new StepperHand(20, 'green', 'plain', 180), }; diff --git a/src/vid2805-dual-stepper-element.ts b/src/vid2805-dual-stepper-element.ts index 809c2a1..6063db0 100644 --- a/src/vid2805-dual-stepper-element.ts +++ b/src/vid2805-dual-stepper-element.ts @@ -1,108 +1,98 @@ import { html, LitElement, svg } from 'lit'; -import { customElement, property} from 'lit/decorators.js'; +import { customElement, property } from 'lit/decorators.js'; import { ElementPin } from '.'; import { mmToPix } from './utils/units'; - export type HandShape = 'arrow' | 'plain'; // | 'fancy'; export class StepperHand { - /** * length used to control hand length */ - length : number = 25; + length = 25; /** * colour used to paint the hand */ - colour : string = ''; + colour = ''; /** * hand shape selects from predefined shape paths */ - shape : HandShape = 'plain'; + shape: HandShape = 'plain'; /** - * the current hand angle + * the current hand angle */ - angle : number = 0; - - + angle = 0; - constructor(length = 25, colour = '', shape : HandShape = 'plain', angle = 0){ + constructor(length = 25, colour = '', shape: HandShape = 'plain', angle = 0) { this.angle = angle; this.colour = colour; this.shape = shape; this.length = length; } - } @customElement('wokwi-vid2805-dual-stepper') -export class VID2805DualStepperElement extends LitElement { - +export class VID2805DualStepperElement extends LitElement { @property() outerHand = new StepperHand(); @property() innerHand = new StepperHand(); - private coords() { - const x = 112.3; // x location of shaft point - const y = 50; // y location of shaft point - const innerOff = 4.7; // offset to center of inner hand's ring - const outerOff = 9; // offset to center of outer hand's ring - let trY = 0; - + const _x = 112.3; // x location of shaft point + const _y = 50; // y location of shaft point + const _innerOff = 4.7; // offset to center of inner hand's ring + const _outerOff = 9; // offset to center of outer hand's ring + let _trY = 0; const ml = Math.max(this.innerHand.length, this.outerHand.length); if (ml > 30) { - trY = ml - 30; + _trY = ml - 30; } return { - x : x, - y: y, - innerOff : innerOff, - outerOff: outerOff, - trY : trY - } + x: _x, + y: _y, + innerOff: _innerOff, + outerOff: _outerOff, + trY: _trY, + }; } get pinInfo(): ElementPin[] { - const { x, y, innerOff, outerOff, trY} = this.coords(); - - return [ - { name: 'A1+', y: trY, x: 58 * mmToPix, number: 1, signals: [] }, - { name: 'A1-', y: trY, x: 65 * mmToPix, number: 2, signals: [] }, - { name: 'B1+', y: trY, x: 72 * mmToPix, number: 3, signals: [] }, - { name: 'B1-', y: trY, x: 79 * mmToPix, number: 4, signals: [] }, - { name: 'A2+', y: trY, x: 86 * mmToPix, number: 5, signals: [] }, - { name: 'A2-', y: trY, x: 93 * mmToPix, number: 6, signals: [] }, - { name: 'B2+', y: trY, x: 100 * mmToPix, number: 7, signals: [] }, - { name: 'B2-', y: trY, x: 107 * mmToPix, number: 8, signals: [] }, + const { x, y, innerOff, outerOff, trY } = this.coords(); + const factor = 1; + + const pi = [ + { name: 'A1+', y: 10, x: 10 * factor, number: 1, signals: [] }, + { name: 'A1-', y: trY, x: 65 * factor, number: 2, signals: [] }, + { name: 'B1+', y: trY, x: 72 * factor, number: 3, signals: [] }, + { name: 'B1-', y: trY, x: 79 * factor, number: 4, signals: [] }, + { name: 'A2+', y: trY, x: 86 * factor, number: 5, signals: [] }, + { name: 'A2-', y: trY, x: 93 * factor, number: 6, signals: [] }, + { name: 'B2+', y: trY, x: 100 * factor, number: 7, signals: [] }, + { name: 'B2-', y: trY, x: 107 * factor, number: 8, signals: [] }, ]; + console.debug(pi); + return pi; } - - readonly handMap : {[key:string] : string } = { - "outer_plain_hand" : "m0,0 c0,5,4,9,9,9,3.28,0,6.13-1.73,7.7-4.33v.03c.5-.8,1.2-1.6,2.1-2.1,.8-.5,1.8-.8,2.8-.8h${len}c1,0,1.8-.8,1.8-1.8s-.8-1.8-1.8-1.8h-${len}c-1,0-1.9-.3-2.8-.8-.8-.5-1.6-1.2-2.1-2h0c-1.56-2.64-4.43-4.4-7.74-4.4-5,0-9,4.1-9,9Zm3.5,0c0-3,2.4-5.4,5.5-5.4s5.5,2.4,5.5,5.4-2.5,5.4-5.5,5.4-5.5-2.4-5.5-5.4Z", - "outer_arrow_hand" : "m 0 0 c 0 5 4 9 9 9 c 3.89 0 7.16 -2.42 8.43 -5.85 c 0.3 -0.58 0.78 -1.16 1.27 -1.45 c 0.6 -0.3 1.29 -0.4 1.99 -0.2 c 0 0 0 0 0 0 h 0.01 s 0.9 0.2 0.9 0.2 l ${len} -1.7 l -${len} -1.9 l -0.9 0.3 c -0.7 0.2 -1.4 0.1 -2 -0.2 c -0.6 -0.3 -1.1 -0.8 -1.3 -1.5 c 0 0 -0.01 0.02 -0.02 0.02 c -1.38 -3.72 -4.38 -5.72 -8.38 -5.72 c -5 0 -9 4 -9 9 Z m 3.5 0 c 0 -3.1 2.5 -5.5 5.5 -5.5 s 5.5 2.5 5.5 5.5 s -2.5 5.5 -5.5 5.5 s -5.5 -2.5 -5.5 -5.5 Z", - "inner_plain_hand" : "m0,0 c 0 2.6 2.1 4.7 4.7 4.7 c 1.27 0 2.41 -0.5 3.25 -1.31 h 0 c 0.5 -0.49 1.1 -0.89 1.8 -1.19 c 0.7 -0.3 1.4 -0.4 2.1 -0.4 h ${len} c 1 0 1.8 -0.8 1.8 -1.8 s -0.8 -1.8 -1.8 -1.8 h -${len} s -0.06 0 -0.06 0 c -0.7 0 -1.5 -0.1 -2.1 -0.4 c -0.7 -0.3 -1.3 -0.7 -1.8 -1.2 h 0 c -0.84 -0.8 -1.98 -1.3 -3.24 -1.3 c -2.6 0 -4.7 2.1 -4.7 4.7 Z m 2.7 0 c 0 -1.1 0.9 -2 2 -2 s 2 0.9 2 2 s -0.9 2 -2 2 s -2 -0.9 -2 -2 Z", - "inner_arrow_hand" : "m 0 0 c 0 2.6 2.1 4.7 4.7 4.7 c 1.37 0 2.59 -0.59 3.44 -1.52 c 0.7 -0.7 1.5 -1.2 2.5 -1.5 s 2 -0.3 2.9 -0.1 l 0.9 0.2 l ${len} -1.8 l -${len} -1.8 l -0.9 0.2 c -1 0.2 -2 0.2 -2.9 -0.1 c -1 -0.3 -1.8 -0.8 -2.5 -1.5 c -0.86 -0.93 -2.08 -1.52 -3.44 -1.52 c -2.6 0 -4.7 2.1 -4.7 4.7 z m 2.7 0 c 0 -1.1 0.9 -2 2 -2 s 2 0.9 2 2 s -0.9 2 -2 2 s -2 -0.9 -2 -2 z", - } - + readonly handMap: { [key: string]: string } = { + outer_plain_hand: + 'm0,0 c0,5,4,9,9,9,3.28,0,6.13-1.73,7.7-4.33v.03c.5-.8,1.2-1.6,2.1-2.1,.8-.5,1.8-.8,2.8-.8h${len}c1,0,1.8-.8,1.8-1.8s-.8-1.8-1.8-1.8h-${len}c-1,0-1.9-.3-2.8-.8-.8-.5-1.6-1.2-2.1-2h0c-1.56-2.64-4.43-4.4-7.74-4.4-5,0-9,4.1-9,9Zm3.5,0c0-3,2.4-5.4,5.5-5.4s5.5,2.4,5.5,5.4-2.5,5.4-5.5,5.4-5.5-2.4-5.5-5.4Z', + outer_arrow_hand: + 'm 0 0 c 0 5 4 9 9 9 c 3.89 0 7.16 -2.42 8.43 -5.85 c 0.3 -0.58 0.78 -1.16 1.27 -1.45 c 0.6 -0.3 1.29 -0.4 1.99 -0.2 c 0 0 0 0 0 0 h 0.01 s 0.9 0.2 0.9 0.2 l ${len} -1.7 l -${len} -1.9 l -0.9 0.3 c -0.7 0.2 -1.4 0.1 -2 -0.2 c -0.6 -0.3 -1.1 -0.8 -1.3 -1.5 c 0 0 -0.01 0.02 -0.02 0.02 c -1.38 -3.72 -4.38 -5.72 -8.38 -5.72 c -5 0 -9 4 -9 9 Z m 3.5 0 c 0 -3.1 2.5 -5.5 5.5 -5.5 s 5.5 2.5 5.5 5.5 s -2.5 5.5 -5.5 5.5 s -5.5 -2.5 -5.5 -5.5 Z', + inner_plain_hand: + 'm0,0 c 0 2.6 2.1 4.7 4.7 4.7 c 1.27 0 2.41 -0.5 3.25 -1.31 h 0 c 0.5 -0.49 1.1 -0.89 1.8 -1.19 c 0.7 -0.3 1.4 -0.4 2.1 -0.4 h ${len} c 1 0 1.8 -0.8 1.8 -1.8 s -0.8 -1.8 -1.8 -1.8 h -${len} s -0.06 0 -0.06 0 c -0.7 0 -1.5 -0.1 -2.1 -0.4 c -0.7 -0.3 -1.3 -0.7 -1.8 -1.2 h 0 c -0.84 -0.8 -1.98 -1.3 -3.24 -1.3 c -2.6 0 -4.7 2.1 -4.7 4.7 Z m 2.7 0 c 0 -1.1 0.9 -2 2 -2 s 2 0.9 2 2 s -0.9 2 -2 2 s -2 -0.9 -2 -2 Z', + inner_arrow_hand: + 'm 0 0 c 0 2.6 2.1 4.7 4.7 4.7 c 1.37 0 2.59 -0.59 3.44 -1.52 c 0.7 -0.7 1.5 -1.2 2.5 -1.5 s 2 -0.3 2.9 -0.1 l 0.9 0.2 l ${len} -1.8 l -${len} -1.8 l -0.9 0.2 c -1 0.2 -2 0.2 -2.9 -0.1 c -1 -0.3 -1.8 -0.8 -2.5 -1.5 c -0.86 -0.93 -2.08 -1.52 -3.44 -1.52 c -2.6 0 -4.7 2.1 -4.7 4.7 z m 2.7 0 c 0 -1.1 0.9 -2 2 -2 s 2 0.9 2 2 s -0.9 2 -2 2 s -2 -0.9 -2 -2 z', + }; render() { - - // const x = 112.3; // x location of shaft point - // const y = 50; // y location of shaft point - // const innerOff = 4.7; // offset to center of inner hand's ring - // const outerOff = 9; // offset to center of outer hand's ring - // let trY = 0; - let inner_svg = this.handMap['inner_' + this.innerHand.shape + '_hand']; let outer_svg = this.handMap['outer_' + this.outerHand.shape + '_hand']; - + // todo: validate hands // replace length from args @@ -113,13 +103,16 @@ export class VID2805DualStepperElement extends LitElement { this.outerHand.length = 70; } - inner_svg = inner_svg.split("${len}").join(this.innerHand.length.toString()); - outer_svg = outer_svg.split("${len}").join(this.outerHand.length.toString()); - - const { x, y, innerOff, outerOff, trY} = this.coords(); + inner_svg = inner_svg.split('${len}').join(this.innerHand.length.toString()); + outer_svg = outer_svg.split('${len}').join(this.outerHand.length.toString()); + const { x, y, innerOff, outerOff, trY } = this.coords(); + console.debug(this.coords()); + console.debug(trY); + console.debug(x); + console.debug(y); - return html` + const h = html` - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - `; + + console.debug(h); + return h; } } - - - - - -/** - * - */ - - From b395c3fee3cf2afea7dd8d5e3cd4e98a03e71fdd Mon Sep 17 00:00:00 2001 From: Bonny Rais Date: Mon, 19 Sep 2022 17:19:01 +0900 Subject: [PATCH 5/8] modified transformations to ensure that all used coord units match and the element is the appropriate size --- src/vid2805-dual-stepper-element.stories.ts | 9 -- src/vid2805-dual-stepper-element.ts | 96 +++++++++++---------- 2 files changed, 50 insertions(+), 55 deletions(-) diff --git a/src/vid2805-dual-stepper-element.stories.ts b/src/vid2805-dual-stepper-element.stories.ts index d7ca01d..429d3b8 100644 --- a/src/vid2805-dual-stepper-element.stories.ts +++ b/src/vid2805-dual-stepper-element.stories.ts @@ -64,15 +64,6 @@ const Template = ({ export const Default = Template.bind({}); Default.args = { - // outerLength: 20, - // outerAngle: 0, - // outerColour: 'grey', - // outerShape: 'plain', - // innerLength: 20, - // innerAngle: 0, - // innerColour: 'darkgrey', - // innerShape: 'plain', - innerHand: new StepperHand(25, 'red', 'arrow', 225), outerHand: new StepperHand(30, 'green', 'arrow', 270), }; diff --git a/src/vid2805-dual-stepper-element.ts b/src/vid2805-dual-stepper-element.ts index 6063db0..532c049 100644 --- a/src/vid2805-dual-stepper-element.ts +++ b/src/vid2805-dual-stepper-element.ts @@ -61,17 +61,19 @@ export class VID2805DualStepperElement extends LitElement { get pinInfo(): ElementPin[] { const { x, y, innerOff, outerOff, trY } = this.coords(); - const factor = 1; + const pinX = (x: number) => { + return (21.5 + x * 2.54) * mmToPix; + }; const pi = [ - { name: 'A1+', y: 10, x: 10 * factor, number: 1, signals: [] }, - { name: 'A1-', y: trY, x: 65 * factor, number: 2, signals: [] }, - { name: 'B1+', y: trY, x: 72 * factor, number: 3, signals: [] }, - { name: 'B1-', y: trY, x: 79 * factor, number: 4, signals: [] }, - { name: 'A2+', y: trY, x: 86 * factor, number: 5, signals: [] }, - { name: 'A2-', y: trY, x: 93 * factor, number: 6, signals: [] }, - { name: 'B2+', y: trY, x: 100 * factor, number: 7, signals: [] }, - { name: 'B2-', y: trY, x: 107 * factor, number: 8, signals: [] }, + { name: 'A1+', y: trY, x: pinX(0), number: 1, signals: [] }, + { name: 'A1-', y: trY, x: pinX(1), number: 2, signals: [] }, + { name: 'B1+', y: trY, x: pinX(2), number: 3, signals: [] }, + { name: 'B1-', y: trY, x: pinX(3), number: 4, signals: [] }, + { name: 'A2+', y: trY, x: pinX(4), number: 5, signals: [] }, + { name: 'A2-', y: trY, x: pinX(5), number: 6, signals: [] }, + { name: 'B2+', y: trY, x: pinX(6), number: 7, signals: [] }, + { name: 'B2-', y: trY, x: pinX(7), number: 8, signals: [] }, ]; console.debug(pi); @@ -112,55 +114,60 @@ export class VID2805DualStepperElement extends LitElement { console.debug(x); console.debug(y); - const h = html` - + return html` + - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - - + + - - + + - - + + - - + + @@ -180,8 +187,5 @@ export class VID2805DualStepperElement extends LitElement { `; - - console.debug(h); - return h; } } From 896ea878d4b67cdd531f0aa8e21fe88402c47a2d Mon Sep 17 00:00:00 2001 From: Bonny Rais Date: Tue, 20 Sep 2022 12:26:48 +0900 Subject: [PATCH 6/8] rotated by 90deg, fixed a couple of inner/outer property mixups --- src/vid2805-dual-stepper-element.stories.ts | 49 ++++++++------------- src/vid2805-dual-stepper-element.ts | 26 +++++------ 2 files changed, 32 insertions(+), 43 deletions(-) diff --git a/src/vid2805-dual-stepper-element.stories.ts b/src/vid2805-dual-stepper-element.stories.ts index 429d3b8..1b6ca0c 100644 --- a/src/vid2805-dual-stepper-element.stories.ts +++ b/src/vid2805-dual-stepper-element.stories.ts @@ -27,15 +27,6 @@ export default { }, }; -// .innerHand = ${new ClockHand(innerLength, innerColour, innerShape, innerAngle)} -// .outerHand = ${new ClockHand(outerLength, outerColour, outerShape, outerAngle)} - -export const VIS2805 = () => html` - - - -`; - const Template = ({ outerLength, outerAngle, @@ -47,20 +38,18 @@ const Template = ({ innerShape, innerHand, outerHand, -}) => html` - -`; +}) => html``; export const Default = Template.bind({}); Default.args = { @@ -70,20 +59,20 @@ Default.args = { export const NineOclock = Template.bind({}); NineOclock.args = { - innerHand: new StepperHand(70, 'silver', 'plain', 90), - outerHand: new StepperHand(70, 'gold', 'plain', 0), + innerHand: new StepperHand(70, 'silver', 'plain', 0), + outerHand: new StepperHand(40, 'gold', 'plain', 270), }; export const SixOclock = Template.bind({}); SixOclock.args = { - innerHand: new StepperHand(70, 'silver', 'plain', 180), - outerHand: new StepperHand(60, 'gold', 'plain', 0), + innerHand: new StepperHand(70, 'silver', 'plain', 0), + outerHand: new StepperHand(40, 'gold', 'plain', 180), }; export const ThreeOclock = Template.bind({}); ThreeOclock.args = { innerHand: new StepperHand(70, 'silver', 'plain', 270), - outerHand: new StepperHand(60, 'gold', 'plain', 90), + outerHand: new StepperHand(50, 'gold', 'plain', 90), }; export const TenPastTen = Template.bind({}); @@ -94,6 +83,6 @@ TenPastTen.args = { export const SameLength = Template.bind({}); SameLength.args = { - innerHand: new StepperHand(20, 'blue', 'plain', 0), - outerHand: new StepperHand(20, 'green', 'plain', 180), + innerHand: new StepperHand(30, 'blue', 'plain', 0), + outerHand: new StepperHand(30, 'green', 'plain', 180), }; diff --git a/src/vid2805-dual-stepper-element.ts b/src/vid2805-dual-stepper-element.ts index 532c049..acd4629 100644 --- a/src/vid2805-dual-stepper-element.ts +++ b/src/vid2805-dual-stepper-element.ts @@ -61,19 +61,19 @@ export class VID2805DualStepperElement extends LitElement { get pinInfo(): ElementPin[] { const { x, y, innerOff, outerOff, trY } = this.coords(); - const pinX = (x: number) => { - return (21.5 + x * 2.54) * mmToPix; + const pinXY = (x: number) => { + return { x: 15 + trY, y: (48.5 - x * 2.54) * mmToPix }; }; const pi = [ - { name: 'A1+', y: trY, x: pinX(0), number: 1, signals: [] }, - { name: 'A1-', y: trY, x: pinX(1), number: 2, signals: [] }, - { name: 'B1+', y: trY, x: pinX(2), number: 3, signals: [] }, - { name: 'B1-', y: trY, x: pinX(3), number: 4, signals: [] }, - { name: 'A2+', y: trY, x: pinX(4), number: 5, signals: [] }, - { name: 'A2-', y: trY, x: pinX(5), number: 6, signals: [] }, - { name: 'B2+', y: trY, x: pinX(6), number: 7, signals: [] }, - { name: 'B2-', y: trY, x: pinX(7), number: 8, signals: [] }, + { name: 'A1+', ...pinXY(0), number: 1, signals: [] }, + { name: 'A1-', ...pinXY(1), number: 2, signals: [] }, + { name: 'B1+', ...pinXY(2), number: 3, signals: [] }, + { name: 'B1-', ...pinXY(3), number: 4, signals: [] }, + { name: 'A2+', ...pinXY(4), number: 5, signals: [] }, + { name: 'A2-', ...pinXY(5), number: 6, signals: [] }, + { name: 'B2+', ...pinXY(6), number: 7, signals: [] }, + { name: 'B2-', ...pinXY(7), number: 8, signals: [] }, ]; console.debug(pi); @@ -133,7 +133,7 @@ export class VID2805DualStepperElement extends LitElement { - + @@ -173,7 +173,7 @@ export class VID2805DualStepperElement extends LitElement { @@ -181,7 +181,7 @@ export class VID2805DualStepperElement extends LitElement { From 931a77bc5250c65d3b4cb329fb36b96aa0858873 Mon Sep 17 00:00:00 2001 From: Bonny Rais Date: Thu, 22 Sep 2022 21:26:05 +0900 Subject: [PATCH 7/8] multiple changes per feedback: 1. renamed component name tyo be more generic 2. remove debug stateents 3. added ornate hands 4. refactored hand path template expansion to be more TS/JS friendly 5. removed use of composite Hand classes as properties --- src/biaxial-stepper-element.stories.ts | 131 ++++++++++++ src/biaxial-stepper-element.ts | 222 ++++++++++++++++++++ src/index.ts | 2 +- src/react-types.ts | 4 +- src/vid2805-dual-stepper-element.stories.ts | 88 -------- src/vid2805-dual-stepper-element.ts | 191 ----------------- 6 files changed, 356 insertions(+), 282 deletions(-) create mode 100644 src/biaxial-stepper-element.stories.ts create mode 100644 src/biaxial-stepper-element.ts delete mode 100644 src/vid2805-dual-stepper-element.stories.ts delete mode 100644 src/vid2805-dual-stepper-element.ts diff --git a/src/biaxial-stepper-element.stories.ts b/src/biaxial-stepper-element.stories.ts new file mode 100644 index 0000000..b6d977b --- /dev/null +++ b/src/biaxial-stepper-element.stories.ts @@ -0,0 +1,131 @@ +import { html } from 'lit'; +import './biaxial-stepper-element'; + +export default { + title: 'Biaxial Stepper', + component: 'wokwi-biaxial-stepper', + argTypes: { + innerHandLength: { control: { type: 'range', min: 20, max: 70 } }, + innerHandAngle: { control: { type: 'range', min: 0, max: 360 } }, + innerHandColor: { control: { type: 'color' } }, + innerHandShape: { options: ['arrow', 'plain', 'ornate'], control: { type: 'select' } }, + outerHandLength: { control: { type: 'range', min: 20, max: 70 } }, + outerHandAngle: { control: { type: 'range', min: 0, max: 360 } }, + outerHandColor: { control: { type: 'color' } }, + outerHandShape: { options: ['arrow', 'plain', 'ornate'], control: { type: 'select' } }, + }, + args: { + outerHandLength: 20, + outerHandAngle: 0, + outerHandColor: 'grey', + outerHandShape: 'plain', + innerHandLength: 20, + innerHandAngle: 0, + innerHandColor: 'darkgrey', + innerHandShape: 'plain', + }, +}; + +const Template = ({ + innerHandLength, + innerHandColor, + innerHandShape, + innerHandAngle, + outerHandLength, + outerHandColor, + outerHandShape, + outerHandAngle, +}) => html``; + +export const Default = Template.bind({}); +Default.args = { + innerHandLength: 25, + innerHandColor: 'red', + innerHandShape: 'arrow', + innerHandAngle: 225, + outerHandLength: 30, + outerHandColor: 'green', + outerHandShape: 'arrow', + outerHandAngle: 270, +}; + +export const NineOclock = Template.bind({}); +NineOclock.args = { + innerHandLength: 70, + innerHandColor: 'silver', + innerHandShape: 'plain', + innerHandAngle: 0, + outerHandLength: 40, + outerHandColor: 'gold', + outerHandShape: 'plain', + outerHandAngle: 270, +}; + +export const SixOclock = Template.bind({}); +SixOclock.args = { + innerHandLength: 70, + innerHandColor: 'silver', + innerHandShape: 'plain', + innerHandAngle: 0, + outerHandLength: 40, + outerHandColor: 'gold', + outerHandShape: 'plain', + outerHandAngle: 180, +}; + +export const ThreeOclock = Template.bind({}); +ThreeOclock.args = { + innerHandLength: 70, + innerHandColor: 'silver', + innerHandShape: 'plain', + innerHandAngle: 0, + outerHandLength: 50, + outerHandColor: 'gold', + outerHandShape: 'plain', + outerHandAngle: 90, +}; + +export const TenPastTen = Template.bind({}); +TenPastTen.args = { + innerHandLength: 70, + innerHandColor: 'silver', + innerHandShape: 'plain', + innerHandAngle: 60, + outerHandLength: 60, + outerHandColor: 'gold', + outerHandShape: 'plain', + outerHandAngle: 300, +}; + +export const SameLength = Template.bind({}); +SameLength.args = { + innerHandLength: 30, + innerHandColor: 'blue', + innerHandShape: 'plain', + innerHandAngle: 0, + outerHandLength: 30, + outerHandColor: 'green', + outerHandShape: 'plain', + outerHandAngle: 180, +}; + +export const OrnateClock = Template.bind({}); +OrnateClock.args = { + innerHandLength: 70, + innerHandColor: 'silver', + innerHandShape: 'ornate', + innerHandAngle: 60, + outerHandLength: 60, + outerHandColor: 'gold', + outerHandShape: 'ornate', + outerHandAngle: 300, +}; diff --git a/src/biaxial-stepper-element.ts b/src/biaxial-stepper-element.ts new file mode 100644 index 0000000..9662582 --- /dev/null +++ b/src/biaxial-stepper-element.ts @@ -0,0 +1,222 @@ +import { html, LitElement, svg } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { ElementPin } from '.'; +import { mmToPix } from './utils/units'; + +type HandShape = 'arrow' | 'plain' | 'ornate'; +type HandDesc = { xOff: number; yOff: number; path: string }; + +const SHAFT_X = 112.3; // x location of shaft point +const SHAFT_Y = 45; // y location of shaft point +const OUTER_OFFSET = 9; // offset to center of outer hand's ring +const INNER_OFFSET = 4.7; // offset to center of inner hand's ring +const ORNATE_OUTER_OFFSET = 9; // offset to center of outer ornate hand's ring +const ORNATE_INNER_OFFSET = 5; // offset to center of inner ornate hand's ring +const BASE_MOVE_THOLD = 30; // threshold above which we need to move the base to allow for hands extending outside the base + +@customElement('wokwi-biaxial-stepper') +export class BiaxialStepperElement extends LitElement { + // length used to control outer hand length in mm + @property() outerHandLength = 30; + + // the current hand angle in degrees + @property() outerHandAngle = 0; + + // the current outer hand color + @property() outerHandColor = 'gold'; + + // the current outer hand shape + @property() outerHandShape: 'arrow' | 'plain' | 'ornate' = 'plain'; + + // length used to control inner hand length in mm + @property() innerHandLength = 30; + + // the current hand angle in degrees + @property() innerHandAngle = 0; + + // the current inner hand color + @property() innerHandColor = 'silver'; + + // the current inner hand shape + @property() innerHandShape: 'arrow' | 'plain' | 'ornate' = 'plain'; + + get pinInfo(): ElementPin[] { + const pinXY = (x: number) => { + return { x: 15 + this.trY(), y: (48.5 - x * 2.54) * mmToPix }; + }; + + return [ + { name: 'A1+', ...pinXY(0), number: 1, signals: [] }, + { name: 'A1-', ...pinXY(1), number: 2, signals: [] }, + { name: 'B1+', ...pinXY(2), number: 3, signals: [] }, + { name: 'B1-', ...pinXY(3), number: 4, signals: [] }, + { name: 'A2+', ...pinXY(4), number: 5, signals: [] }, + { name: 'A2-', ...pinXY(5), number: 6, signals: [] }, + { name: 'B2+', ...pinXY(6), number: 7, signals: [] }, + { name: 'B2-', ...pinXY(7), number: 8, signals: [] }, + ]; + } + + readonly handMap: { [key: string]: (len: number) => HandDesc } = { + outerPlainHand: (len: number) => ({ + xOff: OUTER_OFFSET, + yOff: OUTER_OFFSET, + path: `m0,0 c0,5,4,9,9,9,3.28,0,6.13-1.73,7.7-4.33v.03c.5-.8,1.2-1.6,2.1-2.1,.8-.5,1.8-.8,2.8-.8h${len}c1,0,1.8-.8,1.8-1.8s-.8-1.8-1.8-1.8h-${len}c-1,0-1.9-.3-2.8-.8-.8-.5-1.6-1.2-2.1-2h0c-1.56-2.64-4.43-4.4-7.74-4.4-5,0-9,4.1-9,9Zm3.5,0c0-3,2.4-5.4,5.5-5.4s5.5,2.4,5.5,5.4-2.5,5.4-5.5,5.4-5.5-2.4-5.5-5.4Z`, + }), + + outerArrowHand: (len: number): HandDesc => ({ + xOff: OUTER_OFFSET, + yOff: OUTER_OFFSET, + path: `m 0 0 c 0 5 4 9 9 9 c 3.89 0 7.16 -2.42 8.43 -5.85 c 0.3 -0.58 0.78 -1.16 1.27 -1.45 c 0.6 -0.3 1.29 -0.4 1.99 -0.2 c 0 0 0 0 0 0 h 0.01 s 0.9 0.2 0.9 0.2 l ${len} -1.7 l -${len} -1.9 l -0.9 0.3 c -0.7 0.2 -1.4 0.1 -2 -0.2 c -0.6 -0.3 -1.1 -0.8 -1.3 -1.5 c 0 0 -0.01 0.02 -0.02 0.02 c -1.38 -3.72 -4.38 -5.72 -8.38 -5.72 c -5 0 -9 4 -9 9 Z m 3.5 0 c 0 -3.1 2.5 -5.5 5.5 -5.5 s 5.5 2.5 5.5 5.5 s -2.5 5.5 -5.5 5.5 s -5.5 -2.5 -5.5 -5.5 Z`, + }), + + outerOrnateHand: (len: number): HandDesc => ({ + xOff: ORNATE_OUTER_OFFSET, + yOff: ORNATE_OUTER_OFFSET, + path: `m 0 0 c 0 5 4 9 9 9 c 4.951 0.028 9.683 -3.101 9.6 -7.6 c 0 0 1.1 1.4 3.3 1.2 c -0.2 1 0.3 1.2 0.3 1.2 c 0.6 -1.5 6.4 -6.3 8.6 -0.3 c -3.1 -0.3 -1.8 3.8 0.5 1.6 c 0 0 0.9 2.3 4 2.1 c -0.8 1.7 3.1 2.1 1.7 -0.4 c 0 0 2.7 -1 2.3 -3.9 c 0 0 0.8 0.6 2.6 0.6 c 2.7 0.2 6.2 -3.7 16 -2.9 l 0.6 -0.7 l -0.6 -0.8 c -8.9 0.7 -13 -2.3 -16 -3 c -1.9 0 -2.5 0.8 -2.5 0.8 c 0 0 0.3 -2.6 -2.5 -4.1 c 0.8 -0.8 0 -1.6 -0.8 -1.6 c -0.5 0 -1 0.4 -0.8 1.5 c 0 0 -2.8 -0.8 -4 2.1 c 0 0 -1.4 -2 -2.5 0.3 c 0.2 0.5 0 0.9 0.8 1.2 c 0.2 0.3 1.2 -0.2 1.2 -0.2 c 0 0 -0.6 3.2 -3.9 3 c 0 0 -2.7 0.1 -4.8 -3.3 c -0.3 0.5 -0.3 0.7 -0.3 0.7 v 0.7 c 0 0 -2.1 -0.4 -3.4 1.2 c -0.06 -4.37 -4.449 -7.347 -9.41 -7.385 c -5 0 -9 4 -9 9 z m 44 -2.2 c 2.1 1.2 4.1 1.5 4.1 1.5 c -0.4 0.7 -0.5 0.7 0 1.6 c 0 0 -2.6 0.2 -4.1 1.4 c 0 0 0.2 -1.7 -0.6 -2.2 c 1 -0.6 0.6 -2.2 0.6 -2.2 z m -2.3 -0.5 c 1.3 0.1 1.6 1.1 1.6 1.1 c 0.1 0.4 -1.2 0.8 -1.1 1.1 l 0.3 0.5 l -0.2 0.6 c 0 0.3 0.6 0.4 1.2 1 c -0.5 0.6 -0.5 1.3 -2.1 1.3 c -1.1 0 -3.1 -2.5 -4.2 -2.9 c 1.1 -0.1 2.5 -2.8 4.5 -2.8 z m -10.8 0.9 c 0.5 1 2 1.9 2 1.9 c -1.4 0.7 -2 1.7 -2 1.7 c -1 -1.2 -2.2 -1.9 -2.2 -1.9 c 1.3 -0.6 2.2 -1.8 2.2 -1.8 z m -10.1 0.4 c 1.4 0 1.5 1.1 3.656 1.552 c -2 0.3 -2.4 1.5 -3.6 1.4 c -1.5 -0.1 -1.6 -1.3 -1.6 -1.3 c 0 0 -0.2 -1.5 1.6 -1.6 c 0 0 0 0 0.1 0 z m 14.1 2.1 c 3.1 0.1 3.1 3.2 3.1 3.2 c -0.3 1.7 -2.5 2.6 -2.5 2.6 c -2.5 0.2 -3.3 -1.5 -3.3 -1.5 c 0 0 1.4 0.6 1.8 -1 c -0.4 -2 -2.2 -0.8 -2.2 -0.8 c 0.3 -2.3 3 -2.5 3 -2.5 z`, + }), + + innerPlainHand: (len: number): HandDesc => ({ + xOff: INNER_OFFSET, + yOff: INNER_OFFSET, + path: `m0,0 c 0 2.6 2.1 4.7 4.7 4.7 c 1.27 0 2.41 -0.5 3.25 -1.31 h 0 c 0.5 -0.49 1.1 -0.89 1.8 -1.19 c 0.7 -0.3 1.4 -0.4 2.1 -0.4 h ${len} c 1 0 1.8 -0.8 1.8 -1.8 s -0.8 -1.8 -1.8 -1.8 h -${len} s -0.06 0 -0.06 0 c -0.7 0 -1.5 -0.1 -2.1 -0.4 c -0.7 -0.3 -1.3 -0.7 -1.8 -1.2 h 0 c -0.84 -0.8 -1.98 -1.3 -3.24 -1.3 c -2.6 0 -4.7 2.1 -4.7 4.7 Z m 2.7 0 c 0 -1.1 0.9 -2 2 -2 s 2 0.9 2 2 s -0.9 2 -2 2 s -2 -0.9 -2 -2 Z`, + }), + + innerArrowHand: (len: number): HandDesc => ({ + xOff: INNER_OFFSET, + yOff: INNER_OFFSET, + path: `m 0 0 c 0 2.6 2.1 4.7 4.7 4.7 c 1.37 0 2.59 -0.59 3.44 -1.52 c 0.7 -0.7 1.5 -1.2 2.5 -1.5 s 2 -0.3 2.9 -0.1 l 0.9 0.2 l ${len} -1.8 l -${len} -1.8 l -0.9 0.2 c -1 0.2 -2 0.2 -2.9 -0.1 c -1 -0.3 -1.8 -0.8 -2.5 -1.5 c -0.86 -0.93 -2.08 -1.52 -3.44 -1.52 c -2.6 0 -4.7 2.1 -4.7 4.7 z m 2.7 0 c 0 -1.1 0.9 -2 2 -2 s 2 0.9 2 2 s -0.9 2 -2 2 s -2 -0.9 -2 -2 z`, + }), + + innerOrnateHand: (len: number): HandDesc => ({ + xOff: ORNATE_INNER_OFFSET, + yOff: ORNATE_INNER_OFFSET, + path: `m 0 0 c 0 5 5 5 5 5 c 5 0 4.6565 -5.696 5 -2.6 l 0.028 1.101 l 1.4525 0.016 l 0.55 -1.5 c 0 0 1.05 1.55 3.3 1.75 c 2.35 0.05 3.2 -0.85 3.2 -0.85 l 0.05 0.75 l 0.95 -0.05 l -0.05 1 l 4 -2.4 c 0.4 1.35 1.75 1.5 1.75 1.5 c 0.65 0.1 1.85 -0.95 1.85 -0.95 l 0.7 1.45 l 1 -1.75 l 1 1 l 0.35 -1.45 c 2.4 1.45 4.15 1.2 4.15 1.2 c 2.95 -0.1 3.9 -1.05 6.6 -1.95 c 4.85 -0.7 10.3 -0.1 10.3 -0.1 l -0.25 1.65 l 3.85 -1.45 l 15.2 -0.3 l 0.45 -0.4 l -0.55 -0.4 l -15.4 -0.25 l -3.6 -1.55 l 0.4 1.8 c 0 0 -4.75 -0.85 -10.1 -0.25 l -0.25 -1.05 l -1.05 0.85 c 0 0 0.45 -2.2 0.25 -3.8 c -1.15 2.55 -1.95 6.25 -6.45 6.3 c -4.4 -0.35 -5.7 -4.05 -5.7 -4.05 l -0.45 1 l -0.5 -0.5 l -0.55 0.75 c 0 0 -0.85 -0.6 -2.35 -0.75 c -1.85 0.15 -2.35 0.45 -2.35 0.45 l -0.25 -1.45 l -1.2 1.25 l -0.5 -0.8 l -1.05 1.05 l -0.6 -0.85 c -0.6 -0.45 -1.15 -0.55 -1.75 -0.3 c 0 0 -0.6 0.25 -0.8 0.75 c 0 0 -0.45 -0.7 -1.2 -0.85 c -0.75 -0.05 -2.3 1.3 -2.3 1.3 l -0.6175 -2.289 l -1.469 -0.032 l -0.0165 1.2265 c -0.3785 2.4515 0.0485 -3.212 -5.036 -3.228 c -4 0 -5.004 2.518 -5 5 z m 13.25 -1.2 c 0 0 0.15 1.3 1.05 1.3 c 0 0 0.5 -0.25 0.7 -0.8 c 0 0 0.35 0.85 0.75 0.9 c 0.9 -0.1 0.85 -1.25 1.15 -1.3 c 0 0 0.9 0.35 0.9 2.15 c 0 0 -0.6 1.7 -3 1.65 c 0 0 -2.05 -0.15 -2.55 -1.95 c 0 0 -0.15 -1.5 0.95 -2 z m 10.5 0.55 c 1.05 0 1.4 0.25 1.4 0.25 c 0.75 0.45 1 1.2 1 1.2 c 0.05 1.6 -0.85 1.55 -1.65 1.6 c 0 0 -0.95 -0.35 -1.3 -1.35 l -3.1 1.75 c 0 0 0.45 -2.5 2.8 -3.45 c 0.35 -0.05 0.6 -0.05 0.85 -0.05 z`, + }), + }; + + private trY(): number { + let ml = Math.max(this.innerHandLength, this.outerHandLength); + + if (ml > BASE_MOVE_THOLD) { + ml -= BASE_MOVE_THOLD; + } + + return ml; + } + + private cap(s: string) { + return s.charAt(0).toUpperCase() + s.slice(1); + } + + private constrain(v: number, min: number, max: number): number { + return Math.max(min, Math.min(v, max)); + } + + private handPath(pfx: string, shape: string, len: number) { + let path = this.handMap[pfx + this.cap(shape) + 'Hand']; + + // apply default values to properties if invalid + if (path === undefined) { + path = this.handMap[pfx + 'PlainHand']; + } + return path(len); + } + render() { + const innerHandLength = this.constrain(this.innerHandLength, 20, 70); + const outerHandLength = this.constrain(this.outerHandLength, 20, 70); + + const innerPathDesc = this.handPath('inner', this.innerHandShape, innerHandLength); + const outerPathDesc = this.handPath('outer', this.outerHandShape, outerHandLength); + + const x = SHAFT_X; + const y = SHAFT_Y; + const trY = this.trY(); + + return html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; + } +} diff --git a/src/index.ts b/src/index.ts index 46704ab..386fcbe 100644 --- a/src/index.ts +++ b/src/index.ts @@ -50,4 +50,4 @@ export { DipSwitch8Element } from './dip-switch-8-element'; export { StepperMotorElement } from './stepper-motor-element'; export { HX711Element } from './hx711-element'; export { KS2EMDC5Element } from './ks2e-m-dc5-element'; -export { VID2805DualStepperElement } from './vid2805-dual-stepper-element'; +export { BiaxialStepperElement } from './biaxial-stepper-element'; diff --git a/src/react-types.ts b/src/react-types.ts index 083a798..abe8449 100644 --- a/src/react-types.ts +++ b/src/react-types.ts @@ -49,7 +49,7 @@ import { DipSwitch8Element } from './dip-switch-8-element'; import { StepperMotorElement } from './stepper-motor-element'; import { HX711Element } from './hx711-element'; import { KS2EMDC5Element } from './ks2e-m-dc5-element'; -import { VID2805DualStepperElement } from './vid2805-dual-stepper-element'; +import { BiaxialStepperElement } from './biaxial-stepper-element'; type WokwiElement = Partial & React.ClassAttributes; @@ -104,7 +104,7 @@ declare global { 'wokwi-stepper-motor': WokwiElement; 'wokwi-hx711': WokwiElement; 'wokwi-ks2e-m-dc5': WokwiElement; - 'wokwi-vid2805-dual-stepper': WokwiElement; + 'wokwi-biaxial-stepper': WokwiElement; } } } diff --git a/src/vid2805-dual-stepper-element.stories.ts b/src/vid2805-dual-stepper-element.stories.ts deleted file mode 100644 index 1b6ca0c..0000000 --- a/src/vid2805-dual-stepper-element.stories.ts +++ /dev/null @@ -1,88 +0,0 @@ -import { html } from 'lit'; -import './vid2805-dual-stepper-element'; -import { StepperHand } from './vid2805-dual-stepper-element'; - -export default { - title: 'VID2805 Dual Stepper', - component: 'wokwi-vid2805-dual-stepper', - argTypes: { - outerLength: { control: { type: 'range', min: 20, max: 70 } }, - outerAngle: { control: { type: 'range', min: 0, max: 360 } }, - outerColour: { control: { type: 'color' } }, - outerShape: { options: ['arrow', 'plain', 'fancy'], control: { type: 'select' } }, - innerLength: { control: { type: 'range', min: 20, max: 70 } }, - innerAngle: { control: { type: 'range', min: 0, max: 360 } }, - innerColour: { control: { type: 'color' } }, - innerShape: { options: ['arrow', 'plain', 'fancy'], control: { type: 'select' } }, - }, - args: { - outerLength: 20, - outerAngle: 0, - outerColour: 'grey', - outerShape: 'plain', - innerLength: 20, - innerAngle: 0, - innerColour: 'darkgrey', - innerShape: 'plain', - }, -}; - -const Template = ({ - outerLength, - outerAngle, - outerColour, - outerShape, - innerLength, - innerAngle, - innerColour, - innerShape, - innerHand, - outerHand, -}) => html``; - -export const Default = Template.bind({}); -Default.args = { - innerHand: new StepperHand(25, 'red', 'arrow', 225), - outerHand: new StepperHand(30, 'green', 'arrow', 270), -}; - -export const NineOclock = Template.bind({}); -NineOclock.args = { - innerHand: new StepperHand(70, 'silver', 'plain', 0), - outerHand: new StepperHand(40, 'gold', 'plain', 270), -}; - -export const SixOclock = Template.bind({}); -SixOclock.args = { - innerHand: new StepperHand(70, 'silver', 'plain', 0), - outerHand: new StepperHand(40, 'gold', 'plain', 180), -}; - -export const ThreeOclock = Template.bind({}); -ThreeOclock.args = { - innerHand: new StepperHand(70, 'silver', 'plain', 270), - outerHand: new StepperHand(50, 'gold', 'plain', 90), -}; - -export const TenPastTen = Template.bind({}); -TenPastTen.args = { - innerHand: new StepperHand(70, 'silver', 'plain', 60), - outerHand: new StepperHand(60, 'gold', 'plain', 300), -}; - -export const SameLength = Template.bind({}); -SameLength.args = { - innerHand: new StepperHand(30, 'blue', 'plain', 0), - outerHand: new StepperHand(30, 'green', 'plain', 180), -}; diff --git a/src/vid2805-dual-stepper-element.ts b/src/vid2805-dual-stepper-element.ts deleted file mode 100644 index acd4629..0000000 --- a/src/vid2805-dual-stepper-element.ts +++ /dev/null @@ -1,191 +0,0 @@ -import { html, LitElement, svg } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; -import { ElementPin } from '.'; -import { mmToPix } from './utils/units'; - -export type HandShape = 'arrow' | 'plain'; // | 'fancy'; - -export class StepperHand { - /** - * length used to control hand length - */ - length = 25; - - /** - * colour used to paint the hand - */ - colour = ''; - - /** - * hand shape selects from predefined shape paths - */ - shape: HandShape = 'plain'; - - /** - * the current hand angle - */ - angle = 0; - - constructor(length = 25, colour = '', shape: HandShape = 'plain', angle = 0) { - this.angle = angle; - this.colour = colour; - this.shape = shape; - this.length = length; - } -} - -@customElement('wokwi-vid2805-dual-stepper') -export class VID2805DualStepperElement extends LitElement { - @property() outerHand = new StepperHand(); - @property() innerHand = new StepperHand(); - - private coords() { - const _x = 112.3; // x location of shaft point - const _y = 50; // y location of shaft point - const _innerOff = 4.7; // offset to center of inner hand's ring - const _outerOff = 9; // offset to center of outer hand's ring - let _trY = 0; - - const ml = Math.max(this.innerHand.length, this.outerHand.length); - if (ml > 30) { - _trY = ml - 30; - } - return { - x: _x, - y: _y, - innerOff: _innerOff, - outerOff: _outerOff, - trY: _trY, - }; - } - - get pinInfo(): ElementPin[] { - const { x, y, innerOff, outerOff, trY } = this.coords(); - const pinXY = (x: number) => { - return { x: 15 + trY, y: (48.5 - x * 2.54) * mmToPix }; - }; - - const pi = [ - { name: 'A1+', ...pinXY(0), number: 1, signals: [] }, - { name: 'A1-', ...pinXY(1), number: 2, signals: [] }, - { name: 'B1+', ...pinXY(2), number: 3, signals: [] }, - { name: 'B1-', ...pinXY(3), number: 4, signals: [] }, - { name: 'A2+', ...pinXY(4), number: 5, signals: [] }, - { name: 'A2-', ...pinXY(5), number: 6, signals: [] }, - { name: 'B2+', ...pinXY(6), number: 7, signals: [] }, - { name: 'B2-', ...pinXY(7), number: 8, signals: [] }, - ]; - - console.debug(pi); - return pi; - } - - readonly handMap: { [key: string]: string } = { - outer_plain_hand: - 'm0,0 c0,5,4,9,9,9,3.28,0,6.13-1.73,7.7-4.33v.03c.5-.8,1.2-1.6,2.1-2.1,.8-.5,1.8-.8,2.8-.8h${len}c1,0,1.8-.8,1.8-1.8s-.8-1.8-1.8-1.8h-${len}c-1,0-1.9-.3-2.8-.8-.8-.5-1.6-1.2-2.1-2h0c-1.56-2.64-4.43-4.4-7.74-4.4-5,0-9,4.1-9,9Zm3.5,0c0-3,2.4-5.4,5.5-5.4s5.5,2.4,5.5,5.4-2.5,5.4-5.5,5.4-5.5-2.4-5.5-5.4Z', - outer_arrow_hand: - 'm 0 0 c 0 5 4 9 9 9 c 3.89 0 7.16 -2.42 8.43 -5.85 c 0.3 -0.58 0.78 -1.16 1.27 -1.45 c 0.6 -0.3 1.29 -0.4 1.99 -0.2 c 0 0 0 0 0 0 h 0.01 s 0.9 0.2 0.9 0.2 l ${len} -1.7 l -${len} -1.9 l -0.9 0.3 c -0.7 0.2 -1.4 0.1 -2 -0.2 c -0.6 -0.3 -1.1 -0.8 -1.3 -1.5 c 0 0 -0.01 0.02 -0.02 0.02 c -1.38 -3.72 -4.38 -5.72 -8.38 -5.72 c -5 0 -9 4 -9 9 Z m 3.5 0 c 0 -3.1 2.5 -5.5 5.5 -5.5 s 5.5 2.5 5.5 5.5 s -2.5 5.5 -5.5 5.5 s -5.5 -2.5 -5.5 -5.5 Z', - inner_plain_hand: - 'm0,0 c 0 2.6 2.1 4.7 4.7 4.7 c 1.27 0 2.41 -0.5 3.25 -1.31 h 0 c 0.5 -0.49 1.1 -0.89 1.8 -1.19 c 0.7 -0.3 1.4 -0.4 2.1 -0.4 h ${len} c 1 0 1.8 -0.8 1.8 -1.8 s -0.8 -1.8 -1.8 -1.8 h -${len} s -0.06 0 -0.06 0 c -0.7 0 -1.5 -0.1 -2.1 -0.4 c -0.7 -0.3 -1.3 -0.7 -1.8 -1.2 h 0 c -0.84 -0.8 -1.98 -1.3 -3.24 -1.3 c -2.6 0 -4.7 2.1 -4.7 4.7 Z m 2.7 0 c 0 -1.1 0.9 -2 2 -2 s 2 0.9 2 2 s -0.9 2 -2 2 s -2 -0.9 -2 -2 Z', - inner_arrow_hand: - 'm 0 0 c 0 2.6 2.1 4.7 4.7 4.7 c 1.37 0 2.59 -0.59 3.44 -1.52 c 0.7 -0.7 1.5 -1.2 2.5 -1.5 s 2 -0.3 2.9 -0.1 l 0.9 0.2 l ${len} -1.8 l -${len} -1.8 l -0.9 0.2 c -1 0.2 -2 0.2 -2.9 -0.1 c -1 -0.3 -1.8 -0.8 -2.5 -1.5 c -0.86 -0.93 -2.08 -1.52 -3.44 -1.52 c -2.6 0 -4.7 2.1 -4.7 4.7 z m 2.7 0 c 0 -1.1 0.9 -2 2 -2 s 2 0.9 2 2 s -0.9 2 -2 2 s -2 -0.9 -2 -2 z', - }; - - render() { - let inner_svg = this.handMap['inner_' + this.innerHand.shape + '_hand']; - let outer_svg = this.handMap['outer_' + this.outerHand.shape + '_hand']; - - // todo: validate hands - - // replace length from args - if (this.innerHand.length > 70) { - this.innerHand.length = 70; - } - if (this.outerHand.length > 70) { - this.outerHand.length = 70; - } - - inner_svg = inner_svg.split('${len}').join(this.innerHand.length.toString()); - outer_svg = outer_svg.split('${len}').join(this.outerHand.length.toString()); - - const { x, y, innerOff, outerOff, trY } = this.coords(); - console.debug(this.coords()); - console.debug(trY); - console.debug(x); - console.debug(y); - - return html` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `; - } -} From f620f127cc0419c64cf02323b1e34c1cf65efd90 Mon Sep 17 00:00:00 2001 From: bonnyr Date: Thu, 29 Sep 2022 19:44:24 -0700 Subject: [PATCH 8/8] fixed base/ribs rotation to simplify positioning. Tightened the svg element size as much as possible. stopped moving the element based on hand size as requested. --- src/biaxial-stepper-element.stories.ts | 26 ++++++--- src/biaxial-stepper-element.ts | 74 +++++++++++--------------- 2 files changed, 51 insertions(+), 49 deletions(-) diff --git a/src/biaxial-stepper-element.stories.ts b/src/biaxial-stepper-element.stories.ts index b6d977b..75eb84d 100644 --- a/src/biaxial-stepper-element.stories.ts +++ b/src/biaxial-stepper-element.stories.ts @@ -48,13 +48,13 @@ const Template = ({ export const Default = Template.bind({}); Default.args = { - innerHandLength: 25, - innerHandColor: 'red', - innerHandShape: 'arrow', - innerHandAngle: 225, - outerHandLength: 30, - outerHandColor: 'green', - outerHandShape: 'arrow', + innerHandLength: 70, + innerHandColor: 'silver', + innerHandShape: 'plain', + innerHandAngle: 90, + outerHandLength: 70, + outerHandColor: 'gold', + outerHandShape: 'plain', outerHandAngle: 270, }; @@ -118,6 +118,18 @@ SameLength.args = { outerHandAngle: 180, }; +export const LongArrows = Template.bind({}); +LongArrows.args = { + innerHandLength: 70, + innerHandColor: 'blue', + innerHandShape: 'arrow', + innerHandAngle: 90, + outerHandLength: 70, + outerHandColor: 'green', + outerHandShape: 'arrow', + outerHandAngle: 270, +}; + export const OrnateClock = Template.bind({}); OrnateClock.args = { innerHandLength: 70, diff --git a/src/biaxial-stepper-element.ts b/src/biaxial-stepper-element.ts index 9662582..50cdc44 100644 --- a/src/biaxial-stepper-element.ts +++ b/src/biaxial-stepper-element.ts @@ -6,8 +6,8 @@ import { mmToPix } from './utils/units'; type HandShape = 'arrow' | 'plain' | 'ornate'; type HandDesc = { xOff: number; yOff: number; path: string }; -const SHAFT_X = 112.3; // x location of shaft point -const SHAFT_Y = 45; // y location of shaft point +const SHAFT_X = 60; // x location of shaft point +const SHAFT_Y = 77; // y location of shaft point const OUTER_OFFSET = 9; // offset to center of outer hand's ring const INNER_OFFSET = 4.7; // offset to center of inner hand's ring const ORNATE_OUTER_OFFSET = 9; // offset to center of outer ornate hand's ring @@ -41,8 +41,8 @@ export class BiaxialStepperElement extends LitElement { @property() innerHandShape: 'arrow' | 'plain' | 'ornate' = 'plain'; get pinInfo(): ElementPin[] { - const pinXY = (x: number) => { - return { x: 15 + this.trY(), y: (48.5 - x * 2.54) * mmToPix }; + const pinXY = (y: number) => { + return { x: 45, y: (28.9 + y * 2.54) * mmToPix }; }; return [ @@ -61,13 +61,13 @@ export class BiaxialStepperElement extends LitElement { outerPlainHand: (len: number) => ({ xOff: OUTER_OFFSET, yOff: OUTER_OFFSET, - path: `m0,0 c0,5,4,9,9,9,3.28,0,6.13-1.73,7.7-4.33v.03c.5-.8,1.2-1.6,2.1-2.1,.8-.5,1.8-.8,2.8-.8h${len}c1,0,1.8-.8,1.8-1.8s-.8-1.8-1.8-1.8h-${len}c-1,0-1.9-.3-2.8-.8-.8-.5-1.6-1.2-2.1-2h0c-1.56-2.64-4.43-4.4-7.74-4.4-5,0-9,4.1-9,9Zm3.5,0c0-3,2.4-5.4,5.5-5.4s5.5,2.4,5.5,5.4-2.5,5.4-5.5,5.4-5.5-2.4-5.5-5.4Z`, + path: `m0,0 c0,5,4,9,9,9,3.28,0,6.13-1.73,7.7-4.33v.03c.5-.8,1.2-1.6,2.1-2.1,.8-.5,1.8-.8,2.8-.8 h 20 h${len}c1,0,1.8-.8,1.8-1.8s-.8-1.8-1.8-1.8h-${len} h -20 c-1,0-1.9-.3-2.8-.8-.8-.5-1.6-1.2-2.1-2h0c-1.56-2.64-4.43-4.4-7.74-4.4-5,0-9,4.1-9,9Zm3.5,0c0-3,2.4-5.4,5.5-5.4s5.5,2.4,5.5,5.4-2.5,5.4-5.5,5.4-5.5-2.4-5.5-5.4Z`, }), outerArrowHand: (len: number): HandDesc => ({ xOff: OUTER_OFFSET, yOff: OUTER_OFFSET, - path: `m 0 0 c 0 5 4 9 9 9 c 3.89 0 7.16 -2.42 8.43 -5.85 c 0.3 -0.58 0.78 -1.16 1.27 -1.45 c 0.6 -0.3 1.29 -0.4 1.99 -0.2 c 0 0 0 0 0 0 h 0.01 s 0.9 0.2 0.9 0.2 l ${len} -1.7 l -${len} -1.9 l -0.9 0.3 c -0.7 0.2 -1.4 0.1 -2 -0.2 c -0.6 -0.3 -1.1 -0.8 -1.3 -1.5 c 0 0 -0.01 0.02 -0.02 0.02 c -1.38 -3.72 -4.38 -5.72 -8.38 -5.72 c -5 0 -9 4 -9 9 Z m 3.5 0 c 0 -3.1 2.5 -5.5 5.5 -5.5 s 5.5 2.5 5.5 5.5 s -2.5 5.5 -5.5 5.5 s -5.5 -2.5 -5.5 -5.5 Z`, + path: `m 0 0 c 0 5 4 9 9 9 c 3.89 0 7.16 -2.42 8.43 -5.85 c 0.3 -0.58 0.78 -1.16 1.27 -1.45 c 0.6 -0.3 1.29 -0.4 1.99 -0.2 c 0 0 0 0 0 0 h 0.01 s 0.9 0.2 0.9 0.2 h 20 l ${len} -1.7 l -${len} -1.9 h -20 l -0.9 0.3 c -0.7 0.2 -1.4 0.1 -2 -0.2 c -0.6 -0.3 -1.1 -0.8 -1.3 -1.5 c 0 0 -0.01 0.02 -0.02 0.02 c -1.38 -3.72 -4.38 -5.72 -8.38 -5.72 c -5 0 -9 4 -9 9 Z m 3.5 0 c 0 -3.1 2.5 -5.5 5.5 -5.5 s 5.5 2.5 5.5 5.5 s -2.5 5.5 -5.5 5.5 s -5.5 -2.5 -5.5 -5.5 Z`, }), outerOrnateHand: (len: number): HandDesc => ({ @@ -79,7 +79,7 @@ export class BiaxialStepperElement extends LitElement { innerPlainHand: (len: number): HandDesc => ({ xOff: INNER_OFFSET, yOff: INNER_OFFSET, - path: `m0,0 c 0 2.6 2.1 4.7 4.7 4.7 c 1.27 0 2.41 -0.5 3.25 -1.31 h 0 c 0.5 -0.49 1.1 -0.89 1.8 -1.19 c 0.7 -0.3 1.4 -0.4 2.1 -0.4 h ${len} c 1 0 1.8 -0.8 1.8 -1.8 s -0.8 -1.8 -1.8 -1.8 h -${len} s -0.06 0 -0.06 0 c -0.7 0 -1.5 -0.1 -2.1 -0.4 c -0.7 -0.3 -1.3 -0.7 -1.8 -1.2 h 0 c -0.84 -0.8 -1.98 -1.3 -3.24 -1.3 c -2.6 0 -4.7 2.1 -4.7 4.7 Z m 2.7 0 c 0 -1.1 0.9 -2 2 -2 s 2 0.9 2 2 s -0.9 2 -2 2 s -2 -0.9 -2 -2 Z`, + path: `m0,0 c 0 2.6 2.1 4.7 4.7 4.7 c 1.27 0 2.41 -0.5 3.25 -1.31 h 0 c 0.5 -0.49 1.1 -0.89 1.8 -1.19 c 0.7 -0.3 1.4 -0.4 2.1 -0.4 h 25 h ${len} c 1 0 1.8 -0.8 1.8 -1.8 s -0.8 -1.8 -1.8 -1.8 h -${len} h -25 s -0.06 0 -0.06 0 c -0.7 0 -1.5 -0.1 -2.1 -0.4 c -0.7 -0.3 -1.3 -0.7 -1.8 -1.2 h 0 c -0.84 -0.8 -1.98 -1.3 -3.24 -1.3 c -2.6 0 -4.7 2.1 -4.7 4.7 Z m 2.7 0 c 0 -1.1 0.9 -2 2 -2 s 2 0.9 2 2 s -0.9 2 -2 2 s -2 -0.9 -2 -2 Z`, }), innerArrowHand: (len: number): HandDesc => ({ @@ -95,16 +95,6 @@ export class BiaxialStepperElement extends LitElement { }), }; - private trY(): number { - let ml = Math.max(this.innerHandLength, this.outerHandLength); - - if (ml > BASE_MOVE_THOLD) { - ml -= BASE_MOVE_THOLD; - } - - return ml; - } - private cap(s: string) { return s.charAt(0).toUpperCase() + s.slice(1); } @@ -131,10 +121,9 @@ export class BiaxialStepperElement extends LitElement { const x = SHAFT_X; const y = SHAFT_Y; - const trY = this.trY(); return html` - + - + - - - - - - - - - + + + + + + + + + - + + - + - + - - + + - - + + - - + + - - + + @@ -202,7 +192,7 @@ export class BiaxialStepperElement extends LitElement { @@ -212,7 +202,7 @@ export class BiaxialStepperElement extends LitElement {