 |
Frontend
0.4.1
|
|
Frontend
0.4.1
|
The entire app is divided into 5 screens, created in a responsive layout. Depending on the screen width, all screens can be accessed either via a NavigationBar or -rail. The screen width at which switching between the two widgets takes place is set in the variable smallScreenWidth, which in turn is set by the environment variable OPENREMISE_FRONTEND_SMALL_SCREEN_WIDTH during build.
The info screen is displayed first by default. It shows the system status (e.g. IP address, voltage, available memory, ...), which is updated regularly through a GET request to the /sys/ endpoint.
The decoders screen displays a list of all available decoders in the system. They are organized into the categories locomotives and turnouts. The corresponding data is retrieved via GET requests: locomotives from /dcc/locos/, and turnouts from /dcc/turnouts.
The individual decoders are displayed as tiles within the list. Clicking on a decoder opens the corresponding control element (e.g. a Throttle for locomotives). Depending on the current screen width, this control either takes up the entire screen or is displayed as a draggable window as an overlay.
Buttons in the upper right corner of the app bar allow you to add, edit and delete decoders.
The program screen allows programming of CVs in service- and PoM (Programming on Main) mode. A stepper widget guides users through the process. Before a CV can be entered for reading or writing, the programming mode and decoder type must be selected.
The update screen is used to perform updates or uploads (e.g. firmware, sound, ...) for various devices from different manufacturers. A stepper widget guides users through the process. Some update files can be selected from different sources, for example from a local file or directly from the internet.
The update processes themselves run in modal dialogs. The data exchange then usually takes place via WebSockets to the respective endpoint (e.g. /ota/).
In the settings screen, the settings of the /settings/ endpoint can be read and changed. For the sake of clarity, the settings are arranged in categories that can be expanded or collapsed at the touch of a button. For this purpose, a custom expansion tile class called PersistentExpansionTile is used.
Buttons in the upper right corner of the app bar allow you to expand/collapse all or restore the defaults.
Frontend 0.4.1