Hot Tub Control Web Interface

• Should be responsive. Should look good on large, medium and phone-sized screens
• should respond to events from the backend using something like SSE or websockets
• Should have 2 main nav items:
  • Main Control:
    • Should include a simple, fun graphic, prominently featured in the center of a horse-trough shaped hot tub. In the water of the hot tub, the current temperature in fahrenheit should be dispayed
    • two simple pump / fan graphics should be shown below the tub, one for heat and one for the filter. When one of the pumps is running, a green light should be displayed below it, and the fan / pump should show an animation. If a fan is used, the blades could rotate, for instance
    • a number showing the target temp in fahrenheit
    • Plus and minus buttons to increment / decrement the target temp
    • a dropdown menu allowing the user to set the mode
  • Diagnostic:
    • A big button labeled "Backflush".
      • When pressed
        • it should initiate a backflush
        • it the backflush button should be disabled
        • a cute graphic should indicate that a backflush is in progress
      • when idle or backflush is finished, the button should re-enable
    • A big button labeled "Sensor Setup"
      • when clicked, user navigates to sensor_setup_1:
        • User is prompted to connect disconnect all sensors, if they aren't disconnected arleady. Continue button navigates to sensor_setup_2
        • User is prompted to plug in one set of sensors. Disabled "Continue" button becomes enabled when temperature readings start coming in from either hot input or water temp sensors. Perhaps a yellow or red light that turns green. Upon clicking "Continue", user navigates to sensor_setup_3
        • User is prompted to plug in the other set of sensors. Disabled "Finish" button becomes enabled when temperature readings start coming in from all temp sensors. Perhaps a yellow or red light that turns green. Upon clicking "Finish", user navigates to main Diagnostic screen