Custom Module Example

In this tutorial you will create a custom center panel module for the core player that displays a single link to the selected asset's dzi (deep zoom image) file.

First, clone the Wellcome Player repository (master branch) somewhere on your file system.

Open a terminal on the cloned directory and run npm install to install all requisite node modules.

Open the terminal on the src/modules directory and clone example-filelinkcenterpanel-module into it.

Let's examine filelinkCenterPanel.ts. You can see that a number of modules are imported, baseCenter imports the base centerPanel class in coreplayer-shared-module. This file sets up $title and $content elements to place the asset title and contents in. The resize() method (triggered by the baseView class which this extends) takes care of scaling the $title and $content elements to fill the available vertical and horizontal space.

Back in filelinkCenterPanel.ts, we can see that a JQuery property $link is created and appended to $content. The link text is being set using this.content.fileLink. This is calling the content property of the baseView class, which sets up a reference to the extension.config file that has been configured for this extension. In src/extensions/coreplayer-seadragon-extension/extension.config, add a new section to modules named filelinkCenterPanel. Give it a content node as per the other modules and a property named fileLink with a value of "Click Here!".

Back in filelinkCenterPanel.ts, we can see that the first line of the create() method this.setConfig('filelinkCenterPanel'); is setting up a reference to this named module in extension.config. We can now use this.content to access these named properties.

The contents of $title are being set by calling this.extension.provider.getTitle(). The extension's provider can be accessed from within a module via this.provider which is set up in baseView in the same manner as this.content.

We can see in the create() method that the static extension.Extension.OPEN_DZI event is being subscribed to, which when triggered takes the uri parameter and sets $link's href attribute to it.

In css/styles.less you can see that the anchor tag's color is being set to purple. Less files can be created for each individual module and are combined at compile time into a single .css file for the extension.

In src/extensions/coreplayer-seadragon-extension/extension.ts, change import center = require("../../modules/coreplayer-seadragoncenterpanel-module/seadragonCenterPanel"); to import center = require("../../modules/example-filelinkcenterpanel-module/filelinkCenterPanel"); and in the createModules() method, change this.centerPanel = new center.SeadragonCenterPanel(shell.Shell.$centerPanel); to this.centerPanel = new center.FileLinkCenterPanel(shell.Shell.$centerPanel);.

Open the terminal on the repository root directory and run grunt. This will compile your new module.