247 lines
9.4 KiB
HTML
247 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<link rel="stylesheet" href="/SCSS/common.css" />
|
|
<link rel="stylesheet" href="CustomPanel.css" />
|
|
|
|
<script type="text/javascript" src="/JS/coherent.js"></script>
|
|
<script type="text/javascript" src="/JS/common.js"></script>
|
|
<script type="text/javascript" src="/JS/dataStorage.js"></script>
|
|
<script type="text/javascript" src="/JS/buttons.js"></script>
|
|
<script type="text/javascript" src="/JS/Services/ToolBarPanels.js"></script>
|
|
<script type="text/javascript" src="/Pages/VCockpit/Instruments/Shared/BaseInstrument.js"></script>
|
|
|
|
<script type="text/javascript" src="/JS/simvar.js"></script>
|
|
|
|
<link rel="import" href="/templates/NewPushButton/NewPushButton.html" />
|
|
<link rel="import" href="/templates/ToggleButton/toggleButton.html" />
|
|
<link rel="import" href="/templates/tabMenu/tabMenu.html" />
|
|
<link rel="import" href="/templates/ingameUi/ingameUi.html" />
|
|
<link rel="import" href="/templates/ingameUiHeader/ingameUiHeader.html" />
|
|
<link rel="import" href="/templates/NewListButton/NewListButton.html" />
|
|
|
|
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
|
|
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
|
|
|
|
<style>
|
|
html,
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
#map {
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.rotate-north {
|
|
top: .5em;
|
|
right: .5em;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="border-box">
|
|
<ingamepanel-custom>
|
|
<ingame-ui id="CustomPanel" panel-id="PANEL_CUSTOM_PANEL" title="New Title" class="ingameUiFrame"
|
|
content-fit="true" min-width="160" min-height="90">
|
|
<div id="CustomPanelWrap">
|
|
<div id="map" class="map" tabindex="0"></div>
|
|
</div>
|
|
</ingame-ui>
|
|
</ingamepanel-custom>
|
|
<script>
|
|
|
|
var center_player = true;
|
|
|
|
window.app = {};
|
|
var app = window.app;
|
|
|
|
app.center_on_player = function (opt_options) {
|
|
|
|
var options = opt_options || {};
|
|
|
|
var button = document.createElement('button');
|
|
button.innerHTML = 'P';
|
|
|
|
// var this_ = this;
|
|
var action = function () {
|
|
center_player = true;
|
|
};
|
|
|
|
button.addEventListener('click', action, false);
|
|
button.addEventListener('touchstart', action, false);
|
|
|
|
var element = document.createElement('div');
|
|
element.className = 'rotate-north ol-unselectable ol-control';
|
|
element.appendChild(button);
|
|
|
|
ol.control.Control.call(this, {
|
|
element: element,
|
|
target: options.target
|
|
});
|
|
|
|
};
|
|
|
|
var iconFeature = new ol.Feature({
|
|
geometry: new ol.geom.Point([0, 0])
|
|
});
|
|
|
|
var iconStyle = new ol.style.Style({
|
|
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */({
|
|
anchor: [0.5, 0.5],
|
|
anchorXUnits: 'fraction',
|
|
anchorYUnits: 'fraction',
|
|
src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAABYgAAAWIBXyfQUwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAUfSURBVHic7ZtvaJVVHMc/d+5Puf44KQ3LrNUsG/SH2V6oSRFUkAqVi16UkEFQEIPeaAz780IY+CKCerEgX2hGrAzBRQOZZVlIzIaJlWS6IPvH0Izpps7dXvx+Z+fs7t7Hp3uf85zN3S883N09v/M739/3ec55zu93npshDK4HngOagQqgF9gM9AfikyqeBgaBbM4xDDwfkFcqeBi4gAT8PfAKsAE4oP8bBR4Lxs4zMsBPSKDbgWrn3AzgAz13TG0vOdyJBHgOmJPnfB0wojb3pEWqIq2OgJv18yjwd57zJ4HD+veCVBiRrgDmlh+MsBnSzyrPXMaQpgCTEmUBQhMIjbIAoQmERlmA0ARCoyxAaAKhURYgNIHQKAsQmkBolAUITWC6oAnoQ6o9+yLs9qlNn7aZ8pgJbALOI4H9C6yOsF+tNllts0l9TEksR0pcpuz9KXBjjHbzkKKpaXcUeMgTRy+YBXQgJe4s8Bewpgg/K4HfsEJ0AtckxNEbVgLHSY50UmJ6xzzgE/zdtsuxewpmOKVWOY5CBtnOcieut4ArPPR1OfA6sq+QBU4D65BNlSBoAD7HXpUDwL0p9HsX8K3T7zdAYwr9jqEKUX5YCZxBrkx1RJukUQm0YjdZzwHtQI3vjpcAh7Dqfwnc7rvTCNQDuxw+PwMP+OioFlHY7OyeRMb+ZNnEbAEGsDvMHcBVSTl/FPgVq/JO5AWHyYa5wBYsz9+BJyaVw5SQyAXzekulgKKH7K1AD1a9H4ClCZGaD7wALIqwWQS8qLZJYCkSg4mnB4lxAiqRR9sZNTwLvEHpj5WrgbXAbuzV2BNhv0dtLmibteqjFNQgsZzFPrbXITEDcBM2V09iYVENrELygCHHrzl6I9r25rEfUl+rKG2t0YjEZvz2ocvpr7G5+ksUVyXKIGuEd7Bzhzn6gY1AG/EFaNM2/Tm+BrSPJRT3CK5AYjRL971g38tZXITDhcjtdSSH6Alk4rzPIdpCfAFa9HsGSYTeVZ9uH0e074VF8F6sPkZwHNbHbDwbmVH3YtNU857fTiRdzVfFKUYAFzVIur0FSYRcMQ4h43puzBjqnbaxBLhMO+/EZmPumG4Frr1Ip6UK4GIWIvQuxl+EEf3fGqIz0lgCVADLkFv5FOOD/hFJgG65CFEXSQrgYj5yAdyJ3Mz2nciFq8xpEylAIxLcsRyHA4gYy/4HORe+BHDRiCyA/mA89+NIncJwHyeAqdi+CRzMaTgIbAUeofTCQxoCGMxAOG9l4nvJB5FYTQFnbPHhjqPPkJeaa0sk4iJNAVzUIrF0Y5945viiUk9uRF5V7QE+BP5MkEBonAbe1+M64CngQSQ/aEuTSKg7IBLTfm+wLEBoAtMFNwD7kfG9I8Juh9rs1zaXBJqRcloW+Aep6xfC3WpjSnDN3tl5xpPYxOUX4I4YbRqw22DDwDPe2HlEBsnOTKLyFfl/JlMIs7GluVFkeTtl5qtq4GPsaquD4n4BUqVtjZ+PSHf3qWi8il1StybgrxW7hN2QgD/v6EbIro9hmyFeaWu9+uwugVde+BhXJms8UeD8HOBZ5DWYU3psRyrAheYJ4yvxrfDcQoEv1COFiRXA/Xn6fVyPUaSw0YWU175Dc3Zf8CHAqH42AW8jQS/IsTmMBNil31cgAt2m7ZqA15Atri7s5OdVjKTQzsTa/nlko+Nl5DlfCA1qsxtbqHGPdm+sE8RM4D3kjZFtSP5dV4SfOm27Ddne2gxcmRDHMfwHd9m82DeavcwAAAAASUVORK5CYII=',
|
|
}))
|
|
});
|
|
|
|
iconFeature.setStyle(iconStyle);
|
|
|
|
var vectorSource = new ol.source.Vector({
|
|
features: [iconFeature]
|
|
});
|
|
|
|
var vectorLayer = new ol.layer.Vector({
|
|
source: vectorSource
|
|
});
|
|
|
|
const defaultInteractions = ol.interaction.defaults();
|
|
const mouseWheelInteraction = defaultInteractions.getArray().find(el => el instanceof ol.interaction.MouseWheelZoom);
|
|
mouseWheelInteraction.setMouseAnchor(false);
|
|
|
|
var osm = new ol.layer.Tile({
|
|
source: new ol.source.XYZ({
|
|
url: 'https://osm.avii.nl/{z}/{x}/{y}.png',
|
|
crossOrigin: null,
|
|
tileSize: 1024,
|
|
attributions: ol.source.OSM.ATTRIBUTION,
|
|
})
|
|
});
|
|
|
|
ol.inherits(app.center_on_player, ol.control.Control);
|
|
|
|
var map = new ol.Map({
|
|
controls: ol.control.defaults({
|
|
attributionOptions: {
|
|
collapsible: false
|
|
}
|
|
}).extend([
|
|
new app.center_on_player()
|
|
]),
|
|
interactions: defaultInteractions,
|
|
layers: [
|
|
osm,
|
|
vectorLayer
|
|
],
|
|
target: 'map',
|
|
view: new ol.View({
|
|
center: [0, 0],
|
|
zoom: 12,
|
|
zoomFactor: 2,
|
|
})
|
|
});
|
|
|
|
|
|
let sse = new EventSource("http://127.0.0.1:9000/sse");
|
|
let device_info = undefined;
|
|
|
|
sse.addEventListener("device-info", (event) => {
|
|
let data = JSON.parse(event.data);
|
|
device_info = data;
|
|
});
|
|
|
|
let btn = {
|
|
val: 0,
|
|
};
|
|
|
|
btn.tip = function () {
|
|
return (this.val & 1) == 1;
|
|
};
|
|
btn.a = function () {
|
|
return (this.val & 2) == 2;
|
|
};
|
|
btn.b = function () {
|
|
return (this.val & 4) == 4;
|
|
};
|
|
|
|
let oldx = undefined;
|
|
let oldy = undefined;
|
|
|
|
sse.addEventListener("state", (event) => {
|
|
if (typeof device_info === "undefined") {
|
|
return;
|
|
}
|
|
let data = JSON.parse(event.data);
|
|
|
|
let x = (device_info.max_y - data.y) / device_info.max_y;
|
|
let y = data.x / device_info.max_x;
|
|
|
|
if (typeof oldx === "undefined") {
|
|
oldx = x;
|
|
oldy = y;
|
|
}
|
|
|
|
let dx = oldx - x;
|
|
let dy = oldy - y;
|
|
|
|
btn.val = data.pen_buttons;
|
|
|
|
if (btn.tip()) {
|
|
if (btn.a()) {
|
|
let zoom = map.getView().getZoom();
|
|
map.getView().setZoom(zoom + (dy * 10));
|
|
} else if (btn.b()) {
|
|
center_player = true;
|
|
} else {
|
|
center_player = false;
|
|
console.log("tip");
|
|
|
|
var center = map.getView().getCenter();
|
|
var resolution = map.getView().getResolution();
|
|
map.getView().setCenter([center[0] + dx * 600 * resolution, center[1] + -dy * 800 * resolution]);
|
|
}
|
|
}
|
|
|
|
oldx = x;
|
|
oldy = y;
|
|
});
|
|
|
|
|
|
map.on('pointerdrag', () => {
|
|
console.log("dragging");
|
|
center_player = false;
|
|
});
|
|
|
|
setInterval(() => {
|
|
if (typeof SimVar === "undefined") { return; }
|
|
|
|
let lon = SimVar.GetSimVarValue("PLANE LONGITUDE", "radians") * (180 / Math.PI);
|
|
let lat = SimVar.GetSimVarValue("PLANE LATITUDE", "radians") * (180 / Math.PI);
|
|
let modifiedCoordinate = ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857');
|
|
let angle = SimVar.GetSimVarValue("PLANE HEADING DEGREES TRUE", "radians");
|
|
|
|
iconFeature.getGeometry().setCoordinates(modifiedCoordinate);
|
|
iconStyle.getImage().setRotation(angle);
|
|
|
|
if (center_player) {
|
|
map.getView().setCenter(modifiedCoordinate);
|
|
}
|
|
|
|
}, 250);
|
|
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |