PIR Motion Sensor Simulation Source Code Example

<style>
.pir-board{position:relative;width:100%;height:100%;line-height:0}.pir-artwork{display:block;width:100%;height:100%}
.pir-panel.expanded{width:260px}.pir-fields{display:grid;gap:12px;margin-top:12px}.pir-fields label{display:grid;gap:4px}
.pir-fields input[type=range]{width:100%;margin:0;accent-color:#8bc8f4}.pir-fields .pir-check{display:flex;align-items:center;gap:8px}
.pir-panel input:focus-visible{outline:2px solid #8bc8f4;outline-offset:2px}.pir-panel small{display:block;color:#c3cdd7}
.pir-panel .pir-motion{width:100%;text-align:center}
</style>
<div class="pir-board">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 923.093 947.2" preserveAspectRatio="xMidYMid meet" class="pir-artwork">
<title>PIR Motion Sensor: VCC, OUT, GND</title>
<defs><clipPath id="pir-lens-clip"><circle cx="480" cy="346" r="297"/></clipPath><pattern id="pir-fresnel" width="168" height="96" patternUnits="userSpaceOnUse"><path d="M28 0H84L112 48L84 96H28L0 48ZM112 48H168M84 0L112 -48M84 96L112 144" fill="none" stroke="#ccd4d5" stroke-width="5"/></pattern></defs>
<path fill="#c5bf92" d="M354.05 753H384.05V928.82Q384.05 943.82 369.05 943.82Q354.05 943.82 354.05 928.82Z M454.05 753H484.05V928.82Q484.05 943.82 469.05 943.82Q454.05 943.82 454.05 928.82Z M554.05 753H584.05V928.82Q584.05 943.82 569.05 943.82Q554.05 943.82 554.05 928.82Z"/>
<path fill="#29386f" fill-rule="evenodd" d="M0 0H923.093V760H0Z M122 367A39 39 0 1 0 44 367A39 39 0 1 0 122 367Z M910 367A39 39 0 1 0 832 367A39 39 0 1 0 910 367Z"/>
<path fill="#dfe7e8" d="M145 13H815V683H145Z"/><path fill="#d3e1e3" d="M174 42H786V654H174Z"/>
<circle cx="480" cy="346" r="317" fill="#cdd2d3"/><circle cx="480" cy="346" r="289" fill="#dae2e3"/>
<path d="M482 85C652 91 767 224 701 394C675 221 581 139 482 85Z M244 466C278 545 363 605 476 607C362 624 274 568 244 466Z" fill="#fafdfd"/>
<circle cx="480" cy="346" r="289" fill="url(#pir-fresnel)" clip-path="url(#pir-lens-clip)"/>
<!-- Outlined +, D and minus reproduce the imported editable labels without font dependence. -->
<path fill="#ffffff" d="M365 696H374V715H393V724H374V743H365V724H346V715H365Z M449 696H469C500 696 500 743 469 743H449Z M458 704V735H468C488 735 488 704 468 704Z M545 715H593V724H545Z" fill-rule="evenodd"/>
<circle id="pir-pin-0" cx="369.05259" cy="943.81951" r="0.01" fill="none"/>
<circle id="pir-pin-1" cx="469.05259" cy="943.81951" r="0.01" fill="none"/>
<circle id="pir-pin-2" cx="569.05259" cy="943.81951" r="0.01" fill="none"/>
</svg>
</div>
<simulation-component-overlay anchor="right" [offset]="14">
<section class="pir-panel" [class.expanded]="component.expanded" aria-label="PIR motion sensor controls" (pointerdown)="$event.stopPropagation()" (click)="$event.stopPropagation()">
<header class="pir-heading"><h3>PIR Sensor</h3><button *ngIf="!component.expanded" class="pir-open" (click)="component.expanded=true" [attr.aria-expanded]="component.expanded" [attr.aria-controls]="component.controlsId">Controls ›</button><button *ngIf="component.expanded" class="pir-close" (click)="component.expanded=false" aria-label="Close PIR 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></header>
<p class="pir-summary pir-status" aria-live="polite">{{component.status}}</p>
<div *ngIf="component.expanded" class="pir-details pir-fields" [id]="component.controlsId">
<button class="pir-motion" (click)="component.motion()">Simulate motion</button>
<label>Hold time · {{component.holdSeconds}} s<input type="range" min="1" max="10" step="0.1" [value]="component.holdSeconds" (input)="component.setTime('holdSeconds',$event)" aria-label="Hold time in seconds"/></label>
<label>Recovery time · {{component.inhibitSeconds}} s<input type="range" min="0" max="3" step="0.1" [value]="component.inhibitSeconds" (input)="component.setTime('inhibitSeconds',$event)" aria-label="Recovery time in seconds"/></label>
<label class="pir-check"><input type="checkbox" [checked]="component.retrigger" (change)="component.toggleRetrigger($event)"/>Retrigger during HIGH</label>
<small>Each click is a new motion event. Retriggering extends HIGH. Motion during recovery is ignored. Time edits apply to the next interval.</small>
<small *ngIf="component.message">{{component.message}}</small>
</div></section></simulation-component-overlay>

<!-- factory-panel-style:start -->
<style>
.pir-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}
      .pir-panel *{box-sizing:border-box;min-width:0}
      .pir-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
      .pir-panel h3{font-size:14px;line-height:1.4;margin:0;white-space:nowrap}
      .pir-panel p{margin:6px 0 0;overflow-wrap:anywhere}
      .pir-panel .pir-summary{color:#c3cdd7;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
      .pir-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}
      .pir-panel button:focus-visible{outline:2px solid #8bc8f4;outline-offset:2px}
      .pir-panel button.pir-close{width:32px;height:32px;padding:0;margin:0;background:#203040;border:1px solid #48596c;display:inline-flex;align-items:center;justify-content:center}
      .pir-close svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
      .pir-panel table{width:100%;border-collapse:collapse;text-align:left;font-variant-numeric:tabular-nums}
      .pir-panel th,.pir-panel td{padding:6px 5px;border-bottom:1px solid #2b3949}
      .pir-panel th{color:#c3cdd7;font-weight:500}
      .pir-details{margin-top:12px}
      .pir-details p{color:#c3cdd7}
</style>
<!-- factory-panel-style:end -->