index.html 11.5 KB
Newer Older
JOE XMG's avatar
update  
JOE XMG committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IQG4iCity</title>

    <link rel="stylesheet" href="assets/css/main/app.css">
    <link rel="stylesheet" href="assets/css/main/app-dark.css">
    <link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
    <link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
    <link rel="stylesheet" href="assets/css/shared/iconly.css">
    <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 rel="stylesheet" href="assets/css/main/cesiumCustom.css">

</head>

<body>
    <div id="app">
        <div id="sidebar" class="active">
            <div class="sidebar-wrapper active">
                <div class="sidebar-header position-relative">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="logo">
                            <a href="index.html"><img src="img/iCity.jpg" alt="Logo" srcset=""
                                    style="height: 1.5em;"></a>
                        </div>
                        <div class="theme-toggle d-flex gap-2  align-items-center mt-2">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20"
                                height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21">
                                <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round"
                                    stroke-linejoin="round">
                                    <path
                                        d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2"
                                        opacity=".3"></path>
                                    <g transform="translate(-210 -1)">
                                        <path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path>
                                        <circle cx="220.5" cy="11.5" r="4"></circle>
                                        <path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2">
                                        </path>
                                    </g>
                                </g>
                            </svg>
                            <div class="form-check form-switch fs-6">
                                <input class="form-check-input  me-0" type="checkbox" id="toggle-dark">
                                <label class="form-check-label"></label>
                            </div>
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20"
                                preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
                                <path fill="currentColor"
                                    d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z">
                                </path>
                            </svg>
                        </div>
                        <div class="sidebar-toggler  x">
                            <a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
                        </div>
                    </div>
                </div>
                <div class="sidebar-menu">
                    <ul class="menu">
                        <li class="sidebar-title">Menu</li>

                        <li class="sidebar-item active ">
                            <a href="index.html" class='sidebar-link'>
                                <i class="bi bi-grid-fill"></i>
                                <span>Dashboard</span>
                            </a>
                        </li>

                        <li class="sidebar-item  ">
                            <a href="sensors.html" class='sidebar-link'>
                                <i class="bi bi-router"></i>
                                <span>Utility Sensors</span>
                            </a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
        <div id="main">
            <header class="mb-3">
                <a href="#" class="burger-btn d-block d-xl-none">
                    <i class="bi bi-justify fs-3"></i>
                </a>
            </header>

            <div class="page-heading">
JOE XMG's avatar
JOE XMG committed
94
95
                <h3>3D Urban Data Platform Application</h3>
                <h5>Munakata City</h5>
JOE XMG's avatar
update  
JOE XMG committed
96
97
98
99
100
101
102
103
104
105
106
            </div>
            <div class="page-content">
                <section class="row">
                    <div class="col-12 col-lg-9">
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h4><i class="bi bi-globe2"></i> 3D Viewer</h4>
                                    </div>
                                    <div id="cesiumContainer" style="
JOE XMG's avatar
update    
JOE XMG committed
107
                                        height: 600px;
JOE XMG's avatar
update  
JOE XMG committed
108
109
110
111
112
113
114
115
116
117
                                        width: 100%;
                                        margin: 0;
                                        padding: 0;
                                    "></div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                    <div class="col-12 col-lg-3">
JOE XMG's avatar
update    
JOE XMG committed
118
                        <div class="card" style="height: 680px">
JOE XMG's avatar
update  
JOE XMG committed
119
120
121
122
123
                            <div class="card-header">
                                <h4>3D Map Tool</h4>
                            </div>
                            <div class="card-content pb-4">
                                <div class="card-body">
JOE XMG's avatar
update    
JOE XMG committed
124
                                    <h6>Layers</h6>
JOE XMG's avatar
update  
JOE XMG committed
125
                                    <div class="form-check">
JOE XMG's avatar
update    
JOE XMG committed
126
127
128
                                        <input class="form-check-input" type="checkbox" value="" id="3d_building_checkbox" checked>
                                        <label class="form-check-label" for="3d_building_checkbox">
                                            3D Building Models
