Development environment

Plugins can be developed within the application. The plugins are written in typescript/javascript. The editor knows the definitions of the application api and the used libraries. This way it can give you full code completion support while editing. Saving the data will directly result into a update source. It is best to write and debug code in chrome.

A view examples plugins with one or more widgets can be installed from the “add from web” option.

Publish your plugin

The plugins are stored on github. You can fork te repository an push your own plugin

https://github.com/tijmenvangulik/Ergometerspace/tree/master/data/plugins

You can also send it to me using mail: tijmen@vangulik.org

Monaco editor

To see what is possible open a popup menu. For more info on the editor:

[https://microsoft.github.io/monaco-editor]

To save ctrl S or mac command S. The widgets loaded by the plugin will be refreshed. When you get an typescript error during the save the code will not be saved.

All code is stored in your local storage. Clearing te browser history can remove all your code. It is best to export your code once in a while.

Used frameworks

Java script / type script

Type script reference [http://www.typescriptlang.org]

Included typescript (javascript) definitions:

All API definitions are stored here:

[http://www.vangulik.org/Ergometer/typescripts/]

All definitions can be viewed in the First Application API link. There are some important object which are documented in the following table:

Debugging

It is best to use chrome for debugging. The internal scripts are shown in the source group named (no domain) The name of your plugin will be used as name of the source. You should open an fresh debugger window after you update the script. If you do not do this you will not see your recent changes.

Settings break points in the debugger of the browser does not always work. The workaround is to add the debugger command to a line to stop it. You can add these break points by hand or your can click in the gutter margin. The break points only work if update the script and start a fresh new browser debugger.

You do not need to connect your computer to the ergometer for every test run. On the toolbar there is a button to play test data. Be default it plays back a recording of 100m. You can press the record button to record your own data.

writing widgets

There are a number of examples on writing widgets. All these widgets inherit from the ErgometerWidget or an higher class. It is possible you want to write a widget which is based on an existing div in the html page or you want to dynamically create the div. The ErgometerWidget always creates its own div. The ErgometerWidget is defined the following way:

         class ErgometerWidget  extends dashboard.Widget {
		public initControl() {
			//make a new div within the main control (by default the widgets uses an existing)
			this.controller.$mainControl.append(
				"<div id='"+this.name+"'' ></div>")
			super.initControl();

		}
	}

Widget inheritance

| class | description | |——-|————-| | dashboard.Widget | base widget class | | -> ergometerWidgets.ErgometerWidget |base widget class for all ergometer widgets | | -> -> ergometerWidgets.CanvasWidget |For all widgets which show a animation on a canvas | | -> -> ergometerWidgets.HighChartWidget | For chart widgets | | -> -> -> ergometerWidgets.GaugeWidget | for gauge widgets| | -> -> ergometerWidgets.ValueWidget | for displaying one value | | -> -> -> ergometerWidgets.StrokeValueWidget | for displaying a stroke value | | -> -> -> ergometerWidgets.TrainingValueWidget | for displaying training value |

Utility functions

The main application object contains some useful routines

class ErgometerApp {
  //show an error on top of the page which the user has to click away
  showTopError(messageText : string)
  
  //show an error in the news ticker
  showError(text : string)
  
  //ask for an confirmation with yes, no as ansers
  confirmYesNo(text : string,yesAnswer? : () =>void,noAnswer? : () =>void  ) 

  //ask for a confirm message
  interface ConfirmButtons {
    [name: string] : ()=>void;
 }
 confirm(text : string,buttons : ConfirmButtons    )
}
var app : ErgometerApp;

Some handy utility functions

  module utilities {
    //format to a time value
    function formatTimeValue(value: number, digits: number): string;
    //format a relative date to a time
    function formatRelativeTime(date: Date): string;
    //check if an value is a number
    function isNumber(n): bool;
    //html 5 time out routine needed for animations
    function requestTimeout(fn: any, delay: number);
    //draw an ellipse on a canvas
    function ellipse(context: CanvasRenderingContext2D, cx, cy, rx, ry: number): void;
}

Widgets subscribe them selves to ergometer data events to receive information. This is done on the visible changed method. This way a widget only receives data when it is visible. Ergometer Events are located in the pm3.monitor.pubsubs object.

 	     public visibleChanged() {
	    		    	
	    	if (this.visible) {
	    		pm3.monitor.pubsubs.subStrokeDataUpdate(this, this.strokeDataUpdate);
	    		pm3.monitor.pubsubs.subTrainingDataUpdate(this, this.trainingDataUpdate); 
	    		this.paint();
	    	}
	    	else { 
	    		pm3.monitor.pubsubs.unsubStrokeDataUpdate(this,this.strokeDataUpdate);
	    		pm3.monitor.pubsubs.unsubTrainingDataUpdate(this,this.trainingDataUpdate); 
	    	}
	    	super.visibleChanged();
	    }