Spaces:
Running
Running
You are "Artisan Forge," a master digital craftsman and mechanical engineer specializing in metal fabrication. You are creating a comprehensive, interactive, and visually stunning web-based calculator for tube and pipe bending. The tool must be professional, intuitive, and powerful enough for both seasoned fabricators and engineering students. It should not only calculate but also *teach* and *visualize* the concepts. **Core Objective:** Design a single-page web application using HTML, CSS, and JavaScript. The page must include all features below in a clean, organized, and responsive layout. **Feature Set (Implement in Detail):** **1. Input Section (The Anvil):** * Create a form with clearly labeled input fields with appropriate units: * **Outer Diameter (OD):** (mm or in) - dropdown for unit selection. * **Wall Thickness (WT):** (mm or in) * **Bend Radius (CLR):** (mm or in) - Note: This is the Centerline Radius. * **Bend Angle (α):** (degrees) - Slider input (0° to 180°) alongside numeric input. * **Material:** Dropdown menu (e.g., Mild Steel, Stainless Steel 304, Aluminum 6061-T6, Copper). Each material must have a predefined **Tensile Strength (TS)** and **Modulus of Elasticity (E)** stored in a JavaScript object. * **K-Factor Input:** Auto-calculated but with an option for a user-defined "Expert Override" input field. **2. Calculated Results (The Measurements):** * Calculate and display the following results clearly: * **Bend Allowance (BA):** The length of the neutral axis within the bend. * **Bend Deduction (BD):** The difference between the sum of the flange lengths and the initial flat length. * **Elongation (%):** The percentage of stretching on the outer fiber. `Elongation % = ((OD / (2 * CLR)) * 100)`. **CRITICAL:** Compare this value to the material's typical maximum elongation (e.g., Mild Steel ~20-30%). Implement a color-coded system (Green/Yellow/Red) to warn users of potential cracking. * **Bending Force (F):** Calculate the force required for air bending (in tons). `F = (k * TS * width * thickness^2) / (die_width)`. Assume `k=1.33` for a air bending and provide tooltips explaining the variables. Let the user input `Die Width` or provide a reasonable default based on material and thickness. **3. K-Factor Visualization (The Soul of the Bend):** * This is the **"special" visual element**. Create an interactive SVG or Canvas graphic. * Draw a cross-section of the tube being bent. * Clearly label the Neutral Axis, Inside of Bend (Compression), and Outside of Bend (Tension). * The K-Factor is the ratio `(t - distance from inside face to neutral axis) / t`. Visually represent this ratio with a dynamic bar or a movable line that adjusts as the user changes inputs (especially Thickness and Radius). * **Animation:** When the user inputs a new Bend Radius, animate the graphic to show the tube bending and the neutral axis shifting inward. The shift should be proportional to the calculated K-Factor. A smaller radius should show a more significant shift. **4. Safety Factor & Warnings (The Guardian):** * This is the **"sense"** feature for practicality and safety. * Based on the calculated **Elongation %** and the selected material's known ductility limits, display a clear warning message. * *Green Checkmark:* "Elongation within safe limits." * *Yellow Exclamation:* "Approaching material limits. Consider a larger bend radius." * *Red X:* "Warning! Elongation exceeds typical material limits. High risk of cracking or failure." * For the **Bending Force,** compare the calculated tonnage to a range of common press brake capacities (e.g., 20-ton, 50-ton, 100-ton). Display a message: "Required force: X tons. Suitable for a [e.g., 50-ton] press brake." **5. Flange Length Calculator (The Practicality):** * Allow users to input their desired **Leg Length A** and **Leg Length B** (the straight sections on either side of the bend). * Calculate and output the **Total Flat Length** required before bending: `Flat_Length = Leg_A + Leg_B + BD - (2 * CLR)`. **UI/UX & Design (The Aesthetic):** * **Theme:** Use a dark theme interface reminiscent of a modern CNC machine control panel (dark slate gray background, light blue/green text for highlights, amber for warnings). * **Layout:** Use a grid layout. Left column for inputs, center column for results and warnings, right column for the K-Factor visualization. * **Interactivity:** Use real-time calculation. Results update instantly as the user types or moves sliders. * **Tooltips:** Add small (i) icons next to every technical term (K-Factor, BA, BD, CLR). On hover, show a brief, simple explanation. **JavaScript Logic:** * Pre-define material properties in an object: `materials = { "Mild Steel": { tensileStrength: 400, modulus: 210000, maxElongation: 22 }, ... }` * Write functions for each calculation: `calculateKFactor()`, `calculateBA()`, `calculateBD()`, `calculateElongation()`, `calculateForce()`. * Use event listeners (`oninput`, `onchange`) on all form elements to trigger a `updateCalculations()` function that runs all other functions and updates the DOM. **Final Instruction:** Output the complete, ready-to-run code in a single code block. Include all HTML structure, CSS styling, and JavaScript logic. The code must be clean, well-commented, and functional upon execution. - Initial Deployment
0067887
verified