JOE XMG's avatar
update  
JOE XMG committed
129
130
131
132
133
134
135
136
                                        </label>
                                    </div>
                                    <hr>
                                    <h6>Building Style</h6>
    
                                    <select class="form-select" id="BuildingStyleSelector">
                                        <option value="AllWhite" selected>Default</option>
                                        <option value="transparent">Transparent</option>
JOE XMG's avatar
update    
JOE XMG committed
137
                                        <option value="height">Building Height</option>
JOE XMG's avatar
update    
JOE XMG committed
138
139
140
                                        <option value="specific_heatdemand">Specific Space Heating Demand</option>
                                        <option value="PVSpecificYield">PV Specific Yield</option>
                                        <option value="PVPotential">PV Potential</option>
JOE XMG's avatar
update    
JOE XMG committed
141
142
                                        <!-- <option value="PVPotential">PV Potential</option>
                                        <option value="PVSpecificYield">PV Specific Yield</option> -->
JOE XMG's avatar
update  
JOE XMG committed
143
144
145
146
147
148
149
                                    </select>
                                    <div class="form-check pt-2">
                                        <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
150
151
152
                                    <div class="pt-2 cesiumLegend" id="specific_heatdemand-legend" style="display:none"></div>
                                    <div class="pt-2 cesiumLegend" id="PVPotential-legend" style="display:none"></div>
                                    <div class="pt-2 cesiumLegend" id="PVSpecificYield-legend" style="display:none"></div>
JOE XMG's avatar
update  
JOE XMG committed
153
154
155
156
157
158
159
160
161
162
163
164
165
166
                                    
                                    <hr>
                                </div>
                                
                            </div>
                        </div>
                    
                    </div>
                </section>
                <section class="row">
                    
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
JOE XMG's avatar
update    
JOE XMG committed
167
                                    <!-- <h4><i class="bi bi-graph-up"></i> Sensor</h4> -->
JOE XMG's avatar
update  
JOE XMG committed
168
169
170
171
                                    
                                </div>
                                <div class="card-body">
                                    <div id="attribute-table-area">
JOE XMG's avatar
update    
JOE XMG committed
172
                                        <p> Click on the 3D Building to show attributes.</p>
JOE XMG's avatar
update  
JOE XMG committed
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
                                    </div>
                                    <div id="chart_area"></div>
                                </div>
                            </div>
                        </div>
                    
                </section>
            </div>

            <footer>
                <div class="footer clearfix mb-0 text-muted">
                    <div class="float-start">
                        <p>2022 &copy; by <a href="https://www.hft-stuttgart.de/p/thunyathep-santhanavanich">Joe T.S. @HFT Stuttgart</a> </p>
                    </div>
                </div>
            </footer>
        </div>
    </div>

    <!-- Joe's Application -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
JOE XMG's avatar
update    
JOE XMG committed
194
195
196
    <!-- <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.js"></script>
    
JOE XMG's avatar
update  
JOE XMG committed
197
198
199
200
201
202
203
204
    <!-- <script src="../application/js/drawchart.js"></script>
    <script src="../application/js/utility_point_data.js"></script>
    <script src="../application/js/staconnector.js"></script>
    <script src="../application/js/cesium_00_Main.js"></script>
    <script src="../application/js/pipelo_sta.js"></script>
    <script src="../application/js/cesium_mouse_handling.js"></script> -->

    <!-- theme template -->
JOE XMG's avatar
update    
JOE XMG committed
205
206
207
208
    <!-- <script src="assets/js/app.js"></script> -->
    <script src="assets/js/app-min.js"></script>
    <!-- <script src="assets/js/cesium_00_Main.js"></script> -->
    <!-- <script src="assets/js/cesium_01_mouse.js"></script> -->
JOE XMG's avatar
update  
JOE XMG committed
209
210
211
212

</body>

</html>