WebPanel: Move libraries out of aircraft to common folder
This commit is contained in:
Torsten Dreyer
parent
5f342fdc7c
commit
e929b182af
2 changed files with 518 additions and 0 deletions
435
webgui/lib/fgfs.js
Normal file
435
webgui/lib/fgfs.js
Normal file
|
|
@ -0,0 +1,435 @@
|
|||
var FGFS = {};
|
||||
|
||||
FGFS.Property = function(path) {
|
||||
if (path == null)
|
||||
throw new Error('path is null');
|
||||
// path must be absolute
|
||||
if (path.lastIndexOf("/", 0) !== 0)
|
||||
path = "/".concat(path);
|
||||
|
||||
this.path = path.lastIndexOf("/", 0) === 0 ? path : "/".concat(path);
|
||||
this.value = null;
|
||||
}
|
||||
|
||||
FGFS.Property.prototype.getPath = function() {
|
||||
return this.path;
|
||||
}
|
||||
|
||||
FGFS.Property.prototype.setValue = function(val) {
|
||||
// TODO: send this out
|
||||
this.value = val;
|
||||
}
|
||||
|
||||
FGFS.Property.prototype.hasValue = function() {
|
||||
return this.value != null;
|
||||
}
|
||||
|
||||
FGFS.Property.prototype.getValue = function(val) {
|
||||
return this.value;
|
||||
}
|
||||
|
||||
FGFS.Property.prototype.getStringValue = function(val) {
|
||||
return this.value == null ? null : this.value.toString();
|
||||
}
|
||||
|
||||
FGFS.Property.prototype.getNumValue = function(val) {
|
||||
var reply = this.value == null ? null : Number(this.value);
|
||||
return (isNaN(reply) || reply == null) ? 0 : reply;
|
||||
}
|
||||
|
||||
FGFS.PropertyListener = function(arg) {
|
||||
this._listeners = {};
|
||||
this._nextId = 1;
|
||||
this._ws = new WebSocket('ws://' + location.host + '/PropertyListener');
|
||||
|
||||
function defaultOnClose(ev) {
|
||||
|
||||
var msg = 'Lost connection to FlightGear. Please reload this page and/or restart FlightGear.';
|
||||
alert(msg);
|
||||
throw new Error(msg);
|
||||
}
|
||||
|
||||
function defaultOnError(ev) {
|
||||
var msg = 'Error communicating with FlightGear. Please reload this page and/or restart FlightGear.';
|
||||
alert(msg);
|
||||
throw new Error(msg);
|
||||
}
|
||||
|
||||
this._ws.propertyListener = this;
|
||||
this._ws.onopen = arg.onopen;
|
||||
this._ws.onclose = defaultOnClose;
|
||||
this._ws.onerror = defaultOnError;
|
||||
this._ws.onmessage = function(ev) {
|
||||
try {
|
||||
this.propertyListener.fire(JSON.parse(ev.data));
|
||||
} catch (e) {
|
||||
}
|
||||
};
|
||||
|
||||
this.fire = function(node) {
|
||||
this._listeners[node.path].forEach(function(callback) {
|
||||
callback.cb(node);
|
||||
});
|
||||
};
|
||||
|
||||
this.addProperty = function(prop, callback) {
|
||||
var path = prop.getPath();
|
||||
|
||||
var o = this._listeners[path];
|
||||
var newProperty = false;
|
||||
if (typeof (o) == 'undefined') {
|
||||
newProperty = true;
|
||||
o = [];
|
||||
this._listeners[path] = o;
|
||||
}
|
||||
|
||||
o.push({
|
||||
cb : callback,
|
||||
"prop" : prop,
|
||||
id : this._nextId++
|
||||
});
|
||||
|
||||
if (newProperty) {
|
||||
this._ws.send(JSON.stringify({
|
||||
command : 'addListener',
|
||||
node : path
|
||||
}));
|
||||
this._ws.send(JSON.stringify({
|
||||
command : 'get',
|
||||
node : path
|
||||
}));
|
||||
}
|
||||
return this._nextId;
|
||||
};
|
||||
|
||||
this.removeProperty = function(prop) {
|
||||
throw new Error('removeProperty not yet implemented');
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
// expects:
|
||||
// [
|
||||
// [ "key", "/fg/property/path" ],
|
||||
// [ "key", "/another/fg/property/path" ],
|
||||
// ]
|
||||
FGFS.PropertyMirror = function(mirroredProperties) {
|
||||
var mirror = {}
|
||||
|
||||
for( var i = 0; i < mirroredProperties.length; i++ ) {
|
||||
var pair = mirroredProperties[i];
|
||||
mirror[pair[0]] = new FGFS.Property(pair[1]);
|
||||
}
|
||||
|
||||
var listener = new FGFS.PropertyListener({
|
||||
onopen : function() {
|
||||
var keys = Object.keys(mirror);
|
||||
for (var i = 0; i < keys.length; i++) {
|
||||
listener.addProperty(mirror[keys[i]], function(n) {
|
||||
if (typeof (n.value) != 'undefined')
|
||||
this.prop.value = n.value;
|
||||
});
|
||||
}
|
||||
;
|
||||
},
|
||||
});
|
||||
|
||||
this.listener = listener;
|
||||
this.mirror = mirror;
|
||||
|
||||
this.getNode = function(id) {
|
||||
return this.mirror[id];
|
||||
};
|
||||
|
||||
// TODO: ugly static variable, change this!
|
||||
FGFS.NodeProvider.mirror = this;
|
||||
}
|
||||
|
||||
FGFS.interpolate = function(x, pairs) {
|
||||
var n = pairs.length - 1;
|
||||
if (x <= pairs[0][0]) {
|
||||
return pairs[0][1];
|
||||
}
|
||||
if (x >= pairs[n][0]) {
|
||||
return pairs[n][1];
|
||||
}
|
||||
for (var i = 0; i < n; i = i + 1) {
|
||||
if (x > pairs[i][0] && x <= pairs[i + 1][0]) {
|
||||
var x1 = pairs[i][0];
|
||||
var x2 = pairs[i + 1][0];
|
||||
var y1 = pairs[i][1];
|
||||
var y2 = pairs[i + 1][1];
|
||||
return (x - x1) / (x2 - x1) * (y2 - y1) + y1;
|
||||
}
|
||||
}
|
||||
return pairs[i][1];
|
||||
}
|
||||
|
||||
|
||||
FGFS.NodeProvider = {
|
||||
mirror: null,
|
||||
getNode: function(id) {
|
||||
if( this.mirror == null )
|
||||
throw new Error('no nodes without a mirror');
|
||||
return this.mirror.getNode(id);
|
||||
}
|
||||
}
|
||||
|
||||
FGFS.InputValue = function(arg) {
|
||||
this.__proto__ = FGFS.NodeProvider;
|
||||
this.value = 0;
|
||||
this.property = null;
|
||||
this.offset = 0;
|
||||
this.scale = 1;
|
||||
this.interpolationTable = null;
|
||||
this.min = null;
|
||||
this.max = null;
|
||||
|
||||
this.getValue = function() {
|
||||
var value = this.value;
|
||||
if (this.property != null)
|
||||
value = this.property.getNumValue();
|
||||
|
||||
if (this.interpolationTable != null && this.interpolationTable.length > 0)
|
||||
return FGFS.interpolate(value, this.interpolationTable);
|
||||
|
||||
value = value * this.scale + this.offset;
|
||||
if( this.min != null && value < this.min )
|
||||
return this.min;
|
||||
if( this.max != null && value > this.min )
|
||||
return this.max;
|
||||
return value;
|
||||
}
|
||||
|
||||
if (typeof (arg) == 'number') {
|
||||
this.value = Number(arg);
|
||||
} else if (typeof (arg) == 'string') {
|
||||
this.property = this.getNode(arg);
|
||||
} else if (typeof (arg) == 'object') {
|
||||
|
||||
if (typeof (arg.property) != 'undefined')
|
||||
this.property = this.getNode(arg.property);
|
||||
|
||||
if (typeof (arg.value) != 'undefined')
|
||||
this.value = Number(arg.value);
|
||||
|
||||
if (typeof (arg.scale) != 'undefined')
|
||||
this.scale = Number(arg.scale);
|
||||
|
||||
if (typeof (arg.offset) != 'undefined')
|
||||
this.offset = Number(arg.offset);
|
||||
|
||||
if (typeof (arg.interpolation == 'string')) {
|
||||
|
||||
var target = this;
|
||||
if (typeof (arg.interpolation) == 'string') {
|
||||
this.interpolationTable = [];
|
||||
// load interpolation table
|
||||
$.ajax({
|
||||
type : "GET",
|
||||
dataType : "XML",
|
||||
url : arg.interpolation,
|
||||
success : function(data, status, xhr) {
|
||||
var entries = $(data).find("entry");
|
||||
$(data).find("entry").each(function() {
|
||||
var ind = $(this).find("ind").text();
|
||||
var dep = $(this).find("dep").text();
|
||||
target.interpolationTable.push([ Number(ind), Number(dep) ]);
|
||||
});
|
||||
},
|
||||
error : function(xhr, status, msg) {
|
||||
alert(status + " while reading '" + arg.interpolation + "': " + msg.toString());
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
} else {
|
||||
throw new Error('Dont know how to handle "' + arg.toString() + '"' );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
FGFS.Transform = function(arg) {
|
||||
}
|
||||
|
||||
FGFS.RotateTransform = function(arg) {
|
||||
this.__proto__ = new FGFS.Transform(arg);
|
||||
|
||||
this.a = new FGFS.InputValue(arg.a);
|
||||
this.x = new FGFS.InputValue(arg.x);
|
||||
this.y = new FGFS.InputValue(arg.y);
|
||||
|
||||
this.makeTransform = function() {
|
||||
return {
|
||||
type : "rotate",
|
||||
props : {
|
||||
a : this.a.getValue(),
|
||||
x : this.x.getValue(),
|
||||
y : this.y.getValue(),
|
||||
context : this,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FGFS.TranslateTransform = function(arg) {
|
||||
this.__proto__ = new FGFS.Transform(arg);
|
||||
|
||||
this.x = new FGFS.InputValue(arg.x);
|
||||
this.y = new FGFS.InputValue(arg.y);
|
||||
|
||||
this.makeTransform = function() {
|
||||
return {
|
||||
type : "translate",
|
||||
props : {
|
||||
x : this.x.getValue(),
|
||||
y : this.y.getValue(),
|
||||
context : this,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FGFS.Animation = function(arg) {
|
||||
this.element = arg.element;
|
||||
this.type = arg.type;
|
||||
|
||||
this.__proto__.update = function(svg) {
|
||||
var t = typeof (this._element);
|
||||
if (typeof (this._element) == 'undefined') {
|
||||
this._element = $(svg).find(this.element);
|
||||
}
|
||||
|
||||
this._element.fgAnimateSVG(this.makeAnimation());
|
||||
}
|
||||
|
||||
this.__proto__.makeAnimation = function() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
FGFS.TransformAnimation = function(arg) {
|
||||
this.__proto__ = new FGFS.Animation(arg);
|
||||
|
||||
this.transforms = [];
|
||||
for (var i = 0; i < arg.transforms.length; i++) {
|
||||
var t = arg.transforms[i];
|
||||
var transform = null;
|
||||
switch (t.type) {
|
||||
case 'rotate':
|
||||
transform = new FGFS.RotateTransform(t);
|
||||
break;
|
||||
case 'translate':
|
||||
transform = new FGFS.TranslateTransform(t);
|
||||
break;
|
||||
}
|
||||
if (transform != null)
|
||||
this.transforms[this.transforms.length] = transform;
|
||||
}
|
||||
|
||||
this.makeAnimation = function() {
|
||||
var reply = {
|
||||
type : 'transform',
|
||||
transforms : [],
|
||||
};
|
||||
|
||||
for (var i = 0; i < this.transforms.length; i++)
|
||||
reply.transforms[reply.transforms.length] = this.transforms[i].makeTransform();
|
||||
|
||||
return reply;
|
||||
}
|
||||
}
|
||||
|
||||
FGFS.Instrument = function(arg) {
|
||||
|
||||
// load svg into target
|
||||
$.ajax({
|
||||
type : "GET",
|
||||
url : arg.src,
|
||||
async: false,
|
||||
dataType : "xml",
|
||||
context: this,
|
||||
success : function(xml, status, xhr) {
|
||||
this.svg = $(xml).find("svg")[0];
|
||||
},
|
||||
error : function(xhr, status, msg) {
|
||||
alert(status + " while reading '" + arg.src + "': " + msg.toString());
|
||||
},
|
||||
});
|
||||
|
||||
this.animations = [];
|
||||
for (var i = 0; i < arg.animations.length; i++) {
|
||||
var a = arg.animations[i];
|
||||
var animation = null;
|
||||
|
||||
switch (a.type) {
|
||||
case 'transform':
|
||||
animation = new FGFS.TransformAnimation(a);
|
||||
break;
|
||||
|
||||
}
|
||||
if (animation != null)
|
||||
this.animations[this.animations.length] = animation;
|
||||
}
|
||||
|
||||
this.__proto__.update = function() {
|
||||
// noop if svg is not (yet) loaded
|
||||
|
||||
if (typeof (this.svg) == 'undefined')
|
||||
return;
|
||||
|
||||
var svg = this.svg;
|
||||
|
||||
this.animations.forEach(function(animation) {
|
||||
animation.update(svg);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
FGFS.FGPanel = function( propUrl )
|
||||
{
|
||||
|
||||
var defaultProps = {
|
||||
instrumentSelector: ".instrument",
|
||||
instrumentDataKey: "fgpanel-instrument",
|
||||
updateInterval: 50,
|
||||
};
|
||||
|
||||
this.props = Object.create( defaultProps );
|
||||
|
||||
if( typeof(propUrl) == 'string' ) {
|
||||
$.ajax({
|
||||
type : "GET",
|
||||
url : propUrl,
|
||||
async: false,
|
||||
dataType : "json",
|
||||
context: this,
|
||||
success : function(data, status, xhr) {
|
||||
data.__proto__ = defaultProps;
|
||||
this.props = data;
|
||||
},
|
||||
error : function(xhr, status, msg) {
|
||||
alert(status + " while reading '" + propUrl + "': " + msg.toString());
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
var mirror = new FGFS.PropertyMirror(this.props.propertyMirror);
|
||||
|
||||
var instruments = $(this.props.instrumentSelector).fgLoadInstruments(this.props.instrumentDataKey);
|
||||
|
||||
window.setInterval( function() {
|
||||
instruments.forEach(function(instrument) {
|
||||
instrument.update();
|
||||
});
|
||||
}, this.props.updateInterval );
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
var hasFGPanel = $("body").data("fgpanel");
|
||||
if( hasFGPanel ) {
|
||||
var panelProps = $("body").data("fgpanel-props");
|
||||
new FGFS.FGPanel( panelProps == null ? "fgpanel.json" : panelProps );
|
||||
}
|
||||
});
|
||||
|
||||
83
webgui/lib/jquery.fganimate.js
Normal file
83
webgui/lib/jquery.fganimate.js
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
(function($) {
|
||||
|
||||
function makeTranslate(a) {
|
||||
return makeTransform("translate", a);
|
||||
}
|
||||
|
||||
function makeRotate(a) {
|
||||
return makeTransform("rotate", a);
|
||||
}
|
||||
|
||||
function makeTransform( type, a ) {
|
||||
var t = type.concat("(");
|
||||
if( a != null ) {
|
||||
a.forEach( function(ele) {
|
||||
t = t.concat(ele).concat(" ");
|
||||
});
|
||||
}
|
||||
return t.concat(") ");
|
||||
}
|
||||
|
||||
function evaluate( context,exp ) {
|
||||
if( typeof(exp) == 'function' )
|
||||
return exp.call(context);
|
||||
return exp;
|
||||
}
|
||||
|
||||
$.fn.fgAnimateSVG = function(props) {
|
||||
if (props) {
|
||||
if (props.type == "transform" && props.transforms) {
|
||||
var a = "";
|
||||
props.transforms.forEach(function(transform) {
|
||||
switch (transform.type) {
|
||||
case "rotate":
|
||||
a = a.concat(makeRotate([
|
||||
evaluate(transform.props.context,transform.props.a),
|
||||
evaluate(transform.props.context,transform.props.x),
|
||||
evaluate(transform.props.context,transform.props.y) ]));
|
||||
break;
|
||||
case "translate":
|
||||
a = a.concat(makeTranslate([
|
||||
evaluate(transform.props.context,transform.props.x),
|
||||
evaluate(transform.props.context,transform.props.y) ]));
|
||||
break;
|
||||
}
|
||||
});
|
||||
this.attr("transform", a);
|
||||
|
||||
} else if( props.type == "text" ) {
|
||||
var tspans = this.children("tspan");
|
||||
if( 0 == tspans.length ) {
|
||||
this.text(props.text);
|
||||
} else {
|
||||
tspans.text(props.text);
|
||||
}
|
||||
}
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
$.fn.fgLoadInstruments = function( dataTag ) {
|
||||
var reply = [];
|
||||
|
||||
this.each(function() {
|
||||
var instrumentDefinitionFile = $(this).data(dataTag);
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: instrumentDefinitionFile,
|
||||
context: this,
|
||||
async: false,
|
||||
success: function (data,status,xhr) {
|
||||
var i = new FGFS.Instrument(data);
|
||||
reply.push(i);
|
||||
$(this).append(i.svg);
|
||||
},
|
||||
error: function(xhr,status,msg) {
|
||||
alert(status + " while reading '" + instrumentDefinitionFile + "': " + msg.toString() );
|
||||
},
|
||||
});
|
||||
});
|
||||
return reply;
|
||||
}
|
||||
|
||||
}(jQuery));
|
||||
Loading…
Reference in a new issue