{"id":88,"date":"2026-06-15T18:43:30","date_gmt":"2026-06-15T18:43:30","guid":{"rendered":"https:\/\/structp.eu\/?page_id=88"},"modified":"2026-08-25T21:03:11","modified_gmt":"2026-08-25T21:03:11","slug":"calculators","status":"publish","type":"page","link":"https:\/\/structp.eu\/?page_id=88","title":{"rendered":"Calculators"},"content":{"rendered":"\n<!-- BEAM DEFLECTION CALCULATOR \u2013 WordPress ready -->\n<div style=\"max-width:720px; margin:2rem auto; background:#ffffff; border-radius:2rem; box-shadow:0 20px 40px -12px rgba(0,0,0,0.15); padding:2rem 2.25rem; font-family:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\">\n\n    <h1 style=\"font-size:1.9rem; font-weight:600; letter-spacing:-0.02em; margin:0 0 0.3rem 0; color:#0b1a33; display:flex; align-items:center; gap:0.5rem;\">\n        \ud83d\udcd0 Beam deflection\n        <span style=\"font-size:1rem; font-weight:400; color:#4a5b7a; margin-left:0.3rem;\">uniform load<\/span>\n    <\/h1>\n    <div style=\"color:#2c3e5c; border-left:4px solid #3b7cff; padding-left:1rem; font-size:1rem; margin-bottom:2rem; background:#f0f4fe; border-radius:0 8px 8px 0; line-height:1.4;\">\n        Simply supported beam \u00b7 max deflection at center\n    <\/div>\n\n<svg viewBox=\"0 0 600 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:100%; height:auto; display:block; margin-bottom:1.8rem;\">\n\n    <!-- BEAM (horizontal line) -->\n    <line x1=\"60\" y1=\"120\" x2=\"540\" y2=\"120\" stroke=\"#1a2b4a\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n\n    <!-- SUPPORT TRIANGLES -->\n    <!-- Left support (pin) -->\n    <polygon points=\"60,120 40,150 80,150\" fill=\"#1a2b4a\" stroke=\"#1a2b4a\" stroke-width=\"2\"\/>\n    <line x1=\"40\" y1=\"150\" x2=\"80\" y2=\"150\" stroke=\"#1a2b4a\" stroke-width=\"2\"\/>\n    <!-- Small circle at pin -->\n    <circle cx=\"60\" cy=\"120\" r=\"5\" fill=\"none\" stroke=\"#1a2b4a\" stroke-width=\"2\"\/>\n\n    <!-- Right support (roller) -->\n    <polygon points=\"540,120 520,150 560,150\" fill=\"#1a2b4a\" stroke=\"#1a2b4a\" stroke-width=\"2\"\/>\n    <line x1=\"520\" y1=\"150\" x2=\"560\" y2=\"150\" stroke=\"#1a2b4a\" stroke-width=\"2\"\/>\n    <!-- Roller circles -->\n    <circle cx=\"540\" cy=\"153\" r=\"5\" fill=\"none\" stroke=\"#1a2b4a\" stroke-width=\"2\"\/>\n    <circle cx=\"540\" cy=\"161\" r=\"5\" fill=\"none\" stroke=\"#1a2b4a\" stroke-width=\"2\"\/>\n\n    <!-- UNIFORM LOAD (downward arrows) -->\n    <g stroke=\"#c0392b\" stroke-width=\"2\" fill=\"none\">\n        <!-- Arrow 1 -->\n        <line x1=\"100\" y1=\"60\" x2=\"100\" y2=\"95\"\/>\n        <polygon points=\"100,100 95,90 105,90\" fill=\"#c0392b\" stroke=\"none\"\/>\n        <!-- Arrow 2 -->\n        <line x1=\"160\" y1=\"55\" x2=\"160\" y2=\"95\"\/>\n        <polygon points=\"160,100 155,90 165,90\" fill=\"#c0392b\" stroke=\"none\"\/>\n        <!-- Arrow 3 -->\n        <line x1=\"220\" y1=\"55\" x2=\"220\" y2=\"95\"\/>\n        <polygon points=\"220,100 215,90 225,90\" fill=\"#c0392b\" stroke=\"none\"\/>\n        <!-- Arrow 4 -->\n        <line x1=\"280\" y1=\"55\" x2=\"280\" y2=\"95\"\/>\n        <polygon points=\"280,100 275,90 285,90\" fill=\"#c0392b\" stroke=\"none\"\/>\n        <!-- Arrow 5 -->\n        <line x1=\"340\" y1=\"55\" x2=\"340\" y2=\"95\"\/>\n        <polygon points=\"340,100 335,90 345,90\" fill=\"#c0392b\" stroke=\"none\"\/>\n        <!-- Arrow 6 -->\n        <line x1=\"400\" y1=\"55\" x2=\"400\" y2=\"95\"\/>\n        <polygon points=\"400,100 395,90 405,90\" fill=\"#c0392b\" stroke=\"none\"\/>\n        <!-- Arrow 7 -->\n        <line x1=\"460\" y1=\"55\" x2=\"460\" y2=\"95\"\/>\n        <polygon points=\"460,100 455,90 465,90\" fill=\"#c0392b\" stroke=\"none\"\/>\n        <!-- Arrow 8 -->\n        <line x1=\"520\" y1=\"60\" x2=\"520\" y2=\"95\"\/>\n        <polygon points=\"520,100 515,90 525,90\" fill=\"#c0392b\" stroke=\"none\"\/>\n    <\/g>\n\n    <!-- Uniform load label -->\n    <text x=\"300\" y=\"48\" font-family=\"Georgia, serif\" font-size=\"14\" fill=\"#c0392b\" font-style=\"italic\" text-anchor=\"middle\" font-weight=\"600\">w (kN\/m)<\/text>\n\n    <!-- ELASTIC LINE (red, dashed, exaggerated deflection) -->\n    <path d=\"M 60,120 \n             C 140,145 \n               220,170 \n               300,178 \n               380,170 \n               460,145 \n               540,120\" \n          stroke=\"#e74c3c\" stroke-width=\"3\" fill=\"none\" \n          stroke-dasharray=\"8,6\" stroke-linecap=\"round\"\/>\n\n    <!-- DIMENSION LINE (span) -->\n    <line x1=\"60\" y1=\"175\" x2=\"540\" y2=\"175\" stroke=\"#4a6a8a\" stroke-width=\"1.5\" stroke-dasharray=\"4,4\"\/>\n    <!-- dimension tick marks -->\n    <line x1=\"60\" y1=\"172\" x2=\"60\" y2=\"178\" stroke=\"#4a6a8a\" stroke-width=\"2\"\/>\n    <line x1=\"540\" y1=\"172\" x2=\"540\" y2=\"178\" stroke=\"#4a6a8a\" stroke-width=\"2\"\/>\n    <!-- dimension arrows (small) -->\n    <polygon points=\"60,175 66,172 66,178\" fill=\"#4a6a8a\"\/>\n    <polygon points=\"540,175 534,172 534,178\" fill=\"#4a6a8a\"\/>\n    <!-- span label -->\n    <text x=\"300\" y=\"192\" font-family=\"Georgia, serif\" font-size=\"14\" fill=\"#4a6a8a\" font-style=\"italic\" text-anchor=\"middle\">L (m)<\/text>\n\n    <!-- SUPPORT LABELS -->\n    <text x=\"48\" y=\"168\" font-family=\"Georgia, serif\" font-size=\"13\" fill=\"#1a2b4a\" font-weight=\"600\">A<\/text>\n    <text x=\"548\" y=\"168\" font-family=\"Georgia, serif\" font-size=\"13\" fill=\"#1a2b4a\" font-weight=\"600\">B<\/text>\n\n    <!-- DEFLECTION INDICATOR (vertical dashed) -->\n    <line x1=\"300\" y1=\"178\" x2=\"300\" y2=\"120\" stroke=\"#e74c3c\" stroke-width=\"1.5\" stroke-dasharray=\"4,4\" opacity=\"0.6\"\/>\n    <text x=\"310\" y=\"155\" font-family=\"Georgia, serif\" font-size=\"12\" fill=\"#e74c3c\" font-style=\"italic\">\u03b4 max<\/text>\n\n    <!-- SMALL NOTE -->\n    <text x=\"300\" y=\"24\" font-family=\"Arial, sans-serif\" font-size=\"11\" fill=\"#7f8fa6\" text-anchor=\"middle\" font-style=\"italic\">Simply supported \u00b7 uniform load \u00b7 elastic curve (exaggerated)<\/text>\n\n<\/svg>\n\n    <div style=\"display:flex; flex-direction:column; gap:1.5rem;\">\n\n        <!-- INPUTS -->\n        <div style=\"display:grid; grid-template-columns:1fr 1fr; gap:1.2rem 1.5rem;\">\n            <div style=\"display:flex; flex-direction:column; gap:0.3rem;\">\n                <label style=\"font-weight:500; font-size:0.85rem; color:#1f2b44;\">\ud83d\udccf Span <span style=\"color:#4b6a9e;\">(L)<\/span><\/label>\n                <input type=\"number\" id=\"wpspan\" value=\"4\" step=\"0.1\" min=\"0.1\" placeholder=\"e.g. 4\" style=\"background:#f8faff; border:1px solid #d7e0ee; border-radius:14px; padding:0.7rem 1rem; font-size:1rem; font-weight:500; color:#0b1a33; width:100%;\">\n                <div style=\"font-size:0.75rem; color:#5e7296;\">meters (m)<\/div>\n            <\/div>\n            <div style=\"display:flex; flex-direction:column; gap:0.3rem;\">\n                <label style=\"font-weight:500; font-size:0.85rem; color:#1f2b44;\">\u2696\ufe0f Uniform load <span style=\"color:#4b6a9e;\">(w)<\/span><\/label>\n                <input type=\"number\" id=\"wpload\" value=\"12\" step=\"0.1\" min=\"0\" placeholder=\"e.g. 12\" style=\"background:#f8faff; border:1px solid #d7e0ee; border-radius:14px; padding:0.7rem 1rem; font-size:1rem; font-weight:500; color:#0b1a33; width:100%;\">\n                <div style=\"font-size:0.75rem; color:#5e7296;\">kN\/m<\/div>\n            <\/div>\n            <div style=\"display:flex; flex-direction:column; gap:0.3rem;\">\n                <label style=\"font-weight:500; font-size:0.85rem; color:#1f2b44;\">\ud83e\uddf1 Elastic modulus <span style=\"color:#4b6a9e;\">(E)<\/span><\/label>\n                <input type=\"number\" id=\"wpmodulus\" value=\"200\" step=\"1\" min=\"1\" placeholder=\"e.g. 200\" style=\"background:#f8faff; border:1px solid #d7e0ee; border-radius:14px; padding:0.7rem 1rem; font-size:1rem; font-weight:500; color:#0b1a33; width:100%;\">\n                <div style=\"font-size:0.75rem; color:#5e7296;\">GPa<\/div>\n            <\/div>\n            <div style=\"display:flex; flex-direction:column; gap:0.3rem;\">\n                <label style=\"font-weight:500; font-size:0.85rem; color:#1f2b44;\">\ud83d\udcd0 Moment of inertia <span style=\"color:#4b6a9e;\">(I)<\/span><\/label>\n                <input type=\"number\" id=\"wpinertia\" value=\"8500\" step=\"10\" min=\"1\" placeholder=\"e.g. 8500\" style=\"background:#f8faff; border:1px solid #d7e0ee; border-radius:14px; padding:0.7rem 1rem; font-size:1rem; font-weight:500; color:#0b1a33; width:100%;\">\n                <div style=\"font-size:0.75rem; color:#5e7296;\">cm\u2074<\/div>\n            <\/div>\n        <\/div>\n\n        <!-- BUTTONS -->\n        <div style=\"display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 0.5rem;\">\n            <button id=\"wpCalcBtn\" style=\"background:#0b1a33; border:none; color:#fff; font-weight:600; font-size:1rem; padding:0.8rem 2.2rem; border-radius:40px; cursor:pointer; box-shadow:0 4px 8px rgba(11,26,51,0.15);\">\u26a1 Calculate deflection<\/button>\n            <button id=\"wpResetBtn\" style=\"background:transparent; border:1px solid #d7e0ee; color:#2c3e5c; font-weight:500; padding:0.7rem 1.6rem; border-radius:40px; cursor:pointer; font-size:0.9rem;\">\u21ba Reset to defaults<\/button>\n        <\/div>\n\n        <!-- RESULT -->\n        <div style=\"background:#f2f7ff; border-radius:24px; padding:1.5rem 1.8rem; border:1px solid #e3ecfc;\">\n            <div style=\"display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; row-gap:0.5rem;\">\n                <span style=\"font-weight:500; color:#264074; background:#e3ecfc; padding:0.3rem 1rem; border-radius:40px; font-size:0.9rem;\">\u23fa Max deflection<\/span>\n                <span id=\"wpResult\" style=\"font-size:2.2rem; font-weight:700; color:#0b1a33; letter-spacing:-0.02em;\">\n                    0.00 <small style=\"font-size:1.1rem; font-weight:500; color:#3f5a82; margin-left:0.4rem;\">mm<\/small>\n                <\/span>\n            <\/div>\n            <div style=\"margin-top:1rem; font-size:0.9rem; color:#2f4a73; background:#ffffffcc; padding:0.6rem 1rem; border-radius:40px; display:inline-block; border:1px solid #dbe5f5;\">\n                <code style=\"background:#eef4ff; padding:0.1rem 0.5rem; border-radius:20px; font-weight:500; color:#0033aa;\">\u03b4 = (5\u00b7w\u00b7L\u2074)\/(384\u00b7E\u00b7I)<\/code> &nbsp; (SI units)\n            <\/div>\n        <\/div>\n\n        <div style=\"margin-top:0.5rem; font-size:0.8rem; color:#6a7fa0; text-align:center; border-top:1px solid #e9eff7; padding-top:1.2rem;\">\n            \u2699\ufe0f Uniform load \u00b7 simply supported \u00b7 elastic deflection\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    (function() {\n        \/\/ --- WordPress-safe: no conflict with other scripts ---\n        const span   = document.getElementById('wpspan');\n        const load   = document.getElementById('wpload');\n        const mod    = document.getElementById('wpmodulus');\n        const inertia= document.getElementById('wpinertia');\n        const result = document.getElementById('wpResult');\n        const calcBtn= document.getElementById('wpCalcBtn');\n        const resetBtn= document.getElementById('wpResetBtn');\n\n        const DEFAULTS = { span:4, load:12, modulus:200, inertia:8500 };\n\n        function computeDeflection(L_m, w_kNm, E_GPa, I_cm4) {\n            const L = L_m;\n            const w = w_kNm * 1000;\n            const E = E_GPa * 1e9;\n            const I = I_cm4 * 1e-8;\n            if (L <= 0 || w <= 0 || E <= 0 || I <= 0) return NaN;\n            return (5 * w * Math.pow(L, 4)) \/ (384 * E * I) * 1000; \/\/ mm\n        }\n\n        function update() {\n            const L = parseFloat(span.value);\n            const w = parseFloat(load.value);\n            const E = parseFloat(mod.value);\n            const I = parseFloat(inertia.value);\n\n            if (isNaN(L) || isNaN(w) || isNaN(E) || isNaN(I)) {\n                result.innerHTML = '\u2014 <small>invalid<\/small>';\n                return;\n            }\n\n            const val = computeDeflection(L, w, E, I);\n            if (isNaN(val) || !isFinite(val) || val < 0) {\n                result.innerHTML = '\u2014 <small>check values<\/small>';\n                return;\n            }\n\n            let display;\n            if (val < 0.01) display = val.toFixed(4);\n            else if (val < 1) display = val.toFixed(3);\n            else if (val < 100) display = val.toFixed(2);\n            else display = val.toFixed(1);\n\n            if (Math.abs(parseFloat(display)) < 0.0001) display = '0.00';\n            result.innerHTML = `${display} <small>mm<\/small>`;\n        }\n\n        function resetDefaults() {\n            span.value = DEFAULTS.span;\n            load.value = DEFAULTS.load;\n            mod.value = DEFAULTS.modulus;\n            inertia.value = DEFAULTS.inertia;\n            update();\n        }\n\n        \/\/ --- events ---\n        calcBtn.addEventListener('click', update);\n        resetBtn.addEventListener('click', resetDefaults);\n\n        [span, load, mod, inertia].forEach(inp => {\n            inp.addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); update(); } });\n            inp.addEventListener('blur', update);\n        });\n\n        \/\/ initial load\n        resetDefaults();\n    })();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udcd0 Beam deflection uniform load Simply supported beam \u00b7 max deflection at center w (kN\/m) L (m) A B \u03b4 max Simply supported \u00b7 uniform load \u00b7 elastic curve (exaggerated) \ud83d\udccf Span (L) meters (m) \u2696\ufe0f Uniform load (w) kN\/m \ud83e\uddf1 Elastic modulus (E) GPa \ud83d\udcd0 Moment of inertia (I) cm\u2074 \u26a1 Calculate deflection \u21ba [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-88","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/structp.eu\/index.php?rest_route=\/wp\/v2\/pages\/88","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/structp.eu\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/structp.eu\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/structp.eu\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/structp.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=88"}],"version-history":[{"count":3,"href":"https:\/\/structp.eu\/index.php?rest_route=\/wp\/v2\/pages\/88\/revisions"}],"predecessor-version":[{"id":140,"href":"https:\/\/structp.eu\/index.php?rest_route=\/wp\/v2\/pages\/88\/revisions\/140"}],"wp:attachment":[{"href":"https:\/\/structp.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=88"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}