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.

###Set up

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.

###Structure

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.

###Content

Back in fileLinkCenterPanel.ts, you 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' you can see a section in 'modules' named 'fileLinkCenterPanel'. This has a 'content' node as per the other modules and a property named 'fileLink' with a value of "Click Here!".

Back in fileLinkCenterPanel.ts, you 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. You can use this.content to access these named properties.

###Provider

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.

###Events

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

###Styles

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';

###Add to Extension

In 'src/extensions/coreplayer-seadragon-extension/extension.ts' you 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);

###Build and Run

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.