Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 14 KB
Newer Older
Pithon Kabiro's avatar
Initial commit  
Pithon Kabiro committed
1
2
3 
<!DOCTYPE html>
<html lang="en">
  <head>
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
4
5
6
7
8
9
10
11 
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="description" content="" />
    <meta name="author" content="" />
Pithon Kabiro's avatar
Edit index.html title    
Pithon Kabiro committed
12 
    <title>iCity Energy Dashboard</title>
Pithon Kabiro's avatar
Move the index.html file    
Pithon Kabiro committed
13 
    <link href="./css/thirdparty/styles.css" rel="stylesheet" />
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
14
15
16
17
18 
    <link
      href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css"
      rel="stylesheet"
      crossorigin="anonymous"
    />
Pithon Kabiro's avatar
Change heatmap chart, use Highcharts lib; edit HTML <div> element names    
Pithon Kabiro committed
19
Pithon Kabiro's avatar
Add basic list with sensor names    
Pithon Kabiro committed
20
21 
    <!--     
    CUSTOM CSS -->
Pithon Kabiro's avatar
Move the index.html file    
Pithon Kabiro committed
22 
    <link href="./css/stylesCustom.css" rel="stylesheet" />
Pithon Kabiro's avatar
Add basic list with sensor names    
Pithon Kabiro committed
23
Pithon Kabiro's avatar
Change heatmap chart, use Highcharts lib; edit HTML <div> element names    
Pithon Kabiro committed
24 
    <!-- Font Awesome icons -->
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
25
26
27
28 
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js"
      crossorigin="anonymous"
    ></script>
Pithon Kabiro's avatar
Change heatmap chart, use Highcharts lib; edit HTML <div> element names    
Pithon Kabiro committed
29
Pithon Kabiro's avatar
Initial commit  
Pithon Kabiro committed
30
31 
    <!-- Axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Pithon Kabiro's avatar
Change heatmap chart, use Highcharts lib; edit HTML <div> element names    
Pithon Kabiro committed
32
Pithon Kabiro's avatar
Draw column chart    
Pithon Kabiro committed
33
34 
    <!-- Higcharts -->
    <!-- `highcharts.js` does not play well with `highstock.js`; see: https://www.highcharts.com/errors/16/-->
Pithon Kabiro's avatar
Edit function: create full title for chart    
Pithon Kabiro committed
35 
    <!-- <script src="https://code.highcharts.com/highcharts.js"></script> -->
Pithon Kabiro's avatar
Add line chart / Highcharts    
Pithon Kabiro committed
36 
    <script src="https://code.highcharts.com/stock/highstock.js"></script>
Pithon Kabiro's avatar
Initial commit  
Pithon Kabiro committed
37
38
39 
    <script src="https://code.highcharts.com/stock/modules/data.js"></script>
    <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
Pithon Kabiro's avatar
Change heatmap chart, use Highcharts lib; edit HTML <div> element names    
Pithon Kabiro committed
40
41
42
43
44 
    <script src="https://code.highcharts.com/modules/heatmap.js"></script>
    <script src="https://code.highcharts.com/modules/data.js"></script>
    <script src="https://code.highcharts.com/modules/boost-canvas.js"></script>
    <script src="https://code.highcharts.com/modules/boost.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
Pithon Kabiro's avatar
Add calculation of average to aggregation logic    
Pithon Kabiro committed
45 
    <script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
Pithon Kabiro's avatar
Change heatmap chart, use Highcharts lib; edit HTML <div> element names    
Pithon Kabiro committed
46
Pithon Kabiro's avatar
Draw column chart    
Pithon Kabiro committed
47 
    <!-- Cesium -->
Pithon Kabiro's avatar
Initial commit  
Pithon Kabiro committed
48
49
50
51
52 
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.48/Build/Cesium/Cesium.js"></script>
    <link
      href="https://cesium.com/downloads/cesiumjs/releases/1.48/Build/Cesium/Widgets/widgets.css"
      rel="stylesheet"
    />
Pithon Kabiro's avatar
Change heatmap chart, use Highcharts lib; edit HTML <div> element names    
Pithon Kabiro committed
53
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
54
55
56
57
58
59
60
61
62 
    <!-- Bootstrap dashboard template -->
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
      crossorigin="anonymous"
    ></script>
Pithon Kabiro's avatar
Move the index.html file    
Pithon Kabiro committed
63 
    <script src="./js/thirdparty/scripts.js"></script>
Pithon Kabiro's avatar
Use third-party vanilla JS library for drop-downs    
Pithon Kabiro committed
64
65 

    <!-- vanillaSelectBox -->
Pithon Kabiro's avatar
Move the index.html file    
Pithon Kabiro committed
66 
    <link href="./css/thirdparty/vanillaSelectBox.css" rel="stylesheet" />
