Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 13.8 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
12 
    <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="" />
    <title>Dashboard - iCity Bosch</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
Initial commit  
Pithon Kabiro committed
72 
  </head>
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
73
74
75
76
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 
  <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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132 
                  <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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147 
                      <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
148
149 
                      <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
150 
                        <div class="nowrap">
Pithon Kabiro's avatar
Edit the markup for drop-down lists    
Pithon Kabiro committed
151
152
153
154
155
156 
                          <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
157
158
159 
                            <optgroup label="Other">
                              <option>Außentemp</option>
                            </optgroup>
Pithon Kabiro's avatar
Edit the markup for drop-down lists    
Pithon Kabiro committed
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
185
186
187
188
189
190
191
192
193
194 
                            <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
195
196 
                        </div>
                      </div>
Pithon Kabiro's avatar
Add a chart type dropdown list    
Pithon Kabiro committed
197 
                      <br />
Pithon Kabiro's avatar
Edit the markup for drop-down lists    
Pithon Kabiro committed
198
199
200
201 
                      <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
202 
                        <div class="nowrap">
Pithon Kabiro's avatar
Make further edits to markup for drop-down lists    
Pithon Kabiro committed
203
204
205
206 
                          <!-- 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
207
208
209
210
211
212
213
214
215
216 
                            <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
217 
                        </div>
Pithon Kabiro's avatar
Add basic list with sensor names    
Pithon Kabiro committed
218 
                      </div>
Pithon Kabiro's avatar
Add a chart type dropdown list    
Pithon Kabiro committed
219 
                      <br />
Pithon Kabiro's avatar
Remove hardcoded drop down `<option>` elements    
Pithon Kabiro committed
220
221
222 
                      <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
223
224
225
226 
                          <!-- 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
227
228
229 
                            <option>15 min</option>
                            <option>60 min</option>
                          </select>
Pithon Kabiro's avatar
Remove hardcoded drop down `<option>` elements    
Pithon Kabiro committed
230
231 
                        </div>
                      </div>
Pithon Kabiro's avatar
Add a chart type dropdown list    
Pithon Kabiro committed
232 
                      <br />
Pithon Kabiro's avatar
Edit the markup for drop-down lists    
Pithon Kabiro committed
233 
                      <button id="btn-draw-chart">Draw Chart</button>
Pithon Kabiro's avatar
Add basic list with sensor names    
Pithon Kabiro committed
234
235
236
237
238
239
240
241
242
243
244
245
246 
                      <!-- <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
247
248
249
250 
                    <!-- 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
251
252
253
254
255
256
257
258
259 
                  </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
260 
                    Line Chart
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
261
262 
                  </div>
                  <div class="card-body">
Pithon Kabiro's avatar
Change heatmap chart, use Highcharts lib; edit HTML <div> element names    
Pithon Kabiro committed
263 
                    <div id="chart-line" width="100%" height="40"></div>
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
264
265
266
267
268
269
270 
                  </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
271 
                    Heatmap
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
272
273 
                  </div>
                  <div class="card-body">
Pithon Kabiro's avatar
Change heatmap chart, use Highcharts lib; edit HTML <div> element names    
Pithon Kabiro committed
274 
                    <div id="chart-heatmap" width="100%" height="40"></div>
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
275
276
277
278 
                  </div>
                </div>
              </div>
            </div>
Pithon Kabiro's avatar
Add HTML for scatter plot and bar chart    
Pithon Kabiro committed
279
280
281
282
283
284 
            <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
285 
                    Scatter Plot
Pithon Kabiro's avatar
Add HTML for scatter plot and bar chart    
Pithon Kabiro committed
286
287
288
289
290
291
292
293
294
295 
                  </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
296 
                    Column Chart
Pithon Kabiro's avatar
Add HTML for scatter plot and bar chart    
Pithon Kabiro committed
297
298 
                  </div>
                  <div class="card-body">
Pithon Kabiro's avatar
Draw column chart    
Pithon Kabiro committed
299 
                    <div id="chart-column" width="100%" height="40"></div>
Pithon Kabiro's avatar
Add HTML for scatter plot and bar chart    
Pithon Kabiro committed
300
301
302
303 
                  </div>
                </div>
              </div>
            </div>
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
304
305
306
307
308
309
310
311
312 
          </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
313
314
315 
                <a href="https://www.hft-stuttgart.de/impressum" target="_blank"
                  >Impressum</a
                >
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
316 
                &middot;
Pithon Kabiro's avatar
Make further edits to markup for drop-down lists    
Pithon Kabiro committed
317
318
319
320
321 
                <a
                  href="https://www.hft-stuttgart.de/datenschutz"
                  target="_blank"
                  >Datenschutz</a
                >
Pithon Kabiro's avatar
Add heatmap chart    
Pithon Kabiro committed
322
323
324
325
326
327 
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>
Pithon Kabiro's avatar
Initial commit  
Pithon Kabiro committed
328
329 
  </body>
</html>

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