A web-based production planning and visualization dashboard designed to display machine schedules and manufacturing operations using an interactive Gantt chart interface.
This system provides a clear overview of production orders, machine assignments, and operation timelines, helping users understand how jobs are scheduled across machines in a factory environment.
The application fetches production plan data from a backend service (aas server) and visualizes it through a dynamic and responsive user interface built with React.
Modern manufacturing environments require clear visibility into machine utilization and job scheduling.
This project provides an intuitive interface to visualize production schedules using a timeline-based Gantt chart.
The system allows users to:
- View machine schedules
- Track operation execution over time
- Identify finished and upcoming operations
- Observe the current time within the production timeline
- Inspect operation details through interactive tooltips
The visualization demonstrates how scheduling systems used in industrial manufacturing dashboards operate.
- Machine-based scheduling visualization
- Timeline displayed in 5-minute intervals
- Operations rendered as colored bars
Integrated header displaying the current date and high-precision system time (HH:MM:SS).
- A "NOW" line shows the current time relative to the schedule
- Helps identify ongoing operations
Hovering over operations displays detailed information:
- Operation ID
- Start time
- End time
- Operation duration
- Machine Allocated
- Status
- IsFrozen
Operations belonging to the same job are assigned the same color to make them easy to identify across machines.
Each row represents a machine and displays all operations scheduled on that machine.
The timeline can be scrolled horizontally to inspect longer schedules.
The machine column remains visible while scrolling the timeline.
Completed operations appear visually faded to distinguish them from active or upcoming tasks.
The system automatically fetches and updates production data every 2 seconds via WebSockets/API to ensure the UI reflects the live factory state.
A toggleable feature that automatically scrolls the viewport to keep the "NOW" line centered as time progresses.
The system follows a simple client-server architecture.
Frontend (React)
│
│ REST / WebSocket
▼
Backend (FastAPI) (Production Plan Provider)
│
│ HTTP API
▼
BaSyx AAS Server (Data Provider)
Provides production plan data in JSON format.
Fetches the production plan and visualizes it using an interactive Gantt chart.
- React
- JavaScript (ES6)
- HTML
- CSS
- React Hooks (
useState,useEffect,useMemo) - Modular component architecture
- Dynamic UI rendering
- Responsive layout design
- Python
- FastAPI
- Web Sockets
- Docker
- Docker Compose
- Eclipse BaSyx AAS Server
This project is fully containerized using Docker.
The easiest way to run the entire system (Frontend, Backend) is via Docker Compose.
Ensure you have the following installed:
- Docker (v20 or higher) – https://www.docker.com/
- Docker Compose (included with Docker Desktop)
- Git – https://git-scm.com/
git clone https://github.com/your-username/SmartFactoryKL.git
cd SmartFactoryKLBefore running the application, configure the environment variables.
Edit the following files and adjust the values if necessary:
frontend/.env.docker
backend/.env.dockerThese files contain configuration such as:
-
Backend API URL
-
AAS Server connection
-
CORS settings
Make sure the URLs and ports match your environment.
Start all services using Docker Compose:
docker compose up --buildThis command will start the following services:
| Service | Description | Default URL |
|---|---|---|
| Frontend | React dashboard | http://localhost:5173 |
| Backend | FastAPI API service | http://localhost:8000 |
Once the containers are running, you can access the Services via the links above.
Ports can be changed in docker-compose.yml if needed.
To stop all containers:
docker compose downIf you make changes to the backend or frontend:
docker compose up --buildGUI-AAS
│
├── frontend
│ └── React application
│ └── .env.docker # configure it
│
├── backend
│ └── FastAPI service
│ └── .env.docker # configure it
│
├── docker-compose.ymlIf you prefer to run the services locally without Docker, refer to:
-
backend setup → backend/README.md
-
frontend setup → frontend/README.md
If port 8000 or 5173 is already in use, stop other services or change the port in docker-compose.yml.
Rebuild the containers:
docker compose up --buildEnsure the BaSyx AAS server is running and accessible.
Prateek Kumar Sharma
🎓 MSc Computer Science — RPTU Kaiserslautern-Landau
🔗 GitHub Profile: https://github.com/prateeksharma0112/
📍 Developed at
SmartFactory-KL, DFKI (German Research Center for Artificial Intelligence)
🎓 Coursework (Master's Project)
Development of a GUI for an AAS-Based Production Planning System
I would like to express my gratitude to the following organizations and individuals:
-
SmartFactory-KL / DFKI: For organizing the project framework and providing the academic and research context of industrial production systems.
-
Eclipse BaSyx: For the open-source Asset Administration Shell (AAS) framework used in this project.
-
RPTU Kaiserslautern-Landau: For academic guidance and support during the Master's program.
-
Supervisor: Ali Karnoub at SmartFactory-KL for technical guidance and support.
This project is developed for academic and research purposes as part of the SmartFactory-KL student research project.
Unless otherwise specified, the code in this repository is provided for educational use only and cannot be used for commercial purposes without explicit permission.
For reuse or contributions, please contact the author Prateeksharma0112@gmail.com.