index.html 4.19 KB
Newer Older
Rushikesh Padsala's avatar
Rushikesh Padsala committed
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<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 app 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">
        <title>Net Zero Gowanus 3D Viewer</title>
        <!-- The Cesium library. -->
Rushikesh Padsala's avatar
Rushikesh Padsala committed
13
14
        <script src="https://cesium.com/downloads/cesiumjs/releases/1.81/Build/Cesium/Cesium.js"></script>
        <link href="https://cesium.com/downloads/cesiumjs/releases/1.81/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
Rushikesh Padsala's avatar
Rushikesh Padsala committed
15
16
17
18
        <!-- stylesheets -->
        <link rel="stylesheet" href="index.css" media="screen">
		<link rel="stylesheet" type="text/css" href="./CSS/gowanus.css">
		<!-- external scripts -->
Rushikesh Padsala's avatar
Rushikesh Padsala committed
19
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Rushikesh Padsala's avatar
Rushikesh Padsala committed
20
21
22
23
24
25
26
27
28
29
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src='./ThirdParty/apexcharts-bundle/dist/apexcharts.min.js'></script>
        <script src='./ThirdParty/Bootstrap/js/bootstrap.min.js'></script>
        <script src='./ThirdParty/Bootstrap/js/bootstrap.bundle.min.js'></script>
	</head>
    <body>
        <!-- defining container to keep cesium viewer -->
        <div id="cesiumContainer"></div>
        <!-- defining menu panel -->
        <div class="backdrop" id="menu">
Rushikesh Padsala's avatar
Rushikesh Padsala committed
30
            <h2>Net Zero Gowanus <i class="fa fa-info-circle" style="font-size:15px;color:yellow" onclick="window.open('https://www.isprs-ann-photogramm-remote-sens-spatial-inf-sci.net/VIII-4-W1-2021/81/2021/')"> </i></h2>
Rushikesh Padsala's avatar
Rushikesh Padsala committed
31
32
			<span><strong>Scenario Selection</strong></span>
            <div class="nowrap">
Rushikesh Padsala's avatar
Rushikesh Padsala committed
33
                <select id="selectscenario"> <i class="fa fa-info-circle" style="font-size:15px;color:yellow" onclick="window.open('https://www.corp.at/archive/CORP2020_54.pdf')"> </i>
Rushikesh Padsala's avatar
Rushikesh Padsala committed
34
35
36
                    <option value="current">Existing</option>
                    <option value="bau">2050 BAU</option>
					<option value="bp">2050 Best Practice</option>
Rushikesh Padsala's avatar
Rushikesh Padsala committed
37
					<option value="bp1">2050 Best Practice (v1)</option>
Rushikesh Padsala's avatar
Rushikesh Padsala committed
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
                </select>
            </div>
            <br>
            <span><strong>Show</strong></span>
            <div class="nowrap">
                <input id="3dbuildings" name="source" type="radio" checked/>
                <label for="3dbuildings">3D Buildings</label>
            </div>
            <div class="nowrap">
                <input id="heatdemand" name="source" type="radio"/>
                <label for="heatdemand">Sp. Heating Demand</label>
            </div>
            <br>
			<!-- for chart menu panel -->         
	        <span><strong>Chart Options</strong></span>
			<div class="nowrap">
                <input id="monthlydemand" type="checkbox"  onclick="showTable()" />
                <label for="monthlydemand">Monthly Heating Demand </label>
            </div>                   
            <br>
		 
			<!-- for legend panel -->
			<div id=legend>
				<hr color='white'>
				<div class='my-legend' id="legendcontainer">
					<div class='legend-title'>Sp. Heating Demand (kWh/m<sup>2</sup>.a)</div>
					<div class='legend-scale'>
						<ul class='legend-labels'>
							<li><span style='background:#33ACFF;'></span>Less than 60</li>
							<li><span style='background:#2AFF00;'></span>60 to 120</li>
							<li><span style='background:#FFFF00;'></span>120 to 170</li>
							<li><span style='background:#FFA200;'></span>170 to 230</li>
							<li><span style='background:#FF0000;'></span>More than 230</li>
							<li><span style='background:#000000;'></span>None Heated / No Data</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- defining container to keep cesium viewer -->
		<div id="chartcontainer" style="visibility: hidden;">
				<div id="chart"></div>
        </div>
		<a href="https://www.hft-stuttgart.de/" target='_blank'>
        <div class="credit"></div>
        </a>
		<!-- javascript -->
        <script src="./Source/App.js"></script>
    </body>
</html>