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 (module-example 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, import baseCenter = require("../coreplayer-shared-module/centerPanel"); 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 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 margin-left is being set to 20px. 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/css/styles.less you can see where the module's .less file is being imported: @import 'example-filelinkcenterpanel-module/css/styles.less';.

In src/extensions/coreplayer-seadragon-extension/extension.ts we can see the the module is being imported here: import center = require("../../modules/example-filelinkcenterpanel-module/fileLinkCenterPanel");, and is being instantiated in the createModules() method: 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.

Now run grunt connect and open a browser on http://localhost:3000 to see the default Biocrats example displaying your new file link module with a "Click Here!" link to the deep zoom image file.