Pithon Kabiro's avatar
Change heatmap chart, use Highcharts lib; edit HTML <div> element names    
Pithon Kabiro committed
67
Pithon Kabiro's avatar
New function: create error popup message    
Pithon Kabiro committed
68
69
70 
    <!-- SweetAlert -->
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
71
72 
    <!--     
    Custom JS -->
Pithon Kabiro's avatar
Move the index.html file    
Pithon Kabiro committed
73
74 
    <script defer type="module" src="./js/appCesium.js"></script>
    <script defer type="module" src="./js/appChart.js"></script>
Pithon Kabiro's avatar
Add HFT favicon    
Pithon Kabiro committed
75
76
77
78 

    <!--     
    Favicon -->
    <link rel="icon" href="/public/favicon.ico" />
Pithon Kabiro's avatar
Initial commit  
Pithon Kabiro committed
79 
  </head>
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
80
81 
  <body class="sb-nav-fixed">
    <nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
Pithon Kabiro's avatar
Edit title text in HTML file    
Pithon Kabiro committed
82 
      <a class="navbar-brand" href="index.html">Energy Dashboard</a>
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109 
      <button
        class="btn btn-link btn-sm order-1 order-lg-0"
        id="sidebarToggle"
        href="#"
      >
        <i class="fas fa-bars"></i>
      </button>
    </nav>
    <div id="layoutSidenav">
      <div id="layoutSidenav_nav">
        <nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
          <div class="sb-sidenav-menu">
            <div class="nav">
              <div class="sb-sidenav-menu-heading">Core</div>
              <a class="nav-link" href="index.html">
                <div class="sb-nav-link-icon">
                  <i class="fas fa-tachometer-alt"></i>
                </div>
                Dashboard
              </a>
            </div>
          </div>
        </nav>
      </div>
      <div id="layoutSidenav_content">
        <main>
          <div class="container-fluid">
Pithon Kabiro's avatar
Edit title text in HTML file    
Pithon Kabiro committed
110 
            <!-- <h1 class="mt-4">Dashboard</h1> -->
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
111 
            <ol class="breadcrumb mb-4">
Pithon Kabiro's avatar
Edit title text in HTML file    
Pithon Kabiro committed
112 
              <li class="breadcrumb-item active"></li>
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
113
114
115
116
117
118
119
120
121 
            </ol>

            <div class="row">
              <div class="col-xl-12">
                <div class="card mb-4">
                  <div class="card-header">
                    <i class="fas fa-globe mr-1"></i>
                    3D Visualization
                  </div>
Pithon Kabiro's avatar
Add basic list with sensor names    
Pithon Kabiro committed
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139 
                  <div class="card-body" id="cesiumGlobeContainerParent">
                    <div class="custom-toolbar" id="menu">
                      <!-- <h2>Sample NYC Geocaches</h2>
                      <span><strong>Camera Mode</strong></span>
                      <div class="nowrap">
                        <input
                          id="freeMode"
                          name="source"
                          type="radio"
                          checked
                        />
                        <label for="freeMode">Free</label>
                      </div>
                      <div class="nowrap">
                        <input id="droneMode" name="source" type="radio" />
                        <label for="droneMode">Drone View</label>
                      </div>
                      <br /> -->
Pithon Kabiro's avatar
New function: callback function that draws chart    
Pithon Kabiro committed
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154 
                      <div id="drop-down--chart-type-parent">
                        <span><strong>Chart type</strong></span>
                        <div class="nowrap">
                          <!-- We need the `multiple` attribute for the dropdowns even if 
                          we do not need to support multiple selections. This seems to 
                          be a quirk of the `vanillaSelectBox` library -->
                          <select id="drop-down--chart-type" multiple>
                            <option>Column</option>
                            <option>Line</option>
                            <option>Heatmap</option>
                            <option>Scatter Plot</option>
                          </select>
                        </div>
                      </div>
                      <br />
Pithon Kabiro's avatar
Edit the markup for drop-down lists    
Pithon Kabiro committed
155
156 
                      <div id="drop-down--bldg-data-point-parent">
                        <span><strong>Building(s), Data Point(s)</strong></span>
Pithon Kabiro's avatar
Add a building dropdown list    
Pithon Kabiro committed
157 
                        <div class="nowrap">
Pithon Kabiro's avatar
Edit the markup for drop-down lists    
Pithon Kabiro committed
158
159
160
161
162
163 
                          <select
                            id="drop-down--bldg-data-point"
                            multiple
                            size="5"
                          >
                            <!-- Note: The values of the option elements have to be unique  -->
Pithon Kabiro's avatar
New function: callback function that draws chart    
Pithon Kabiro committed
164
165
166 
                            <optgroup label="Other">
                              <option>Außentemp</option>
                            </optgroup>
