/* global React, I, Field, Btn, Pill, useState, useEffect, HeartIcon */ // ============ DEVICE SETUP (WiFi credentials) ============ function DeviceSetupScreen({ go }) { const [showPass, setShowPass] = useState(false); return (
go("pairing", "back")}> Back
Step 1 of 3
Configure device
Set up the WiFi network so it can sync to ArogyaSync cloud.
{/* status cards */}
{[ { i: , l: "Bonded", c: "var(--accent)" }, { i: , l: "Awaiting", c: "var(--warn)" }, { i: , l: "Setup WiFi", c: "var(--info)" }, ].map((s, i) => (
{s.i}
{s.l}
))}
Device name
} label="" value="ICU Bed 4A Monitor" focus />
WiFi SSID
} label="" value="CityGen-Clinical-5G" />
WiFi password
} label="" value={showPass ? "Cl1n1cal#2026" : "•••••••••••"} suffix={ setShowPass(s => !s)}>} />
Credentials are encrypted in transit and never stored on the unit.
go("check-image")}>Connect to device →
); } // ============ CHECK IMAGE ============ function CheckImageScreen({ go }) { const [loaded, setLoaded] = useState(false); useEffect(() => { const t = setTimeout(() => setLoaded(true), 1400); return () => clearTimeout(t); }, []); return (
go("device-setup", "back")}> Back
Step 2 of 3
Check positioning
Frame the bedside monitor's display fully in view.
{!loaded ? (
RECEIVING IMAGE…
) : (
{/* mock ECG monitor */}
HR 72 BPMSpO₂ 98%NIBP 120/80
BEDSIDE MONITOR — LIVE
)}
✓ Display centered • ✓ All vitals visible • ✓ Adequate lighting
setLoaded(false) || setTimeout(() => setLoaded(true), 1200)}> Retake loaded && go("roi")}>Continue →
go("device-vitals", "fwd")}>Skip ROI setup
); } // ============ ROI ============ function RoiScreen({ go, step = 0, setStep }) { const vitals = [ { name: "Heart Rate", color: "var(--danger)", icon: }, { name: "SpO₂", color: "var(--info)", icon: }, { name: "Respiration", color: "#5a3da3", icon: }, { name: "Temperature", color: "var(--warn)", icon: }, { name: "Blood Pressure", color: "#0a6f4d", icon: }, ]; const v = vitals[step]; const [zoom, setZoom] = useState(1); const [mode, setMode] = useState("move"); return (
step > 0 ? setStep(step - 1) : go("check-image", "back")}> Back
{v.name.toUpperCase()}
Step {step + 1} of 5
Draw region of interest
Drag corners to fit the {v.name.toLowerCase()} reading
{vitals.map((_, i) => ( ))}
{/* mock monitor inside ROI canvas */}
HRSpO₂NIBPRRTEMP
HR 72
SpO₂ 98
NIBP 120/80
RR 18
TEMP 36.8°C
{/* ROI rect - varies position based on step */}
148 × 44 px
{/* tools */}
setZoom(z => Math.min(2, z + 0.2))}>+
{zoom.toFixed(1)}×
setZoom(z => Math.max(1, z - 0.2))}>−
setMode("move")}>↕ Move
setMode("resize")}>⤡ Resize
go("roi-confirm")}>Confirm region →
); } // ============ ROI CONFIRMATION ============ function RoiConfirmScreen({ go, step = 0, setStep }) { const vitals = [ { name: "Heart Rate", color: "var(--danger)", icon: }, { name: "SpO₂", color: "var(--info)", icon: }, { name: "Respiration", color: "#5a3da3", icon: }, { name: "Temperature", color: "var(--warn)", icon: }, { name: "Blood Pressure", color: "#0a6f4d", icon: }, ]; const v = vitals[step]; const last = step === vitals.length - 1; return (
go("roi", "back")}> Back
STEP {step + 1} / 5 Saved
{vitals.map((_, i) => ( ))}
{v.icon}
Region captured
{v.name}
TOP 100
LEFT 50
148×44
go("roi", "back")}>Redraw { if (last) { go("patient-reg", "fwd"); setStep(0); } else { setStep(step + 1); go("roi", "fwd"); } }}> {last ? "Complete setup →" : "Confirm & Next →"}
); } Object.assign(window, { DeviceSetupScreen, CheckImageScreen, RoiScreen, RoiConfirmScreen });