Skip to content

GitLab

Commit 319c0a8b authored by JOE XMG's avatar JOE XMG
Browse files

update

parent c4fa2d62
Pipeline #6075 passed with stage
in 6 seconds
Hide whitespace changes
Inline Side-by-side
public/application/index.html
View file @ 319c0a8b
......@@ -28,52 +28,9 @@
<div class="row" style="overflow: hidden; margin: 0px">
<div class="col" id="cesiumContainer">
<div class="card-body cesiumLegend" id="HeatDemand-legend" style="display: none">
<!-- <h5 class="card-title">Electricity supply from the grid</h5> -->
<h6>Legend </h6>
<small>Heat Demand kW⋅h<sub>th</sub> </small> <br>
<span class="dot" style="background-color: #3f007d"></span> >= 24568<br>
<span class="dot" style="background-color: #54278f"></span> 22620 - 24568<br>
<span class="dot" style="background-color: #6a51a3"></span> 20673 - 22620<br>
<span class="dot" style="background-color: #807dba"></span> 18726 - 20673<br>
<span class="dot" style="background-color: #9e9ac8"></span> 16779 - 18726<br>
<span class="dot" style="background-color: #bcbddc"></span> 14832 - 16779<br>
<span class="dot" style="background-color: #dadaeb"></span> 12884 - 14832<br>
<span class="dot" style="background-color: #efedf5"></span> 10937 - 12884<br>
<span class="dot" style="background-color: #fcfbfd"></span> 0 - 10937<br>
<!-- <span class="dot" style="background-color: #e8f1f2"></span> No Data<br> -->
<br>
</div>
<div class="card-body cesiumLegend" id="PVPotential-legend" style="display: none">
<!-- <h5 class="card-title">Electricity supply from the grid</h5> -->
<h6>Legend </h6>
<small>PV Potential kW⋅h<sub>el</sub> </small> <br>
<span class="dot" style="background-color: #00441b"></span> >= 10615 <br>
<span class="dot" style="background-color: #006d2c"></span> 9615 - 10615 <br>
<span class="dot" style="background-color: #238b45"></span> 8615 - 9615 <br>
<span class="dot" style="background-color: #41ab5d"></span> 7615 - 8615 <br>
<span class="dot" style="background-color: #74c476"></span> 6615 - 7615 <br>
<span class="dot" style="background-color: #a1d99b"></span> 5615 - 6615 <br>
<span class="dot" style="background-color: #c7e9c0"></span> 4615 - 5615 <br>
<span class="dot" style="background-color: #e5f5e0"></span> 3615 - 4615<br>
<span class="dot" style="background-color: #f7fcf5"></span> 0 - 3615<br>
<!-- <span class="dot" style="background-color: #e8f1f2"></span> No Data<br> -->
<br>
</div>
<div class="card-body cesiumLegend" id="ElecDemand-legend" style="display: none">
<!-- <h5 class="card-title">Electricity supply from the grid</h5> -->
<h6>Legend </h6>
<small>Elec Demand kW⋅h<sub>el</sub></small> <br>
<span class="dot" style="background-color: #a63603"></span> >= 7229 <br>
<span class="dot" style="background-color: #e6550d"></span> 6229 - 7229 <br>
<span class="dot" style="background-color: #fd8d3c"></span> 5229 - 6229 <br>
<span class="dot" style="background-color: #fdae6b"></span> 4229 - 5229 <br>
<span class="dot" style="background-color: #fdd0a2"></span> 3229 - 4229 <br>
<span class="dot" style="background-color: #feedde "></span> 0 - 3229 <br>
<!-- <span class="dot" style="background-color: #e8f1f2"></span> No Data<br> -->
<br>
<div class="card-body cesiumLegend" id="PVSpecificYield-legend" style="display: none">
</div>
</div>
<div style="width: 30%; height: 100vh; overflow: scroll;">
......@@ -83,16 +40,14 @@
<hr>
<!-- <h5>Select Building Classification Style </h5>
<h5>Select Building Classification Style </h5>
<select class="form-select" id="BuildingStyleSelector">
<option value="HeatDemand">Heat Demand</option>
<option value="AllWhite" selected>Default</option>
<option value="PVPotential">PV Potential</option>
<option value="ElecDemand">Elec Demand</option>
<option value="AllWhite" selected>All Buildings (in White)</option>
<option value="SimulatedBuildings">Simulated Buildings (in White)</option>
<option value="PVSpecificYield">PV Specific Yield</option>
</select>
<div id="chart"></div> <hr> -->
<div id="chart"></div> <hr>
<h5>Building Shadow</h5>
......
public/application/js/cesium_00_Main.js
View file @ 319c0a8b
......@@ -6,6 +6,47 @@ $(document).ready(function () {
// $("#cesiumContainer").css("width", "auto");
// });
});
var PVPotential_legend_context = `
<small class="font-weight-bold">PV Potential MWh/year </small> <br>
<span class="dot" style="background-color: #8C2D04"></span> > 30 <br>
<span class="dot" style="background-color: #CC4C02"></span> 25 - 30 <br>
<span class="dot" style="background-color: #EC7014"></span> 20 - 25 <br>
<span class="dot" style="background-color: #FE9929"></span> 15 - 20 <br>
<span class="dot" style="background-color: #FEC44F"></span> 10 - 15 <br>
<span class="dot" style="background-color: #FEE391"></span> 5 - 10<br>
<span class="dot" style="background-color: #FFFFD4"></span> 0 - 5<br>
<br>
`
// var PVPotential_legend_context = `
// <small class="font-weight-bold">PV Potential MW⋅h<sub>el</sub> </small> <br>
// <span class="dot" style="background-color: #F22E22"></span> >= 8 <br>
// <span class="dot" style="background-color: #F56D1F"></span> 7 - 8 <br>
// <span class="dot" style="background-color: #F9A717"></span> 6 - 7 <br>
// <span class="dot" style="background-color: #FECE02"></span> 5 - 6 <br>
// <span class="dot" style="background-color: #F6EC00"></span> 4 - 5 <br>
// <span class="dot" style="background-color: #D1E023"></span> 3 - 4 <br>
// <span class="dot" style="background-color: #B2D531"></span> 2 - 3 <br>
// <span class="dot" style="background-color: #A4C711"></span> 1 - 2<br>
// <span class="dot" style="background-color: #61B949"></span> 0 - 1<br>
// <br>
// `
if ($("#PVPotential-legend").length > 0) {
$("#PVPotential-legend").html(PVPotential_legend_context) // Add Bioenergy menu if the "#id" exist
}
var PVSpecificYield_legend_context = `
<small class="font-weight-bold">PV Specific Yield (kWh/kWp.year) </small> <br>
<span class="dot" style="background-color: #8C2D04"></span> > 1100 <br>
<span class="dot" style="background-color: #CC4C02"></span> 1050 - 1100 <br>
<span class="dot" style="background-color: #EC7014"></span> 1000 - 1050 <br>
<span class="dot" style="background-color: #FE9929"></span> 950 - 1000 <br>
<span class="dot" style="background-color: #FEC44F"></span> 900 - 950 <br>
<span class="dot" style="background-color: #FEE391"></span> 850 - 900<br>
<span class="dot" style="background-color: #FFFFD4"></span> < 850 <br>
<br>
`
if ($("#PVSpecificYield-legend").length > 0) {
$("#PVSpecificYield-legend").html(PVSpecificYield_legend_context) // Add Bioenergy menu if the "#id" exist
}
// set the Cesium ION token
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkZTkyOTcyNC0yMGFkLTQ2ZjktODA5YS0xYjY1N2QwM2Y2ZmMiLCJpZCI6NDM2NDUsImlhdCI6MTYxMjkyNDgwNX0.12Xvbhtt_c2Y2RGA6J_J906Vdn1iOKZKPur0SASh-gk';
......@@ -69,37 +110,33 @@ var addBuilding = function () {
show: true,
color: "color('#ffffff')"
});
building_style["HeatDemand"] = new Cesium.Cesium3DTileStyle({
pointSize: '3.0',
building_style["PVPotential"] = new Cesium.Cesium3DTileStyle({
show: true,
color: {
"conditions" : [
// ["${Total_Yealy_Heat_DHW_Demand} == 0", "color('#fff')"],
["${Total_Yealy_Heat_DHW_Demand} === 0", "color('#ffffff',0)"],
["${Total_Yealy_Heat_DHW_Demand} < 10937", "color('#bcbddc')"],
["${Total_Yealy_Heat_DHW_Demand} < 12884", "color('#9e9ac8')"],
["${Total_Yealy_Heat_DHW_Demand} < 12884", "color('#807dba')"],
["${Total_Yealy_Heat_DHW_Demand} < 20673", "color('#6a51a3')"],
["${Total_Yealy_Heat_DHW_Demand} < 22620", "color('#6a51a3')"],
["${Total_Yealy_Heat_DHW_Demand} < 24568", "color('#54278f')"],
["true", "color('#3f007d', 0.5)"]
"conditions": [
['Number(${PV_potential_yield}) < 5', `color("#FFFFD4")`],
['Number(${PV_potential_yield}) < 10', `color("#FEE391")`],
['Number(${PV_potential_yield}) < 15', `color("#FEC44F")`],
['Number(${PV_potential_yield}) < 20', `color("#FE9929")`],
['Number(${PV_potential_yield}) < 25', `color("#EC7014")`],
['Number(${PV_potential_yield}) < 30', `color("#CC4C02")`],
['Number(${PV_potential_yield}) >= 30', `color("#8C2D04")`],
["true", "color('#ffffff')"] //no data
]
}
});
building_style["PVPotential"] = new Cesium.Cesium3DTileStyle({
pointSize: '3.0',
building_style["PVSpecificYield"] = new Cesium.Cesium3DTileStyle({
show: true,
color: {
"conditions" : [
["${PV_Potential_Yield} === 0", "color('#ffffff',0)"],
["${PV_Potential_Yield} < 5615", "color('#c7e9c0')"],
["${PV_Potential_Yield} < 6615", "color('#a1d99b')"],
["${PV_Potential_Yield} < 7615", "color('#74c476')"],
["${PV_Potential_Yield} < 8615", "color('#41ab5d')"],
["${PV_Potential_Yield} < 9615", "color('#238b45')"],
["${PV_Potential_Yield} < 10615", "color('#006d2c')"],
["true", "color('#00441b', 0.5)"]
"conditions": [
['Number(${PV_specific_yield}) < 850', `color("#FFFFD4")`],
['Number(${PV_specific_yield}) < 900', `color("#FEE391")`],
['Number(${PV_specific_yield}) < 950', `color("#FEC44F")`],
['Number(${PV_specific_yield}) < 1000', `color("#FE9929")`],
['Number(${PV_specific_yield}) < 1050', `color("#EC7014")`],
['Number(${PV_specific_yield}) < 1100', `color("#CC4C02")`],
['Number(${PV_specific_yield}) >= 1100 ', `color("#8C2D04")`],
["true", "color('#ffffff')"] //no data
]
}
});
......@@ -108,7 +145,7 @@ var addBuilding = function () {
show: true,
color: {
"conditions" : [
["${Electric_Demand} === 0", "color('#ffffff',0)"],
["${Electric_Demand} === 0", "color('#ffffff')"],
["${Electric_Demand} < 3229", "color('#feedde')"],
["${Electric_Demand} < 4229", "color('#fdd0a2')"],
["${Electric_Demand} < 5229", "color('#fdae6b')"],
......
public/index.html
View file @ 319c0a8b
......@@ -6,6 +6,8 @@
<title>IQG4iCity</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<div id="topbar" style="display: none;">
......@@ -20,11 +22,11 @@
</header>
<div class="px-4 pt-5 my-5 text-center border-bottom">
<h1 class="display-4 fw-bold">IQG4iCity</h1>
<h2 class="text-muted">Digitization of heating networks for AI-based operational optimization</h2>
<h2 class="text-muted">Digitization of Heating Networks for AI-based Operational Optimization</h2>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">
<br><br>
Digitization of heating networks for AI-based operational optimization - Digitalization can reduce increased heat losses in the networks (inefficient operation, too low spread between supply and return, high power consumption of network pumps).
Digitization of heating networks can reduce the increased heat losses in particularly networks causing by inefficient operation, low spread between supply and return, high power consumption of network pumps.
</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
<a href="application/index.html" type="button" class="btn btn-outline-secondary btn px-4">To the Application</a>
......@@ -32,7 +34,7 @@
</div>
<div class="overflow-hidden" style="max-height: 30vh;">
<div class="container px-5">
<img src="https://ugl.hft-stuttgart.de/imgs/thumbnails/ensysle.jpg" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy">
<img src="application/img/demo.jpg" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy">
</div>
</div>
</div>
......@@ -40,20 +42,19 @@
<h3>About Us</h3>
Climate change will continue to affect well-being and public health in cities through high pollution and noise emissions. Significant amounts of energy are wasted through building envelopes and heat networks. Facades also contribute to the uncontrolled distribution and absorption of noise emissions. In the context of further digitalization of urban life, new future information networks, and densification of urban areas, additional requirements for cities are emerging.
<a href="https://www.hft-stuttgart.com/research/projects/current/icity-2-iqg4icity-project">Read more ...</a>
<div class="text-center">
<img src='application/img/iCity_Banner_Logos.webp' alt='Innovative Hochschule' style='height:180px'/>
</div>
</div>
<footer class="footer mt-auto py-3">
<div class="container d-flex justify-content-between">
<img src='https://transfer.hft-stuttgart.de/img/footer/Innovative_Hochschule_Initiative_BMBF_GWK_RGB.png' alt='Innovative Hochschule' style='height:90px'/>
<div class="mb-3 text-secondary">
<p class="fs-sm mb-0"><span class="opacity-50 me-1">© All rights reserved. 2022 HFT Stuttgart <br>
Contact Person: </span><a href="https://www.hft-stuttgart.de/p/thunyathep-santhanavanich" target="_blank">Joe Thunyathep S.</a></p>
</div>
</div>
</footer>
<!-- KEINE ÄNDERUNGEN NACH DIESER ZEILE -->
<script src="settings.js"> </script>
</body>
</html>
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