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.
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¶
- Port Connection: The user selects the appropriate serial port connected to the CNC machine.
- Data Exchange: The application sends commands to and receives responses from the CNC machine via the WebSerial API.
- 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¶
- Clone the Repository:
bash git clone https://github.com/your-repo/machine-interface.git
- Install Dependencies:
bash cd machine-interface npm install
- Run the Development Server:
bash npm run dev
- Access the Application: Open your browser and navigate to
http://localhost:3000
.
Usage Instructions¶
- Launch the Application: Open the application in a web browser.
- Manipulate SVG: Manipulate the Svg figure to Execute using the import or editor options
- Connect to CNC Machine: Select the appropriate serial port from the list provided by the WebSerial API.
- Control Operations: Use the provided interface to send commands and monitor the CNC machine’s status.
- 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.