Pithon Kabiro's avatar
Edit the markup for drop-down lists    
Pithon Kabiro committed
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201 
                            <optgroup label="Bau 101">
                              <option>101/VL</option>
                              <option>101/RL</option>
                              <option>101/dT</option>
                            </optgroup>
                            <optgroup label="Bau 102">
                              <option>102/VL</option>
                              <option>102/RL</option>
                              <option>102/dT</option>
                            </optgroup>
                            <optgroup label="Bau 107">
                              <option>107/VL</option>
                              <option>107/RL</option>
                              <option>107/dT</option>
                            </optgroup>
                            <optgroup label="Bau 112">
                              <option>112/VL</option>
                              <option>112/RL</option>
                              <option>112/dT</option>
                            </optgroup>
                            <optgroup label="Bau 125">
                              <option>125/VL</option>
                              <option>125/RL</option>
                              <option>125/dT</option>
                            </optgroup>
                            <optgroup label="Bau 225">
                              <option>225/VL</option>
                              <option>225/RL</option>
                              <option>225/dT</option>
                              <option>225/Durchfluss</option>
                              <option>225/Leistung</option>
                              <option>225/Energie</option>
                              <option>225/Energie_VERBR</option>
                            </optgroup>
                          </select>
Pithon Kabiro's avatar
Add a building dropdown list    
Pithon Kabiro committed
202
203 
                        </div>
                      </div>
Pithon Kabiro's avatar
Add a chart type dropdown list    
Pithon Kabiro committed
204 
                      <br />
Pithon Kabiro's avatar
Edit the markup for drop-down lists    
Pithon Kabiro committed
205
206
207
208 
                      <div id="drop-down--aggregation-type-parent">
                        <span
                          ><strong>Aggregation (Type, Duration)</strong></span
                        >
Pithon Kabiro's avatar
Add a building dropdown list    
Pithon Kabiro committed
209 
                        <div class="nowrap">
Pithon Kabiro's avatar
Make further edits to markup for drop-down lists    
Pithon Kabiro committed
210
211
212
213 
                          <!-- We need the `multiple` attribute for the dropdowns even if 
                          we do not need to support multiple selections. This seems to 
                          be a quirk of the `vanillaSelectBox` library -->
                          <select id="drop-down--aggregation-type" multiple>
Pithon Kabiro's avatar
Edit the markup for drop-down lists    
Pithon Kabiro committed
214
215
216
217
218
219
220
221
222
223 
                            <option>None (raw data)</option>
                            <option>Sum/Daily</option>
                            <option>Sum/Monthly</option>
                            <option>Maximum/Daily</option>
                            <option>Maximum/Monthly</option>
                            <option>Minimum/Daily</option>
                            <option>Minimum/Monthly</option>
                            <option>Average/Daily</option>
                            <option>Average/Monthly</option>
                          </select>
Pithon Kabiro's avatar
Add a building dropdown list    
Pithon Kabiro committed
224 
                        </div>
Pithon Kabiro's avatar
Add basic list with sensor names    
Pithon Kabiro committed
225 
                      </div>
Pithon Kabiro's avatar
Add a chart type dropdown list    
Pithon Kabiro committed
226 
                      <br />
Pithon Kabiro's avatar
Remove hardcoded drop down `<option>` elements    
Pithon Kabiro committed
227
228
229 
                      <div id="drop-down--sampling-rate-parent">
                        <span><strong>Sampling rate</strong></span>
                        <div class="nowrap">
Pithon Kabiro's avatar
Make further edits to markup for drop-down lists    
Pithon Kabiro committed
230
231
232
233 
                          <!-- We need the `multiple` attribute for the dropdowns even if 
                          we do not need to support multiple selections. This seems to 
                          be a quirk of the `vanillaSelectBox` library -->
                          <select id="drop-down--sampling-rate" multiple>
Pithon Kabiro's avatar
Edit the markup for drop-down lists    
Pithon Kabiro committed
234
235
236 
                            <option>15 min</option>
                            <option>60 min</option>
                          </select>
Pithon Kabiro's avatar
Remove hardcoded drop down `<option>` elements    
Pithon Kabiro committed
237
238 
                        </div>
                      </div>
Pithon Kabiro's avatar
Add a chart type dropdown list    
Pithon Kabiro committed
239 
                      <br />
Pithon Kabiro's avatar
Edit the markup for drop-down lists    
Pithon Kabiro committed
240 
                      <button id="btn-draw-chart">Draw Chart</button>
