UAVideo Player  Version 2.1.23
UAVideo Player Plugins

UAVideo Player Plugins are software components that add a specific functionality to the UAVideo Player application. UAVideo Player Plugins are web based applications that can be developped by the user independently. Implementing Plugin Template methods and events allows an easy integration with the application. UAVideoPlayer application provides an updated metadata upon its arrival to the plugin for custom processing and presentation.

Plugin location

Plugins are located in C:/ProgramData/ImpleoTV/UAVideoPlayer/Plugins/ directory. To install your plugin, create a subfolder under Plugins and copy corresponding files. UAVideo Player will scan this folder on it's next launch.

Developing a custom UAVideo Player plugin

This is an example of simple UAVideoPlayer plugin development. We will use an awesome Flight Indicators jQuery plugin. It will display and update with current telemetry values the following instruments:

FlightIndicators.png
Figure 1. Flight Indicators.

For more information on the Flight Indicators please visit Flight Indicators jQuery plugin.

Creating Package file.

First, we have to create a plugin description file package.json. The package file (json based) describes the plugin and contains some information required for its integration inside the UAVideoPlayer.

The following sample file illustrates the usage of a package.json

{
"name": "FlightInstruments",
"version": "1.0.0",
"description": "UAVideo Player Flight Instruments",
"author": {
"name": "ImpleoTV Systems Ltd.",
"email": "info@impleotv.com"
},
"index" : "Index.html",
"location" : "",
"hosting_needed" : "true",
"update_interval" : "1000",
"license": "GPLv3"
}
Note
The Plugin name MUST be indentical to the parent directory of the package file.

Creating html file.

Next, we have to create the html file and import all required css and js files.

<!DOCTYPE HTML >
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Flight Instruments</title>
<link rel="stylesheet" type="text/css" href="css/flightindicators.css" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.flightindicators.js"></script>
<script src="js/Instruments.js"></script>
</head>
<body>
<div id="flightControls">
<span id="attitude"></span>
<span id="heading"></span>
<span id="altimeter"></span>
<span id="variometer"></span>
</div>
</body>
</html>

Creating js file.

Now, what is left is to add some JavaScript code and implement an entry methods / events for UAVideoPlayer plugin hosting code to be integrated with.

Upon telemetry packet arrival, the plugin framework will try to call this method providing a platform Id and a corresponding (serialized as a JSON) telemetry. Here is an example of such a packet:

