Optimize HTML Dashboard & WebSocket [Chennai-based freelancer is preferred as a visit to the customer's site may be necessary]
Budget / Salary₹1,500–12,500
TypeFreelance project
LocationRemote
Posted1 hour ago
[Chennai-based freelancer is preferred as a visit to the customer's site may be necessary]
My custom HTML dashboard is almost production-ready, but two areas still hold it back: WebSocket data transfer errors and overall front-end performance. The interface is built with vanilla HTML/CSS and JavaScript, streaming live data from a Cognex industrial machine vision camera over WebSocket. While the socket connects successfully, packets occasionally arrive corrupted or out of order, which breaks the real-time charts.
I need you to trace the exact cause of these data transfer errors, patch or rewrite the send/receive logic as needed, and add graceful handling for edge cases such as dropped frames or partial payloads. At the same time, I’d like the dashboard codebase tightened up for speed—bundling, minification, smarter asset loading, and any low-hanging DOM or rendering optimizations you spot.
Project Background:
This dashboard is for a manufacturing company who has purchased a Cognex Industrial Smart Camera which is used for visual inspection of metal components for defects and other assembly errors.
The dashboard is only used to display the following information after fetching from the camera:
1. Current inspection image
2. Current inspection results
Operating Procedure:
• Operator loads the metal part onto the table
• Operator triggers the camera
• The camera captures an image and processes it
• The camera gives the results over PROFINET to a connected Siemens PLC.
• The camera sends the captured image using FTP to a connected PC
• Our dashboard is running on this connected PC to display the images and the results from the camera.
Deliverables
• Stable WebSocket module with reliable, ordered data flow
• Clear comments/tests showing the fix in action
• Performance report plus implemented optimizations (build script or documented steps)
• Final, cleaned project folder ready to deploy
A short walkthrough video or concise README that explains what you changed will help me merge your work smoothly.
My custom HTML dashboard is almost production-ready, but two areas still hold it back: WebSocket data transfer errors and overall front-end performance. The interface is built with vanilla HTML/CSS and JavaScript, streaming live data from a Cognex industrial machine vision camera over WebSocket. While the socket connects successfully, packets occasionally arrive corrupted or out of order, which breaks the real-time charts.
I need you to trace the exact cause of these data transfer errors, patch or rewrite the send/receive logic as needed, and add graceful handling for edge cases such as dropped frames or partial payloads. At the same time, I’d like the dashboard codebase tightened up for speed—bundling, minification, smarter asset loading, and any low-hanging DOM or rendering optimizations you spot.
Project Background:
This dashboard is for a manufacturing company who has purchased a Cognex Industrial Smart Camera which is used for visual inspection of metal components for defects and other assembly errors.
The dashboard is only used to display the following information after fetching from the camera:
1. Current inspection image
2. Current inspection results
Operating Procedure:
• Operator loads the metal part onto the table
• Operator triggers the camera
• The camera captures an image and processes it
• The camera gives the results over PROFINET to a connected Siemens PLC.
• The camera sends the captured image using FTP to a connected PC
• Our dashboard is running on this connected PC to display the images and the results from the camera.
Deliverables
• Stable WebSocket module with reliable, ordered data flow
• Clear comments/tests showing the fix in action
• Performance report plus implemented optimizations (build script or documented steps)
• Final, cleaned project folder ready to deploy
A short walkthrough video or concise README that explains what you changed will help me merge your work smoothly.
Apply on Freelancer →
Project sourced from Freelancer.com. Applications happen directly on the original platform — we never collect your data.