Photoresistor (LDR) Sensor Simulation Source Code Example

<style>.ldr-artwork{position:absolute;inset:0}.ldr-artwork>svg{display:block;width:100%;height:100%}.ldr-artwork #ldr-trimmer{transform:rotate(var(--knob,0deg));transform-origin:785px 198px}.ldr-artwork.powered #power-led{fill:#9fff48;filter:drop-shadow(0 0 7px #8aff42)}.ldr-artwork.detected #signal-led{fill:#ff6b50;filter:drop-shadow(0 0 7px #ff593e)}.ldr-details label{display:block;margin-top:12px}.ldr-details input{display:block;width:100%;accent-color:#8bc8f4}.ldr-details input:focus-visible{outline:2px solid #8bc8f4;outline-offset:3px}.ldr-value{white-space:nowrap;display:inline-block;color:#edf2f7;font-variant-numeric:tabular-nums}</style>
<div class="ldr-artwork" [class.powered]="component.powered()" [class.detected]="component.detected()" [style.--knob]="component.knobRotation()"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1770.699 632.014"><defs><mask id="board-cutouts"><rect x="0" y="0" width="1771" height="633" fill="white"/><circle cx="238" cy="103" r="23" fill="black"/><circle cx="238" cy="528" r="23" fill="black"/><circle cx="1210" cy="315" r="78" fill="black"/></mask></defs>
<g mask="url(#board-cutouts)"><rect x="165" y="40" width="1259.843" height="551.181" rx="7" fill="#202746"/><path d="M172 48H1417" stroke="#495879" stroke-width="5"/>
<circle cx="238" cy="103" r="34" fill="#b1bfc3"/><circle cx="238" cy="528" r="34" fill="#b1bfc3"/><circle cx="1210" cy="315" r="83" fill="#a0aeb2"/></g>
<path d="M63 258H232M63 373H232" stroke="#aeb9be" stroke-width="16"/>
<path d="M4 178L71 224V412L4 458Z" fill="#b94549"/><path d="M4 178V458L17 445V193Z" fill="#e18380"/><rect x="0" y="250" width="74" height="135" rx="5" fill="#bd3f47"/>
<rect x="187" y="217" width="110" height="198" fill="none" stroke="#e8edf0" stroke-width="8"/>
<circle cx="238" cy="258" r="26" fill="#d7e0e2"/><circle cx="238" cy="373" r="26" fill="#d7e0e2"/><path d="M211 258H238M211 373H238" stroke="#aeb9be" stroke-width="16"/>
<rect x="635" y="48" width="300" height="300" fill="#4c72b1"/><path d="M644 56H927V340" stroke="#7294cc" stroke-width="7" fill="none"/>
<circle cx="785" cy="198" r="66" fill="#c0c6d4"/><g id="ldr-trimmer"><path d="M785 111V285M698 198H872" stroke="#383a42" stroke-width="20"/></g>
<g stroke="#d8e1e8" stroke-width="25" stroke-linecap="round"><path d="M633 385H920"/><path d="M633 435H920"/><path d="M633 485H920"/><path d="M633 535H920"/></g><rect x="697" y="358" width="160" height="200" fill="#292b29"/><circle cx="722" cy="381" r="9" fill="#141717"/><path fill="#a9aca7" d="M733.136 465L719.271 465L719.271 442.810L722.207 442.810L722.207 462.381L733.136 462.381L733.136 465ZM739.372 465L736.542 465L736.542 442.810L740.961 442.810L746.214 458.521Q746.940 460.716 747.273 461.806L747.273 461.806Q747.652 460.595 748.454 458.249L748.454 458.249L753.767 442.810L757.718 442.810L757.718 465L754.887 465L754.887 446.427L748.439 465L745.790 465L739.372 446.109L739.372 465ZM761.366 459.142L761.366 459.142L764.090 458.779Q764.560 461.095 765.687 462.116Q766.815 463.138 768.435 463.138L768.435 463.138Q770.357 463.138 771.681 461.806Q773.006 460.474 773.006 458.506L773.006 458.506Q773.006 456.629 771.780 455.411Q770.554 454.192 768.662 454.192L768.662 454.192Q767.890 454.192 766.739 454.495L766.739 454.495L767.042 452.104Q767.314 452.134 767.481 452.134L767.481 452.134Q769.222 452.134 770.614 451.226Q772.007 450.317 772.007 448.425L772.007 448.425Q772.007 446.927 770.993 445.943Q769.979 444.959 768.374 444.959L768.374 444.959Q766.785 444.959 765.725 445.958Q764.666 446.957 764.363 448.955L764.363 448.955L761.638 448.471Q762.138 445.731 763.909 444.225Q765.680 442.719 768.313 442.719L768.313 442.719Q770.130 442.719 771.659 443.498Q773.188 444.278 773.997 445.625Q774.807 446.972 774.807 448.486L774.807 448.486Q774.807 449.924 774.035 451.104Q773.263 452.285 771.750 452.981L771.750 452.981Q773.717 453.436 774.807 454.866Q775.897 456.296 775.897 458.446L775.897 458.446Q775.897 461.352 773.778 463.373Q771.659 465.394 768.419 465.394L768.419 465.394Q765.498 465.394 763.568 463.653Q761.638 461.912 761.366 459.142ZM779 459.869L779 459.869L781.619 459.626Q781.952 461.473 782.890 462.306Q783.829 463.138 785.297 463.138L785.297 463.138Q786.553 463.138 787.499 462.563Q788.445 461.988 789.051 461.027Q789.656 460.065 790.065 458.431Q790.474 456.796 790.474 455.101L790.474 455.101Q790.474 454.919 790.458 454.556L790.458 454.556Q789.641 455.857 788.226 456.667Q786.811 457.477 785.161 457.477L785.161 457.477Q782.406 457.477 780.499 455.479Q778.591 453.481 778.591 450.211L778.591 450.211Q778.591 446.836 780.582 444.777Q782.572 442.719 785.569 442.719L785.569 442.719Q787.734 442.719 789.528 443.884Q791.321 445.050 792.252 447.207Q793.183 449.364 793.183 453.451L793.183 453.451Q793.183 457.704 792.260 460.224Q791.336 462.745 789.512 464.062Q787.688 465.378 785.236 465.378L785.236 465.378Q782.633 465.378 780.983 463.933Q779.333 462.487 779 459.869ZM790.156 450.075L790.156 450.075Q790.156 447.729 788.907 446.352Q787.658 444.974 785.902 444.974L785.902 444.974Q784.086 444.974 782.739 446.458Q781.392 447.941 781.392 450.302L781.392 450.302Q781.392 452.421 782.671 453.746Q783.950 455.070 785.827 455.070L785.827 455.070Q787.719 455.070 788.937 453.746Q790.156 452.421 790.156 450.075ZM795.847 459.142L795.847 459.142L798.572 458.779Q799.041 461.095 800.169 462.116Q801.296 463.138 802.916 463.138L802.916 463.138Q804.838 463.138 806.163 461.806Q807.487 460.474 807.487 458.506L807.487 458.506Q807.487 456.629 806.261 455.411Q805.035 454.192 803.143 454.192L803.143 454.192Q802.371 454.192 801.221 454.495L801.221 454.495L801.523 452.104Q801.796 452.134 801.962 452.134L801.962 452.134Q803.703 452.134 805.096 451.226Q806.488 450.317 806.488 448.425L806.488 448.425Q806.488 446.927 805.474 445.943Q804.460 444.959 802.855 444.959L802.855 444.959Q801.266 444.959 800.207 445.958Q799.147 446.957 798.844 448.955L798.844 448.955L796.120 448.471Q796.619 445.731 798.390 444.225Q800.161 442.719 802.795 442.719L802.795 442.719Q804.611 442.719 806.140 443.498Q807.669 444.278 808.479 445.625Q809.289 446.972 809.289 448.486L809.289 448.486Q809.289 449.924 808.517 451.104Q807.745 452.285 806.231 452.981L806.231 452.981Q808.199 453.436 809.289 454.866Q810.378 456.296 810.378 458.446L810.378 458.446Q810.378 461.352 808.259 463.373Q806.140 465.394 802.901 465.394L802.901 465.394Q799.979 465.394 798.050 463.653Q796.120 461.912 795.847 459.142Z"/><rect x="377" y="122" width="155" height="50" fill="#d5dce4"/><rect x="412" y="122" width="85" height="50" fill="#3d3a2b"/><rect x="377" y="247" width="155" height="50" fill="#d5dce4"/><rect x="412" y="247" width="85" height="50" fill="#3d3a2b"/><rect x="377" y="372" width="155" height="50" fill="#d5dce4"/><rect x="412" y="372" width="85" height="50" fill="#3d3a2b"/><rect x="377" y="497" width="155" height="50" fill="#d5dce4"/><rect x="412" y="497" width="85" height="50" fill="#3d3a2b"/><rect x="1011" y="128" width="45" height="150" fill="#d5dce4"/><rect x="1011" y="161" width="45" height="84" fill="#3d3a2b"/><rect x="1011" y="410" width="45" height="145" fill="#d5dce4"/><rect x="1011" y="443" width="45" height="79" fill="#3d3a2b"/><rect x="1135" y="92" width="115" height="40" fill="#d6dee7"/><rect id="power-led" x="1161" y="92" width="63" height="40" fill="#e8eadc"/>
<rect x="1135" y="513" width="115" height="40" fill="#d6dee7"/><rect id="signal-led" x="1161" y="513" width="63" height="40" fill="#e8eadc"/>
<path fill="#edf0f7" d="M1140.844 175L1137.623 175L1137.623 150.662L1146.804 150.662Q1149.228 150.662 1150.506 150.895L1150.506 150.895Q1152.299 151.193 1153.511 152.032Q1154.723 152.870 1155.461 154.381Q1156.200 155.892 1156.200 157.701L1156.200 157.701Q1156.200 160.806 1154.225 162.956Q1152.249 165.105 1147.086 165.105L1147.086 165.105L1140.844 165.105L1140.844 175ZM1140.844 153.534L1140.844 162.233L1147.136 162.233Q1150.257 162.233 1151.568 161.071Q1152.880 159.909 1152.880 157.801L1152.880 157.801Q1152.880 156.273 1152.108 155.186Q1151.336 154.099 1150.074 153.750L1150.074 153.750Q1149.261 153.534 1147.069 153.534L1147.069 153.534L1140.844 153.534ZM1167.838 175L1164.551 175L1158.093 150.662L1161.396 150.662L1165.099 166.616Q1165.696 169.123 1166.128 171.597L1166.128 171.597Q1167.058 167.695 1167.224 167.098L1167.224 167.098L1171.855 150.662L1175.740 150.662L1179.227 162.980Q1180.538 167.563 1181.119 171.597L1181.119 171.597Q1181.584 169.289 1182.331 166.301L1182.331 166.301L1186.149 150.662L1189.387 150.662L1182.713 175L1179.608 175L1174.479 156.456Q1173.831 154.132 1173.715 153.601L1173.715 153.601Q1173.333 155.277 1173.001 156.456L1173.001 156.456L1167.838 175ZM1195.662 175L1192.441 175L1192.441 150.662L1203.232 150.662Q1206.486 150.662 1208.180 151.318Q1209.873 151.974 1210.886 153.634Q1211.898 155.294 1211.898 157.303L1211.898 157.303Q1211.898 159.893 1210.222 161.669Q1208.545 163.445 1205.042 163.927L1205.042 163.927Q1206.320 164.541 1206.984 165.139L1206.984 165.139Q1208.396 166.434 1209.657 168.376L1209.657 168.376L1213.891 175L1209.840 175L1206.619 169.937Q1205.208 167.745 1204.295 166.583Q1203.382 165.421 1202.660 164.956Q1201.938 164.491 1201.190 164.309L1201.190 164.309Q1200.643 164.192 1199.397 164.192L1199.397 164.192L1195.662 164.192L1195.662 175ZM1195.662 153.352L1195.662 161.403L1202.585 161.403Q1204.793 161.403 1206.038 160.947Q1207.283 160.490 1207.931 159.486Q1208.578 158.481 1208.578 157.303L1208.578 157.303Q1208.578 155.576 1207.325 154.464Q1206.071 153.352 1203.365 153.352L1203.365 153.352L1195.662 153.352Z"/><path fill="#edf0f7" d="M1176.405 494L1167.623 494L1167.623 469.662L1176.007 469.662Q1178.846 469.662 1180.340 470.011L1180.340 470.011Q1182.432 470.492 1183.909 471.754L1183.909 471.754Q1185.835 473.381 1186.790 475.913Q1187.744 478.444 1187.744 481.698L1187.744 481.698Q1187.744 484.471 1187.097 486.612Q1186.449 488.754 1185.437 490.157Q1184.424 491.560 1183.220 492.365Q1182.017 493.170 1180.315 493.585Q1178.613 494 1176.405 494L1176.405 494ZM1170.844 472.534L1170.844 491.128L1176.040 491.128Q1178.447 491.128 1179.817 490.680Q1181.187 490.231 1182 489.418L1182 489.418Q1183.146 488.272 1183.785 486.338Q1184.424 484.404 1184.424 481.648L1184.424 481.648Q1184.424 477.830 1183.170 475.780Q1181.917 473.729 1180.124 473.032L1180.124 473.032Q1178.829 472.534 1175.957 472.534L1175.957 472.534L1170.844 472.534ZM1191.197 482.146L1191.197 482.146Q1191.197 476.087 1194.451 472.659Q1197.705 469.230 1202.852 469.230L1202.852 469.230Q1206.222 469.230 1208.928 470.841Q1211.634 472.451 1213.053 475.332Q1214.473 478.212 1214.473 481.864L1214.473 481.864Q1214.473 485.566 1212.979 488.488Q1211.484 491.410 1208.745 492.913Q1206.006 494.415 1202.835 494.415L1202.835 494.415Q1199.398 494.415 1196.692 492.755Q1193.986 491.095 1192.592 488.223Q1191.197 485.351 1191.197 482.146ZM1194.518 482.196L1194.518 482.196Q1194.518 486.596 1196.883 489.127Q1199.249 491.659 1202.818 491.659L1202.818 491.659Q1206.454 491.659 1208.803 489.103Q1211.152 486.546 1211.152 481.848L1211.152 481.848Q1211.152 478.876 1210.148 476.660Q1209.144 474.443 1207.209 473.223Q1205.275 472.003 1202.868 472.003L1202.868 472.003Q1199.448 472.003 1196.983 474.352Q1194.518 476.701 1194.518 482.196Z"/><path fill="#edf0f7" d="M228.342 178.635L223.777 178.635L223.777 167.839L213.062 167.839L213.062 163.328L223.777 163.328L223.777 152.612L228.342 152.612L228.342 163.328L239.058 163.328L239.058 167.839L228.342 167.839L228.342 178.635Z"/><path fill="#edf0f7" d="M243.902 477L224.223 477L224.223 445.504L228.391 445.504L228.391 473.283L243.902 473.283L243.902 477Z"/>
<rect x="1393" y="115" width="140" height="400" fill="#171b20" stroke="#d3dde3" stroke-width="5"/><rect x="1400" y="124.69605000000001" width="125" height="84" rx="8" fill="#24262b"/><path d="M1450 166.69605H1768" stroke="#a9abad" stroke-width="23" stroke-linecap="round"/><path d="M1450 161.69605H1768" stroke="#d2d4d4" stroke-width="6"/><rect id="connector0pin" x="1767.67981" y="165.19605" width="3" height="3" fill="#a9abad"/><path fill="#edf0f7" d="M1313.262 178.696L1309.861 178.696L1300.154 153.642L1303.743 153.642L1310.254 171.843Q1311.040 174.031 1311.570 175.945L1311.570 175.945Q1312.151 173.894 1312.920 171.843L1312.920 171.843L1319.688 153.642L1323.071 153.642L1313.262 178.696ZM1343.921 169.912L1343.921 169.912L1347.236 170.749Q1346.194 174.834 1343.485 176.979Q1340.776 179.123 1336.863 179.123L1336.863 179.123Q1332.813 179.123 1330.275 177.474Q1327.737 175.825 1326.412 172.698Q1325.088 169.570 1325.088 165.981L1325.088 165.981Q1325.088 162.068 1326.583 159.154Q1328.079 156.240 1330.839 154.728Q1333.599 153.215 1336.914 153.215L1336.914 153.215Q1340.674 153.215 1343.237 155.129Q1345.801 157.043 1346.809 160.512L1346.809 160.512L1343.545 161.281Q1342.673 158.547 1341.016 157.300Q1339.358 156.052 1336.846 156.052L1336.846 156.052Q1333.958 156.052 1332.018 157.436Q1330.078 158.821 1329.292 161.153Q1328.506 163.486 1328.506 165.964L1328.506 165.964Q1328.506 169.160 1329.437 171.544Q1330.369 173.928 1332.334 175.107Q1334.299 176.286 1336.589 176.286L1336.589 176.286Q1339.375 176.286 1341.306 174.680Q1343.237 173.073 1343.921 169.912ZM1369.197 169.912L1369.197 169.912L1372.512 170.749Q1371.470 174.834 1368.761 176.979Q1366.052 179.123 1362.139 179.123L1362.139 179.123Q1358.088 179.123 1355.551 177.474Q1353.013 175.825 1351.688 172.698Q1350.364 169.570 1350.364 165.981L1350.364 165.981Q1350.364 162.068 1351.859 159.154Q1353.354 156.240 1356.115 154.728Q1358.875 153.215 1362.190 153.215L1362.190 153.215Q1365.950 153.215 1368.513 155.129Q1371.077 157.043 1372.085 160.512L1372.085 160.512L1368.821 161.281Q1367.949 158.547 1366.292 157.300Q1364.634 156.052 1362.122 156.052L1362.122 156.052Q1359.233 156.052 1357.294 157.436Q1355.354 158.821 1354.568 161.153Q1353.782 163.486 1353.782 165.964L1353.782 165.964Q1353.782 169.160 1354.713 171.544Q1355.645 173.928 1357.610 175.107Q1359.575 176.286 1361.865 176.286L1361.865 176.286Q1364.651 176.286 1366.582 174.680Q1368.513 173.073 1369.197 169.912Z"/><rect x="1400" y="224.69605" width="125" height="84" rx="8" fill="#24262b"/><path d="M1450 266.69605H1768" stroke="#a9abad" stroke-width="23" stroke-linecap="round"/><path d="M1450 261.69605H1768" stroke="#d2d4d4" stroke-width="6"/><rect id="connector1pin" x="1767.67981" y="265.19605" width="3" height="3" fill="#a9abad"/><path fill="#edf0f7" d="M1321.790 268.869L1314.424 268.869L1314.424 265.930L1325.037 265.913L1325.037 275.210Q1322.593 277.158 1319.995 278.141Q1317.397 279.123 1314.663 279.123L1314.663 279.123Q1310.972 279.123 1307.955 277.542Q1304.939 275.962 1303.401 272.971Q1301.863 269.980 1301.863 266.289L1301.863 266.289Q1301.863 262.632 1303.392 259.461Q1304.922 256.291 1307.793 254.753Q1310.664 253.215 1314.407 253.215L1314.407 253.215Q1317.124 253.215 1319.320 254.095Q1321.516 254.975 1322.764 256.548Q1324.011 258.120 1324.661 260.649L1324.661 260.649L1321.670 261.469Q1321.106 259.555 1320.269 258.462Q1319.431 257.368 1317.876 256.710Q1316.321 256.052 1314.424 256.052L1314.424 256.052Q1312.151 256.052 1310.493 256.744Q1308.835 257.436 1307.819 258.564Q1306.802 259.692 1306.238 261.042L1306.238 261.042Q1305.281 263.366 1305.281 266.084L1305.281 266.084Q1305.281 269.433 1306.434 271.689Q1307.588 273.945 1309.792 275.039Q1311.997 276.133 1314.475 276.133L1314.475 276.133Q1316.628 276.133 1318.679 275.304Q1320.730 274.475 1321.790 273.535L1321.790 273.535L1321.790 268.869ZM1333.069 278.696L1329.890 278.696L1329.890 253.642L1333.291 253.642L1346.450 273.313L1346.450 253.642L1349.629 253.642L1349.629 278.696L1346.228 278.696L1333.069 259.009L1333.069 278.696ZM1364.241 278.696L1355.200 278.696L1355.200 253.642L1363.831 253.642Q1366.753 253.642 1368.291 254.001L1368.291 254.001Q1370.444 254.497 1371.965 255.796L1371.965 255.796Q1373.948 257.470 1374.930 260.077Q1375.913 262.683 1375.913 266.032L1375.913 266.032Q1375.913 268.886 1375.247 271.091Q1374.580 273.296 1373.538 274.740Q1372.495 276.184 1371.256 277.013Q1370.017 277.842 1368.265 278.269Q1366.514 278.696 1364.241 278.696L1364.241 278.696ZM1358.516 256.599L1358.516 275.740L1363.865 275.740Q1366.343 275.740 1367.753 275.278Q1369.163 274.817 1370 273.979L1370 273.979Q1371.179 272.800 1371.837 270.809Q1372.495 268.818 1372.495 265.981L1372.495 265.981Q1372.495 262.051 1371.205 259.940Q1369.915 257.829 1368.069 257.112L1368.069 257.112Q1366.736 256.599 1363.779 256.599L1363.779 256.599L1358.516 256.599Z"/><rect x="1400" y="324.69605" width="125" height="84" rx="8" fill="#24262b"/><path d="M1450 366.69605H1768" stroke="#a9abad" stroke-width="23" stroke-linecap="round"/><path d="M1450 361.69605H1768" stroke="#d2d4d4" stroke-width="6"/><rect id="connector2pin" x="1767.67981" y="365.19605" width="3" height="3" fill="#a9abad"/><path fill="#edf0f7" d="M1311.741 378.696L1302.700 378.696L1302.700 353.642L1311.331 353.642Q1314.253 353.642 1315.791 354.001L1315.791 354.001Q1317.944 354.497 1319.465 355.796L1319.465 355.796Q1321.448 357.470 1322.430 360.077Q1323.413 362.683 1323.413 366.032L1323.413 366.032Q1323.413 368.886 1322.747 371.091Q1322.080 373.296 1321.038 374.740Q1319.995 376.184 1318.756 377.013Q1317.517 377.842 1315.765 378.269Q1314.014 378.696 1311.741 378.696L1311.741 378.696ZM1306.016 356.599L1306.016 375.740L1311.365 375.740Q1313.843 375.740 1315.253 375.278Q1316.663 374.817 1317.500 373.979L1317.500 373.979Q1318.679 372.800 1319.337 370.809Q1319.995 368.818 1319.995 365.981L1319.995 365.981Q1319.995 362.051 1318.705 359.940Q1317.415 357.829 1315.569 357.112L1315.569 357.112Q1314.236 356.599 1311.279 356.599L1311.279 356.599L1306.016 356.599ZM1326.968 366.494L1326.968 366.494Q1326.968 360.256 1330.317 356.727Q1333.667 353.198 1338.965 353.198L1338.965 353.198Q1342.434 353.198 1345.220 354.856Q1348.005 356.513 1349.467 359.479Q1350.928 362.444 1350.928 366.203L1350.928 366.203Q1350.928 370.014 1349.390 373.022Q1347.852 376.030 1345.032 377.577Q1342.212 379.123 1338.948 379.123L1338.948 379.123Q1335.410 379.123 1332.625 377.414Q1329.839 375.705 1328.403 372.749Q1326.968 369.792 1326.968 366.494ZM1330.386 366.545L1330.386 366.545Q1330.386 371.074 1332.821 373.680Q1335.256 376.286 1338.931 376.286L1338.931 376.286Q1342.673 376.286 1345.092 373.655Q1347.510 371.023 1347.510 366.186L1347.510 366.186Q1347.510 363.127 1346.476 360.846Q1345.442 358.564 1343.451 357.308Q1341.460 356.052 1338.982 356.052L1338.982 356.052Q1335.461 356.052 1332.924 358.470Q1330.386 360.888 1330.386 366.545Z"/><rect x="1400" y="424.69605" width="125" height="84" rx="8" fill="#24262b"/><path d="M1450 466.69605H1768" stroke="#a9abad" stroke-width="23" stroke-linecap="round"/><path d="M1450 461.69605H1768" stroke="#d2d4d4" stroke-width="6"/><rect id="connector3pin" x="1767.67981" y="465.19605" width="3" height="3" fill="#a9abad"/><path fill="#edf0f7" d="M1303.469 478.696L1299.949 478.696L1309.570 453.642L1313.142 453.642L1323.396 478.696L1319.619 478.696L1316.697 471.108L1306.221 471.108L1303.469 478.696ZM1309.929 461.059L1307.178 468.408L1315.671 468.408L1313.057 461.469Q1311.860 458.308 1311.279 456.274L1311.279 456.274Q1310.801 458.684 1309.929 461.059L1309.929 461.059ZM1325.037 466.494L1325.037 466.494Q1325.037 460.256 1328.386 456.727Q1331.736 453.198 1337.034 453.198L1337.034 453.198Q1340.503 453.198 1343.289 454.856Q1346.074 456.513 1347.535 459.479Q1348.997 462.444 1348.997 466.203L1348.997 466.203Q1348.997 470.014 1347.458 473.022Q1345.920 476.030 1343.101 477.577Q1340.281 479.123 1337.017 479.123L1337.017 479.123Q1333.479 479.123 1330.693 477.414Q1327.908 475.705 1326.472 472.749Q1325.037 469.792 1325.037 466.494ZM1328.455 466.545L1328.455 466.545Q1328.455 471.074 1330.890 473.680Q1333.325 476.286 1337.000 476.286L1337.000 476.286Q1340.742 476.286 1343.160 473.655Q1345.579 471.023 1345.579 466.186L1345.579 466.186Q1345.579 463.127 1344.545 460.846Q1343.511 458.564 1341.520 457.308Q1339.529 456.052 1337.051 456.052L1337.051 456.052Q1333.530 456.052 1330.992 458.470Q1328.455 460.888 1328.455 466.545Z"/></svg>
</div>
<simulation-component-overlay anchor="right" [offset]="14"><section class="ldr-panel"><div class="ldr-heading"><h3>Light sensor</h3><button *ngIf="!component.showControls" class="ldr-open" [attr.aria-expanded]="component.showControls" (click)="component.showControls=true">Controls ›</button><button *ngIf="component.showControls" class="ldr-close" aria-label="Close light sensor controls" (click)="component.showControls=false"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 6L18 18M18 6L6 18"/></svg></button></div>
<div class="ldr-summary">{{component.status()}}</div>
<div *ngIf="component.showControls" class="ldr-details"><label>Ambient light <span class="ldr-value">{{component.lightLabel()}}</span><input class="ldr-light" aria-label="Light intensity" type="range" min="-1" max="5" step="0.01" [value]="component.logLight()" [attr.aria-valuetext]="component.lightLabel()" (input)="component.setLight($event)"></label><label>Threshold <span class="ldr-value">{{component.triggerLabel()}}</span><input class="ldr-threshold" aria-label="Detection threshold in lux" [attr.aria-valuetext]="component.triggerLabel()" type="range" min="-1" max="5" step="0.01" [value]="component.logThreshold()" (input)="component.setThreshold($event)"></label><p>Light at or above the threshold activates DO low.</p><details><summary>Electrical details</summary><p>Threshold is approximate with AO unloaded. Loading AO can change the switching point.</p><p>Analog output: {{component.voltageLabel()}}</p></details></div></section></simulation-component-overlay>
<!-- factory-panel-style:start --><style>.ldr-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}
      .ldr-panel *{box-sizing:border-box;min-width:0}
      .ldr-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
      .ldr-panel h3{font-size:14px;line-height:1.4;margin:0;white-space:nowrap}
      .ldr-panel p{margin:6px 0 0;overflow-wrap:anywhere}
      .ldr-panel .ldr-summary{color:#c3cdd7;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
      .ldr-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}
      .ldr-panel button:focus-visible{outline:2px solid #8bc8f4;outline-offset:2px}
      .ldr-panel button.ldr-close{width:32px;height:32px;padding:0;margin:0;background:#203040;border:1px solid #48596c;display:inline-flex;align-items:center;justify-content:center}
      .ldr-close svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
      .ldr-panel table{width:100%;border-collapse:collapse;text-align:left;font-variant-numeric:tabular-nums}
      .ldr-panel th,.ldr-panel td{padding:6px 5px;border-bottom:1px solid #2b3949}
      .ldr-panel th{color:#c3cdd7;font-weight:500}
      .ldr-details{margin-top:12px}
      .ldr-details p{color:#c3cdd7}
</style><!-- factory-panel-style:end -->