Humidity Card

Card preview

Card description

Code

<!-- ================================================================ © 2026 IoT Data Visuals - Humidity 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" xmlns="http://www.w3.org/2000/svg"> <title>Humidity Card</title> <g id="dots"></g> <g id="telemetry" font-family="sans-serif"> <text x="90" y="18" font-size="9px" font-weight="bold" text-anchor="end"> <tspan id="humidity-index"></tspan> <tspan x="90" dy="10px">%</tspan> </text> <text x="50" y="90" font-size="8px" font-weight="bold" fill="Grey" text-anchor="middle"> HUMIDITY </text> </g> <!-- Card info link --> <a target="_blank" href="https://www.helpbus.online/page_20240705.php?topic_id=73&product_id=16" aria-label="More information on the component"> <text x="80" y="75" font-family="sans-serif" font-size="8px" fill="Grey" style="cursor: pointer;">ⓘ <title>Card info</title> </text> </a> </svg> <script> const humidityIndex = 73.1; // Replace with the source of your data document.getElementById("humidity-index").textContent = humidityIndex; const rounded = Math.round(humidityIndex); const perRow = 10; const rows = 10; // --- build dots dynamically --- const dotsGroup = document.getElementById("dots"); for (let r = 0; r < rows; r++) { for (let c = 0; c < perRow; c++) { const cx = 10 + c * 6; const cy = 11.5 + r * 7; const dot = document.createElementNS("http://www.w3.org/2000/svg", "circle"); dot.setAttribute("cx", cx); dot.setAttribute("cy", cy); dot.setAttribute("r", 1.5); dotsGroup.appendChild(dot); } } // --- color logic --- const dots = document.querySelectorAll("#dots circle"); let remaining = rounded; for (let row = rows - 1; row >= 0; row--) { for (let col = 0; col < perRow; col++) { const i = row * perRow + col; dots[i].setAttribute("fill", remaining-- > 0 ? "skyblue" : "lightgrey"); } } </script>

Resources