{"id":918,"date":"2025-09-30T08:18:14","date_gmt":"2025-09-30T08:18:14","guid":{"rendered":"https:\/\/www.hexatrontech.com\/fr\/?p=918"},"modified":"2025-10-15T08:59:13","modified_gmt":"2025-10-15T08:59:13","slug":"thermal-expansion-calculator","status":"publish","type":"post","link":"https:\/\/hexatrontech.com\/fr\/blog\/2025\/09\/thermal-expansion-calculator\/30\/","title":{"rendered":"Thermal Expansion Calculator"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">When working with PMMA diffuser sheets it\u2019s important to remember that plastics don\u2019t stay the same size under all conditions. They expand in heat and contract in cold. This natural behavior, known as thermal expansion, can affect the final dimensions and fit of your sheets in lighting, display, or architectural applications. To make planning easier, we\u2019ve created a simple Thermal Expansion Calculator that helps you predict how your sheet size will change with temperature, ensuring accurate installations and reducing errors.<\/p>\n\n\n\n<style>\n    .calculator-container {\n        max-width: 600px;\n        margin: 4rem auto 2rem;\n        padding: 2rem;\n        border: 1px solid #ff9800;\n        border-radius: 12px;\n        background-color: #fff7f0;\n        box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n        font-family: sans-serif;\n    }\n    .calculator-container h2 {\n        text-align: center;\n        margin-bottom: 1.5rem;\n        color: #e65100;\n        font-size: 1.8rem;\n    }\n    .calculator-form .form-group {\n        margin-bottom: 1.2rem;\n    }\n    .calculator-form label {\n        display: block;\n        margin-bottom: 0.5rem;\n        font-weight: bold;\n        color: #bf360c;\n    }\n    .calculator-form input,\n    .calculator-form select {\n        width: 100%;\n        padding: 0.6rem;\n        border: 1px solid #ffb74d;\n        border-radius: 6px;\n        background-color: #fff;\n        font-size: 1rem;\n        -webkit-appearance: none; \/* Fix Safari *\/\n        -moz-appearance: none;\n        appearance: none;\n        transition: 0.3s;\n    }\n    .calculator-form input:focus,\n    .calculator-form select:focus {\n        border-color: #fb8c00;\n        outline: none;\n        box-shadow: 0 0 4px #ff9800;\n    }\n\n    \/* Radio group *\/\n    .radio-group {\n        display: flex;\n        gap: 1rem;\n    }\n    .radio-group label {\n        display: flex;\n        align-items: center;\n        gap: 0.4rem;\n        font-weight: normal;\n        color: #333;\n    }\n\n    \/* Temperature inputs side by side *\/\n    .temp-group {\n        display: flex;\n        gap: 1rem;\n    }\n    .temp-field {\n        flex: 1;\n    }\n    .temp-field label {\n        font-size: 0.85rem;\n        margin-bottom: 0.3rem;\n        color: #555;\n        font-weight: normal;\n    }\n\n    \/* Button *\/\n    .calculator-form button {\n        width: 100%;\n        padding: 0.8rem;\n        border: none;\n        border-radius: 6px;\n        background-color: #ff9800;\n        color: #fff;\n        font-size: 1rem;\n        font-weight: bold;\n        cursor: pointer;\n        transition: 0.3s;\n    }\n    .calculator-form button:hover {\n        background-color: #e65100;\n    }\n    #calculator-result {\n        margin-top: 1.5rem;\n        padding: 1rem;\n        border: 1px solid #ffcc80;\n        border-radius: 6px;\n        background-color: #fff3e0;\n        text-align: center;\n        color: #e65100;\n        font-weight: bold;\n    }\n\/* Apply styles to text\/number\/select only *\/\n.calculator-form input[type=\"text\"],\n.calculator-form input[type=\"number\"],\n.calculator-form select {\n    width: 100%;\n    padding: 0.6rem;\n    border: 1px solid #ffb74d;\n    border-radius: 6px;\n    background-color: #fff;\n    font-size: 1rem;\n    -webkit-appearance: none; \/* Fix Safari select *\/\n    -moz-appearance: none;\n    appearance: none;\n    transition: 0.3s;\n}\n\n\/* Keep radios looking native *\/\n.calculator-form input[type=\"radio\"] {\n    width: auto;\n    margin-right: 0.4rem;\n    -webkit-appearance: radio;\n    -moz-appearance: radio;\n    appearance: radio;\n}\n\n\/* Hide the native radio button *\/\n.calculator-form input[type=\"radio\"] {\n  display: none;\n}\n\n\/* Style the label to look like a toggle button *\/\n.calculator-form .radio-label {\n  display: inline-block;\n  padding: 0.5rem 1rem;\n  margin-right: 0.5rem;\n  border: 2px solid #ff9800;\n  border-radius: 9999px; \/* pill shape *\/\n  background-color: #fff;\n  color: #ff9800;\n  font-size: 0.95rem;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.25s ease;\n}\n\n\/* Hover effect *\/\n.calculator-form .radio-label:hover {\n  background-color: #fff3e0;\n}\n\n\/* When the radio is checked, style the label differently *\/\n.calculator-form input[type=\"radio\"]:checked + .radio-label {\n  background-color: #ff9800;\n  color: #fff;\n}\n\n<\/style>\n\n<div class=\"calculator-container \">\n    <h2>Thermal Expansion Calculator<\/h2>\n    <form id=\"thermalExpansionForm\" class=\"calculator-form\">\n        \n        <!-- System Selection -->\n        <div class=\"form-group\">\n            <label>Measurement System<\/label>\n            <div class=\"radio-group\">\n                <input type=\"radio\" id=\"metric\" name=\"system\" value=\"metric\" checked>\n                <label for=\"metric\" class=\"radio-label\">Metric (mm)<\/label>\n\n               <input type=\"radio\" id=\"imperial\" name=\"system\" value=\"imperial\">\n               <label for=\"imperial\" class=\"radio-label\">Imperial (inches)<\/label>\n            <\/div>\n        <\/div>\n\n        <!-- Material -->\n        <div class=\"form-group\">\n            <label for=\"material\">Material<\/label>\n            <select id=\"material\" name=\"material\">\n                <option value=\"0.000073\">PMMA<\/option>\n                <option value=\"0.0000675\">Polycarbonate<\/option>\n                <option value=\"0.0000725\">Polystyrene<\/option>\n            <\/select>\n        <\/div>\n\n        <!-- Length -->\n        <div class=\"form-group\">\n            <label for=\"initialLength\">Initial Length (<span id=\"length-unit\">mm<\/span>)<\/label>\n            <input type=\"number\" id=\"initialLength\" name=\"initialLength\" step=\"any\" value=\"0\" required>\n        <\/div>\n\n        <!-- Temperature Inputs -->\n        <div class=\"form-group\">\n            <label>Initial Temperature<\/label>\n            <div class=\"temp-group\">\n                <div class=\"temp-field\">\n                    <label for=\"initialTempC\">Celsius (\u00b0C)<\/label>\n                    <input type=\"number\" id=\"initialTempC\" step=\"any\" value=\"0\" required>\n                <\/div>\n                <div class=\"temp-field\">\n                    <label for=\"initialTempF\">Fahrenheit (\u00b0F)<\/label>\n                    <input type=\"number\" id=\"initialTempF\" step=\"any\" value=\"32\">\n                <\/div>\n            <\/div>\n        <\/div>\n        <div class=\"form-group\">\n            <label>Final Temperature<\/label>\n            <div class=\"temp-group\">\n                <div class=\"temp-field\">\n                    <label for=\"finalTempC\">Celsius (\u00b0C)<\/label>\n                    <input type=\"number\" id=\"finalTempC\" step=\"any\" value=\"0\" required>\n                <\/div>\n                <div class=\"temp-field\">\n                    <label for=\"finalTempF\">Fahrenheit (\u00b0F)<\/label>\n                    <input type=\"number\" id=\"finalTempF\" value=\"32\" step=\"any\">\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <button type=\"submit\">Calculate<\/button>\n    <\/form>\n    <div id=\"calculator-result\" style=\"display:none;\">\n        <h3>Result<\/h3>\n        <p id=\"result-text\"><\/p>\n    <\/div>\n<\/div>\n\n<script>\n\/\/ Conversion helpers\nfunction cToF(c) { return (c * 9\/5) + 32; }\nfunction fToC(f) { return (f - 32) * 5\/9; }\nfunction mmToIn(mm) { return mm \/ 25.4; }\nfunction inToMm(inches) { return inches * 25.4; }\n\n\/\/ Sync Celsius\/Fahrenheit inputs\nfunction syncTemps() {\n    document.getElementById('initialTempC').addEventListener('input', e => {\n        let c = parseFloat(e.target.value);\n        if (!isNaN(c)) document.getElementById('initialTempF').value = cToF(c).toFixed(2);\n    });\n    document.getElementById('initialTempF').addEventListener('input', e => {\n        let f = parseFloat(e.target.value);\n        if (!isNaN(f)) document.getElementById('initialTempC').value = fToC(f).toFixed(2);\n    });\n\n    document.getElementById('finalTempC').addEventListener('input', e => {\n        let c = parseFloat(e.target.value);\n        if (!isNaN(c)) document.getElementById('finalTempF').value = cToF(c).toFixed(2);\n    });\n    document.getElementById('finalTempF').addEventListener('input', e => {\n        let f = parseFloat(e.target.value);\n        if (!isNaN(f)) document.getElementById('finalTempC').value = fToC(f).toFixed(2);\n    });\n}\nsyncTemps();\n\n\/\/ Change length label with system\ndocument.querySelectorAll('input[name=\"system\"]').forEach(radio => {\n    radio.addEventListener('change', e => {\n        document.getElementById('length-unit').innerText = e.target.value === \"metric\" ? \"mm\" : \"inches\";\n    });\n});\n\ndocument.getElementById('thermalExpansionForm').addEventListener('submit', function(event) {\n    event.preventDefault();\n\n    const system = document.querySelector('input[name=\"system\"]:checked').value;\n    const alpha = parseFloat(document.getElementById('material').value);\n\n    \/\/ Length input\n    let L0 = parseFloat(document.getElementById('initialLength').value);\n    if (system === \"imperial\") {\n        \/\/ Convert inches to mm internally\n        L0 = inToMm(L0);\n    }\n\n    \/\/ Temperature (always work in Celsius internally)\n    const t0 = parseFloat(document.getElementById('initialTempC').value);\n    const t1 = parseFloat(document.getElementById('finalTempC').value);\n\n    const L1_mm = L0 + L0 * alpha * (t1 - t0);\n    const L1_in = mmToIn(L1_mm);\n\n    \/\/ Always show both results\n    const resultText = `The final length is ${L1_mm.toFixed(3)} mm (${L1_in.toFixed(3)} inches).`;\n\n    document.getElementById('result-text').innerText = resultText;\n    document.getElementById('calculator-result').style.display = 'block';\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>When working with PMMA diffuser sheets it\u2019s important to remember that plastics don\u2019t stay the same size under all conditions. They expand in heat and contract in cold. This natural behavior, known as thermal expansion, can affect the final dimensions and fit of your sheets in lighting, display, or architectural applications. To make planning easier, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":623,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[80],"class_list":["post-918","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-thermal-expansion-calculator"],"acf":[],"_links":{"self":[{"href":"https:\/\/hexatrontech.com\/fr\/wp-json\/wp\/v2\/posts\/918","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hexatrontech.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hexatrontech.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hexatrontech.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hexatrontech.com\/fr\/wp-json\/wp\/v2\/comments?post=918"}],"version-history":[{"count":0,"href":"https:\/\/hexatrontech.com\/fr\/wp-json\/wp\/v2\/posts\/918\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hexatrontech.com\/fr\/wp-json\/wp\/v2\/media\/623"}],"wp:attachment":[{"href":"https:\/\/hexatrontech.com\/fr\/wp-json\/wp\/v2\/media?parent=918"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hexatrontech.com\/fr\/wp-json\/wp\/v2\/categories?post=918"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hexatrontech.com\/fr\/wp-json\/wp\/v2\/tags?post=918"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}