HC-SR04 Ultrasonic Sensor Simulation Source Code Example

<style>
.hc-board{position:relative;width:100%;height:100%;line-height:0}.hc-board>svg{display:block;width:100%;height:100%}
.hc-panel.expanded{width:260px}.hc-value{font-size:24px;font-weight:600}.hc-controls input{width:100%;accent-color:#8bc8f4;margin:12px 0}
.hc-panel input:focus-visible{outline:2px solid #8bc8f4;outline-offset:2px}.hc-presets{display:flex;gap:8px;margin:0 0 12px;flex-wrap:wrap}.hc-presets button{flex:1}.hc-toggle{width:100%}
</style>
<div class="hc-board"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1775.472 929.339">
<defs><linearGradient id="board" x2="0.2" y2="1"><stop stop-color="#1768a1"/><stop offset="1" stop-color="#104f83"/></linearGradient><radialGradient id="rim"><stop offset="0.76" stop-color="#929ca2"/><stop offset="0.80" stop-color="#f9fcfd"/><stop offset="0.91" stop-color="#dae1e5"/><stop offset="0.97" stop-color="#9ca8ad"/><stop offset="1" stop-color="#5b6c75"/></radialGradient><radialGradient id="inner"><stop stop-color="#abb4b8"/><stop offset="0.45" stop-color="#707b80"/><stop offset="0.65" stop-color="#303a40"/><stop offset="1" stop-color="#10171d"/></radialGradient><pattern id="mesh" width="13" height="13" patternUnits="userSpaceOnUse"><path d="M0 0H13M0 0V13" fill="none" stroke="#9ca6a8" stroke-width="2"/></pattern><linearGradient id="metal"><stop stop-color="#8f9da5"/><stop offset="0.45" stop-color="#f5f7f7"/><stop offset="1" stop-color="#7a8b95"/></linearGradient></defs>
<rect x="4" y="4" width="1767.472" height="782" rx="13" fill="url(#board)" stroke="#123c60" stroke-width="8"/><circle cx="54" cy="54" r="35" fill="#ccd2ca"/><circle cx="54" cy="54" r="23" fill="#263b44"/><circle cx="54" cy="738" r="35" fill="#ccd2ca"/><circle cx="54" cy="738" r="23" fill="#263b44"/><circle cx="1721" cy="54" r="35" fill="#ccd2ca"/><circle cx="1721" cy="54" r="23" fill="#263b44"/><circle cx="1721" cy="738" r="35" fill="#ccd2ca"/><circle cx="1721" cy="738" r="23" fill="#263b44"/><g fill="none" stroke="#5d90ae" stroke-width="6" opacity="0.55"><path d="M765 718V382L790 355V180M840 718V364L818 330V185M920 718V370L948 342V180M990 718V390L1014 355V185"/></g><circle cx="355" cy="397" r="309" fill="url(#rim)"/><circle cx="355" cy="397" r="257" fill="url(#inner)"/><circle cx="355" cy="397" r="252" fill="url(#mesh)"/><circle cx="355" cy="397" r="257" fill="none" stroke="#26333b" stroke-width="6"/><circle cx="1420" cy="397" r="309" fill="url(#rim)"/><circle cx="1420" cy="397" r="257" fill="url(#inner)"/><circle cx="1420" cy="397" r="252" fill="url(#mesh)"/><circle cx="1420" cy="397" r="257" fill="none" stroke="#26333b" stroke-width="6"/><rect x="716" y="38" width="340" height="133" rx="65" fill="url(#metal)" stroke="#71828c" stroke-width="6"/><rect x="731" y="49" width="310" height="109" rx="53" fill="#d2d8d9" stroke="#edf0ef" stroke-width="3"/><g aria-label="HC-SR04" transform="translate(708 222) scale(6)" fill="none" stroke="#f2f3df" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"><path transform="translate(0 0)" d="M0 0V10M6 0V10M0 5H6"/><path transform="translate(9 0)" d="M6 0H0V10H6"/><path transform="translate(18 0)" d="M0 5H6"/><path transform="translate(27 0)" d="M6 0H0V5H6V10H0"/><path transform="translate(36 0)" d="M0 10V0H6V5H0M3 5L6 10"/><path transform="translate(45 0)" d="M0 0H6V10H0ZM0 10L6 0"/><path transform="translate(54 0)" d="M4 10V0L0 7H6"/></g><g aria-label="T" transform="translate(105 692) scale(6)" fill="none" stroke="#f2f3df" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"><path transform="translate(0 0)" d="M0 0H6M3 0V10"/></g><g aria-label="R" transform="translate(1617 692) scale(6)" fill="none" stroke="#f2f3df" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"><path transform="translate(0 0)" d="M0 10V0H6V5H0M3 5L6 10"/></g><rect x="711.31191" y="761" width="26" height="160.02660000000003" fill="url(#metal)"/><ellipse cx="724.31191" cy="738" rx="29" ry="39" fill="#a7b9bf" stroke="#c4d4d9" stroke-width="5"/><circle cx="724.31191" cy="738" r="14" fill="#43535a"/><g transform="translate(711.31191 686) rotate(-90)"><g aria-label="VCC" transform="translate(0 0) scale(4)" fill="none" stroke="#f2f3df" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"><path transform="translate(0 0)" d="M0 0L3 10L6 0"/><path transform="translate(9 0)" d="M6 0H0V10H6"/><path transform="translate(18 0)" d="M6 0H0V10H6"/></g></g><circle id="contact-0" cx="724.31191" cy="908.0266" r="0.01" fill="none"/><rect x="811.30674" y="761" width="26" height="160.02660000000003" fill="url(#metal)"/><ellipse cx="824.30674" cy="738" rx="29" ry="39" fill="#a7b9bf" stroke="#c4d4d9" stroke-width="5"/><circle cx="824.30674" cy="738" r="14" fill="#43535a"/><g transform="translate(811.30674 686) rotate(-90)"><g aria-label="TRIG" transform="translate(0 0) scale(4)" fill="none" stroke="#f2f3df" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"><path transform="translate(0 0)" d="M0 0H6M3 0V10"/><path transform="translate(9 0)" d="M0 10V0H6V5H0M3 5L6 10"/><path transform="translate(18 0)" d="M0 0H6M3 0V10M0 10H6"/><path transform="translate(27 0)" d="M6 0H0V10H6V5H3"/></g></g><circle id="contact-1" cx="824.30674" cy="908.0266" r="0.01" fill="none"/><rect x="911.3119" y="761" width="26" height="159.99533000000008" fill="url(#metal)"/><ellipse cx="924.3119" cy="738" rx="29" ry="39" fill="#a7b9bf" stroke="#c4d4d9" stroke-width="5"/><circle cx="924.3119" cy="738" r="14" fill="#43535a"/><g transform="translate(911.3119 686) rotate(-90)"><g aria-label="ECHO" transform="translate(0 0) scale(4)" fill="none" stroke="#f2f3df" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"><path transform="translate(0 0)" d="M6 0H0V10H6M0 5H5"/><path transform="translate(9 0)" d="M6 0H0V10H6"/><path transform="translate(18 0)" d="M0 0V10M6 0V10M0 5H6"/><path transform="translate(27 0)" d="M0 0H6V10H0Z"/></g></g><circle id="contact-2" cx="924.3119" cy="907.9953300000001" r="0.01" fill="none"/><rect x="1011.3015399999999" y="761" width="26" height="159.98493000000008" fill="url(#metal)"/><ellipse cx="1024.30154" cy="738" rx="29" ry="39" fill="#a7b9bf" stroke="#c4d4d9" stroke-width="5"/><circle cx="1024.30154" cy="738" r="14" fill="#43535a"/><g transform="translate(1011.3015399999999 686) rotate(-90)"><g aria-label="GND" transform="translate(0 0) scale(4)" fill="none" stroke="#f2f3df" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"><path transform="translate(0 0)" d="M6 0H0V10H6V5H3"/><path transform="translate(9 0)" d="M0 10V0L6 10V0"/><path transform="translate(18 0)" d="M0 0V10H4L6 8V2L4 0Z"/></g></g><circle id="contact-3" cx="1024.30154" cy="907.9849300000001" r="0.01" fill="none"/></svg></div>
<simulation-component-overlay anchor="right" [offset]="14"><section class="hc-panel" [class.expanded]="component.expanded" aria-label="HC-SR04 controls" (pointerdown)="$event.stopPropagation()" (click)="$event.stopPropagation()"><div class="hc-heading"><h3>HC-SR04</h3><button *ngIf="!component.expanded" class="hc-open" (click)="component.toggleExpanded()" [attr.aria-controls]="component.controlsId" aria-expanded="false">Controls ›</button><button *ngIf="component.expanded" class="hc-close" (click)="component.closeControls()" aria-label="Close HC-SR04 controls"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 6L18 18M18 6L6 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button></div><p class="hc-summary hc-status">{{component.statusText}}</p><div *ngIf="component.expanded" class="hc-details hc-controls" [id]="component.controlsId"><label [attr.for]="component.controlsId+'-distance'">Target distance</label><div class="hc-value">{{component.distanceCm}} cm</div><input [id]="component.controlsId+'-distance'" type="range" min="2" max="400" step="1" [value]="component.distanceCm" (input)="component.changeDistance($event)" aria-label="Target distance in centimeters"/><div class="hc-presets"><button (click)="component.setDistance(2)">2 cm</button><button (click)="component.setDistance(100)">100 cm</button><button (click)="component.setDistance(400)">400 cm</button></div><button class="hc-toggle" (click)="component.toggleTarget()">{{component.targetPresent ? 'Remove target' : 'Restore target'}}</button></div></section></simulation-component-overlay>

<!-- factory-panel-style:start -->
<style>
.hc-panel{box-sizing:border-box;position:relative;width:210px;max-width:calc(100vw - 32px);padding:12px;border:1px solid #344252;border-radius:10px;background:#131b26;color:#edf2f7;box-shadow:0 4px 12px #00000018;font:13px/1.45 system-ui,sans-serif}
      .hc-panel *{box-sizing:border-box;min-width:0}
      .hc-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
      .hc-panel h3{font-size:14px;line-height:1.4;margin:0;white-space:nowrap}
      .hc-panel p{margin:6px 0 0;overflow-wrap:anywhere}
      .hc-panel .hc-summary{color:#c3cdd7;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
      .hc-panel button{font:inherit;cursor:pointer;color:#e2edf6;background:#203040;border:1px solid #48596c;border-radius:6px;padding:5px 7px;min-height:32px;margin:0;text-align:left;flex-shrink:0;white-space:nowrap}
      .hc-panel button:focus-visible{outline:2px solid #8bc8f4;outline-offset:2px}
      .hc-panel button.hc-close{width:32px;height:32px;padding:0;margin:0;background:#203040;border:1px solid #48596c;display:inline-flex;align-items:center;justify-content:center}
      .hc-close svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
      .hc-panel table{width:100%;border-collapse:collapse;text-align:left;font-variant-numeric:tabular-nums}
      .hc-panel th,.hc-panel td{padding:6px 5px;border-bottom:1px solid #2b3949}
      .hc-panel th{color:#c3cdd7;font-weight:500}
      .hc-details{margin-top:12px}
      .hc-details p{color:#c3cdd7}
</style>
<!-- factory-panel-style:end -->