Skip to content

Commit e0c934f

Browse files
urishurish
committed
feat(hc-sr04): add hc-sr04 element
based on the following SVG file, licensed as public domain: https://freesvg.org/ultrasonic-distance-measurement-module
1 parent a42ceea commit e0c934f

File tree

4 files changed

+120
-0
lines changed

4 files changed

+120
-0
lines changed

‎src/hc-sr04-element.stories.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { html } from 'lit-html';
2+
import './hc-sr04-element';
3+
4+
export default {
5+
title: 'HC-SR04',
6+
component: 'wokwi-hc-sr04',
7+
};
8+
9+
export const HCSR04 = () => html`<wokwi-hc-sr04></wokwi-hc-sr04>`;

‎src/hc-sr04-element.ts‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import { customElement, html, LitElement } from 'lit-element';
2+
import { ElementPin } from './pin';
3+
4+
@customElement('wokwi-hc-sr04')
5+
export class HCSR04Element extends LitElement {
6+
readonly pinInfo: ElementPin[] = [
7+
{ name: 'VCC', x: 71.78, y: 94.5, signals: [{ type: 'power', signal: 'VCC', voltage: 5 }] },
8+
{ name: 'TRIG', x: 79.67, y: 94.5, signals: [] },
9+
{ name: 'ECHO', x: 87.56, y: 94.5, signals: [] },
10+
{ name: 'GND', x: 95.45, y: 94.5, signals: [{ type: 'power', signal: 'GND' }] },
11+
];
12+
13+
render() {
14+
return html`
15+
<svg
16+
xmlns="http://www.w3.org/2000/svg"
17+
xmlns:xlink="http://www.w3.org/1999/xlink"
18+
viewBox="0 0 45 25"
19+
height="25mm"
20+
width="45mm"
21+
font-family="monospace"
22+
>
23+
<defs>
24+
<pattern patternUnits="userSpaceOnUse" width="2" height="2" id="checkerboard">
25+
<path d="M0 0h1v1H0zM1 1h1v1H1z" />
26+
</pattern>
27+
<radialGradient id="grad1" cx="8.96" cy="10.04" r="3.58" gradientUnits="userSpaceOnUse">
28+
<stop stop-color="#777" offset="0" />
29+
<stop stop-color="#b9b9b9" offset="1" />
30+
</radialGradient>
31+
<g id="sensor-unit">
32+
<circle cx="8.98" cy="10" r="8.61" fill="#dcdcdc" />
33+
<circle cx="8.98" cy="10" r="7.17" fill="#222" />
34+
<circle cx="8.98" cy="10" r="5.53" fill="#777" fill-opacity=".992" />
35+
<circle cx="8.98" cy="10" r="3.59" fill="url(#grad1)" />
36+
<circle cx="8.99" cy="10" r=".277" fill="#777" fill-opacity=".818" />
37+
<circle cx="8.98" cy="10" r="5.53" fill="url(#checkerboard)" opacity=".397" />
38+
</g>
39+
</defs>
40+
<path
41+
d="M0 0v20.948h45V0zm1.422.464a1 1 0 01.004 0 1 1 0 011 1 1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 01.996-1zm41.956 0a1 1 0 01.004 0 1 1 0 011 1 1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 01.996-1zM1.422 18.484a1 1 0 01.004 0 1 1 0 011 1 1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 01.996-1zm41.956 0a1 1 0 01.004 0 1 1 0 011 1 1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 01.996-1z"
42+
fill="#456f93"
43+
/>
44+
<path
45+
d="M15.293 5.888l2.934-2.934v3.124l2.944 2.943v10.143M23.269 19.037v-2.473l-.966-.965v-12.5l2.577 1.488 4.741 4.741"
46+
fill="none"
47+
stroke="#355a7c"
48+
stroke-width=".858"
49+
/>
50+
<use xlink:href="#sensor-unit" />
51+
<use xlink:href="#sensor-unit" x="27.12" />
52+
<g fill="none" stroke="#505132" stroke-width=".368">
53+
<circle cx="43.4" cy="1.46" r="1" />
54+
<circle cx="43.4" cy="19.5" r="1" />
55+
<circle cx="1.43" cy="1.46" r="1" />
56+
<circle cx="1.43" cy="19.5" r="1" />
57+
</g>
58+
<rect
59+
ry="2.07"
60+
y=".626"
61+
x="17.111"
62+
height="4.139"
63+
width="10.272"
64+
fill="#878787"
65+
stroke="#424242"
66+
stroke-width=".368"
67+
/>
68+
<g fill="black">
69+
<rect x="17.87" y="18" ry=".568" width="2.25" height="2.271" />
70+
<rect x="19.95" y="18" ry=".568" width="2.25" height="2.271" />
71+
<rect x="22.04" y="18" ry=".568" width="2.25" height="2.271" />
72+
<rect x="24.12" y="18" ry=".568" width="2.25" height="2.271" />
73+
</g>
74+
<g fill="#ccc" stroke-linecap="round" stroke-width=".21">
75+
<rect x="18.616" y="19" width=".75" height="7" rx=".2" />
76+
<rect x="20.702" y="19" width=".75" height="7" rx=".2" />
77+
<rect x="22.789" y="19" width=".75" height="7" rx=".2" />
78+
<rect x="24.875" y="19" width=".75" height="7" rx=".2" />
79+
</g>
80+
<text font-weight="400" font-size="2.2" fill="#e6e6e6" stroke-width=".055">
81+
<tspan y="8" x="18">
82+
HC-SR04
83+
</tspan>
84+
</text>
85+
<text
86+
transform="rotate(-90)"
87+
font-weight="400"
88+
font-size="1.55"
89+
fill="#e6e6e6"
90+
stroke-width=".039"
91+
>
92+
<tspan x="-17.591" y="19.561">
93+
Vcc
94+
</tspan>
95+
<tspan x="-17.591" y="21.654">
96+
Trig
97+
</tspan>
98+
<tspan x="-17.591" y="23.747">
99+
Echo
100+
</tspan>
101+
<tspan x="-17.591" y="25.84">
102+
Gnd
103+
</tspan>
104+
</text>
105+
</svg>
106+
`;
107+
}
108+
}

‎src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,4 @@ export { ArduinoNanoElement } from './arduino-nano-element';
2222
export { Ds1307Element } from './ds1307-element';
2323
export { LEDRingElement } from './led-ring-element';
2424
export { SlideSwitchElement } from './slide-switch-element';
25+
export { HCSR04Element } from './hc-sr04-element';

‎src/react-types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { ArduinoNanoElement } from './arduino-nano-element';
2121
import { Ds1307Element } from './ds1307-element';
2222
import { LEDRingElement } from './led-ring-element';
2323
import { SlideSwitchElement } from './slide-switch-element';
24+
import { HCSR04Element } from './hc-sr04-element';
2425

2526
declare global {
2627
namespace JSX {
@@ -45,6 +46,7 @@ declare global {
4546
'wokwi-ds1307': Partial<Ds1307Element>;
4647
'wokwi-neopixel-ring': Partial<LEDRingElement>;
4748
'wokwi-slide-switch': Partial<SlideSwitchElement>;
49+
'wokwi-hc-sr04': Partial<HCSR04Element>;
4850
}
4951
}
5052
}

0 commit comments

Comments
 (0)