index.html 13.8 KB
Newer Older
JOE XMG's avatar
publish  
JOE XMG committed
1
2
3
4
5
6
7
8
<!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 -->
JOE XMG's avatar
update    
JOE XMG committed
9
    <title>EnSysLE Dashboard</title>
JOE XMG's avatar
publish  
JOE XMG committed
10
    <link rel="shortcut icon" href="favicon.ico" />
JOE XMG's avatar
update    
JOE XMG committed
11
12
13
14
15
    <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">
JOE XMG's avatar
publish  
JOE XMG committed
16
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" />
JOE XMG's avatar
update    
JOE XMG committed
17
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
JOE XMG's avatar
publish  
JOE XMG committed
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
</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">
JOE XMG's avatar
update    
JOE XMG committed
33

JOE XMG's avatar
publish  
JOE XMG committed
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
            </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>
JOE XMG's avatar
update    
JOE XMG committed
49
                        <option value="HeatDemand">Heat Demand</option>
JOE XMG's avatar
publish  
JOE XMG committed
50
51
52
53
54
55
56
57
58


                    </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>
JOE XMG's avatar
update    
JOE XMG committed
59

JOE XMG's avatar
publish  
JOE XMG committed
60
61
62
63
64
65
                    <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>
JOE XMG's avatar
update    
JOE XMG committed
66

JOE XMG's avatar
publish  
JOE XMG committed
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
                        <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>
JOE XMG's avatar
update    
JOE XMG committed
97

JOE XMG's avatar
publish  
JOE XMG committed
98
99
100
101
102
103
104
105
106
                        <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>
JOE XMG's avatar
update    
JOE XMG committed
107

JOE XMG's avatar
publish  
JOE XMG committed
108
109
110
111
112
113
114
115
                    <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">
JOE XMG's avatar
update    
JOE XMG committed
116

JOE XMG's avatar
publish  
JOE XMG committed
117
118
119
                            <div class="ffpv-legend">
                                <small class="ffpv-description">This concept scenario is to realize food and electricity
                                    production simultaneously on
JOE XMG's avatar
update    
JOE XMG committed
120
121
                                    the same land, using various panel-mounting designs. A ground cover ratio is around
                                    one
JOE XMG's avatar
publish  
JOE XMG committed
122
                                    third compared to conventional ground-mounted PV.</small>
JOE XMG's avatar
update    
JOE XMG committed
123
                                <hr>
JOE XMG's avatar
publish  
JOE XMG committed
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
                                <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">
JOE XMG's avatar
update    
JOE XMG committed
185

JOE XMG's avatar
publish  
JOE XMG committed
186
                            <div class="ffpv-legend">
JOE XMG's avatar
update    
JOE XMG committed
187
188
189
190
                                <small class="ffpv-description">The conversion areas defined by EEG and 200m-corridors
                                    along
                                    highways & railways</small>
                                <hr>
JOE XMG's avatar
publish  
JOE XMG committed
191
192
193
194
195
196
197
198
199
200
201
                                <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>
JOE XMG's avatar
update    
JOE XMG committed
202

JOE XMG's avatar
publish  
JOE XMG committed
203
204
205
206
207
208
209
210

                    <hr>
                    <div id="BioenergyMenu"></div>
                    <hr>
                    <div id="footerArea"></div>
                </div>

            </div>
JOE XMG's avatar
update    
JOE XMG committed
211
            <div id="hourlyChartContainer" class="hourlyChartContainer" style="display: none;">
JOE XMG's avatar
update    
JOE XMG committed
212
                <h6 class="mt-2"><i class="bi bi-house"></i> Hourly heating demand of Building </h6>
JOE XMG's avatar
update    
JOE XMG committed
213
214
215
216
                <div id="building_infobox" style="display: none;"></div>

                <div id="hourlyChart"></div>
            </div>
JOE XMG's avatar
publish  
JOE XMG committed
217
218
219
220
        </div>

    </div>

JOE XMG's avatar
update    
JOE XMG committed
221
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
JOE XMG's avatar
update    
JOE XMG committed
222
223
224
225
226
227
    <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>
JOE XMG's avatar
publish  
JOE XMG committed
228
229
230
</body>

</html>