A web-based dashboard for real-time visualization of industrial machine status and their components.
In scope ofDICIM project we developed a lightweight Flask web application that gives engineers and technicians a clear, interactive view of industrial machine health. It combines:
- 3D model rendering of machines (using Three.js and STL files)
- Component-level status indicators (OK / Not OK) with severity grading
- Historical trend charts (line, bar, scatter) per component
- Machine wear bar showing overall wear percentage at a glance
- Interactive map showing the machine's geographic location
The tool supports multiple companies / machine fleets from a single deployment, with each company accessible via its own URL namespace.
Note on data: All data displayed in this application is fake/mock data generated for demonstration purposes. Real operational data from production machines is classified and has been intentionally excluded from this repository. See the Connecting Real Data section for how to plug in live data.
| Feature | Description |
|---|---|
| Multi-company support | Navigate between separate machine fleets (Gorenje, Lexmark, Profen, …) |
| 3D model viewer | Rotate and inspect a 3D STL model of the machine |
| Component status | Drill down into individual components with pass/fail grading |
| Historical charts | View per-cycle trends: work time, electricity consumption, etc. |
| Location map | See the machine's location on an interactive OpenStreetMap |
| Wear indicator | Color-coded machine wear bar (green → red) on the detail header |
| API endpoint | Machine data also exposed as JSON via REST API |
- Python 3.8+
- pip
-
Clone the repository
git clone <repository-url> cd dicim-api
-
Create and activate a virtual environment
Windows:
python -m venv venv venv\Scripts\activate
macOS / Linux:
python -m venv venv source venv/bin/activate -
Install dependencies
pip install -r requirements.txt
Double-click run.bat. It will activate the virtual environment, start Flask, and open your browser automatically after 5 seconds.
python app.pyThen open http://127.0.0.1:5000 in your browser.
The home page (/) shows buttons for each supported company.
Click a button to navigate to that company's machine fleet.
On the company page you will see a 3D viewer on the right and a sidebar on the left.
- Type a machine / component ID into the input field (e.g.
P001,M123, or an ID specific to your dataset). - Click "Get status".
The application will look up that ID and — if found — navigate to the detail page for that machine.
The detail page has several collapsible sections:
| Section | What it shows |
|---|---|
| Machine Details | Key metadata (ID, cycles, working hours, last event, wear %) with a color-coded wear bar |
| Location Map | OpenStreetMap pin at the machine's recorded location |
| Components | List of all components with their status (✅ OK / ❌ Not OK) |
| Component Details | Per-component metadata (type, cycle count, work time, …) |
| Component Image | Photo or diagram of the selected component (if available) |
| Charts | Trend plots for the selected component (line / bar / scatter) |
Click on any component in the list to load its details and charts.
Machine data is also available as JSON so it can be consumed by other systems.
GET /api/<company>/<comp_id>/
Example:
GET http://localhost:5000/api/gorenje/W001/
Response (simplified):
{
"main_data": {
"Id": "W001",
"Total number of cycles": 5,
"Total number of working hours": 100,
"machine_wear": 30
},
"location": {
"lat": 49.12,
"lng": 14.88
},
"Components": {
"Pump": {
"status": "OK",
"final_grade": 0,
"Full name": "Pump"
}
}
}Note: The
history(chart time-series) arrays are intentionally stripped from the API response to keep payload size small.
All data currently flows through mock_data.py. To connect a real backend, you only need to replace the data-fetching logic in one place: the get_mock_data() function.
app.py ──► mock_data.get_mock_data(company, comp_id) ──► returns dict
The returned dict must follow this structure:
{
"main_data": {
"Id": "...",
"machine_wear": 0-100, # percentage, used for the wear bar color
# any additional key-value pairs will be displayed in the Machine Details panel
},
"location": {
"lat": 00.000,
"lng": 00.000
},
"Components": {
"<component_key>": {
"status": "OK" | "notOK",
"final_grade": 0-5, # 0 = best, 5 = worst
"Full name": "...",
# any extra fields shown in Component Details panel
"history": {
"<chart_title>": {
"type": "line" | "bar" | "scatter",
"data": [
{"cycle": 1, "value": 5},
{"cycle": 2, "value": 7},
# ...
]
}
}
}
}
}Option 1 — Replace the function body (simplest):
Open mock_data.py and replace the function body of get_mock_data() with a call to your real backend:
import requests
def get_mock_data(company: str, comp_id: str) -> dict:
# Replace this URL with your real API endpoint
response = requests.get(f"https://your-backend.example.com/api/{company}/{comp_id}/")
response.raise_for_status()
return response.json() # must match the structure aboveOption 2 — Environment variable toggle:
Add a flag so you can switch between mock and real data without changing the code:
import os
def get_mock_data(company: str, comp_id: str) -> dict:
if os.getenv("USE_REAL_DATA", "false").lower() == "true":
import requests
response = requests.get(f"{os.getenv('BACKEND_URL')}/{company}/{comp_id}/")
response.raise_for_status()
return response.json()
else:
# existing mock logic …
return _get_mock_fallback(company, comp_id)Then set environment variables before starting:
USE_REAL_DATA=true
BACKEND_URL=https://your-backend.example.com/api
python app.pyOption 3 — Per-company JSON files (no backend needed):
The lexmark company already uses this approach. JSON files are loaded from static/data/lexmark/<comp_id>.json. You can replicate this pattern for other companies to drive the app from static files without any backend service.
dicim-api/
├── app.py # Flask routes and application entry point
├── company_config.py # Single source of truth for company configurations
├── mock_data.py # Data layer — replace here to connect real data
├── requirements.txt # Python dependencies
├── run.bat # Windows one-click launcher
├── templates/
│ ├── base.html # Shared layout (navbar, scripts)
│ ├── home.html # Company selector landing page
│ ├── index.html # Company page (3D viewer + ID search)
│ └── detail_page.html # Machine / component detail view
├── static/
│ ├── script.js # Frontend logic (3D viewer, charts, component list)
│ ├── style.css # Application styles
│ ├── stl/ # 3D STL model files per company/machine
│ ├── data/
│ │ └── lexmark/ # JSON data files for Lexmark machines
│ └── images/ # Component images (optional)
└── examples_of_json.json # Example raw data format reference
- Open
company_config.pyand add your company details to theCOMPANIESdictionary.
This requires configuring the company name, camera position, and mapping your STL/Image paths to component names. - (Optional) Add your STL models under
static/stl/yourcompany/and component images understatic/images/yourcompany/. - Give your company a data source in
mock_data.py(either returning a mock object, or fetching from your backend API).
That's it! The home screen buttons, 3D viewer routing, and API endpoints will all update automatically.
MIT License