Skip to content

Commit

Permalink
updateagain
Browse files Browse the repository at this point in the history
  • Loading branch information
@AKMaily
AKMaily committed May 24, 2024
1 parent fb585e7 commit 52c492a
Showing 1 changed file with 77 additions and 156 deletions.
233 changes: 77 additions & 156 deletions OmniView.tex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,221 +115,142 @@ \section{Memory Management Ideology}
\input{furtherDevl.tex}
\section{User Interface}

The following chapters describe the User Interface of the OmnAIView application. It provides a detailed description of the different components and their functionality. The design of individual components is also introduced here; however, the detailed description of the design principles can be found in Chapter \ref{cap:Designprinciples}. All components should be designed according to those principles. If there are any open questions after reading the description, they can be added as an issue for the FAQ.
The following chapters describe the user interface of the omnAIView application, providing a detailed overview of its various components and their functionality. The design of these components is also introduced here, while a more thorough explanation of the design principles can be found in Chapter \ref{cap:Designprinciples}. All components should adhere to these principles. If there are any questions after reading the description, they can be added as issues for the FAQ.

The user interface is currently implemented in C++; however, there are plans to transition it to JavaScript in a subsequent phase. This interface serves as a central hub for configuring connected devices, conducting measurements, saving data in various formats, and displaying and analyzing the acquired data. Additionally, users can access an integrated Help Menu that directs them to a website providing comprehensive information about OmnAIView and OmnAIScope.
The user interface is currently implemented in C++, with plans to transition to JavaScript in a subsequent phase. This interface serves as a central hub for configuring connected devices, conducting measurements, saving data in various formats, displaying and analyzing the acquired data. Additionally, users can access an integrated Help Menu that directs them to a website providing comprehensive information about omnAIView and omnAIScope.

The application is divided into four regions that form the basic interface: the Toolbar, the SideBar Menu, the Plot Region, and the Devices Menu.
The application is divided into four main regions: the Toolbar, the Sidebar Menu, the Plot Region, and the Devices Menu.

\subsection{Basic Interface}

The basic interface includes:
\begin{itemize}
\item A bar at the top where the company name, a save button, and start and stop measurement buttons are integrated.
\item An adjustable window where the data is displayed.
\item A side menu for:
\begin{itemize}
\item Searching devices
\item Loading old data
\item Diagnostics
\item Settings
\item Help
\end{itemize}
\item A bottom window that can be minimized, displaying connected devices and loaded data files.
\item Several popup windows that appear when using, for example, an analysis.
\item A top bar featuring the company name, a save button, and start/stop measurement buttons.
\item An adjustable window where data is displayed.
\item A sidebar for:
\begin{itemize}
\item Searching devices
\item Loading old data
\item Diagnostics
\item Settings
\item Help
\end{itemize}
\item A bottom window, which can be minimized, displaying connected devices and loaded data files.
\item Several popup windows for functions such as analysis.
\end{itemize}

The size of the GUI should adapt to the size of the respective used screen. The design can be found in Figure \ref{fig:GUI}.
The size of the GUI should adapt to the screen size being used. The design is illustrated in Figure \ref{fig:GUI}.

\begin{figure}[!h]
\includegraphics[width=.9\textwidth]{./assets/pictures/DatawindowVersion1.0.png}
\caption[]{A visual representation of the GUI interface when all menus are selected}
\caption[]{A visual representation of the GUI interface with all menus selected}
\label{fig:GUI}
\end{figure}

The language displayed in the pictures is German.

The popup windows will include:

Popup windows include:
\begin{itemize}
\item A window to load old data from the filesystem into the application.
\item A window to save the measured data.
\item A window to generate training data from loaded or measured data.
\item A window to analyze loaded or measured data.
\item A settings window.
\end{itemize}
This list is not exhaustive. All popup windows should follow the same structure and design principles, which can be found in Chapter \ref{cap:Designprinciples}. An example of a popup window is shown in Chapter \ref{cap:Designprinciples_Popupwindows}.

This list is not yet complete. These popup windows should all follow the same structure and design principles found in \ref{cap:Designprinciples}.
An example of a popup window is shown in Chapter \ref{cap:Designprinciples_Popupwindows}.

The following provides an initial structural description of the four main regions. Within the chapters,
there is also a detailed description of the various components and their functionality. Subsequently,
the individual popup windows are described in terms of their functionality and structure. Following that, a precise description of the design is provided.
\section{Toolbar}


