Skip to content

Commit 4f0a0a3

Browse files
AriellaEAriellaE
committed
feat: add stepper motor
wokwi/wokwi-features#191
1 parent c77afa9 commit 4f0a0a3

File tree

4 files changed

+200
-0
lines changed

4 files changed

+200
-0
lines changed

‎src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,3 +47,4 @@ export { ILI9341Element } from './ili9341-element';
4747
export { LedBarGraphElement } from './led-bar-graph-element';
4848
export { MicrosdCardElement } from './microsd-card-element';
4949
export { DipSwitch8Element } from './dip-switch-8-element';
50+
export { StepperMotorElement } from './stepper-motor-element';

‎src/react-types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import { ILI9341Element } from './ili9341-element';
4646
import { LedBarGraphElement } from './led-bar-graph-element';
4747
import { MicrosdCardElement } from './microsd-card-element';
4848
import { DipSwitch8Element } from './dip-switch-8-element';
49+
import { StepperMotorElement } from './stepper-motor-element';
4950

5051
type WokwiElement<T> = Partial<T> & React.ClassAttributes<T>;
5152

@@ -97,6 +98,7 @@ declare global {
9798
'wokwi-led-bar-graph': WokwiElement<LedBarGraphElement>;
9899
'wokwi-microsd-card': WokwiElement<MicrosdCardElement>;
99100
'wokwi-dip-switch-8': WokwiElement<DipSwitch8Element>;
101+
'wokwi-stepper-motor': WokwiElement<StepperMotorElement>;
100102
}
101103
}
102104
}

‎src/stepper-motor-element.stories.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { html } from 'lit';
2+
import './stepper-motor-element';
3+
4+
export default {
5+
title: 'Stepper Motor',
6+
component: 'wokwi-stepper-motor',
7+
argTypes: {
8+
angle: { control: { type: 'range', min: 0, max: 360 } },
9+
},
10+
args: {
11+
angle: 0,
12+
units: '',
13+
value: '',
14+
},
15+
};
16+
17+
const Template = ({ angle, units, value }) =>
18+
html`<wokwi-stepper-motor .angle=${angle} .units=${units} .value=${value}></wokwi-stepper-motor>`;
19+
20+
export const Default = Template.bind({});
21+
Default.args = {};
22+
23+
export const Rotated90 = Template.bind({});
24+
Rotated90.args = { angle: 90, units: 'degrees', value: '90' };
25+
26+
export const Steps = Template.bind({});
27+
Steps.args = { angle: 180, value: '52,500', units: 'steps' };

