ocpn-viz v1.0.1
ocpn-viz-npm
Installation
To install the package, run:
npm install ocpn-viz
Usage
Here is an example of how to use the ocpn-viz package:
(async () => {
const ocpnviz = await import("ocpn-viz")
const ocpn = await ocpnviz.loadOCPNfromJSON("./examples/ba-example.json")
const userConfig = {
direction: "LR",
arcSize: 2,
indicateSourcesSinks: true,
// includedObjectTypes: ['item', 'order', 'car'],
}
const config = ocpnviz.setConfigs(ocpn, userConfig)
const ocpnLayout = await ocpnviz.computeSugiyamaLayout(ocpn, config)
ocpnviz.createObjectColorMap(config, ocpnLayout)
const svg = await ocpnviz.visualizeOCPNLayout(ocpnLayout, config)
await ocpnviz.saveAsSVG(svg, "./testoutput.svg")
await ocpnviz.saveAsPNG(svg, "./testoutput.png", 10)
})()
Functions
loadOCPNfromJSON Loads an OCPN from a JSON file. Parameters:
filePath
(string): The path to the JSON file where the OCPN is stored.
setConfigs Sets the user configurations for the visualization. Parameters:
ocpn
(object): The OCPN object.userConfig
(object): A subset of user configurations that should differ from the default configurations.
computeSugiyamaLayout Computes the Sugiyama layout for the OCPN. Parameters:
ocpn
(object): The OCPN object.config
(object): The user configurations for the visualization.
createObjectColorMap Determines the colors for each object type. Parameters:
config
(object): The user configurations for the visualization.ocpnLayout
(object): The OCPN layout object.
visualizeOCPNLayout Visualizes the OCPN layout. Parameters:
ocpnLayout
(object): The OCPN layout object.config
(object): The user configurations for the visualization.
saveAsSVG Saves the visualization as an SVG file. Parameters:
svg
(object): The SVG object returned by the visualizeOCPNLayout function.filePath
(string): The path to the SVG file where the visualization should be saved.
saveAsPNG Saves the visualization as a PNG file. Parameters:
svg
(object): The SVG object returned by the visualizeOCPNLayout function.filePath
(string): The path to the PNG file where the visualization should be saved.scale
(number): The scale factor for the PNG file which determines the resolution. (1-10 with default 1)
User Configurations
includedObjectTypes An array of object types to include in the visualization.
{
'includedObjectTypes': ['item', 'order', 'car']
}
indicateSourcesSinks A boolean indicating whether to highlight source and sink vertices.
{
'indicateSourcesSinks': true
}
objectAttraction The attraction force between objects. (0-1 with default 0.1)
{
'objectAttraction': 0.55
}
direction The direction of the layout ('TB' for top-bottom, 'LR' for left-right).
{
'direction': 'LR'
}
placeRadius The radius of place vertices.
{
'placeRadius': 20
}
transitionWidth The width of transition vertices.
{
'transitionWidth': 60
}
silentTransitionWidth The width of silent transition vertices.
{
'silentTransitionWidth': 15
}
transitionHeight The height of transition vertices.
{
'transitionHeight': 20
}
layerSep The separation between layers. If direction is 'TB', this determines the vertical separation between layers. If direction is 'LR', this determines the horizontal separation between layers.
{
'layerSep': 100
}
vertexSep The separation between vertices. If direction is 'TB', this determines the horizontal separation between two adjacent vertices. If direction is 'LR', this determines the vertical separation between vertices.
{
'vertexSep': 50
}
typeColorMapping A mapping of object types to colors.
{
'typeColorMapping': {
'item': '#ff0000',
'order': '#00ff00',
'car': '#0000ff'
}
}
transitionColor The color of the transition borders.
{
'transitionColor': '#000000'
}
transitionFillColor The fill color of transition vertices.
{
'transitionFillColor': '#ffffff'
}
transitionTextColor The text color of transition vertices.
{
'transitionTextColor': '#000000'
}
transitionBorderSize The border size of transition vertices.
{
'transitionBorderSize': 1
}
arcSize The size of arcs.
{
'arcSize': 2
}
indicateArcWeight A boolean indicating whether to indicate arc weights. If true, the arc sizes will be proportional to the weights of the arcs. E.g., if an arc has a weight of 2, the arc size will be twice as large as the default arc size.
{
'indicateArcWeight': true
}
indicateVariableArcs A boolean indicating whether to indicate variable arcs. If true, the variable arcs will be drawn as double-lined arcs and have a colored outline in the color of variableArcIndicatorColor.
{
'indicateVariableArcs': true
}
variableArcIndicatorColor The color for variable arc indicators.
{
'variableArcIndicatorColor': '#ff0000'
}
variableArcIndicatorSize The size for variable arc indicators.
{
'variableArcIndicatorSize': 5
}
OCPN Input Format
The input format for the OCPN is a JSON object with the following fields:
- name: The name of the OCPN.
- places: An array of places
- transitions: An array of transitions.
- arcs: An array of arcs.
- properties: An object containing additional properties.
{
"name": "Example OCPN",
"places": [
{
"name": "p1",
"objectType": "item",
"initial": true,
"final": false
},
{
"name": "p2",
"objectType": "item",
"initial": false,
"final": true
}
],
"transitions": [
{
"name": "t1",
"label": "Purchase Item",
"silent": false
}
],
"arcs": [
{
"source": "p1",
"target": "t1",
"weight": 2,
"variable": false,
"properties": {}
},
{
"source": "t1",
"target": "p2",
"weight": 1,
"variable": false,
"properties": {}
}
],
"properties": {
"description": "This is an example OCPN."
}
}
Each place has the following fields:
- name: A unique name of the place.
- objectType: The type of object that the place represents.
- initial: A boolean indicating whether the place is an initial place.
- final: A boolean indicating whether the place is a final place.
{
"name": "p1",
"objectType": "item",
"initial": true,
"final": false
}
Each transition has the following fields:
- name: A unique name of the transition.
- label: The label of the transition.
- silent: A boolean indicating whether the transition is silent.
- properties: An object containing additional properties.
{
"name": "t1",
"label": "Purchase Item",
"silent": false,
"properties": {
"cost": 10
}
}
Each arc has the following fields:
- source: The name of the source place or transition.
- target: The name of the target place or transition.
- weight: The weight of the arc.
- variable: A boolean indicating whether the arc is a variable arc.
- properties: An object containing additional properties.
{
"source": "p1",
"target": "t1",
"weight": 2,
"variable": false,
"properties": {}
}
Example
An example OCPN in JSON format can be found in examples/ocpn1.json.
License
This project was developed as part of a bachelor's thesis at RWTH Aachen University within the PADS group.