<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<title>EnSysLE Dashboard</title>
<link rel="shortcut icon" href="favicon.ico" />
<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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="../build/pack.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
<script type="text/javascript">
window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.heapanalytics.com/js/heap-"+e+".js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a);for(var n=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],o=0;o<p.length;o++)heap[p[o]]=n(p[o])};
heap.load("54377843");
</script>
</head>
<body>
<div id="region" style="display: none;">dm</div>
<!-- Image and text -->
<div>
<!-- <nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<h2>EnSys-LE Dashboard</h2>
<small>Visualizing the Energy System Transformation</small>
</a>
</nav> -->
<div class="row" style="overflow: hidden; margin: 0px">
<div class="col" id="cesiumContainer">
<!-- <div class="card-body cesiumLegend" id="ffpv_dis_legend" style="display: none">
<h6>Legend </h6>
<small>Yearly potential yield of ground-mounted PV Plants (GWh/yr)</small> <br>
<span class="dot" style="background-color: #EDF8FB"></span> 0 - 3 <br>
<span class="dot" style="background-color: #B2E2E2"></span> 3 - 8 <br>
<span class="dot" style="background-color: #66C2A4"></span> 8 - 16 <br>
<span class="dot" style="background-color: #2CA25F"></span> 16 - 32 <br>
<span class="dot" style="background-color: #006D2C"></span> >32 <br>
<br>
</div> -->
<!-- <div class="card-body cesiumLegend" id="ffpv_con_legend" style="display: none">
<h6>Legend </h6>
<small>Yearly potential yield of ground-mounted PV Plants (GWh/yr)</small> <br>
<span class="dot" style="background-color: #F0F9E8"></span> 0 - 2.5 <br>
<span class="dot" style="background-color: #BAE4BC"></span> 2.5 - 7.5 <br>
<span class="dot" style="background-color: #7BCCC4"></span> 7.5 - 25 <br>
<span class="dot" style="background-color: #43A2CA"></span> 25 - 85 <br>
<span class="dot" style="background-color: #0868AC"></span> >85 <br>
<br>
</div> -->
<!-- <div class="card-body cesiumLegend" id="ffpv_agr_legend" style="display: none">
<h6>Legend </h6>
<small>Yearly potential yield of ground-mounted PV Plants (GWh/yr)</small> <br>
<span class="dot" style="background-color: #FFFFB2"></span> 0 - 1 <br>
<span class="dot" style="background-color: #FECC5C"></span> 1 - 2 <br>
<span class="dot" style="background-color: #FD8D3C"></span> 2 - 3.5 <br>
<span class="dot" style="background-color: #F03B20"></span> 3.5 - 6<br>
<span class="dot" style="background-color: #BD0026"></span> >6<br>
<br>
</div> -->
</div>
<div class="menuContainer">
<div style="margin-top: 10px; padding: 20px; ">
<span id="dashboard-intro-content"></span>
<hr>
<div id="select-land-area"></div>
<hr>
<h6><i class="bi bi-house"></i> Building Energy Simulation </h6>
<select class="form-select" id="BuildingStyleSelector">
<option value="AllWhite" selected>--Select--</option>
<option value="HeatDemand">Heat Demand</option>
<option value="SpecificHeatDemand">Specific Heat Demand</option>
<option value="PVPotential">PV Potential</option>
<option value="ElecDemand">Elec Demand</option>
<!-- <option value="SimulatedBuildings">Simulated Buildings (in White)</option> -->
</select>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="shadow_check">
<label class="form-check-label" for="shadow_check">
Building shadow
</label>
</div>
<div class="ffpv-legend cesiumLegend" id="SpecificHeatDemand-legend" style="display:none">
</div>
<div class="ffpv-legend cesiumLegend" id="HeatDemand-legend" style="display: none">
</div>
<div class="ffpv-legend cesiumLegend" id="PVPotential-legend" style="display: none">
</div>
<div class="ffpv-legend cesiumLegend" id="ElecDemand-legend" style="display: none">
<!-- <h6 class="card-title">Electricity supply from the grid</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>
<div id="chart"></div>
<hr>
<!-- add the feature to activate maptile here -->
<h6><i class="bi bi-sun"></i> Ground-mounted PV Plants Simulation</h6>
<div class="form-check">
<input class="form-check-input ffpv_input" type="checkbox" value="" id="ffpv_agr_dm">
<label class="form-check-label" for="ffpv_agr_dm_check">
Agri-Photovoltaic Scenario
</label>
<div id="ffpv_agr_legend" style="display: none">
<div class="ffpv-legend">
<small class="ffpv-description">This concept scenario is to realize food and electricity
production simultaneously on
the same land, using various panel-mounting designs. A ground cover ratio is around
one
third compared to conventional ground-mounted PV.</small>
<hr>
<small>Yearly potential yield (GWh/yr)</small> <br>
<span class="dot" style="background-color: #FFFFB2"></span> 0 - 1 <br>
<span class="dot" style="background-color: #FECC5C"></span> 1 - 2 <br>
<span class="dot" style="background-color: #FD8D3C"></span> 2 - 3.5 <br>
<span class="dot" style="background-color: #F03B20"></span> 3.5 - 6<br>
<span class="dot" style="background-color: #BD0026"></span> >6<br>
<small>Total Yeild: 16114 GWh/yr </small> <br>
<small>Specific Yeild: 0.22 GWh/ha*yr </small>
</div>
</div>
</div>
<div class="form-check">
<input class="form-check-input ffpv_input" type="checkbox" value="" id="ffpv_gra_dm">
<label class="form-check-label" for="ffpv_gra_dm_check">
Grassland Area Scenario
</label>
<div id="ffpv_gra_legend" style="display:none">
<div class="ffpv-legend">
<small class="ffpv-description">This scenario simulates PV potential on all
grasslands.</small>
<hr>
<small>Yearly potential yield (GWh/yr)</small> <br>
<span class="dot" style="background-color: #FEEBE2"></span> 0 - 2.5 <br>
<span class="dot" style="background-color: #FBB4B9"></span> 2.5 - 7.5 <br>
<span class="dot" style="background-color: #F768A1"></span> 7.5 - 25 <br>
<span class="dot" style="background-color: #C51B8A"></span> 25 - 85 <br>
<span class="dot" style="background-color: #7A0177"></span> >85 <br>
<small>Total Yeild: 19,465 GWh/yr </small> <br>
<small>Specific Yeild: 0.62 GWh/ha*yr </small>
</div>
</div>
</div>
<div class="form-check">
<input class="form-check-input ffpv_input" type="checkbox" value="" id="ffpv_dis_dm">
<label class="form-check-label" for="ffpv_dis_dm_check">
Less-favoured Scenario
</label>
<div id="ffpv_dis_legend" style="display: none">
<div class="ffpv-legend">
<small class="ffpv-description">The Grassland & arable land defined as agriculturally
less productive.</small>
<hr>
<small>Yearly potential yield (GWh/yr)</small> <br>
<span class="dot" style="background-color: #EDF8FB"></span> 0 - 3 <br>
<span class="dot" style="background-color: #B2E2E2"></span> 3 - 8 <br>
<span class="dot" style="background-color: #66C2A4"></span> 8 - 16 <br>
<span class="dot" style="background-color: #2CA25F"></span> 16 - 32 <br>
<span class="dot" style="background-color: #006D2C"></span> >32 <br>
<small>Total Yeild: 24855 GWh/yr </small> <br>
<small>Specific Yeild: 0.61 GWh/ha*yr </small>
</div>
</div>
</div>
<div class="form-check">
<input class="form-check-input ffpv_input" type="checkbox" value="" id="ffpv_con_dm">
<label class="form-check-label" for="ffpv_con_dm_check">
Conversion Scenario
</label>
<div id="ffpv_con_legend" style="display: none">
<div class="ffpv-legend">
<small class="ffpv-description">The conversion areas defined by EEG and 200m-corridors
along
highways & railways</small>
<hr>
<small>Yearly potential yield (GWh/yr)</small> <br>
<span class="dot" style="background-color: #F0F9E8"></span> 0 - 2.5 <br>
<span class="dot" style="background-color: #BAE4BC"></span> 2.5 - 7.5 <br>
<span class="dot" style="background-color: #7BCCC4"></span> 7.5 - 25 <br>
<span class="dot" style="background-color: #43A2CA"></span> 25 - 85 <br>
<span class="dot" style="background-color: #0868AC"></span> >85 <br>
<small>Total Yeild: 1521 GWh/yr </small> <br>
<small>Specific Yeild: 0.61 GWh/ha*yr </small>
</div>
</div>
</div>
<hr>
<div id="BioenergyMenu"></div>
<hr>
<div id="footerArea"></div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="../build/jquery.min.js"></script>
<script src="../build/pack-min.js"></script>
<script src="../build/pack_dm-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>