[
{
"Tag": 2,
"Value": 1283400396616075,
"ValueStr": "2010-Sep-02 04:06:36.616"
},
{
"Tag": 65,
"Value": 3,
"ValueStr": "Version 3"
},
{
"Tag": 3,
"Value": "test",
"ValueStr": "test"
},
{
"Tag": 10,
"Value": "SENSOR HD-2T",
"ValueStr": "SENSOR HD-2T"
},
{
"Tag": 5,
"Value": 230.38132295719845,
"ValueStr": "230.3813°"
},
{
"Tag": 6,
"Value": 7.445295571764275,
"ValueStr": "7.4452956°"
},
{
"Tag": 7,
"Value": 0.39063692129276406,
"ValueStr": "0.3906369°"
},
{
"Tag": 11,
"Value": "EOW",
"ValueStr": "EOW"
},
{
"Tag": 12,
"Value": "Geodetic WGS84",
"ValueStr": "Geodetic WGS84"
},
{
"Tag": 13,
"Value": -31.044660467209603,
"ValueStr": "31° 2' 40.78'' S"
},
{
"Tag": 14,
"Value": 150.49158597853574,
"ValueStr": "150° 29' 29.71'' E"
},
{
"Tag": 15,
"Value": 2662.475013351644,
"ValueStr": "2662.48 m"
},
{
"Tag": 16,
"Value": 40.512703135729005,
"ValueStr": "40.5127°"
},
{
"Tag": 17,
"Value": 22.78873884184024,
"ValueStr": "22.7887°"
},
{
"Tag": 18,
"Value": 0.5234069378402566,
"ValueStr": "0.5234069378°"
},
{
"Tag": 19,
"Value": -24.180877704257554,
"ValueStr": "-24.1808777043°"
},
{
"Tag": 20,
"Value": 0.5756530167012599,
"ValueStr": "0.5756530167°"
},
{
"Tag": 21,
"Value": 5840.148079637473,
"ValueStr": "5840.1481 m"
},
{
"Tag": 22,
"Value": 4129.396505683986,
"ValueStr": "4129.397 m"
},
{
"Tag": 23,
"Value": -31.075116992497406,
"ValueStr": "31° 4' 30.42'' S"
},
{
"Tag": 24,
"Value": 150.44841263929774,
"ValueStr": "150° 26' 54.29'' E"
},
{
"Tag": 25,
"Value": 272.71381704432747,
"ValueStr": "272.71 m"
},
{
"Tag": 26,
"Value": -0.04596774193548387,
"ValueStr": "-0.045968°"
},
{
"Tag": 27,
"Value": -0.008954130680257577,
"ValueStr": "-0.008954°"
},
{
"Tag": 28,
"Value": 0.0015060884426404614,
"ValueStr": "0.001506°"
},
{
"Tag": 29,
"Value": -0.05412305063020722,
"ValueStr": "-0.054123°"
},
{
"Tag": 30,
"Value": 0.020382549516281625,
"ValueStr": "0.020383°"
},
{
"Tag": 31,
"Value": 0.009368419446394239,
"ValueStr": "0.009368°"
},
{
"Tag": 32,
"Value": 0.0038956877346110414,
"ValueStr": "0.003896°"
},
{
"Tag": 33,
"Value": 0.025061037018951994,
"ValueStr": "0.025061°"
},
{
"Tag": 40,
"Value": -31.075116992497406,
"ValueStr": "31° 4' 30.42'' S"
},
{
"Tag": 41,
"Value": 150.44841263929774,
"ValueStr": "150° 26' 54.29'' E"
},
{
"Tag": 42,
"Value": 272.71381704432747,
"ValueStr": "272.71 m"
},
{
"Tag": 56,
"Value": 47,
"ValueStr": "47 m/sec"
}
]

So, let's write some Javascript code to update the instruments. We'll do it by implementing a JS method with the following signature:

function UpdatePlugin(id, tlmPckt) {
}


Here is a simplified implementation:

var attitude;
var heading;
var altimeter;
var timestamp, lat, lon;
$(document).ready(function () {
attitude = $.flightIndicator('#attitude', 'attitude', { roll: 0, pitch: 0, size: 100, showBox: false });
heading = $.flightIndicator('#heading', 'heading', { heading: 50, size: 100, showBox: false });
altimeter = $.flightIndicator('#altimeter', 'altimeter', { size: 100, showBox: false });
});
function UpdatePlugin(id, tlmPckt) {
for (var i = 0; i < tlmPckt.length; i++) {
switch (tlmPckt[i].Tag)
{
case 2:
timestamp = tlmPckt[i].ValueStr;
break;
case 5:
heading.setHeading(tlmPckt[i].Value);
break;
case 6:
attitude.setPitch(tlmPckt[i].Value);
break;
case 7:
attitude.setRoll(tlmPckt[i].Value);
break;
case 13:
lat = tlmPckt[i].Value;
break;
case 14:
lon = tlmPckt[i].Value;
break;
case 15:
altimeter.setAltitude(tlmPckt[i].Value);
break;
default:
break;
}
}

Installing and using plugin.

The last thing is to create a subfolder uder Plugins directory of UAVideoPlayer application and copy the related files along with the package description file.

Note
Actually, you can host the service anywhere. The only mandatory thing is a package file in a separate directory. If the complete web application is provided, it will be hosted locally by the UAVideoPlayer Web Server.
Untitled 1




 Copyright 2015,    IMPLEOTV SYSTEMS LTD