Skip to content
GitLab
Commit 24243e5b authored by JOE XMG's avatar JOE XMG
Browse files

update change

parent 51ffc700
Pipeline #6781 passed with stage
in 7 seconds
Hide whitespace changes
Inline Side-by-side
public/application/index.html
View file @ 24243e5b
......@@ -39,7 +39,25 @@
<a href="../index.html">Back to main page</a>
<hr>
<h5>Utility Network</h5>
<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
<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 Point
</label>
</div>
<hr>
<h5>Building</h5>
<select class="form-select" id="BuildingStyleSelector">
......@@ -54,51 +72,43 @@
Building Shadow
</label>
</div>
<div id="chart"></div> <hr>
<h5>Utility Network</h5>
<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
<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 Point
</label>
<div id="chart_intro" style="display: none;">
<hr>
<h5>Sensor Data</h5>
<div id="attribute-table-area"></div>
</div>
<div id="chart_area"></div>
<hr>
<footer class="footer mt-auto py-3 bg-light">
<span>Found technical issue? Please contact <a
href="https://www.hft-stuttgart.de/p/thunyathep-santhanavanich"> Joe </a>
</span> <br>
<div class="row">
<div style="width: 70px;">
<img src="https://www.hft-stuttgart.com/typo3conf/ext/hft_sitepackage/Resources/Public/img/HFT_logo.svg"
alt="" width="50">
</div>
<div class="col">
<span class="text-muted">EnSyS-LE @HFT Stuttgart, 2020 - 2022.</span> <br>
<a href="https://www.hft-stuttgart.de/impressum" target="_blank">Impressum</a>
<a href="https://www.hft-stuttgart.de/datenschutz" target="_blank">Datenschutz</a>
</div>
</div>
</footer>
</div>
<footer class="footer mt-auto py-3 bg-light" style="position: fixed;
height: 100px;
bottom: 0;
width: 100%;">
<span>Found technical issue? Please contact <a
href="https://www.hft-stuttgart.de/p/thunyathep-santhanavanich"> Joe </a>
</span> <br>
<div class="row">
<div style="width: 70px;">
<img src="https://www.hft-stuttgart.com/typo3conf/ext/hft_sitepackage/Resources/Public/img/HFT_logo.svg"
alt="" width="50">
</div>
<div class="col">
<span class="text-muted">IQG4iCity @HFT Stuttgart, 2021 - 2022.</span> <br>
<a href="https://www.hft-stuttgart.de/impressum" target="_blank">Impressum</a>
<a href="https://www.hft-stuttgart.de/datenschutz" target="_blank">Datenschutz</a>
</div>
</div>
</footer>
</div>
</div>
</div>
</div>
......@@ -106,9 +116,13 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="./js/drawchart.js"></script>
<script src="./js/utility_point_data.js"></script>
<script src="./js/staconnector.js"></script>
<script src="./js/cesium_00_Main.js"></script>
<script src="./js/pipelo_sta.js"></script>
<script src="./js/cesium_mouse_handling.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="./js/apex_draw_cologne_chart.js"></script> -->
......
public/application/js/cesium_00_Main.js
View file @ 24243e5b
......@@ -413,4 +413,5 @@ $("#util_nw_point").change(function () {
utility_Point_Entities[i].label.show = false;
}
}
});
\ No newline at end of file
});
public/application/js/cesium_mouse_handling.js 0 → 100644
View file @ 24243e5b
const highlighted = {
feature: undefined,
originalColor: new Cesium.Color(),
};
// HTML overlay for showing feature name on mouseover
const nameOverlay = document.createElement("div");
viewer.container.appendChild(nameOverlay);
nameOverlay.className = "backdrop";
nameOverlay.style.display = "none";
nameOverlay.style.position = "absolute";
nameOverlay.style.bottom = "0";
nameOverlay.style.left = "0";
nameOverlay.style["pointer-events"] = "none";
nameOverlay.style.padding = "4px";
nameOverlay.style.backgroundColor = "#f0f6fb";
// nameOverlay.style.Color = "white!important";
// Information about the currently selected feature
const selected = {
feature: undefined,
originalColor: new Cesium.Color(),
};
// An entity object which will hold info about the currently selected feature for infobox display
const selectedEntity = new Cesium.Entity();
// Get default left click handler for when a feature is not picked on left click
const clickHandler = viewer.screenSpaceEventHandler.getInputAction(
Cesium.ScreenSpaceEventType.LEFT_CLICK
);
// Color a feature yellow on hover.
// viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(
// movement
// ) {
// // If a feature was previously highlighted, undo the highlight
// if (Cesium.defined(highlighted.feature)) {
// highlighted.feature.color = highlighted.originalColor;
// highlighted.feature = undefined;
// }
// // Pick a new feature
// const pickedFeature = viewer.scene.pick(movement.endPosition);
// if (!Cesium.defined(pickedFeature)) {
// nameOverlay.style.display = "none";
// return;
// }
// // A feature was picked, so show it's overlay content
// nameOverlay.style.display = "block";
// nameOverlay.style.bottom = `${viewer.canvas.clientHeight - movement.endPosition.y}px`;
// nameOverlay.style.left = `${movement.endPosition.x}px`;
// let building_gml_id = pickedFeature.getProperty("gml_id");
// let building_gml_parent_id = pickedFeature.getProperty("gml_parent_id");
// nameOverlay.innerHTML = `
// <b>3D Building Model</b> <br>
// GML ID: ${building_gml_id} <br>
// GML Parent ID: ${building_gml_parent_id}
// `;
// // Highlight the feature if it's not already selected.
// if (pickedFeature !== selected.feature) {
// highlighted.feature = pickedFeature;
// Cesium.Color.clone(
// pickedFeature.color,
// highlighted.originalColor
// );
// pickedFeature.color = Cesium.Color.YELLOW;
// }
// },
// Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// Color a feature on selection and show metadata in the InfoBox.
viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(
movement
) {
// If a feature was previously selected, undo the highlight
if (Cesium.defined(selected.feature)) {
selected.feature.color = selected.originalColor;
selected.feature = undefined;
$("#attribute-table-area").html("") // refresh the attribute table area
$("#chart_intro").hide() // hide chart title
}
// Pick a new feature
const pickedFeature = viewer.scene.pick(movement.position);
if (!Cesium.defined(pickedFeature)) {
clickHandler(movement);
return;
}
// Select the feature if it's not already selected
if (selected.feature === pickedFeature) {
return;
}
selected.feature = pickedFeature;
last_picked_3DTiles = pickedFeature;
//check if it is [3D Tile building] else [Pipe].
if (!pickedFeature.id) {
var all_selected_property_names = last_picked_3DTiles.getPropertyNames();
// Save the selected feature's original color
if (pickedFeature === highlighted.feature) {
Cesium.Color.clone(
highlighted.originalColor,
selected.originalColor
);
highlighted.feature = undefined;
} else {
Cesium.Color.clone(pickedFeature.color, selected.originalColor);
}
// Highlight newly selected feature
pickedFeature.color = Cesium.Color.LIME;
// Set feature infobox description
const featureName = pickedFeature.getProperty("name");
selectedEntity.name = featureName;
attribute_text = ``
for (let index = 0; index < all_selected_property_names.length; index++) {
const property_name = all_selected_property_names[index];
if (pickedFeature.getProperty(property_name) !== null) {
attribute_text += `<tr><th>${property_name}</th><td>${pickedFeature.getProperty(property_name)}</td></tr>`
}
}
table_attribute_html = `
<h5>Attribute Table</h5>
<table class="table">
<tbody>
${attribute_text}
</tbody>
</table>
`
$("#attribute-table-area").html(table_attribute_html)
} else {
// This case, if users click on the PIPE station
// console.log("This is PIPE")
// This case is true when the click feature is PIPE!
var pipe_id = pickedFeature.id.name
var current_pipe_STA_URL = `http://193.196.138.56/iqg4icity_sensor/v1.1/MultiDatastreams(${pipe_sta_map[pipe_id]})/Observations?$orderby=phenomenonTime%20desc`
$("#attribute-table-area").html(`
<b>PIPE</b>: ${pipe_id} <br>
<b>STA Multistream ID</b>: ${pipe_sta_map[pipe_id]} <br>
<b>STA URL</b>: ${current_pipe_STA_URL}
`)
get_STA_Observation_Value(current_pipe_STA_URL, function (sta_result) {
if (sta_result) {
console.log("STA result return successfully...")
console.log("Drawing Chart...")
var sta_result_time_iso = []
var sta_result_observation_total_energy = []
var sta_result_observation_power = []
var sta_result_observation_vorlauf = []
var sta_result_observation_ruecklauf = []
for (let index = 0; index < sta_result.length; index++) {
// example
// [
// {
// "@iot.id": 451441,
// "phenomenonTime": "2022-07-21T14:30:00.000Z",
// "result": [
// 129347, Total energy kWh
// 4.6, Power kW
// 73.3, Vorlauf - degree Celsius
// 68.4 Ruecklauf - degree Celsius
// ],
// "resultTime": null,
// "@iot.selfLink": "http://193.196.138.56/iqg4icity_sensor/v1.1/Observations(451441)",
// "FeatureOfInterest@iot.navigationLink": "http://193.196.138.56/iqg4icity_sensor/v1.1/Observations(451441)/FeatureOfInterest",
// "MultiDatastream@iot.navigationLink": "http://193.196.138.56/iqg4icity_sensor/v1.1/Observations(451441)/MultiDatastream",
// "Datastream@iot.navigationLink": "http://193.196.138.56/iqg4icity_sensor/v1.1/Observations(451441)/Datastream"
// },
// ...
// ]
try {
const sta_result_value = sta_result[sta_result.length - index];
if (sta_result_value) {
// only continue if the *sta_result_value* is defined.
sta_result_time_iso.push(sta_result_value["phenomenonTime"])
sta_result_observation_total_energy.push(sta_result_value["result"][0])
sta_result_observation_power.push(sta_result_value["result"][1])
sta_result_observation_vorlauf.push(sta_result_value["result"][2])
sta_result_observation_ruecklauf.push(sta_result_value["result"][3])
// cleaning data to draw chart...
if (index == sta_result.length - 1) {
// last loop
inputx = sta_result_time_iso
inputy_vor_vs_rueck = [{
name: "Vorlauf [degree Celsius]",
data: sta_result_observation_vorlauf
},
{
name: "Ruecklauf [degree Celsius]",
data: sta_result_observation_ruecklauf
}
]
$("#chart_intro").show()
drawChart(inputx, inputy_vor_vs_rueck, "line", "#chart_area")
}
}
} catch (error) {
console.log(`this loop has STA result: ${sta_result[sta_result.length - index]}`)
console.error(error)
}
}
} else {
console.log("No STA result...")
}
});
}
},
Cesium.ScreenSpaceEventType.LEFT_CLICK);
\ No newline at end of file
public/application/js/drawchart.js 0 → 100644
View file @ 24243e5b
// chart_type = line, bar
var drawChart = function (data_inputx, data_inputy, chart_type, chart_id) {
if (typeof chart == "object") {
chart.destroy();
}
var xaxis_type = 'datetime'
var x_tooltip_format = 'dd MMM yy HH:mm'
var options = {
series: data_inputy,
chart: {
type: chart_type,
height: 350,
// foreColor: '#ccc',
foreColor: '#000',
},
// theme: {
// mode: 'dark',
// },
background: '#141619',
dataLabels: {
enabled: false,
},
stroke: {
// curve: 'smooth',
width: 1.5
},
responsive: [{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
// offsetX: -10,
offsetY: 0
}
}
}],
tooltip: {
theme: 'dark',
// format: 'dd.MM.yy HH:mm',
// datetimeFormatter: {
// year: 'yyyy',
// month: 'MMM yy',
// day: 'dd.MM.yy',
// hour: 'HH:mm dd.MM'
// }
x: {
show: true,
format: x_tooltip_format,
// formatter: undefined,
},
},
// grid: {
// borderColor: "#535A6C",
// xaxis: {
// lines: {
// show: true
// }
// }
// },
xaxis: {
categories: data_inputx,
labels: {
// style: {
// fontSize: '15px',
// fontWeight: 800,
// },
datetimeFormatter: {
year: 'yyyy',
month: 'MM.yy',
day: "dd.MM.yy",
hour: 'dd.MM.yy HH:mm'
}
},
type: xaxis_type,
}
};
chart = new ApexCharts(document.querySelector(chart_id), options);
chart.render();
}
\ No newline at end of file
public/application/js/pipelo_sta.js 0 → 100644
View file @ 24243e5b
var pipe_lo = [
{
"devEUI": "94193A01010005C5",
"address": "Zollhüttengasse 9",
"lat": "49.109733",
"long": "9.733305"
},
{
"devEUI": "94193A01010005C6",
"address": "Lange Str. 8",
"lat": "49.11223828741425",
"long": "9.732123180270873"
},
{
"devEUI": "94193A01010005C7",
"address": "Glockengasse 3",
"lat": "49.111454",
"long": "9.733045"
},
{
"devEUI": "94193A01010005C8",
"address": "Weilertor 14",
"lat": "49.11464640910398",
"long": "9.732766015328936"
},
{
"devEUI": "94193A01010005C9",
"address": "Bahnhofstr. 6 (1)",
"lat": "49.110157",
"long": "9.734005"
},
{
"devEUI": "94193A01010005CE",
"address": "Im Weiler 1",
"lat": "49.113261",
"long": "9.732631"
},
{
"devEUI": "94193A01010005CF",
"address": "Lange Str. 46",
"lat": "49.110256",
"long": "9.732367"
},
{
"devEUI": "94193A01010005D0",
"address": "Lange Str. 53",
"lat": "49.109968",
"long": "9.732556"
},
{
"devEUI": "94193A01010005D1",
"address": "Bahnhofstr. 18",
"lat": "49.109125",
"long": "9.733989"
},
{
"devEUI": "94193A01010005D2",
"address": "Lange Str. 33/1",
"lat": "49.110770825444256",
"long": "9.732588104997308"
},
{
"devEUI": "94193A01010005D3",
"address": "Lange Str. 55",
"lat": "49.1097670588301",
"long": "9.7326409543048"
},
{
"devEUI": "94193A01010005D4",
"address": "",
"lat": "49.11063843049948",
"long": "9.735850095748901"
},
{
"devEUI": "94193A01010005D5",
"address": "Bahnhofstr. 25",
"lat": "49.109054",
"long": "9.735130"
},
{
"devEUI": "94193A01010005D6",
"address": "Bahnhofstr. 17",
"lat": "49.109744",
"long": "9.734629"
},
{
"devEUI": "94193A01010005D8",
"address": "Heimbacher Gasse 2",
"lat": "49.113037",
"long": "9.732630"
},
{
"devEUI": "94193A01010005D9",
"address": "Im Lindach 9",
"lat": "49.108809",
"long": "9.735979"
},
{
"devEUI": "94193A01010005DB",
"address": "Im Lindach 1",
"lat": "49.110038",
"long": "9.734933"
},
{
"devEUI": "94193A01010005DD",
"address": "Heimbacher Gasse 6",
"lat": "49.112780",
"long": "9.732079"
},
{
"devEUI": "94193A01010006C0",
"address": "Bahnhofstr. 21",
"lat": "49.109279",
"long": "9.734970"
},
{
"devEUI": "94193A01010006C4",
"address": "Lange Str. 29 (1)",
"lat": "49.111098",
"long": "9.732556"
},
{
"devEUI": "94193A010100073A",
"address": "Hirschgraben 11-13",
"lat": "49.111321",
"long": "9.731331"
},
{
"devEUI": "94193A010100073D",
"address": "Lange Str. 29 (2)",
"lat": "49.111098",
"long": "9.732653"
},
{
"devEUI": "94193A0101000745",
"address": " Netzstation Weilerwiese Schiene 2",
"lat": "49.11638970127192",
"long": "9.733147184723265"
},
{
"devEUI": "94193A0101000746",
"address": "Bahnhofstr. 15",
"lat": "49.110003",
"long": "9.734461"
},
{
"devEUI": "94193A0101000747",
"address": "Lange Str. 38 (Kirche)",
"lat": "49.11087122198257",
"long": "9.731906956093749"
},
{
"devEUI": "94193A010100074A",
"address": "Bahnhofstr. 19",
"lat": "49.109518",
"long": "9.734868"
},
{
"devEUI": "94193A010100074B",
"address": "Lange Str. 48",
"lat": "49.110136",
"long": "9.732347"
},
{