Factory Traceability Visualization

A browser-based view of a production line. It combines a 3D model of the line, showing machine states, operators, and moving products, with production data covering anything from a single shift to a full month.

The live demo is sign-in protected and access is provided by email, so get in touch through the contact page to request it. The source code is private, and the GitHub repository is a showcase for the project.

3D production line

A Unity WebGL scene runs inside the web app. It shows whether each machine is running, stopped, in fault, or offline, places an operator at every staffed station, and outlines the machines you select. The controls work with a mouse, or with touch on phones and tablets.

Live and historical views

Follow the line live or return to any point in its history. A full day can be played back at up to 600x speed, with alarms marked on the timeline.

Product traceability

Search by product code to see the product’s route through the line: the stations it has passed, its current location, the stations ahead, and any revision along the way.

Production figures

Output, reject rate, revisions, stop time per machine, stop count, and faults for a shift, day, week, month, or any calendar period. Charts can be expanded to full screen.

Detailed breakdowns

Selecting an output column lists the products completed during that hour along with their product types. Selecting a revision column shows the relevant machines and products. Selecting a machine shows its figures and status timeline.

Line status explanations

When the entire line is idle, the app says why: no shift is planned, the first shift has not started, the day’s shifts have ended, or the line is briefly waiting during a shift.

Layout editor

Machines are placed, moved, and rotated on the line’s grid. Layouts are versioned and their history is kept.

Roles and auditing

Role-based access, user management, and an audit log are included.

How it is built

The web app uses React and TypeScript with Vite. The charts are hand-drawn SVG and adapt from phone screens to wide desktop displays. The 3D view is Unity 6 with URP, compiled to WebGL, and it talks to the page through a typed and validated message bridge. The back end is Cloudflare Workers with Hono, D1, and private R2 storage, with session authentication, a strict Content Security Policy, and rate limiting. Zod schemas are shared by the API and the web app and covered by tests.

Data

The project uses a minute-by-minute production line simulation based on statistics from a real line, including shift patterns, cycle times, stop and fault rates, and product mix, without using any of the line’s records. Each simulated product has a traceable code, and the figures reconcile: every chart column can be opened to show the products and machines behind it.