Skip to content

KochunD Interface

TThe Kochund is a Frontend Application, developed using the Next.js framework. The application facilitates seamless communication with connected CNC (Computer Numerical Control) machines through the WebSerial API. This interface aims to offer a user-friendly experience for monitoring and controlling CNC operations directly from a web browser.

Alt text

Key Features

  • Real-time Communication: Enables direct and efficient communication with CNC machines using the WebSerial API.
  • User-friendly Interface: Designed with a clean and intuitive interface to ensure ease of use for operators.
  • Cross-Platform Accessibility: Being a web application, it can be accessed from any device with a web browser, providing flexibility and convenience.
  • Next.js Framework: Utilizes the powerful features of Next.js, including server-side rendering and static site generation, to ensure optimal performance and SEO.

Technical Details

Framework

The frontend application is built using the Next.js framework. Next.js is a popular React framework that offers several benefits, including:

  • Server-Side Rendering (SSR): Improves performance by rendering pages on the server.
  • Static Site Generation (SSG): Allows pre-rendering of pages at build time, which enhances load times and SEO.
  • API Routes: Simplifies the creation of backend APIs within the same project.

WebSerial API

The WebSerial API is a modern browser API that provides direct access to serial ports. This is crucial for enabling real-time communication between the web application and CNC machines. Key capabilities include:

  • Port Access: Open and close connections to serial ports.
  • Data Transfer: Send and receive data to/from the CNC machine.
  • Event Handling: Handle serial port events to manage data streams and connection states.

Communication Workflow

  1. Port Connection: The user selects the appropriate serial port connected to the CNC machine.
  2. Data Exchange: The application sends commands to and receives responses from the CNC machine via the WebSerial API.
  3. Real-time Monitoring: The interface updates in real-time based on the data received from the CNC machine, allowing users to monitor operations seamlessly.

Installation and Setup

  1. Clone the Repository: bash git clone https://github.com/your-repo/machine-interface.git
  2. Install Dependencies: bash cd machine-interface npm install
  3. Run the Development Server: bash npm run dev
  4. Access the Application: Open your browser and navigate to http://localhost:3000.

Usage Instructions

  1. Launch the Application: Open the application in a web browser.
  2. Manipulate SVG: Manipulate the Svg figure to Execute using the import or editor options
  3. Connect to CNC Machine: Select the appropriate serial port from the list provided by the WebSerial API.
  4. Control Operations: Use the provided interface to send commands and monitor the CNC machine’s status.
  5. Disconnect: Properly close the connection to the serial port when finished.

You can find a detailed User Instruction Here

Security Considerations

  • Permissions: The WebSerial API requires user consent to access serial ports, ensuring secure and controlled access.

Conclusion

The Machine Interface Frontend Application provides a robust and user-friendly solution for interacting with CNC machines through a web browser. By leveraging Next.js and the WebSerial API, this application combines performance, accessibility, and real-time capabilities, making it an invaluable tool for CNC machine operators.