\subsection{Region: Toolbar}

The toolbar is displayed at the top of the program. A picture is shown in Figure \ref{fig:toolbar}.
The toolbar, displayed at the top of the program, contains the company logo on the left side, a save button and a reset button on the right side, and start/stop measurement buttons in the middle. The specific placement of the start and stop buttons is still under consideration. A visual representation of the toolbar is shown in Figure \ref{fig:toolbar}.

\begin{figure}
\includegraphics[width=.9\textwidth]{assets/pictures/Toolbar states.png}
\caption[]{A visual representation of the Toolbar with different buttons}
\label{fig:toolbar}
\includegraphics[width=.9\textwidth]{assets/pictures/Toolbar states.png}
\caption[]{A visual representation of the toolbar with different buttons}
\label{fig:toolbar}
\end{figure}

The toolbar contains the company logo on the left side, which should only be visible when the side menu is closed. On the right side, the toolbar contains a save button and a load/reset button. In the middle of the toolbar is a field for starting and stopping measurements, which has different states depending on the current state of the measurement. It is not decided yet if the start and stop buttons will stay in this position or be placed in the plot region.

The functionality of the different buttons is described below.

\subsection{Region: Save Data}

This section delineates the procedure for transferring the data from a waveform stack or an individual waveform,
acquired through OmnAIScope, to a storage system via the user interface. The storage options include the computer's file system, a Database Management System (DBMS), or a Cloud platform.

\textbf{User Story:}
\subsection{Save Button}
The save button, designed as an icon button according to the principles in Chapter \ref{cap:Designprinciples_IconButtons}, writes the measurement (a waveform stack) to storage. The storage options include the computer's file system, a Database Management System (DBMS), or a Cloud platform.

\subsubsection{User Story for the Save Button}
\begin{itemize}
\item \textbf{Visibility of Save Button:} Prior to initiating the measurement, the save button should be prominently visible.
\item \textbf{Greyed-out State During Measurement:} While the measurement is in progress, the save button should appear in a greyed-out state.
\item \textbf{Post-Measurement Access:} Upon completion of the measurement, users should easily locate and access the now visible save button.
\item \textbf{Prompt Appearance of Save Window:} When the user clicks the save button, a window should promptly appear. This window should be designed according to the design principles in Chapter \ref{cap:Designprinciples_Popupwindows}. A picture of the saving window is shown in \ref{fig:SavingWindow}.
\item \textbf{Visibility Before Measurement:} The save button should be prominently visible.
\item \textbf{Greyed-out During Measurement:} While the measurement is in progress, the save button should appear greyed out.
\item \textbf{Post-Measurement Access:} Upon completion of the measurement, the save button should be accessible.
\item \textbf{Prompt Save Window:} Clicking the save button should open a window designed according to the principles in Chapter \ref{cap:Designprinciples_Popupwindows}. A visual representation of the save window is shown in Figure \ref{fig:SavingWindow}.
\end{itemize}

\textbf{Window Components:}

The window is separated into four sections (saving path, select devices, additional options, saving or cancel):

\textbf{First Section: Saving Path}

In the first section, there is an input field labeled "saving path" (\textit{Speicherpfad}) on the left side accompanied by a "Browse" (\textit{Durchsuchen}) button. Above the input field, there should be the text "choose your saving path" (\textit{Wähle deinen Speicherpfad}). The buttons should be designed according to the design principles in Chapter \ref{cap:Designprinciples_PopupWindowButtons}.

The user has three options to select a path:
\subsubsection{Save Window}
The save window is divided into four sections:
\begin{itemize}
\item They can choose the default path: Desktop/OmnAIview/saves/
\item They can type the path in manually.
\item They can select the path from the file browser by clicking on the "Browse" button.
\item \textbf{Saving Path:} Users can choose a default path, manually enter a path, or select a path using a file browser.
\item \textbf{Device Selection:} Users can select devices to save via a drop-down menu.
\item \textbf{Additional Information:} Users can input vehicle information (VIN, measurement name, mileage) and select a vehicle type.
\item \textbf{Save or Cancel:} Users can either save the settings or cancel the menu.
\end{itemize}

Visible Default Path:

The default path is displayed in the "Speicherpfad" field, appearing greyed out. If another path is chosen, this path should be displayed in the "Speicherpfad" field.

