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.