Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | 111x 2x 2x 2x 1x 1x 1x 1x 1x 1x 3x 3x 3x 1x 1x 1x 3x 2x 2x 2x 109x | import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Canvas } from '../../models/canvas';
import { FormsModule } from '@angular/forms';
import { TextareaModule } from 'primeng/textarea';
import { PID } from '../../models/pid';
@Component({
selector: 'app-pid-designer',
imports: [TextareaModule, FormsModule],
templateUrl: './pid-designer.component.html',
styleUrl: './pid-designer.component.scss'
})
export class PidDesignerComponent implements OnInit {
@ViewChild('pidCanvas', { static: true }) pidCanvas!: ElementRef<HTMLCanvasElement>;
@ViewChild('jsonEditorContainer', { static: true }) editorContainer!: ElementRef;
jsonPid: any = {}; // eslint-disable-line @typescript-eslint/no-explicit-any
pid: PID;
text: string = "";
canvas: Canvas;
error: string = "";
private context!: CanvasRenderingContext2D;
ngOnInit(): void {
this.error = "";
const yoffset = 0.3;
const size = 0.2;
this.jsonPid = {
"components": [
{ "class": "flange", "size": size, "position": { "x": 0, "y": 0 } },
{ "class": "valve", "size": size, "position": { "x": 4, "y": 2 }, "horizontal": false },
{ "class": "vessel", "height": 3, "width": 2, "position": { "x": 4, "y": 5 } },
{ "class": "flange", "size": size, "position": { "x": 0, "y": 9 } },
{ "class": "valve", "size": size, "position": { "x": 2, "y": 10 }, "horizontal": false },
{ "class": "flange", "size": size, "position": { "x": 9, "y": 1 } },
{ "class": "flange", "size": size, "position": { "x": 9, "y": 2 } },
],
"pipes": [
{ "start": 1, "end": 2 },
{ "start": 0, "end": 9 },
{ "start": 1, "end": 9, "horizontal": false, "middle": false },
{ "start": 9, "end": 10 },
{ "start": 10, "end": 5 },
{ "start": 10, "end": 6 },
{ "start": 3, "end": 4, "middle": false },
{ "start": 3, "end": 2, "middle": false },
],
"sensors": [
],
"tap_sensors": [
{ "signal_id": "4b7f1ba28a31.OPR003", "position": { "x": 6, "y": 4 }, 'symbol': 'PT', 'unit': 'bar', 'y_offset': 0 },
{ "signal_id": "4b7f1ba28a31.OLR001", "position": { "x": 6, "y": 5 }, 'symbol': 'LT', 'unit': 'bar', 'y_offset': 0 },
{ "signal_id": "4b7f1ba28a31.OTR002", "position": { "x": 6, "y": 1 }, 'symbol': 'TT', 'unit': 'bar', 'y_offset': yoffset },
{ "signal_id": "4b7f1ba28a31.OPR002", "position": { "x": 7, "y": 1 }, 'symbol': 'PT', 'unit': 'bar', 'y_offset': yoffset },
{ "signal_id": "4b7f1ba28a31.OPR002", "position": { "x": 7, "y": 1 }, 'symbol': 'PT', 'unit': 'bar', 'y_offset': yoffset },
{ "signal_id": "4b7f1ba28a31.OTR003", "position": { "x": 3, "y": 9 }, 'symbol': 'TT', 'unit': 'bar', 'y_offset': yoffset },
]
};
this.text = JSON.stringify(this.jsonPid, null, 4);
this.updatePid();
}
updatePid() {
this.error = "";
try {
this.jsonPid = JSON.parse(this.text);
}
catch (error) {
Eif (error instanceof SyntaxError) { // check if it's a SyntaxError
this.error = error.message; // store the error message in a string variable
} else {
console.error('Unknown error occurred:', error);
}
this.jsonPid = {};
}
if (Object.keys(this.jsonPid).length !== 0) {
this.pid = PID.deserialize(this.jsonPid);
this.context = this.pidCanvas.nativeElement.getContext('2d')!;
this.canvas = new Canvas(this.context, this.pid);
}
}
}
|