Gui functional / basic Flow

[crisconru]

In this issue I am trying to explain the flow that the gui app is going to be.

NOTE: All images are low fidelity wireframes. So do not comment about the style or beauty of the screens please.

UI layout for all screens

To improve the UI/UX, all screens (except LOADING SCREEN) have a simple layout:

1. A row of tabs at the bottom (easy and fast shortcut and notification).
2. Screen content filling the most of the display.

Load App -> LOADING SCREEN

When the gui app is started it shows the LOADING SCREEN to the user. This is because the user has a direct feedback of "something is working". In this step, the app needs to load its configuration:

• Gui configuration (styles, imgs, strings, etc).
• Ventilator configuration (modes and params supported by the ventilator).

The UI is quiet simple: an image and a message of loading.

When all the configuration is loaded, then it goes to the next step, MODES SCREEN.

Select Mode -> MODES SCREEN

It is a table with buttons to select one mode. There are only 6 modes now. If one of them is not suported, its button is not going to be showed in the table.

In this screen is mandatory that the user select one mode to change to the next screen. It is not possible to change to another without select a mode.

When the mode button is clicked, the next step is PARAMS SCREEN.

Set values of fixed params -> PARAMS SCREEN

It only shows all the params supported related to selected mode. All params are displayed in a matrix. Each params share the same UI. We can say all params are in displayed in a "UI component". This element has:

• Top row
  • Param acronym / abbreviation
  • Value
  • Units
• Bottom row
  • Slider / progress bar componet

Each param has a default value. With the slider the user change the value to a custom value.

When the user want, she or he could move forward to next step ALARMS SCREEN, by clicking the Alarms tab (bottom-center) or Next / Alarms button at the bottom-right. Or move backward by clicking Modes tab (bottom-center) or Back / Modes button (bottom-left).

Set alarms related to dynamic params -> ALARMS SCREEN

It is quiet similar to the screen before. Now you set an interval for each param (minimum and maximum values) with two slider and it has two default values.

When all is ok, you click Next button and now is displayed the Monitoring Screen.
If you want to move backward you could click Back button or the tabs.

Main screen to monitor the pacient -> MONITORING SCREEN

This screen is not yet defined in as much detail as the others. It has the three dynamics plots in this order from top to bottom:

1. Preassure
2. Flux
3. Volume.

At the sides of each plots there are the params with its values related to its plot.
If one alarm is triggered, the alarm param background turn into an intermittent red.

[JJ]

This should probably be a milestone, with different issues for every screen. Or at least, different issues that link this one (milestones are not too flexible)

[crisconru]

Yes, absolutely @JJ but Github is not the tool for that.
In Github Milestones I can only write text like a paragraph. So I put this in a issue because is the only "bad" implementation.

To make this more organize and agile we should migrate to another tool like Taiga. While this cause more workflow and I prefer to deal with what we have right now (If it grows in the future, we complement Github with Taiga maybe).

[JJ]

Using an issue for a milestone is OK, but then you'll need to create smaller issues, that refer to this one.