A professional-grade, ultra-lightweight, single-file HTML5 web application designed to blueprint front elevations for sheds/outbuildings, simulate dynamic cladding runs, and generate an mathematically optimized material cut list.
Built entirely with native web technologies—zero frameworks, zero external dependencies, and zero build steps.
Live Demo https://smford.github.io/cladding-cutlist/
Because this entire application is packaged into a single index.html file, you can host it for free in seconds using GitHub Pages:
- Push this file to your repository as
index.html. - Go to your repository's Settings > Pages.
- Under Build and deployment, set the source to
Deploy from a branchand selectmain(ormaster). - Click Save. Your app will be live at
https://<your-username>.github.io/<your-repo-name>/.
- Dynamic Wall Profiles: Real-time rendering of both Flat/Pent and Gable roof styles.
- Smart Cladding Simulation: Toggles between Horizontal and Vertical cladding orientations, complete with alternating board fills to clearly track joins and aesthetics.
- Openings Layering Engine: Add multiple doors and windows dynamically. If an opening clips the outer structure or is placed entirely out of bounds, the application instantly flags it with a translucent red error overlay.
- Interval-Clipping Geometry: Calculates exact timber/composite segments by intersecting board trajectories with the structure's boundary envelope, slicing out structural openings cleanly on a 1D coordinate system.
- Oversize Segment Splitter: Automatically accounts for material limitations. If a continuous cladding run exceeds your purchased stock length (e.g., a 5-meter wall using 3.6-meter boards), the engine introduces a seamless joint split and maps out the structural remainder.
- First Fit Decreasing (FFD) Linear Nesting: Employs a greedy mathematical optimization packing algorithm. It sorts all calculated cut requirements in descending order and packs them into raw stock lengths to systematically minimize cut-off waste.
- URL State Persistence: Every adjustment to dimensions, board widths, or window positions automatically serializes into the browser's URL query string in real-time. Bookmark the URL or share it to reload the exact design state instantly.
- Native High-Fidelity PDF Reports: Built-in
@media printCSS engine strips away editing sidebars and input noise. Clicking the download button reformats your workspace fluidly into a clean, professional, multi-page print document complete with custom vector packing diagrams.
- Frontend: Semantic HTML5 & Modern Responsive CSS3 (CSS Variables, Flexbox, Grid layout systems).
- Graphics: Native HTML5 Canvas 2D Context API.
- Engine Logic: Pure Vanilla JavaScript (ES6+).
- Optimization Core: One-Dimensional Bin Packing / Linear Nesting Allocation Pipeline.
- Envelope Definition: The engine maps the outer perimeter coordinates based on the width, eave height, and ridge peak.
- Opening Subtraction: Openings create an internal map of "forbidden intervals." As the renderer steps through board widths, it subtracts these intervals from the active wall span.
-
Nesting Sequence:
$$\text{Required Cuts Sorted} \rightarrow [1800\text{mm}, 1200\text{mm}, 1200\text{mm}, 500\text{mm}, \dots]$$ The greedy packing engine evaluates current open stock boards sequentially; if a piece fits the remaining capacity, it's allocated. If not, a fresh board is pulled from inventory.
This project is open-source and available under the MIT License. Feel free to tweak, branch, or scale the geometry modules for your own custom woodworking tools.