KievII

Include KievII via the jspm CDN (with Hammer.js dependency).

 
<script type='text/javascript' src='https://github.jspm.io/EightMedia/hammer.js@1.0.0/dist/hammer.js'> </script>
<script type='text/javascript' src='https://github.jspm.io/janesconference/KievII@0.6.0/kievII.js'> </script>
    			        	 

Use KievII in a hya.io plugin.

 
define(['github:janesconference/KievII@0.6.0/kievII', ...], function(K2) { ... });
 

Use KievII with the SystemJS module loader.

 
System.import('github:janesconference/KievII@0.6.0/kievII').then(function (K2) { ... });
 

Create a KievII UI

 
// Get your Canvas Element ID	        		
var targetCanvas = document.getElementById("your_canvas");
// Create a new KievII UI
var ui = new K2.UI ({type: 'CANVAS2D', target: targetCanvas});
    	        	 

Add an Element to the UI

 
// Set the element arguments
var ElementArgs = {
    ID: 'elementID',
    /* Set the element-specific arguments here (...) */
    onValueSet: function (slot, value, element) {
        /* element callback, called when a slot gets changed */
        ui.refresh();
    }
};
// Add element to the UI
ui.addElement(new K2.UIElement(gaugeArgs, {zIndex: ... }));
                     

hint See the examples page for a quick overview of the available elements and techniques

Remove an Element from the UI

 
// Remove element from the UI
ui.removeElement('elementID');