Removes dlbo onging qt5 development income folder
No files matched your search
@@ -1,104 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Verwundungsmodelle</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
|
||||
<script src="https://js.arcgis.com/4.20/"></script>
|
||||
<!-- <script data-dojo-config="async: 1" src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> -->
|
||||
<script defer src="./main.js"></script>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-9" id="mapDiv" style="height: 100vh"></div>
|
||||
<div class="col-3" id="mapDiv" style="height: 100vh">
|
||||
<div class="container-fluid bg-light" style="height: 100vh">
|
||||
<div class="row">
|
||||
<div class="col-12 bg-light">
|
||||
<h3 class="display-6 text-center">Damage Model</h3>
|
||||
</div>
|
||||
<div class="col-12 pt-3 pb-2 bg-light d-flex justify-content-between">
|
||||
<div class="" title="Removes wall fill to see mounting points inside buildings">Toggle Wall
|
||||
Fill</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row overflow-auto border" style="height: 82%; background: white">
|
||||
<div class="container-fluid border-top bg-light" id="modelTree">
|
||||
<ul id="myUL">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row p-3">
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModal">
|
||||
Load Model File
|
||||
</button>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">Upload
|
||||
</h5>
|
||||
<button type="button" class="btn-close" id="modal-close-button"
|
||||
data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-12 pb-3 border-bottom">
|
||||
<h4>Building File</h4>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<input type="file" class="form-control-file"
|
||||
id="exampleFormControlFile1">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12 pb-3">
|
||||
<h4>Reference Point File</h4>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<input type="file" class="form-control-file"
|
||||
id="exampleFormControlFile2">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary"
|
||||
data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,708 +0,0 @@
|
||||
class InitializationHandler {
|
||||
constructor() {
|
||||
}
|
||||
|
||||
async generateMap() {
|
||||
return new Promise((res) => {
|
||||
require([
|
||||
"esri/Map",
|
||||
"esri/views/SceneView",
|
||||
"esri/layers/GraphicsLayer",
|
||||
"esri/Graphic",
|
||||
"esri/geometry/Point",
|
||||
"esri/geometry/projection",
|
||||
"dojo",
|
||||
],
|
||||
(
|
||||
Map,
|
||||
SceneView,
|
||||
GraphicsLayer,
|
||||
Graphic,
|
||||
Point,
|
||||
Projection,
|
||||
) => {
|
||||
// console.log(L);
|
||||
const map = new Map({
|
||||
basemap: "dark-gray"
|
||||
});
|
||||
const view = new SceneView({
|
||||
container: "mapDiv",
|
||||
map,
|
||||
scale: 1000,
|
||||
camera: {
|
||||
position: {
|
||||
x: 8.896638,
|
||||
y: 53.054441,
|
||||
z: 400
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
const graphicLayer = new GraphicsLayer();
|
||||
map.add(graphicLayer);
|
||||
res({ map, view, graphicLayer, Projection, Graphic, Point });
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
class FileManager {
|
||||
constructor() {
|
||||
this.resultXML;
|
||||
this.fileReader = new FileReader();
|
||||
this.domParser = new DOMParser();
|
||||
}
|
||||
|
||||
loadFileContent(file) {
|
||||
return new Promise(res => {
|
||||
this.fileReader.readAsText(file);
|
||||
this.fileReader.onloadend = () => {
|
||||
this.resultXML = this.domParser.parseFromString(this.fileReader.result, "application/xml");
|
||||
res();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
getFileAsJson() {
|
||||
return this.xmlToJson(this.resultXML);
|
||||
}
|
||||
|
||||
xmlToJson(xml) {
|
||||
// Create the return object
|
||||
var obj = {};
|
||||
|
||||
if (xml.nodeType == 1) { // element
|
||||
// do attributes
|
||||
if (xml.attributes.length > 0) {
|
||||
obj["@attributes"] = {};
|
||||
for (var j = 0; j < xml.attributes.length; j++) {
|
||||
var attribute = xml.attributes.item(j);
|
||||
obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
|
||||
}
|
||||
}
|
||||
} else if (xml.nodeType == 3) { // text
|
||||
obj = xml.nodeValue;
|
||||
}
|
||||
|
||||
// do children
|
||||
if (xml.hasChildNodes()) {
|
||||
for (var i = 0; i < xml.childNodes.length; i++) {
|
||||
var item = xml.childNodes.item(i);
|
||||
var nodeName = item.nodeName;
|
||||
if (typeof (obj[nodeName]) == "undefined") {
|
||||
obj[nodeName] = this.xmlToJson(item);
|
||||
} else {
|
||||
if (typeof (obj[nodeName].push) == "undefined") {
|
||||
var old = obj[nodeName];
|
||||
obj[nodeName] = [];
|
||||
obj[nodeName].push(old);
|
||||
}
|
||||
obj[nodeName].push(this.xmlToJson(item));
|
||||
}
|
||||
}
|
||||
}
|
||||
return obj;
|
||||
};
|
||||
|
||||
cleanBuildingJson(dirtyJson, remove_duplicates = true, fix_esri_bug = true) {
|
||||
let building = {};
|
||||
building.name = dirtyJson.BuildingVulnerability.BuildingName["#text"];
|
||||
building.isExpanded = false;
|
||||
building.rooms = [];
|
||||
|
||||
if (!Array.isArray(dirtyJson.BuildingVulnerability.Rooms.Room)){
|
||||
dirtyJson.BuildingVulnerability.Rooms.Room = [dirtyJson.BuildingVulnerability.Rooms.Room]
|
||||
}
|
||||
|
||||
dirtyJson.BuildingVulnerability.Rooms.Room.forEach(room => {
|
||||
let room_tmp = {};
|
||||
room_tmp.name = room.RoomId["#text"];
|
||||
room_tmp.isExpanded = false;
|
||||
room_tmp.walls = [];
|
||||
if (room.RoomOuterWalls.OuterWall && Array.isArray(room.RoomOuterWalls.OuterWall)) {
|
||||
let wallCounter = 0;
|
||||
room.RoomOuterWalls.OuterWall.forEach(wall => {
|
||||
let wall_tmp = {}
|
||||
wall_tmp.isSelected = false;
|
||||
wall_tmp.name = wallCounter;
|
||||
wall_tmp.points = [];
|
||||
if (wall.OuterWallAreaElement.PolygonPoint) {
|
||||
wall.OuterWallAreaElement.PolygonPoint.forEach(point => {
|
||||
wall_tmp.points.push({ "x": +point.X["#text"], "y": +point.Y["#text"], "z": +point.Z["#text"] });
|
||||
});
|
||||
}
|
||||
room_tmp.walls.push(wall_tmp);
|
||||
wallCounter++;
|
||||
});
|
||||
}
|
||||
building.rooms.push(room_tmp);
|
||||
});
|
||||
|
||||
if (!remove_duplicates) return building
|
||||
building.rooms.forEach(room => {
|
||||
room.walls = room.walls.filter(wall => {
|
||||
let counter = 0;
|
||||
building.rooms.forEach(room_ => {
|
||||
room_.walls.forEach(wall_ => {
|
||||
if (JSON.stringify(wall.points) === JSON.stringify(wall_.points)) {
|
||||
counter++;
|
||||
}
|
||||
});
|
||||
});
|
||||
if (counter > 1) return false;
|
||||
return true;
|
||||
})
|
||||
});
|
||||
|
||||
if (!fix_esri_bug) return building;
|
||||
building.rooms.forEach(room => {
|
||||
room.walls.map((wall) => {
|
||||
let lowest_point = wall.points[0].z;
|
||||
wall.points.forEach(point => {
|
||||
if (point.z < lowest_point) lowest_point = point.z;
|
||||
});
|
||||
wall.points.forEach(point => {
|
||||
if (point.z > lowest_point) point.y += 0.0001;
|
||||
if (point.z > lowest_point) point.x += 0.0001;
|
||||
|
||||
});
|
||||
})
|
||||
|
||||
});
|
||||
return building;
|
||||
}
|
||||
|
||||
cleanEquipmentJson(dirtyJson) {
|
||||
let equipment = {};
|
||||
equipment.referencePoints = [];
|
||||
//streif/header/group/group/[1]/switch/[0]/group/externalReferences
|
||||
console.log(dirtyJson.STREIF.Header.Group.Group);
|
||||
let groups = dirtyJson.STREIF.Header.Group.Group;
|
||||
groups.shift();
|
||||
console.log(groups)
|
||||
groups.forEach(group => {
|
||||
console.log(group)
|
||||
if (!Array.isArray(group.Switch)) return;
|
||||
group.Switch.forEach(_switch => {
|
||||
|
||||
if (!Array.isArray(_switch.Group.External_Reference)){
|
||||
_switch.Group.External_Reference = [_switch.Group.External_Reference]
|
||||
}
|
||||
|
||||
_switch.Group.External_Reference.forEach(external_reference => {
|
||||
equipment.referencePoints.push({
|
||||
isExternal: false,
|
||||
name: external_reference.Name["#text"],
|
||||
coords: {
|
||||
x: +external_reference.Coord["@attributes"].X,
|
||||
y: +external_reference.Coord["@attributes"].Y,
|
||||
z: +external_reference.Coord["@attributes"].Z
|
||||
}
|
||||
})
|
||||
console.log(external_reference.Name);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const referencePoints = dirtyJson.STREIF.Header.Group.External_Reference;
|
||||
referencePoints.forEach(referencePoint => {
|
||||
equipment.referencePoints.push({
|
||||
isExternal: true,
|
||||
name: referencePoint.Name["#text"],
|
||||
coords: {
|
||||
x: +referencePoint.Coord["@attributes"].X,
|
||||
y: +referencePoint.Coord["@attributes"].Y,
|
||||
z: +referencePoint.Coord["@attributes"].Z
|
||||
}
|
||||
})
|
||||
});
|
||||
return equipment;
|
||||
}
|
||||
}
|
||||
|
||||
class DataProvider {
|
||||
constructor() {
|
||||
this.data = [];
|
||||
this.equipment = [];
|
||||
}
|
||||
addBuilding(building) {
|
||||
this.data.push(building);
|
||||
}
|
||||
getCurrentData() {
|
||||
return this.data;
|
||||
}
|
||||
addEquipment(equipment) {
|
||||
console.log(equipment);
|
||||
this.equipment.push(equipment);
|
||||
}
|
||||
getCurrentEquipment() {
|
||||
return this.equipment;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
class UIHandler {
|
||||
constructor(dataProvider) {
|
||||
this.dataProvider = dataProvider;
|
||||
this.rootElement = document.getElementById("myUL");
|
||||
}
|
||||
makeBuildingRow(building) {
|
||||
let row = document.createElement('div');
|
||||
row.classList.add("row");
|
||||
row.onclick = () => {
|
||||
building.isExpanded = !building.isExpanded;
|
||||
this.render();
|
||||
}
|
||||
let outerContainer = document.createElement('div');
|
||||
outerContainer.classList.add('col-12');
|
||||
outerContainer.classList.add('bg-light');
|
||||
row.appendChild(outerContainer);
|
||||
let fluidContainer = document.createElement('div');
|
||||
fluidContainer.classList.add('container-fluid');
|
||||
outerContainer.appendChild(fluidContainer);
|
||||
let innerRow = document.createElement('div');
|
||||
innerRow.classList.add('row');
|
||||
innerRow.classList.add("row-hover");
|
||||
fluidContainer.appendChild(innerRow);
|
||||
let segOne = document.createElement('div');
|
||||
segOne.classList.add('col-1');
|
||||
let segThree = document.createElement('div');
|
||||
segThree.classList.add('col-11');
|
||||
segThree.classList.add('p-2');
|
||||
segThree.classList.add('treeStruct');
|
||||
let segThreeInner_one = document.createElement('div');
|
||||
if (building.isExpanded) segThreeInner_one.classList.add('buildingTreeRight');
|
||||
let segThreeInner_two = document.createElement('div');
|
||||
if (building.isExpanded) segThreeInner_two.classList.add('buildingTreeBottom');
|
||||
segThree.innerText = 'Building ' + building.name;
|
||||
segThree.appendChild(segThreeInner_one);
|
||||
segThree.appendChild(segThreeInner_two);
|
||||
innerRow.appendChild(segOne);
|
||||
innerRow.appendChild(segThree);
|
||||
return row;
|
||||
}
|
||||
makeRoomRow(room) {
|
||||
let row = document.createElement('div');
|
||||
row.classList.add("row");
|
||||
row.onclick = () => {
|
||||
room.isExpanded = !room.isExpanded;
|
||||
this.render();
|
||||
}
|
||||
let outerContainer = document.createElement('div');
|
||||
outerContainer.classList.add('col-12');
|
||||
outerContainer.classList.add('bg-light');
|
||||
row.appendChild(outerContainer);
|
||||
let fluidContainer = document.createElement('div');
|
||||
fluidContainer.classList.add('container-fluid');
|
||||
outerContainer.appendChild(fluidContainer);
|
||||
let innerRow = document.createElement('div');
|
||||
innerRow.classList.add('row');
|
||||
innerRow.classList.add("row-hover");
|
||||
fluidContainer.appendChild(innerRow);
|
||||
let segOne = document.createElement('div');
|
||||
segOne.classList.add('col-1');
|
||||
let segTwo = document.createElement('div');
|
||||
segTwo.classList.add('col-1');
|
||||
segTwo.classList.add('border-dark');
|
||||
segTwo.classList.add('border-end');
|
||||
let segThree = document.createElement('div');
|
||||
segThree.classList.add('col-10');
|
||||
segThree.classList.add('p-2');
|
||||
segThree.classList.add('treeStruct');
|
||||
let segThreeInner_one = document.createElement('div');
|
||||
segThreeInner_one.classList.add('roomTreeRight');
|
||||
let segThreeInner_two = document.createElement('div');
|
||||
if (room.isExpanded) segThreeInner_two.classList.add('roomTreeBottom');
|
||||
segThree.innerText = 'Room ' + room.name;
|
||||
segThree.appendChild(segThreeInner_one);
|
||||
segThree.appendChild(segThreeInner_two);
|
||||
innerRow.appendChild(segOne);
|
||||
innerRow.appendChild(segTwo);
|
||||
innerRow.appendChild(segThree);
|
||||
return row;
|
||||
}
|
||||
makeWallRow(wall) {
|
||||
let row = document.createElement('div');
|
||||
row.classList.add("row");
|
||||
|
||||
let outerContainer = document.createElement('div');
|
||||
outerContainer.classList.add('col-12');
|
||||
outerContainer.classList.add('bg-light');
|
||||
row.appendChild(outerContainer);
|
||||
let fluidContainer = document.createElement('div');
|
||||
fluidContainer.classList.add('container-fluid');
|
||||
if (wall.isSelected) fluidContainer.classList.add("selectedWall");
|
||||
outerContainer.appendChild(fluidContainer);
|
||||
let innerRow = document.createElement('div');
|
||||
innerRow.classList.add('row');
|
||||
innerRow.classList.add("row-hover");
|
||||
fluidContainer.appendChild(innerRow);
|
||||
let segOne = document.createElement('div');
|
||||
segOne.classList.add('col-1');
|
||||
let segTwo = document.createElement('div');
|
||||
segTwo.classList.add('col-2');
|
||||
segTwo.classList.add('border-dark');
|
||||
segTwo.classList.add('border-end');
|
||||
let segThree = document.createElement('div');
|
||||
segThree.classList.add('col-9');
|
||||
segThree.classList.add('p-2');
|
||||
segThree.classList.add('treeStruct');
|
||||
let segThreeInner = document.createElement('div');
|
||||
segThreeInner.classList.add('wallTreeRight');
|
||||
segThree.innerText = 'Wall ' + wall.name;
|
||||
segThree.appendChild(segThreeInner);
|
||||
innerRow.appendChild(segOne);
|
||||
innerRow.appendChild(segTwo);
|
||||
innerRow.appendChild(segThree);
|
||||
return row;
|
||||
|
||||
}
|
||||
render() {
|
||||
while (this.rootElement.firstChild) {
|
||||
this.rootElement.removeChild(this.rootElement.firstChild);
|
||||
}
|
||||
let buildingArray = this.dataProvider.getCurrentData();
|
||||
buildingArray.forEach(building => {
|
||||
this.createBuilding(building);
|
||||
});
|
||||
}
|
||||
|
||||
createBuilding(buildingConfig) {
|
||||
let buildingListEntry = document.createElement("li");
|
||||
let buildingListEntrySpan = document.createElement("SPAN");
|
||||
buildingListEntrySpan.classList.add("caret");
|
||||
buildingListEntrySpan.appendChild(this.makeBuildingRow(buildingConfig));
|
||||
buildingListEntry.appendChild(buildingListEntrySpan);
|
||||
buildingListEntry.appendChild(this.createRoomList(buildingConfig.rooms, buildingConfig.isExpanded));
|
||||
document.getElementById('myUL').appendChild(buildingListEntry);
|
||||
}
|
||||
|
||||
createRoomList(roomArray, isExpanded) {
|
||||
let roomList = document.createElement("ul");
|
||||
roomList.classList.add("nested");
|
||||
if (isExpanded) roomList.classList.add("active");
|
||||
roomArray.forEach(room => {
|
||||
let roomListEntry = document.createElement("li");
|
||||
let roomListEntrySpan = document.createElement("SPAN");
|
||||
roomListEntrySpan.classList.add("caret");
|
||||
roomListEntrySpan.appendChild(this.makeRoomRow(room));
|
||||
roomListEntry.appendChild(roomListEntrySpan);
|
||||
roomListEntry.appendChild(this.createWallList(room.walls, room.isExpanded));
|
||||
roomList.appendChild(roomListEntry);
|
||||
});
|
||||
return roomList;
|
||||
}
|
||||
|
||||
createWallList(wallArray, isExpanded) {
|
||||
let wallList = document.createElement("ul");
|
||||
wallList.classList.add("nested");
|
||||
if (isExpanded) wallList.classList.add("active");
|
||||
wallArray.forEach(wall => {
|
||||
let wallListEntry = document.createElement("li");
|
||||
let wallListEntrySpan = document.createElement("SPAN");
|
||||
wallListEntrySpan.appendChild(this.makeWallRow(wall));
|
||||
wallListEntry.appendChild(wallListEntrySpan);
|
||||
wallList.appendChild(wallListEntry);
|
||||
});
|
||||
return wallList;
|
||||
}
|
||||
}
|
||||
|
||||
class DrawingHandler {
|
||||
constructor(dataProvider, uiHandler, graphicLayer, Point, Projection, Graphic, view, map) {
|
||||
this.dataProvider = dataProvider;
|
||||
this.uiHandler = uiHandler;
|
||||
this.graphicLayer = graphicLayer;
|
||||
this.Point = Point;
|
||||
this.Projection = Projection;
|
||||
this.Graphic = Graphic;
|
||||
this.view = view;
|
||||
this.map = map
|
||||
this.fillActive = true;
|
||||
this.view.on("click", (e) => {
|
||||
if (e.button === 0) {
|
||||
this.view.hitTest(e).then((res) => {
|
||||
if (res.results[0].graphic.geometry.type == "polygon") res.results[0].graphic.clickCallback()
|
||||
});
|
||||
}
|
||||
})
|
||||
const [r, g, b] = [Math.floor(Math.random() * 50) + 100, Math.floor(Math.random() * 50) + 150, 255];
|
||||
this.r = r;
|
||||
this.g = g;
|
||||
this.b = b;
|
||||
|
||||
this.fillSymbol = {
|
||||
type: "simple-fill", // autocasts as new SimpleFillSymbol()
|
||||
color: [this.r, this.g, this.b, 0.8],
|
||||
outline: {
|
||||
// autocasts as new SimpleLineSymbol()
|
||||
color: [255, 255, 255],
|
||||
width: 2
|
||||
}
|
||||
};
|
||||
this.nonFillSymbol = {
|
||||
type: "simple-fill", // autocasts as new SimpleFillSymbol()
|
||||
color: [this.r, this.g, this.b, 0.8],
|
||||
style: "none",
|
||||
outline: {
|
||||
// autocasts as new SimpleLineSymbol()
|
||||
color: [255, 255, 255],
|
||||
width: 2
|
||||
}
|
||||
};
|
||||
}
|
||||
draw() {
|
||||
this.Projection.load().then(() => {
|
||||
let buildings = this.dataProvider.getCurrentData();
|
||||
buildings.forEach(building => {
|
||||
building.rooms.forEach(room => {
|
||||
room.walls.forEach(wall => {
|
||||
const wallGeometry = {
|
||||
type: "polygon",
|
||||
rings: [],
|
||||
}
|
||||
|
||||
const markerSymbol = {
|
||||
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
|
||||
color: [this.r, this.g, this.b],
|
||||
size: "5px"
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
wall.points.forEach(point => {
|
||||
let p = {
|
||||
type: "point", // autocasts as new Point()
|
||||
x: 493063.5202829816 + point.x,
|
||||
y: 5878330.672506552 + point.y,
|
||||
z: 0 + point.z,
|
||||
spatialReference: {
|
||||
wkid: 32632
|
||||
}
|
||||
}
|
||||
let p_transformed = this.Projection.project(p, this.view.spatialReference);
|
||||
wallGeometry.rings.push([p_transformed.longitude, p_transformed.latitude, p_transformed.z]);
|
||||
|
||||
const pointGraphic = new this.Graphic({
|
||||
geometry: p_transformed,
|
||||
symbol: markerSymbol
|
||||
|
||||
});
|
||||
this.graphicLayer.add(pointGraphic);
|
||||
});
|
||||
wallGeometry.rings.push(wallGeometry.rings[0]);
|
||||
wallGeometry.rings = wallGeometry.rings.reverse();
|
||||
|
||||
let wallCoordTableContent = ``;
|
||||
wall.points.forEach(vertex => {
|
||||
wallCoordTableContent +=
|
||||
`<tr>
|
||||
<td>${parseFloat(vertex.x).toFixed(3)}</td>
|
||||
<td>${parseFloat(vertex.y).toFixed(3)}</td>
|
||||
<td>${parseFloat(vertex.z).toFixed(3)}</td>
|
||||
</tr>`
|
||||
});
|
||||
const wallCoordTable = `<table style="width:100%">
|
||||
<tr>
|
||||
<th>X</th>
|
||||
<th>Y</th>
|
||||
<th>Z</th>
|
||||
</tr>
|
||||
${wallCoordTableContent}
|
||||
</table>`
|
||||
|
||||
let logVertices = {
|
||||
title: "Log Vertices",
|
||||
id: `log${room.name}${wall.name}`,
|
||||
};
|
||||
|
||||
const wallAttributes = {
|
||||
name: `Room ${room.name} - Wall ${wall.name}`,
|
||||
ringSize: wallGeometry.rings.length,
|
||||
vertices: wallCoordTable
|
||||
}
|
||||
const wallPopupTemplate = {
|
||||
title: "{name}",
|
||||
content: [
|
||||
{
|
||||
type: "fields",
|
||||
fieldInfos: [
|
||||
{
|
||||
fieldName: "ringSize"
|
||||
},
|
||||
{
|
||||
fieldName: "vertices"
|
||||
},
|
||||
]
|
||||
}
|
||||
],
|
||||
actions: [logVertices]
|
||||
}
|
||||
|
||||
this.view.popup.on("trigger-action", (event) => {
|
||||
if (event.action.id === `log${room.name}${wall.name}`) {
|
||||
let array = [];
|
||||
wall.points.forEach(point => {
|
||||
array.push([point.x, point.y, point.z * 100]);
|
||||
});
|
||||
console.log(JSON.stringify(array));
|
||||
debugger;
|
||||
}
|
||||
});
|
||||
|
||||
const polygonGraphic = new this.Graphic({
|
||||
geometry: wallGeometry,
|
||||
symbol: this.fillActive ? this.fillSymbol : this.nonFillSymbol,
|
||||
attributes: wallAttributes,
|
||||
popupTemplate: wallPopupTemplate
|
||||
});
|
||||
|
||||
|
||||
polygonGraphic.clickCallback = () => {
|
||||
buildings.forEach(building_ => {
|
||||
building_.isExpanded = false;
|
||||
building_.rooms.forEach(room_ => {
|
||||
room_.isExpanded = false;
|
||||
room_.walls.forEach(wall_ => {
|
||||
wall_.isSelected = false;
|
||||
});
|
||||
});
|
||||
});
|
||||
building.isExpanded = true;
|
||||
room.isExpanded = true;
|
||||
wall.isSelected = true;
|
||||
this.uiHandler.render();
|
||||
}
|
||||
this.graphicLayer.add(polygonGraphic);
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
const externalMarkerSymbol = {
|
||||
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
|
||||
color: [255, 0, 0],
|
||||
size: "15px"
|
||||
};
|
||||
const internalMarkerSymbol = {
|
||||
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
|
||||
color: [0, 255, 0],
|
||||
size: "15px"
|
||||
};
|
||||
|
||||
let equipments = this.dataProvider.getCurrentEquipment();
|
||||
equipments.forEach(equipment => {
|
||||
equipment.referencePoints.forEach(referencePoint => {
|
||||
|
||||
let p = {
|
||||
type: "point", // autocasts as new Point()
|
||||
x: 493063.5202829816 + referencePoint.coords.x,
|
||||
y: 5878330.672506552 + referencePoint.coords.y,
|
||||
z: 0 + referencePoint.coords.z,
|
||||
spatialReference: {
|
||||
wkid: 32632
|
||||
}
|
||||
}
|
||||
let p_transformed = this.Projection.project(p, this.view.spatialReference);
|
||||
|
||||
const referencePointAttribute = {
|
||||
name: referencePoint.name,
|
||||
coords: `<table style="width:100%">
|
||||
<tr>
|
||||
<th>X</th>
|
||||
<th>Y</th>
|
||||
<th>Z</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>${parseFloat(referencePoint.coords.x).toFixed(3)}</td>
|
||||
<td>${parseFloat(referencePoint.coords.y).toFixed(3)}</td>
|
||||
<td>${parseFloat(referencePoint.coords.z).toFixed(3)}</td>
|
||||
</tr>
|
||||
</table>`
|
||||
}
|
||||
const referencePointAttributeTemplate = {
|
||||
title: "{name}",
|
||||
content: [
|
||||
{
|
||||
type: "fields",
|
||||
fieldInfos: [
|
||||
{
|
||||
fieldName: "coords"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
}
|
||||
|
||||
const pointGraphic = new this.Graphic({
|
||||
geometry: p_transformed,
|
||||
symbol: referencePoint.isExternal ? externalMarkerSymbol : internalMarkerSymbol,
|
||||
attributes: referencePointAttribute,
|
||||
popupTemplate: referencePointAttributeTemplate
|
||||
});
|
||||
this.graphicLayer.add(pointGraphic);
|
||||
});
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
toggleFill() {
|
||||
let useFill = !this.fillActive;
|
||||
this.fillActive = !this.fillActive;
|
||||
|
||||
let symbol = useFill ? this.fillSymbol : this.nonFillSymbol;
|
||||
this.graphicLayer.graphics.forEach(graphic => {
|
||||
if (graphic.geometry.type == "polygon") graphic.set('symbol', symbol);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//This is the main
|
||||
(() => {
|
||||
const fileManager = new FileManager();
|
||||
const dataProvider = new DataProvider();
|
||||
const uiHandler = new UIHandler(dataProvider);
|
||||
let drawingHandler;
|
||||
const initializationHandler = new InitializationHandler();
|
||||
initializationHandler.generateMap().then((esriLoad) => {
|
||||
esriObjects = esriLoad;
|
||||
drawingHandler = new DrawingHandler(dataProvider,
|
||||
uiHandler,
|
||||
esriObjects.graphicLayer,
|
||||
esriObjects.Point,
|
||||
esriObjects.Projection,
|
||||
esriObjects.Graphic,
|
||||
esriObjects.view,
|
||||
esriObjects.map
|
||||
);
|
||||
});
|
||||
|
||||
document.getElementById("flexSwitchCheckDefault").addEventListener("click", () => {
|
||||
drawingHandler.toggleFill();
|
||||
})
|
||||
|
||||
const buildingFile = document.getElementById('exampleFormControlFile1');
|
||||
buildingFile.onchange = async () => {
|
||||
const file = buildingFile.files[0];
|
||||
await fileManager.loadFileContent(file);
|
||||
dataProvider.addBuilding(fileManager.cleanBuildingJson(fileManager.getFileAsJson()));
|
||||
uiHandler.render();
|
||||
drawingHandler.draw();
|
||||
document.getElementById('modal-close-button').click();
|
||||
}
|
||||
|
||||
const equipmentFile = document.getElementById('exampleFormControlFile2');
|
||||
equipmentFile.onchange = async () => {
|
||||
const file = equipmentFile.files[0];
|
||||
await fileManager.loadFileContent(file);
|
||||
console.log(fileManager.getFileAsJson());
|
||||
dataProvider.addEquipment(fileManager.cleanEquipmentJson(fileManager.getFileAsJson()));
|
||||
drawingHandler.draw();
|
||||
document.getElementById('modal-close-button').click();
|
||||
}
|
||||
})();
|
||||
@@ -1,99 +0,0 @@
|
||||
/* Remove default bullets */
|
||||
ul, #myUL {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
/* Remove margins and padding from the parent ul */
|
||||
#myUL {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Style the caret/arrow */
|
||||
.caret {
|
||||
cursor: pointer;
|
||||
user-select: none; /* Prevent text selection */
|
||||
}
|
||||
|
||||
/* Hide the nested list */
|
||||
.nested {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
|
||||
.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.treeStruct{
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.buildingTreeRight{
|
||||
height: 20px;
|
||||
width: 4px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
border-left: 1px solid;
|
||||
border-top: 1px solid;
|
||||
}
|
||||
.buildingTreeBottom{
|
||||
height: 0px;
|
||||
width: 43px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
.roomTreeRight{
|
||||
height: 20px;
|
||||
width: 4px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
border-top: 1px solid;
|
||||
}
|
||||
.roomTreeBottom{
|
||||
height: 0px;
|
||||
width: 44px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
.wallTreeRight{
|
||||
height: 20px;
|
||||
width: 4px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
border-top: 1px solid;
|
||||
}
|
||||
|
||||
.row-hover:hover{
|
||||
background-color: #0d6efd;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.esri-widget__table tr th{
|
||||
width:20% !important;
|
||||
font-weight: 100;
|
||||
}
|
||||
.esri-view-width-xlarge .esri-popup__main-container{
|
||||
width: 600px !important;
|
||||
}
|
||||
.esri-widget__table tr td{
|
||||
width: 0 !important;
|
||||
}
|
||||
|
||||
.selectedWall{
|
||||
background-color: #0d6efd;
|
||||
color: white;
|
||||
}
|
||||
@@ -1,214 +0,0 @@
|
||||
<!DOCTYPE HTML>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>EventViewer</title>
|
||||
<link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
|
||||
<link rel="stylesheet" href="EventViewStyle.css">
|
||||
<script src="https://js.arcgis.com/4.7/"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="EventView.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<hr>
|
||||
|
||||
<table id="HeaderTable">
|
||||
<tr id="HeaderTableRow">
|
||||
<td>
|
||||
<form>
|
||||
<input type="text" value="" id="ipadresse" />
|
||||
</form>
|
||||
</td>
|
||||
<td>
|
||||
<div id="WebSocketStart">
|
||||
<select id="selects" onchange="connect()"></select>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div id="Serverconnect">
|
||||
<font color="red">
|
||||
Server: not connected
|
||||
</font>
|
||||
</div>
|
||||
</td>
|
||||
<td id="headerTitle">
|
||||
EventViewer
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<hr>
|
||||
|
||||
<div id="reqTypesDiv">
|
||||
|
||||
<input type="date" id="startDate" />
|
||||
<input type="time" id="startTime">
|
||||
<input type="number" id="hours">
|
||||
<input type="button" value="Submit" onclick="sendRequest()">
|
||||
|
||||
<br>
|
||||
|
||||
<table class="selects">
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="11" name="rqTypes">Audio
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="3" name="rqTypes">BiteMessage
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="7" name="rqTypes">CameraAuido
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="8" name="rqTypes">CameraVideo
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="26" name="rqTypes">CrossGlobalBorderline
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="21" name="rqTypes">CrossLocalBorderline
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="112" name="rqTypes">EmergencyCall
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="17" name="rqTypes">EnterDangerArea
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="22" name="rqTypes">EnterFunctionalArea
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="19" name="rqTypes">EnterMineArea
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="24" name="rqTypes">EnterNuclear
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="100" name="rqTypes">EquipmentErrorReport
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="4" name="rqTypes">FireEvent
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="28" name="rqTypes">FriendlyFire
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="1" name="rqTypes">Hit
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="27" name="rqTypes">HitB
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="5" name="rqTypes">HitBuilding
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="16" name="rqTypes">HitC
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="13" name="rqTypes">HitIndirect
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="14" name="rqTypes">HitMine
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="15" name="rqTypes">HitN
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="18" name="rqTypes">LeaveDangerArea
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="23" name="rqTypes">LeaveFunctionalArea
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="20" name="rqTypes">LeaveMineArea
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="25" name="rqTypes">LeaveNuclear
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="6" name="rqTypes">Manipulation
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="9" name="rqTypes">RadioCnr
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="10" name="rqTypes">Radio Tvc
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="0" name="rqTypes">Unknown
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="12" name="rqTypes">Video
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input class="RequestedTypes" type="checkbox" onchange="place()" value="2" name="rqTypes">WeaponAssignment
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<button onclick="selectAll()">Select All</button>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<button onclick="deselectAll()">Deselect All</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="mapDiv">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
@@ -1,437 +0,0 @@
|
||||
class AEvent {
|
||||
constructor(id, eventTypeId, equipmentNumber, participantId, partyId, position, properties, sampleTime, shortName) {
|
||||
this.id = id;
|
||||
this.eventTypeId = eventTypeId;
|
||||
this.equipmentNumber = equipmentNumber;
|
||||
this.participantId = participantId;
|
||||
this.partyId = partyId;
|
||||
this.position = position;
|
||||
this.properties = properties;
|
||||
this.sampleTime = sampleTime;
|
||||
this.shortName = shortName;
|
||||
this.timeSinceStart;
|
||||
this.EventTypeName;
|
||||
this.color;
|
||||
this.graphic = null;
|
||||
this.type = "event";
|
||||
this.status = "not ready";
|
||||
|
||||
}
|
||||
setEventTypeName() {
|
||||
switch (this.eventTypeId) {
|
||||
case 0:
|
||||
this.EventTypeName = "unknown"
|
||||
this.color = "brown";
|
||||
break;
|
||||
case 1:
|
||||
this.EventTypeName = "Hit"
|
||||
this.color = "green";
|
||||
break;
|
||||
case 10:
|
||||
this.EventTypeName = "RadioTvc"
|
||||
this.color = "greeN";
|
||||
break;
|
||||
case 11:
|
||||
this.EventTypeName = "Audio"
|
||||
this.color = "blue";
|
||||
break;
|
||||
case 12:
|
||||
this.EventTypeName = "Video"
|
||||
this.color = "yellow";
|
||||
break;
|
||||
case 13:
|
||||
this.EventTypeName = "HitIndirect"
|
||||
this.color = "orange";
|
||||
break;
|
||||
case 14:
|
||||
this.EventTypeName = "HitMine"
|
||||
this.color = "brown";
|
||||
break;
|
||||
case 15:
|
||||
this.EventTypeName = "HitN"
|
||||
this.color = "pink";
|
||||
break;
|
||||
case 16:
|
||||
this.EventTypeName = "HitC"
|
||||
this.color = "yellow";
|
||||
break;
|
||||
case 17:
|
||||
this.EventTypeName = "EnterDangerArea"
|
||||
this.color = "blue";
|
||||
break;
|
||||
case 18:
|
||||
this.EventTypeName = "LeaveDangerArea"
|
||||
this.color = "red";
|
||||
break;
|
||||
case 19:
|
||||
this.EventTypeName = "EnterMineArea"
|
||||
this.color = "orange";
|
||||
break;
|
||||
case 2:
|
||||
this.EventTypeName = "WeaponAssignment"
|
||||
this.color = "orange";
|
||||
break;
|
||||
case 20:
|
||||
this.EventTypeName = "LeaveMineArea"
|
||||
this.colro = "brown";
|
||||
break;
|
||||
case 21:
|
||||
this.EventTypeName = "CrossLocalBorderline"
|
||||
this.color = "orange";
|
||||
break;
|
||||
case 22:
|
||||
this.EventTypeName = "EnterFunctionalArea"
|
||||
this.color = "green";
|
||||
break;
|
||||
case 23:
|
||||
this.EventTypeName = "LeaveFunctionalArea"
|
||||
this.color = "yellow"
|
||||
break;
|
||||
case 24:
|
||||
this.EventTypeName = "EnterNuclear"
|
||||
break;
|
||||
case 25:
|
||||
this.EventTypeName = "LeaveNuclear"
|
||||
break;
|
||||
case 26:
|
||||
this.EventTypeName = "CrossGlobalBorderline"
|
||||
this.color = "orange";
|
||||
break;
|
||||
case 27:
|
||||
this.EventTypeName = "HitB"
|
||||
break;
|
||||
case 3:
|
||||
this.EventTypeName = "BiteMessage"
|
||||
this.color = "red";
|
||||
break;
|
||||
case 4:
|
||||
this.EventTypeName = "FireEvent"
|
||||
this.color = "blue";
|
||||
break;
|
||||
case 5:
|
||||
this.EventTypeName = "HitBuilding"
|
||||
this.color = "green";
|
||||
break;
|
||||
case 6:
|
||||
this.EventTypeName = "Manipulation"
|
||||
this.color = "blue";
|
||||
break;
|
||||
case 7:
|
||||
this.EventTypeName = "CameraAudio"
|
||||
this.color = "green";
|
||||
break;
|
||||
case 8:
|
||||
this.EventTypeName = "CameraVideo"
|
||||
this.color = "yeollow";
|
||||
break;
|
||||
case 9:
|
||||
this.EventTypeName = "RadioCnr"
|
||||
this.color = "red";
|
||||
break;
|
||||
case 28:
|
||||
this.EventTypeName = "FriendlyFire"
|
||||
break;
|
||||
case 100:
|
||||
this.EventTypeName = "EquipmentErrorReport"
|
||||
break;
|
||||
case 112:
|
||||
this.EventTypeName = "EmergencyCall"
|
||||
break;
|
||||
default:
|
||||
this.EventTypeName = "none"
|
||||
this.color = "pink";
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
var eventLayer = null;
|
||||
var ipadresse = "localhost:";
|
||||
var port = "7300";
|
||||
var objArr = [];
|
||||
var Selects = [];
|
||||
|
||||
window.onload = function () {
|
||||
getPorts();
|
||||
}
|
||||
function getPorts() {
|
||||
var ports = [];
|
||||
if ("WebSocket" in window) {
|
||||
{
|
||||
exampleSocket = new WebSocket("ws://" + ipadresse + port) //connected standartmäßig auf den port 7300
|
||||
document.getElementById("ipadresse").value = "";
|
||||
document.getElementById("ipadresse").value = ipadresse + port;
|
||||
}
|
||||
exampleSocket.onopen = function () { //ist die Verbindung hergestellt so wird eine Portabfrage an den port 7300 geschickt
|
||||
document.getElementById("Serverconnect").innerHTML = "Server: connected";
|
||||
document.getElementById("Serverconnect").style.color = "green"
|
||||
sendMsg();//Anfrage aller Übungen
|
||||
};
|
||||
exampleSocket.onmessage = function (event) { //filtert die Nachrichten und erstellt ein dropdown basierend auf den erhaltenen daten
|
||||
var choices = "";
|
||||
choices += "<option value=\"\" selected>Übungen</option>"
|
||||
msg = JSON.parse(event.data);
|
||||
ports = msg.data;
|
||||
ports.forEach(obj => {
|
||||
obj.services.forEach(subObj => {
|
||||
if (subObj.name === "ExerciseEventManagement") {
|
||||
choices += "<option value=" + subObj.ports[0].number + ">Übung" + obj.exerciseId + "</option>";
|
||||
}
|
||||
});
|
||||
});
|
||||
document.getElementById("selects").innerHTML += choices;
|
||||
require([
|
||||
"esri/Map",
|
||||
"esri/views/MapView",
|
||||
"esri/layers/TileLayer",
|
||||
"esri/layers/GraphicsLayer",
|
||||
"esri/geometry/Point",
|
||||
"dojo/domReady!",
|
||||
],
|
||||
function (
|
||||
Map,
|
||||
MapView,
|
||||
TileLayer,
|
||||
GraphicsLayer,
|
||||
Point
|
||||
) {
|
||||
map = new Map({
|
||||
});
|
||||
|
||||
view = new MapView({
|
||||
container: "mapDiv",
|
||||
map: map,
|
||||
center: 493069.7231922282 / 5878331.098702803,
|
||||
scale: 1000
|
||||
});
|
||||
|
||||
view.on("click", eventHandler); // für maus
|
||||
function eventHandler(event) {
|
||||
view.hitTest(event).then(getGraphics);
|
||||
function getGraphics(response) {
|
||||
let point = view.toMap({ x: response.screenPoint.x, y: response.screenPoint.y })
|
||||
if (response.results.length > 0 && response.screenPoint.button === 0) {
|
||||
currentGraphic = response.results[0];
|
||||
} else if (response.results.length === 0 && response.screenPoint.button === 0) {
|
||||
document.getElementById("newPosition").innerHTML = `neue Position: ${point.x} / ${point.y}`;
|
||||
newPosition = {
|
||||
x: point.x,
|
||||
y: point.y
|
||||
}
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
tile = new TileLayer({
|
||||
url: "http://excgeo21.sl.defence-elec.de/arcgis/rest/services/Bremen/BremenHemelingenAerialGeoAmt_32632/MapServer"
|
||||
});
|
||||
|
||||
tile.load().then(function () {
|
||||
map.layers.add(tile);
|
||||
eventLayer = new GraphicsLayer();
|
||||
map.add(eventLayer);
|
||||
})
|
||||
|
||||
var pt = new Point({
|
||||
x: 493066.09059222677,
|
||||
y: 5878370.0818853425,
|
||||
spatialReference: 32632
|
||||
});
|
||||
|
||||
view.center = pt;
|
||||
}
|
||||
);
|
||||
};
|
||||
}
|
||||
else {
|
||||
alert("WebSocket is NOT supported by your Browser!");
|
||||
}
|
||||
}
|
||||
function sendMsg() { //abfrage für alle ServicePortInformationen
|
||||
exampleSocket.send(JSON.stringify({
|
||||
type: "servicePortsInformationRequest",
|
||||
uuid: "7777",
|
||||
}));
|
||||
}
|
||||
|
||||
function connect() { //wird aufgerufen sobald eine Übung ausgewählt wurd(dropdown)
|
||||
port = document.getElementById("selects").value;
|
||||
requestUrl = ipadresse.concat(port);
|
||||
document.getElementById("ipadresse").value = "";
|
||||
document.getElementById("ipadresse").value = ipadresse + port;
|
||||
}
|
||||
|
||||
function sendRequest() {
|
||||
objArr = [];
|
||||
var date = Date.parse(document.getElementById("startDate").value) - (2 * 1000 * 60 * 60);
|
||||
var time = document.getElementById("startTime").value.split(':');
|
||||
time = (time[0] * 60 * 60 * 1000) + (time[1] * 60 * 1000);
|
||||
var timespan = document.getElementById("hours").value;
|
||||
timespan = parseInt(timespan);
|
||||
timespan += 1;
|
||||
timespan = timespan * 60 * 60 * 1000;
|
||||
startTime = date + time;
|
||||
endTime = startTime + timespan;
|
||||
var UrlPart = "/request?requestId=1&from=" + startTime + "&to=" + endTime;
|
||||
var checkboxes = document.getElementsByName('rqTypes');
|
||||
var checks = 0;
|
||||
for (var i = 0; i < checkboxes.length; i++) {
|
||||
if (checks === 0 && checkboxes[i].checked) UrlPart += "&eventTypeId="
|
||||
if (checks > 0 && checkboxes[i].checked) {
|
||||
UrlPart += ",";
|
||||
}
|
||||
if (checkboxes[i].checked) {
|
||||
UrlPart += checkboxes[i].value;
|
||||
checks++;
|
||||
}
|
||||
}
|
||||
requestUrl = ipadresse + port + UrlPart;
|
||||
connectToSelectedSocket();
|
||||
}
|
||||
|
||||
function connectToSelectedSocket() {
|
||||
if ("WebSocket" in window) {
|
||||
{
|
||||
exampleSocket = new WebSocket("ws://" + requestUrl);
|
||||
document.getElementById("Serverconnect").innerHTML = "Server: not connected";
|
||||
document.getElementById("Serverconnect").style.color = "red"
|
||||
}
|
||||
exampleSocket.onopen = function () {
|
||||
document.getElementById("Serverconnect").innerHTML = "Server: connected";
|
||||
document.getElementById("Serverconnect").style.color = "green"
|
||||
};
|
||||
exampleSocket.onmessage = function (event) {
|
||||
var msg = JSON.parse(event.data);
|
||||
createEvents(msg);
|
||||
};
|
||||
}
|
||||
else {
|
||||
alert("WebSocket is NOT supported by your Browser!");
|
||||
}
|
||||
}
|
||||
|
||||
function createEvents(events) {
|
||||
if (events.length != undefined) {
|
||||
events.forEach(evnt => {
|
||||
var event = new AEvent(evnt.id, evnt.eventTypeId, evnt.equipmentNumber, evnt.participantId, evnt.partyId, evnt.position, evnt.properties, evnt.sampleTime, evnt.shortName);
|
||||
objArr.push(event);
|
||||
});
|
||||
}
|
||||
formatObjs();
|
||||
}
|
||||
|
||||
function formatObjs() {
|
||||
require([
|
||||
"esri/geometry/Point",
|
||||
"esri/geometry/projection",
|
||||
"esri/Graphic",
|
||||
], function (Point, projection, Graphic) {
|
||||
projection.load().then(function () {
|
||||
objArr.forEach(obj => {
|
||||
if (obj.status == "not ready") {
|
||||
obj.setEventTypeName();
|
||||
let eventEsriP = new Point({
|
||||
x: (obj.position.x * 180) / Math.PI,
|
||||
y: (obj.position.y * 180) / Math.PI,
|
||||
});
|
||||
eventEsriP = projection.project(eventEsriP, getSpatialRefOut());
|
||||
|
||||
let eventS = {
|
||||
type: "simple-marker",
|
||||
color: obj.color,
|
||||
};
|
||||
let eventEventAttribs = {
|
||||
id: obj.id,
|
||||
eventTypeId: obj.eventTypeId,
|
||||
equipmentNumber: obj.equipmentNumber,
|
||||
participantId: obj.participantId,
|
||||
partyId: obj.partyId,
|
||||
positionX: obj.positionX,
|
||||
positionY: obj.positionY,
|
||||
positionZ: obj.positionZ,
|
||||
properties: obj.properties,
|
||||
shortName: obj.shortName,
|
||||
EventTypeName: obj.EventTypeName,
|
||||
type: obj.type
|
||||
};
|
||||
|
||||
obj.graphic = new Graphic({
|
||||
geometry: eventEsriP,
|
||||
symbol: eventS,
|
||||
attributes: eventEventAttribs,
|
||||
popupTemplate: {
|
||||
title: "Event",
|
||||
content: [{
|
||||
type: "fields",
|
||||
fieldInfos: [{
|
||||
fieldName: "EventTypeName"
|
||||
}, {
|
||||
fieldName: "id"
|
||||
}, {
|
||||
fieldName: "equipmentNumber"
|
||||
}, {
|
||||
fieldName: "participantId"
|
||||
}, {
|
||||
fieldName: "partyId"
|
||||
}, {
|
||||
fieldName: "positionX"
|
||||
}, {
|
||||
fieldName: "positionY"
|
||||
}, {
|
||||
fieldName: "positionZ"
|
||||
}, {
|
||||
fieldName: "properties"
|
||||
}, {
|
||||
fieldName: "shortName"
|
||||
}, {
|
||||
fieldName: "eventTypeId"
|
||||
}]
|
||||
}],
|
||||
}
|
||||
});
|
||||
obj.status = "ready";
|
||||
};
|
||||
});
|
||||
place();
|
||||
});
|
||||
});
|
||||
};
|
||||
function place() {
|
||||
console.log("placing");
|
||||
eventLayer.removeAll();
|
||||
Selects = [];
|
||||
var checkboxes = document.getElementsByName('rqTypes');
|
||||
checkboxes.forEach(checkbox => {
|
||||
if (checkbox.checked) {
|
||||
Selects.push(parseInt(checkbox.value));
|
||||
}
|
||||
});
|
||||
objArr.forEach(event => {
|
||||
console.log(event);
|
||||
if (Selects.includes(event.eventTypeId)) {
|
||||
console.log("hit");
|
||||
eventLayer.add(event.graphic);
|
||||
}
|
||||
});
|
||||
}
|
||||
function getSpatialRefOut() {
|
||||
var spatialOut = view.spatialReference;
|
||||
return spatialOut;
|
||||
}
|
||||
function getWkid() {
|
||||
var wkid = view.spatialReference.__accessor__.store._values.wkid;
|
||||
return (wkid);
|
||||
}
|
||||
function selectAll() {
|
||||
var checkboxes = document.getElementsByName('rqTypes');
|
||||
checkboxes.forEach(checkbox => {
|
||||
checkbox.checked = true;
|
||||
});
|
||||
place();
|
||||
}
|
||||
function deselectAll() {
|
||||
var checkboxes = document.getElementsByName('rqTypes');
|
||||
checkboxes.forEach(checkbox => {
|
||||
checkbox.checked = false;
|
||||
});
|
||||
place();
|
||||
}
|
||||
@@ -1,111 +0,0 @@
|
||||
hr {
|
||||
color: black;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
position: relative;
|
||||
width: auto;
|
||||
display: block;
|
||||
table-layout: fixed;
|
||||
padding: 8px;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
input[type="button"]{
|
||||
height:32px;
|
||||
width:100px;
|
||||
}
|
||||
|
||||
input[type="number"], input[type="time"]{
|
||||
height:1px;
|
||||
width:100px;
|
||||
}
|
||||
|
||||
input[type="date"]{
|
||||
height:1px;
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
#mapDiv {
|
||||
border: 2px solid black;
|
||||
height: 820px;
|
||||
width: 73%;
|
||||
}
|
||||
|
||||
#headerTitle{
|
||||
font-size:26px;
|
||||
padding-left: 50%;
|
||||
}
|
||||
|
||||
#reqTypesDiv{
|
||||
float: right;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1900px){
|
||||
.selects {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.selects td {
|
||||
display: block;
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px){
|
||||
.selects {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.selects td {
|
||||
display: inline;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
#mapDiv {
|
||||
border: 2px solid black;
|
||||
height: 820px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#reqTypesDiv{
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 950px){
|
||||
#headerTitle{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
table tr {
|
||||
display: block;
|
||||
}
|
||||
|
||||
table td {
|
||||
display: block;
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 458px) {
|
||||
.selects {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.selects td {
|
||||
display: block;
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
@@ -1,72 +0,0 @@
|
||||
<!DOCTYPE HTML>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>3D-Verwundungsmodell</title>
|
||||
<style>
|
||||
table {
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.headcol {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#mapDiv {
|
||||
position: relative;
|
||||
height: 760px;
|
||||
width: 72.5%;
|
||||
}
|
||||
|
||||
#infoDiv {
|
||||
position: absolute;
|
||||
top: 12%;
|
||||
left: 70%;
|
||||
}
|
||||
|
||||
#infoDiv input {
|
||||
border: none;
|
||||
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
|
||||
}
|
||||
|
||||
input {
|
||||
position: relative;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
|
||||
<script src="https://js.arcgis.com/4.7/"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="LaufwegDarstellung.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1 style="position:relative; text-align: center; font-size: 35px;">Laufwegdarstellung</h1>
|
||||
<hr style="position: relative;">
|
||||
<div style="position: absolute; left: 1400px; width: 500px;">
|
||||
<div style="position: relative; left: 20px">Path .xml-File:</div>
|
||||
<input type="file" name="myfile" id="PathUpload" />
|
||||
<hr style="width: 510px;">
|
||||
<div style="left: 20px;position: relative">
|
||||
<button onclick="toggleBuildings() ">toggle Buildings</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:85%; border-left: 2px solid black; position:absolute; right: 520px;top: 95px; "></div>
|
||||
<div id="mapDiv">
|
||||
<div id="infoDiv">
|
||||
<!-- <input class="esri-component esri-widget-button esri-widget esri-interactive " type="button " id="switch-btn
|
||||
" value="3D "> -->
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -1,160 +0,0 @@
|
||||
|
||||
class PolyLineObj {
|
||||
constructor(path) {
|
||||
this.path = path;
|
||||
this.graphic = null;
|
||||
}
|
||||
}
|
||||
|
||||
var parser, xmlDoc;
|
||||
var parser = new DOMParser();
|
||||
var graphicLayer = null;
|
||||
var color = null;
|
||||
var x = 1;
|
||||
|
||||
window.onload = function () {
|
||||
document.getElementById('PathUpload').addEventListener('change', pathXml, false);
|
||||
generateMap();
|
||||
}
|
||||
|
||||
function generateMap() {
|
||||
require([
|
||||
"esri/Map",
|
||||
"esri/views/SceneView",
|
||||
"esri/layers/TileLayer",
|
||||
"esri/layers/SceneLayer",
|
||||
"esri/layers/GraphicsLayer",
|
||||
"dojo/domReady!",
|
||||
],
|
||||
function (
|
||||
Map,
|
||||
SceneView,
|
||||
TileLayer,
|
||||
SceneLayer,
|
||||
GraphicsLayer,
|
||||
) {
|
||||
map = new Map({
|
||||
// basemap: "topo"
|
||||
});
|
||||
view = new SceneView({
|
||||
container: "mapDiv",
|
||||
map: map,
|
||||
scale: 1000,
|
||||
camera: {
|
||||
position: {
|
||||
x: 8.896638,
|
||||
y: 53.054441,
|
||||
z: 40
|
||||
}
|
||||
}
|
||||
});
|
||||
tile = new TileLayer({
|
||||
url: "http://excgeo21.sl.defence-elec.de/arcgis/rest/services/Bremen/Hemelingen_TIF_WebMerc/MapServer",
|
||||
})
|
||||
feature = new SceneLayer({
|
||||
url: "http://excgeo21.sl.defence-elec.de/arcgis/rest/services/Hosted/BT56_rev576/SceneServer",
|
||||
});
|
||||
map.add(feature);
|
||||
map.add(tile);
|
||||
graphicLayer = new GraphicsLayer();
|
||||
map.add(graphicLayer);
|
||||
view.on("click", eventHandler);
|
||||
function eventHandler(event) {
|
||||
view.hitTest(event).then(getGraphics);
|
||||
function getGraphics(response) {
|
||||
selected = response.results[0].graphic.__accessor__.store._values.attributes.name;
|
||||
}
|
||||
};
|
||||
view.popup.on("trigger-action", function (event) {
|
||||
if (event.action.id === "highlight") {
|
||||
PolyObjArray.forEach(polyObj => {
|
||||
if (polyObj.name == selected) {
|
||||
var newGraphic = polyObj.graphic.clone();
|
||||
newGraphic.symbol = alternativeSymbol;
|
||||
graphicLayer.remove(polyObj.graphic);
|
||||
polyObj.alternativGraphic = newGraphic;
|
||||
graphicLayer.add(polyObj.alternativGraphic);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function pathXml(event) {
|
||||
event.preventDefault();
|
||||
var XMLFile = event.target.files[0];
|
||||
var r = Math.floor(Math.random() * 255);
|
||||
var g = Math.floor(Math.random() * 255);
|
||||
var b = Math.floor(Math.random() * 255);
|
||||
color = { r: r, g: g, b: b };
|
||||
parseXML(XMLFile);
|
||||
}
|
||||
|
||||
function parseXML(XMLFile) {
|
||||
var file = XMLFile;
|
||||
var reader = new FileReader();
|
||||
reader.onload = function (event) {
|
||||
readXML = event.target.result;
|
||||
xmlDoc = parser.parseFromString(readXML, "application/xml");
|
||||
createPath();
|
||||
}
|
||||
reader.readAsText(file);
|
||||
}
|
||||
|
||||
|
||||
function createPath() {
|
||||
var points = [];
|
||||
var pathArray = [];
|
||||
points = Array.from(xmlDoc.getElementsByTagName("trkpt"));
|
||||
points.forEach(point => {
|
||||
var pathpoint = [parseFloat(point.attributes[1].value), parseFloat(point.attributes[0].value), parseFloat(point.children[0].textContent) / 100];
|
||||
pathArray.push(pathpoint);
|
||||
});
|
||||
var polyline_ = new PolyLineObj(pathArray);
|
||||
createPolyLineGraphic(polyline_);
|
||||
}
|
||||
|
||||
|
||||
function getWkid() {
|
||||
var wkid = view.spatialReference.__accessor__.store._values.wkid;
|
||||
return (wkid);
|
||||
}
|
||||
function getSpatialRefOut() {
|
||||
var spatialOut = view.spatialReference;
|
||||
return spatialOut;
|
||||
}
|
||||
function createPolyLineGraphic(polyline_) {
|
||||
require([
|
||||
"esri/Graphic",
|
||||
],
|
||||
function (
|
||||
Graphic
|
||||
) {
|
||||
var polyline = {
|
||||
type: "polyline",
|
||||
paths: polyline_.path,
|
||||
}
|
||||
var lineSymbol = {
|
||||
type: "simple-line", // autocasts as SimpleLineSymbol()
|
||||
color: [color.r, color.g, color.b],
|
||||
width: 4
|
||||
};
|
||||
var polylineGraphic = new Graphic({
|
||||
geometry: polyline,
|
||||
symbol: lineSymbol
|
||||
});
|
||||
|
||||
polyline_.graphic = polylineGraphic;
|
||||
console.log(polyline_);
|
||||
graphicLayer.add(polyline_.graphic);
|
||||
})
|
||||
}
|
||||
|
||||
function toggleBuildings() {
|
||||
x++;
|
||||
if (x % 2 == 0) map.remove(feature)
|
||||
else map.add(feature);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,107 +0,0 @@
|
||||
<!DOCTYPE HTML>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>MapView</title>
|
||||
<link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
|
||||
<link rel="stylesheet" href="MapViewStyle.css">
|
||||
<script src="https://js.arcgis.com/4.7/"></script>
|
||||
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
|
||||
<script src="MapView2.0.js"></script>
|
||||
<!-- 192.168.133.140: -->
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<hr>
|
||||
|
||||
<div id="header">
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
ISM:
|
||||
</td>
|
||||
<td>
|
||||
<form>
|
||||
<input type="text" value="" id="ipadresse" />
|
||||
</form>
|
||||
</td>
|
||||
<td>
|
||||
<form>
|
||||
<input type="text" value="" id="port" />
|
||||
</form>
|
||||
</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>
|
||||
<button onclick="reconnect()">Reconnect</button>
|
||||
</td>
|
||||
<td>
|
||||
<div id="Serverconnect">
|
||||
<font color="red">
|
||||
Server: not connected
|
||||
</font>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
SendPos:
|
||||
</td>
|
||||
<td>
|
||||
<form>
|
||||
<input type="text" value="" id="ipadresseSendPos" />
|
||||
</form>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<form>
|
||||
<input type="text" value="" id="portSendPos" />
|
||||
</form>
|
||||
</td>
|
||||
<td>
|
||||
EquipNr.:
|
||||
</td>
|
||||
<td>
|
||||
<form>
|
||||
<input type="text" value="" id="equipmentNumber" placeholder="EqNr">
|
||||
</form>
|
||||
</td>
|
||||
<td>
|
||||
<button onclick="connectSendPos()">Connect</button>
|
||||
</td>
|
||||
<td>
|
||||
<div id="SendPosServerconnect">
|
||||
<font color="red">
|
||||
Server: not connected
|
||||
</font>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div id="layersAndAssets">
|
||||
<h1>Layers</h1>
|
||||
<div id="layers">
|
||||
</div>
|
||||
<h1>Types of Assets</h1>
|
||||
<div id="AssetTypesDiv">
|
||||
Lädt..
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="mapDiv">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
@@ -1,560 +0,0 @@
|
||||
class Footprint {
|
||||
|
||||
constructor(name, id, path, refPoint, z, mseId) {
|
||||
this.name = name;
|
||||
this.id = id;
|
||||
this.path = path;
|
||||
this.refPoint = refPoint;
|
||||
this.type = "footprint";
|
||||
this.graphic = null;
|
||||
this.status = "not ready";
|
||||
this.z = z;
|
||||
this.mseId = mseId;
|
||||
}
|
||||
}
|
||||
|
||||
class MountingPoint {
|
||||
|
||||
constructor(name, id, levelId, objId, position, roomId, supportedAsset) {
|
||||
this.name = name;
|
||||
this.id = id;
|
||||
this.levelId = levelId;
|
||||
this.objId = objId;
|
||||
this.position = position; //wird als positionsObjekt übergeben. Bezieht sich auf Referenzpunkt des zugehörigen Gebäudes
|
||||
this.roomId = roomId;
|
||||
this.supportedAsset = supportedAsset;
|
||||
this.type = "mountingPoint";
|
||||
this.graphic = null;
|
||||
this.status = "not ready";
|
||||
}
|
||||
}
|
||||
|
||||
class layer {
|
||||
|
||||
constructor(name) {
|
||||
this.name = name;
|
||||
this.ids = [];
|
||||
this.layer = null;
|
||||
}
|
||||
}
|
||||
|
||||
let ipadresse = "localhost:";
|
||||
let ipadresseSendPos = "localhost:";
|
||||
let port = "2080";
|
||||
let portSendPos = "12346";
|
||||
let layerArr = [];
|
||||
let objArr = [];
|
||||
let AssetTypeArr = [];
|
||||
let socket;
|
||||
let equipmentNumber = "3801";
|
||||
let outSpatialReference = {
|
||||
wkid: 4326
|
||||
};
|
||||
let buildHigh = 0;
|
||||
let mseId = 0;
|
||||
|
||||
function reconnect() {
|
||||
|
||||
ipadresse = document.getElementById("ipadresse").value;
|
||||
document.getElementById("Serverconnect").innerHTML = "Server: not connected";
|
||||
document.getElementById("Serverconnect").style.color = "red";
|
||||
|
||||
getEssentials();
|
||||
}
|
||||
|
||||
function connectSendPos() {
|
||||
|
||||
ipadresseSendPos = document.getElementById("ipadresseSendPos").value;
|
||||
portSendPos = document.getElementById("portSendPos").value;
|
||||
|
||||
socket = new WebSocket("ws://" + ipadresseSendPos + portSendPos); // connected on the port 12346
|
||||
|
||||
socket.onopen = function () { // if the connection is established, a port query will be sent to port 12346
|
||||
document.getElementById("SendPosServerconnect").innerHTML = "Server: connected";
|
||||
document.getElementById("SendPosServerconnect").style.color = "green"
|
||||
};
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
|
||||
let selects = document.getElementsByName("layerSelect");
|
||||
|
||||
selects.forEach(selectable => {
|
||||
selectable.checked = false;
|
||||
});
|
||||
|
||||
document.getElementById("ipadresseSendPos").value = "";
|
||||
document.getElementById("ipadresseSendPos").value = ipadresseSendPos;
|
||||
document.getElementById("portSendPos").value = "";
|
||||
document.getElementById("portSendPos").value = portSendPos;
|
||||
document.getElementById("equipmentNumber").value = "";
|
||||
document.getElementById("equipmentNumber").value = equipmentNumber;
|
||||
|
||||
getEssentials();
|
||||
}
|
||||
|
||||
// Step 1 - Essentials are loaded
|
||||
function getEssentials() {
|
||||
|
||||
if ("WebSocket" in window) {
|
||||
let exampleSocket = new WebSocket("ws://" + ipadresse + port); //connected standartmäßig auf den port 2080
|
||||
layerArr = [];
|
||||
|
||||
document.getElementById("layers").innerHTML = "";
|
||||
document.getElementById("ipadresse").value = "";
|
||||
document.getElementById("ipadresse").value = ipadresse;
|
||||
document.getElementById("port").value = "";
|
||||
document.getElementById("port").value = port;
|
||||
|
||||
exampleSocket.onopen = function () { //ist die Verbindung hergestellt so wird eine Portabfrage an den port 2080 geschickt
|
||||
document.getElementById("Serverconnect").innerHTML = "Server: connected";
|
||||
document.getElementById("Serverconnect").style.color = "green"
|
||||
|
||||
exampleSocket.send(JSON.stringify({
|
||||
type: "getEssentials",
|
||||
uuid: "UUID"
|
||||
}));
|
||||
};
|
||||
|
||||
exampleSocket.onmessage = function (event) {
|
||||
let msg = JSON.parse(event.data);
|
||||
let essentialArrays = msg.data;
|
||||
AssetTypeArr = essentialArrays.assetTypes;
|
||||
|
||||
createObjects(essentialArrays);
|
||||
};
|
||||
} else {
|
||||
alert("WebSocket is NOT supported by your Browser!");
|
||||
}
|
||||
}
|
||||
|
||||
//Step 2 - Creating objects of the essentials
|
||||
function createObjects(essentialArrays) {
|
||||
|
||||
let levelCompareArr = [];
|
||||
|
||||
require([
|
||||
"esri/layers/GraphicsLayer",
|
||||
],
|
||||
function (
|
||||
GraphicsLayer
|
||||
) {
|
||||
//Buildings(footPrints)
|
||||
essentialArrays.objects.forEach(building => {
|
||||
if (building.path.length <= 0) {
|
||||
building.path = null;
|
||||
}
|
||||
|
||||
let footprintObj = new Footprint(building.designation, building.id, building.path, building.refPoint, building.z, building.mseId);
|
||||
|
||||
objArr.push(footprintObj);
|
||||
});
|
||||
|
||||
//Layer für Levels
|
||||
essentialArrays.levels.forEach(level => {
|
||||
if (!levelCompareArr.includes(level.designation)) {
|
||||
let layerObj = new layer(level.designation);
|
||||
|
||||
layerObj.ids.push(level.id);
|
||||
layerObj.layer = new GraphicsLayer({});
|
||||
layerArr.push(layerObj);
|
||||
levelCompareArr.push(layerObj.name);
|
||||
} else {
|
||||
layerArr.forEach(layer => {
|
||||
if (layer.name === level.designation) {
|
||||
layer.ids.push(level.id);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
let outdoorLayer = new layer("outdoorLayer");
|
||||
outdoorLayer.layer = new GraphicsLayer({});
|
||||
outdoorLayer.ids.push(-1);
|
||||
layerArr.push(outdoorLayer);
|
||||
|
||||
let footprintLayer = new layer("footprintLayer");
|
||||
footprintLayer.layer = new GraphicsLayer({});
|
||||
layerArr.push(footprintLayer);
|
||||
|
||||
//Mountingpoints
|
||||
essentialArrays.mountingPoints.forEach(mountingP => {
|
||||
let mountingPointObj = new MountingPoint(mountingP.designation, mountingP.id, mountingP.levelId, mountingP.objectId, mountingP.position3d, mountingP.roomId, mountingP.supportedAssetTypeIds[0]);
|
||||
objArr.push(mountingPointObj);
|
||||
});
|
||||
|
||||
createLayerSelection();
|
||||
createMap();
|
||||
}
|
||||
)
|
||||
|
||||
};
|
||||
|
||||
function formatObjs() {
|
||||
|
||||
require([
|
||||
"esri/geometry/Point",
|
||||
"esri/geometry/projection",
|
||||
"esri/Graphic",
|
||||
], function (
|
||||
Point,
|
||||
projection,
|
||||
Graphic) {
|
||||
projection.load().then(function () {
|
||||
objArr.forEach(obj => {
|
||||
switch (obj.type) {
|
||||
|
||||
case "footprint":
|
||||
|
||||
if (obj.status == "not ready") {
|
||||
let footprintEsriP = new Point({
|
||||
y: (obj.refPoint.lat * 180) / Math.PI,
|
||||
x: (obj.refPoint.lon * 180) / Math.PI
|
||||
});
|
||||
|
||||
if (obj.id === 25) {
|
||||
buildHigh = obj.z;
|
||||
mseId = obj.mseId;
|
||||
};
|
||||
|
||||
footprintEsriP = projection.project(footprintEsriP, getSpatialRefOut());
|
||||
obj.refPoint = footprintEsriP;
|
||||
|
||||
if (obj.path !== null) {
|
||||
let x = 0;
|
||||
|
||||
obj.path.forEach(pathPoint => {
|
||||
esriPathPoint = new Point({
|
||||
y: (pathPoint.lat * 180) / Math.PI,
|
||||
x: (pathPoint.lon * 180) / Math.PI,
|
||||
});
|
||||
|
||||
esriPathPoint = projection.project(esriPathPoint, getSpatialRefOut());
|
||||
obj.path[x] = [esriPathPoint.__accessor__.store._values.x, esriPathPoint.__accessor__.store._values.y];
|
||||
x++;
|
||||
});
|
||||
}
|
||||
|
||||
let polygon = {
|
||||
type: "polygon",
|
||||
rings: obj.path,
|
||||
spatialReference: { wkid: getWkid() }
|
||||
};
|
||||
|
||||
let fillSymbol = {
|
||||
type: "simple-fill",
|
||||
color: [227, 139, 79, 0.8],
|
||||
outline: {
|
||||
color: [255, 255, 255],
|
||||
width: 1
|
||||
}
|
||||
};
|
||||
|
||||
let buildingAtr = {
|
||||
BuildingName: obj.name,
|
||||
type: obj.type
|
||||
}
|
||||
|
||||
obj.graphic = new Graphic({ // Grafik des Footlayer
|
||||
geometry: polygon,
|
||||
symbol: fillSymbol,
|
||||
attributes: buildingAtr
|
||||
});
|
||||
|
||||
obj.status = "ready";
|
||||
}
|
||||
break;
|
||||
|
||||
case "mountingPoint":
|
||||
|
||||
if (obj.status == "not ready") {
|
||||
objArr.forEach(subObj => {
|
||||
if (subObj.type === "footprint") {
|
||||
if (obj.objId === subObj.id && subObj.path != null) {
|
||||
// Drehung der Mountingpoints um 318.82°
|
||||
rad = 318.82 * Math.PI / 180;
|
||||
x = obj.position.x;
|
||||
y = obj.position.y;
|
||||
|
||||
obj.position.x = x * Math.cos(rad) - y * Math.sin(rad);
|
||||
obj.position.y = x * Math.sin(rad) + y * Math.cos(rad);
|
||||
|
||||
obj.position.x += subObj.refPoint.__accessor__.store._values.x;
|
||||
obj.position.y += subObj.refPoint.__accessor__.store._values.y;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
let mountingPointEsriP = new Point({
|
||||
y: obj.position.y,
|
||||
x: obj.position.x,
|
||||
spatialReference: getSpatialRefOut()
|
||||
});
|
||||
|
||||
let mountingPointS = {
|
||||
type: "simple-marker",
|
||||
color: "black",
|
||||
}
|
||||
|
||||
let mountingPointEventAttribs = {
|
||||
name: obj.name,
|
||||
objectId: obj.objId,
|
||||
id: obj.id,
|
||||
levelId: obj.levelId,
|
||||
roomId: obj.roomId,
|
||||
supportedAssets: obj.supportedAsset,
|
||||
type: obj.type,
|
||||
z: obj.position.z,
|
||||
}
|
||||
|
||||
obj.graphic = new Graphic({ // Grafik von einem Mountingpoint
|
||||
geometry: mountingPointEsriP,
|
||||
symbol: mountingPointS,
|
||||
attributes: mountingPointEventAttribs,
|
||||
popupTemplate: {
|
||||
actions: [{
|
||||
title: "SendParticipantPos",
|
||||
id: "sendPartPos",
|
||||
className: "esri-icon-contact"
|
||||
}],
|
||||
title: "MountingPoint",
|
||||
content: [{
|
||||
type: "fields",
|
||||
fieldInfos: [{
|
||||
fieldName: "name"
|
||||
}, {
|
||||
fieldName: "objectId"
|
||||
}, {
|
||||
fieldName: "id"
|
||||
}, {
|
||||
fieldName: "levelId"
|
||||
}, {
|
||||
fieldName: "roomId"
|
||||
}, {
|
||||
fieldName: "supportedAssets"
|
||||
}],
|
||||
}]
|
||||
}
|
||||
});
|
||||
|
||||
obj.status = "ready";
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
createDropDownAssets();
|
||||
|
||||
// Fires the sendPartPos() function after holding a mouse button on the view for a short amount of time
|
||||
view.on("hold", function (event) {
|
||||
|
||||
mapPointClone = event.mapPoint;
|
||||
mapPointClone = projection.project(mapPointClone, outSpatialReference);
|
||||
|
||||
positionY = mapPointClone.__accessor__.store._values.y;
|
||||
positionX = mapPointClone.__accessor__.store._values.x;
|
||||
positionZ = 0;
|
||||
lvlId = -1;
|
||||
rmId = -1;
|
||||
objectId = -1;
|
||||
|
||||
sendPartPos(positionY, positionX, positionZ, lvlId, rmId, objectId);
|
||||
});
|
||||
|
||||
/* Quick and Dirty-Methode! Event vom Action-Trigger sehr verschachtelt, die nötigen Attribute einzeln rausgesucht.
|
||||
Noch auf der Suche nach einem Weg die Zugriffe zu vereinfachen */
|
||||
|
||||
// Action-Trigger PopupTemplate
|
||||
view.popup.on("trigger-action", function (event) {
|
||||
// If the sendPartPos action is clicked, fire the sendPartPos() function
|
||||
if (event.action.id === "sendPartPos") {
|
||||
geometryClone = event.target.__accessor__.store._values.selectedFeature.__accessor__.store._values.geometry;
|
||||
geometryClone = projection.project(geometryClone, outSpatialReference);
|
||||
|
||||
positionY = geometryClone.__accessor__.store._values.y;
|
||||
positionX = geometryClone.__accessor__.store._values.x;
|
||||
positionZ = event.target.__accessor__.store._values.selectedFeature.__accessor__.store._values.attributes.z + buildHigh;
|
||||
lvlId = event.target.__accessor__.store._values.selectedFeature.__accessor__.store._values.attributes.levelId;
|
||||
rmId = event.target.__accessor__.store._values.selectedFeature.__accessor__.store._values.attributes.roomId;
|
||||
objectId = mseId;
|
||||
|
||||
sendPartPos(positionY, positionX, positionZ, lvlId, rmId, objectId);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
//Step 3 - Connection to new websocket to retrieve the existing exercises
|
||||
function createMap() {
|
||||
|
||||
require([
|
||||
"esri/Map",
|
||||
"esri/views/MapView",
|
||||
"esri/layers/TileLayer",
|
||||
"esri/geometry/Point",
|
||||
"dojo/domReady!",
|
||||
],
|
||||
function (
|
||||
Map,
|
||||
MapView,
|
||||
TileLayer,
|
||||
Point
|
||||
) {
|
||||
map = new Map({
|
||||
});
|
||||
|
||||
view = new MapView({
|
||||
container: "mapDiv",
|
||||
map: map,
|
||||
scale: 500
|
||||
});
|
||||
|
||||
view.center = new Point({ // Center vom View auf Gebäude 56 setzen
|
||||
x: 493066.09059222677,
|
||||
y: 5878330.0818853425,
|
||||
spatialReference: 32632
|
||||
});
|
||||
|
||||
tile = new TileLayer({
|
||||
url: "http://excgeo21.sl.defence-elec.de/arcgis/rest/services/Bremen/BremenHemelingenAerialGeoAmt_32632/MapServer",
|
||||
});
|
||||
|
||||
tile.load().then(function () {
|
||||
map.layers.add(tile);
|
||||
formatObjs();
|
||||
})
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
function getSpatialRefOut() {
|
||||
|
||||
let spatialOut = view.spatialReference;
|
||||
return spatialOut;
|
||||
}
|
||||
|
||||
function getWkid() {
|
||||
|
||||
let wkid = view.spatialReference.__accessor__.store._values.wkid;
|
||||
return (wkid);
|
||||
}
|
||||
|
||||
// Die jeweiligen Points/Footprints des ausgewählten Layer auf der Map anzeigen
|
||||
function place() {
|
||||
|
||||
let filter = document.getElementById("AssetTypes").value;
|
||||
|
||||
layerArr.forEach(layer => {
|
||||
layer.layer.removeAll();
|
||||
});
|
||||
|
||||
objArr.forEach(obj => {
|
||||
switch (obj.type) {
|
||||
|
||||
case "mountingPoint":
|
||||
|
||||
layerArr.forEach(layer => {
|
||||
if (layer.ids.includes(obj.levelId) && obj.supportedAsset == filter) {
|
||||
layer.layer.add(obj.graphic);
|
||||
}
|
||||
});
|
||||
break;
|
||||
|
||||
case "footprint":
|
||||
|
||||
layerArr.forEach(layer => {
|
||||
if (layer.name === "footprintLayer") {
|
||||
layer.layer.add(obj.graphic);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Ausgewähltes Layer dem "layer"-Attribut der Map zuweisen
|
||||
function toggleLayer() {
|
||||
|
||||
place();
|
||||
|
||||
layerArr.forEach(layer => {
|
||||
map.remove(layer.layer);
|
||||
});
|
||||
|
||||
let selectedLayers = document.getElementsByName('layerSelect');
|
||||
|
||||
for (let x = selectedLayers.length - 1; x >= 0; x--) {
|
||||
if (selectedLayers[x].checked) {
|
||||
layerArr.forEach(layer => {
|
||||
if (layer.name === selectedLayers[x].value) {
|
||||
map.add(layer.layer)
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Das Drop-Down Menü für die Assets generieren
|
||||
function createDropDownAssets() {
|
||||
|
||||
let dropDdiv = document.getElementById("AssetTypesDiv");
|
||||
let dropD = "<select id=\"AssetTypes\" onchange=\"place()\">";
|
||||
|
||||
AssetTypeArr.forEach(AssetType => {
|
||||
dropD += "<option value=" + AssetType.id + ">" + AssetType.designation + "</option>"
|
||||
});
|
||||
|
||||
dropD += "</select>"
|
||||
dropDdiv.innerHTML = dropD;
|
||||
}
|
||||
|
||||
// Die Auswahl der Layer füllen (Container rechts eben der Map)
|
||||
function createLayerSelection() {
|
||||
|
||||
let layerDiv = document.getElementById("layers");
|
||||
let append = "";
|
||||
|
||||
layerArr.forEach(layer => {
|
||||
if (layer.name != undefined) {
|
||||
append += `<div class="checkbox"><input class="layer" type="checkbox" value=${layer.name} name="layerSelect" onchange="toggleLayer()">${layer.name}</input></div>`;
|
||||
}
|
||||
});
|
||||
|
||||
layerDiv.innerHTML += append;
|
||||
}
|
||||
|
||||
// Die ausgewählte Position an Port 12346 senden um den Teilnehmer zu positionieren
|
||||
function sendPartPos(positionY, positionX, positionZ, lvlId, rmId, objectId) {
|
||||
|
||||
// zu lat/long umrechnen
|
||||
positionY = (positionY * Math.PI) / 180;
|
||||
positionX = (positionX * Math.PI) / 180;
|
||||
equipmentNumber = Number(document.getElementById("equipmentNumber").value);
|
||||
|
||||
var type = "PositionReport";
|
||||
var timestamp = Date.now();
|
||||
var jsonMsg = JSON.stringify({ //make JSON-string from the data
|
||||
data: {
|
||||
equipmentNumber: equipmentNumber,
|
||||
lat: positionY,
|
||||
lon: positionX,
|
||||
moutAreaId: lvlId,
|
||||
moutObjectId: objectId,
|
||||
moutRoomId: rmId,
|
||||
timestamp: timestamp,
|
||||
z: positionZ
|
||||
},
|
||||
type: type
|
||||
});
|
||||
|
||||
var jsonOb = JSON.parse(jsonMsg);
|
||||
|
||||
if (socket != undefined) {
|
||||
readout = "Equipment Number: " + jsonOb.data.equipmentNumber + "\n" + "Latitude: " + jsonOb.data.lat + "\n" + "Longitude: " + jsonOb.data.lon + "\n" + "Z: " + jsonOb.data.z + "\n" + "Area ID: " + jsonOb.data.moutAreaId + "\n" + "Object ID: " + jsonOb.data.moutObjectId + "\n" + "Room ID: " + jsonOb.data.moutRoomId + "\n" + "Time: " + jsonOb.data.timestamp;
|
||||
socket.send(jsonMsg); // if the server is connected send the JSON telegram
|
||||
alert("Current position sent!" + "\n" + readout);
|
||||
} else {
|
||||
alert("Server not connected!");
|
||||
}
|
||||
}
|
||||
@@ -1,101 +0,0 @@
|
||||
hr {
|
||||
color: black;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1{
|
||||
color: rgb(85, 85, 85);
|
||||
}
|
||||
|
||||
table {
|
||||
position: relative;
|
||||
width: auto;
|
||||
display: block;
|
||||
table-layout: fixed;
|
||||
padding: 8px;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
position: relative;
|
||||
float: left;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
td{
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
text-align: center;
|
||||
border: 1px solid rgb(221, 221, 221);
|
||||
width: 95%;
|
||||
height: 45px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
line-height: 45px;
|
||||
}
|
||||
|
||||
.checkbox:hover {
|
||||
background-color: rgb(243, 243, 243, 0.5);
|
||||
}
|
||||
|
||||
#ipadresse, #ipadresseSendPos {
|
||||
width: 150px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#port, #portSendPos, #equipmentNumber {
|
||||
width: 50px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#mapDiv {
|
||||
border: 2px solid black;
|
||||
height: 810px;
|
||||
width: 73%;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
#layersAndAssets{
|
||||
float: right;
|
||||
height: 50%;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px){
|
||||
|
||||
#layersAndAssets {
|
||||
position: relative;
|
||||
float: left;
|
||||
height: 30%;
|
||||
width: 105%;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#mapDiv {
|
||||
border: 2px solid black;
|
||||
height: 810px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#AssetTypesDiv{
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
|
||||
table tr {
|
||||
display: block;
|
||||
}
|
||||
|
||||
table td {
|
||||
display: block;
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
<!DOCTYPE HTML>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Positionseinspeisung</title>
|
||||
<style>
|
||||
table {
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.headcol {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#mapDiv {
|
||||
height: 760px;
|
||||
width: 72.5%;
|
||||
}
|
||||
|
||||
#infoDiv {
|
||||
position: absolute;
|
||||
top: 12%;
|
||||
left: 60%;
|
||||
}
|
||||
|
||||
#infoDiv input {
|
||||
border: none;
|
||||
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
|
||||
<script src="https://js.arcgis.com/4.7/"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="positionseinspeisung.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<hr>
|
||||
<table style="width:25%;display:inline-block" id="HeaderTable">
|
||||
<tr id="HeaderTableRow">
|
||||
<td>
|
||||
<form>
|
||||
<input type="text" value="" id="ipadresse" />
|
||||
</form>
|
||||
</td>
|
||||
<td>
|
||||
<div id="Serverconnect">
|
||||
<font color="red">
|
||||
Server: not connected
|
||||
</font>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
<table style="width:35%;display:inline-block">
|
||||
<td>
|
||||
<div id="auswahl" style="float:right; font-size: 13px;">Aktuelle Auswahl:
|
||||
<input type="text">
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div id="newPosition" style="float:right;font-size: 13px;">Neue Position: None</div>
|
||||
</td>
|
||||
<td>
|
||||
<button style="float:right;" onclick="placeFunction()">submit</button>
|
||||
</td>
|
||||
</table>
|
||||
<hr>
|
||||
<div style="height:89%; border-left: 2px solid black; position:absolute; left: 73%;top: 9.5%; "></div>
|
||||
<div id="layers" style="float:right; overflow-x: auto; height: 500px;width: 25%; ">
|
||||
</div>
|
||||
<div id="mapDiv">
|
||||
</div>
|
||||
</body>
|
||||
@@ -1,388 +0,0 @@
|
||||
class Footprint {
|
||||
constructor(name, id, path, refPoint) {
|
||||
this.name = name;
|
||||
this.id = id;
|
||||
this.path = path;
|
||||
this.refPoint = refPoint;
|
||||
this.type = "footprint";
|
||||
this.graphic = null;
|
||||
this.status = "not ready";
|
||||
}
|
||||
|
||||
}
|
||||
class MountingPoint {
|
||||
constructor(name, id, levelId, objId, position, roomId, supportedAsset) {
|
||||
this.name = name;
|
||||
this.id = id;
|
||||
this.levelId = levelId;
|
||||
this.objId = objId;
|
||||
this.position = position; //wird als positionsObjekt übergeben. Bezieht sich auf Referenzpunkt des zugehörigen Gebäudes
|
||||
this.roomId = roomId;
|
||||
this.supportedAsset = supportedAsset;
|
||||
this.type = "mountingPoint";
|
||||
this.graphic = null;
|
||||
this.status = "not ready";
|
||||
}
|
||||
}
|
||||
class layer {
|
||||
constructor(name) {
|
||||
this.name = name;
|
||||
this.ids = [];
|
||||
this.layer = null;
|
||||
}
|
||||
}
|
||||
|
||||
var ipadresse = "EXCTDS01:";
|
||||
var port = "2080";
|
||||
var layerArr = [];
|
||||
var objArr = [];
|
||||
var AssetTypeArr = [];
|
||||
let currentGraphic = null;
|
||||
let newPosition = null;
|
||||
let placeFunction = function () {
|
||||
if (newPosition == null) {
|
||||
alert("Bitte eine gültige position angeben!");
|
||||
} else {
|
||||
objArr.forEach(obj => {
|
||||
if (obj.graphic == currentGraphic.graphic) {
|
||||
console.log(`Wollen sie ${obj.graphic.__accessor__.store._values.attributes.name} mit folgenden Koordinaten x: ${newPosition.x}/ y: ${newPosition.y} neu platzieren?`);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
window.onload = function () {
|
||||
var selects = document.getElementsByName("layerSelect");
|
||||
selects.forEach(selectable => {
|
||||
selectable.checked = false;
|
||||
});
|
||||
getEssentials();
|
||||
}
|
||||
// Schritt 1 - Essentials werden geladen (Alle Objekte die für jede Übung relevant sind)
|
||||
function getEssentials() {
|
||||
if ("WebSocket" in window) {
|
||||
{
|
||||
var exampleSocket = new WebSocket("ws://" + ipadresse + port) //connected standartmäßig auf den port 7300
|
||||
document.getElementById("ipadresse").value = "";
|
||||
document.getElementById("ipadresse").value = ipadresse + port;
|
||||
}
|
||||
exampleSocket.onopen = function () { //ist die Verbindung hergestellt so wird eine Portabfrage an den port 7300 geschickt
|
||||
document.getElementById("Serverconnect").innerHTML = "Server: connected";
|
||||
document.getElementById("Serverconnect").style.color = "green"
|
||||
exampleSocket.send(JSON.stringify({
|
||||
type: "getEssentials",
|
||||
uuid: "UUID"
|
||||
}));
|
||||
};
|
||||
exampleSocket.onmessage = function (event) {
|
||||
var msg = JSON.parse(event.data);
|
||||
var essentialArrays = msg.data;
|
||||
AssetTypeArr = essentialArrays.assetTypes;
|
||||
createObjects(essentialArrays);
|
||||
};
|
||||
}
|
||||
else {
|
||||
alert("WebSocket is NOT supported by your Browser!");
|
||||
}
|
||||
}
|
||||
//Schritt 2 - Erstellen von Objekten der Essentials
|
||||
function createObjects(essentialArrays) {
|
||||
var levelCompareArr = [];
|
||||
require([
|
||||
"esri/layers/GraphicsLayer",
|
||||
],
|
||||
function (
|
||||
GraphicsLayer
|
||||
) {
|
||||
//Buildings(footPrints)
|
||||
essentialArrays.objects.forEach(building => {
|
||||
if (building.path.length <= 0) building.path = null;
|
||||
var footprintObj = new Footprint(building.designation, building.id, building.path, building.refPoint);
|
||||
objArr.push(footprintObj);
|
||||
});
|
||||
//Layer für Levels
|
||||
essentialArrays.levels.forEach(level => {
|
||||
if (!levelCompareArr.includes(level.designation)) {
|
||||
var layerObj = new layer(level.designation);
|
||||
layerObj.ids.push(level.id);
|
||||
layerObj.layer = new GraphicsLayer({});
|
||||
layerArr.push(layerObj);
|
||||
levelCompareArr.push(layerObj.name);
|
||||
} else {
|
||||
layerArr.forEach(layer => {
|
||||
if (layer.name === level.designation) {
|
||||
layer.ids.push(level.id);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
var outdoorLayer = new layer("outdoorLayer");
|
||||
outdoorLayer.layer = new GraphicsLayer({});
|
||||
outdoorLayer.ids.push(-1);
|
||||
layerArr.push(outdoorLayer);
|
||||
var footprintLayer = new layer("footprintLayer");
|
||||
footprintLayer.layer = new GraphicsLayer({});
|
||||
layerArr.push(footprintLayer);
|
||||
//Mountingpoints
|
||||
essentialArrays.mountingPoints.forEach(mountingP => {
|
||||
var mountingPointObj = new MountingPoint(mountingP.designation, mountingP.id, mountingP.levelId, mountingP.objectId, mountingP.position3d, mountingP.roomId, mountingP.supportedAssetTypeIds[0]);
|
||||
if (mountingPointObj.supportedAsset === 5 || mountingPointObj.supportedAsset === 6) objArr.push(mountingPointObj);
|
||||
});
|
||||
createLayerSelection();
|
||||
}
|
||||
)
|
||||
createMap();
|
||||
};
|
||||
function formatObjs() {
|
||||
require([
|
||||
"esri/geometry/Point",
|
||||
"esri/geometry/projection",
|
||||
"esri/Graphic",
|
||||
], function (Point, projection, Graphic) {
|
||||
var setNewPosition = {
|
||||
title: "SetPosition",
|
||||
id: "place-this",
|
||||
image: "https://www.ninonline.org/forum/uploads/monthly_2018_03/Uchiha-Small.png.b1e089fc70c9c965ec35c23041868b3d.png"
|
||||
};
|
||||
projection.load().then(function () {
|
||||
objArr.forEach(obj => {
|
||||
switch (obj.type) {
|
||||
case "footprint":
|
||||
if (obj.status == "not ready") {
|
||||
let footprintEsriP = new Point({
|
||||
y: (obj.refPoint.lat * 180) / Math.PI,
|
||||
x: (obj.refPoint.lon * 180) / Math.PI
|
||||
});
|
||||
footprintEsriP = projection.project(footprintEsriP, getSpatialRefOut());
|
||||
obj.refPoint = footprintEsriP;
|
||||
if (obj.path !== null) {
|
||||
var x = 0;
|
||||
obj.path.forEach(pathPoint => {
|
||||
esriPathPoint = new Point({
|
||||
y: (pathPoint.lat * 180) / Math.PI,
|
||||
x: (pathPoint.lon * 180) / Math.PI,
|
||||
});
|
||||
esriPathPoint = projection.project(esriPathPoint, getSpatialRefOut());
|
||||
obj.path[x] = [esriPathPoint.__accessor__.store._values.x, esriPathPoint.__accessor__.store._values.y];
|
||||
x++;
|
||||
});
|
||||
}
|
||||
var polygon = {
|
||||
type: "polygon",
|
||||
rings: obj.path,
|
||||
spatialReference: { wkid: getWkid() }
|
||||
};
|
||||
var fillSymbol = {
|
||||
type: "simple-fill",
|
||||
color: [227, 139, 79, 0.8],
|
||||
outline: {
|
||||
color: [255, 255, 255],
|
||||
width: 1
|
||||
}
|
||||
};
|
||||
var buildingAtr = {
|
||||
BuildingName: obj.name,
|
||||
type: obj.type
|
||||
}
|
||||
obj.graphic = new Graphic({
|
||||
geometry: polygon,
|
||||
symbol: fillSymbol,
|
||||
attributes: buildingAtr
|
||||
});
|
||||
obj.status = "ready";
|
||||
}
|
||||
break;
|
||||
case "mountingPoint":
|
||||
if (obj.status == "not ready") {
|
||||
objArr.forEach(subObj => {
|
||||
if (subObj.type === "footprint") {
|
||||
if (obj.objId === subObj.id && subObj.path != null) {
|
||||
obj.position.x += subObj.refPoint.__accessor__.store._values.x;
|
||||
obj.position.y += subObj.refPoint.__accessor__.store._values.y;
|
||||
}
|
||||
}
|
||||
});
|
||||
let mountingPointEsriP = new Point({
|
||||
x: obj.position.x,
|
||||
y: obj.position.y,
|
||||
spatialReference: getSpatialRefOut()
|
||||
});
|
||||
let mountingPointS = {
|
||||
type: "simple-marker",
|
||||
color: "black",
|
||||
}
|
||||
let mountingPointEventAttribs = {
|
||||
name: obj.name,
|
||||
objectId: obj.objId,
|
||||
id: obj.id,
|
||||
levelId: obj.levelId,
|
||||
roomId: obj.roomId,
|
||||
supportedAssets: obj.supportedAsset,
|
||||
type: obj.type
|
||||
}
|
||||
obj.graphic = new Graphic({
|
||||
geometry: mountingPointEsriP,
|
||||
symbol: mountingPointS,
|
||||
attributes: mountingPointEventAttribs,
|
||||
popupTemplate: {
|
||||
title: "MountingPoint",
|
||||
content: [{
|
||||
type: "fields",
|
||||
fieldInfos: [{
|
||||
fieldName: "name"
|
||||
}, {
|
||||
fieldName: "objectId"
|
||||
}, {
|
||||
fieldName: "id"
|
||||
}, {
|
||||
fieldName: "levelId"
|
||||
}, {
|
||||
fieldName: "roomId"
|
||||
}, {
|
||||
fieldName: "supportedAssets"
|
||||
}]
|
||||
}],
|
||||
actions: [setNewPosition],
|
||||
}
|
||||
});
|
||||
obj.status = "ready";
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
createDropDownAssets();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
//Schritt 3 - Verbindung zu neuem Websocket um die vorhandenen Übungen abzufragen
|
||||
function createMap() {
|
||||
require([
|
||||
"esri/Map",
|
||||
"esri/views/MapView",
|
||||
"esri/layers/TileLayer",
|
||||
"dojo/domReady!",
|
||||
],
|
||||
function (
|
||||
Map,
|
||||
MapView,
|
||||
TileLayer,
|
||||
) {
|
||||
map = new Map({
|
||||
});
|
||||
view = new MapView({
|
||||
container: "mapDiv",
|
||||
map: map,
|
||||
camera: {
|
||||
position: {
|
||||
x: 8.896638,
|
||||
y: 53.054441,
|
||||
}
|
||||
},
|
||||
scale: 1000
|
||||
});
|
||||
view.on("click", eventHandler); // für maus
|
||||
function eventHandler(event) {
|
||||
view.hitTest(event).then(getGraphics);
|
||||
function getGraphics(response) {
|
||||
console.log(response);
|
||||
let point = view.toMap({ x: response.screenPoint.x, y: response.screenPoint.y })
|
||||
if (response.results.length > 0 && response.screenPoint.button === 0) {
|
||||
currentGraphic = response.results[0];
|
||||
} else if (response.results.length === 0 && response.screenPoint.button === 0) {
|
||||
document.getElementById("newPosition").innerHTML = `neue Position: ${point.x} / ${point.y}`;
|
||||
newPosition = {
|
||||
x: point.x,
|
||||
y: point.y
|
||||
}
|
||||
};
|
||||
};
|
||||
};
|
||||
tile = new TileLayer({
|
||||
url: "http://excgeo21.sl.defence-elec.de/arcgis/rest/services/Bremen/BremenHemelingenAerialGeoAmt_32632/MapServer"
|
||||
});
|
||||
tile.load().then(function () {
|
||||
map.layers.add(tile);
|
||||
view.popup.on("trigger-action", function (event) {
|
||||
if (event.action.id === "place-this") {
|
||||
placeFunction();
|
||||
}
|
||||
});
|
||||
formatObjs();
|
||||
})
|
||||
})
|
||||
}
|
||||
function connect() { //wird aufgerufen sobald eine Übung ausgewählt wurd(dropdown)
|
||||
port = document.getElementById("selects").value;
|
||||
requestUrl = ipadresse.concat(port);
|
||||
document.getElementById("ipadresse").value = "";
|
||||
document.getElementById("ipadresse").value = ipadresse + port;
|
||||
}
|
||||
|
||||
function getSpatialRefOut() {
|
||||
var spatialOut = view.spatialReference;
|
||||
return spatialOut;
|
||||
}
|
||||
function getWkid() {
|
||||
var wkid = view.spatialReference.__accessor__.store._values.wkid;
|
||||
return (wkid);
|
||||
}
|
||||
function place() {
|
||||
layerArr.forEach(layer => {
|
||||
layer.layer.removeAll();
|
||||
});
|
||||
objArr.forEach(obj => {
|
||||
switch (obj.type) {
|
||||
case "mountingPoint":
|
||||
layerArr.forEach(layer => {
|
||||
if (layer.ids.includes(obj.levelId)) {
|
||||
layer.layer.add(obj.graphic);
|
||||
}
|
||||
});
|
||||
break;
|
||||
case "footprint":
|
||||
layerArr.forEach(layer => {
|
||||
if (layer.name === "footprintLayer") {
|
||||
layer.layer.add(obj.graphic);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
function toggleLayer() {
|
||||
place();
|
||||
layerArr.forEach(layer => {
|
||||
map.remove(layer.layer);
|
||||
});
|
||||
var selectedLayers = document.getElementsByName('layerSelect');
|
||||
for (var x = selectedLayers.length - 1; x >= 0; x--) {
|
||||
if (selectedLayers[x].checked) {
|
||||
layerArr.forEach(layer => {
|
||||
if (layer.name === selectedLayers[x].value) {
|
||||
map.add(layer.layer)
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function createDropDownAssets() {
|
||||
var dropDdiv = document.getElementById("AssetTypesDiv");
|
||||
var dropD = "<select id=\"AssetTypes\" onchange=\"place()\">";
|
||||
AssetTypeArr.forEach(AssetType => {
|
||||
dropD += "<option value=" + AssetType.id + ">" + AssetType.designation + "</option>"
|
||||
});
|
||||
dropD += "</select>"
|
||||
dropDdiv.innerHTML = dropD;
|
||||
}
|
||||
function createLayerSelection() {
|
||||
var layerDiv = document.getElementById("layers");
|
||||
var append = "";
|
||||
layerArr.forEach(layer => {
|
||||
if (layer.name != undefined) {
|
||||
append += `<div><input class="layer" type="checkbox" value=${layer.name} name="layerSelect" onchange="toggleLayer()">${layer.name}</input></div>`;
|
||||
}
|
||||
});
|
||||
layerDiv.innerHTML += append;
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<script src="parse.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,196 +0,0 @@
|
||||
class Polygon {
|
||||
constructor() {
|
||||
this.vertex = [];
|
||||
}
|
||||
addVertext(vertex) {
|
||||
this.vertex.push(vertex);
|
||||
}
|
||||
closeRing() {
|
||||
this.vertex.push(this.vertex[0]);
|
||||
}
|
||||
}
|
||||
var parser, xmlDoc, PolyArray;
|
||||
var PolygonObj = [];
|
||||
var text = `<Group>
|
||||
<Name>FOOTPRINT</Name>
|
||||
<BBox_Min Z="2.850" Y="2.181" X="3.896" />
|
||||
<BBox_Max Z="2.851" Y="6.766" X="6.175" />
|
||||
<Polygon>
|
||||
<Name>p6739</Name>
|
||||
<Vertex>
|
||||
<Name>p6739/V1</Name>
|
||||
<Coord X="4.166" Y="6.766" Z="2.850" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V2</Name>
|
||||
<Coord X="4.151" Y="6.692" Z="2.850" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V3</Name>
|
||||
<Coord X="3.914" Y="6.694" Z="2.850" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V4</Name>
|
||||
<Coord X="3.896" Y="5.925" Z="2.850" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V5</Name>
|
||||
<Coord X="4.158" Y="5.923" Z="2.850" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V6</Name>
|
||||
<Coord X="4.089" Y="2.181" Z="2.851" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V7</Name>
|
||||
<Coord X="5.178" Y="2.203" Z="2.851" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V8</Name>
|
||||
<Coord X="5.178" Y="2.253" Z="2.851" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V9</Name>
|
||||
<Coord X="5.863" Y="2.253" Z="2.851" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V10</Name>
|
||||
<Coord X="5.879" Y="3.634" Z="2.850" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V11</Name>
|
||||
<Coord X="6.024" Y="3.632" Z="2.850" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V12</Name>
|
||||
<Coord X="6.028" Y="4.383" Z="2.850" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V13</Name>
|
||||
<Coord X="5.888" Y="4.385" Z="2.850" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V14</Name>
|
||||
<Coord X="5.898" Y="5.830" Z="2.850" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V15</Name>
|
||||
<Coord X="6.171" Y="5.829" Z="2.850" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V16</Name>
|
||||
<Coord X="6.175" Y="6.554" Z="2.850" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V17</Name>
|
||||
<Coord X="5.902" Y="6.555" Z="2.850" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V18</Name>
|
||||
<Coord X="5.903" Y="6.760" Z="2.850" />
|
||||
</Vertex>
|
||||
</Polygon>
|
||||
<Polygon>
|
||||
<Name>p6739</Name>
|
||||
<Vertex>
|
||||
<Name>p6739/V1</Name>
|
||||
<Coord X="4.166" Y="6.766" Z="2.850" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V2</Name>
|
||||
<Coord X="4.151" Y="6.692" Z="2.850" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V3</Name>
|
||||
<Coord X="3.914" Y="6.694" Z="2.850" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V4</Name>
|
||||
<Coord X="3.896" Y="5.925" Z="2.850" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V5</Name>
|
||||
<Coord X="4.158" Y="5.923" Z="2.850" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V6</Name>
|
||||
<Coord X="4.089" Y="2.181" Z="2.851" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V7</Name>
|
||||
<Coord X="5.178" Y="2.203" Z="2.851" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V8</Name>
|
||||
<Coord X="5.178" Y="2.253" Z="2.851" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V9</Name>
|
||||
<Coord X="5.863" Y="2.253" Z="2.851" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V10</Name>
|
||||
<Coord X="5.879" Y="3.634" Z="2.850" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V11</Name>
|
||||
<Coord X="6.024" Y="3.632" Z="2.850" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V12</Name>
|
||||
<Coord X="6.028" Y="4.383" Z="2.850" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V13</Name>
|
||||
<Coord X="5.888" Y="4.385" Z="2.850" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V14</Name>
|
||||
<Coord X="5.898" Y="5.830" Z="2.850" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V15</Name>
|
||||
<Coord X="6.171" Y="5.829" Z="2.850" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V16</Name>
|
||||
<Coord X="6.175" Y="6.554" Z="2.850" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V17</Name>
|
||||
<Coord X="5.902" Y="6.555" Z="2.850" />
|
||||
</Vertex>
|
||||
<Vertex>
|
||||
<Name>p6739/V18</Name>
|
||||
<Coord X="5.903" Y="6.760" Z="2.850" />
|
||||
</Vertex>
|
||||
</Polygon>
|
||||
</Group>`
|
||||
parser = new DOMParser();
|
||||
xmlDoc = parser.parseFromString(text, "text/xml");
|
||||
|
||||
PolyArray = Array.from(xmlDoc.getElementsByTagName("Polygon"));
|
||||
PolyArray.forEach(polygon => {
|
||||
polyObj = new P1();
|
||||
var vertexes = Array.from(polygon.children);
|
||||
for (var x = 1; x < vertexes.length; x++) {
|
||||
var vertextChildren = vertexes[x].children[1].attributes;
|
||||
var vertex = {};
|
||||
for (var y = 0; y < 3; y++) {
|
||||
switch (y) {
|
||||
case 1:
|
||||
vertex.x = parseFloat(vertextChildren[y].nodeValue);
|
||||
break;
|
||||
case 2:
|
||||
vertex.y = parseFloat(vertextChildren[y].nodeValue);
|
||||
case 3:
|
||||
vertex.z = parseFloat(vertextChildren[y].nodeValue);
|
||||
}
|
||||
}
|
||||
polyObj.addVertext(vertex);
|
||||
}
|
||||
P1.push(polyObj);
|
||||
});
|
||||
P1.forEach(polygon => {
|
||||
polygon.closeRing();
|
||||
});
|
||||
@@ -1,54 +0,0 @@
|
||||
<!DOCTYPE HTML>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>MapView</title>
|
||||
<style>
|
||||
table {
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.headcol {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#mapDiv {
|
||||
height: 760px;
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
#infoDiv {
|
||||
position: absolute;
|
||||
top: 12%;
|
||||
left: 60%;
|
||||
}
|
||||
|
||||
#infoDiv input {
|
||||
border: none;
|
||||
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
|
||||
<script src="https://js.arcgis.com/4.7/"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="websocketTest.js"></script>
|
||||
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="viewDiv"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,19 +0,0 @@
|
||||
require([
|
||||
"esri/Map",
|
||||
"esri/views/SceneView",
|
||||
"esri/layers/FeatureLayer",
|
||||
"dojo/domReady!"
|
||||
], function (Map, SceneView, FeatureLayer) {
|
||||
var featureLayer = new FeatureLayer({
|
||||
url: "http://excgeo21.sl.defence-elec.de/arcgis/rest/services/Hosted/BT56_rev576/SceneServer"
|
||||
});
|
||||
var map = new Map({
|
||||
});
|
||||
|
||||
var view = new SceneView({
|
||||
container: "viewDiv",
|
||||
map: map
|
||||
});
|
||||
map.layers.add(featureLayer);
|
||||
|
||||
});
|
||||
@@ -1,186 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>TimeLine</title>
|
||||
<script src="TimeLine.js"></script>
|
||||
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
|
||||
<link href="TimeLineStyle.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<hr>
|
||||
|
||||
<div id="header">
|
||||
|
||||
<table id="headerTable">
|
||||
<tr>
|
||||
<td>
|
||||
<form>
|
||||
<input id="ipadresse" type="text" placeholder="ipadresse">
|
||||
</form>
|
||||
</td>
|
||||
<td>
|
||||
<form>
|
||||
<input id="port" type="text" placeholder="port">
|
||||
</form>
|
||||
</td>
|
||||
<td>
|
||||
<button onclick="connect()">Connect</button>
|
||||
</td>
|
||||
<td>
|
||||
<div id="connectionDiv">
|
||||
<font color="red">
|
||||
Server: not connected
|
||||
</font>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div id="portSelectionDiv">
|
||||
<select id="portSelection" onchange="changePort()">
|
||||
<option value="7300">Übungen</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<form>
|
||||
<input id="partId" type="text" placeholder="Optional: partId">
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div id="selects">
|
||||
|
||||
<table id="tableTimer">
|
||||
<tr class="rowTimer">
|
||||
<td class="cellTimer">StartDate</td>
|
||||
<td class="cellTimer">StartTime</td>
|
||||
</tr>
|
||||
<tr class="rowTimer">
|
||||
<td class="cellTimer"><input id="trainingDateStart" type="date"></td>
|
||||
<td class="cellTimer"><input id="startTime" type="time"></td>
|
||||
</tr>
|
||||
<tr class="rowTimer">
|
||||
<td class="cellTimer">EndDate</td>
|
||||
<td class="cellTimer">EndTime</td>
|
||||
</tr>
|
||||
<tr class="rowTimer">
|
||||
<td class="cellTimer"><input id="trainingDateEnd" type="date"></td>
|
||||
<td class="cellTimer"><input id="endTime" type="time"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div id="eventSelects">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="11" name="rqTypes"><mark style="background-color: rgb(0,0,255,0.6)">Audio</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="3" name="rqTypes"><mark style="background-color: rgb(30,144,255,0.7)">BiteMessage</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="7" name="rqTypes"><mark style="background-color: rgb(0,191,255,0.6)">CameraAudio</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="8" name="rqTypes"><mark style="background-color: rgb(135,206,250,0.6)">CameraVideo</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="26" name="rqTypes"><mark style="background-color: rgb(0,206,209,0.6)">CrossGlobalBorderline</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="21" name="rqTypes"><mark style="background-color: rgb(0,255,255,0.6)">CrossLocalBorderline</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="112" name="rqTypes"><mark style="background-color: rgb(127,255,212,0.6)">EmergencyCall</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="17" name="rqTypes"><mark style="background-color: rgb(152,251,152,0.6)">EnterDangerArea</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="22" name="rqTypes"><mark style="background-color: rgb(124,252,0,0.6)">EnterFunctionalArea</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="19" name="rqTypes"><mark style="background-color: rgb(0,255,0,0.6)">EnterMineArea</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="24" name="rqTypes"><mark style="background-color: rgb(50,205,50,0.6)">EnterNuclear</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="100" name="rqTypes"><mark style="background-color: rgb(34,139,34,0.6)">EquipmentErrorReport</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="4" name="rqTypes"><mark style="background-color: rgb(189,183,107,0.6)">FireEvent</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="28" name="rqTypes"><mark style="background-color: rgb(240,230,140,0.6)">FriendlyFire</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="1" name="rqTypes"><mark style="background-color: rgb(255,255,0,0.6)">Hit</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="27" name="rqTypes"><mark style="background-color: rgb(255,215,0,0.6)">HitB</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="5" name="rqTypes"><mark style="background-color: rgb(184,134,11,0.6)">HitBuilding</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="16" name="rqTypes"><mark style="background-color: rgb(160,82,45,0.6)">HitC</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="13" name="rqTypes"><mark style="background-color: rgb(139,69,19,0.6)">HitIndirect</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="14" name="rqTypes"><mark style="background-color: rgb(205,92,92,0.6)">HitMine</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="15" name="rqTypes"><mark style="background-color: rgb(178,34,34,0.6)">HitN</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="18" name="rqTypes"><mark style="background-color: rgb(255,160,122,0.6)">LeaveDangerArea</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="23" name="rqTypes"><mark style="background-color: rgb(255,69,0,0.6)">LeaveFunctionalArea</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="20" name="rqTypes"><mark style="background-color: rgb(255,0,0,0.6)">LeaveMineArea</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="25" name="rqTypes"><mark style="background-color: rgb(255,20,147,0.6)">LeaveNuclear</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="6" name="rqTypes"><mark style="background-color: rgb(255,105,180,0.6)">Manipulation</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="9" name="rqTypes"><mark style="background-color: rgb(221,160,221,0.6)">RadioCnr</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="10" name="rqTypes"><mark style="background-color: rgb(186,85,211,0.6)">RadioTvc</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="0" name="rqTypes"><mark style="background-color: rgb(148,0,211,0.6)">Unknown</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="12" name="rqTypes"><mark style="background-color: rgb(79,79,79,0.6)">Video</mark>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" value="2" name="rqTypes"><mark style="background-color: rgb(199,199,199,0.6)">WeaponAssignment</mark>
|
||||
</div>
|
||||
</div>
|
||||
<button id="requestButton" onclick="sendRequest()">Request</button>
|
||||
</div>
|
||||
|
||||
<div id="displayDiv">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,498 +0,0 @@
|
||||
let ipadresse = "localhost";
|
||||
let port = "7300";
|
||||
let EventObjArr = [];
|
||||
let msgArr = [];
|
||||
let Teams = [];
|
||||
let date;
|
||||
let append = "";
|
||||
|
||||
class EventOBJ {
|
||||
|
||||
constructor(equipNumber, eventTypeId, id, participantId, partyId, position, properties, sampleTime) {
|
||||
this.equipNumber = equipNumber;
|
||||
this.eventTypeId = eventTypeId;
|
||||
this.id = id;
|
||||
this.participantId = participantId;
|
||||
this.partyId = partyId;
|
||||
this.position = position;
|
||||
this.properties = properties;
|
||||
this.sampleTime = sampleTime;
|
||||
this.EventTypeName = null;
|
||||
this.color = null;
|
||||
this.realTime;
|
||||
}
|
||||
|
||||
setEventTypeName() {
|
||||
|
||||
switch (this.eventTypeId) {
|
||||
|
||||
case 0:
|
||||
this.EventTypeName = "unknown"
|
||||
this.color = "rgb(148,0,211,0.6)";
|
||||
break;
|
||||
case 1:
|
||||
this.EventTypeName = "Hit"
|
||||
this.color = "rgb(255,255,0,0.6)";
|
||||
break;
|
||||
case 10:
|
||||
this.EventTypeName = "RadioTvc"
|
||||
this.color = "rgb(186,85,211,0.6)";
|
||||
break;
|
||||
case 11:
|
||||
this.EventTypeName = "Audio"
|
||||
this.color = "rgb(0,0,255,0.6)";
|
||||
break;
|
||||
case 12:
|
||||
this.EventTypeName = "Video"
|
||||
this.color = "rgb(79,79,79,0.6)";
|
||||
break;
|
||||
case 13:
|
||||
this.EventTypeName = "HitIndirect"
|
||||
this.color = "rgb(139,69,19,0.6)";
|
||||
break;
|
||||
case 14:
|
||||
this.EventTypeName = "HitMine"
|
||||
this.color = "rgb(205,92,92,0.6)";
|
||||
break;
|
||||
case 15:
|
||||
this.EventTypeName = "HitN"
|
||||
this.color = "rgb(178,34,34,0.6)";
|
||||
break;
|
||||
case 16:
|
||||
this.EventTypeName = "HitC"
|
||||
this.color = "rgb(160,82,45,0.6)";
|
||||
break;
|
||||
case 17:
|
||||
this.EventTypeName = "EnterDangerArea"
|
||||
this.color = "rgb(152,251,152,0.6)";
|
||||
break;
|
||||
case 18:
|
||||
this.EventTypeName = "LeaveDangerArea"
|
||||
this.color = "rgb(255,160,122,0.6)";
|
||||
break;
|
||||
case 19:
|
||||
this.EventTypeName = "EnterMineArea"
|
||||
this.color = "rgb(0,255,0,0.6)";
|
||||
break;
|
||||
case 2:
|
||||
this.EventTypeName = "WeaponAssignment"
|
||||
this.color = "rgb(199,199,199,0.6)";
|
||||
break;
|
||||
case 20:
|
||||
this.EventTypeName = "LeaveMineArea"
|
||||
this.colro = "rgb(255,0,0,0.6)";
|
||||
break;
|
||||
case 21:
|
||||
this.EventTypeName = "CrossLocalBorderline"
|
||||
this.color = "rgb(0,255,255,0.6)";
|
||||
break;
|
||||
case 22:
|
||||
this.EventTypeName = "EnterFunctionalArea"
|
||||
this.color = "rgb(124,252,0,0.6)";
|
||||
break;
|
||||
case 23:
|
||||
this.EventTypeName = "LeaveFunctionalArea"
|
||||
this.color = "rgb(255,69,0,0.6)";
|
||||
break;
|
||||
case 24:
|
||||
this.EventTypeName = "EnterNuclear"
|
||||
this.color = "rgb(50,205,50,0.6)";
|
||||
break;
|
||||
case 25:
|
||||
this.EventTypeName = "LeaveNuclear";
|
||||
this.color = "rgb(255,20,147,0.6)";
|
||||
break;
|
||||
case 26:
|
||||
this.EventTypeName = "CrossGlobalBorderline"
|
||||
this.color = "rgb(0,206,209,0.6)";
|
||||
break;
|
||||
case 27:
|
||||
this.EventTypeName = "HitB";
|
||||
this.color = "rgb(255,215,0,0.6)";
|
||||
break;
|
||||
case 3:
|
||||
this.EventTypeName = "BiteMessage"
|
||||
this.color = "rgb(30,144,255,0.7)";
|
||||
break;
|
||||
case 4:
|
||||
this.EventTypeName = "FireEvent"
|
||||
this.color = "rgb(189,183,107,0.6)";
|
||||
break;
|
||||
case 5:
|
||||
this.EventTypeName = "HitBuilding"
|
||||
this.color = "rgb(184,134,11,0.6)";
|
||||
break;
|
||||
case 6:
|
||||
this.EventTypeName = "Manipulation"
|
||||
this.color = "rgb(255,105,180,0.6)";
|
||||
break;
|
||||
case 7:
|
||||
this.EventTypeName = "CameraAudio"
|
||||
this.color = "rgb(0,191,255,0.6)";
|
||||
break;
|
||||
case 8:
|
||||
this.EventTypeName = "CameraVideo"
|
||||
this.color = "rgb(135,206,250,0.6)";
|
||||
break;
|
||||
case 9:
|
||||
this.EventTypeName = "RadioCnr"
|
||||
this.color = "rgb(221,160,221,0.6)";
|
||||
break;
|
||||
case 28:
|
||||
this.EventTypeName = "FriendlyFire";
|
||||
this.color = "rgb(240,230,140,0.6)";
|
||||
break;
|
||||
case 100:
|
||||
this.EventTypeName = "EquipmentErrorReport";
|
||||
this.color = "rgb(34,139,34,0.6)";
|
||||
break;
|
||||
case 112:
|
||||
this.EventTypeName = "EmergencyCall"
|
||||
this.color = "rgb(127,255,212,0.6)"
|
||||
break;
|
||||
default:
|
||||
this.EventTypeName = "none"
|
||||
this.color = "pink";
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
setRealTime() {
|
||||
|
||||
date = (String(new Date(this.sampleTime)).split(" "));
|
||||
this.realTime = `${date[2]} ${date[1]} ${date[3]} | ${date[4]}`
|
||||
}
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
|
||||
setTime();
|
||||
setDate();
|
||||
getPorts();
|
||||
}
|
||||
|
||||
function setDate() {
|
||||
|
||||
date = new Date();
|
||||
|
||||
document.getElementById("trainingDateEnd").valueAsDate = date;
|
||||
document.getElementById("trainingDateEnd").innerHTML = date;
|
||||
|
||||
date.setFullYear(date.getFullYear() - 1);
|
||||
|
||||
document.getElementById("trainingDateStart").valueAsDate = date;
|
||||
document.getElementById("trainingDateStart").innerHTML = date;
|
||||
}
|
||||
|
||||
function setTime() {
|
||||
|
||||
document.getElementById("startTime").value = "00:00";
|
||||
document.getElementById("startTime").innerHTML = "00:00";
|
||||
document.getElementById("endTime").value = "00:00";
|
||||
document.getElementById("endTime").innerHTML = "00:00";
|
||||
}
|
||||
|
||||
function connect() {
|
||||
|
||||
document.getElementById("connectionDiv").innerHTML = "Server: not connected";
|
||||
document.getElementById("connectionDiv").style.color = "red";
|
||||
ipadresse = document.getElementById("ipadresse").value;
|
||||
port = document.getElementById("port").value;
|
||||
|
||||
getData();
|
||||
}
|
||||
|
||||
function getPorts() {
|
||||
|
||||
if ("WebSocket" in window) {
|
||||
document.getElementById("connectionDiv").innerHTML = "Server: not connected";
|
||||
document.getElementById("connectionDiv").style.color = "red"
|
||||
|
||||
wSocket = new WebSocket("ws://" + ipadresse + ":" + port)
|
||||
|
||||
document.getElementById("ipadresse").value = ipadresse;
|
||||
document.getElementById("port").value = port;
|
||||
|
||||
wSocket.onopen = function () {
|
||||
document.getElementById("connectionDiv").innerHTML = "Server: connected";
|
||||
document.getElementById("connectionDiv").style.color = "green"
|
||||
|
||||
sendMsg();
|
||||
};
|
||||
|
||||
wSocket.onmessage = function (event) {
|
||||
let msg = JSON.parse(event.data);
|
||||
let ports = msg.data;
|
||||
let portSelection = document.getElementById("portSelection");
|
||||
portSelection.innerHTML = `<option value="7300" selected>Übungen</option>`;
|
||||
|
||||
ports.forEach(port => {
|
||||
port.services.forEach(service => {
|
||||
if (service.name === "ExerciseEventManagement") {
|
||||
append += `<option value="${service.ports[0].number}">Übung ${port.exerciseId}</option>`
|
||||
}
|
||||
});
|
||||
|
||||
portSelection.innerHTML += append;
|
||||
append = "";
|
||||
});
|
||||
};
|
||||
}
|
||||
else {
|
||||
alert("WebSocket is NOT supported by your Browser!");
|
||||
}
|
||||
}
|
||||
|
||||
function sendMsg() { //abfrage für alle ServicePortInformationen
|
||||
|
||||
wSocket.send(JSON.stringify({
|
||||
type: "servicePortsInformationRequest",
|
||||
uuid: "7777",
|
||||
}));
|
||||
}
|
||||
|
||||
function changePort() {
|
||||
|
||||
let selected = document.getElementById("portSelection").value;
|
||||
port = String(selected);
|
||||
document.getElementById("port").value = port;
|
||||
|
||||
if (port == "7300") {
|
||||
getPorts();
|
||||
} else {
|
||||
getData();
|
||||
}
|
||||
}
|
||||
|
||||
function getData(requestString) {
|
||||
|
||||
document.getElementById("connectionDiv").innerHTML = "Server: not connected";
|
||||
document.getElementById("connectionDiv").style.color = "red"
|
||||
|
||||
if ("WebSocket" in window) {
|
||||
if (requestString === undefined) {
|
||||
wSocket = new WebSocket("ws://" + ipadresse + ":" + port);
|
||||
} else {
|
||||
wSocket = new WebSocket("ws://" + ipadresse + ":" + port + requestString);
|
||||
}
|
||||
|
||||
console.log("WSocket: ", wSocket);
|
||||
|
||||
connectedToServer = true;
|
||||
|
||||
wSocket.onopen = function () {
|
||||
document.getElementById("connectionDiv").innerHTML = "Server: connected";
|
||||
document.getElementById("connectionDiv").style.color = "green"
|
||||
};
|
||||
wSocket.onmessage = function (event) {
|
||||
msg = JSON.parse(event.data);
|
||||
|
||||
console.log(msg);
|
||||
|
||||
if (msg[0] != null) {
|
||||
msgArr.push(msg);
|
||||
}
|
||||
else {
|
||||
createEventObjs();
|
||||
}
|
||||
};
|
||||
}
|
||||
else {
|
||||
alert("WebSocket is NOT supported by your Browser!");
|
||||
}
|
||||
}
|
||||
|
||||
function sendRequest() {
|
||||
|
||||
EventObjArr = [];
|
||||
msgArr = [];
|
||||
var übung = document.getElementById("portSelection").value;
|
||||
|
||||
if (übung === "7300") {
|
||||
alert("Bitte eine Übung auswählen!");
|
||||
}
|
||||
|
||||
var startDate = Date.parse(document.getElementById("trainingDateStart").value) - (2 * 1000 * 60 * 60);
|
||||
var startTime = document.getElementById("startTime").value.split(':');
|
||||
var endDate = Date.parse(document.getElementById("trainingDateEnd").value) - (2 * 1000 * 60 * 60);
|
||||
var endTime = document.getElementById("endTime").value.split(':');
|
||||
|
||||
startTime = (startTime[0] * 60 * 60 * 1000) + (startTime[1] * 60 * 1000);
|
||||
endTime = (endTime[0] * 60 * 60 * 1000) + (endTime[1] * 60 * 1000);
|
||||
|
||||
var start = startDate + startTime;
|
||||
var end = endDate + endTime;
|
||||
|
||||
if (isNaN(start) || isNaN(end)) {
|
||||
alert("Bitte einen Zeitraum auswählen!");
|
||||
}
|
||||
|
||||
var requestString = `/request?requestId=1&from=${start}&to=${end}`;
|
||||
var eventSelects = document.getElementsByName('rqTypes');
|
||||
var firstEvent = true;
|
||||
|
||||
for (var i = 0; i < eventSelects.length; i++) {
|
||||
if (firstEvent && eventSelects[i].checked) {
|
||||
requestString += "&eventTypeId=";
|
||||
firstEvent = false;
|
||||
} else if (!firstEvent && eventSelects[i].checked) {
|
||||
requestString += ",";
|
||||
}
|
||||
|
||||
if (eventSelects[i].checked) {
|
||||
requestString += eventSelects[i].value;
|
||||
}
|
||||
}
|
||||
|
||||
console.log("Request String: ", requestString);
|
||||
|
||||
getData(requestString);
|
||||
}
|
||||
|
||||
function createEventObjs() {
|
||||
|
||||
if (msgArr.length === 0) { //if(msgArr[0] === null)
|
||||
alert("Keine Events im Angegebenen Zeitraum gefunden!");
|
||||
} else {
|
||||
var eventArray = msgArr;
|
||||
|
||||
eventArray.forEach(Array => {
|
||||
Array.forEach(event => {
|
||||
var e = new EventOBJ(event.equipmentNumber, event.eventTypeId, event.id, event.participantId, event.partyId, event.position, event.properties, event.sampleTime)
|
||||
|
||||
e.setEventTypeName();
|
||||
e.setRealTime();
|
||||
|
||||
EventObjArr.push(e);
|
||||
});
|
||||
})
|
||||
}
|
||||
countTeams();
|
||||
}
|
||||
|
||||
function countTeams() {
|
||||
|
||||
EventObjArr.forEach(event => {
|
||||
if (!Teams.includes(event.partyId)) {
|
||||
Teams.push(event.partyId);
|
||||
}
|
||||
});
|
||||
|
||||
createtableRows();
|
||||
}
|
||||
|
||||
function createtableRows() {
|
||||
|
||||
var div = document.getElementById("displayDiv");
|
||||
var rowAppend = "";
|
||||
|
||||
Teams.forEach(team => {
|
||||
rowAppend += `<div class="rowHeader">
|
||||
<div class="rowHeaderText">Team${team}</div>
|
||||
</div>
|
||||
<div class="tableRow" id="tr${team}"></div>`
|
||||
});
|
||||
|
||||
div.innerHTML = rowAppend;
|
||||
|
||||
createHtml();
|
||||
}
|
||||
|
||||
function createHtml() {
|
||||
|
||||
Teams.forEach(team => {
|
||||
var id = "tr" + team;
|
||||
var div = document.getElementById(id);
|
||||
var append = ""
|
||||
var partId = document.getElementById("partId").value;
|
||||
|
||||
EventObjArr.forEach(event => {
|
||||
if (partId === "") {
|
||||
if (event.partyId === team) {
|
||||
append += `<div class="listElement">
|
||||
<div class="heading">${event.realTime}</div>
|
||||
<div class="eventType" title=${event.EventTypeName} style="background-color:${event.color}"></div>
|
||||
<div class="infoDiv">
|
||||
<div class="infoTitleDiv">ID:</div>
|
||||
<div class="infoInfoDiv">${event.id}</div>
|
||||
</div>
|
||||
<div class="infoDiv">
|
||||
<div class="infoTitleDiv">EqNumber:</div>
|
||||
<div class="infoInfoDiv">${event.equipNumber}</div>
|
||||
</div>
|
||||
<div class="infoDiv">
|
||||
<div class="infoTitleDiv">EvTypeID:</div>
|
||||
<div class="infoInfoDiv">${event.eventTypeId}</div>
|
||||
</div>
|
||||
<div class="infoDiv">
|
||||
<div class="infoTitleDiv">ParticID:</div>
|
||||
<div class="infoInfoDiv">${event.participantId}</div>
|
||||
</div>
|
||||
<div class="infoDiv">
|
||||
<div class="infoTitleDiv">PartyID:</div>
|
||||
<div class="infoInfoDiv">${event.partyId}</div>
|
||||
</div>
|
||||
|
||||
<div class="infoDiv">Position:</div>
|
||||
<div class="positionInfoDiv">
|
||||
<div class="posParam">x:</div>
|
||||
<div class="actualPosition">${event.position.x}</div>
|
||||
</div>
|
||||
<div class="positionInfoDiv">
|
||||
<div class="posParam">y:</div>
|
||||
<div class="actualPosition">${event.position.y}</div>
|
||||
</div>
|
||||
<div class="positionInfoDiv">
|
||||
<div class="posParam">z:</div>
|
||||
<div class="actualPosition">${event.position.z}</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
} else {
|
||||
if (event.partyId === team && partId == event.participantId) {
|
||||
append += `<div class="listElement">
|
||||
<div class="heading">${event.realTime}</div>
|
||||
<div class="eventType" title=${event.EventTypeName} style="background-color:${event.color}"></div>
|
||||
<div class="infoDiv">
|
||||
<div class="infoTitleDiv">ID:</div>
|
||||
<div class="infoInfoDiv">${event.id}</div>
|
||||
</div>
|
||||
<div class="infoDiv">
|
||||
<div class="infoTitleDiv">EqNumber:</div>
|
||||
<div class="infoInfoDiv">${event.equipNumber}</div>
|
||||
</div>
|
||||
<div class="infoDiv">
|
||||
<div class="infoTitleDiv">EvTypeID:</div>
|
||||
<div class="infoInfoDiv">${event.eventTypeId}</div>
|
||||
</div>
|
||||
<div class="infoDiv">
|
||||
<div class="infoTitleDiv">ParticID:</div>
|
||||
<div class="infoInfoDiv">${event.participantId}</div>
|
||||
</div>
|
||||
<div class="infoDiv">
|
||||
<div class="infoTitleDiv">PartyID:</div>
|
||||
<div class="infoInfoDiv">${event.partyId}</div>
|
||||
</div>
|
||||
|
||||
<div class="infoDiv">Position:</div>
|
||||
<div class="positionInfoDiv">
|
||||
<div class="posParam">x:</div>
|
||||
<div class="actualPosition">${event.position.x}</div>
|
||||
</div>
|
||||
<div class="positionInfoDiv">
|
||||
<div class="posParam">y:</div>
|
||||
<div class="actualPosition">${event.position.y}</div>
|
||||
</div>
|
||||
<div class="positionInfoDiv">
|
||||
<div class="posParam">z:</div>
|
||||
<div class="actualPosition">${event.position.z}</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
div.innerHTML = append;
|
||||
});
|
||||
};
|
||||
|
||||
@@ -1,238 +0,0 @@
|
||||
body {
|
||||
height: 100%;
|
||||
width: 98%;
|
||||
background-color: rgb(139, 139, 139);
|
||||
}
|
||||
|
||||
hr{
|
||||
width: 100%;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
|
||||
#headerTable {
|
||||
position: relative;
|
||||
width: auto;
|
||||
display: block;
|
||||
table-layout: fixed;
|
||||
padding: 8px;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
#headerTable td{
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
#ipadresse, #partId {
|
||||
width: 150px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#port {
|
||||
width: 50px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Selection */
|
||||
|
||||
#selects {
|
||||
background-color: lightgrey;
|
||||
float: right;
|
||||
height: 850px;
|
||||
width: 18%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#tableTimer{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
left: 3%;
|
||||
}
|
||||
|
||||
#eventSelects {
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
border-radius: 10px;
|
||||
height: 75%;
|
||||
top: 0.5%;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
border: 1px solid rgb(221, 221, 221);
|
||||
background-color: rgb(243, 243, 243);
|
||||
width: 95%;
|
||||
border-radius: 10px;
|
||||
line-height: 45px;
|
||||
left: 2%;
|
||||
}
|
||||
|
||||
.checkbox:hover {
|
||||
background-color: rgb(243, 243, 243, 0.5);
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
position: relative;
|
||||
float: left;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
/* Request Button */
|
||||
|
||||
#requestButton {
|
||||
position: relative;
|
||||
height: 9%;
|
||||
width: 96%;
|
||||
top: 1.5%;
|
||||
left: 2%;
|
||||
}
|
||||
|
||||
/* Vertical header */
|
||||
|
||||
.rowHeader {
|
||||
position: relative;
|
||||
float: left;
|
||||
background-color: grey;
|
||||
width: 3%;
|
||||
top: 1.5%;
|
||||
left: 0.5%;
|
||||
height: 32%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.rowHeaderText {
|
||||
transform: rotate(90deg);
|
||||
position: relative;
|
||||
color: white;
|
||||
top: 40%;
|
||||
font-size: 1vw;
|
||||
}
|
||||
|
||||
/* Display events */
|
||||
|
||||
#displayDiv{
|
||||
|
||||
background-color: lightgray;
|
||||
border-radius: 10px;
|
||||
height: 850px;
|
||||
width: 81%;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
}
|
||||
|
||||
.listElement {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
width: 10%;
|
||||
left: 1%;
|
||||
top: 3%;
|
||||
margin-right: 1%;
|
||||
border-radius: 10px;
|
||||
height: 94%;
|
||||
background-color: rgb(139, 139, 139);
|
||||
}
|
||||
|
||||
.tableRow {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
overflow-y: auto;
|
||||
width: 95%;
|
||||
left: 1%;
|
||||
height: 32%;
|
||||
margin-bottom: 0.3%;
|
||||
top: 1.5%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.heading {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
background-color: rgb(57, 57, 57);
|
||||
width: 95%;
|
||||
left: 2.5%;
|
||||
font-size: 0.8vw;
|
||||
line-height: 40px;
|
||||
top: 3%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.eventType{
|
||||
position: relative;
|
||||
width: 8%;
|
||||
height: 5%;
|
||||
top: 75%;
|
||||
left: 85%;
|
||||
}
|
||||
|
||||
.infoDiv {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
color: white;
|
||||
height: 7%;
|
||||
width: 90%;
|
||||
left: 5%;
|
||||
background-color: rgb(100, 100, 100);
|
||||
top: 1%;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 2%;
|
||||
line-height: 14px;
|
||||
font-size: 0.7vw;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
.infoTitleDiv {
|
||||
position: relative;
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
background-color: rgb(80, 80, 80);
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
|
||||
.infoInfoDiv {
|
||||
float: right;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.positionInfoDiv {
|
||||
color: white;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
height: 7%;
|
||||
left: 5%;
|
||||
border-radius: 10px;
|
||||
top: 1%;
|
||||
width: 65%;
|
||||
background-color: rgb(80, 80, 80);
|
||||
line-height: 14px;
|
||||
font-size: 0.7vw;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
margin-bottom: 1%;
|
||||
}
|
||||
|
||||
.posParam {
|
||||
position: relative;
|
||||
float: left;
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
height: 100%;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.actualPosition {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 70%;
|
||||
float: right;
|
||||
background-color: rgb(100, 100, 100);
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 762 KiB |
|
Before Width: | Height: | Size: 68 KiB |
|
Before Width: | Height: | Size: 726 KiB |
|
Before Width: | Height: | Size: 388 KiB |
|
Before Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 352 KiB |
|
Before Width: | Height: | Size: 868 KiB |
|
Before Width: | Height: | Size: 734 KiB |
|
Before Width: | Height: | Size: 145 KiB |
|
Before Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 80 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 154 KiB |
|
Before Width: | Height: | Size: 1.5 MiB |
@@ -1,417 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>ToolOverview</title>
|
||||
<link href="overviewStyle.css" rel="stylesheet">
|
||||
<script>
|
||||
// When the user clicks on <div>, open the popup
|
||||
function popup(id) {
|
||||
var popup = document.getElementById(id);
|
||||
popup.classList.toggle("show");
|
||||
}
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.liste { text-align: left; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Tool-Übersicht</h1>
|
||||
|
||||
<hr>
|
||||
|
||||
<div id="centerDiv">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="innerDiv">
|
||||
<div>
|
||||
<div class="popup" onclick="popup('popup1')">
|
||||
<i><img src="info.png"></i>
|
||||
<span class="popuptext" id="popup1">3D-Darstellung beliebiger Verwundungsmodelle.</span>
|
||||
</div>
|
||||
<h2>Verwundungmodell</h2>
|
||||
</div>
|
||||
<a href="../3D Verwundungsmodell/3DVMModel.html" class="fill-div">
|
||||
<img src="Verwundungsmodell.png">
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="innerDiv">
|
||||
<div>
|
||||
<div class="popup" onclick="popup('popup2')">
|
||||
<i><img src="info.png"></i>
|
||||
<span class="popuptext" id="popup2">Karte mit Darstellung von MountingPoints und Footprints.</span>
|
||||
</div>
|
||||
<h2>MapView</h2>
|
||||
</div>
|
||||
<a href="../MapView/MapView2.0.html" class="fill-div">
|
||||
<img src="MapView.jpg">
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="innerDiv">
|
||||
<div>
|
||||
<div class="popup" onclick="popup('popup3')">
|
||||
<i><img src="info.png"></i>
|
||||
<span class="popuptext" id="popup3">Zeitstrahl zur Darstellung von zeitlich geordneten Ereignissen
|
||||
bestimmter Übungen.</span>
|
||||
</div>
|
||||
<h2>TimeLine</h2>
|
||||
</div>
|
||||
<a href="../TimeLineProject/TimeLine.html" class="fill-div">
|
||||
<img src="TimeLine.png">
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="innerDiv">
|
||||
<div>
|
||||
<div class="popup" onclick="popup('popup4')">
|
||||
<i><img src="info.png"></i>
|
||||
<span class="popuptext" id="popup4">Tool zum Darstellen von Laufwegen.</span>
|
||||
</div>
|
||||
<h2>Laufwege</h2>
|
||||
</div>
|
||||
<a href="../Laufwegdarstellung/LaufwegDarstellung.html" class="fill-div">
|
||||
<img src="laufweg.png">
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="innerDiv">
|
||||
<div>
|
||||
<div class="popup" onclick="popup('popup5')">
|
||||
<i><img src="info.png"></i>
|
||||
<span class="popuptext" id="popup5">BSM Hit.</span>
|
||||
</div>
|
||||
<h2>BSM Hit</h2>
|
||||
</div>
|
||||
<a href="../../Mout/bsmHit.html" class="fill-div">
|
||||
<img src="Mout.png">
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="innerDiv">
|
||||
<div>
|
||||
<div class="popup" onclick="popup('popup6')">
|
||||
<i><img src="info.png"></i>
|
||||
<span class="popuptext" id="popup6">Tool zum Ansteuern der Blitzlampe.</span>
|
||||
</div>
|
||||
<h2> Bsm Trigger Flashlight</h2>
|
||||
</div>
|
||||
<a href="../..//Buildings/recieveJsonBld.html" class="fill-div">
|
||||
<img src="TriggerFlashlight.png">
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="innerDiv">
|
||||
<div>
|
||||
<div class="popup" onclick="popup('popup7')">
|
||||
<i><img src="info.png"></i>
|
||||
<span class="popuptext" id="popup7">Tool zum Erstellen von WLS Tracks.</span>
|
||||
</div>
|
||||
<h2>WLS Trackerzeuger</h2>
|
||||
</div>
|
||||
<a href="../../WirelessLocationTools/recieveJsonMsg.html" class="fill-div">
|
||||
<img src="WLSTracks.png">
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="innerDiv">
|
||||
<div>
|
||||
<div class="popup" onclick="popup('popup8')">
|
||||
<i><img src="info.png"></i>
|
||||
<span class="popuptext" id="popup8">Tool zum Einspeisen von Positionen.</span>
|
||||
</div>
|
||||
<h2>Leaflat</h2>
|
||||
</div>
|
||||
<a href="../../ParticipantPositionGeneratorHTML/leaflet/www/index.html" class="fill-div">
|
||||
<img src="Leaflat.png">
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="innerDiv">
|
||||
<div>
|
||||
<div class="popup" onclick="popup('popup9')">
|
||||
<i><img src="info.png"></i>
|
||||
<span class="popuptext" id="popup9">Tool zum Darstellen und Mounten von Assets.</span>
|
||||
</div>
|
||||
<h2>Infrastructure</h2>
|
||||
</div>
|
||||
<a href="../../InfrastructureManagement/infrastructure.html" class="fill-div">
|
||||
<img src="Infrastructure.png">
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="innerDiv">
|
||||
<div>
|
||||
<div class="popup" onclick="popup('popup10')">
|
||||
<i><img src="info.png"></i>
|
||||
<span class="popuptext" id="popup10">Tool zum setzen der Raumbeschädigung.</span>
|
||||
</div>
|
||||
<h2>Set Room-Damage State</h2>
|
||||
</div>
|
||||
<a href="../../Mout/setDamageState.html" class="fill-div">
|
||||
<img src="setDMGState.png">
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="innerDiv">
|
||||
<div>
|
||||
<div class="popup" onclick="popup('popup11')">
|
||||
<i><img src="info.png"></i>
|
||||
<span class="popuptext" id="popup11">Tool zum Darstellen von Events auf einer Karte.</span>
|
||||
</div>
|
||||
<h2>EventViewer</h2>
|
||||
</div>
|
||||
<a href="../EventView/EventView.html" class="fill-div">
|
||||
<img src="EventViewer.jpg">
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="innerDiv">
|
||||
<div>
|
||||
<div class="popup" onclick="popup('popup12')">
|
||||
<i><img src="info.png"></i>
|
||||
<span class="popuptext" id="popup12">Tool zum Darstellen von Events auf einer Karte.</span>
|
||||
</div>
|
||||
<h2>Positionseinspeisung</h2>
|
||||
</div>
|
||||
<a href="../Positionseinspeisung/positionseinspeisung.html" class="fill-div">
|
||||
<img src="Positionseinspeisung.jpg">
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="innerDiv">
|
||||
<div>
|
||||
<div class="popup" onclick="popup('popup13')">
|
||||
<i><img src="info.png"></i>
|
||||
<span class="popuptext" id="popup13">Tool zum Loggen von Telegrammen.</span>
|
||||
</div>
|
||||
<h2>Websocket Sniffer</h2>
|
||||
</div>
|
||||
<a href="../Websockets/websocketTool.html" class="fill-div">
|
||||
<img src="WebsocketSniffer.png">
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="innerDiv">
|
||||
<div>
|
||||
<div class="popup" onclick="popup('popup14')">
|
||||
<i><img src="info.png"></i>
|
||||
<span class="popuptext" id="popup14">Zeigt Mountingpoints auf der Leaflet-Karte an</span>
|
||||
</div>
|
||||
<h2></h2>
|
||||
</div>
|
||||
<a href="../../ArAssetsV2/www/index.html" class="fill-div">
|
||||
<h2>Show Assets</h2>
|
||||
<img src="ShowAssets.png">
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="innerDiv">
|
||||
<div>
|
||||
<div class="popup" onclick="popup('popup15')">
|
||||
<i><img src="info.png"></i>
|
||||
<span class="popuptext" id="popup15">Zeigt Participant-Positionen auf der Leaflet-Karte an</span>
|
||||
</div>
|
||||
<h2></h2>
|
||||
</div>
|
||||
<a href="../../ArAssetsV3/readme.txt" <h4>Doku</h4></a>
|
||||
<a href="../../ArAssetsV3/www/index.html" class="fill-div">
|
||||
<h2>Input and show Participant Positions</h2>
|
||||
<h3>(Justus-Tools)</h2>
|
||||
<img src="ShowPositions.png">
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="innerDiv">
|
||||
<div>
|
||||
<div class="popup" onclick="popup('popup16')">
|
||||
<i><img src="info.png"></i>
|
||||
<span class="popuptext" id="popup16">Zeigt Participant-Positionen auf der Leaflet-Karte an</span>
|
||||
</div>
|
||||
<h2></h2>
|
||||
</div>
|
||||
<a href="../../TrackingTool/TrackingTool_Doku.pdf" <h4>Doku</h4></a>
|
||||
<a href="../../TrackingTool/index.html" class="fill-div">
|
||||
<h2>Show Participant Positions</h2>
|
||||
<h4>Jan Lubes</h4>
|
||||
<ul class="liste">
|
||||
<li>Quelle der Positionsmeldungen ist der ppm-Websocket</li>
|
||||
<li>Anzeige der Positionsmeldungen auf der Leaflet-Karte</li>
|
||||
<li>Symbole in der Parteifarbe</li>
|
||||
<li>Filter</li>
|
||||
</ul>
|
||||
<img src="../../TrackingTool/TrackingTool.png">
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="innerDiv">
|
||||
<div>
|
||||
<div class="popup" onclick="popup('popup17')">
|
||||
<i><img src="info.png"></i>
|
||||
<span class="popuptext" id="popup17">Websocket Sniffer</span>
|
||||
</div>
|
||||
<h2></h2>
|
||||
</div>
|
||||
<a href="../../SocketSniffer/SocketSniffer_Doku.pdf" <h4>Doku</h4></a>
|
||||
<a href="../../SocketSniffer/index.html" class="fill-div">
|
||||
<h2>Websocket Sniffer++</h2>
|
||||
<h4>Jan Lubes</h4>
|
||||
<ul class="liste">
|
||||
<li>Quelle ist der Verwaltungsport 7300</li>
|
||||
<li>Anzeige der möglichen Websockets</li>
|
||||
<li>Tabellarische Anzeige der empfangenen Werte</li>
|
||||
</ul>
|
||||
<img src="../../SocketSniffer/WebsocketSniffer.png">
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="innerDiv">
|
||||
<div>
|
||||
<div class="popup" onclick="popup('popup18')">
|
||||
<i><img src="info.png"></i>
|
||||
<span class="popuptext" id="popup18">Timeline Overview</span>
|
||||
</div>
|
||||
<h2></h2>
|
||||
</div>
|
||||
<a href="../../TimelineOverview/Noahs Timeline - Dokumentation.pdf" <h4>Doku</h4></a>
|
||||
<a href="../../TimelineOverview/Noahs Timeline - Dokumentation.pdf" class="fill-div">
|
||||
<h2>Timeline Overview</h2>
|
||||
<h4>Noah Thiering</h4>
|
||||
<ul class="liste">
|
||||
<li>Überblick über die Inhalte der Timeline über die gesamte Übung</li>
|
||||
<li>Möglichkeit zum Selektieren von Zeiträumen</li>
|
||||
<li>Filtern von Ereignistypen</li>
|
||||
<li>Anwendung ist mit Node erstellt (Webserver, der die Applikation zur Verfügung stellt.)</li>
|
||||
</ul>
|
||||
<img src="../../TimelineOverview/TimelineOverview.png">
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="innerDiv">
|
||||
<div>
|
||||
<div class="popup" onclick="popup('popup19')">
|
||||
<i><img src="info.png"></i>
|
||||
<span class="popuptext" id="popup19">Timeline für einen Participant mit Kartendarstellung der Route und Anzeige der Events</span>
|
||||
</div>
|
||||
<h2></h2>
|
||||
</div>
|
||||
<a href="../../JustusTimeline/doku.pdf" <h4>Doku</h4></a>
|
||||
<a href="../../TimelineParticipant/js/index.html" class="fill-div">
|
||||
<h2>Timeline Participant</h2>
|
||||
Analog zur Google Timeline
|
||||
<ul class="liste">
|
||||
<li>Übungsauswahl</li>
|
||||
<li>Auswahl eines Participants</li>
|
||||
<li>Anzeige der Route auf einer leaflet-Karte</li>
|
||||
<li>Anzeige der Events auf einer leaflet-Karte</li>
|
||||
<li>Einstellbares Zeitfenster</li>
|
||||
<li>Filter auf Event-Typen</li>
|
||||
<li>Anzeige der Events in einer Liste in Textform unterhalb der Kartendarstellung</li>
|
||||
</ul>
|
||||
<img src="../../TimelineParticipant/TimelineParticipant.png">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<div class="innerDiv">
|
||||
<div>
|
||||
<div class="popup" onclick="popup('popup20')">
|
||||
<i><img src="info.png"></i>
|
||||
<span class="popuptext" id="popup19">Replay mit Rest-API und GeoJson</span>
|
||||
</div>
|
||||
<h2></h2>
|
||||
</div>
|
||||
<a href="../../rme-playback/Praesentationen/Azubi_Projekt_2D_Lageplayback.pdf" <h4>Präsentation Einleitung</h4></a><br>
|
||||
<a href="../../rme-playback/Praesentationen/RME-Playback.pdf" <h4>Präsentation Azubis</h4></a><br>
|
||||
<a href="https://devhub.defence-elec.de/jira/secure/RapidBoard.jspa?rapidView=1856&projectKey=ESAZUBI" <h4>Kanban</h4></a><br>
|
||||
<a href="https://devhub.defence-elec.de/jira/secure/RapidBoard.jspa?rapidView=1857&projectKey=ESAZUBI" <h4>Scrum</h4></a><br>
|
||||
<a href="https://devhub.defence-elec.de/confluence/display/ESAZUBI/ES+Ausbildung+Home" <h4>Confluence</h4></a>
|
||||
<a href="../../rme-playback/Praesentationen/RME-Playback.pdf" class="fill-div">
|
||||
<h2>Replay</h2>
|
||||
Pascal-Nino Pinzer<br>
|
||||
Marius Meyer
|
||||
<ul class="liste">
|
||||
Implementierung eines Replays mit folgenen Technologien:
|
||||
<li>GeoJson</li>
|
||||
<li>Rest-Api</li>
|
||||
<li>Postgres-DB</li>
|
||||
<li>2D-Karte mit Leaflet</li>
|
||||
|
||||
</ul>
|
||||
<img src="../../rme-playback/Praesentationen/Komponentenuebersicht.PNG">
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<h2>OC-Map Geojson</h2>
|
||||
Pascal-Nino Pinzer<br>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<h2>Trajectory Viewer 3D</h2>
|
||||
Gerlinde Rudolphus<br>
|
||||
<p style="text-align: left;">
|
||||
Die Flugbahn muss in einer csv-Datei in folgendem Format vorliegen:
|
||||
<ul style="text-align: left;">
|
||||
<strong>Beispiel:<br></strong>
|
||||
id,x,y,z<br>
|
||||
0,0,0,0<br>
|
||||
0,3.74887,1.36106,0.00839241<br>
|
||||
0,7.48712,2.71728,0.016761<br>
|
||||
0,11.2148,4.06868,0.025106<br>
|
||||
</ul>
|
||||
</p>
|
||||
<img src="../../Trajectories/HTML-TrajectoryViewer/TrajectoryViewer.png">
|
||||
</td>
|
||||
<td>
|
||||
</td>
|
||||
<td>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,126 +0,0 @@
|
||||
body {
|
||||
width: 98%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
h2{
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
i img{
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
a.fill-div {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
display: block;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
tr{
|
||||
height: 30%;
|
||||
width: 90%;
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
td{
|
||||
position: relative;
|
||||
border: 1px solid black;
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.innerDiv{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Popup container */
|
||||
.popup {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
right: 20px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
/* The actual popup (appears on top) */
|
||||
.popup .popuptext {
|
||||
visibility: hidden;
|
||||
width: 180px;
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 8px 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 125%;
|
||||
left: 50%;
|
||||
margin-left: -90px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
/* Popup arrow */
|
||||
.popup .popuptext::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: #555 transparent transparent transparent;
|
||||
}
|
||||
|
||||
/* Toggle this class when clicking on the popup container (hide and show the popup) */
|
||||
.popup .show {
|
||||
visibility: visible;
|
||||
-webkit-animation: fadeIn 1s;
|
||||
animation: fadeIn 1s
|
||||
}
|
||||
|
||||
/* Add animation (fade in the popup) */
|
||||
@-webkit-keyframes fadeIn {
|
||||
from {opacity: 0;}
|
||||
to {opacity: 1;}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {opacity: 0;}
|
||||
to {opacity:1 ;}
|
||||
}
|
||||
|
||||
#centerDiv{
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
width: 96%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px){
|
||||
|
||||
table tr {
|
||||
display: block;
|
||||
}
|
||||
|
||||
table td {
|
||||
display: block;
|
||||
left: 5%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 21 KiB |
@@ -1,200 +0,0 @@
|
||||
|
||||
var exampleSocket;
|
||||
var firstMsg = true;
|
||||
var textBoxArr = [];
|
||||
var SelBranchVal = "";
|
||||
var connectedToServer = false;
|
||||
var msg;
|
||||
|
||||
|
||||
window.onload = function () {
|
||||
WebSocketTest();
|
||||
}
|
||||
|
||||
function WebSocketTest() {
|
||||
if ("WebSocket" in window) {
|
||||
{
|
||||
var ipadresse = document.getElementById("ipadresse").value;
|
||||
exampleSocket = new WebSocket("ws://" + ipadresse);
|
||||
connectedToServer = true;
|
||||
}
|
||||
exampleSocket.onopen = function () {
|
||||
document.getElementById("Serverconnect").innerHTML = "Server: connected";
|
||||
document.getElementById("Serverconnect").style.color = "green"
|
||||
};
|
||||
//wird immer aufgerufen wenn der Socket eine Nachricht vom Server empfängt
|
||||
exampleSocket.onmessage = function (event) {
|
||||
console.log(msg);
|
||||
msg = JSON.parse(event.data);
|
||||
document.getElementById("receivedMessages").innerHTML += JSON.stringify(msg);
|
||||
document.getElementById("receivedMessages").innerHTML += "<br>";
|
||||
|
||||
};
|
||||
|
||||
exampleSocket.onclose = function () {
|
||||
// websocket is closed.
|
||||
document.getElementById("Serverconnect").innerHTML = "Server: not connected";
|
||||
document.getElementById("Serverconnect").style.color = "grey";
|
||||
|
||||
// document.getElementById("Wlsconnect").innerHTML = "Wls: not connected";
|
||||
document.getElementById("Wlsconnect").style.color = "red";
|
||||
|
||||
connectedToServer = false;
|
||||
alert("Connection to Server closed.");
|
||||
};
|
||||
}
|
||||
|
||||
else {
|
||||
// The browser doesn't support WebSocket
|
||||
alert("WebSocket is NOT supported by your Browser!");
|
||||
}
|
||||
}
|
||||
|
||||
function sendGetEssentials() {
|
||||
|
||||
exampleSocket.send(JSON.stringify({
|
||||
type: "getEssentials",
|
||||
uuid: "UUID"
|
||||
}));
|
||||
|
||||
}
|
||||
|
||||
function sendMountTags() {
|
||||
|
||||
exampleSocket.send(JSON.stringify({
|
||||
type: "mountTag",
|
||||
uuid: "UUID",
|
||||
data: {
|
||||
mountingPointTag : "BarcodeTag1",
|
||||
assetTag: "BarcodeAsset1"
|
||||
}
|
||||
}));
|
||||
exampleSocket.send(JSON.stringify({
|
||||
type: "mountTag",
|
||||
uuid: "UUID",
|
||||
data: {
|
||||
mountingPointTag : "BarcodeTag2",
|
||||
assetTag: "BarcodeAsset2"
|
||||
}
|
||||
}));
|
||||
|
||||
}
|
||||
|
||||
|
||||
function sendGetAssets() {
|
||||
|
||||
exampleSocket.send(JSON.stringify({
|
||||
type: "getAssets",
|
||||
uuid: "UUID"
|
||||
}));
|
||||
|
||||
}
|
||||
|
||||
|
||||
function sendGetPlannedMounting() {
|
||||
|
||||
exampleSocket.send(JSON.stringify({
|
||||
type: "getPlannedMounting",
|
||||
uuid: "UUID"
|
||||
}));
|
||||
|
||||
}
|
||||
|
||||
function sendGetObjectMounting() {
|
||||
|
||||
exampleSocket.send(JSON.stringify({
|
||||
type: "getObjectMounting",
|
||||
uuid: "UUID"
|
||||
}));
|
||||
|
||||
}
|
||||
|
||||
//--------------------------------------------------------//
|
||||
function servicePortsInformationRequest() {
|
||||
console.log("servicePortsInformationRequest");
|
||||
|
||||
exampleSocket.send(JSON.stringify({
|
||||
type: "servicePortsInformationRequest",
|
||||
uuid: "UUID"
|
||||
}));
|
||||
|
||||
}
|
||||
|
||||
//--------------------------------------------------------//
|
||||
|
||||
function baseDlRequest() {
|
||||
|
||||
exampleSocket.send(JSON.stringify({
|
||||
type: "baseDlRequest",
|
||||
uuid: "UUID"
|
||||
}));
|
||||
|
||||
}
|
||||
|
||||
function pdfListRequest() {
|
||||
|
||||
exampleSocket.send(JSON.stringify({
|
||||
type: "pdfListRequest",
|
||||
uuid: "UUID"
|
||||
}));
|
||||
|
||||
}
|
||||
|
||||
|
||||
//--------------------------------------------------------//
|
||||
function sendGetAssets() {
|
||||
//exampleSocket schickt eine Abfrage an den Server
|
||||
//liefert das asset mit der TypId zurück
|
||||
// BSM
|
||||
exampleSocket.send(JSON.stringify({
|
||||
type: "getAssets",
|
||||
uuid: "UUID",
|
||||
data: {
|
||||
assetTypeId: [1, 2, 3, 4, 5, 6, 10, 12]
|
||||
}
|
||||
}));
|
||||
|
||||
}
|
||||
|
||||
function sendAvsEndEnd() {
|
||||
console.log("sendAvsEndEnd");
|
||||
exampleSocket.send(JSON.stringify({
|
||||
endTime: 1641887329958,
|
||||
eventTime: 1641887329958,
|
||||
eventType: 10,
|
||||
id: 72774090,
|
||||
lastRangeClosed: true,
|
||||
streamName: "av_0141"
|
||||
}));
|
||||
}
|
||||
|
||||
function sendAvsOpen() {
|
||||
console.log("sendAvsOpen");
|
||||
exampleSocket.send(JSON.stringify({
|
||||
endTime: 1641887329958,
|
||||
eventTime: 1641887329958,
|
||||
eventType: 10,
|
||||
id: 72774090,
|
||||
lastRangeClosed: true,
|
||||
streamName: "av_0141"
|
||||
}));
|
||||
}
|
||||
|
||||
function sendMountTags() {
|
||||
exampleSocket.send(JSON.stringify({
|
||||
type: "mountTag",
|
||||
uuid: "UUID",
|
||||
data: {
|
||||
mountingPointTag: "se_barcode_1",
|
||||
assetTag: "asset_barcode_1"
|
||||
}
|
||||
}));
|
||||
exampleSocket.send(JSON.stringify({
|
||||
type: "mountTag",
|
||||
uuid: "UUID",
|
||||
data: {
|
||||
mountingPointTag: "se_barcode_2",
|
||||
assetTag: "asset_barcode_2"
|
||||
}
|
||||
}));
|
||||
}
|
||||
@@ -1,82 +0,0 @@
|
||||
<!DOCTYPE HTML>
|
||||
<meta charset="utf-8" />
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Websockets</title>
|
||||
<style>
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table {
|
||||
text-align: left;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript" src="js/websocket.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Websocket Sniffer</h1>
|
||||
<!-- divFunctions -->
|
||||
<hr>
|
||||
<table style="width:40.5%" id="HeaderTable">
|
||||
<tr id="HeaderTableRow">
|
||||
<td>
|
||||
<div id="WebSocketStart">
|
||||
<input type="button" id="create" value="Connect to Server" onclick="WebSocketTest()">
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<form>
|
||||
<input type="text" value="localhost:2080" id="ipadresse" />
|
||||
</form>
|
||||
</td>
|
||||
<td>
|
||||
<div id="Serverconnect">
|
||||
<font color="red">
|
||||
Server: not connected
|
||||
</font>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<hr>
|
||||
<!-- Alle ISM-Anfragen der ICD senden-->
|
||||
<div id="divFunctions">
|
||||
<h2>getEssentials</h2>
|
||||
<input type="button" id="sendGetEssentials" value="Send getEssentials" onclick="sendGetEssentials()">
|
||||
|
||||
<h2>mountTags</h2>
|
||||
<input type="button" id="sendMountTags" value="Send mountTags" onclick="sendMountTags()">
|
||||
|
||||
|
||||
<h2>getAssets</h2>
|
||||
<input type="button" id="sendGetAssets" value="Send getAssets" onclick="sendGetAssets()">
|
||||
|
||||
<h2>getPlannedMounting</h2>
|
||||
<input type="button" id="sendGetPlannedMounting" value="Send getPlannedMounting" onclick="sendGetPlannedMounting()">
|
||||
|
||||
<h2>getObjectMounting</h2>
|
||||
<input type="button" id="sendGetObjectMounting" value="Send getObjectMounting" onclick="sendGetObjectMounting()">
|
||||
<hr>
|
||||
<h1>ServiceInformations: port 7300<h1>
|
||||
<h2>servicePortsInformationRequest</h2>
|
||||
<input type="button" id="servicePortsInformationRequest" value="Send servicePortsInformationRequest" onclick="servicePortsInformationRequest()"> <br>
|
||||
<h3>An den Port ppm, ports typeId:2 folgenden Request schicken:</h3>
|
||||
<input type="button" id="baseDlRequest" value="Send baseDlRequest" onclick="baseDlRequest()"> <br>
|
||||
<input type="button" id="pdfListRequest" value="Send pdfListRequest" onclick="pdfListRequest()"> <br>
|
||||
|
||||
<h1>AVS-Event: Port 1234<h1>
|
||||
<h2>send Open Stream</h2>
|
||||
<input type="button" id="sendAvsOpen" value="Send sendAvsOpen" onclick="sendAvsOpen()">
|
||||
|
||||
<h2>send End Stream</h2>
|
||||
<input type="button" id="sendAvsEndEnd" value="Send sendAvsEndEnd" onclick="sendAvsEndEnd()">
|
||||
</div>
|
||||
<p id="receivedMessages">
|
||||
|
||||
|
||||
</html>
|
||||