OpenSCD Plugin: Supervision Editor

Table of Contents

• 1. What is this?
  • 1.1. Features
• 2. How to use?
  • 2.1. Online Using the Latest open-scd-core
  • 2.2. Locally for testing
  • 2.3. As part of the OpenSCD distribution
  • 2.4. As part of your own distribution
• 3. Development
  • 3.1. Linting and formatting
  • 3.2. Testing with Web Test Runner
  • 3.3. Tooling configs
  • 3.4. Local Demo with web-dev-server
• 4. Credit

1. What is this?

This plugin is intended to allow a user to add, remove and configure IEC 61850 GOOSE and SMV supervisions:

• This is a plugin for open-scd-core, the core editor engine for OpenSCD.

• This plugin is a web component and follows the open-wc recommendations.

• This plugin uses the Apache License and is intended for you to use, study, share and improve.

Try it out online!

Figure 1. Supervision Editor Plugin

Feel free to log issues to request fixes, improvements or new features.

1.1. Features

• Supports GOOSE and SMV

• Will instantiate supervisions if possible (if valImport=true and valKind=RO or valKind=Conf on the first LGOS/LSVS instance or the datatype)

• Allows removals of supervision elements

2. How to use?

2.1. Online Using the Latest open-scd-core

2.1.1. Using a URL

Open SCD core allows plugins to be loaded from a URL.

You can click on this link to trial this plugin.

In this view it is without theming and only presents this plugin along with the open and save plugins.

2.1.2. Manually

1. The latest core is available at https://openscd.github.io/open-scd/.

2. Go to Menu › Add plugins…​

3. Select Cancel - this is an editor plugin.

4. Select OK to required a loaded document.

5. Choose a plugin name of 'Supervision'.

6. Choose a plugin icon of 'link'

7. Provide a plugin source URI of: https://danyill.github.io/oscd-supervision/oscd-supervision.js

8. Click OK on the summary, it should indicate the parameters previously entered.

9. Open a file and enjoy!

2.2. Locally for testing

1. Clone this project:

   $ git clone https://github.com/danyill/oscd-supervision

2. Install dependencies

   $ npm i

3. Start up a demo server

   $ npm run start

4. Open in your browser locally at http://localhost:8000/demo/

2.3. As part of the OpenSCD distribution

Tip	OpenSCD is transitioning to use of open-scd-core, these instructions will require updating at the end of this transition.

Important

Currently the reactive update cycle in OpenSCD doesn’t optimally support this plugin’s behaviour — it scrolls to the top of lists after a subscription is made or one of the window panes may go blank. This is a known issue and under investigation.

1. Open your OpenSCD distribution or use https://openscd.github.io.

2. Create a custom extension by going to menu › Extensions › Add Custom Extension.

3. Enter the name 'Supervision', select 'Editor tab' and enter https://danyill.github.io/oscd-supervision/oscd-supervision.js as the URL.

   This is the URL of the bundle built by CI and is always the latest pre-release version of this plugin.

   

   Figure 2. OpenSCD Add Custom Extension Screen

4. Click on Add.

5. Until OpenSCD is fully transitioned to open-scd-core, a conversion plugin is also required to interface between the old and new APIs.

6. Create another custom extension by going to menu › Extensions › Add Custom Extension.

7. Enter the name 'Action Translate', select 'Menu entry' and enter https://jakobvogelsang.github.io/oscd-action-translate/oscd-action-translate.js as the URL.

   This is the URL of the bundle built by CI and is always the latest pre-release version of this plugin.

8. You should now be able to scroll across in the menu-bar and find a tab, "Supervision"

   Tip	If there are too many editor plugin, hold down shift and wheel-mouse up and down to scroll them easily.

2.4. As part of your own distribution

2.4.1. Within the current OpenSCD distribution

1. Within the current OpenSCD distribution, plugins are stored in the public/js/plugins.js folder. Each plugin appears in the following form:

   {
       name: 'Supervision', // (1)
       src: 'https://danyill.github.io/oscd-supervision/oscd-supervision.js', //  (2)
       icon: 'ecg', // (3)
       default: true, // (4)
       kind: 'editor', // (5)
       requireDoc: true, // (6)
       position: 'middle' // (7)
     }

   1. Name of the plugin which appears in the editor menu at top of screen

   2. URL which can be a local or remote resource. For a local resource, begins without a forward slash, e.g. plugins/oscd-supervision/dist/oscd-supervision.js. In this case what is shown is loading a plugin from the build process.

   3. A material icon, see others at Material Symbols and Icons

   4. Whether the plugin is enabled by default or has to be enabled in the plugins menu

   5. The type of plugin, either menu or editor. This is an editor plugin.

   6. Whether a document must be loaded for this plugin to be available

   7. A string, either top, middle or bottom to give a location in the menu. Otherwise inferred from the order in the file relative to other plugins.

2. You need to copy an entry like the above, ensure the src URL resolves and the plugin should be loaded when the distribution is built.

3. If you are building locally you likely need to run an npm run bundle command in each plugin to make the dist folder, containing a single JavaScript file with the plugin available to OpenSCD.

2.4.2. Within an OpenSCD core distribution

Within an OpenSCD core distribution, plugins are also loaded from a json file with a slightly different schema.

1. Typically the distribution will be served from a static web page and within the web page there will be a plugins property declared on an open-scd object, for instance:

   link:demo/index.html[role=include]

2. This plugin is an editor plugin, editor plugins are an array of JSON of the following form:

   {
     "name": "Supervision", // (1)
     "translations": { // (2)
       "de": "Überwachung",
       "pt":"Supervisão"
     },
     "icon": "link", // (3)
     "active": true, // (4)
     "requireDoc": true, // (5)
     "src": "/dist/oscd-supervision.js" // (6)
   }

   1. Name of the plugin which appears in the editor menu at top of screen

   2. Translations of the plugin name as required using standard locale names.

   3. A material icon, see others at Material Symbols and Icons

   4. Whether the plugin is enabled by default or has to be enabled in the plugins menu

   5. Whether a document must be loaded for this plugin to be available

   6. URL which can be a local or remote resource. For a local resource, begins with a forward slash, e.g. plugins/oscd-supervision/dist/oscd-supervision.js. In this case what is shown is loading a plugin from the internet using the continuous integration build process.

3. You need to copy an entry like the above, ensure the src URL resolves and the plugin should be loaded when the distribution is built.

4. If you are building locally you likely need to run an npm run bundle command in each plugin to make the dist folder, containing a single JavaScript file with the plugin available to OpenSCD.

3. Development

3.1. Linting and formatting

To scan the project for linting and formatting errors, run

npm run lint

To automatically fix linting and formatting errors, run

npm run format

3.2. Testing with Web Test Runner

To execute a single test run:

npm run test

To run the tests in interactive watch mode run:

npm run test:watch

3.3. Tooling configs

For most of the tools, the configuration is in the package.json to reduce the number of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

3.4. Local Demo with web-dev-server

To run a local development server that serves the basic demo located in demo/index.html

npm start

4. Credit

This plugin was refactored from base code in OpenSCD and relies on the code, architecture and review effort of multiple people other than the authors of this plugin, including:

• Jakob Vogelsang

• Juan Munoz

© 2023 OpenSCD Daniel Mulholland