13 |
--------------------------------------------------------------------------------
/SOURCE/src/app/variables-list/variables-list.component.css:
--------------------------------------------------------------------------------
1 | /* .variablesList {
2 | position: absolute;
3 | top: 0;
4 | left: 0;
5 | width: 78%;
6 | height: 20%;
7 | border: black solid 2px;
8 | padding-left: 10px;
9 | overflow: auto;
10 | margin: 5px;
11 | }
12 | table, th, td {
13 | border: 1px solid black;
14 | }
15 | table {
16 | border-collapse: collapse;
17 | width: 96%;
18 | margin: 10px 2%;
19 | }
20 | th {
21 | background-color: lavender;
22 | }
23 | .newVariable {
24 | margin: 10px 0 5px 2%;
25 | }
26 | input {
27 | border: none;
28 | }
29 |
30 | select {
31 | border: none;
32 | }
33 | */
34 |
35 | .header {
36 | position: sticky;
37 | top:0;
38 | background-color: white;
39 | border-bottom: 1px solid gray;
40 | z-index: 100;
41 | }
42 |
43 |
--------------------------------------------------------------------------------
/SOURCE/src/app/navigation/navigation.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { NavigationComponent } from './navigation.component';
4 |
5 | describe('NavigationComponent', () => {
6 | let component: NavigationComponent;
7 | let fixture: ComponentFixture
14 |
21 |
15 |
17 |
18 |
20 |
22 |
26 |
23 |
25 |
8 |
38 |
39 |
--------------------------------------------------------------------------------
/SOURCE/src/app/navigation/navigation.component.html:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 | Library
9 | 10 | 14 | 15 |
16 |
37 |
17 |
18 |
35 |
36 | |
20 |
21 |
27 |
28 |
29 | |
30 | 31 | 32 | | 33 |
11 |
19 |
20 |
21 |
26 |
27 |
12 |
18 | PLCOpen-Editor 1.0
13 | 17 |
28 |
35 |
36 |
--------------------------------------------------------------------------------
/SOURCE/src/app/project-overview/project-overview.component.css:
--------------------------------------------------------------------------------
1 | .projectOverview {
2 | margin-left: 20px;
3 | }
4 |
5 | .actionButton {
6 | background-color: black;
7 | border: none;
8 | color: white;
9 | padding: 10px 20px;
10 | text-align: center;
11 | text-decoration: none;
12 | display: inline-block;
13 | margin: 8px 2px;
14 | cursor: pointer;
15 | border-radius: 16px;
16 | font-size: small;
17 | }
18 |
19 | .dropbtn {
20 | border: none;
21 | padding: 10px 20px;
22 | text-decoration: none;
23 | margin: 8px 2px;
24 | color: black;
25 | font-size: 18px;
26 | }
27 |
28 | /* .dropdown-content {
29 | display: none;
30 | } */
31 |
32 | .dropdown:hover .dropdown-content {
33 | display: block;
34 | }
35 |
36 | .dropdown:hover .dropbtn {
37 | color: red;
38 | }
39 |
40 | .projectModal {
41 | display: none; /* Hidden by default */
42 | position: fixed; /* Stay in place */
43 | z-index: 1; /* Sit on top */
44 | left: 0;
45 | top: 0;
46 | width: 100%;
47 | height: 100%;
48 | overflow: auto;
49 | background-color: rgb(0,0,0);
50 | background-color: rgba(0,0,0,0.4);
51 | }
52 |
53 | .modalBox {
54 | position: absolute;
55 | top: 20%;
56 | left: 50%;
57 | text-align: left;
58 | transform: translate(-50%,-50%);
59 | background-color: white;
60 | width: fit-content;
61 | height: fit-content;
62 | padding: 15px;
63 | }
64 | .form {
65 | padding: 10px 30px;
66 | }
67 |
68 |
69 | a:hover {
70 | color: gray;
71 | }
72 |
73 | .modal {
74 | background-color: #333b3f;
75 | }
76 |
77 |
78 |
--------------------------------------------------------------------------------
/SOURCE/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "open-plc-editor",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "test": "ng test",
9 | "lint": "ng lint",
10 | "e2e": "ng e2e"
11 | },
12 | "private": true,
13 | "dependencies": {
14 | "@angular/animations": "~11.0.1",
15 | "@angular/cdk": "^11.2.12",
16 | "@angular/common": "~11.0.1",
17 | "@angular/compiler": "~11.0.1",
18 | "@angular/core": "~11.0.1",
19 | "@angular/forms": "~11.0.1",
20 | "@angular/platform-browser": "~11.0.1",
21 | "@angular/platform-browser-dynamic": "~11.0.1",
22 | "@angular/router": "~11.0.1",
23 | "@swimlane/ngx-graph": "^7.2.0",
24 | "bootstrap": "^4.6.0",
25 | "file-saver": "^2.0.5",
26 | "readable-stream": "^3.6.0",
27 | "rxjs": "^6.6.7",
28 | "timers": "^0.1.1",
29 | "tslib": "^2.2.0",
30 | "zone.js": "~0.10.2"
31 | },
32 | "devDependencies": {
33 | "@angular-devkit/build-angular": "^0.1100.7",
34 | "@angular/cli": "~11.0.2",
35 | "@angular/compiler-cli": "~11.0.1",
36 | "@types/jasmine": "^3.6.11",
37 | "@types/node": "^12.20.12",
38 | "codelyzer": "^6.0.2",
39 | "jasmine-core": "~3.6.0",
40 | "jasmine-spec-reporter": "~5.0.0",
41 | "karma": "~5.1.0",
42 | "karma-chrome-launcher": "~3.1.0",
43 | "karma-coverage": "~2.0.3",
44 | "karma-jasmine": "~4.0.0",
45 | "karma-jasmine-html-reporter": "^1.6.0",
46 | "protractor": "~7.0.0",
47 | "ts-node": "~8.3.0",
48 | "tslint": "~6.1.0",
49 | "typescript": "^4.0.7"
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/SOURCE/src/app/about/about.component.html:
--------------------------------------------------------------------------------
1 |
6 |
7 |
10 |
11 |
28 |
--------------------------------------------------------------------------------
/SOURCE/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { BrowserModule } from '@angular/platform-browser';
2 | import { NgModule } from '@angular/core';
3 |
4 | import { AppRoutingModule } from './app-routing.module';
5 | import { AppComponent } from './app.component';
6 | import { HomepageComponent } from './homepage/homepage.component';
7 | import { EditorComponent } from './editor/editor.component';
8 | import { VariablesListComponent } from './variables-list/variables-list.component';
9 | import { FormsModule} from '@angular/forms';
10 | import { ProjectOverviewComponent } from './project-overview/project-overview.component';
11 | import { UserManualComponent } from './user-manual/user-manual.component';
12 | import { LibraryComponent } from './library/library.component';
13 | import { GraphComponent } from './graph/graph.component';
14 | import {NgxGraphModule} from '@swimlane/ngx-graph';
15 | import { NavigationComponent } from './navigation/navigation.component';
16 | import { FooterComponent } from './footer/footer.component';
17 | import { HttpClientModule} from '@angular/common/http';
18 | import { AboutComponent } from './about/about.component';
19 |
20 | @NgModule({
21 | declarations: [
22 | AppComponent,
23 | HomepageComponent,
24 | EditorComponent,
25 | VariablesListComponent,
26 | ProjectOverviewComponent,
27 | UserManualComponent,
28 | LibraryComponent,
29 | GraphComponent,
30 | NavigationComponent,
31 | FooterComponent,
32 | AboutComponent,
33 | ],
34 | imports: [
35 | NgxGraphModule,
36 | BrowserModule,
37 | AppRoutingModule,
38 | FormsModule,
39 | HttpClientModule
40 | ],
41 | providers: [],
42 | bootstrap: [AppComponent]
43 | })
44 | export class AppModule { }
45 |
--------------------------------------------------------------------------------
/SOURCE/src/app/library/library.component.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @Filename : library.service.ts
3 | *
4 | * @Author : Leonie de Santis
5 | *
6 | * @Last_Modified : 13.05.2021
7 | *
8 | */
9 |
10 | import { Component, OnInit } from '@angular/core';
11 | import { HttpClient, HttpHeaders} from '@angular/common/http';
12 | import { EditorService} from '../services/editor.service';
13 |
14 | @Component({
15 | selector: 'app-library',
16 | templateUrl: './library.component.html',
17 | styleUrls: ['./library.component.css']
18 | })
19 | export class LibraryComponent implements OnInit {
20 | public functionBlocks: any[] = [];
21 |
22 | constructor(private http: HttpClient, private editorService: EditorService) {
23 | }
24 |
25 | ngOnInit(): void {
26 | this.loadFunctionBlocks('Standard_Function_Blocks.xml');
27 | }
28 |
29 | // load the xml File of the according function blocks
30 | // add the function blocks of the xml to the list of function blocks
31 | // to show them in the library
32 | loadFunctionBlocks(blockUrl: string): void {
33 | this.functionBlocks = [];
34 | const httpHeaders = new HttpHeaders({ 'Content-Type': 'text/xml' });
35 | httpHeaders.append('Accept', 'text/xml');
36 | httpHeaders.append('Content-Type', 'text/xml');
37 | this.http.get('../assets/xmlResources/' + blockUrl,
38 | {headers: httpHeaders, responseType: 'text'}).subscribe((data) => {
39 | const parser = new DOMParser();
40 | const dom = parser.parseFromString(data, 'application/xml');
41 | const i = dom.documentElement.getElementsByTagName('pous')[0].childElementCount;
42 | for (let j = 0; j < i; j++){
43 | const pou = dom.documentElement.getElementsByTagName('pou')[j];
44 | this.functionBlocks.push(pou);
45 | }
46 | });
47 | }
48 |
49 | // addFB -> the editorService create a new function block
50 | addFB(fbXml: any): void{
51 | this.editorService.addFB(fbXml);
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/SOURCE/src/app/project-overview/project-overview.component.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @Filename : project-overview.component.ts
3 | *
4 | * @Author : Leonie de Santis
5 | *
6 | * @Last_Modified : 13.05.2021
7 | *
8 | */
9 |
10 | import { Component, OnInit } from '@angular/core';
11 | import {ProjectService} from '../services/project.service';
12 | import {ImportService} from '../services/import.service';
13 |
14 | @Component({
15 | selector: 'app-project-overview',
16 | templateUrl: './project-overview.component.html',
17 | styleUrls: ['./project-overview.component.css']
18 | })
19 | export class ProjectOverviewComponent implements OnInit {
20 | public pous: string[] = [];
21 | public projectName = '';
22 |
23 | constructor(private projectService: ProjectService, private importService: ImportService) {
24 | }
25 |
26 | // load the project name and the list of pous from the projectService
27 | ngOnInit(): void {
28 | this.pous = this.projectService.getPouName();
29 | this.projectName = this.projectService.getProjectName();
30 | }
31 |
32 | // load the list of pous from the projectService
33 | loadPous(): void {
34 | this.pous = this.projectService.getPouName();
35 | }
36 |
37 | closePouModal(): void {
38 | document.getElementById('addPouModal').style.display = 'none';
39 | }
40 |
41 | // create a new pou and add to the pou list
42 | addPou(data: any): void {
43 | this.projectService.addPou(data.name, data.type, data.lang);
44 | this.loadPous();
45 | this.closePouModal();
46 | }
47 |
48 | // remove the selected pou and reload the pou list
49 | deletePou(deleteItem: string): void {
50 | this.projectService.deletePou(deleteItem);
51 | this.loadPous();
52 | }
53 |
54 | // export the project
55 | exportProject(): void {
56 | this.projectService.exportProject();
57 | }
58 |
59 | // upload another file
60 | fileUpload(event: Event): void {
61 | this.importService.fileUpload(event);
62 | }
63 |
64 | openProject(): void {
65 | this.loadPous();
66 | }
67 |
68 | }
69 |
--------------------------------------------------------------------------------
/SOURCE/src/app/services/import.service.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @Filename : import.service.ts
3 | *
4 | * @Author : Leonie de Santis
5 | *
6 | * @Last_Modified : 13.05.2021
7 | *
8 | */
9 |
10 | import { Injectable } from '@angular/core';
11 | import {ProjectService} from './project.service';
12 | import {Router} from '@angular/router';
13 |
14 | @Injectable({
15 | providedIn: 'root'
16 | })
17 |
18 | export class ImportService {
19 | xmlFile: any;
20 |
21 |
22 |
23 | constructor(private projectService: ProjectService, private router: Router) {
24 |
25 | }
26 |
27 | // check if a file was uploaded and read the uploaded file as a string
28 | fileUpload(event: Event): void {
29 | // @ts-ignore
30 | if (event.target.files[0] !== null) {
31 | // @ts-ignore
32 | const file = event.target.files[0];
33 | if (!file) {
34 | return;
35 | }
36 | const reader = new FileReader();
37 | reader.onload = (evt) => {
38 | this.xmlFile = (evt as any).target.result;
39 | this.uploadProject();
40 | };
41 | reader.readAsText(file);
42 | }
43 | }
44 |
45 | // Tries to read the information of the xml-file and saves
46 | // the different parts (header, pous and instances) into the projectService.
47 | // If there is an invalid xml-file an error message is shown on the display
48 | uploadProject(): void {
49 | try {
50 | this.projectService.headerItems = [];
51 | this.projectService.pouItems = [];
52 | const parser = new DOMParser();
53 | const dom = parser.parseFromString(this.xmlFile, 'application/xml');
54 | const i = dom.documentElement.getElementsByTagName('pous')[0].childElementCount;
55 | for (let j = 0; j < i; j++){
56 | this.projectService.pouItems.push(dom.documentElement.getElementsByTagName('pou')[j]);
57 | }
58 | this.projectService.headerItems.push(dom.documentElement.getElementsByTagName('fileHeader')[0]);
59 | this.projectService.headerItems.push(dom.documentElement.getElementsByTagName('contentHeader')[0]);
60 | this.projectService.instanceItems = dom.documentElement.getElementsByTagName('instances')[0];
61 | } catch (e) {
62 | alert('The uploaded file is empty or corrupted! \n Please upload another file.');
63 | if (this.router.url === '/') {
64 | this.router.navigateByUrl('home');
65 | }
66 | else if (this.router.url === '/home') {
67 | this.router.navigateByUrl('');
68 | }
69 | else if (this.router.url === '/projectOverview') {
70 | this.router.navigateByUrl('home');
71 | }
72 | }
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/SOURCE/src/app/models/fbdObjects/fbdLabel.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @Filename : fbdLabel.ts
3 | *
4 | * @Author : Leonie de Santis
5 | *
6 | * @Last_Modified : 13.05.2021
7 | *
8 | */
9 |
10 | import { PLCNode } from '../PLCNode';
11 |
12 | export class FbdLabel {
13 | public xml: any;
14 | public localId: string;
15 | public height = 20;
16 | public width = 20;
17 | public label = '';
18 | public position: {x: number, y: number} = {x: 0, y: 0};
19 | public node: PLCNode = {id: null, label: null, type: null, connectionPoints: null};
20 | public edges: string[] = [];
21 |
22 | // check if imported xml ist empty, then create xml, otherwise reads relevant values of xml- file
23 | constructor(xmlLabel: any) {
24 | if (xmlLabel === '') {
25 | this.createNewLabel();
26 | }
27 | else {
28 | this.xml = xmlLabel;
29 | this.localId = xmlLabel.getAttribute('localId');
30 | if (xmlLabel.getAttribute('width') !== undefined) {
31 | this.width = xmlLabel.getAttribute('width');
32 | }
33 | if (xmlLabel.getAttribute('height') !== undefined) {
34 | this.height = xmlLabel.getAttribute('height');
35 | }
36 | if (xmlLabel.getAttribute('label') !== undefined) {
37 | this.label = xmlLabel.getAttribute('label');
38 | }
39 | if (xmlLabel.getElementsByTagName('position')[0] !== undefined) {
40 | const position = xmlLabel.getElementsByTagName('position')[0];
41 | this.position = { x: position.getAttribute('x'), y: position.getAttribute('y')};
42 | }
43 | }
44 |
45 | // values that are relevant for illustration are written into nodes
46 | this.node.id = this.localId;
47 | this.node.label = this.label;
48 | this.node.type = 'label';
49 | }
50 |
51 | // creates a default xml-file for the object
52 | createNewLabel(): void {
53 | const xmlString = ' ';
56 | const parser = new DOMParser();
57 | this.xml = parser.parseFromString(xmlString, 'application/xml');
58 | this.xml = this.xml.getElementsByTagName('label')[0];
59 | }
60 |
61 | // updates attributes of position
62 | updatePosition(xPos: number, yPos: number): void {
63 | this.xml.getElementsByTagName('position')[0].setAttribute('x', xPos);
64 | this.xml.getElementsByTagName('position')[0].setAttribute('y', yPos);
65 | }
66 |
67 | // updates relevant attributes
68 | updateAttributes(localId: number, label: string): void{
69 | this.xml.setAttribute('localId', localId);
70 | this.xml.setAttribute('label', label);
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/SOURCE/src/assets/corruptedXML.xml:
--------------------------------------------------------------------------------
1 |
2 | About PLCOpen-Editor
12 | 13 |What is PLC?
14 |PLC stands for Programable logic controllers. 15 | A simple way to understand it would be to think of PLC as a small computer that performs a list of instructions. 16 | The list of instructions contains logic that helps determine which course of action to take on a given set of circumstances. 17 | PLC is used in alot of areas inside and outside the industrial work. Usually where automation of tasks is the goal. 18 | The PLC editor itself helps user create programs without the need to know the syntax of the used programming lanugage for the PLC. All what the user needs to do is to determine the logic for the controller. 19 | The OpenPLC Reference page has a nice tutorial to follow along and learn about PLC
20 | 21 |Why are we doing the project?
22 |We want to develop a web version of the OpenPLC Editor to allow users to work on their programs remotely without requiring installation. 23 | You can find more information about the project by visiting the wiki and reading the CRS, SRS and SAS documents.
24 | 25 |What technologies are we using to make the application?
26 |The Application runs is written in Angular 8 and runs solely as a front end application. There is no backedend envolved
27 |
8 |
9 |
10 |
11 |
79 |
80 |
81 |
--------------------------------------------------------------------------------
/SOURCE/src/app/models/commonObjects/commonComment.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @Filename : commonComment.ts
3 | *
4 | * @Author : Franziska Kopp
5 | *
6 | * @Last_Modified : 19.05.2021
7 | *
8 | */
9 |
10 | import {Node} from '@swimlane/ngx-graph';
11 | import { PLCNode } from '../PLCNode';
12 |
13 | export class CommonComment{
14 | public xml: any;
15 | public localId: string;
16 | public height = '20';
17 | public width = '20';
18 | public content = '';
19 | public position: {x: number, y: number} = {x: 0, y: 0};
20 | public node: PLCNode = {id: null, label: null, type: null, connectionPoints: null};
21 |
22 | // check if imported xml ist empty, then create xml, otherwise reads relevant values of xml- file
23 | constructor(xmlCommonComment: any) {
24 | if (xmlCommonComment === ''){
25 | this.createXML();
26 | } else {
27 | this.xml = xmlCommonComment;
28 | if (xmlCommonComment.getAttribute('localId') !== undefined){
29 | this.localId = xmlCommonComment.getAttribute('localId');
30 | }
31 | if (xmlCommonComment.getAttribute('height') !== undefined){
32 | this.height = xmlCommonComment.getAttribute('height');
33 | }
34 | if (xmlCommonComment.getAttribute('width') !== undefined){
35 | this.width = xmlCommonComment.getAttribute('width');
36 | }
37 | if (xmlCommonComment.getAttribute('content') !== undefined){
38 | this.content = xmlCommonComment.getElementsByTagName('content')[0].children[0].innerText;
39 | }
40 | if (xmlCommonComment.getElementsByTagName('position') !== undefined) {
41 | const position = xmlCommonComment.getElementsByTagName('position')[0];
42 | this.position = {x: position.getAttribute('x'), y: position.getAttribute('y')};
43 | }
44 | }
45 | // values that are relevant for illustration are written into nodes
46 | this.node.id = this.localId;
47 | this.node.label = this.content;
48 | this.node.type = 'var';
49 |
50 | }
51 |
52 | // creates a default xml-file for the object
53 | createXML(): void{
54 | const xmlString = '| Del. | 13 |Name | 14 |Class | 15 |Type | 16 |IEC-Address | 17 |Initial value | 18 |Option | 19 |Documentation | 20 |
|---|---|---|---|---|---|---|---|
| 25 | 26 | | 27 |28 | 31 | | 32 |33 | 43 | | 44 |45 | 50 | | 51 |52 | 55 | | 56 |57 | 60 | | 61 |62 | 69 | | 70 |71 | 74 | | 75 |
3 |
4 | 
5 |
6 |
5 | 7 |
Welcome to the repository of the Web PLCOpen-Editor!
8 | 9 | This is a student project developed at Baden-Wuerttemberg Cooperative State University (DHBW) Stuttgart and supervised by Markus Rentschler and Christian Holder. 10 |11 | Our team members are:
12 | 1. Mouaz Tabboush 13 | 2. Leonie de Santis 14 | 3. Elian Yildirim 15 | 4. Franziska Kopp 16 |
17 | The goal of this project is to develop a web version of the [OpenPLC-Editor](https://www.openplcproject.com/plcopen-editor/) that supports the Sequential Function Chart (SFC) and Function Block Diagram (FBD) languages. 18 | It is supposed to be an easy tool to create PLC programs without needing to install the software. 19 | 20 | ## How to run 21 | **Installing NodeJs**
22 | In order to install Angular you need npm, which comes with NodeJs. 23 | visit this [link](https://nodejs.org/en/download/) to download and install NodeJs 24 | 25 | **Installing Angular**
26 | Now go to your terminal and install angular by entering the following: 27 | ```npm install -g @angular/cli``` 28 | 29 | **Installing dependencies**
30 | Navigate in the terminal into SOURCE in the terminal and enter 31 | ```npm i``` 32 | this should install all the packages needed for the project 33 | 34 | **Testing the project**
35 | If all the dependancies are installed just navigate to OpenPLC-UI in the terminal and enter 36 | ```ng serve``` 37 | This will lunch a development serve on ```localhost://4200``` open that on your browser and you should be good to go 38 | 39 | ## FAQ
40 | **What is PLC?**
41 | PLC stands for Programable logic controllers.
42 | A simple way to understand it would be to think of PLC as a small computer that performs a list of instructions.
43 | The list of instructions contains logic that helps determine which course of action to take on a given set of circumstances.
44 | PLC is used in alot of areas inside and outside the industrial work. Usually where automation of tasks is the goal.
45 | The PLC editor itself helps user create programs without the need to know the syntax of the used programming lanugage for the PLC. All what the user needs to do is to determine the logic for the controller.
46 | The OpenPLC [Reference page](https://www.openplcproject.com/plcopen-editor/) has a nice tutorial to follow along and learn about PLC
47 |
48 | **Why are we doing the project?**
49 | We want to develop a web version of the OpenPLC Editor to allow users to work on their programs remotely without requiring installation.
50 | You can find more information about the project by visiting the wiki and reading the [Customer Requirement Specification](https://github.com/elian15122000/TINF19C-PLCOpen-Editor/blob/master/PROJECT/CRS/TINF19C_CRS_Team_1_0v1.pdf), [System Requirements Specification](https://github.com/elian15122000/TINF19C-PLCOpen-Editor/wiki/1.-System-Requirements-Specification) and [System Architecture Specification](https://github.com/elian15122000/TINF19C-PLCOpen-Editor/wiki/2.-System-Architecture-Specification) documents.
51 | 52 | **What technologies are we using to make the application?**
53 | The Application runs is written in Angular 8 and runs solely as a front end application. There is no backedend envolved
54 |
55 |
56 | 57 | **Why are we using this template for the project?**
58 | Its required of us to use this template.
59 | However, you only need to navigate to OpenPLC-UI to see our source-code. Everything outside of the that folder is just for Project management purposes. 60 | The Template works as follows: 61 | * OpenPLC-UI: Has all the sourcefiles needed to run the project 62 | * Meeting Minutes: The folder where we save protocols of our meetings 63 | * Executables: Part of the template we have to use, but we don't have any executables so this folder is not necessary 64 | * Resources: The folder where we save all pictures we need to reference in the markdown documents 65 | * Project: The Folder where we keep all organisation related documents. 66 |
67 |
68 | -------------------------------------------------------------------------------- /SOURCE/src/app/models/sfcObjects/sfcJumpStep.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @Filename : sfcJumpStep.ts 3 | * 4 | * @Author : Franziska Kopp 5 | * 6 | * @Last_Modified : 19.05.2021 7 | * 8 | */ 9 | 10 | import { ConnectionPoint, PLCNode } from '../PLCNode'; 11 | 12 | 13 | export class SfcJumpStep { 14 | public xml: any; 15 | public localId: string; 16 | public height = 20; 17 | public width = 20; 18 | public targetName = ''; 19 | public connectionPointIn: {x: number, y: number, refLocalID: string, formalParameter: string} = {x: 0, y: 0, refLocalID: '', formalParameter: ''}; 20 | public position: {x: 0, y: 0}; 21 | public node: PLCNode = {id: null, label: null, type: null, connectionPoints: null}; 22 | 23 | // check if imported xml ist empty, then create xml, otherwise reads relevant values of xml- file 24 | constructor(xmlJumpStep: any) { 25 | if (xmlJumpStep === '') { 26 | this.createXML(); 27 | } else { 28 | this.xml = xmlJumpStep; 29 | if (xmlJumpStep.getAttribute('localId') !== undefined) { 30 | this.localId = xmlJumpStep.getAttribute('localId'); 31 | } 32 | if (xmlJumpStep.getAttribute('height') !== undefined) { 33 | this.height = xmlJumpStep.getAttribute('height'); 34 | } 35 | if (xmlJumpStep.getAttribute('width') !== undefined) { 36 | this.width = xmlJumpStep.getAttribute('width'); 37 | } 38 | if (xmlJumpStep.getAttribute('targetName') !== undefined) { 39 | this.targetName = xmlJumpStep.getAttribute('targetName'); 40 | } 41 | if ( xmlJumpStep.getElementsByTagName('connectionPointIn') !== undefined) { 42 | const connectionPointIn = xmlJumpStep.getElementsByTagName('connectionPointIn')[0]; 43 | if (connectionPointIn.getElementsByTagName('relPosition') !== undefined) { 44 | const position = connectionPointIn.getElementsByTagName('relPosition')[0]; 45 | this.connectionPointIn.x = position.getAttribute('x'); 46 | this.connectionPointIn.y = position.getAttribute('y'); 47 | } 48 | if (connectionPointIn.getElementsByTagName('connection')[0] !== undefined) { 49 | const connection = connectionPointIn.getElementsByTagName('connection')[0]; 50 | this.connectionPointIn.refLocalID = connection.getAttribute('refLocalId'); 51 | this.connectionPointIn.formalParameter = connection.getAttribute('formalParameter'); 52 | } 53 | } 54 | if (xmlJumpStep.getElementsByTagName('position') !== undefined) { 55 | const position = xmlJumpStep.getElementsByTagName('position')[0]; 56 | this.position = {x: position.getAttribute('x'), y: position.getAttribute('y')}; 57 | } 58 | } 59 | // values that are relevant for illustration are written into nodes 60 | this.node.id = this.localId; 61 | this.node.type = 'default'; 62 | const newConnectionPointIn: ConnectionPoint = { 63 | type: 'IN', 64 | sourceId: this.connectionPointIn.refLocalID, 65 | targetId: this.localId, 66 | edgeId: null 67 | }; 68 | this.node.connectionPoints.push(newConnectionPointIn); 69 | 70 | } 71 | // creates a default xml-file for the object 72 | createXML(): void{ 73 | const xmlString = '
4 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
157 |
158 |
159 |
--------------------------------------------------------------------------------
/SOURCE/src/app/models/sfcObjects/sfcMacroStep.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @Filename : sfcMacroStep.ts
3 | *
4 | * @Author : Franziska Kopp
5 | *
6 | * @Last_Modified : 19.05.2021
7 | *
8 | */
9 |
10 | import {ConnectionPoint, PLCNode} from '../PLCNode';
11 |
12 | export class SfcMacroStep {
13 | public xml: any;
14 | public localId: string;
15 | public height = 20;
16 | public width = 20;
17 | public name = '';
18 | public connectionPointIn: {x: 0, y: 0, refLocalId: '', formalParameter: string};
19 | public connectionPointOut: {x: 0, y: 0, refLocalId: '', formalParameter: string};
20 | public position: {x: 0, y: 0};
21 | public node: PLCNode = {id: null, label: null, type: null, connectionPoints: null};
22 |
23 | // check if imported xml ist empty, then create xml, otherwise reads relevant values of xml- file
24 | constructor(xmlMacroStep: any) {
25 | if (xmlMacroStep === '') {
26 | this.createXML();
27 | } else {
28 | this.xml = xmlMacroStep;
29 | if (xmlMacroStep.getAttribute('localId') !== undefined) {
30 | this.localId = xmlMacroStep.getAttribute('localId');
31 | }
32 | if (xmlMacroStep.getAttribute('height') !== undefined) {
33 | this.height = xmlMacroStep.getAttribute('height');
34 | }
35 | if (xmlMacroStep.getAttribute('width') !== undefined) {
36 | this.width = xmlMacroStep.getAttribute('width');
37 | }
38 | if (xmlMacroStep.getAttribute('name') !== undefined) {
39 | this.name = xmlMacroStep.getAttribute('name');
40 | }
41 | if (xmlMacroStep.getElementsByTagName('position') !== undefined) {
42 | const position = xmlMacroStep.getElementsByTagName('position')[0];
43 | this.position = {x: position.getAttribute('x'), y: position.getAttribute('y')};
44 | }
45 | if (xmlMacroStep.getElementsByTagName('connectionPointIn') !== undefined) {
46 | for (const item of xmlMacroStep.getElementsByTagName('connectionPointIn')) {
47 | const relPos = item.getElementsByTagName('relPosition');
48 | if (relPos[0] !== undefined) {
49 | this.connectionPointIn.x = relPos[0].getAttribute('x');
50 | this.connectionPointIn.y = relPos[0].getAttribute('y');
51 | }
52 | if (item.getElementsByTagName('connection')[0] !== undefined) {
53 | const connection = item.getElementsByTagName('connection')[0];
54 | this.connectionPointIn.refLocalId = connection.getAttribute('refLocalId');
55 | this.connectionPointIn.formalParameter = connection.getAttribute('formalParameter');
56 | }
57 |
58 | }
59 | }
60 | if (xmlMacroStep.getElementsByTagName('connectionPointOut') !== undefined) {
61 | for (const item of xmlMacroStep.getElementsByTagName('connectionPointOut')) {
62 | const relPos = item.getElementsByTagName('relPosition');
63 | if (relPos[0] !== undefined) {
64 | const outX = relPos[0].getAttribute('x');
65 | const outY = relPos[0].getAttribute('y');
66 | this.connectionPointOut.x = outX;
67 | this.connectionPointOut.y = outY;
68 | }
69 | if (item.getElementsByTagName('connection')[0] !== undefined) {
70 | const connection = item.getElementsByTagName('connection')[0];
71 | this.connectionPointOut.refLocalId = connection.getAttribute('refLocalId');
72 | this.connectionPointOut.formalParameter = connection.getAttribute('formalParameter');
73 | }
74 | }
75 | }
76 | }
77 | // values that are relevant for illustration are written into nodes
78 | this.node.id = this.localId;
79 | this.node.label = '';
80 | this.node.type = 'default';
81 | const newConnectionPointIn: ConnectionPoint = {
82 | type: 'IN',
83 | sourcePoint: 'IN',
84 | sourceId: this.connectionPointIn.refLocalId,
85 | targetId: this.localId,
86 | edgeId: null
87 | };
88 | const newConnectionPointOut: ConnectionPoint = {
89 | type: 'OUT',
90 | sourcePoint: 'OUT',
91 | sourceId: this.connectionPointOut.refLocalId,
92 | targetId: this.localId,
93 | edgeId: null
94 | };
95 | this.node.connectionPoints.push(newConnectionPointIn);
96 | this.node.connectionPoints.push(newConnectionPointOut);
97 | }
98 | // creates a default xml-file for the object
99 | createXML(): void {
100 | const xmlString = '
5 |
6 |
7 |
8 |
72 |
73 |
74 |
75 |
9 |
10 |
11 |
12 |
13 |
55 | 56 |
58 |
59 | 60 | 61 | 62 | 63 | 64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
14 |
15 |
50 |
51 |
52 |
53 |
54 | No list existing... Project Overview
16 | 17 |Project: {{projectName}}
18 | 19 | 20 | 21 |
22 | {{pou}}
23 |
24 |
25 | 26 | 27 | 28 | 46 |
47 |
48 |
49 | 25 | 26 | 27 | 28 | 46 |
55 | 56 |
58 |
59 | 60 | 61 | 62 | 63 | 64 |
12 |
16 |
17 |
18 | Welcome to PLCopen-Editor
13 |PLCopen is an organization in the field of industrial control technology.
This can be developed
14 | using our web editor with the help of building blocks and both imported and exported in XML format.
19 |
55 |
56 |
57 |
59 |
60 |
62 |
63 |
64 |
65 |
66 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
110 |
111 |
112 |
113 |
114 |
141 |
142 |
--------------------------------------------------------------------------------
/SOURCE/src/app/models/commonObjects/commonActionBlock.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @Filename : commonActionBlock.ts
3 | *
4 | * @Author : Franziska Kopp
5 | *
6 | * @Last_Modified : 19.05.2021
7 | *
8 | */
9 |
10 | // import {PLCNode} from '@swimlane/ngx-graph';
11 | import { ConnectionPoint, PLCNode } from '../PLCNode';
12 |
13 | export class CommonActionBlock{
14 | public xml: any;
15 | public localId: string;
16 | public height = 20;
17 | public width = 20;
18 | public negated = false;
19 | public position: {x: 0, y: 0};
20 | public actionRelPosition: {x: 0, y: 0};
21 | public actionReferenceName = '';
22 | public actionLocalId: number;
23 | public actionQualifier: string;
24 | public actionHeight = 20;
25 | public actionWidth = 20;
26 | public actionDuration = '';
27 | public actionIndicator = '';
28 | public connectionPointIn: {x: number, y: number, refLocalId: string, formalParameter: string};
29 | public PLCNode: PLCNode = {id: null, label: null, type: null, connectionPoints: null};
30 |
31 | // check if imported xml ist empty, then create xml, otherwise reads relevant values of xml- file
32 | constructor(xmlCommonActionBlock: any) {
33 | if (xmlCommonActionBlock === ''){
34 | this.createXML();
35 | } else {
36 | this.xml = xmlCommonActionBlock;
37 | if (xmlCommonActionBlock.getAttribute('localId') !== undefined) {
38 | this.localId = xmlCommonActionBlock.getAttribute('localId');
39 | }
40 | if (xmlCommonActionBlock.getAttribute('height') !== undefined) {
41 | this.height = xmlCommonActionBlock.getAttribute('height');
42 | }
43 | if (xmlCommonActionBlock.getAttribute('width') !== undefined) {
44 | this.width = xmlCommonActionBlock.getAttribute('width');
45 | }
46 | if (xmlCommonActionBlock.getAttribute('negated') !== undefined) {
47 | this.negated = xmlCommonActionBlock.getAttribute('negated');
48 | }
49 | if (xmlCommonActionBlock.getElementsByTagName('position') !== undefined) {
50 | const position = xmlCommonActionBlock.getElementsByTagName('position')[0];
51 | this.position = {x: position.getAttribute('x'), y: position.getAttribute('y')};
52 | }
53 | if (xmlCommonActionBlock.getElementsByTagName('connectionPointIn') !== undefined) {
54 | for (const item of xmlCommonActionBlock.getElementsByTagName('connectionPointIn')) {
55 | const relPos = item.getElementsByTagName('relPosition');
56 | let inX: number;
57 | let inY: number;
58 | let refId = '';
59 | let formalParam = '';
60 |
61 | if (relPos[0] !== undefined) {
62 | inX = relPos[0].getAttribute('x');
63 | inY = relPos[0].getAttribute('y');
64 | }
65 | if (item.getElementsByTagName('connection')[0] !== undefined) {
66 | const connection = item.getElementsByTagName('connection')[0];
67 | refId = connection.getAttribute('refLocalId');
68 | formalParam = connection.getAttribute('formalParameter');
69 | }
70 | this.connectionPointIn = {x: inX, y: inY, refLocalId: refId, formalParameter: formalParam};
71 | }
72 | }
73 | if (xmlCommonActionBlock.getElementsByTagName('action') !== undefined) {
74 | for (const item of xmlCommonActionBlock.getElementsByTagName('action')) {
75 | let i = 0;
76 | const relPos = item.getElementsByTagName('relPosition');
77 | if (relPos[0] !== undefined) {
78 | const inX = relPos[0].getAttribute('x');
79 | const inY = relPos[0].getAttribute('y');
80 | this.actionRelPosition = {x: inX, y: inY};
81 | }
82 | const ref = item.getElementsByTagName('reference');
83 | if (ref[0] !== undefined) {
84 | this.actionReferenceName = ref[0].getAttribute('name');
85 | }
86 | const action = xmlCommonActionBlock.getElementsByTagName('action');
87 | this.actionQualifier = action[i].getAttribute('qualifier');
88 | this.actionHeight = action[i].getAttribute('height');
89 | this.actionWidth = action[i].getAttribute('width');
90 | this.actionLocalId = action[i].getAttribute('localId');
91 | this.actionDuration = action[i].getAttribute('duration');
92 | this.actionIndicator = action[i].getAttribute('indicator');
93 | i += 1;
94 | }
95 |
96 | }
97 | }
98 | // values that are relevant for illustration are written into nodes
99 | this.PLCNode.id = this.localId;
100 | this.PLCNode.label = '';
101 | this.PLCNode.type = 'default';
102 | const newConnectionPointIn: ConnectionPoint = {
103 | type: 'IN',
104 | sourcePoint: 'IN',
105 | sourceId: this.connectionPointIn.refLocalId,
106 | targetId: this.localId,
107 | edgeId: null
108 | };
109 | this.PLCNode.connectionPoints.push(newConnectionPointIn);
110 | }
111 |
112 | // creates a default xml-file for the object
113 | createXML(): void{
114 | const xmlString = '
20 |
52 |
53 |
21 |
30 |
22 |
24 | New Project
23 |
25 |
26 | 28 |
29 | Get started with a new project.
It's completely free!
26 | 28 |
31 |
41 |
32 |
34 | Open Project
33 |
35 |
40 | Open your existing XML project and continue working
It's completely free!
42 |
51 |
43 |
45 | User Manual
44 |
46 |
50 | Read our user manual if you don't know further.
We'll help you!