Clean up SVG rendering. Use the new flightfeeder key in status.json
This commit is contained in:
James Wilson
parent
d40e69ee42
commit
fddb2298ee
|
|
@ -10,7 +10,8 @@ var shapes = {
|
|||
},
|
||||
'balloon': {
|
||||
svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 13" width="9px" height="13px"><defs><style>.cls-1{fill:aircraft_color_fill;}.cls-2{fill:aircraft_color_stroke;}</style></defs><title>balloon_live</title><g id="Layer_2" data-name="Layer 2"><g id="Balloon"><path class="cls-1" d="M3.56,12.75a.49.49,0,0,1-.46-.34L2.63,11a.51.51,0,0,1,.07-.44l.1-.1-2-3.68a.48.48,0,0,1-.05-.17,4.39,4.39,0,0,1-.48-2A4.29,4.29,0,0,1,4.5.25,4.29,4.29,0,0,1,8.75,4.58a4.39,4.39,0,0,1-.48,2,.45.45,0,0,1-.05.17l-2,3.68a.44.44,0,0,1,.1.1.51.51,0,0,1,.07.45L5.9,12.41a.49.49,0,0,1-.46.34Zm1.6-2.43L6.1,8.59A4.22,4.22,0,0,1,5,8.88v1.44ZM4,10.32V8.88A4.22,4.22,0,0,1,2.9,8.59l.94,1.73Z"/><path class="cls-2" d="M4.5.51a4,4,0,0,1,4,4.07A4.1,4.1,0,0,1,8,6.5a.24.24,0,0,1,0,.11l-2.16,4h.07a.23.23,0,0,1,.19.1.24.24,0,0,1,0,.22l-.47,1.44a.24.24,0,0,1-.22.16H3.56a.24.24,0,0,1-.22-.16l-.47-1.44a.24.24,0,0,1,0-.22.23.23,0,0,1,.19-.1h.07L1,6.62A.24.24,0,0,1,1,6.5,4.1,4.1,0,0,1,.5,4.58,4,4,0,0,1,4.5.51m.24,10.06H5.3L6.73,8a3.93,3.93,0,0,1-2,.68v1.93m-1,0h.57V8.64a3.93,3.93,0,0,1-2-.68L3.7,10.57M4.5,0A4.55,4.55,0,0,0,0,4.58,4.65,4.65,0,0,0,.49,6.66a.72.72,0,0,0,.07.21l1.92,3.52a.76.76,0,0,0-.09.66l.47,1.44a.74.74,0,0,0,.7.51H5.44a.74.74,0,0,0,.7-.51l.47-1.44a.76.76,0,0,0-.09-.66L8.44,6.86a.72.72,0,0,0,.07-.21A4.65,4.65,0,0,0,9,4.58,4.55,4.55,0,0,0,4.5,0Zm.74,9.1L5.57,9l-.34.62V9.1Zm-1.47.55L3.43,9l.34.07v.55Z"/></g></g></svg>',
|
||||
size: [9,13]
|
||||
size: [9,13],
|
||||
noRotate: true
|
||||
},
|
||||
'cessna': {
|
||||
svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 13" width="17px" height="13px"><defs><style>.cls-1{fill:aircraft_color_fill;}.cls-2{fill:aircraft_color_stroke;}</style></defs><title>cessna_live</title><g id="Layer_2" data-name="Layer 2"><g id="Cessna"><path class="cls-1" d="M8.51,12.75c-.17,0-2-.27-2.56-.35A.41.41,0,0,1,5.6,12V10.87a.41.41,0,0,1,.32-.4l1.81-.37L7.36,6.64H4.75L.6,6a.41.41,0,0,1-.35-.41V4a.41.41,0,0,1,.38-.41l4.09-.28h2.6v-.4l.25,0-.24-.08c0-.21.1-.76.12-1.06A.9.9,0,0,1,8,.94L8.12.54A.41.41,0,0,1,8.5.25a.4.4,0,0,1,.39.29L9,.95a.91.91,0,0,1,.53.75c0,.33.11,1,.13,1.11v.46h2.57l4.12.28a.41.41,0,0,1,.38.41V5.63A.41.41,0,0,1,16.4,6l-4.1.59H9.64L9.26,10.1l1.81.36a.41.41,0,0,1,.32.4V12a.41.41,0,0,1-.34.41c-.56.08-2.37.35-2.55.35Z"/><path class="cls-2" d="M8.5.5a.15.15,0,0,1,.15.11l.16.52a.68.68,0,0,1,.49.58c0,.34.11,1,.13,1.12a.16.16,0,0,1,0,0v.65h2.83l4.09.28A.16.16,0,0,1,16.5,4V5.63a.16.16,0,0,1-.13.16l-4.1.59H9.41L9,10.3l2,.41a.16.16,0,0,1,.12.16V12a.16.16,0,0,1-.13.16s-2.33.35-2.51.35h0c-.17,0-2.53-.35-2.53-.35A.16.16,0,0,1,5.85,12V10.87A.16.16,0,0,1,6,10.71l2-.41L7.59,6.39H4.73L.63,5.79A.16.16,0,0,1,.5,5.63V4A.16.16,0,0,1,.64,3.8l4.09-.28H7.57V2.87a.21.21,0,0,1,0,0c0-.15.1-.79.13-1.12a.68.68,0,0,1,.49-.58L8.36.61A.16.16,0,0,1,8.5.5m0-.5a.66.66,0,0,0-.62.46l-.1.32a1.13,1.13,0,0,0-.58.9c0,.31-.1.87-.12,1.06a.92.92,0,0,0,0,.14V3H4.75L.61,3.3A.66.66,0,0,0,0,4V5.63a.66.66,0,0,0,.56.65l4.1.59H7.14l.33,3-1.59.32a.66.66,0,0,0-.53.65V12a.66.66,0,0,0,.54.65C7,12.81,8.34,13,8.51,13s1.5-.19,2.58-.35a.66.66,0,0,0,.56-.65V10.87a.66.66,0,0,0-.52-.65L9.54,9.9l.33-3h2.48l4.1-.59A.66.66,0,0,0,17,5.63V4a.66.66,0,0,0-.61-.66L12.3,3H9.93V2.74c0-.11-.09-.74-.12-1.06a1.14,1.14,0,0,0-.57-.9L9.13.46A.65.65,0,0,0,8.5,0Z"/></g></g></svg>',
|
||||
|
|
@ -285,12 +286,12 @@ function getBaseMarker(category, typeDesignator, typeDescription, wtc) {
|
|||
return shapes['unknown'];
|
||||
}
|
||||
|
||||
function svgPathToSvg(path, size, stroke, width, fill, transparentBorderWidth) {
|
||||
function svgPathToSvg(path, stroke, fill) {
|
||||
path = path.replace('aircraft_color_fill', fill).replace('aircraft_color_stroke', stroke);
|
||||
return path;
|
||||
}
|
||||
|
||||
|
||||
function svgPathToURI(path, size, stroke, width, fill, transparentBorderWidth) {
|
||||
return "data:image/svg+xml;base64," + btoa(svgPathToSvg(path, size, stroke, width, fill, transparentBorderWidth));
|
||||
function svgPathToURI(path, stroke, fill) {
|
||||
return "data:image/svg+xml;base64," + btoa(svgPathToSvg(path, stroke, fill));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -353,7 +353,6 @@ PlaneObject.prototype.updateIcon = function() {
|
|||
var opacity = 1.0;
|
||||
var outline = (this.position_from_mlat ? OutlineMlatColor : OutlineADSBColor);
|
||||
var baseMarker = getBaseMarker(this.category, this.icaotype, this.typeDescription, this.wtc);
|
||||
//var weight = ((this.selected && !SelectedAllPlanes ? 2 : 1) / baseMarker.scale / scaleFactor).toFixed(1);
|
||||
var rotation = (this.track === null ? 0 : this.track);
|
||||
//var transparentBorderWidth = (32 / baseMarker.scale / scaleFactor).toFixed(1);
|
||||
|
||||
|
|
@ -369,48 +368,18 @@ PlaneObject.prototype.updateIcon = function() {
|
|||
anchorYUnits: 'fraction',
|
||||
scale: 1.2 * scaleFactor,
|
||||
imgSize: baseMarker.size,
|
||||
src: svgPathToURI(baseMarker.svg, baseMarker.size, outline, '', col, ''),
|
||||
src: svgPathToURI(baseMarker.svg, outline, col),
|
||||
rotation: (baseMarker.noRotate ? 0 : rotation * Math.PI / 180.0),
|
||||
opacity: opacity,
|
||||
rotateWithView: (baseMarker.noRotate ? false : true)
|
||||
});
|
||||
|
||||
if (baseMarker.noRotate) {
|
||||
// the base marker won't be rotated
|
||||
this.markerStaticIcon = icon;
|
||||
this.markerStaticStyle = new ol.style.Style({
|
||||
image: this.markerStaticIcon
|
||||
});
|
||||
|
||||
// create an arrow that we will rotate around the base marker
|
||||
// to indicate heading
|
||||
|
||||
var offset = baseMarker.markerRadius * baseMarker.scale + 6;
|
||||
var size = offset * 2;
|
||||
|
||||
var arrowPath = "M " + offset + ",0 m 4,4 -8,0 4,-4 z";
|
||||
this.markerIcon = new ol.style.Icon({
|
||||
anchor: [offset, offset],
|
||||
anchorXUnits: 'pixels',
|
||||
anchorYUnits: 'pixels',
|
||||
scale: 1.0 * scaleFactor,
|
||||
imgSize: [size, size],
|
||||
src: svgPathToURI(arrowPath, [size, size], outline, 1, outline, 0),
|
||||
rotation: rotation * Math.PI / 180.0,
|
||||
opacity: opacity,
|
||||
rotateWithView: true
|
||||
});
|
||||
this.markerStyle = new ol.style.Style({
|
||||
image: this.markerIcon
|
||||
});
|
||||
} else {
|
||||
this.markerIcon = icon;
|
||||
this.markerStyle = new ol.style.Style({
|
||||
image: this.markerIcon
|
||||
});
|
||||
this.markerStaticIcon = null;
|
||||
this.markerStaticStyle = new ol.style.Style({});
|
||||
}
|
||||
|
||||
this.markerStyleKey = styleKey;
|
||||
this.markerSvgKey = svgKey;
|
||||
|
|
|
|||
|
|
@ -1632,7 +1632,7 @@ function toggleLayer(element, layer) {
|
|||
function flightFeederCheck() {
|
||||
$.ajax('/status.json', {
|
||||
success: function(data) {
|
||||
if (typeof data.serial !== 'undefined') {
|
||||
if (data.type === "flightfeeder") {
|
||||
isFlightFeeder = true;
|
||||
updatePiAwareOrFlightFeeder();
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue