Removes dlbo onging qt5 development income folder

This commit is contained in:
torsten committed 2026-09-16 12:44:04 +00:00
1 parent dba7759292
commit a5e5560478
16256 files changed
-3383918

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;
}
Binary file not shown.

Before

Width:  |  Height:  |  Size: 762 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 726 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 388 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 352 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 868 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 734 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 145 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 154 KiB

Binary file not shown.

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>
Whitespace-only changes.
@@ -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%;
}
}
Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

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>