Clone
2
Walkthrough (Web App)
unfunny edited this page 2026-02-14 19:44:24 -05:00

Walkthrough (Web App)

The svg2nametag-Ren project includes a modern, client-side Web App powered by WebAssembly (WASM). This allows you to convert SVG files directly in your browser without needing to install Python or any dependencies on your machine.

Features

  • Zero Install: Runs entirely in the browser.
  • Offline Support (PWA): Once loaded, it works without an internet connection. Install it to your desktop or mobile device!
  • Batch Processing: Drag & drop multiple files or select an entire folder.
  • Instant Preview: Fast geometry processing using Manifold 3D.
  • Secure: Files processed locally; nothing is uploaded to a server.

Getting Started

Running Locally (Development)

If you have the source code and want to run it yourself:

  1. Navigate to the webapp directory:
    cd webapp
    
  2. Install dependencies:
    npm install
    
  3. Start the development server:
    npm run dev
    
  4. Open http://localhost:5173 in your browser.

Using the App

  1. Open the App: Launch the web app in your browser.
  2. Add Files:
    • Drag & Drop: Drag one or more .svg files into the dashed upload area.
    • Select Folder: Click the folder icon in the top-right corner to select a directory containing SVGs.
  3. Wait for Engine: Ensure the status indicator says "Engine Ready" in green.
  4. Convert: Click the "Convert & Download ZIP" button.
  5. Download: The app will process all files and automatically download a Nametags_Converted.zip file containing organized STL models for each nametag.

Progressive Web App (PWA)

This app is a PWA, meaning you can install it as a standalone application.

  1. Open the web app in a supported browser (Chrome, Edge, Safari).
  2. Click the "Install" icon in the address bar (desktop) or "Add to Home Screen" (mobile).
  3. Launch the app from your desktop/home screen. It will work offline!

Troubleshooting

  • "Engine Loading..." forever: Ensure manifold.wasm is correctly served. Check the browser console (F12) for errors.
  • Blank Screen Offline: Ensure you have launched the app at least once while online to cache resources.