From 5bba1425a0d7cc25b981c65f759d7ae654abfccb Mon Sep 17 00:00:00 2001 From: Nora Kristiansen <106915799+NoraKri@users.noreply.github.com> Date: Tue, 3 Dec 2024 13:47:40 +0100 Subject: [PATCH 1/3] add graphical format example --- www/GraphicalFormatExample.md | 86 +++++++++++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 www/GraphicalFormatExample.md diff --git a/www/GraphicalFormatExample.md b/www/GraphicalFormatExample.md new file mode 100644 index 0000000..4a0b6e6 --- /dev/null +++ b/www/GraphicalFormatExample.md @@ -0,0 +1,86 @@ +# Format requirement for graphical rendering frontend +This document outlines the requirements for the format to be passed to the frontend. + +The graphical view of a P&ID can be broken into two parts: +- A symbol with an SVG +- A line + +## Symbols + +Symbols require: +- **Identificator** + - A unique IRI calculated in the backend +- **Position** + - An object containing x and y coordinates, plus rotation (between 0 and 360) +- **SVG data** + - A SVG symbol with text already placed in the correct spots. The NOAKADEXPI symbols come with metadata and a svg tag wrapping a g tag, these can be removed, and the g tag and its contents can be returned. + +``` +{ + "id": "https://assetid.equinor.com/plantx#PressureVessel-1", + "position": { + "x": 390, + "y": 210, + "rotation": 0 + }, + "svg": "1           A" +} +``` + +## Lines + +Both pipes and signals are lines. What differentiates them is if they are dashed or not. + +Lines require: +- **Identificator** + - A unique IRI calculated in the backend +- **An array of x and y-coordinates** + - Each coordinate represents a point, and a line will be drawn between points from the order they are given. A line will be drawn between point 1 and 2, then 2 and 3, etc. +- **stroke-dasharray:** + - Whether the line is dashed or not. Can be either "none" or "1,4". + +``` +{ + "id": "https://assetid.equinor.com/plantx#GateValve-5-node2-connector", + "coordinates": [ + { + "x": 646, + "y": 188 + }, + { + "x": 646, + "y": 180 + }, + { + "x": 412, + "y": 180 + } + ], + "stroke-dasharray": "none" +} +``` + +## Full JSON structure +The JSON file should contain two arrays, one for symbols and one for lines. The arrays will contain the individual symbols and lines, like this: + +``` +{ + "diagramName": "Test P&ID", + "symbols": [ + { + ... data for symbol 1 in here + }, + { + ... data for symbol 2 in here + } + ], + "lines": [ + { + ... data for line 1 in here + }, + { + ... data for line 2 in here + } + ] +} +``` \ No newline at end of file From 28110140db18ac1f21e84c129ffd79d01ca86daf Mon Sep 17 00:00:00 2001 From: Nora Kristiansen <106915799+NoraKri@users.noreply.github.com> Date: Tue, 3 Dec 2024 15:09:53 +0100 Subject: [PATCH 2/3] update style field --- www/GraphicalFormatExample.md | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/www/GraphicalFormatExample.md b/www/GraphicalFormatExample.md index 4a0b6e6..5f34e41 100644 --- a/www/GraphicalFormatExample.md +++ b/www/GraphicalFormatExample.md @@ -36,8 +36,10 @@ Lines require: - A unique IRI calculated in the backend - **An array of x and y-coordinates** - Each coordinate represents a point, and a line will be drawn between points from the order they are given. A line will be drawn between point 1 and 2, then 2 and 3, etc. -- **stroke-dasharray:** - - Whether the line is dashed or not. Can be either "none" or "1,4". +- **Style** + - Whether the line is dashed or not. There are several different line types specified. If the line is solid, set to "none", if regular dashed line, set to "1,4" etc. + - How wide the stroke is: a double. + - Stroke color. RGB value, or a color name. "black" or "rgb(255,255,255)". ``` { @@ -56,7 +58,11 @@ Lines require: "y": 180 } ], - "stroke-dasharray": "none" + "style": { + "stroke-dasharray": "none", + "stroke-width": "1,4", + "stroke": "rgb(255,255,255)" + } } ``` From fb8f61205a11126dbf8b8e6fe92daca5c740f689 Mon Sep 17 00:00:00 2001 From: Nora Kristiansen <106915799+NoraKri@users.noreply.github.com> Date: Wed, 4 Dec 2024 09:55:32 +0100 Subject: [PATCH 3/3] include viewbox data in json structure --- www/GraphicalFormatExample.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/www/GraphicalFormatExample.md b/www/GraphicalFormatExample.md index 5f34e41..e4eadfa 100644 --- a/www/GraphicalFormatExample.md +++ b/www/GraphicalFormatExample.md @@ -72,6 +72,16 @@ The JSON file should contain two arrays, one for symbols and one for lines. The ``` { "diagramName": "Test P&ID", + "extent": { + "min": { + "x": 100, + "y": 100 + }, + "max": { + "x": 200, + "y": 200 + } + }, "symbols": [ { ... data for symbol 1 in here