Dewpoint Card

The dew point is the temperature that air, of a constant absolute humidity and pressure, must be cooled to in order for the relative humidity to rise to 100%. This temperature is a thermodynamic property that depends on the pressure and water content of the air. When the air at a temperature above the dew point is cooled, its moisture capacity is reduced, and when the temperature passes below the dew point water vapor will condense, or precipitate, to form liquid water. When this occurs through the air's contact with a colder surface, the precipitate on that surface is dew. The dew point is affected by the air's absolute humidity. The more moisture the air contains, the higher its dew point. When the temperature is below the freezing point of water, the dew point is called the frost point, as frost is formed via deposition rather than condensation. In liquids, the analog to the dew point is the cloud point. Source: Wikipedia

Card preview

Card description

Code

<!-- ================================================================ © 2026 IoT Data Visuals - Dewpoint 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>Dewpoint Card</title> <!-- Circle --> <circle cx="50" cy="50" r="35" stroke="#333" stroke-width="0.5"/> <!-- Needle --> <g id="dewpoint-needle-group" style="transform-origin: center; transform: rotate(0deg); "> <path d="M50 50 L40 30 L50 25 L60 30 Z" id="dewpoint-needle" fill-opacity="0.7"/> <circle cx="50" cy="50" r="2" fill="Grey" stroke="#333" stroke-width="0.5"/> </g> <!-- Telemetry --> <g id="telemetry" font-family="sans-serif" text-anchor="middle" fill="#333"> <text x="95" y="65" font-family="sans-serif" font-size="10px" text-anchor="end"> <tspan font-size="8px" font-weight="bold" fill="Grey" >DEWPOINT</tspan> <tspan x="95" dy="10px" font-weight="bold"><tspan id="dewpoint-index"></tspan> <tspan id="dewpoint-um"></tspan></tspan> <tspan x="92" dy="10px" id="dewpoint-label"></tspan> </text> </g> <!-- Labels degrees --> <g font-family="sans-serif" font-size="6px" text-anchor="middle" dominant-baseline="middle" fill="Grey"> <text transform="rotate(234, 50, 50)" x="50" y="7" fill="Black">8</text> <text transform="rotate(258, 50, 50)" x="50" y="7" fill="Black">10</text> <text transform="rotate(282, 50, 50)" x="50" y="7" fill="Black">12</text> <text transform="rotate(306, 50, 50)" x="50" y="7" fill="Black">14</text> <text transform="rotate(330, 50, 50)" x="50" y="7" fill="Black">16</text> <text transform="rotate(354, 50, 50)" x="50" y="7" fill="Black">18</text> <text transform="rotate(18, 50, 50)" x="50" y="7" fill="Black">20</text> <text transform="rotate(42, 50, 50)" x="50" y="7" fill="Black">22</text> <text transform="rotate(66, 50, 50)" x="50" y="7" fill="Black">24</text> <text transform="rotate(90, 50, 48)" x="50" y="7" fill="Black">26</text> </g> <!-- Tickers --> <g> <line transform="rotate(234,50,50)" x1="50" y1="22" x2="50" y2="15" stroke="SkyBlue" stroke-width="1.5"/> <line transform="rotate(238,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="SkyBlue"/> <line transform="rotate(242,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="SkyBlue"/> <line transform="rotate(246,50,50)" x1="50" y1="20" x2="50" y2="15" stroke="SkyBlue" stroke-width="1"/> <line transform="rotate(250,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="SkyBlue"/> <line transform="rotate(254,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="SkyBlue"/> <line transform="rotate(258,50,50)" x1="50" y1="22" x2="50" y2="15" stroke="SkyBlue" stroke-width="1.5"/> <line transform="rotate(262,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Green"/> <line transform="rotate(266,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Green"/> <line transform="rotate(270,50,50)" x1="50" y1="20" x2="50" y2="15" stroke="Green" stroke-width="1"/> <line transform="rotate(274,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Green"/> <line transform="rotate(278,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Green"/> <line transform="rotate(282,50,50)" x1="50" y1="22" x2="50" y2="15" stroke="Green" stroke-width="1.5"/> <line transform="rotate(286,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Green"/> <line transform="rotate(290,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Green"/> <line transform="rotate(294,50,50)" x1="50" y1="20" x2="50" y2="15" stroke="Green" stroke-width="1"/> <line transform="rotate(298,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="LimeGreen"/> <line transform="rotate(302,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="LimeGreen"/> <line transform="rotate(306,50,50)" x1="50" y1="22" x2="50" y2="15" stroke="LimeGreen" stroke-width="1.5"/> <line transform="rotate(310,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="LimeGreen"/> <line transform="rotate(314,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="LimeGreen"/> <line transform="rotate(318,50,50)" x1="50" y1="20" x2="50" y2="15" stroke="LimeGreen" stroke-width="1"/> <line transform="rotate(322,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="LimeGreen"/> <line transform="rotate(326,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="LimeGreen"/> <line transform="rotate(330,50,50)" x1="50" y1="22" x2="50" y2="15" stroke="LimeGreen" stroke-width="1.5"/> <line transform="rotate(334,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="LimeGreen"/> <line transform="rotate(338,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="LimeGreen"/> <line transform="rotate(342,50,50)" x1="50" y1="20" x2="50" y2="15" stroke="LimeGreen" stroke-width="1"/> <line transform="rotate(346,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="LimeGreen"/> <line transform="rotate(350,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="LimeGreen"/> <line transform="rotate(354,50,50)" x1="50" y1="22" x2="50" y2="15" stroke="LimeGreen" stroke-width="1.5"/> <line transform="rotate(358,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Gold"/> <line transform="rotate(2,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Gold"/> <line transform="rotate(6,50,50)" x1="50" y1="20" x2="50" y2="15" stroke="Gold" stroke-width="1"/> <line transform="rotate(10,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Gold"/> <line transform="rotate(14,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Gold"/> <line transform="rotate(18,50,50)" x1="50" y1="22" x2="50" y2="15" stroke="Gold" stroke-width="1.5"/> <line transform="rotate(22,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Gold"/> <line transform="rotate(26,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Gold"/> <line transform="rotate(30,50,50)" x1="50" y1="20" x2="50" y2="15" stroke="Gold" stroke-width="1"/> <line transform="rotate(34,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Orange"/> <line transform="rotate(38,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Orange"/> <line transform="rotate(42,50,50)" x1="50" y1="22" x2="50" y2="15" stroke="Orange" stroke-width="1.5"/> <line transform="rotate(46,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Orange"/> <line transform="rotate(50,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Orange"/> <line transform="rotate(54,50,50)" x1="50" y1="20" x2="50" y2="15" stroke="Orange" stroke-width="1"/> <line transform="rotate(58,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Orange"/> <line transform="rotate(62,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Orange"/> <line transform="rotate(66,50,50)" x1="50" y1="22" x2="50" y2="15" stroke="Orange" stroke-width="1.5"/> <line transform="rotate(70,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Crimson"/> <line transform="rotate(74,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Crimson"/> <line transform="rotate(78,50,50)" x1="50" y1="20" x2="50" y2="15" stroke="Crimson" stroke-width="1"/> <line transform="rotate(82,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Crimson"/> <line transform="rotate(86,50,50)" x1="50" y1="18" x2="50" y2="15" stroke="Crimson"/> <line transform="rotate(90,50,50)" x1="50" y1="22" x2="50" y2="15" stroke="Crimson" stroke-width="1.5"/> </g> <!-- Card info link --> <a target="_blank" href="https://www.helpbus.online/page_20240705.php?topic_id=70&product_id=16" aria-label="More information on the component"> <text x="2" y="10" font-family="sans-serif" font-size="8px" fill="Grey" style="cursor: pointer;">ⓘ <title>Card info</title> </text> </a> </svg> <script> const dewpointIndex = 27; // Replace with the source of your data const dewpointMeasureUnit = "°C"; // Replace with the source of your data let dewpointLabel = ""; let dewpointColor = ""; if (dewpointIndex > 24) { dewpointLabel =`miserable`; dewpointColor ='Crimson'; } else if (dewpointIndex > 21) { dewpointLabel =`oppressive`; dewpointColor ='Orange'; } else if (dewpointIndex > 18) { dewpointLabel =`uncomfortable`; dewpointColor ='Gold'; } else if (dewpointIndex > 15) { dewpointLabel =`sticky`; dewpointColor ='LimeGreen'; } else if (dewpointIndex > 10) { dewpointLabel =`comfortable`; dewpointColor ='Green'; } else { dewpointLabel =`very pleasant`; dewpointColor ='Skyblue'; } document.getElementById('dewpoint-label').setAttribute('fill', dewpointColor); document.getElementById('dewpoint-needle').setAttribute('fill', dewpointColor); document.getElementById('dewpoint-index').textContent = dewpointIndex.toFixed(1); document.getElementById('dewpoint-um').textContent = dewpointMeasureUnit; document.getElementById('dewpoint-label').textContent = dewpointLabel; // Needle rotation const dewpointMin = 8; const dewpointMax = 26; const dewpointPerUnit = 12; const dewpointBase = 234; const dewpointClamped = Math.min(Math.max(dewpointIndex, dewpointMin), dewpointMax); const dewpointAngle = dewpointBase + (dewpointClamped - dewpointMin) * dewpointPerUnit; const dewpointNeedle = document.getElementById('dewpoint-needle-group'); dewpointNeedle.style.transform = `rotate(${dewpointAngle}deg)`; </script>

Resources

Wikipedia: https://en.wikipedia.org/wiki/Dew_point Dwyer Instruments: https://www.processsensing.com/en-us/blog/dew-point-definition-and-how-to-measure-it-for-industries.htm?ID=what-is-water-dew-point-why-it-matters-for-industry Shandong Renke Control Technology: https://www.renkeer.com/dew-point/ HENGKO: https://hengkometer.com/what-is-a-comfortable-dew-point/ SenTec-sensing technology https://cdsentec.com/understanding-dew-point-weather-and-comfort/ Davis Instruments https://www.davisinstruments.com/pages/what-is-dew-point