\textbf{Second Section: Device Selection}

The second section is the "Device selection" section.

In this section, there is a drop-down menu named "devices" (\textit{Geräte}). Above the drop-down menu is a text saying "choose the devices that should be saved" (\textit{wähle die zu speichernden Geräte aus}). In the drop-down menu, the user finds the connected devices with their correct device name. Also, files that have been loaded into the devices list are shown. The number of connected devices is undetermined before the start of the software, so there can be multiple devices or just one. The user can choose the devices for saving through the drop-down menu. The menu should be designed according to the design principles in \ref{cap:Designprinciples_dropDownMenusWithCheckmark}. Only the connected devices are shown with their correct device name.

Checkbox Selection:

When the checkboxes next to the devices are selected, the chosen devices are saved in the same file within the selected directory.

\textbf{Third Section: Additional Information}

In the third section, the user can input additional information.

Vehicle Information Input:
\subsection{Reset Button}
The reset button resets all measurements and reloads all connected devices. When pressed, a rotating symbol should appear until the app reconnects the devices and resets the data.

First, three input fields are available: VIN, measurement name, and mileage. The user can write the information into the fields, and it is saved at the top of the .csv file. The VIN can only have capital letters.
\subsection{Start/Stop Button States}
The specific placement of the start and stop buttons, whether in the toolbar or plot region, is still under consideration.

Dropdown Menu for Vehicle Type:
\section{Plot Region}

Below these fields, the user can choose the vehicle type via a dropdown menu loaded from a file. The user can only select one vehicle type.

Adding Custom Vehicle Type:

An option allows users to input a new vehicle type at the end of the dropdown menu, subsequently adding it to the file by clicking a plus button. This name is also saved at the top of the .csv file.

Adding Another Path:

In cases where multiple devices are connected, users can click a plus button with the description "Speicherpfad hinzufügen" (Add another path), triggering the appearance of another window with identical settings. Here, the user also has a "Durchsuchen" button to choose the path where the data is stored and a dropdown menu to choose which devices to store in the selected path. The user can also change the name of the measurement. It should look like an exact copy of the normal save window.

\textbf{Fourth Section: Save or Cancel}

Final Save Action:

In the fourth section, the user can choose to either save the settings or cancel the menu.

Users can initiate the save process by clicking the save button in the right corner, preserving the selected waveform stack in the chosen path as a .csv file. The filename should contain the name of the device and a name set by the user in the "Messung" field. The information entered about the vehicle ("Messung", "vin", "bekannte Fahrzeuge") should be saved at the top of the .csv file, so it can be read out in a later process.

Exit Option:

Throughout the entire process, users can close the window by clicking a "cancel" (abbrechen) button located in the right corner of the window.

\subsubsection{Load Again Button/Reset Button}

The reset button resets all measurements and reloads all connected devices. If pressed on the main screen, the same symbol should pop up rotating as long as the app needs to reconnect the devices and reset the data.

\subsubsection{Start and Stop Button States}

It is not clear at the moment if the start and stop

buttons will stay in the toolbar or be placed in the plot region.

\subsection{Region: Plot Region}

The plot region displays the data window where the measurements are shown. The data window is located in the middle of the screen. It adapts when the user opens or closes the devices list or the sidebar menu. A picture is shown in Figure \ref{fig:datawindow}.
The plot region displays the data window where measurements are shown. It is positioned in the middle of the screen and adapts to the opening and closing of the devices list or sidebar menu. A visual representation of the data window is shown in Figure \ref{fig:datawindow}.

\begin{figure}
\includegraphics[width=.9\textwidth]{assets/pictures/Mainwindowopen.png}
\caption[]{A visual representation of the data window with a legend}
\label{fig:datawindow}
\includegraphics[width=.9\textwidth]{assets/pictures/Mainwindowopen.png}
\caption[]{A visual representation of the data window with a legend}
\label{fig:datawindow}
\end{figure}

While the measurement is being taken, the scale and size of the data window cannot be changed. After the measurement, the user can adjust the data window. The following adjustments are possible:

While a measurement is being taken, the scale and size of the data window cannot be changed. After the measurement, the user can adjust the data window, including:
\begin{itemize}
\item Zooming in and out on both axes.
\item Adjusting the scale of the x- and y-axes.
\item Selecting a specific part of the data window and displaying it.
\item Zooming in and out on both axes.
\item Adjusting the scale of the x- and y-axes.
\item Selecting and displaying a specific part of the data window.
\end{itemize}

