rotated by 90deg, fixed a couple of inner/outer property mixups

Author: bonnyr-f5

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`
-  <wokwi-show-pins>
-    <wokwi-vid2805-dual-stepper></wokwi-vid2805-dual-stepper>
-  </wokwi-show-pins>
-`;
-
 const Template = ({
   outerLength,
   outerAngle,
@@ -47,20 +38,18 @@ const Template = ({
   innerShape,
   innerHand,
   outerHand,
-}) => html`<wokwi-show-pins>
-  <wokwi-vid2805-dual-stepper
-    .outerLength=${outerLength}
-    .outerAngle=${outerAngle}
-    .outerColour=${outerColour}
-    .outerShape=${outerShape}
-    .innerLength=${innerLength}
-    .innerAngle=${innerAngle}
-    .innerColour=${innerColour}
-    .innerShape=${innerShape}
-    .innerHand=${innerHand}
-    .outerHand=${outerHand}
-  ></wokwi-vid2805-dual-stepper>
-</wokwi-show-pins>`;
+}) => html`<wokwi-vid2805-dual-stepper
+  .outerLength=${outerLength}
+  .outerAngle=${outerAngle}
+  .outerColour=${outerColour}
+  .outerShape=${outerShape}
+  .innerLength=${innerLength}
+  .innerAngle=${innerAngle}
+  .innerColour=${innerColour}
+  .innerShape=${innerShape}
+  .innerHand=${innerHand}
+  .outerHand=${outerHand}
+></wokwi-vid2805-dual-stepper>`;
 
 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),
 };

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 {
             <stop stop-color="grey" offset="75%" />
         </linearGradient>
     </defs>
-      <g id="vid2805-translated" transform="translate(0,${trY})">
+      <g id="vid2805-translated" transform="translate(15,265) rotate(270 0 0) translate(0,${trY})">
 
       <!-- pins - translate to top of base, between holes -->
         <g id="pins" transform="scale(${mmToPix}) translate(21 3) ">
@@ -173,15 +173,15 @@ export class VID2805DualStepperElement extends LitElement {
           <g id="hours">
               <path class="cls-h" transform="
                 translate(${x} ${y + outerOff / 2})
-                rotate(${this.innerHand.angle}) 
+                rotate(${this.outerHand.angle}) 
                 translate(-${outerOff}, -${outerOff})" 
                 fill="${this.outerHand.colour}" d=${outer_svg} />
           </g>
           <g id="minutes">
               <path class="cls-h" 
                 transform="
                   translate(${x} ${y})
-                  rotate(${this.outerHand.angle}) 
+                  rotate(${this.innerHand.angle}) 
                   translate(-${innerOff}, -${innerOff})" 
                 fill="${this.innerHand.colour}" d=${inner_svg} />
           </g>