Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 13.9 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
Add heatmap chart    
Pithon Kabiro committed
68
69 
    <!--     
    Custom JS -->
Pithon Kabiro's avatar
Move the index.html file    
Pithon Kabiro committed
70
71 
    <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
72
73
74
75 

    <!--     
    Favicon -->
    <link rel="icon" href="/public/favicon.ico" />
Pithon Kabiro's avatar
Initial commit  
Pithon Kabiro committed
76 
  </head>
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
77
78
79
80
81
82
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
110
111
112
113
114
115
116
117
118 
  <body class="sb-nav-fixed">
    <nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
      <a class="navbar-brand" href="index.html">iCity Bosch Dashboard</a>
      <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">
            <h1 class="mt-4">Dashboard</h1>
            <ol class="breadcrumb mb-4">
              <li class="breadcrumb-item active">Dashboard</li>
            </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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136 
                  <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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151 
                      <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
152
153 
                      <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
154 
                        <div class="nowrap">
Pithon Kabiro's avatar
Edit the markup for drop-down lists    
Pithon Kabiro committed
155
156
157
158
159
160 
                          <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
161
162
163 
                            <optgroup label="Other">
                              <option>Außentemp</option>
                            </optgroup>
Pithon Kabiro's avatar
Edit the markup for drop-down lists    
Pithon Kabiro committed
164
165
166
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 
                            <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
199
200 
                        </div>
                      </div>
Pithon Kabiro's avatar
Add a chart type dropdown list    
Pithon Kabiro committed
201 
                      <br />
Pithon Kabiro's avatar
Edit the markup for drop-down lists    
Pithon Kabiro committed
202
203
204
205 
                      <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
206 
                        <div class="nowrap">
Pithon Kabiro's avatar
Make further edits to markup for drop-down lists    
Pithon Kabiro committed
207
208
209
210 
                          <!-- 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
211
212
213
214
215
216
217
218
219
220 
                            <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
221 
                        </div>
Pithon Kabiro's avatar
Add basic list with sensor names    
Pithon Kabiro committed
222 
                      </div>
Pithon Kabiro's avatar
Add a chart type dropdown list    
Pithon Kabiro committed
223 
                      <br />
Pithon Kabiro's avatar
Remove hardcoded drop down `<option>` elements    
Pithon Kabiro committed
224
225
226 
                      <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
227
228
229
230 
                          <!-- 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
231
232
233 
                            <option>15 min</option>
                            <option>60 min</option>
                          </select>
Pithon Kabiro's avatar
Remove hardcoded drop down `<option>` elements    
Pithon Kabiro committed
234
235 
                        </div>
                      </div>
Pithon Kabiro's avatar
Add a chart type dropdown list    
Pithon Kabiro committed
236 
                      <br />
Pithon Kabiro's avatar
Edit the markup for drop-down lists    
Pithon Kabiro committed
237 
                      <button id="btn-draw-chart">Draw Chart</button>
Pithon Kabiro's avatar
Add basic list with sensor names    
Pithon Kabiro committed
238
239
240
241
242
243
244
245
246
247
248
249
250 
                      <!-- <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
251
252
253
254 
                    <!-- 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
255
256
257
258
259
260
261
262
263 
                  </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
264 
                    Line Chart
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
265
266 
                  </div>
                  <div class="card-body">
Pithon Kabiro's avatar
Change heatmap chart, use Highcharts lib; edit HTML <div> element names    
Pithon Kabiro committed
267 
                    <div id="chart-line" width="100%" height="40"></div>
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
268
269
270
271
272
273
274 
                  </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
275 
                    Heatmap
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
276
277 
                  </div>
                  <div class="card-body">
Pithon Kabiro's avatar
Change heatmap chart, use Highcharts lib; edit HTML <div> element names    
Pithon Kabiro committed
278 
                    <div id="chart-heatmap" width="100%" height="40"></div>
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
279
280
281
282 
                  </div>
                </div>
              </div>
            </div>
Pithon Kabiro's avatar
Add HTML for scatter plot and bar chart    
Pithon Kabiro committed
283
284
285
286
287
288 
            <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
289 
                    Scatter Plot
Pithon Kabiro's avatar
Add HTML for scatter plot and bar chart    
Pithon Kabiro committed
290
291
292
293
294
295
296
297
298
299 
                  </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
300 
                    Column Chart
Pithon Kabiro's avatar
Add HTML for scatter plot and bar chart    
Pithon Kabiro committed
301
302 
                  </div>
                  <div class="card-body">
Pithon Kabiro's avatar
Draw column chart    
Pithon Kabiro committed
303 
                    <div id="chart-column" width="100%" height="40"></div>
Pithon Kabiro's avatar
Add HTML for scatter plot and bar chart    
Pithon Kabiro committed
304
305
306
307 
                  </div>
                </div>
              </div>
            </div>
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
308
309
310
311
312
313
314
315
316 
          </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
317
318
319 
                <a href="https://www.hft-stuttgart.de/impressum" target="_blank"
                  >Impressum</a
                >
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
320 
                &middot;
Pithon Kabiro's avatar
Make further edits to markup for drop-down lists    
Pithon Kabiro committed
321
322
323
324
325 
                <a
                  href="https://www.hft-stuttgart.de/datenschutz"
                  target="_blank"
                  >Datenschutz</a
                >
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
326
327
328
329
330
331 
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>
Pithon Kabiro's avatar
Initial commit  
Pithon Kabiro committed
332
333 
  </body>
</html>

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