<!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">
</head>
<body>
<div id="region" style="display: none;">lu</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>
<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="PVPotential">PV Potential</option>
<option value="ElecDemand">Elec Demand</option>
<option value="SpecificHeatDemand">Specific Heat Demand</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 id="chart"></div>
<div class="ffpv-legend cesiumLegend" id="SpecificHeatDemand-legend" style="display:none">
</div>
<div class="ffpv-legend cesiumLegend" id="HeatDemand-legend" style="display: none">
<!-- <h6 class="card-title">Electricity supply from the grid</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="ffpv-legend cesiumLegend" id="PVPotential-legend" style="display: none">
<!-- <h6 class="card-title">Electricity supply from the grid</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="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>
<hr>
<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_lu">
<label class="form-check-label" for="ffpv_agr_lu_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: 6,503 GWh/yr </small> <br>
<small>Specific Yeild: 0.23 GWh/ha*yr </small>
</div>
</div>
</div>
<div class="form-check">
<input class="form-check-input ffpv_input" type="checkbox" value="" id="ffpv_gra_lu">
<label class="form-check-label" for="ffpv_gra_lu_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: 1,295 GWh/yr </small> <br>
<small>Specific Yeild: 0.67 GWh/ha*yr </small>
</div>
</div>
</div>
<div class="form-check">
<input class="form-check-input ffpv_input" type="checkbox" value="" id="ffpv_dis_lu">
<label class="form-check-label" for="ffpv_dis_lu_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: 187 GWh/yr </small> <br>
<small>Specific Yeild: 0.68 GWh/ha*yr </small>
</div>
</div>
</div>
<div class="form-check">
<input class="form-check-input ffpv_input" type="checkbox" value="" id="ffpv_con_lu">
<label class="form-check-label" for="ffpv_con_lu_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: 1,235 GWh/yr </small> <br>
<small>Specific Yeild: 0.68 GWh/ha*yr </small>
</div>
</div>
</div>
<hr>
<div id="BioenergyMenu"></div>
<hr>
<div id="footerArea"></div>
</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_lu-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>