Temperature Card

Card preview

Card description

Code

<!-- ================================================================ © 2026 IoT Data Visuals - Temperature 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>Temperature Card</title> <!-- Glass body --> <path d="M38 10 A4 4 0 0 1 46 10 V65 A8 8 0 1 1 38 65 Z" fill="none" stroke="#333" stroke-width="1"/> <circle id="temperature-bulb" cx="42" cy="72" r="6" fill="#ff4d4f"/> <rect id="temperature-fill" x="40.5" width="3" fill="#ff4d4f" /> <!-- Scale Group --> <g font-family="sans-serif" font-weight="bold"> <g fill="#555" font-size="6px" text-anchor="end"> <text x="27" y="60">-20</text> <text x="27" y="52">-10</text> </g> <path d="M32 50 h3 M32 58 h3" stroke="Black" stroke-width="0.8"/> <path d="M33 54 h1" stroke="Black" stroke-width="0.8"/> <g fill="#555" font-size="6px"> <text x="57" y="44">0</text> <text x="57" y="36">10</text> <text x="57" y="28">20</text> <text x="57" y="20">30</text> <text x="57" y="12">40</text> </g> <path d="M49 10 h3 M49 18 h3 M49 26 h3 M49 34 h3 M49 42 h3" stroke="Black" stroke-width="0.8"/> <path d="M49 14 h1 M49 22 h1 M49 30 h1 M49 38 h1" stroke="Black" stroke-width="0.8"/> </g> <!-- Telemetry --> <g id="telemetry" font-family="sans-serif"> <text x="90" y="18" font-size="9px" font-weight="bold" fill="Black" text-anchor="end"> <tspan id="temperature-index">--</tspan> <tspan x="90" dy="10px" id="temperature-mu"></tspan> </text> <text x="50" y="90" font-size="8px" font-weight="bold" fill="Grey" text-anchor="middle" letter-spacing="0.5"> TEMPERATURE </text> </g> <!-- Card info link --> <a target="_blank" href="https://www.helpbus.online/page_20240705.php?topic_id=74&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 temperatureIndex = 3.2; // Replace with the source of your data const temperatureMeasureUnit = "°C"; // Replace with the source of your data const minTemp = -20, maxTemp = 40, startY = 55, endY = 10; if (temperatureIndex > 30) { temperatureColor = "Crimson"; } else if (temperatureIndex > 10) { temperatureColor = "yellowgreen "; } else if (temperatureIndex > 0) { temperatureColor = "Gold"; } else { temperatureColor = "LightSkyBlue"; } const totalRangeHeight = startY - endY; const tempRange = maxTemp - minTemp; const fillHeight = ((temperatureIndex - minTemp) / tempRange) * totalRangeHeight; const cappedHeight = Math.max(0, Math.min(fillHeight, totalRangeHeight)); const fillElement = document.getElementById('temperature-fill'); const bulbElement = document.getElementById('temperature-bulb'); fillElement.setAttribute('height', cappedHeight + 20); fillElement.setAttribute('y', startY - cappedHeight); fillElement.setAttribute('fill', temperatureColor); bulbElement.setAttribute('fill', temperatureColor); document.getElementById('temperature-index').textContent = temperatureIndex; document.getElementById('temperature-mu').textContent = temperatureMeasureUnit; </script>

Resources