Pithon Kabiro's avatar
Add basic list with sensor names    
Pithon Kabiro committed
241
242
243
244
245
246
247
248
249
250
251
252
253 
                      <!-- <span><strong>Display Options</strong></span>
                      <div class="nowrap">
                        <input id="shadows" type="checkbox" />
                        <label for="shadows">Shadows</label>
                      </div>

                      <div class="nowrap">
                        <input id="neighborhoods" type="checkbox" checked />
                        <label for="neighborhoods">Neighborhoods</label>
                      </div>
                      <br /> -->
                    </div>
                    <div id="cesiumGlobeContainer"></div>
Pithon Kabiro's avatar
Add HTML and CSS for a loading indicator    
Pithon Kabiro committed
254
255
256
257 
                    <!-- This div is empty; we use it for the loading indicator -->
                    <div id="loadingIndicator" class="cover">
                      <div id="loadingIcon" class="loadingIndicator"></div>
                    </div>
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
258
259
260
261
262
263
264
265
266 
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-xl-6">
                <div class="card mb-4">
                  <div class="card-header">
                    <i class="fas fa-chart-line mr-1"></i>
Pithon Kabiro's avatar
Make further edits to markup for drop-down lists    
Pithon Kabiro committed
267 
                    Line Chart
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
268
269 
                  </div>
                  <div class="card-body">
Pithon Kabiro's avatar
Change heatmap chart, use Highcharts lib; edit HTML <div> element names    
Pithon Kabiro committed
270 
                    <div id="chart-line" width="100%" height="40"></div>
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
271
272
273
274
275
276
277 
                  </div>
                </div>
              </div>
              <div class="col-xl-6">
                <div class="card mb-4">
                  <div class="card-header">
                    <i class="fas fa-chart-area mr-1"></i>
Pithon Kabiro's avatar
Make further edits to markup for drop-down lists    
Pithon Kabiro committed
278 
                    Heatmap
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
279
280 
                  </div>
                  <div class="card-body">
Pithon Kabiro's avatar
Change heatmap chart, use Highcharts lib; edit HTML <div> element names    
Pithon Kabiro committed
281 
                    <div id="chart-heatmap" width="100%" height="40"></div>
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
282
283
284
285 
                  </div>
                </div>
              </div>
            </div>
Pithon Kabiro's avatar
Add HTML for scatter plot and bar chart    
Pithon Kabiro committed
286
287
288
289
290
291 
            <div class="row">
              <div class="col-xl-6">
                <div class="card mb-4">
                  <div class="card-header">
                    <!-- No free scatter plot icon available; use this instead -->
                    <i class="fas fa-braille mr-1"></i>
Pithon Kabiro's avatar
Make further edits to markup for drop-down lists    
Pithon Kabiro committed
292 
                    Scatter Plot
Pithon Kabiro's avatar
Add HTML for scatter plot and bar chart    
Pithon Kabiro committed
293
294
295
296
297
298
299
300
301
302 
                  </div>
                  <div class="card-body">
                    <div id="chart-scatter-plot" width="100%" height="40"></div>
                  </div>
                </div>
              </div>
              <div class="col-xl-6">
                <div class="card mb-4">
                  <div class="card-header">
                    <i class="far fa-chart-bar mr-1"></i>
Pithon Kabiro's avatar
Make further edits to markup for drop-down lists    
Pithon Kabiro committed
303 
                    Column Chart
Pithon Kabiro's avatar
Add HTML for scatter plot and bar chart    
Pithon Kabiro committed
304
305 
                  </div>
                  <div class="card-body">
Pithon Kabiro's avatar
Draw column chart    
Pithon Kabiro committed
306 
                    <div id="chart-column" width="100%" height="40"></div>
Pithon Kabiro's avatar
Add HTML for scatter plot and bar chart    
Pithon Kabiro committed
307
308
309
310 
                  </div>
                </div>
              </div>
            </div>
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
311
312
313
314
315
316
317
318
319 
          </div>
        </main>
        <footer class="py-4 bg-light mt-auto">
          <div class="container-fluid">
            <div
              class="d-flex align-items-center justify-content-between small"
            >
              <div class="text-muted">Copyright &copy; HfT Stuttgart 2021</div>
              <div>
Pithon Kabiro's avatar
Make further edits to markup for drop-down lists    
Pithon Kabiro committed
320
321
322 
                <a href="https://www.hft-stuttgart.de/impressum" target="_blank"
                  >Impressum</a
                >
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
323 
                &middot;
Pithon Kabiro's avatar
Make further edits to markup for drop-down lists    
Pithon Kabiro committed
324
325
326
327
328 
                <a
                  href="https://www.hft-stuttgart.de/datenschutz"
                  target="_blank"
                  >Datenschutz</a
                >
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
329
330
331
332
333
334 
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>
Pithon Kabiro's avatar
Initial commit  
Pithon Kabiro committed
335
336 
  </body>
</html>

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal