{"id":65975,"date":"2025-06-24T03:10:12","date_gmt":"2025-06-24T03:10:12","guid":{"rendered":"https:\/\/www.harsle.com\/?page_id=65975"},"modified":"2025-07-18T07:20:20","modified_gmt":"2025-07-18T07:20:20","slug":"offset-calculator","status":"publish","type":"page","link":"https:\/\/www.harsle.com\/fr\/offset-calculator\/","title":{"rendered":"Calculateur de d\u00e9calage"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"65975\" class=\"elementor elementor-65975\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"wd-negative-gap elementor-element elementor-element-791676b e-flex e-con-boxed e-con e-parent\" data-id=\"791676b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-5654e98 e-con-full e-flex e-con e-child\" data-id=\"5654e98\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3c780b6 elementor-widget elementor-widget-image\" data-id=\"3c780b6\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"500\" height=\"500\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2025\/07\/Offset-Calculator500x500.png\" class=\"attachment-large size-large wp-image-67132\" alt=\"Offset Calculator\" srcset=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2025\/07\/Offset-Calculator500x500.png 500w, https:\/\/www.harsle.com\/wp-content\/uploads\/2025\/07\/Offset-Calculator500x500-300x300.png 300w, https:\/\/www.harsle.com\/wp-content\/uploads\/2025\/07\/Offset-Calculator500x500-150x150.png 150w, https:\/\/www.harsle.com\/wp-content\/uploads\/2025\/07\/Offset-Calculator500x500-360x360.png 360w, https:\/\/www.harsle.com\/wp-content\/uploads\/2025\/07\/Offset-Calculator500x500-430x430.png 430w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8dda7b4 e-con-full e-flex e-con e-child\" data-id=\"8dda7b4\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4118b6e elementor-widget elementor-widget-wd_text_block\" data-id=\"4118b6e\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"wd_text_block.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"wd-text-block reset-last-child text-left\">\n\t\t\t\n\t\t\t<p>This Offset Calculator helps you determine the estimated bend angle and stroke depth based on your desired offset height and tool height. It simplifies setup for offset bending operations, ensuring accurate results and reduced trial-and-error in press brake programming.<\/p><h3>\ud83d\udcd0 <strong>Calculation Formulas<\/strong><\/h3><p><strong>1. Estimated Angle<\/strong><\/p><div style=\"text-align: center; font-weight: bold;\">Estimated Angle = 90 \u00d7 (Desired Offset Height \u00f7 Offset Tool Height)<\/div><p><strong>2. Stroke Depth<\/strong><\/p><div style=\"text-align: center; font-weight: bold;\">Stroke Depth = Desired Offset Height \u00d7 0.7071<\/div><ul><li><strong>Desired Offset Height<\/strong>: The total offset you want to achieve in mm\/inch.<\/li><li><strong>Offset Tool Height<\/strong>: The full offset height your punch tool can form at 90\u00b0.<\/li><\/ul>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-5c6d223 e-flex e-con-boxed e-con e-parent\" data-id=\"5c6d223\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-915620e elementor-widget elementor-widget-html\" data-id=\"915620e\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <style>\r\n        .offset-calculator {\r\n            max-width: 800px;\r\n            margin: 0 auto;\r\n            padding: 20px;\r\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n            color: #333;\r\n            background: #fff;\r\n            border-radius: 8px;\r\n            box-shadow: 0 1px 3px rgba(0,0,0,0.1);\r\n        }\r\n\r\n        .calculator-title {\r\n            text-align: center;\r\n            color: #000;\r\n            margin-bottom: 30px;\r\n            font-size: 28px;\r\n            font-weight: bold;\r\n        }\r\n\r\n        .calculator-form {\r\n            background: #fff;\r\n            padding: 0;\r\n        }\r\n\r\n        .input-group {\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        .input-group label {\r\n            display: block;\r\n            margin-bottom: 15px;\r\n            color: #000;\r\n        }\r\n\r\n        .input-wrapper {\r\n            position: relative;\r\n            display: flex;\r\n            align-items: stretch;\r\n        }\r\n\r\n        .input-group input {\r\n            flex: 1;\r\n            padding: 12px 15px;\r\n            border: 1px solid #ddd;\r\n            border-radius: 4px 0 0 4px;\r\n            font-size: 16px;\r\n            box-sizing: border-box;\r\n            height: 45px;\r\n            margin: 0;\r\n        }\r\n\r\n        .unit-display {\r\n            background: #f8f9fa;\r\n            padding: 0 15px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            border-radius: 0 4px 4px 0;\r\n            color: #666;\r\n            font-size: 16px;\r\n            min-width: 45px;\r\n            border: 1px solid #ddd;\r\n            border-left: none;\r\n            margin: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        .input-group input:focus {\r\n            outline: none;\r\n            border-color: #007bff;\r\n        }\r\n\r\n        .unit {\r\n            position: absolute;\r\n            right: 15px;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            color: #666;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .calculate-btn {\r\n            background: #007bff;\r\n            color: white;\r\n            padding: 12px;\r\n            border: none;\r\n            border-radius: 4px;\r\n            cursor: pointer;\r\n            font-size: 16px;\r\n            width: 100%;\r\n            text-transform: uppercase;\r\n            margin-top: 20px;\r\n            font-weight: bold;\r\n        }\r\n\r\n        .calculate-btn:hover {\r\n            background: #007bff;\r\n            color: white;\r\n        }\r\n\r\n        .result-section {\r\n            margin-top: 20px;\r\n            padding: 20px;\r\n            background: #ecf5ff;\r\n            border-radius: 4px;\r\n            display: none;\r\n            border: 1px solid #B3D7FF;\r\n        }\r\n\r\n        .result-section h3 {\r\n            color: #007bff;\r\n            margin: 0 0 15px 0;\r\n            font-size: 18px;\r\n            font-weight: bold;\r\n        }\r\n\r\n        .result-group {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            padding: 10px 0;\r\n            border-bottom: 1px solid #b3d7ff;\r\n        }\r\n\r\n        .result-group:last-child {\r\n            border-bottom: none;\r\n        }\r\n\r\n        .result-label {\r\n            color: #444;\r\n            font-weight: normal;\r\n        }\r\n\r\n        .result-value {\r\n            color: #007bff;\r\n            font-weight: bold;\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .offset-calculator {\r\n                padding: 15px;\r\n            }\r\n        }\r\n\r\n        .unit-selection {\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        .unit-selection label {\r\n            display: block;\r\n            color: #000;\r\n            margin-bottom: 8px;\r\n        }\r\n\r\n        .unit-options {\r\n            background: #f5f5f5;\r\n            padding: 10px;\r\n            border-radius: 4px;\r\n            display: flex;\r\n            justify-content: center;\r\n            gap: 80px;\r\n        }\r\n\r\n        .unit-option {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 5px;\r\n        }\r\n\r\n        .unit-option input[type=\"radio\"] {\r\n            margin: 0;\r\n        }\r\n\r\n        .unit-option label {\r\n            margin: 0;\r\n            cursor: pointer;\r\n        }\r\n\r\n        \/* Update existing input-wrapper style *\/\r\n        .input-wrapper .unit {\r\n            right: 15px;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"offset-calculator\">\r\n        <h1 class=\"calculator-title\">Offset Calculator<\/h1>\r\n        \r\n        <!-- Unit Selection -->\r\n        <div class=\"unit-selection\">\r\n            <label>Unit<\/label>\r\n            <div class=\"unit-options\">\r\n                <div class=\"unit-option\">\r\n                    <input type=\"radio\" id=\"mm\" name=\"unit\" value=\"mm\" checked>\r\n                    <label for=\"mm\">mm<\/label>\r\n                <\/div>\r\n                <div class=\"unit-option\">\r\n                    <input type=\"radio\" id=\"inch\" name=\"unit\" value=\"inch\">\r\n                    <label for=\"inch\">inch<\/label>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <!-- Calculator Form Section -->\r\n        <section class=\"calculator-form\">\r\n            <div class=\"input-group\">\r\n                <label for=\"desiredHeight\">Desired Offset Height<\/label>\r\n                <div class=\"input-wrapper\">\r\n                    <input type=\"number\" id=\"desiredHeight\" step=\"0.1\" required>\r\n                    <div class=\"unit-display\" id=\"desiredHeightUnit\">mm<\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"input-group\">\r\n                <label for=\"toolHeight\">Offset Tool Height<\/label>\r\n                <div class=\"input-wrapper\">\r\n                    <input type=\"number\" id=\"toolHeight\" step=\"0.1\" required>\r\n                    <div class=\"unit-display\" id=\"toolHeightUnit\">mm<\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <button class=\"calculate-btn\" onclick=\"calculateOffset()\">Calculate<\/button>\r\n        <\/section>\r\n\r\n        <!-- Result Section -->\r\n        <section class=\"result-section\" id=\"result\">\r\n            <h3>Results<\/h3>\r\n            <div class=\"result-group\">\r\n                <div class=\"result-label\">Estimated Angle<\/div>\r\n                <div class=\"result-value\" id=\"angleResult\"><\/div>\r\n            <\/div>\r\n            <div class=\"result-group\">\r\n                <div class=\"result-label\">Stroke Depth<\/div>\r\n                <div class=\"result-value\" id=\"depthResult\"><\/div>\r\n            <\/div>\r\n        <\/section>\r\n    <\/div>\r\n\r\n    <script>\r\n        let lastUnit = 'mm';\r\n        document.querySelectorAll('input[name=\"unit\"]').forEach(radio => {\r\n            radio.addEventListener('change', function() {\r\n                const unit = this.value;\r\n                \/\/ \u83b7\u53d6\u5f53\u524d\u8f93\u5165\u503c\r\n                const desiredInput = document.getElementById('desiredHeight');\r\n                const toolInput = document.getElementById('toolHeight');\r\n                let desiredValue = parseFloat(desiredInput.value);\r\n                let toolValue = parseFloat(toolInput.value);\r\n                \/\/ \u6362\u7b97\u903b\u8f91\r\n                if (!isNaN(desiredValue)) {\r\n                    if (lastUnit === 'mm' && unit === 'inch') {\r\n                        desiredValue = desiredValue \/ 25.4;\r\n                    } else if (lastUnit === 'inch' && unit === 'mm') {\r\n                        desiredValue = desiredValue * 25.4;\r\n                    }\r\n                    desiredInput.value = desiredValue ? desiredValue.toFixed(4).replace(\/\\.0+$\/, '') : '';\r\n                }\r\n                if (!isNaN(toolValue)) {\r\n                    if (lastUnit === 'mm' && unit === 'inch') {\r\n                        toolValue = toolValue \/ 25.4;\r\n                    } else if (lastUnit === 'inch' && unit === 'mm') {\r\n                        toolValue = toolValue * 25.4;\r\n                    }\r\n                    toolInput.value = toolValue ? toolValue.toFixed(4).replace(\/\\.0+$\/, '') : '';\r\n                }\r\n                lastUnit = unit;\r\n                document.getElementById('desiredHeightUnit').textContent = unit;\r\n                document.getElementById('toolHeightUnit').textContent = unit;\r\n                \/\/ \u6e05\u9664\u7ed3\u679c\r\n                document.getElementById('result').style.display = 'none';\r\n            });\r\n        });\r\n\r\n        function calculateOffset() {\r\n            \/\/ Get input values\r\n            const desiredHeight = parseFloat(document.getElementById('desiredHeight').value);\r\n            const toolHeight = parseFloat(document.getElementById('toolHeight').value);\r\n            const unit = document.querySelector('input[name=\"unit\"]:checked').value;\r\n\r\n            \/\/ Validate inputs\r\n            if (isNaN(desiredHeight) || isNaN(toolHeight)) {\r\n                alert('Please enter valid numbers for all fields');\r\n                return;\r\n            }\r\n\r\n            if (desiredHeight <= 0 || toolHeight <= 0) {\r\n                alert('Heights must be greater than 0');\r\n                return;\r\n            }\r\n\r\n            if (desiredHeight > toolHeight) {\r\n                alert('Desired Offset Height cannot be greater than Tool Height');\r\n                return;\r\n            }\r\n\r\n            \/\/ Calculate Estimated Angle: \u03b8 = 90\u00b0 \u00d7 (Hd\/Ht)\r\n            const angle = 90 * (desiredHeight \/ toolHeight);\r\n\r\n            \/\/ Calculate Stroke Depth: S = Hd \u00d7 sin(45\u00b0) = Hd \u00d7 0.7071\r\n            const strokeDepth = desiredHeight * 0.7071;\r\n\r\n            \/\/ Display results\r\n            document.getElementById('result').style.display = 'block';\r\n            document.getElementById('angleResult').innerHTML = `${angle.toFixed(1)}\u00b0`;\r\n            document.getElementById('depthResult').innerHTML = `${strokeDepth.toFixed(1)} ${unit}`;\r\n        }\r\n    <\/script>\r\n<\/body>\r\n<\/html> \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Ce calculateur de d\u00e9calage vous aide \u00e0 d\u00e9terminer l&#039;angle de pliage et la profondeur de course estim\u00e9s en fonction de la hauteur de d\u00e9calage souhait\u00e9e et<\/p>","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-65975","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.harsle.com\/fr\/wp-json\/wp\/v2\/pages\/65975","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.harsle.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.harsle.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.harsle.com\/fr\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.harsle.com\/fr\/wp-json\/wp\/v2\/comments?post=65975"}],"version-history":[{"count":0,"href":"https:\/\/www.harsle.com\/fr\/wp-json\/wp\/v2\/pages\/65975\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.harsle.com\/fr\/wp-json\/wp\/v2\/media?parent=65975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}