Skip to content

GitLab

Commit 8b532b40 authored by BujarMuharemi's avatar BujarMuharemi
Browse files

fixed pvPotential radio btn controller; works now

parent bb156b4f
Hide whitespace changes
Inline Side-by-side
public/js/colorPalettes.js
View file @ 8b532b40
//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
......
public/js/globe.js
View file @ 8b532b40
......@@ -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
......
public/js/pvPotentialNormalization.js
View file @ 8b532b40
......@@ -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) {
......
public/main.html
View file @ 8b532b40
......@@ -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">&times;</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">&times;</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>
......
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