Garyf: Created page with "{{Announcement header |Status=Work in Progress |PubDate=2026-04-02 |Categories=STL, STLs, STL2TechDraw, 3D printing, 3D modelling, Engineering Drawing, Technical Drawing |Introduction=STL2TechDraw is a web application for converting STL 3D models into professional technical drawings with automatic feature detection, annotations, and multiple export formats. }} {{Announcement |Announcement=== Features == * Upload and parse STL files * Multiple view projections (Front,..."

2026-04-02T20:08:17Z

Created page with "{{Announcement header |Status=Work in Progress |PubDate=2026-04-02 |Categories=STL, STLs, STL2TechDraw, 3D printing, 3D modelling, Engineering Drawing, Technical Drawing |Introduction=STL2TechDraw is a web application for converting STL 3D models into professional technical drawings with automatic feature detection, annotations, and multiple export formats. }} {{Announcement |Announcement=== Features == * Upload and parse STL files * Multiple view projections (Front,..."

New page

{{Announcement header
|Status=Work in Progress
|PubDate=2026-04-02
|Categories=STL, STLs, STL2TechDraw, 3D printing, 3D modelling, Engineering Drawing, Technical Drawing
|Introduction=STL2TechDraw is a web application for converting STL 3D models into professional technical drawings with automatic feature detection, annotations, and multiple export formats.
}}
{{Announcement
|Announcement=== Features ==

* Upload and parse STL files
* Multiple view projections (Front, Top, Side)
* First and Third angle projection support
* Automatic feature detection (circles, holes, dimensions)
* Manual annotation tools (dimensions, radius, angles, text)
* Zoom and pan controls
* Manual and auto-scaling options
* Export to PNG, PDF, and SVG formats
* Professional A3 title block with drawing information

== Prerequisites ==

Before installing, ensure you have the following installed on your system:

* '''Node.js''' (v18.0.0 or higher) – [https://nodejs.org/ Download]
* '''npm''' (v9.0.0 or higher) – Comes with Node.js

To verify your installation:
node --version
npm --version

== Dependencies ==

=== Production Dependencies ===

* '''react''' (^19.2.0) – UI framework
* '''react-dom''' (^19.2.0) – React DOM rendering
* '''three''' (^0.183.1) – 3D graphics library for STL parsing
* '''framer-motion''' (^12.34.3) – Animation library
* '''jspdf''' (^4.2.0) – PDF generation library

=== Development Dependencies ===

* '''vite''' (^7.3.1) – Build tool and dev server
* '''@vitejs/plugin-react''' (^5.1.1) – Vite React plugin
* '''eslint''' (^9.39.1) – Code linting
* '''eslint-plugin-react-hooks''' (^7.0.1) – React hooks linting
* '''eslint-plugin-react-refresh''' (^0.4.24) – React refresh linting
* '''@types/react''' (^19.2.7) – React TypeScript types
* '''@types/react-dom''' (^19.2.3) – React DOM TypeScript types
* '''@eslint/js''' (^9.39.1) – ESLint JavaScript support
* '''globals''' (^16.5.0) – Global variables for ESLint

== Installation ==

=== Option 1: Quick Start (Using start.sh) ===

# [https://github.com/dafogary/STL2TechDraw Clone or download the repository]
# Navigate to the project directory:
cd stl2techdraw
# Run the startup script:
./start.sh

The script will:
* Check for Node.js and npm
* Install dependencies if needed
* Start the development server

=== Option 2: Manual Installation ===

# Clone or download the repository:
git clone <repository-url>
cd stl2techdraw
# Install dependencies:
npm install
# Start the development server:
npm run dev
# Open your browser and navigate to:
http://localhost:5173

== Available Scripts ==

* <code>npm run dev</code> – Start development server with hot reload
* <code>npm run build</code> – Build for production
* <code>npm run preview</code> – Preview production build locally
* <code>npm run lint</code> – Run ESLint to check code quality

== Usage ==

# '''Upload STL File''': Click "Choose File" to upload your STL 3D model
# '''Configure Drawing''':
#* Enter drawing name, author, and company details
#* Select desired views (Front, Top, Side)
#* Choose projection type (First or Third Angle)
#* Toggle dimensions display
# '''Adjust Scale''': Use auto-scale or set manual scale ratio
# '''Add Annotations''':
#* Auto-detection finds circles and holes automatically
#* Use manual tools for dimensions, radius, angles, and text
# '''Navigate''':
#* Mouse wheel to zoom
#* Left-click drag to pan
#* Reset button to restore view
# '''Export''': Download as PNG, PDF, or SVG

== Project Structure ==

<pre>
stl2techdraw/
├── public/ # Static assets
├── src/
│ ├── components/ # React components
│ │ └── ui/ # UI components (button, card, input, checkbox)
│ ├── assets/ # Images and other assets
│ ├── App.jsx # Main application component
│ ├── App.css # Application styles
│ ├── index.css # Global styles
│ └── main.jsx # Application entry point
├── index.html # HTML template
├── package.json # Project dependencies and scripts
├── vite.config.js # Vite configuration
├── eslint.config.js # ESLint configuration
├── start.sh # Startup script
└── README.md # This file
</pre>

== Browser Support ==

* Chrome (recommended)
* Firefox
* Safari
* Edge

Modern browsers with ES6+ support required.

== Troubleshooting ==

=== Dependencies not installing ===
rm -rf node_modules package-lock.json
npm install

=== Port 5173 already in use ===

Edit <code>vite.config.js</code> to change the port:
<syntaxhighlight lang="javascript">
export default defineConfig({
server: {
port: 3000 // Change to your preferred port
}
})
</syntaxhighlight>

=== White screen after changes ===
* Clear browser cache and hard refresh (Ctrl+Shift+R or Cmd+Shift+R)
* Check browser console for errors
* Restart development server

== License ==

AGPL-3.0-or-later

== Contributing ==

Documentation will be loaded on [https://CheekyFactor.com/index.php/STL2TechDraw CheekyFactor.com]. If you would like to contribute, please contact the developer via [https://dafocreative.com DAFO Creative].
}}
{{Footer}}

STL2TechDraw - Revision history