Illuminance Card

Card preview

Card description

Code

<!-- ================================================================ © 2026 IoT Data Visuals - Illuminance Author: Algorhythm LLC Contact: iot_data_visuals@yahoo.com Project page: https://www.helpbus.online/product_index_20240705.php?product_id=16 License page: https://www.helpbus.online/page_20240705.php?product_id=16&topic_id=69 Version: 1.0.20251227 IMPORTANT: DO NOT REMOVE THIS COPYRIGHT NOTICE. ================================================================ Thank you for using our code ! ================================================================ --> <svg width="200" height="200" viewBox="0 0 100 100" fill="none" xmlns="www.w3.org"> <title>Illuminance Card</title> <!-- Rectangle --> <rect id="illuminance-rectangle" width="80" height="80" x="10" y="10" stroke-width="2"/> <!-- Telemetry --> <g id="telemetry" font-family="sans-serif" text-anchor="middle" fill="#333"> <text x="50" y="50" font-family="sans-serif" font-size="11px" text-anchor="middle"> <tspan font-weight="bold"> <tspan id="illuminance-index"></tspan> <tspan id="illuminance-mu"></tspan> </tspan> <tspan x="50" dy="9px" font-size="8px" font-weight="bold" fill="Grey" >ILLUMINANCE</tspan> <tspan id="illuminance-label" x="50" dy="15px" font-size="8px" font-weight="bold" fill="Grey"></tspan> </text> </g> <!-- Card info link --> <a target="_blank" href="https://www.helpbus.online/page_20240705.php?topic_id=76&product_id=16" aria-label="More information on the component"> <text x="15" y="20" font-family="sans-serif" font-size="8px" fill="Grey" style="cursor: pointer;">ⓘ <title>Card info</title> </text> </a> </svg> <script> const illuminanceIndex = 5763; // Replace with the source of your data const illuminanceMeasureUnit = "lx"; // Replace with the source of your data let illuminanceLabel = ""; let illuminanceColor = ""; if (illuminanceIndex > 32000) { illuminanceLabel ="Direct sunlight"; illuminanceColor = "Gold"; } else if (illuminanceIndex > 25000) { illuminanceLabel ="Full daylight"; illuminanceColor = "Gold"; } else if (illuminanceIndex > 2000) { illuminanceLabel ="Daylight"; illuminanceColor = "Gold"; } else if (illuminanceIndex > 1000) { illuminanceLabel ="Overcast day"; illuminanceColor = "DimGrey"; } else if (illuminanceIndex > 400) { illuminanceLabel ="Sunrise / Sunset"; illuminanceColor = "Orange"; } else if (illuminanceIndex > 0 && illuminanceIndex < 1) { illuminanceLabel ="Clear night sky"; illuminanceColor = "MidnightBlue"; } else { illuminanceLabel =""; } const illuminanceRectangleElement = document.getElementById('illuminance-rectangle'); illuminanceRectangleElement.setAttribute('stroke', illuminanceColor); document.getElementById('illuminance-label').textContent = illuminanceLabel; const illuminanceFormatted = illuminanceIndex.toLocaleString('de-DE'); document.getElementById('illuminance-index').textContent = illuminanceFormatted; document.getElementById('illuminance-mu').textContent = illuminanceMeasureUnit; </script>

Resources