Updated 2. Software Architecture Specification (markdown)

Cyber-Luke 2022-04-23 20:02:33 +02:00
parent 6fff19bd18
commit 260302f012

@ -127,13 +127,13 @@ This part of the software architecture specification explains and breaks down th
The criteria for good usability are: The criteria for good usability are:
**Intuitiveness** : Intuitiveness is a key component of good usability which means that the user understands the application without a long training period. **Intuitiveness** : Intuitiveness is a key component of good usability which means that the user understands the application without a long training period. This point is also interesting for companies, as they then do not have to train their employees for so long. This is to be achieved by having important things at the top and not hidden in a drop-down selection. Furthermore, the design must be adopted from other well-known programmes.
**Design** : When designing the application, an appealing layout is important. It should be clearly recognisable which function is hidden behind which visual elements and how the user can navigate through the app. **Design** : When designing the application, an appealing layout is important. It should be clearly recognisable which function is hidden behind which visual elements and how the user can navigate through the app. It probably makes sense to be inspired by the design of the [AutomationML editor](https://www.automationml.org/wp-content/uploads/2021/04/AMLEditor552-1024x743.png), because then the switch to this programme would not be so difficult.
**Recognition value** : This means that similar functions should be realized with the same sequences. This makes it easier for the user to find his way around the functions and increases user friendliness. **Recognition value** : This means that similar functions should be realized with the same sequences. This makes it easier for the user to find his way around the functions and increases user friendliness. For example, when creating models or a wizard that guides you through the creation.
**Colour scheme** : A good colouration can be created by an attractive choice of colours and their coordinated contrasts. **Colour scheme** : A good colouration can be created by an attractive choice of colours and their coordinated contrasts. At the moment, matte colours are more in vogue and are preferred for designs. Many people find these more pleasant.
Implementation guideline: Implementation guideline:
@ -158,52 +158,54 @@ This means that the code is indented uniformly to improve readability and compre
## 4.1 Architectural Model <a name="AC1"/> ## 4.1 Architectural Model <a name="AC1"/>
<p align="center">
<img src="https://user-images.githubusercontent.com/76038781/140762432-baca1fb5-f66b-41ab-9702-be7fc2cfcc0d.png" alt="MVC Model" />
</p>
<em>Figure 1 - MVC Architecture [2]</em>
The application was designed and developed according to a Model-View-Control (MVC) architecture pattern that resembles a cycle. The user can use the application by accessing the GUI. However, the actions he performs in the GUI are not processed in the GUI but in the controller and its subclasses. The controller executes the changes in the background, these are also called manipulations. Afterwards, the changes are updated on the user interface so that the user thinks that the changes were made directly in the GUI (cf. Figure 1). The application was designed and developed according to a Model-View-Control (MVC) architecture pattern that resembles a cycle. The user can use the application by accessing the GUI. However, the actions he performs in the GUI are not processed in the GUI but in the controller and its subclasses. The controller executes the changes in the background, these are also called manipulations. Afterwards, the changes are updated on the user interface so that the user thinks that the changes were made directly in the GUI (cf. Figure 1).
<p align="center">
<img src="https://user-images.githubusercontent.com/76038781/140762432-baca1fb5-f66b-41ab-9702-be7fc2cfcc0d.png" alt="MVC Model" /><br>
<em>Figure 1 - MVC Architecture [2]</em>
</p>
Almost all the logic is contained in the controller, which thus forms the centre of the entire system architecture and contains the functionalities. There is basically only one layer that is accessible to the user, the GUI. Almost all the logic is contained in the controller, which thus forms the centre of the entire system architecture and contains the functionalities. There is basically only one layer that is accessible to the user, the GUI.
The controller is the main control unit. It is responsible for communicating with the user interface and the external systems that are added for conversions. This interface is the heart of the entire application and is responsible for the functionalities, but also for the integration of additional functions such as saving or loading AMLX packages from the AutomationML Engine. Thus, the concept builds on that of the plug-in, making it easier to adapt functions and ideas. The change is that it will be a standalone application. This is ensured by integrating the AutomationML engine and the plug-in into a new programme via an import. The plugin is then started in its own view, so that the old code of the plugin is retained. The controller is the main control unit. It is responsible for communicating with the user interface and the external systems that are added for conversions. This interface is the heart of the entire application and is responsible for the functionalities, but also for the integration of additional functions such as saving or loading AMLX packages from the AutomationML Engine. Thus, the concept builds on that of the plug-in, making it easier to adapt functions and ideas. The change is that it will be a standalone application. This is ensured by integrating the AutomationML engine and the plug-in into a new programme via an import. The plugin is then started in its own view, so that the old code of the plugin is retained.
<center> <p align="center">
<img src="https://user-images.githubusercontent.com/76038781/140762427-8fb4c097-2c53-4c80-a07f-ed3f3d8c90d3.png" /> <img src="https://user-images.githubusercontent.com/76038781/140762427-8fb4c097-2c53-4c80-a07f-ed3f3d8c90d3.png" /><br>
<em>Figure 1 - MVC Architecture [2] <br></em> <em>Figure 2 - Logic of the plugin</em>
</center> </p>
In the figure above, you can see the new architecture design that depicts the structure of the standalone application (cf. Figure 2). As you can see in the illustration, the user only interacts with the graphical user interface. This then passes the input from the user to the controller and the controller displays the information in the GUI. The controller processes the requests with the help of the AutomationML engine, but not all functions were mapped for this because there would be too many. For example, it can be used to save and load models in AML format. To be able to process IODD and GSD model formats, the programme needs converters. These work with two interfaces and return an AutomationML file. In the figure above, you can see the new architecture design that depicts the structure of the standalone application (cf. Figure 2). As you can see in the illustration, the user only interacts with the graphical user interface. This then passes the input from the user to the controller and the controller displays the information in the GUI. The controller processes the requests with the help of the AutomationML engine, but not all functions were mapped for this because there would be too many. For example, it can be used to save and load models in AML format. To be able to process IODD and GSD model formats, the programme needs converters. These work with two interfaces and return an AutomationML file.
# 5. System Design <a name="SD"/> # 5. System Design <a name="SD"/>
<p align="center"> <p align="center">
<img src="https://user-images.githubusercontent.com/76038781/140761356-05e600c3-b11f-46a8-9bb2-355cdc1e82db.PNG" alt="System" /> <img src="https://user-images.githubusercontent.com/76038781/140761356-05e600c3-b11f-46a8-9bb2-355cdc1e82db.PNG" alt="System" /><br>
<em>Figure 3 - System class design</em>
</p> </p>
This figure is showing the complete software structure design. There was actually no change here, as the concept of the plug-in was taken over from the [old project](https://github.com/DekaAthlos/TINF19C-ModellingWizard). This figure is showing the complete software structure design. There was actually no change here, as the concept of the plug-in was taken over from the [old project](https://github.com/DekaAthlos/TINF19C-ModellingWizard).
<p align="center"> <p align="center">
<img src="https://user-images.githubusercontent.com/76038781/140761360-67adafbe-f4c9-4279-a80e-d0430b1b5cc9.png" /> <img src="https://user-images.githubusercontent.com/76038781/140761360-67adafbe-f4c9-4279-a80e-d0430b1b5cc9.png" /><br>
<em>Figure 4 - MVC pattern</em>
</p> </p>
Still the MVC pattern is a small part of the whole system design. In this case the InputFromUser is obviously the user input. DeviceDesc (standing for Device Description), due to its two different C# program files, once maps the GUI and once the controller. DataMW is the class that takes care of the data management and creates an object of the type MWData, which can then export, store and process through the controller. The source code is located in the "app-source-code" branch under the "Source" folder. Click to open the [Source folder](https://github.com/H4CK3R-01/TINF20C_ModellingWizard_Devices/tree/app-source-code/SOURCE). Still the MVC pattern is a small part of the whole system design. In this case the InputFromUser is obviously the user input. DeviceDesc (standing for Device Description), due to its two different C# program files, once maps the GUI and once the controller. DataMW is the class that takes care of the data management and creates an object of the type MWData, which can then export, store and process through the controller. The source code is located in the "app-source-code" branch under the "Source" folder. Click to open the [Source folder](https://github.com/H4CK3R-01/TINF20C_ModellingWizard_Devices/tree/app-source-code/SOURCE).
| **Classname** | **Storage location** | | **Classname** | **Storage location** |
| --- | --- | | --- | --- |
| About | SOURCE/Plugin/About.xaml.xs | | About | [SOURCE/Plugin/About.xaml.cs](https://github.com/H4CK3R-01/TINF20C_ModellingWizard_Devices/blob/app-source-code/SOURCE/Plugin/About.xaml.cs) |
| AnimationClass | SOURCE/Plugin/Animationclass.cs | | AnimationClass | [SOURCE/Plugin/Animationclass.cs](https://github.com/H4CK3R-01/TINF20C_ModellingWizard_Devices/blob/app-source-code/SOURCE/Plugin/AnimationClass.cs) |
| AutomationMLDataTables | SOURCE/Plugin/AutomationMLDataTables.cs | | AutomationMLDataTables | [SOURCE/Plugin/AutomationMLDataTables.cs](https://github.com/H4CK3R-01/TINF20C_ModellingWizard_Devices/blob/app-source-code/SOURCE/Plugin/AutomationMLDataTables.cs) |
| ClassOfListFromReferenceFile | SOURCE/Plugin/ClassOfListsFromReferencefile.cs | | ClassOfListFromReferenceFile | [SOURCE/Plugin/ClassOfListsFromReferencefile.cs](https://github.com/H4CK3R-01/TINF20C_ModellingWizard_Devices/blob/app-source-code/SOURCE/Plugin/ClassOfListsFromReferencefile.cs) |
| DeviceDescription | GUI: SOURCE/Plugin/DeviceDescription.Designer.cs <br> Logic: SOURCE/Plugin/DeviceDescription.cs | | DeviceDescription | GUI: [SOURCE/Plugin/DeviceDescription.Designer.cs](https://github.com/H4CK3R-01/TINF20C_ModellingWizard_Devices/blob/app-source-code/SOURCE/Plugin/DeviceDescription.Designer.cs) <br> Logic: [SOURCE/Plugin/DeviceDescription.cs](https://github.com/H4CK3R-01/TINF20C_ModellingWizard_Devices/blob/app-source-code/SOURCE/Plugin/DeviceDescription.cs) |
| ModellingWizard | SOURCE/Plugin/ModellingWizard.xaml.cs | | ModellingWizard | [SOURCE/Plugin/ModellingWizard.xaml.cs](https://github.com/H4CK3R-01/TINF20C_ModellingWizard_Devices/blob/app-source-code/SOURCE/Plugin/ModellingWizard.xaml.cs) |
| MWController | SOURCE/Plugin/MWController.cs | | MWController | [SOURCE/Plugin/MWController.cs](https://github.com/H4CK3R-01/TINF20C_ModellingWizard_Devices/blob/app-source-code/SOURCE/Plugin/MWController.cs) |
| MWData | SOURCE/Plugin/MWData.cs | | MWData | [SOURCE/Plugin/MWData.cs](https://github.com/H4CK3R-01/TINF20C_ModellingWizard_Devices/blob/app-source-code/SOURCE/Plugin/MWData.cs) |
| MWDevice | SOURCE/Plugin/MWDevice.cs | | MWDevice | [SOURCE/Plugin/MWDevice.cs](https://github.com/H4CK3R-01/TINF20C_ModellingWizard_Devices/blob/app-source-code/SOURCE/Plugin/MWDevice.cs) |
| Resources | SOURCE/Plugin/Resources/ | | Resources | [SOURCE/Plugin/Resources/](https://github.com/H4CK3R-01/TINF20C_ModellingWizard_Devices/tree/app-source-code/SOURCE/Plugin/Resources) |
| SearchAMLComponentFile | SOURCE/Plugin/SearchAMLComponentFile.cs | | SearchAMLComponentFile | [SOURCE/Plugin/SearchAMLComponentFile.cs](https://github.com/H4CK3R-01/TINF20C_ModellingWizard_Devices/blob/app-source-code/SOURCE/Plugin/SearchAMLComponentFile.cs) |
| SearchAMLLibraryFile | SOURCE/Plugin/SearchAMLLibraryFile.cs | | SearchAMLLibraryFile | [SOURCE/Plugin/SearchAMLLibraryFile.cs](https://github.com/H4CK3R-01/TINF20C_ModellingWizard_Devices/blob/app-source-code/SOURCE/Plugin/SearchAMLLibraryFile.cs) |
# 6. Subsystem specification <a name="SS"/> # 6. Subsystem specification <a name="SS"/>
@ -215,8 +217,8 @@ Still the MVC pattern is a small part of the whole system design. In this case t
| Services: | The graphical user interface is taking input from the user and sending it to the controller by calling event functions. | | Services: | The graphical user interface is taking input from the user and sending it to the controller by calling event functions. |
| Interfaces: | --- | | Interfaces: | --- |
| External Data: | --- | | External Data: | --- |
| Storage Location: | SOURCE/Plugin/DeviceDescription.Designer.cs | | Storage Location: | [SOURCE/Plugin/DeviceDescription.Designer.cs](https://github.com/H4CK3R-01/TINF20C_ModellingWizard_Devices/blob/app-source-code/SOURCE/Plugin/DeviceDescription.Designer.cs) |
| Modul documentation: | MOD.001: Graphical User Interface (GUI) | | Modul documentation: | [MOD.001: Graphical User Interface (GUI)](https://github.com/H4CK3R-01/TINF20C_ModellingWizard_Devices/wiki/MOD.001:-Graphical-User-Interface-(GUI)) |
## 6.2 MOD.002 Controller <a name="SS2"/> ## 6.2 MOD.002 Controller <a name="SS2"/>
@ -224,10 +226,10 @@ Still the MVC pattern is a small part of the whole system design. In this case t
| --- | --- | | --- | --- |
| System requirements covered: | /NF100/, /F30/, /F40/, /F50/, /F80/ | | System requirements covered: | /NF100/, /F30/, /F40/, /F50/, /F80/ |
| Services: | Logic distribution is handled by the controller. It is reacting to the events triggered by the GUI and takes care of creating the respective objects. Also the input and output functions are implemented in the controller. | | Services: | Logic distribution is handled by the controller. It is reacting to the events triggered by the GUI and takes care of creating the respective objects. Also the input and output functions are implemented in the controller. |
| Interfaces: | Interface for IODD to AutomationML, Interface for GSD to AutomationML and Interface of AMLX packages. For export/import of amlx files there is another class referenced: SOURCE/MWData.cs | | Interfaces: | Interface for IODD to AutomationML, Interface for GSD to AutomationML and Interface of AMLX packages. For export/import of amlx files there is another class referenced: [SOURCE/MWData.cs](https://github.com/H4CK3R-01/TINF20C_ModellingWizard_Devices/blob/app-source-code/SOURCE/Plugin/MWData.cs) |
| External Data: | --- | | External Data: | --- |
| Storage location: | SOURCE/Plugin/DeviceDescription.cs | | Storage location: | [SOURCE/Plugin/DeviceDescription.cs](https://github.com/H4CK3R-01/TINF20C_ModellingWizard_Devices/blob/app-source-code/SOURCE/Plugin/DeviceDescription.cs) |
| Modul documentation: | MOD.002: Controller | | Modul documentation: | [MOD.002: Controller](https://github.com/H4CK3R-01/TINF20C_ModellingWizard_Devices/wiki/MOD.002:-Controller) |
# 7. Technical Concepts <a name="TC"/> # 7. Technical Concepts <a name="TC"/>