From 8b532b4080a05a4be929782b63c508aae1c4b2ec Mon Sep 17 00:00:00 2001
From: BujarMuharemi <bujar.muharemi.28@gmail.com>
Date: Thu, 13 Jan 2022 13:54:56 +0100
Subject: [PATCH] fixed pvPotential radio btn controller; works now
---
public/js/colorPalettes.js | 2 +-
public/js/globe.js | 10 +-
public/js/pvPotentialNormalization.js | 1 +
public/main.html | 740 +++++++++++++-------------
4 files changed, 375 insertions(+), 378 deletions(-)
diff --git a/public/js/colorPalettes.js b/public/js/colorPalettes.js
index 712af39..10ddff4 100644
--- a/public/js/colorPalettes.js
+++ b/public/js/colorPalettes.js
@@ -1,7 +1,7 @@
//Shadow palette for coloring the roofs
// color pallet from https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3
-var pvPotentialPallet = ['#fff7fb', '#ece7f2', '#d0d1e6', '#a6bddb', '#74a9cf', '#3690c0', '#0570b0', '#034e7b']
+var pvPotentialPallet = ['#d0d1e6', '#a6bddb', '#74a9cf', '#3690c0', '#0570b0', '#034e7b']
pvPotentialPallet = pvPotentialPallet.reverse();
//color pallet white->black
diff --git a/public/js/globe.js b/public/js/globe.js
index 8b0740e..3ee0bd6 100644
--- a/public/js/globe.js
+++ b/public/js/globe.js
@@ -20,6 +20,7 @@ var roofViewActivated = false;
var chosenAttributeRadioBtnFlag = "shadowValue";
+
function chosenAttributeHandler(radioBtnValue) {
chosenAttributeRadioBtnFlag = radioBtnValue.value;
}
@@ -319,6 +320,7 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
//Surface View @onLeftClick
if (document.getElementById("surface").checked) {
resetRoofColors();
+ setMinAndMax(chosenAttributeRadioBtnFlag);
//save the selected feature's original color
if (pickedhigh) {
highlightedFeatures.forEach(h => {
@@ -334,7 +336,7 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
//used for debugging, when clicking on a surface
//console.log(t.getProperty("description") + "\n" + t.getProperty("feature_type") + "\n" + t.getProperty("gml_id") + "\n" + t.getProperty("gml_parent_id"));
- t.color = Cesium.Color.LIME;
+ //t.color = Cesium.Color.LIME;
//color surfaces depending on their shadow value
for (const [key, value] of Object.entries(shadowdata)) { //looping threw the shadowdata array
@@ -353,15 +355,15 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
console.log(pvPotentialSurfaces);
//coloring surfaces on pv potential
- setMinAndMax(chosenAttributeRadioBtnFlag);
+
console.log("minie maus", minAndMaxPvPotentials);
for (const [key, value] of Object.entries(pvPotentialSurfaces)) {
if (value["id"] === t.getProperty("gml_id")) { //checking if the ids of the current surface match the id in the shadowdata array
//console.log("hour:",chosenDate.hour);
var normalizedPvValue;
chosenPvPotentialValue = value["attributes"]["pvPotential"][chosenAttributeRadioBtnFlag];
- //console.log("normalisierter",chosenPvPotentialValue);
- console.log("klick");
+ console.log("chosenPvPotentialValue",chosenPvPotentialValue);
+
normalizedPvValue = getNormalizedValue(chosenPvPotentialValue);
console.log("normalisierter", normalizedPvValue);
t.color = Cesium.Color.fromCssColorString(getColorFromPalette(normalizedPvValue, "pvPotential")); //coloring the surface
diff --git a/public/js/pvPotentialNormalization.js b/public/js/pvPotentialNormalization.js
index 80d462f..e1442ba 100644
--- a/public/js/pvPotentialNormalization.js
+++ b/public/js/pvPotentialNormalization.js
@@ -18,6 +18,7 @@ function setMinAndMax(pvPotentialValue) {
minAndMaxPvPotentials=[];
minAndMaxPvPotentials.push(pvPotentials[0]);
minAndMaxPvPotentials.push(pvPotentials[pvPotentials.length - 1]);
+ console.log("setMinAndMax calculated");
}
function getNormalizedValue(selectedPvPotentialValue) {
diff --git a/public/main.html b/public/main.html
index 2755f62..5b8e717 100644
--- a/public/main.html
+++ b/public/main.html
@@ -3,407 +3,401 @@
<html lang="en">
<head>
- <!-- Use correct character set. -->
- <meta charset="utf-8" />
- <!-- Tell IE to use the latest, best version. -->
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
- <meta name="viewport"
- content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
- <!-- Website Title -->
- <title>Team3dViewer!</title>
- <!-- import bootstrap -->
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
- integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+ <!-- Use correct character set. -->
+ <meta charset="utf-8" />
+ <!-- Tell IE to use the latest, best version. -->
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+ <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
+ <!-- Website Title -->
+ <title>Team3dViewer!</title>
+ <!-- import bootstrap -->
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
- <link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/css/flag-icon.min.css" rel="stylesheet">
- <!-- import font-awesome -->
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- <!-- import chart.js -->
- <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
- <!-- import Cesium.js -->
- <!-- <script src="Build/Cesium/Cesium.js"></script> -->
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/css/flag-icon.min.css" rel="stylesheet">
+ <!-- import font-awesome -->
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+ <!-- import chart.js -->
+ <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
+ <!-- import Cesium.js -->
+ <!-- <script src="Build/Cesium/Cesium.js"></script> -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.85/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.85/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
- <style>
- @import url(css/myChart.css);
+ <style>
+ @import url(css/myChart.css);
- body {
- padding: 0;
- margin: 0;
- overflow: hidden;
- }
- </style>
- <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js" integrity="sha512-AA1Bzp5Q0K1KanKKmvN/4d3IRKVlv9PYgwFPvm32nPO6QS8yH1HO7LbgB1pgiOxPtfeg5zEn2ba64MUcqJx6CA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
- <!-- TODO: maybe add this to a external js file -->
- <script type="text/javascript">
- var arrLang = {
- 'en': {
- 'chooseaarea': 'Choose an area:',
- 'buildingview': 'Building-View',
- 'surfaceview': 'Surface-view',
- 'chart': 'Chart',
- 'bar': 'Bar',
- 'line': 'Line',
- 'pie': 'Pie',
- 'doughnut': 'Doughnut',
- 'erase': 'Erase',
- 'confirm': 'Confirm',
- 'reset': 'Reset',
- 'heatingdemand': 'Heating demand',
- 'drawbox': 'Draw box',
- 'surface': 'Surface',
- 'volume': 'Volume',
- 'height': 'Height',
- 'yearofconstruction': 'Year of Construction',
- 'heatedvolume': 'Heated Volume',
- 'buildingfunction': 'Building Function',
- 'yearlyheatingdemand': 'Yearly Heating Demand',
- 'yearlycoolingdemand': 'Yearly Cooling Demand',
- 'attributes': 'Attributes',
- 'heatinglegend': 'Heating Demand [kWh/yr]',
- 'monthlyheating': 'Monthly Heating',
- 'monthlycooling': 'Monthly Cooling',
- 'userguide': 'User Guide',
- 'monthlyheatingperm2': 'Monthly Heating per m2',
- 'monthlycoolingperm2': 'Monthly Cooling per m2',
- 'monthlyheatingperm3': 'Monthly Heating per m3',
- 'monthlycoolingperm3': 'Monthly Cooling per m3',
- },
- 'de': {
- 'chooseaarea': 'Wähle ein Gebiet:',
- 'buildingview': 'Gebäudeansicht',
- 'surfaceview': 'Oberflächenansicht',
- 'chart': 'Diagramm',
- 'bar': 'Balken',
- 'line': 'Linien',
- 'pie': 'Kreis',
- 'doughnut': 'Donut',
- 'erase': 'Löschen',
- 'confirm': 'Bestätigen',
- 'reset': 'Zurücksetzen',
- 'heatingdemand': 'Heizbedarf',
- 'drawbox': 'Box zeichnen',
- 'surface': 'Oberfläche',
- 'volume': 'Volumen',
- 'height': 'Höhe',
- 'yearofconstruction': 'Baujahr',
- 'heatedvolume': 'Beheiztes Volumen',
- 'buildingfunction': 'Gebäudefunktion',
- 'yearlyheatingdemand': 'Jährlicher Heizbedarf',
- 'yearlycoolingdemand': 'Jährlicher Kühlbedarf',
- 'attributes': 'Attribute',
- 'heatinglegend': 'Heizbedarf [kWh/yr]',
- 'monthlyheating': 'monatlicher Heizungsbedarf',
- 'monthlycooling': 'monatliche Kühlung',
- 'userguide': 'Benutzerhandbuch',
- 'monthlyheatingperm2': 'monatlicher Heizungsbedarf pro m2',
- 'monthlycoolingperm2': 'monatliche Kühlung pro m2',
- 'monthlyheatingperm3': 'monatlicher Heizungsbedarf pro m3',
- 'monthlycoolingperm3': 'monatliche Kühlung pro m3',
- }
- };
+ body {
+ padding: 0;
+ margin: 0;
+ overflow: hidden;
+ }
- // Process translation
- $(function () {
- $('.translate').click(function () {
- var lang = $(this).attr('id');
+ </style>
+ <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js" integrity="sha512-AA1Bzp5Q0K1KanKKmvN/4d3IRKVlv9PYgwFPvm32nPO6QS8yH1HO7LbgB1pgiOxPtfeg5zEn2ba64MUcqJx6CA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+ <!-- TODO: maybe add this to a external js file -->
+ <script type="text/javascript">
+ var arrLang = {
+ 'en': {
+ 'chooseaarea': 'Choose an area:',
+ 'buildingview': 'Building-View',
+ 'surfaceview': 'Surface-view',
+ 'chart': 'Chart',
+ 'bar': 'Bar',
+ 'line': 'Line',
+ 'pie': 'Pie',
+ 'doughnut': 'Doughnut',
+ 'erase': 'Erase',
+ 'confirm': 'Confirm',
+ 'reset': 'Reset',
+ 'heatingdemand': 'Heating demand',
+ 'drawbox': 'Draw box',
+ 'surface': 'Surface',
+ 'volume': 'Volume',
+ 'height': 'Height',
+ 'yearofconstruction': 'Year of Construction',
+ 'heatedvolume': 'Heated Volume',
+ 'buildingfunction': 'Building Function',
+ 'yearlyheatingdemand': 'Yearly Heating Demand',
+ 'yearlycoolingdemand': 'Yearly Cooling Demand',
+ 'attributes': 'Attributes',
+ 'heatinglegend': 'Heating Demand [kWh/yr]',
+ 'monthlyheating': 'Monthly Heating',
+ 'monthlycooling': 'Monthly Cooling',
+ 'userguide': 'User Guide',
+ 'monthlyheatingperm2': 'Monthly Heating per m2',
+ 'monthlycoolingperm2': 'Monthly Cooling per m2',
+ 'monthlyheatingperm3': 'Monthly Heating per m3',
+ 'monthlycoolingperm3': 'Monthly Cooling per m3',
+ },
+ 'de': {
+ 'chooseaarea': 'Wähle ein Gebiet:',
+ 'buildingview': 'Gebäudeansicht',
+ 'surfaceview': 'Oberflächenansicht',
+ 'chart': 'Diagramm',
+ 'bar': 'Balken',
+ 'line': 'Linien',
+ 'pie': 'Kreis',
+ 'doughnut': 'Donut',
+ 'erase': 'Löschen',
+ 'confirm': 'Bestätigen',
+ 'reset': 'Zurücksetzen',
+ 'heatingdemand': 'Heizbedarf',
+ 'drawbox': 'Box zeichnen',
+ 'surface': 'Oberfläche',
+ 'volume': 'Volumen',
+ 'height': 'Höhe',
+ 'yearofconstruction': 'Baujahr',
+ 'heatedvolume': 'Beheiztes Volumen',
+ 'buildingfunction': 'Gebäudefunktion',
+ 'yearlyheatingdemand': 'Jährlicher Heizbedarf',
+ 'yearlycoolingdemand': 'Jährlicher Kühlbedarf',
+ 'attributes': 'Attribute',
+ 'heatinglegend': 'Heizbedarf [kWh/yr]',
+ 'monthlyheating': 'monatlicher Heizungsbedarf',
+ 'monthlycooling': 'monatliche Kühlung',
+ 'userguide': 'Benutzerhandbuch',
+ 'monthlyheatingperm2': 'monatlicher Heizungsbedarf pro m2',
+ 'monthlycoolingperm2': 'monatliche Kühlung pro m2',
+ 'monthlyheatingperm3': 'monatlicher Heizungsbedarf pro m3',
+ 'monthlycoolingperm3': 'monatliche Kühlung pro m3',
+ }
+ };
- if (lang === "de") {
- document.getElementById("submitID").value = "Senden";
- }
- else if (lang === "en") {
- document.getElementById("submitID").value = "Submit";
- }
+ // Process translation
+ $(function() {
+ $('.translate').click(function() {
+ var lang = $(this).attr('id');
- $('.lang').each(function (index, item) {
- $(this).text(arrLang[lang][$(this).attr('key')]);
- });
- });
- });
- </script>
+ if (lang === "de") {
+ document.getElementById("submitID").value = "Senden";
+ } else if (lang === "en") {
+ document.getElementById("submitID").value = "Submit";
+ }
+
+ $('.lang').each(function(index, item) {
+ $(this).text(arrLang[lang][$(this).attr('key')]);
+ });
+ });
+ });
+
+ </script>
</head>
<body>
- <a href="https://www.hft-stuttgart.de/" target="_blank">
- <div class="credit"></div>
- </a>
+ <a href="https://www.hft-stuttgart.de/" target="_blank">
+ <div class="credit"></div>
+ </a>
- <!--Cesium Globe-->
- <div id="cesiumContainer"></div>
+ <!--Cesium Globe-->
+ <div id="cesiumContainer"></div>
- <!--Screen Loader-->
- <div class="loader" id="loader"></div>
+ <!--Screen Loader-->
+ <div class="loader" id="loader"></div>
- <!-- The Modal -->
- <div id="myModal" class="modal">
- <!-- Modal content -->
- <div class="modal-content">
- <span class="close">×</span>
- <h3>Available Tilesets</h3>
- <ul id="myList">
- <p id="tile"><br></p>
- </ul>
- </div>
- </div>
+ <!-- The Modal -->
+ <div id="myModal" class="modal">
+ <!-- Modal content -->
+ <div class="modal-content">
+ <span class="close">×</span>
+ <h3>Available Tilesets</h3>
+ <ul id="myList">
+ <p id="tile"><br></p>
+ </ul>
+ </div>
+ </div>
- <!--Chart and Dropup Button-->
- <div id="areaChartContainer">
- <div id="dupbutton" class="btn-group dropup">
- <button type="button" class="btn btn-secondary dropdown-toggle lang" data-toggle="dropdown" aria-haspopup="true"
- aria-expanded="false" key='attributes'>Attributes</button>
- <div class="dropdown-menu">
- <button id="surfaceChartAttribute" class="dropdown-item lang" key="surface">Surface</button>
- <button id="height" class="dropdown-item lang" type="button" key="height">Height</button>
- <button id="yearOfConstruction" class="dropdown-item lang" type="button" key="yearofconstruction">Year of
- Construction</button>
- <button id="heatedVolume" class="dropdown-item lang" type="button" key="heatedvolume">Heated Volume</button>
- <button id="buildingFunction" class="dropdown-item lang" type="button" key="buildingfunction">Building
- Function</button>
- <button id="yearlyHeatingDemand" class="dropdown-item lang" type="button" key="yearlyheatingdemand">Yearly
- Heating Demand</button>
- <button id="yearlyCoolingDemand" class="dropdown-item lang" type="button" key="yearlycoolingdemand">Yearly
- Cooling Demand</button>
- </div>
- </div>
- <div class="btn-group btn-group-toggle" data-toggle="buttons">
- <label class="btn btn-secondary active">
- <input type="radio" name="options" id="option1" autocomplete="off" checked>
- <div class='lang' key='bar'> Bar </div>
- </label>
- <label class="btn btn-secondary">
- <input type="radio" name="options" id="option2" autocomplete="off">
- <div class='lang' key='line'> Line </div>
- </label>
- <label class="btn btn-secondary">
- <input type="radio" name="options" id="option3" autocomplete="off">
- <div class='lang' key='pie'> Pie </div>
- </label>
- <label class="btn btn-secondary">
- <input type="radio" name="options" id="option4" autocomplete="off">
- <div class='lang' key='doughnut'> Doughnut </div>
- </label>
- </div>
- <canvas id="areaChart" class="myChart"></canvas>
- </div>
+ <!--Chart and Dropup Button-->
+ <div id="areaChartContainer">
+ <div id="dupbutton" class="btn-group dropup">
+ <button type="button" class="btn btn-secondary dropdown-toggle lang" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" key='attributes'>Attributes</button>
+ <div class="dropdown-menu">
+ <button id="surfaceChartAttribute" class="dropdown-item lang" key="surface">Surface</button>
+ <button id="height" class="dropdown-item lang" type="button" key="height">Height</button>
+ <button id="yearOfConstruction" class="dropdown-item lang" type="button" key="yearofconstruction">Year of
+ Construction</button>
+ <button id="heatedVolume" class="dropdown-item lang" type="button" key="heatedvolume">Heated Volume</button>
+ <button id="buildingFunction" class="dropdown-item lang" type="button" key="buildingfunction">Building
+ Function</button>
+ <button id="yearlyHeatingDemand" class="dropdown-item lang" type="button" key="yearlyheatingdemand">Yearly
+ Heating Demand</button>
+ <button id="yearlyCoolingDemand" class="dropdown-item lang" type="button" key="yearlycoolingdemand">Yearly
+ Cooling Demand</button>
+ </div>
+ </div>
+ <div class="btn-group btn-group-toggle" data-toggle="buttons">
+ <label class="btn btn-secondary active">
+ <input type="radio" name="options" id="option1" autocomplete="off" checked>
+ <div class='lang' key='bar'> Bar </div>
+ </label>
+ <label class="btn btn-secondary">
+ <input type="radio" name="options" id="option2" autocomplete="off">
+ <div class='lang' key='line'> Line </div>
+ </label>
+ <label class="btn btn-secondary">
+ <input type="radio" name="options" id="option3" autocomplete="off">
+ <div class='lang' key='pie'> Pie </div>
+ </label>
+ <label class="btn btn-secondary">
+ <input type="radio" name="options" id="option4" autocomplete="off">
+ <div class='lang' key='doughnut'> Doughnut </div>
+ </label>
+ </div>
+ <canvas id="areaChart" class="myChart"></canvas>
+ </div>
- <!--small chart for single Building-->
- <div id="singleChartContainer">
- <div id="dupbutton2" class="btn-group dropup">
- <button type="button" class="btn btn-secondary dropdown-toggle lang" data-toggle="dropdown" aria-haspopup="true"
- aria-expanded="false" key="attributes">Attributes
- </button>
- <div class="dropdown-menu">
- <a id="monthlyHeating" class="dropdown-item lang" key="monthlyheating">Monthly Heating</a>
- <a id="monthlyCooling" class="dropdown-item lang" key="monthlycooling">Monthly Cooling</a>
- <a id="monthlyHeatingPerM2" class="dropdown-item lang" key="monthlyheatingperm2">Monthly Heating Per m2</a>
- <a id="monthlyCoolingPerM2" class="dropdown-item lang" key="monthlycoolingperm2">Monthly Cooling Per m2</a>
- <a id="monthlyHeatingPerM3" class="dropdown-item lang" key="monthlyheatingperm3">Monthly Heating Per m3</a>
- <a id="monthlyCoolingPerM3" class="dropdown-item lang" key="monthlycoolingperm3">Monthly Cooling Per m3</a>
- </div>
- </div>
- <canvas id="buildingChart" class="myChart"></canvas>
- </div>
+ <!--small chart for single Building-->
+ <div id="singleChartContainer">
+ <div id="dupbutton2" class="btn-group dropup">
+ <button type="button" class="btn btn-secondary dropdown-toggle lang" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" key="attributes">Attributes
+ </button>
+ <div class="dropdown-menu">
+ <a id="monthlyHeating" class="dropdown-item lang" key="monthlyheating">Monthly Heating</a>
+ <a id="monthlyCooling" class="dropdown-item lang" key="monthlycooling">Monthly Cooling</a>
+ <a id="monthlyHeatingPerM2" class="dropdown-item lang" key="monthlyheatingperm2">Monthly Heating Per m2</a>
+ <a id="monthlyCoolingPerM2" class="dropdown-item lang" key="monthlycoolingperm2">Monthly Cooling Per m2</a>
+ <a id="monthlyHeatingPerM3" class="dropdown-item lang" key="monthlyheatingperm3">Monthly Heating Per m3</a>
+ <a id="monthlyCoolingPerM3" class="dropdown-item lang" key="monthlycoolingperm3">Monthly Cooling Per m3</a>
+ </div>
+ </div>
+ <canvas id="buildingChart" class="myChart"></canvas>
+ </div>
- <div id="languagebuttons" class="btn-group" role="group" aria-label="Basic example">
- <button id="en" class="translate"><span class="flag-icon flag-icon-gb"></span></button>
- <button id="de" class="translate"><span class="flag-icon flag-icon-de"></span></button>
- </div>
+ <div id="languagebuttons" class="btn-group" role="group" aria-label="Basic example">
+ <button id="en" class="translate"><span class="flag-icon flag-icon-gb"></span></button>
+ <button id="de" class="translate"><span class="flag-icon flag-icon-de"></span></button>
+ </div>
- <div class="hilfe">
- <p> <a href="/3dclient4simstadtapi/public/pdf/Benutzerhandbuch.pdf" target="_blank"><button class="lang" id="Handbuch" key="userguide">User Guide</button></a></p>
+ <div class="hilfe">
+ <p> <a href="/3dclient4simstadtapi/public/pdf/Benutzerhandbuch.pdf" target="_blank"><button class="lang" id="Handbuch" key="userguide">User Guide</button></a></p>
</div>
- <!--Sidebar-->
- <div id="sidebar">
- <div class="toggle-btn" onclick="toggleSidebar(this)">
- <span style="background-color: royalblue;"></span>
- <span style="background-color: royalblue;"></span>
- <span style="background-color: royalblue;"></span>
- </div>
- <div class="list">
- <!--URL Submit-->
- <div class="item">
- <!--New Sumit Version-->
- <label class="lang" key="chooseaarea" id="arealabel" for="urls">Choose an area:</label>
- <select name="urls" id="3Durl">
- <optgroup label="Tilesets">
- <option value="hftcampus">HFT-Campus</option>
- <option value="paderborn">Paderborn</option>
- </optgroup>
- </select>
- <br><br>
- <input id="submitID" type="button" class="btn btn-primary" value="Submit">
- </div>
-<!--SELECT Adresse-->
-<div class="item">
- <label class="lang" key="chooseaarea" id="arealabel" for="SearchAddress">Search Address:</label>
- <input id="SearchAddress" type="text" name="SearchAddress" >
- <br><br>
- <input id="SerachID" type="button" onclick="searchaddress()" class="btn btn-primary" value="Search">
-</div>
- <!--SELECT VIEW-->
- <div class="item">
- <div id="radio-group" class="cc-selector">
- <input id="building" type="radio" name="credit-card" value="building" checked>
- <div class="lang" key="buildingview">Building-View</div>
- <label class="drinkcard-cc building" for="building"></label>
-
- <input id="surface" type="radio" name="credit-card" value="surface">
- <div class="lang" key="surfaceview">Surface-View</div>
- <label class="drinkcard-cc surface" for="surface"></label>
+ <!--Sidebar-->
+ <div id="sidebar">
+ <div class="toggle-btn" onclick="toggleSidebar(this)">
+ <span style="background-color: royalblue;"></span>
+ <span style="background-color: royalblue;"></span>
+ <span style="background-color: royalblue;"></span>
+ </div>
+ <div class="list">
+ <!--URL Submit-->
+ <div class="item">
+ <!--New Sumit Version-->
+ <label class="lang" key="chooseaarea" id="arealabel" for="urls">Choose an area:</label>
+ <select name="urls" id="3Durl">
+ <optgroup label="Tilesets">
+ <option value="hftcampus">HFT-Campus</option>
+ <option value="paderborn">Paderborn</option>
+ </optgroup>
+ </select>
+ <br><br>
+ <input id="submitID" type="button" class="btn btn-primary" value="Submit">
+ </div>
+ <!--SELECT Adresse-->
+ <div class="item">
+ <label class="lang" key="chooseaarea" id="arealabel" for="SearchAddress">Search Address:</label>
+ <input id="SearchAddress" type="text" name="SearchAddress">
+ <br><br>
+ <input id="SerachID" type="button" onclick="searchaddress()" class="btn btn-primary" value="Search">
+ </div>
+ <!--SELECT VIEW-->
+ <div class="item">
+ <div id="radio-group" class="cc-selector">
+ <input id="building" type="radio" name="credit-card" value="building" checked>
+ <div class="lang" key="buildingview">Building-View</div>
+ <label class="drinkcard-cc building" for="building"></label>
- <!-- deprecated: Used for roof-view
+ <input id="surface" type="radio" name="credit-card" value="surface">
+ <div class="lang" key="surfaceview">Surface-View</div>
+ <label class="drinkcard-cc surface" for="surface"></label>
+
+ <!-- deprecated: Used for roof-view
<input id="roof" type="radio" name="credit-card" value="roof">
<div class="lang" key="roofview">Roof-View</div>
<label class="drinkcard-cc surface" for="roof"></label> -->
- </div>
- </div>
- <!--Attributbutton-->
- <button class="dropdown-btn">Attributes<em class="fa fa-caret-down"></em></button>
- <div class="dropdown-container">
- <div class="dropp-header">
- <a href="#" class="dropp-header__btn js-dropp-action">
- <em class="item"></em>
- </a>
- </div>
+ </div>
+ </div>
+ <!--Attributbutton-->
+ <button class="dropdown-btn">Attributes<em class="fa fa-caret-down"></em></button>
+ <div class="dropdown-container">
+ <div class="dropp-header">
+ <a href="#" class="dropp-header__btn js-dropp-action">
+ <em class="item"></em>
+ </a>
+ </div>
+
+ <div class="dropp-body">
+
+ <label for="specificYield">Specific Yield
+ <input id="specificYield" type="radio" key="specificYield" name="specificYield" value="specificYield" onclick="chosenAttributeHandler(this);">
+ </label>
+ <label for="totalInvestment">Total Investment
+ <input id="totalInvestment" type="radio" key="totalInvestment" name="dropp" value="totalInvestment" onclick="chosenAttributeHandler(this);">
+ </label>
+ <label for="potentialYield">Potential Yield
+ <input id="potentialYield" type="radio" key="potentialYield" name="dropp" value="potentialYield" onclick="chosenAttributeHandler(this);">
+ </label>
+ <label for="maintenancePerYear">Maintenance Per Year
+ <input id="maintenancePerYear" type="radio" key="maintenancePerYear" name="dropp" value="maintenancePerYear" onclick="chosenAttributeHandler(this);">
+ </label>
+ <label for="netPresentValue">Net Present Value
+ <input id="netPresentValue" type="radio" key="netPresentValue" name="dropp" value="netPresentValue" onclick="chosenAttributeHandler(this);">
+ </label>
+ <label for="nominalPower">Nominal Power
+ <input id="nominalPower" type="radio" key="nominalPower" name="dropp" value="nominalPower" onclick="chosenAttributeHandler(this);">
+ </label>
+ <label for="paybackPeriod">Payback Period
+ <input id="paybackPeriod" type="radio" key="paybackPeriod" name="dropp" value="paybackPeriod" onclick="chosenAttributeHandler(this);">
+ </label>
+ <label for="levelizedCostOfElectricity">Levelized Cost Of Electricity
+ <input id="levelizedCostOfElectricity" type="radio" key="levelizedCostOfElectricity" name="dropp" value="levelizedCostOfElectricity" onclick="chosenAttributeHandler(this);">
+ </label>
+ <label for="internalRateOfReturn">Internal Rate Of Return
+ <input id="internalRateOfReturn" type="radio" key="internalRateOfReturn" name="dropp" value="internalRateOfReturn" onclick="chosenAttributeHandler(this);">
+ </label>
+ <label for="discountedPaybackPeriod">Discounted Payback Period
+ <input id="discountedPaybackPeriod" type="radio" key="discountedPaybackPeriod" name="dropp" value="discountedPaybackPeriod" onclick="chosenAttributeHandler(this);">
+ </label>Shadow-Value
+ <input id="shadowValue" type="radio" name="dropp" value="shadowValue" onclick="chosenAttributeHandler(this);" checked> </label>
+ </div>
+ </div>
+ <div id="chartButton" class="button">
+ <div class='lang' key='chart'>Chart</div>
+ </div>
+ <!--Draw-menu-->
+ <button class="dropdown-btn"><span class='lang' key='drawbox'>Draw box</span><i class="fa fa-caret-down"></i></button>
+ <div class="dropdown-container">
+ <button class="buttonBlue1" type="button" style="background: rgb(208, 247, 37)" onclick="drawBounding()">
+ <div class='lang' key='drawbox'>Draw box</div>
+ </button>
+ <br>
+ <button class="buttonBlue1" type="button" style="background: rgb(89, 152, 248)" onclick="createRequest_BB()">
+ <div class='lang' key='confirm'>Confirm</div>
+ </button>
+ <br>
+ <button class="buttonBlue1" type="button" style="background: rgb(90, 90, 90)" onclick="reset()">
+ <div class='lang' key='reset'>Reset</div>
+ </button>
+ </div>
+ <button class="dropdown-btn">Filter<i class="fa fa-caret-down"></i></button>
+ <div id="filterswitches" class="dropdown-container">
+ <br>
+ <div id="filterswitch" class="custom-control custom-switch">U-Value
+ <label class="switch">
+ <input type="checkbox" id="checkbox1">
+ <span class="slider round"></span>
+ </label>
+ </div>
+ <br>
+ <div id="filterswitch2" class="custom-control custom-switch">
+ <span class='lang' key='heatingdemand'>Heating demand</span>
+ <label class="switch">
+ <input type="checkbox" id="checkbox2">
+ <span class="slider round"></span>
+ </label>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="legends" id="heat-demand-legend" style="display: block;">
+ <div class="heat-demand-legend-container">
+ <h3 id="heat-demand-legend-title">
+ <div class='lang' key='heatinglegend'>Heating Demand [kWh/yr]</div>
+ </h3>
+ <div class="Heat-Demand-Bar" id="top">
+ <div class="classes">A</div>
+ <div class="line">|</div>
+ <div class="classes">B</div>
+ <div class="line">|</div>
+ <div class="classes">C</div>
+ <div class="line">|</div>
+ <div class="classes">D</div>
+ <div class="line">|</div>
+ <div class="classes">E</div>
+ <div class="line">|</div>
+ <div class="classes">F</div>
+ <div class="line">|</div>
+ <div class="classes">G</div>
+ <div class="line">|</div>
+ <div class="classes">H</div>
+ </div>
+ <div class="values">
+ <div class="value">0</div>
+ <div class="value">200</div>
+ <div class="value">400</div>
+ <div class="value">600</div>
+ <div class="value">800</div>
+ <div class="value">1000</div>
+ <div class="value">1200</div>
+ <div class="value">1400</div>
+ </div>
+ <div class="Heat-Demand-Bar" id="bottom">
+ <div id="arrow-slider">
+ <div id="arrow">⇑</div>
+ </div>
+ </div>
+ </div>
+ </div>
- <div class="dropp-body">
- <label><input id="pvPotential" type="radio" key="pvPotential" name="dropp" value="pvPotential" onclick="chosenAttributeHandler(this);"> PV-Value</label>
- <label for="specificYield">Specific Yield
- <input id="specificYield" type="radio" key="specificYield" name="specificYield" value="specificYield" onclick="chosenAttributeHandler(this);">
- </label>
- <label for="totalInvestment">Total Investment
- <input id="totalInvestment" type="radio" key="totalInvestment" name="dropp" value="totalInvestment" onclick="chosenAttributeHandler(this);">
- </label>
- <label for="potentialYield">Potential Yield
- <input id="potentialYield" type="radio" key="potentialYield" name="dropp" value="potentialYield" onclick="chosenAttributeHandler(this);">
- </label>
- <label for="maintenancePerYear">Maintenance Per Year
- <input id="maintenancePerYear" type="radio" key="maintenancePerYear" name="dropp" value="maintenancePerYear" onclick="chosenAttributeHandler(this);">
- </label>
- <label for="netPresentValue">Net Present Value
- <input id="netPresentValue" type="radio" key="netPresentValue" name="dropp" value="netPresentValue" onclick="chosenAttributeHandler(this);">
- </label>
- <label for="nominalPower">Nominal Power
- <input id="nominalPower" type="radio" key="nominalPower" name="dropp" value="nominalPower" onclick="chosenAttributeHandler(this);">
- </label>
- <label for="paybackPeriod">Payback Period
- <input id="paybackPeriod" type="radio" key="paybackPeriod" name="dropp" value="paybackPeriod" onclick="chosenAttributeHandler(this);">
- </label>
- <label for="levelizedCostOfElectricity">Levelized Cost Of Electricity
- <input id="levelizedCostOfElectricity" type="radio" key="levelizedCostOfElectricity" name="dropp" value="levelizedCostOfElectricity" onclick="chosenAttributeHandler(this);">
- </label>
- <label for="internalRateOfReturn">Internal Rate Of Return
- <input id="internalRateOfReturn" type="radio" key="internalRateOfReturn" name="dropp" value="internalRateOfReturn" onclick="chosenAttributeHandler(this);">
- </label>
- <label for="discountedPaybackPeriod">Discounted Payback Period
- <input id="discountedPaybackPeriod" type="radio" key="discountedPaybackPeriod" name="dropp" value="discountedPaybackPeriod" onclick="chosenAttributeHandler(this);">
- </label>
- <label><input id="shadowValue" type="radio" name="dropp" value="shadowValue" onclick="chosenAttributeHandler(this);"> Shadow-Value</label>
- </div>
- </div>
- <div id="chartButton" class="button">
- <div class='lang' key='chart'>Chart</div>
- </div>
- <!--Draw-menu-->
- <button class="dropdown-btn"><span class='lang' key='drawbox'>Draw box</span><i class="fa fa-caret-down"></i></button>
- <div class="dropdown-container">
- <button class="buttonBlue1" type="button" style="background: rgb(208, 247, 37)"
- onclick="drawBounding()">
- <div class='lang' key='drawbox'>Draw box</div>
- </button>
- <br>
- <button class="buttonBlue1" type="button" style="background: rgb(89, 152, 248)" onclick="createRequest_BB()">
- <div class='lang' key='confirm'>Confirm</div>
- </button>
- <br>
- <button class="buttonBlue1" type="button" style="background: rgb(90, 90, 90)" onclick="reset()">
- <div class='lang' key='reset'>Reset</div>
- </button>
- </div>
- <button class="dropdown-btn">Filter<i class="fa fa-caret-down"></i></button>
- <div id="filterswitches" class="dropdown-container">
- <br>
- <div id="filterswitch" class="custom-control custom-switch">U-Value
- <label class="switch">
- <input type="checkbox" id="checkbox1">
- <span class="slider round"></span>
- </label>
- </div>
- <br>
- <div id="filterswitch2" class="custom-control custom-switch">
- <span class='lang' key='heatingdemand'>Heating demand</span>
- <label class="switch">
- <input type="checkbox" id="checkbox2">
- <span class="slider round"></span>
- </label>
- </div>
- </div>
- </div>
- </div>
+ <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
+ </script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">
+ </script>
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
+ </script>
- <div class="legends" id="heat-demand-legend" style="display: block;">
- <div class="heat-demand-legend-container">
- <h3 id="heat-demand-legend-title">
- <div class='lang' key='heatinglegend'>Heating Demand [kWh/yr]</div>
- </h3>
- <div class="Heat-Demand-Bar" id="top">
- <div class="classes">A</div>
- <div class="line">|</div>
- <div class="classes">B</div>
- <div class="line">|</div>
- <div class="classes">C</div>
- <div class="line">|</div>
- <div class="classes">D</div>
- <div class="line">|</div>
- <div class="classes">E</div>
- <div class="line">|</div>
- <div class="classes">F</div>
- <div class="line">|</div>
- <div class="classes">G</div>
- <div class="line">|</div>
- <div class="classes">H</div>
- </div>
- <div class="values">
- <div class="value">0</div>
- <div class="value">200</div>
- <div class="value">400</div>
- <div class="value">600</div>
- <div class="value">800</div>
- <div class="value">1000</div>
- <div class="value">1200</div>
- <div class="value">1400</div>
- </div>
- <div class="Heat-Demand-Bar" id="bottom">
- <div id="arrow-slider">
- <div id="arrow">⇑</div>
- </div>
- </div>
- </div>
- </div>
+ <script type="text/javascript" src="js/colorPalettes.js"></script>
- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
- integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
- </script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
- integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">
- </script>
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
- integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
- </script>
- <script type="text/javascript" src="js/colorPalettes.js"></script>
-
- <script type="text/javascript" src="js/sidebar.js"></script>
- <script type="text/javascript" src="js/globe.js"></script>
- <script type="text/javascript" src="js/areaCharts.js"></script>
- <script type="text/javascript" src="js/connectToAPI.js"></script>
- <script type="text/javascript" src="js/draw.js"></script>
- <script type="text/javascript" src="js/buildingCharts.js"></script>
- <script type="text/javascript" src="js/pvPotentialNormalization.js"></script>
+ <script type="text/javascript" src="js/sidebar.js"></script>
+ <script type="text/javascript" src="js/globe.js"></script>
+ <script type="text/javascript" src="js/areaCharts.js"></script>
+ <script type="text/javascript" src="js/connectToAPI.js"></script>
+ <script type="text/javascript" src="js/draw.js"></script>
+ <script type="text/javascript" src="js/buildingCharts.js"></script>
+ <script type="text/javascript" src="js/pvPotentialNormalization.js"></script>
</body>
--
GitLab