-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
197 lines (189 loc) · 11.9 KB
/
index.html
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
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
119
120
121
122
123
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
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<html>
<head>
<title>Lüftungsoptimierung</title>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="/favicons/favicon.ico">
<script>navigator.serviceWorker.register("service-worker.js")</script>
<link rel="manifest" href="manifest.json" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div style="margin-left: 1em;margin-right: 1em;">
<div class="tabs is-toggle is-fullwidth is-medium">
<ul>
<li id="1" class="is-active page-changer"><a>Vorhersage</a></li>
<li id="2" class="page-changer"><a>Training</a></li>
<li id="3" class="page-changer"><a>Einstellungen</a></li>
</ul>
</div>
<div class="notification is-info" style="display: none;" id="install-notice">
<button class="delete"></button>
<p>Sie können diese Website auch installieren und dann wie eine gewöhnliche App nutzen (auch offline).</p>
<a style="margin-top: 1em;" id="install-button1" class="button is-rounded is-dark is-small">Installieren</a>
</div>
<!-- Only show the following notice if room volume or windows size is not defined -->
<div class="notification is-danger is-light" style="display: none;" id="welcome-notice">
<button class="delete"></button>
Sie haben noch kein Raumvolumen bzw. Fenstergröße festgelegt. <strong>Diese Daten werden für das Modell
benötigt</strong>. Bitte fügen sie diese Informationen in den Einstellungen hinzu.
</div>
<!-- Already below 70%-->
<div class="notification is-success is-light" style="display: none;" id="already_reached">
<button class="delete"></button>
Die Luftfeuchtigkeit ist bereits <strong>unter 70%</strong>. Es besteht keine Schimmelgefahr.
</div>
<!-- model trained -->
<div class="notification is-success is-light" style="display: none;" id="model-trained">
<button class="delete"></button>
Das Modell wurde <strong>erfolgreich</strong> an die lokale Situation angepasst.
</div>
<!--No values given (humidity, temperature)-->
<div class="notification is-danger is-light" style="display: none;" id="no-values">
<button class="delete"></button>
Alle Eingaben müssen <strong>ausgefüllt</strong> sein und in <strong>validen</strong> Bereichen liegen.
</div>
<!-- No weather data-->
<div class="notification is-danger is-light" style="display: none;" id="weather-missing">
<button class="delete"></button>
Es konnten keine Wetterdaten abgerufen werden, wurden <strong>Koordinaten</strong> festgelegt? Sind Sie mit dem <strong>Internet</strong> verbunden? Sie können auch <strong>eigene Wetterdaten</strong> festlegen.
</div>
<div class="section pages" id="page1">
<div class="container" style="max-width: 50em;">
<div class="field">
<div class="columns is-mobile">
<div class="control" style="margin-right: 5px;"><label><input class="input"
placeholder="Luftfeuchtigkeit" id="h0" type="number"></label></div>
<div class="control"><label><input class="input" placeholder="Temperatur" id="t0"
type="number"></label>
</div>
</div>
<div style="margin-top: 2em;" class="control"><label><input class="checkbox" type="checkbox"
id="own-weatherdata"> Eigene
Wetterdaten nutzen </label></div>
<div style="margin-top: 0.5em;" class="control"><label><input class="button" type="submit"
value="Berechnen" id="calculate-model"></label></div>
</div>
<div class="field" id="f_weather1" style="display: none;">
<h2 style="margin-bottom: 1em;" class="subtitle">Wetterdaten</h2>
<div class="columns is-mobile">
<div class="control" style="margin-right: 5px;"><label><input class="input"
placeholder="Luftfeuchtigkeit" id="h_out" type="number"></label></div>
<div class="control"><label><input class="input" placeholder="Temperatur" id="t_out"
type="number"></label></div>
</div>
</div>
<br>
<div class="box" style="max-width: 52em;"><div class="vent ct-octave"></div></div>
<p>x-Achse: Zeit in Minuten | y-Achse: relative Luftfeuchtigkeit in %</p>
<hr>
<h5 class="title is-5" id="vent_time"></h5 >
</div>
</div>
<div class="section pages" id="page2" style="display: none;">
<div class="container" style="max-width: 50em;">
<p>Bitte beachten Sie, wenn Sie die Website schließen ohne das Modell vorher zu trainieren gehen ihre
<strong>Eingaben
verloren</strong>.</p>
<p>Bitte pro Training nur <strong>ein Lüftvorgang</strong>, dann wird der erste Eintrag als h0 bzw. t0 gehandhabt</p>
<hr>
<div class="field">
<div class="control columns"><label><input class="input" style="max-width: 15em;"
placeholder="Temperatur" id="T_0" type="number"></label></div>
<hr>
<div class="columns is-mobile" id="datapoint0">
<div class="control" style="margin-right: 5px;"><label><input class="input"
placeholder="Minuten seit Start" id="t_0" type="number"></label></div>
<div class="control"><label><input class="input" placeholder="Luftfeuchtigkeit" id="h_0"
type="number"></label>
</div>
<hr>
</div>
<label style="margin-right: 5px;"><input checked="" class="checkbox" id="current_data" type="checkbox"> Aktuelle Außendaten verwenden</label>
<label><input checked="" class="checkbox" id="keep_data" type="checkbox"> Daten aus den vorherigen
Zeilen für
geringere Arbeit übernehmen</label>
</div>
<div class="field" id="f_weather2" style="display: none;">
<h2 style="margin-bottom: 1em;" class="subtitle">Wetterdaten</h2>
<div class="columns is-mobile">
<div class="control" style="margin-right: 5px;"><label><input class="input"
placeholder="Luftfeuchtigkeit" id="h_out1" type="number"></label></div>
<div class="control"><label><input class="input" placeholder="Temperatur" id="t_out1"
type="number"></label></div>
</div>
</div>
<hr>
<div class="columns is-mobile">
<p><a href="#" class="button is-rounded is-dark" id="new_datapoint_button" style="margin-right: 5px;">Neue Datenzeile</a></p>
<p><a href="#" class="button is-rounded is-dark" id="train_model">Modell trainieren</a></p>
</div>
</div>
</div>
<div class="section pages" id="page3" style="display: none;">
<div class="container" style="max-width: 50em;">
<p>Die Koordinaten können sie bspw. <strong><a href="https://www.latlong.net" target="_blank">hier</a></strong> bekommen</p>
<hr>
<div class="field">
<div class="columns is-desktop">
<div class="control" style="margin-right: 5px; margin-top: 5px;"><label><input class="input" placeholder="Fensterfläche, maximal (m²)" id="window-size"
type="number"></label>
</div>
<div class="control" style="margin-right: 5px; margin-top: 5px;"><label><input class="input" placeholder="Raumvolumen (m³)" id="room-size"
type="number"></label>
</div>
<div class="control" style="margin-right: 5px; margin-top: 5px;"><label><input class="input" placeholder="Längengrad" id="long" type="number"></label></div>
<div class="control" style="margin-right: 5px; margin-top: 5px;"><label><input class="input" placeholder="Breitengrad" id="lat" type="number"></label></div>
<div class="control" style="margin-top: 5px;"><label><input class="button" type="submit" value="Speichern" id="save-settings"></label>
</div>
</div>
</div>
<hr>
<script>
document.getElementById('window-size').value = localStorage['window-size'];
document.getElementById('room-size').value = localStorage['room-size']
document.getElementById('lat').value = localStorage['lat']
document.getElementById('long').value = localStorage['lon']
function import_settings(File) {
console.log(File);
var read = new FileReader();
read.addEventListener('load', (function(){
var json_data = JSON.parse(read.result);
for (var key in json_data) {
console.log(key);
console.log(json_data[key]);
localStorage[key] = json_data[key];
};
}))
read.readAsBinaryString(File);
}
</script>
<div class="columns is-mobile">
<!-- Settings export-restore section-->
<p style="margin-right: 5px;"><a href="#" class="button is-rounded is-dark" download="vent-export.json" id="export-button">Exportieren</a>
</p>
<label for="setting-import" class="button is-rounded is-dark">Importieren</label>
<input id="setting-import" type="file" accept=".json" style="display: none;"
onchange="const selectedFile = this.files[0];import_settings(selectedFile);">
</div>
<hr>
<div class="columns is-mobile">
<p style="margin-right: 5px;"><a style="display: none;" href="#" class="button is-rounded is-dark" id="install-button2">App installieren</a></p>
<p style="margin-right: 5px;"><a href="#" style="display: none;" class="button is-rounded is-dark" id="update-button">Update</a></p>
<p><a href="#" class="button is-rounded is-dark" id="standard-button">Standard
wiederherstellen</a>
</p>
</div>
<div class="section">
<h2 class="subtitle">Wetterdaten</h2>
<p>Daten vom "The Norwegian Meteorological Institute" lizensiert unter lizensiert unter</p>
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img
alt="Creative Commons-lisens" style="border-width:0"
src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a>
</div>
</div>
</div>
</div>
<script type="module" src="./app.js"></script>
</body>
</html>