Adjustments should be made using a mouse, mousepad, touchpad, or keyboard shortcuts.

Additionally, the user can export the data window as a PDF.

\subsection{Region: Sidebar Menu}
Adjustments can be made using a mouse, mousepad, touchpad, or keyboard shortcuts. The user can also export the data window as a PDF.

The sidebar menu is located on the left side of the application. It can be expanded and closed via a side button. The sidebar menu is divided into five different submenus with different icons. The menu and submenus are shown in the following:
\section{Sidebar Menu}

The sidebar menu, located on the left side of the application, can be expanded and closed via a side button. It contains five submenus, each with its own icon:
\begin{itemize}
\item Searching devices ("Suche Geräte")
\item Loading old data ("Daten hinzufügen")
\item Diagnostics ("Diagnose")
\item Settings ("Einstellungen")
\item Help ("Hilfe")
\item Searching devices ("Suche Geräte")
\item Loading old data ("Daten hinzufügen")
\item Diagnostics ("Diagnose")
\item Settings ("Einstellungen")
\item Help ("Hilfe")
\end{itemize}

A picture of the sidebar menu is shown in Figure \ref{fig:sidebarMenu}.
A visual representation of the sidebar menu is shown in Figure \ref{fig:sidebarMenu}.

\begin{figure}
\includegraphics[width=.9\textwidth]{assets/pictures/SideBarMenu.png}
\caption[]{A visual representation of the sidebar menu in its different states}
\label{fig:sidebarMenu}
\includegraphics[width=.9\textwidth]{assets/pictures/SideBarMenu.png}
\caption[]{A visual representation of the sidebar menu in its different states}
\label{fig:sidebarMenu}
\end{figure}

The different submenus are described below.

\subsubsection{Searching Devices}

The Searching Devices submenu contains a button for searching connected devices. When the button is pressed, the connected devices are searched and displayed in the devices list menu. The connected OmnAIScopes should light up blue.

\subsubsection{Loading Old Data}

The Loading Old Data submenu contains a button for opening the "Load Old Data" popup window. The configuration of this popup window is described in \ref{cap:PopupWindow_loadoldata}.

\subsubsection{Diagnostics Menu}
\subsection{Searching Devices}
The "Searching Devices" submenu contains a button that, when clicked, searches for connected devices. Found devices are displayed in the devices list menu, and connected omnAIScopes light up blue.

The Diagnostics menu is a drop-down menu that allows the user to choose between different analyses. By selecting an analysis type, the associated popup window is opened. The different analysis popup windows are described in \ref{cap:PopupWindow_analysedata} and \ref{cap:PopupWindow_generate_training_data}.
\subsection{Loading Old Data}
The "Loading Old Data" submenu contains a button that opens the "Load Old Data" popup window. Configurations for this popup window are detailed in Section \ref{cap:PopupWindow_loadoldata}.

\subsubsection{Settings Menu}
\subsection{Diagnostics Menu}
The Diagnostics menu is a drop-down menu with options for different analyses. Selecting an analysis type opens the associated popup window, described in Sections \ref{cap:PopupWindow_analysedata} and \ref{cap:PopupWindow_generate_training_data}.

The Settings menu is a drop-down menu that allows the user to select the language and configure the layout. By selecting one of the settings, the corresponding settings window is opened. The settings window is described in \ref{cap:PopupWindow_layout}.
\subsection{Settings Menu}
The Settings menu is a drop-down menu with options for language selection and layout configuration. Selecting these options opens the corresponding settings windows, described in Section \ref{cap:PopupWindow_layout}.

\subsubsection{Help Menu}
\subsection{Help Menu}
The Help button directs users to a website. Before accessing the website, a popup window asks for confirmation.

The Help menu is represented by a help button. When this button is pressed, the user is redirected to a website. Before being redirected, the user is prompted by a popup window asking for confirmation.
\section{Popup Windows}

\subsection{Region: Popup Windows}
This section describes the configuration and functionality of the various popup windows.

This section describes the configuration and functionality of the different popup windows.

\subsubsection{Popup Window: Layout} \label{cap:PopupWindow_layout}

Expand Down

0 comments on commit 52c492a

Please sign in to comment.