An error occurred while loading the file. Please try again.
main.html 14.70 KiB
<!DOCTYPE html>
<!-- Language is English -->
<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">
	<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);
		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', } }; // Process translation $(function () { $('.translate').click(function () { var lang = $(this).attr('id'); 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> <!--Cesium Globe--> <div id="cesiumContainer"></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> <!--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> <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> <!--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> <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--> <div class="item"></div> <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="pvPotential">PV-Value <input type="radio" key="pvPotential" name="dropp" value="PV-Value"> </label> <label for="shadowData">Shadow-Value <input type="radio" id="shadowData" name="dropp" value="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> <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 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/shadowPalette.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> </body> </html>