Skip to content

Fab-Plotter Website

Overview

The Fab-Plotter is a web application designed to facilitate the conversion of SVG (Scalable Vector Graphics) files into G-code instructions suitable for controlling plotters. This documentation provides an in-depth guide to the application’s functionality, usage instructions, technologies employed, and other relevant details.

Functionality

  1. SVG Import and Display:
    • Users can import SVG files by dragging and dropping them onto the designated area or selecting them using the file input element.
    • Once imported, the SVG content is displayed within the application’s interface, allowing users to preview their designs.
  2. G-code Generation:
    • The application generates G-code instructions from the imported SVG files using the ‘svg-to-gcode’ library.
    • Users can adjust settings such as feed rate and seek rate to customize the G-code generation process according to their requirements.
  3. G-code Download:
    • Upon generating G-code, users have the option to download the resulting file locally for further use with their plotters.
  4. Plotter Connection and Communication:
    • Users can establish a serial connection with their plotters through the application using the Web Serial API.
    • The application provides functionality for sending the generated G-code instructions to the plotter for execution.
    • Users can easily establish, maintain, and terminate serial connections with their plotters as needed, ensuring seamless communication.
  5. Plotter Control:
    • The interface includes jog buttons that allow users to control the movement of the plotter, facilitating precise positioning and alignment.

Workflow

Context Diagram (Copy) (1).png

Technologies Used

  • JavaScript: The frontend logic and interactivity of the application are implemented using JavaScript, providing dynamic functionality and user interface enhancements.
  • HTML/CSS: HTML and CSS are utilized for structuring the webpage and styling the user interface, ensuring a visually appealing and intuitive user experience.
  • Web Serial API: The Web Serial API is employed to establish serial communication with plotters directly from the web browser, enabling seamless data exchange between the application and the plotter devices.
  • SVG-to-G-code Conversion Library: The ‘svg-to-gcode’ library is integrated into the application to convert SVG files into G-code instructions, making them compatible with plotter and CNC machine control systems.

Dependencies

  • svg-to-gcode: A JavaScript library used for converting SVG files into G-code instructions, essential for generating plotter-compatible commands.
  • svgo: An SVG optimization library employed to optimize SVG files before conversion to G-code, enhancing performance and reducing file size.

Usage

  1. Importing SVG Files:
    • Drag and drop SVG files onto the designated area or use the file input element to select files for import.
  2. Generating G-code:
    • Click the “Generate G-code” button to initiate the conversion of imported SVG files into G-code instructions.
  3. Downloading G-code:
    • After G-code generation, users can download the resulting file by clicking the “Download G-code” button.
  4. Plotter Connection:
    • Connect to a plotter via a serial connection by selecting the appropriate serial port and clicking the “Connect” button.
  5. Sending G-code to Plotter:
    • Transmit the generated G-code instructions to the plotter by clicking the “Send G-code” button.
  6. Controlling Plotter Movement:
    • Use the jog buttons to control the movement of the plotter, enabling precise adjustments and positioning.
  7. Closing Plotter Connection:
    • Terminate the serial connection to the plotter by clicking the “Disconnect” button when communication is no longer required.

plotter-screenShot.png

plotter-screenshot.png

Note

  • Users should ensure that their web browsers support the Web Serial API for establishing serial connections with their plotters.
  • Compatibility with plotter hardware and adherence to G-code standards are essential considerations for accurate rendering of drawings and designs.