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:
- Attitude (artificial horizon)
- Heading
- Vertical speed
- Air speed
- Altimeter
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"
}
- index. Index html file
- location. Url. If empty, a local copy (from the plugin folder) will be used. You can put a web url here and the plugin will be lauched from remote host.
- hosting_needed. If set to True, the web applicaton will be hosted by the internal webserver.
- update_interval. Interval (in ms) the telemetry packet will be updated.
- 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.