From Conditional Hell to Drag-and-Drop: How We Rebuilt the Inspection UI

When developing software for vision inspection equipment in manufacturing, the most challenging requirements often come from the shop floor (customers). Even when the inspection data is the same, Plant A may want to display a large list of defective products on the right side of the screen, while Plant B may want to monitor inspection speed and a real-time CCTV feed at a glance through a dashboard.

In the past, whenever such requirements arose, we would add customer-specific conditional statements (If-Else) to the software and modify each screen individually. However, as the number of customers grew, the code became increasingly complex and difficult to manage, eventually exposing a structural limitation where a single bug could potentially affect systems at other plants.

To break this cycle, we embarked on a comprehensive transformation centered on “componentizing the UI and adopting a modular architecture” and “integrating and managing data using web technologies.”

Untangling the Code and Breaking the UI Down into Components

We thoroughly analyzed the fragmented screen requirements across customers and broke them down into independent “UI components” that could no longer be meaningfully divided.

• Real-time image viewer

• Inspection result history list

• Real-time statistics (inspection volume, defect rate, process speed)

• CCTV integration screen for shop-floor monitoring

We turned all the elements required on the shop floor into standardized blocks. We then built a custom layout system that allows these blocks to be freely arranged using nothing more than a mouse and drag-and-drop. Now, when a new customer comes with unique screen requirements, developers no longer need to spend long hours modifying the code. A completely new dashboard can be created in just a few minutes by placing and configuring existing component blocks according to the customer's needs. Even when a new component is required, the architecture keeps concerns separated so that existing code is not affected.

Simplifying Manual Hardware Control with a Single “Card”

The innovation of our platform does not stop at monitoring screens. Vision inspection systems on the shop floor require a “equipment control system” that directly controls the equipment and mediates between the factory's PLC (Programmable Logic Controller) signals and our software. When setting up or maintaining equipment, operators often need to manually control specific hardware functions.

Previously, there was no proper UI for these manual operations, creating significant challenges for shop-floor operators.

We abstracted manual hardware commands into a “Card” UI format that can be freely defined. Users can define the desired actions and parameters as cards, and the UI platform recognizes them and communicates flexibly with the equipment control layer. As a result, we were able to minimize the effort required to modify the overall customer-specific architecture while achieving a high degree of software reusability.

Introducing a Modern Web Stack to Connect Distributed Inspection Systems

Traditional vision inspection systems often operated independently, with each inspection PC maintaining its own database. This approach creates significant challenges when integrating inspection data across an entire factory or monitoring and managing systems remotely.

To overcome the limitations of traditional equipment software, our team introduced a modern web architecture into the equipment ecosystem.

Even when multiple vision inspection systems are distributed throughout a factory, the backend of our UI platform serves as a central hub, integrating and managing all data centrally. High-volume vision data from each piece of equipment, hardware control signals, and the UI processing layer are connected through WebSocket and Redis Stream. Even in demanding factory environments, the system maintains millisecond-level responsiveness and a stable, robust real-time bidirectional communication pipeline without a single data loss.

Redefining the Standard for Manufacturing Software

When people think of manufacturing or equipment software, many still associate it with outdated and closed technology stacks. Our team, however, combines modern web technologies such as Next.js, Nest.js, Redis, and WebSocket with high-performance equipment control to operate a large-scale, high-speed ecosystem for real-time, high-volume data.

Having moved beyond customer-specific spaghetti code and achieved a fully componentized architecture, our team is now preparing to expand the platform into a larger, smarter integrated factory monitoring platform.

*Related posts from Vision Platform Group:
Why AIVEX Chose Hybrid Computing
Are You Still Opening Folders on the Inspection PC to Check False Positives and False Negatives?
The Heart of Deep Learning Vision Inspection: Building a Platform Environment Where Vision Engineers Can Focus Solely on the Model