My first plugin (Javascript)

Panotour - Advanced - Creating a custom control bar > Panotour - Advanced - Skins Folder > Panotour - Advanced - Different interfaces for different devices > My first plugin (KrPano script) > My first plugin (Javascript)

Intro

In this case we're going to redo the last example, but this time, we'll do it in Javascript.
The goal is the same, we'll display a 2D colored square, customizable from the PTP interface.

The context

We are in a HTML page, with a KrPano player (Flash or HTML5), and our plugin must be displayed on top of this player.
Before Javascript took action, we have to wait that KrPano player is ready and that all XML files are completely loaded.
After the loading, we'll have to be able to communicate between KrPano and our JS scripts.
For this, we have a file named KolorBootstrap.js that give us the possibility to communicate with KrPano with JS.
It is in this file that we'll inject our JS scripts templates.

What we need

Our plugin is composed of four files :

• plug_info.xml which is a description of the plugin interface and references other template files.
• superSquare.tmpl which is a XML template file.
• superSquareBSLE.tmpl which is a JS template.
• superSquareBS.tmpl wich is another JS template.

What we already have

In all cases you'll have some libraries loaded by default :

• jQuery
• jQueryUI
• Utility library from Kolor, named KolorTools.js
• The KolorBootstrap.js that contains some functions to communicate between KrPano and JS scripts.

The plug_info.xml

Like the previous example in KrPano script, we need a plugin description file : plug_info.xml
In this file are described the elements that'll compose the PTP interface of the plugin.
We'll need three template files for our plugin that are also declared in this file.

<plugin id="myFirstPluginJS" 
	category="tr:Image zone" 
	name="tr:My super square plugin JS (easy)" 
	version="1.0" 
	isGraphical="true" 
	multipleInstance="true" 
	description="tr:A short description of what the plugin does" 
	author="John Doe">
 
	<parameters>
		<position id="myPosition" name="Position" default="topleft" availableValues="topleft,topright,bottomleft,bottomright,bottom,top,left,right,center"/>
		<number id="mySize" name="Size" default="50" maximum="999" />
		<color id="myColor" name="Color" />
	</parameters>
 
	<templates>
		<template url="superSquare.tmpl" />
		<template url="superSquareBS.tmpl"   type="jsbootstrap"/>
		<template url="superSquareBSLE.tmpl" type="jsbootstraploaded"/>
	</templates>
 
</plugin>

The XML template files

In our example, we'll need three template files.

One XML template file, called superSquare.tmpl, in which we'll store the values chosen by the end user in the PTP interface (color, size, ...)
I choose to store these values as options in a XML file to allow advanced user to easily edit their options after the Panotour project generation.
The thing is that we'll have to be able to retrieve these values on the Javascript side to apply options to our superSquare plugin.

<ptplugin name="{{p.id}}" engine="superSquare">
	<settings>
		<option name="position" value="{{ p.myPosition.positionString }}" type="string" />
		<option name="margin_x" value="{{ p.myPosition.x }}" type="int" />
		<option name="margin_y" value="{{ p.myPosition.y }}" type="int" />
		<option name="size" value="{{ p.mySize.value }}" type="int" />
		<option name="color" value="{{ p.myColor.colorRRGGBB }}" type="string" />
		<option name="alpha" value="{{ p.myColor.alpha }}" type="float" />
		<option name="zorder" value="{{ g_zorder }}" type="int" />
	</settings>
</ptplugin>

First JS template, our entry-point

As I said, for the Javascript side, we have two templates to do.
Both will be injected in the KolorBootstrap.js at two different places.

One will be injected in an event handler function that'll be triggered when KrPano and all its XML are loaded.
We call this template BSLE for Boot Strap Loader Event.
Note that in the plug_info.xml this template is declared like this :

<template url="superSquareBSLE.tmpl" type="jsbootstraploaded"/>

This template has only one line of code which is a call to a JS function that'll be in the second JS template.
This is your JS entry-point to the program.
Our template file superSquareBSLE.tmpl looks like this :

addSuperSquare('{{ p.id }}');

Second JS template, our source

The other template will be injected at the bottom end of the KolorBootstrap.js file, we call it BS template.
In this template, there will be the javascript function(s) you need to make your plugin functional.
Note that in the plug_info.xml this template is declared like this :

<template url="superSquareBS.tmpl" type="jsbootstrap"/>

Our second template file superSquareBS.tmpl looks like this :

function addSuperSquare(pPlugID)
{
	//Get the options value that are stored in the XML.
	//We're using getKrValue that is a default KolorBootstrap.js function
	var position = getKrValue("ptplugin["+pPlugID+"].settings.option[position].value", "string");
	var margin_x = getKrValue("ptplugin["+pPlugID+"].settings.option[margin_x].value", "int");
	var margin_y = getKrValue("ptplugin["+pPlugID+"].settings].option[margin_y].value", "int");
	var size = getKrValue("ptplugin["+pPlugID+"].settings.option[size].value", "int");
	var color = getKrValue("ptplugin["+pPlugID+"].settings.option[color].value", "string");
	var alpha = getKrValue("ptplugin["+pPlugID+"].settings.option[alpha].value", "float");
        var order = getKrValue("ptplugin["+pPlugID+"].settings.option[zorder].value", "int");
 
	//create a container for our square
	var squareContainer = document.createElement('div');
	squareContainer.id = pPlugID;
	squareContainer.style.position = 'relative';
        squareContainer.style.zIndex = order;
 
	//create the square
	var square = document.createElement('div');
	square.style.position = 'absolute';
	squareContainer.appendChild(square);
 
	//Add the container of the square to the container of the tour
	jQuery("#panoDIV").prepend(squareContainer);
 
	//Apply color and alpha
	var rgbKolor = ktools.Color.hex2rgb(color);
	jQuery(square).css('background', 'rgba('+rgbKolor[0]+','+rgbKolor[1]+','+rgbKolor[2]+','+alpha+')');
 
	//Apply size
	jQuery(square).css('width', size+'px');
	jQuery(square).css('height', size+'px');
 
	//Calculate the position and apply it
	var windowWidth = jQuery("#panoDIV").width();
	var windowHeight = jQuery("#panoDIV").height();
	var projectedTop = 0;
	var projectedLeft = 0;
 
	//Calculate the position
	switch(position)
	{
		case 'topleft':
			projectedTop =  margin_y;
			projectedLeft = margin_x;
		break;
 
		case 'top':
			projectedTop = margin_y;
			projectedLeft = (windowWidth - size) / 2;
		break;
 
		case 'topright':
			projectedTop = margin_y;
			projectedLeft = windowWidth - size - margin_x;
		break;
 
		case 'right':
			projectedTop = (windowHeight - size) / 2;
			projectedLeft = windowWidth - size - margin_x;
		break;
 
		case 'bottomright':
			projectedTop = windowHeight - size - margin_y;
			projectedLeft = windowWidth - size - margin_x;
		break;
 
		case 'bottom':
			projectedTop = windowHeight - size - margin_y;
			projectedLeft = (windowWidth - size) / 2;
		break;
 
		case 'bottomleft':
			projectedTop = windowHeight - size - margin_y;
			projectedLeft = margin_x;
		break;
 
		case 'left':
			projectedTop = (windowHeight - size) / 2;
			projectedLeft = margin_x;
		break;
 
		case 'center':
			projectedTop = (windowHeight - size) / 2;
			projectedLeft = (windowWidth - size) / 2;
		break;
	}
 
	//apply the position
	jQuery(square).css('top', projectedTop+'px');
	jQuery(square).css('left', projectedLeft+'px');
 
};

BACK TO: Documentation / Panotour Documentation