Skip to content

GitLab

Commit 4316ca49 authored by JOE XMG's avatar JOE XMG
Browse files

update

parent bf627502
Pipeline #7109 passed with stage
in 9 seconds
Hide whitespace changes
Inline Side-by-side
public/application/js/cesium_mouse_handling.js
View file @ 4316ca49
......@@ -69,6 +69,7 @@ const clickHandler = viewer.screenSpaceEventHandler.getInputAction(
// Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// Color a feature on selection and show metadata in the InfoBox.
polygon_lorawan = []
viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(
movement
) {
......@@ -82,7 +83,9 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(
$("#sensor-hint").show()
}
// Pick a new feature
const pickedFeature = viewer.scene.pick(movement.position);
earthPosition = viewer.scene.pickPosition(movement.position);
if (!Cesium.defined(pickedFeature)) {
clickHandler(movement);
return;
......@@ -93,7 +96,7 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(
}
selected.feature = pickedFeature;
last_picked_3DTiles = pickedFeature;
last_position = movement.position
//check if it is [3D Tile building] else [Pipe].
if (!pickedFeature.id) {
var all_selected_property_names = last_picked_3DTiles.getPropertyNames();
......@@ -112,6 +115,9 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(
pickedFeature.color = Cesium.Color.LIME;
// Set feature infobox description
const featureName = pickedFeature.getProperty("name");
last_picked_3DTiles_id = pickedFeature.getProperty("gml_id");
last_picked_3DTiles_function = pickedFeature.getProperty("Function_DE");
selectedEntity.name = featureName;
attribute_text = ``
for (let index = 0; index < all_selected_property_names.length; index++) {
......@@ -129,8 +135,9 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(
</table>
`
$("#attribute-table-area").html(table_attribute_html)
$(".lorawan_on_click").removeAttr('disabled');
} else {
$(".lorawan_on_click").prop("disabled", true);
// This case, if users click on the PIPE station
......@@ -221,4 +228,72 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(
}
},
Cesium.ScreenSpaceEventType.LEFT_CLICK);
\ No newline at end of file
Cesium.ScreenSpaceEventType.LEFT_CLICK);
$(".lorawan_on_click").click(function () {
drawPolygon = true
$(".lorawan_on_click").prop("disabled", true);
if (drawPolygon) {
var distance = parseInt($("#distanceStepRange").val())
polygon_lorawan[last_picked_3DTiles_id] = viewer.entities.add({
position: earthPosition,
name: "Green circle at height with outline",
ellipse: {
semiMinorAxis: distance, // e.g. 250
semiMajorAxis: distance, // e.g. 250
clampToGround: true,
material: new Cesium.ColorMaterialProperty(
// Cesium.Color.RED.withAlpha(0.7)
Cesium.Color.fromCssColorString(`${$("#lorawanColor").val()}80`)
)
},
label : {
text : last_picked_3DTiles_id,
font : '14pt monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth : 2,
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
pixelOffset : new Cesium.Cartesian2(0, -9)
}
});
$("#lorawan_list").append(`
<div class="row my-2" id="${last_picked_3DTiles_id}">
<div class="col">
ID: <b>${last_picked_3DTiles_id}</b>
</div>
<div class="col">
Function: <b>${last_picked_3DTiles_function}</b>
</div>
<div class="col">
Coverage: <b>${distance}</b> m.
</div>
<div class="col">
<button type="button" class="btn icon btn-danger removeLorawn" id="rm_${last_picked_3DTiles_id}" style="margin-top: -10px;">
<i class="bi bi-trash-fill"></i>
</button>
</div>
<hr>
</div>
`)
$(".removeLorawn").click(function () {
var this_id = this.id
var tile_id = this_id.replace("rm_", "")
console.log(`removing ${tile_id}`)
viewer.entities.remove(polygon_lorawan[tile_id]);
$(`#${tile_id}`).remove();
});
}
})
// $("#distanceStepRange").change(function () {
// $("#distanceStep").html($(this).val())
// })
$('#distanceStepRange').on('input', function() {
$("#distanceStep").html($(this).val())
});
\ No newline at end of file
public/dashboard/lorawan.html 0 → 100644
View file @ 4316ca49
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IQG4iCity</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
<link rel="stylesheet" href="assets/css/shared/iconly.css">
<script src="https://cesium.com/downloads/cesiumjs/releases/1.91/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.91/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<link rel="stylesheet" href="../application/assets/css/cesiumCustom.css">
<script>
const _0x4cb6bc=_0x469a;function _0x469a(_0x4d46ea,_0x3ac3a7){const _0xe39474=_0xe394();return _0x469a=function(_0x469a21,_0x5b6097){_0x469a21=_0x469a21-0x87;let _0x44ce62=_0xe39474[_0x469a21];return _0x44ce62;},_0x469a(_0x4d46ea,_0x3ac3a7);}(function(_0x5ba0d9,_0x32afea){const _0x3ec856=_0x469a,_0xe1eb7f=_0x5ba0d9();while(!![]){try{const _0x4b97ac=parseInt(_0x3ec856(0x92))/0x1*(parseInt(_0x3ec856(0x98))/0x2)+-parseInt(_0x3ec856(0x95))/0x3+-parseInt(_0x3ec856(0x89))/0x4*(parseInt(_0x3ec856(0x97))/0x5)+-parseInt(_0x3ec856(0x8a))/0x6+parseInt(_0x3ec856(0x87))/0x7+parseInt(_0x3ec856(0x90))/0x8*(parseInt(_0x3ec856(0x96))/0x9)+parseInt(_0x3ec856(0x93))/0xa;if(_0x4b97ac===_0x32afea)break;else _0xe1eb7f['push'](_0xe1eb7f['shift']());}catch(_0x20eb65){_0xe1eb7f['push'](_0xe1eb7f['shift']());}}}(_0xe394,0xb8f2c));const queryString=window['location'][_0x4cb6bc(0x8e)],urlParams=new URLSearchParams(queryString),redirect_url='../access_denied.html';if(!urlParams[_0x4cb6bc(0x94)](_0x4cb6bc(0x8c)))console[_0x4cb6bc(0x91)](_0x4cb6bc(0x8d)),window[_0x4cb6bc(0x88)][_0x4cb6bc(0x8b)]=redirect_url;else{const user_access_token=urlParams['get']('access_token');user_access_token!=_0x4cb6bc(0x8f)?(window['location'][_0x4cb6bc(0x8b)]=redirect_url,console[_0x4cb6bc(0x91)]('>>\x20Wrong\x20access\x20token!!')):console[_0x4cb6bc(0x91)]('>>Correct\x20access\x20token:\x20log-in\x20complete....');}function _0xe394(){const _0x575e04=['has','129960SCxVzn','297iDTRAD','5886505Gdxqwc','364406bXUSHN','7657293kThJRB','location','4WCPYeF','5522778HQtkAY','href','access_token','>>\x20No\x20access_token\x20params\x20provided!!','search','oNENDusHUbsteyetreyhEsTieranCaNDORtMEotrOWEDahIcoNDEACUREdaHamOntAtEleimawBalaNsiShrOUChAriFarchrIC','144296OkIWao','log','1HoZYSx','10273090DbbIhc'];_0xe394=function(){return _0x575e04;};return _0xe394();}
</script>
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="../img/iCity.jpg" alt="Logo" srcset=""
style="height: 1.5em;"></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20"
height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round">
<path
d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2"
opacity=".3"></path>
<g transform="translate(-210 -1)">
<path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path>
<circle cx="220.5" cy="11.5" r="4"></circle>
<path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2">
</path>
</g>
</g>
</svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark">
<label class="form-check-label"></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20"
preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
<path fill="currentColor"
d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z">
</path>
</svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li class="sidebar-item active ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sidebar-item ">
<a href="sensors.html" class='sidebar-link'>
<i class="bi bi-router"></i>
<span>Utility Sensors</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<h3>iCity 2: IQG4iCity </h3>
<h5>(Buildings, Neighborhoods and Infrastructure) </h5>
</div>
<div class="page-content">
<section class="row">
<div class="col-12 col-lg-9">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4><i class="bi bi-globe2"></i> 3D Viewer</h4>
</div>
<div id="cesiumContainer" style="
height: 500px;
width: 100%;
margin: 0;
padding: 0;
"></div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-3">
<div class="card">
<div class="card-header">
<h4>3D Map Tool</h4>
</div>
<div class="card-content pb-4">
<div class="card-body">
<h6>Utility Network</h6>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="util_nw_line">
<label class="form-check-label" for="util_nw_line">
Utility Network Lines (SSH)
<div class="spinner-border spinner-border-sm" role="status"
id="util_nw_line_loading" style="display: none;">
<span class="visually-hidden">Loading...</span>
</div>
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="util_nw_point">
<label class="form-check-label" for="util_nw_point">
Utility Network Stations (SSH)
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="util_nw_Enisyst"
checked>
<label class="form-check-label" for="util_nw_Enisyst">
Utility Network Stations (Enisyst)
</label>
</div>
<hr>
<div style="display: none;">
<h6>Building Style</h6>
<select class="form-select" id="BuildingStyleSelector">
<option value="AllWhite" selected>Default</option>
<option value="transparent">Transparent</option>
<option value="PVPotential">PV Potential</option>
<option value="PVSpecificYield">PV Specific Yield</option>
</select>
</div>
<h6>Building Function</h6>
<select class="form-select" id="BuildingFunctionStyleSelector">
<option value="AllWhite" selected>Select One</option>
<option value='31001_1010'>Wohnhaus | Residential building</option>
<option value='31001_1020'>Wohnheim | Residential home</option>
<option value='31001_1022'>Seniorenheim | Retirement home</option>
<option value='31001_1121'>Wohn- und Verwaltungsgebäude | Residential and
administrative building</option>
<option value='31001_1122'>Wohn- und Bürogebäude | Residential and office
buildings</option>
<option value='31001_1123'>Wohn- und Geschäftsgebäude | Residential and
commercial buildings</option>
<option value='31001_1131'>Wohn- und Betriebsgebäude | Residential and farm
buildings</option>
<option value='31001_1222'>Wohn- und Wirtschaftsgebäude | Residential and farm
building</option>
<option value='31001_1312'>Wochenendhaus | Weekend house</option>
<option value='31001_1313'>Gartenhaus | Garden house</option>
<option value='31001_2020'>Bürogebäude | Office building</option>
<option value='31001_2050'>Geschäftsgebäude | Business building</option>
<option value='31001_2055'>Kiosk | Kiosk</option>
<option value='31001_2071'>Hotel, Motel, Pension | hotel, motel, boarding house
</option>
<option value='31001_2072'>Jugendherberge | Youth hostel</option>
<option value='31001_2074'>Campingplatzgebäude | Campsite building</option>
<option value='31001_2081'>Gaststätte, Restaurant | pub, restaurant</option>
<option value='31001_2090'>Freizeit- und Vergnügungsstätte | Recreation and
amusement center</option>
<option value='31001_2111'>Fabrik | Factory</option>
<option value='31001_2112'>Betriebsgebäude | Factory building</option>
<option value='31001_2120'>Werkstatt | Workshop</option>
<option value='31001_2130'>Tankstelle | Gas station</option>
<option value='31001_2140'>Gebäude für Vorratshaltung | building for storage
</option>
<option value='31001_2461'>Parkhaus | Parking garage</option>
<option value='31001_2463'>Garage | Garage</option>
<option value='31001_2501'>Gebäude zur Energieversorgung | Energy supply
building</option>
<option value='31001_2513'>Wasserbehälter | Water tank</option>
<option value='31001_2523'>Umformer | Converter</option>
<option value='31001_2611'>Gebäude der Kläranlage | Building for sewage
treatment plant</option>
<option value='31001_2612'>Toilette | Toilet</option>
<option value='31001_2721'>Scheune | Barn</option>
<option value='31001_2723'>Schuppen | Shed</option>
<option value='31001_2724'>Stall | Stable</option>
<option value='31001_2726'>Scheune und Stall | Barn and stable</option>
<option value='31001_2729'>Wirtschaftsgebäude | Farm building</option>
<option value='31001_2740'>Treibhaus, Gewächshaus | Greenhouse, greenhouse
</option>
<option value='31001_3010'>Verwaltungsgebäude | Administration building</option>
<option value='31001_3012'>Rathaus | City hall</option>
<option value='31001_3013'>Post | Post office</option>
<option value='31001_3015'>Gericht | Court</option>
<option value='31001_3021'>Allgemein bildende Schule | General education school
</option>
<option value='31001_3023'>Hochschulgebäude (Fachhochschule, Universität) |
University building (technical college, university)</option>
<option value='31001_3034'>Museum | Museum</option>
<option value='31001_3036'>Veranstaltungsgebäude | Event building</option>
<option value='31001_3041'>Kirche | Church</option>
<option value='31001_3043'>Kapelle | Chapel</option>
<option value='31001_3044'>Gemeindehaus | Community center</option>
<option value='31001_3051'>Krankenhaus | Hospital</option>
<option value='31001_3062'>Freizeit-, Vereinsheim, Dorfgemeinschafts-,
Bürgerhaus | recreation center, clubhouse, village hall, community center
</option>
<option value='31001_3065'>Kinderkrippe, Kindergarten, Kindertagesstätte | Day
nursery, kindergarten, day care center</option>
<option value='31001_3071'>Polizei | Police</option>
<option value='31001_3072'>Feuerwehr | Fire department</option>
<option value='31001_3075'>Justizvollzugsanstalt | Correctional facility
</option>
<option value='31001_3080'>Friedhofsgebäude | Cemetery building</option>
<option value='31001_3090'>Empfangsgebäude | Reception building</option>
<option value='31001_3210'>Gebäude für Sportzwecke | Building for sports
purposes</option>
<option value='31001_3211'>Sport-, Turnhalle | Sports hall, gymnasium</option>
<option value='31001_3220'>Badegebäude | Building for bathing</option>
<option value='31001_3221'>Hallenbad | Indoor swimming pool</option>
<option value='31001_3281'>Schutzhütte | Shelter</option>
<option value='51001_1002'>Kirchturm | Church tower</option>
<option value='51001_1008'>Sende-,Funkturm | broadcasting tower, radio tower
</option>
<option value='51003_1201'>Silo | Silo</option>
<option value='51003_1205'>Tank | Tank</option>
<option value='51007_1400'>Befestigung (Burgruine) | Fortification (castle
ruins)</option>
<option value='51007_1510'>Stadtmauer | City wall</option>
<option value='51009_1610'>Überdachung | Roofing</option>
</select>
<div class="form-check pt-2">
<input class="form-check-input" type="checkbox" value="" id="shadow_check">
<label class="form-check-label" for="shadow_check">
Building Shadow
</label>
</div>
<hr>
</div>
</div>
</div>
</div>
</section>
<section class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4><i class="bi bi-broadcast-pin"></i> Lorawan Simulation tool</h4>
</div>
<div class="card-body">
<div class="mb-3 row">
<div class="col-6">
<label for="customRange2" class="form-label">Coverage Distance:</label>
<span id="distanceStep">500</span>&nbsp;meters
<input type="range" class="form-range" min="10" max="1000" value="500" step="10" id="distanceStepRange">
</div>
<div class="col-3">
Select Color: <input type="color" class="form-control form-control-color"
id="lorawanColor" value="#563d7c" title="Choose your color">
</div>
<div class="col-3">
<button type="button" class="btn btn-primary lorawan_on_click mb-3" disabled>Add
Lorawan Here</button>
</div>
</div>
<div class="row" id="lorawan_list">
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-header">
<h4><i class="bi bi-graph-up"></i> Sensor</h4>
<p id="sensor-hint"> Click on the utility network station (Enisyst) on the 3D Map to see
sensor data.</p>
</div>
<div class="card-body">
<div id="attribute-table-area">
</div>
<div id="chart_area"></div>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2022 &copy; Joe T.S. HFT Stuttgart</p>
</div>
<!-- <div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div> -->
</div>
</footer>
</div>
</div>
<!-- Joe's Application -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="../application/js/drawchart.js"></script>
<script src="../application/js/utility_point_data.js"></script>
<script src="../application/js/staconnector.js"></script>
<script src="../application/js/cesium_00_Main.js"></script>
<script src="../application/js/pipelo_sta.js"></script>
<script src="../application/js/cesium_mouse_handling.js"></script>
<!-- theme template -->
<script src="assets/js/app.js"></script>
<!-- <script src="assets/js/pages/dashboard.js"></script> -->
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal