Skip to content

Commit 0f16975

Browse files
bonnyr-f5bonnyr-f5
committed
added debug view
1 parent c60938d commit 0f16975

File tree

2 files changed

+79
-29
lines changed

2 files changed

+79
-29
lines changed

‎src/vid2805-dual-stepper-element.stories.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,12 @@ export default {
3232
// .outerHand = ${new ClockHand(outerLength, outerColour, outerShape, outerAngle)}
3333

3434

35+
export const VIS2805 = () => html`
36+
<wokwi-show-pins>
37+
<wokwi-vid2805-dual-stepper></wokwi-vid2805-dual-stepper>
38+
</wokwi-show-pins>
39+
`;
40+
3541
const Template = ({outerLength, outerAngle, outerColour, outerShape,
3642
innerLength, innerAngle, innerColour, innerShape,
3743
innerHand, outerHand }) => html`<wokwi-vid2805-dual-stepper
@@ -68,6 +74,24 @@ NineOclock.args = {
6874
outerHand: new StepperHand(60, "gold", "plain", 0),
6975
};
7076

77+
export const SixOclock = Template.bind({});
78+
SixOclock.args = {
79+
innerHand: new StepperHand(70, "silver", "plain", 180),
80+
outerHand: new StepperHand(60, "gold", "plain", 0),
81+
};
82+
83+
export const ThreeOclock = Template.bind({});
84+
ThreeOclock.args = {
85+
innerHand: new StepperHand(70, "silver", "plain", 270),
86+
outerHand: new StepperHand(60, "gold", "plain", 90),
87+
};
88+
89+
export const TenPastTen = Template.bind({});
90+
TenPastTen.args = {
91+
innerHand: new StepperHand(70, "silver", "plain", 60),
92+
outerHand: new StepperHand(60, "gold", "plain", 300),
93+
};
94+
7195
export const SameLength = Template.bind({});
7296
SameLength.args = {
7397
innerHand: new StepperHand(20, "blue", "plain", 0),

‎src/vid2805-dual-stepper-element.ts‎

Lines changed: 55 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { html, LitElement, svg } from 'lit';
22
import { customElement, property} from 'lit/decorators.js';
33
import { ElementPin } from '.';
4+
import { mmToPix } from './utils/units';
45

56

67
export type HandShape = 'arrow' | 'plain'; // | 'fancy';
@@ -44,16 +45,43 @@ export class VID2805DualStepperElement extends LitElement {
4445
@property() outerHand = new StepperHand();
4546
@property() innerHand = new StepperHand();
4647

47-
readonly pinInfo: ElementPin[] = [
48-
{ name: 'A1+', y: 237, x: 98, number: 1, signals: [] },
49-
{ name: 'A1-', y: 237, x: 108, number: 2, signals: [] },
50-
{ name: 'B1+', y: 237, x: 117, number: 3, signals: [] },
51-
{ name: 'B1-', y: 237, x: 127, number: 4, signals: [] },
52-
{ name: 'A2+', y: 237, x: 137, number: 5, signals: [] },
53-
{ name: 'A2-', y: 237, x: 147, number: 6, signals: [] },
54-
{ name: 'B2+', y: 237, x: 157, number: 7, signals: [] },
55-
{ name: 'B2-', y: 237, x: 167, number: 8, signals: [] },
56-
];
48+
49+
private coords() {
50+
const x = 112.3; // x location of shaft point
51+
const y = 50; // y location of shaft point
52+
const innerOff = 4.7; // offset to center of inner hand's ring
53+
const outerOff = 9; // offset to center of outer hand's ring
54+
let trY = 0;
55+
56+
57+
const ml = Math.max(this.innerHand.length, this.outerHand.length);
58+
if (ml > 30) {
59+
trY = ml - 30;
60+
}
61+
return {
62+
x : x,
63+
y: y,
64+
innerOff : innerOff,
65+
outerOff: outerOff,
66+
trY : trY
67+
}
68+
}
69+
70+
get pinInfo(): ElementPin[] {
71+
const { x, y, innerOff, outerOff, trY} = this.coords();
72+
73+
return [
74+
{ name: 'A1+', y: trY, x: 58 * mmToPix, number: 1, signals: [] },
75+
{ name: 'A1-', y: trY, x: 65 * mmToPix, number: 2, signals: [] },
76+
{ name: 'B1+', y: trY, x: 72 * mmToPix, number: 3, signals: [] },
77+
{ name: 'B1-', y: trY, x: 79 * mmToPix, number: 4, signals: [] },
78+
{ name: 'A2+', y: trY, x: 86 * mmToPix, number: 5, signals: [] },
79+
{ name: 'A2-', y: trY, x: 93 * mmToPix, number: 6, signals: [] },
80+
{ name: 'B2+', y: trY, x: 100 * mmToPix, number: 7, signals: [] },
81+
{ name: 'B2-', y: trY, x: 107 * mmToPix, number: 8, signals: [] },
82+
];
83+
84+
}
5785

5886

5987
readonly handMap : {[key:string] : string } = {
@@ -66,11 +94,11 @@ export class VID2805DualStepperElement extends LitElement {
6694

6795
render() {
6896

69-
const x = 112.3; // x location of shaft point
70-
const y = 50; // y location of shaft point
71-
const innerOff = 4.7; // offset to center of inner hand's ring
72-
const outerOff = 9; // offset to center of outer hand's ring
73-
let trY = 0;
97+
// const x = 112.3; // x location of shaft point
98+
// const y = 50; // y location of shaft point
99+
// const innerOff = 4.7; // offset to center of inner hand's ring
100+
// const outerOff = 9; // offset to center of outer hand's ring
101+
// let trY = 0;
74102

75103
let inner_svg = this.handMap['inner_' + this.innerHand.shape + '_hand'];
76104
let outer_svg = this.handMap['outer_' + this.outerHand.shape + '_hand'];
@@ -88,13 +116,11 @@ export class VID2805DualStepperElement extends LitElement {
88116
inner_svg = inner_svg.split("${len}").join(this.innerHand.length.toString());
89117
outer_svg = outer_svg.split("${len}").join(this.outerHand.length.toString());
90118

91-
const ml = Math.max(this.innerHand.length, this.outerHand.length);
92-
if (ml > 30) {
93-
trY = ml - 30;
94-
}
119+
const { x, y, innerOff, outerOff, trY} = this.coords();
120+
95121

96122
return html`
97-
<svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 160">
123+
<svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" width=70mm height=70mm viewBox="0 0 180 180">
98124
<defs>
99125
<style>.cls-1{fill:#939598;}.cls-2{fill:#f1f2f2;}.cls-3{fill:#808285;}.cls-4{fill:#ed1f24;}.cls-5{fill:#70bf44;}.cls-6{fill:#414042;}
100126
.cls-h{fill:"blue";stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:.1px;
@@ -105,15 +131,15 @@ export class VID2805DualStepperElement extends LitElement {
105131
</defs>
106132
<g id="Layer_1-2" transform="translate(0,${trY})">
107133
<g id="scaled_body">
108-
<g id="pins">
109-
<path id="pin-1" class="cls-3" d="M58.42,86.17v12.76c0,.78,.63,1.42,1.42,1.42s1.42-.63,1.42-1.42v-12.76h-2.83Z" />
110-
<path id="pin-2" class="cls-3" d="M65.62,86.17v12.76c0,.78,.63,1.42,1.42,1.42s1.42-.63,1.42-1.42v-12.76h-2.83Z" />
111-
<path id="pin-3" class="cls-3" d="M72.82,86.17v12.76c0,.78,.63,1.42,1.42,1.42s1.42-.63,1.42-1.42v-12.76h-2.83Z" />
112-
<path id="pin-4" class="cls-3" d="M80.02,86.17v12.76c0,.78,.63,1.42,1.42,1.42s1.42-.63,1.42-1.42v-12.76h-2.83Z" />
113-
<path id="pin-5" class="cls-3" d="M87.22,86.17v12.76c0,.78,.63,1.42,1.42,1.42s1.42-.63,1.42-1.42v-12.76h-2.83Z" />
114-
<path id="pin-6" class="cls-3" d="M94.42,86.17v12.76c0,.78,.63,1.42,1.42,1.42s1.42-.63,1.42-1.42v-12.76h-2.83Z" />
115-
<path id="pin-7" class="cls-3" d="M101.62,86.17v12.76c0,.78,.63,1.42,1.42,1.42s1.42-.63,1.42-1.42v-12.76h-2.83Z" />
116-
<path id="pin-8" class="cls-3" d="M108.82,86.17v12.76c0,.78,.63,1.42,1.42,1.42s1.42-.63,1.42-1.42v-12.76h-2.83Z" />
134+
<g id="pins" transform="scale(${mmToPix})>
135+
<path id="pin-1" class="cls-3" d="m 58 0 v 5 c 0 2 2 2 2 0 v -5 z" />
136+
<path id="pin-2" class="cls-3" d="m 65 0 v 5 c 0 2 2 2 2 0 v -5 z" />
137+
<path id="pin-3" class="cls-3" d="m 72 0 v 5 c 0 2 2 2 2 0 v -5 z" />
138+
<path id="pin-4" class="cls-3" d="m 79 0 v 5 c 0 2 2 2 2 0 v -5 z" />
139+
<path id="pin-5" class="cls-3" d="m 86 0 v 5 c 0 2 2 2 2 0 v -5 z" />
140+
<path id="pin-6" class="cls-3" d="m 93 0 v 5 c 0 2 2 2 2 0 v -5 z" />
141+
<path id="pin-7" class="cls-3" d="m 100 0 v 5 c 0 2 2 2 2 0 v -5 z" />
142+
<path id="pin-8" class="cls-3" d="m 107 0 v 5 c 0 2 2 2 2 0 v -5 z" />
117143
</g>
118144
<path id="base" class="cls-6" d="M170.08,32.12c-4.98-15.86-18.92-27.75-35.9-29.71-1.2-1.4-2.96-2.31-4.96-2.31s-3.76,.91-4.96,2.31c-2.13,.25-4.2,.67-6.23,1.22H51.81c-1.93-.52-3.9-.92-5.92-1.17-1.2-1.48-3.01-2.45-5.07-2.45s-3.82,.94-5.02,2.39C19,4.27,5.19,15.86,0,31.41v27.09c5.15,15.43,18.82,26.97,35.45,28.97,1.2,1.56,3.06,2.58,5.17,2.58s3.98-1.02,5.17-2.58c2.18-.26,4.3-.7,6.37-1.28H117.67c2.07,.58,4.19,1.01,6.37,1.28,1.2,1.56,3.06,2.58,5.17,2.58s3.98-1.02,5.17-2.58c16.89-2.04,30.72-13.89,35.69-29.68v-25.67Z" />
119145
<g id="ribs">

0 commit comments

Comments
 (0)