04 - UI/UX Flow
User interaction flow, wireframes, and interface design
Page Layout
┌─────────────────────────────────────────────────────────────────────────────────┐
│ NAVBAR │
├─────────────────────────────── ──────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────┐ ┌─────────────────────────────┐ │
│ │ │ │ │ │
│ │ │ │ COMPONENT INFO PANEL │ │
│ │ │ │ │ │
│ │ │ │ [Component Name] │ │
│ │ 3D VIEWPORT │ │ [Description] │ │
│ │ │ │ │ │
│ │ (Water Treatment Plant) │ │ Key Parameters: │ │
│ │ │ │ - BOD: xxx mg/L │ │
│ │ │ │ - COD: xxx mg/L │ │
│ │ │ │ - TSS: xxx mg/L │ │
│ │ │ │ - pH: x.x │ │
│ │ │ │ │ │
│ │ │ │ [FETCH PARAMETERS] │ │
│ │ │ │ │ │
│ └──────────────────────────────────────────┘ └─────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ MODEL SELECTION TABS │ │
│ │ │ │
│ │ [ Prediction Model ] [ Treatment Model ] [ Twin Engine ] │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────┐ ┌─────────────────────────────┐ │
│ │ │ │ │ │
│ │ INPUT PARAMETERS FORM │ │ RESULTS PANEL │ │
│ │ │ │ │ │
│ │ pH: [_______] TSS: [_______] │ │ Prediction: [Class] │ │
│ │ BOD: [_______] COD: [_______] │ │ Confidence: [xx%] │ │
│ │ ... │ │ │ │
│ │ │ │ Treatment Stage: [...] │ │
│ │ [RUN MODEL] [RESET] │ │ Steps: [...] │ │
│ │ │ │ │ │
│ └──────────────────────────────────────────┘ └─────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────────── ───────────┘
User Flow
Flow 1: Basic Component Selection & Prediction
┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ Load │ │ Explore │ │ Select │ │ View │
│ Page │────▶│ 3D Model │────▶│ Component │────▶│ Info │
└─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘
│
▼
┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ View │ │ Run │ │ Select │ │ Fetch │
│ Results │◀────│ Model │◀────│ Model │◀────│ Parameters │
└─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘
Flow 2: Compare Multiple Components
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ Select │ │ Fetch & │ │ Compare │
│ Inlet │────▶│ Run Model │────▶│ Results │
└─────────────┘ └─────────────┘ └─────────────┘
│ │
│ ┌─────────────┐ │
└───────────▶│ Select │◀───────────┘
│ Outlet │
└─────────────┘
Wireframes
State 1: Initial Load (No Selection)
┌─────────────────────────────────────────────────────────────────────────────┐
│ CAD Integration - Water Treatment Plant │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────┐ ┌───────────────────────────┐ │
│ │ │ │ │ │
│ │ ╔═══╗ │ │ SELECT A COMPONENT │ │
│ │ ║ ● ║────────────────────────── │ │ │ │
│ │ ╚═══╝ ┌───┐ ┌─────┐ ┌───┐ │ │ Click on any component │ │
│ │ │ │ │ │ │ │ │ │ in the 3D model to │ │
│ │ └───┘ └─────┘ └───┘ │ │ view its parameters. │ │
│ │ │ │ │ │
│ │ [Rotate] [Zoom] [Pan] [Reset] │ │ Components: │ │
│ │ │ │ • Inlet │ │
│ └────────────────────────────────────────┘ │ • Screening │ │
│ │ • Grit Chamber │ │
│ ┌──────────────────── ────────────────────┐ │ • Primary Clarifier │ │
│ │ [ Prediction ] [ Treatment ] [ Twin ]│ │ • Aeration Tank │ │
│ └────────────────────────────────────────┘ │ • Secondary Clarifier │ │
│ │ • Filtration │ │
│ ┌────────────────────────────────────────┐ │ • Disinfection │ │
│ │ │ │ • Outlet │ │
│ │ No component selected. │ │ │ │
│ │ Select a component to fetch params. │ └───────────────────────────┘ │
│ │ │ │
│ └────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
State 2: Component Selected
┌─────────────────────────────────────────────────────────────────────────────┐
│ CAD Integration - Water Treatment Plant │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────┐ ┌───────────────────────────┐ │
│ │ │ │ ▣ AERATION TANK │ │
│ │ ╔═══╗ │ │ │ │
│ │ ║ ║────────────────────────── │ │ Biological treatment │ │
│ │ ╚═══╝ ┌───┐ ┌█████┐ ┌───┐ │ │ zone where aerobic │ │
│ │ │ │ │█████│ │ │ │ │ bacteria break down │ │
│ │ └───┘ └█████┘ └───┘ │ │ organic matter. │ │
│ │ ▲ │ │ │ │
│ │ SELECTED │ │ ┌─────────────────────┐ │ │
│ │ │ │ │ BOD │ 80 mg/L │ │ │
│ └────────────────────────────────────────┘ │ │ COD │ 180 mg/L │ │ │
│ │ │ TSS │ 150 mg/L │ │ │
│ ┌────────────────────────────────────────┐ │ │ pH │ 7.2 │ │ │
│ │ [ Prediction ] [▣Treatment ] [ Twin ]│ │ │ NH4-N │ 15 mg/L │ │ │
│ └────────────────────────────────────────┘ │ └─────────────────────┘ │ │
│ │ │ │
│ ┌────────────────────────────────────────┐ │ ┌─────────────────────┐ │ │
│ │ Treatment Model Input │ │ │ FETCH PARAMETERS │ │ │
│ │ │ │ └─────────────────────┘ │ │
│ │ pH: [_____] TSS: [_____] BOD:[____]│ │ │ │
│ │ COD:[_____] TDS: [_____] ... │ └───────────────────────────┘ │
│ │ │ │
│ │ [RUN TREATMENT MODEL] [RESET] │ │
│ └────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
State 3: Parameters Fetched
┌─────────────────────────────────────────────────────────────────────────────┐
│ CAD Integration - Water Treatment Plant │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────┐ ┌───────────────────────────┐ │
│ │ │ │ ▣ AERATION TANK │ │
│ │ ╔═══╗ │ │ │ │
│ │ ║ ║────────────────────────── │ │ ✓ Parameters fetched │ │
│ │ ╚═══╝ ┌───┐ ┌█████┐ ┌───┐ │ │ │ │
│ │ │ │ │█████│ │ │ │ │ Ready to run model. │ │
│ │ └───┘ └█████┘ └───┘ │ │ │ │
│ │ │ └───────────────────────────┘ │
│ └────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────┐ │
│ │ [ Prediction ] [▣Treatment ] [ Twin ]│ │
│ └────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ Treatment Model Input │ │
│ │ │ │
│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │
│ │ │ pH │ │ TSS │ │ Turbidity│ │ BOD │ │ COD │ │ │
│ │ │ [7.2 ] │ │ [150 ] │ │ [60 ] │ │ [80 ] │ │ [180 ] │ │ │
│ │ └──────────┘ └── ────────┘ └──────────┘ └──────────┘ └──────────┘ │ │
│ │ │ │
│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │
│ │ │ NH4-N │ │ Total N │ │ Phosphate│ │ Fecal Col│ │ Oil&Grs │ │ │
│ │ │ [15 ] │ │ [30 ] │ │ [6 ] │ │ [40000 ] │ │ [10 ] │ │ │
│ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │
│ │ │ │
│ │ ┌──────────┐ ┌──────────┐ ┌──────────────────────────────────────┐ │ │
│ │ │ TDS │ │ Hvy Mtls │ │ Flow Rate (optional) │ │ │
│ │ │ [700 ] │ │ [0.8 ] │ │ [1000 ] m³/d│ │ │
│ │ └──────────┘ └──────────┘ └──────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌─────────────────────────┐ ┌───────────┐ │ │
│ │ │ RUN TREATMENT MODEL │ │ RESET │ │ │
│ │ └─────────────────────────┘ └───────────┘ │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
State 4: Results Displayed
┌─────────────────────────────────────────────────────────────────────────────┐
│ CAD Integration - Water Treatment Plant │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────┐ ┌───────────────────────────┐ │
│ │ [3D VIEWPORT - smaller] │ │ TREATMENT RESULTS │ │
│ │ │ │ │ │
│ │ ╔═══╗ │ │ ┌─────────────────────┐ │ │
│ │ ║ ║────────────────────────── │ │ │ Recommended Stage │ │ │
│ │ ╚═══╝ ┌───┐ ┌█████┐ ┌───┐ │ │ │ SECONDARY │ │ │
│ │ │ │ │█████│ │ │ │ │ │ │ │ │
│ │ └───┘ └█████┘ └───┘ │ │ │ Severity: MODERATE │ │ │
│ │ │ │ │ Quality Score: 65 │ │ │
│ └────────────────────────────────────────┘ │ └─────────────────────┘ │ │
│ │ │ │
│ ┌────────────────────────────────────────┐ │ Treatment Steps: │ │
│ │ [▣Treatment ] Results ▼ │ │ 1. Screening │ │
│ └────────────────────────────────────────┘ │ 2. Primary Settling │ │
│ │ 3. Aeration │ │
│ ┌────────────────────────────────────────┐ │ 4. Secondary Settling │ │
│ │ Parameter Status │ │ │ │
│ │ │ │ Chemical Suggestions: │ │
│ │ pH ████████████░░ Good │ │ • Chlorine: 5 mg/L │ │
│ │ BOD ██████████████ Moderate │ │ • Alum: 20 mg/L │ │
│ │ COD ██████████████ Moderate │ │ │ │
│ │ TSS ████████████░░ Good │ │ Risk Level: MEDIUM │ │
│ │ NH4-N ██████████████ Moderate │ │ • Elevated BOD │ │
│ │ │ │ • Monitor nitrogen │ │
│ └────────────────────────────────────────┘ └───────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ [TRY ANOTHER COMPONENT] [EXPORT RESULTS] [RUN TWIN ENGINE] │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Model Selection Tabs
Tab 1: Prediction Model
┌─────────────────────────────────────────────────────────────────┐
│ PREDICTION MODEL (Reusability Classification) │
├─────────────────────────────────────────────────────────────────┤
│ │
│ This model predicts the reusability class of treated water: │
│ │
│ • Drinking Water • Industrial Use │
│ • Irrigation • Toilet Flushing │
│ • Aquaculture • Not Reusable │
│ │
│ Input: Wastewater parameters (influent/effluent values) │
│ Output: Reusability class with confidence score │
│ │
└─────────────────────────────────────────────────────────────────┘
Tab 2: Treatment Model
┌─────────────────────────────────────────────────────────────────┐
│ TREATMENT MODEL (Stage Recommendation) │
├─────────────────────────────────────────────────────────────────┤
│ │
│ This model recommends the treatment stage needed: │
│ │
│ • Primary Treatment • Tertiary Treatment │
│ • Secondary Treatment • Advanced Treatment │
│ │
│ Input: Water quality parameters (12 parameters) │
│ Output: Treatment stage, steps, chemical suggestions │
│ │
│ Optional: Select use case for adjusted recommendations │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Use Case: [ Select... ▼ ] │ │
│ │ • Irrigation │ │
│ │ • Domestic Use │ │
│ │ • Industrial Use │ │
│ │ • Drinking Water │ │
│ │ • Aquaculture │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Tab 3: Twin Engine
┌─────────────────────────────────────────────────────────────────┐
│ TWIN ENGINE (Combined Analysis) │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Runs BOTH models for comprehensive analysis: │
│ │
│ 1. Reusability Prediction │
│ → What can this water be used for? │
│ │
│ 2. Treatment Recommendation │
│ → What treatment is needed? │
│ │
│ Combined Output: │
│ • Reusability class & confidence │
│ • Treatment stage & steps │
│ • Chemical suggestions with costs │
│ • Risk assessment │
│ • CPCB compliance status │
│ │
│ ⚠️ Note: Adaptive Optimizer is available on the dedicated │
│ Twin Engine page for advanced optimization. │
│ │
└─────────────────────────────────────────────────────────────────┘
Interaction States
Component Hover
/* Hover effect on 3D component */
.component-hovered {
outline: 2px solid #00ff00;
cursor: pointer;
}
/* Tooltip appears */
.component-tooltip {
position: absolute;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 8px 12px;
border-radius: 4px;
font-size: 14px;
}
Component Selected
/* Selected component glow */
.component-selected {
box-shadow: 0 0 20px #00ff00;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
Loading State
┌─────────────────────────────────────────┐
│ │
│ ⟳ Running Treatment Model... │
│ │
│ Analyzing parameters... │
│ │
└─────────────────────────────────────────┘
Error State
┌─────────────────────────────────────────┐
│ ⚠️ Error │
│ │
│ Failed to run model. Please check: │
│ • All required parameters are filled │
│ • Values are within valid ranges │
│ • ML API server is running │
│ │
│ [TRY AGAIN] [RESET FORM] │
└─────────────────────────────────────────┘
Responsive Design
Desktop (greater than 1200px)
- Side-by-side layout: 3D viewport + info panel
- Full parameter form visible
- Results in expandable panel
Tablet (768px - 1200px)
- Stacked layout: 3D viewport on top
- Collapsible info panel
- Tabbed parameter sections
Mobile (less than 768px)
- Full-width 3D viewport (touch controls)
- Bottom sheet for component info
- Step-by-step parameter entry
- Swipeable results cards
Accessibility
- Keyboard Navigation: Tab through components, Enter to select
- Screen Reader: ARIA labels for all components
- Color Contrast: High contrast mode available
- Focus Indicators: Visible focus rings on all interactive elements
Next: 05-IMPLEMENTATION.md
Technical implementation guide →