EMS HMI 🖥️📱

Energy management system interface for mobile and web

Deployment

rectangle ems_hmi {

  collections hmi_components 

  collections analyst_components 

  rectangle mqtt_provider
  collections analyst_hooks
  rectangle generated_types
}

queue mqtt_broker
rectangle ems_device_api
rectangle ems_analyst_api


ems_device_api -r- generated_types: AsyncAPI spec
generated_types -r- mqtt_provider: topic constants\n + message types
mqtt_provider -- mqtt_broker: WebSocket
hmi_components -- mqtt_provider
analyst_components -- analyst_hooks

analyst_hooks -- ems_analyst_api: REST

Real-time device data

participant ems_device_api
queue mqtt_broker

box "hmi" #white
  participant generated_types
  participant mqtt_provider
  participant hmi_component
end box

ems_device_api -> generated_types: POST /topology → AsyncAPI spec
generated_types -> mqtt_provider: import topics + message types

mqtt_broker -> mqtt_provider: publish measurement
mqtt_provider -> hmi_component: useSubscription<T>(topic)\n→ { value, timestamp, status }
hmi_component -> hmi_component: render

Analyst queries

participant ems_analyst_api
box "hmi" #white
  participant hmi_component
  participant analyst_hooks
end box


hmi_component -> analyst_hooks: useHistorical(params)
analyst_hooks -> ems_analyst_api: GET /historical
ems_analyst_api --> analyst_hooks: timeseries data
analyst_hooks --> hmi_component: { data, loading, error }

hmi_component -> analyst_hooks: usePredictions(params)
analyst_hooks -> ems_analyst_api: GET /predictions
ems_analyst_api --> analyst_hooks: forecast data
analyst_hooks --> hmi_component: { data, loading, error }

hmi_component -> analyst_hooks: useChat(sessionId)
analyst_hooks -> ems_analyst_api: POST /chat
ems_analyst_api --> analyst_hooks: AI response
analyst_hooks --> hmi_component: { messages, send, loading }