‎src/stepper-motor-element.ts

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
import { html, LitElement } from 'lit';
2+
import { customElement, property } from 'lit/decorators.js';
3+
import { ElementPin } from '.';
4+
5+
@customElement('wokwi-stepper-motor')
6+
export class StepperMotorElement extends LitElement {
7+
@property() angle = 0;
8+
@property() value = '';
9+
@property() units = '';
10+
11+
readonly pinInfo: ElementPin[] = [
12+
{ name: 'A+', y: 237, x: 108, number: 1, signals: [] },
13+
{ name: 'A-', y: 237, x: 98, number: 2, signals: [] },
14+
{ name: 'B+', y: 237, x: 117, number: 3, signals: [] },
15+
{ name: 'B-', y: 237, x: 127, number: 4, signals: [] },
16+
];
17+
18+
render() {
19+
return html`
20+
<svg
21+
width="57mm"
22+
height="63.349mm"
23+
version="1.1"
24+
viewBox="0 0 57 63.349"
25+
xmlns="http://www.w3.org/2000/svg"
26+
xmlns:xlink="http://www.w3.org/1999/xlink"
27+
>
28+
<defs>
29+
<linearGradient
30+
id="linearGradient3777"
31+
x1="17.567"
32+
x2="197.27"
33+
y1="171.8"
34+
y2="171.8"
35+
gradientTransform="matrix(.31539 0 0 .31539 9.0021 56.33)"
36+
gradientUnits="userSpaceOnUse"
37+
>
38+
<stop stop-color="#666" offset="0" />
39+
<stop stop-color="#666" stop-opacity="0" offset="1" />
40+
</linearGradient>
41+
<linearGradient
42+
id="linearGradient5454"
43+
x1="339.07"
44+
x2="478.3"
45+
y1="660.79"
46+
y2="660.79"
47+
gradientTransform="matrix(.083446 0 0 .083446 9.845 56.471)"
48+
gradientUnits="userSpaceOnUse"
49+
>
50+
<stop stop-color="#9d9d9d" offset="0" />
51+
<stop stop-color="#9d9d9d" stop-opacity="0" offset="1" />
52+
</linearGradient>
53+
<linearGradient
54+
id="linearGradient29501"
55+
x1="33.418"
56+
x2="53.905"
57+
y1="114.39"
58+
y2="113.37"
59+
gradientUnits="userSpaceOnUse"
60+
>
61+
<stop stop-color="#9d9d9d" offset="0" />
62+
<stop stop-color="#fdfafa" stop-opacity=".99216" offset=".29501" />
63+
<stop stop-opacity=".98039" offset="1" />
64+
</linearGradient>
65+
</defs>
66+
67+
<!-- Body -->
68+
<g transform="translate(-14.38 -82.486)">
69+
<g stroke-linecap="round" stroke-linejoin="round">
70+
<rect
71+
x="14.543"
72+
y="82.648"
73+
width="56.675"
74+
height="55.731"
75+
rx="4.7308"
76+
ry="4.6584"
77+
fill="url(#linearGradient3777)"
78+
opacity=".62"
79+
stroke="#000"
80+
stroke-width=".3245"
81+
/>
82+
<circle cx="20.407" cy="88.675" r="1.7314" fill="#666" stroke-width=".47984" />
83+
<circle
84+
cx="65.732"
85+
cy="88.585"
86+
r="1.7314"
87+
fill="#666"
88+
stroke-linecap="round"
89+
stroke-linejoin="round"
90+
stroke-width=".47984"
91+
/>
92+
<ellipse cx="65.704" cy="88.613" rx="1.0232" ry=".99314" fill="#e6e6e6" opacity=".73" />
93+
<circle
94+
cx="66.278"
95+
cy="133.65"
96+
r="1.7314"
97+
fill="#666"
98+
stroke-linecap="round"
99+
stroke-linejoin="round"
100+
stroke-width=".47984"
101+
/>
102+
<ellipse cx="66.25" cy="133.54" rx="1.0232" ry=".99314" fill="#e6e6e6" opacity=".73" />
103+
<circle
104+
cx="19.6"
105+
cy="133.13"
106+
r="1.7314"
107+
fill="#666"
108+
stroke-linecap="round"
109+
stroke-linejoin="round"
110+
stroke-width=".47984"
111+
/>
112+
<ellipse cx="19.572" cy="133.16" rx="1.0232" ry=".99314" fill="#ccc" opacity=".73" />
113+
<ellipse cx="20.378" cy="88.702" rx="1.0232" ry=".99314" fill="#ccc" opacity=".73" />
114+
115+
<!-- Rotator -->
116+
<circle
117+
cx="43.816"
118+
cy="111.05"
119+
r="10.25"
120+
fill="#868686"
121+
fill-opacity=".89602"
122+
opacity=".73"
123+
stroke="url(#linearGradient29501)"
124+
stroke-width=".41429"
125+
/>
126+
<path
127+
transform="rotate(${this.angle}, 43.82, 111.2)"
128+
d="m40.056 106.86a5.3616 5.3616 0 0 0-1.9696 4.1497 5.3616 5.3616 0 0 0 5.3616 5.3616 5.3616 5.3616 0 0 0 5.3616-5.3616 5.3616 5.3616 0 0 0-1.9672-4.1497z"
129+
fill="#4d4d4d"
130+
stroke="url(#linearGradient5454)"
131+
stroke-width=".57968"
132+
/>
133+
</g>
134+
135+
<g
136+
transform="matrix(-.0031398 -.26456 .26456 -.0031398 32.829 149.58)"
137+
clip-rule="evenodd"
138+
fill-rule="evenodd"
139+
stroke-linecap="round"
140+
stroke-linejoin="round"
141+
stroke-miterlimit="1.5"
142+
>
143+
<!-- Pins -->
144+
<path
145+
id="pin"
146+
fill="#9f9f9f"
147+
d="m15.259 56.3c-0.382-2.2e-5 -0.74801 0.15196-1.019 0.42194-0.27002 0.26998-0.42104 0.63698-0.42106 1.019-2.2e-5 0.382 0.15096 0.74801 0.42094 1.019 0.27098 0.27002 0.63698 0.42204 1.019 0.42206 5.242 2.96e-4 23.147 0.0013 26.132 0.0015 0.233 1.4e-5 0.42301-0.18998 0.42302-0.42398 3.1e-5 -0.545 8.4e-5 -1.489 1.15e-4 -2.035 1.3e-5 -0.233-0.18998-0.42301-0.42298-0.42302-2.985-1.68e-4 -20.89-0.0012-26.132-0.0015z"
148+
/>
149+
150+
<use xlink:href="#pin" y="-9.6" />
151+
<use xlink:href="#pin" y="-19.2" />
152+
<use xlink:href="#pin" y="-28.8" />
153+
154+
<!-- Text -->
155+
<text
156+
transform="rotate(90)"
157+
font-family="arial"
158+
font-size="14.667px"
159+
text-align="center"
160+
text-anchor="middle"
161+
>
162+
<tspan x="45" y="-58.62619" font-size="14px">${this.units}</tspan>
163+
<tspan x="45" y="-75.066772" font-size="24px">${this.value}</tspan>
164+
</text>
165+
</g>
166+
</g>
167+
</svg>
168+
`;
169+
}
170+
}

0 commit comments

Comments
 (0)