-
Notifications
You must be signed in to change notification settings - Fork 2
/
help.html
431 lines (420 loc) · 20.3 KB
/
help.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
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TechHaus</title>
<link rel="stylesheet" type="text/css" href="help.css"/>
<script src="js/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<nav>
<a href="home_barra.html">
<img src="Iconos/Logo4.png" alt="Home" id="logo">
</a>
<div class="dropdown" >
<img src="Iconos/Settings.png" alt="Settings" id="settings_icon" class="navbar_item">
<div id="myDropdown" class="dropdown-content" >
<a href="#help">Help</a>
</div>
</div>
<a class="navbar_item" href="routines.html">Routines</a>
<a class="navbar_item" href="rooms.html">Rooms</a>
<a class="navbar_item" href="devices.html">Devices</a>
</nav>
<aside>
<div class="leftcol">
<ul>
<li id="gs"><a href="#" onclick="showGettingStarted();">Getting started</a></li>
<li id="dv"><a href="#" onclick="showDevices();">Devices</a></li>
<li id="rm"><a href="#" onclick="showRooms();">Rooms</a></li>
<li id="rt"><a href="#" onclick="showRoutines();">Routines</a></li>
</ul>
</div>
</aside>
<div>
<img src="Iconos//Help/logo_grey.png" alt="logogris" id="logogrande" class="logo_grey">
</div>
<div class='help_cat' id="gstarted">
<div>
<div class="box">
<div class="picture">
<img src="Iconos/Help/devices.png" alt="Devices" class="help">
</div>
<div class="Messagebox_title">
<h1 >Devices
</h1>
</div>
<div class="Messagebox">
<h4 >By clicking on the "Devices" button on "Home", you can access your devices by their type, such as Alarms, Doors, ACs, Refrigerators, Lamps, Ovens or Blinds. You can also access your devices all together in the All category or access only your favorites.
</h4>
</div>
</div>
</div>
<div>
<div class="box">
<div class="picture">
<img src="Iconos/Help/rooms.png" alt="Rooms" class="help">
</div>
<div class="Messagebox_title">
<h1 >Rooms
</h1>
</div>
<div class="Messagebox">
<h4 >By clicking on the "Rooms" button on "Home", you can access your devices according to the room where they are located. In each room you will see a list of all the devices placed in that room. At first, no rooms are displayed, so you will have to add rooms to see them. If devices with no room are added, an "Ungrouped" section is added.
</h4>
</div>
</div>
</div>
<div>
<div class="box">
<div class="picture">
<img src="Iconos/Help/routines.png" alt="Routines" class="help">
</div>
<div class="Messagebox_title">
<h1 >Routines
</h1>
</div>
<div class="Messagebox">
<h4 >By clicking on the "Routines" button on "Home", you can access the routines that were created to be played, edited or deleted. You can also create new ones.
</h4>
</div>
</div>
</div>
<div>
<div class="box">
<div class="picture">
<img src="Iconos/Help/menu.png" alt="Menu" class="help">
</div>
<div class="Messagebox_title">
<h1 >Menu
</h1>
</div>
<div class="Messagebox">
<h4 >By clicking on the TechHaus logo, you will be redirected to the "Home" page.
</h4>
</div>
</div>
</div>
<div>
<div class="box">
<div class="picture">
<img src="Iconos/Help/settings.png" alt="Door" class="help">
</div>
<div class="Messagebox_title">
<h1 >Settings
</h1>
</div>
<div class="Messagebox">
<h4 >By clicking on the "Settings" button, a list is displayed where you can access the help menu.
</h4>
</div>
</div>
</div>
</div>
<div class='help_cat' id="Rooms">
<div class='room_info'>
<div class="box">
<div class="picture">
<img src="Iconos/Help/bath.png" alt="Bath" class="help">
</div>
<div class="Messagebox_title">
<h1 >Rooms
</h1>
</div>
<div class="Messagebox">
<h4 >You can access your devices organized by rooms.
</h4>
</div>
</div>
</div>
<div class='room_info'>
<div class="box">
<div class="picture">
<img src="Iconos/Help/adding_room.png" alt="Add" class="help">
</div>
<div class="Messagebox_title">
<h1 >Adding rooms
</h1>
</div>
<div class="Messagebox">
<h4 >You can add rooms by clicking on the '+' icon that appears next to "Rooms". This will display a popup to add the room information.
</h4>
</div>
</div>
</div>
<div class='delete_room'>
<div class="box">
<div class="picture">
<img src="Iconos/Help/deleteroom_help.png" alt="Del" class="help">
</div>
<div class="Messagebox_title">
<h1 >Deleting rooms
</h1>
</div>
<div class="Messagebox">
<h4 >You can delete rooms by clicking on the trashcan icon that appears if you move the mouse over it. This will display a popup to warn you that the action will delete all the devices associated with the room and ask for confirmation.
</h4>
</div>
</div>
</div>
<div class='room_info'>
<div class="box">
<div class="picture">
<img src="Iconos/Help/editing_room.png" alt="Edit" class="help">
</div>
<div class="Messagebox_title">
<h1 >Editing room name
</h1>
</div>
<div class="Messagebox">
<h4 >You can edit room names by entering the room and clicking on its name. A pencil icon will appear when you move the mouse over it. Clicking the room's name will display a box where you can type a new name. Finally, press enter to save or click outside the box.
</h4>
</div>
</div>
</div>
</div>
<div class='help_cat' id="Devices">
<div>
<div class="box">
<div class="picture">
<img src="Iconos/Help/doors_help.png" alt="Door" class="help">
</div>
<div class="Messagebox_title">
<h1 >Type of devices
</h1>
</div>
<div class="Messagebox">
<h4 >You can access your devices by categories according to the type of device. There are 8 categories: Alarms, Doors, ACs, Refrigerators, Lamps, Ovens and Blinds.
</h4>
</div>
</div>
</div>
<div>
<div class="box">
<div class="picture">
<img src="Iconos/Help/favorites_help.png" alt="Favorite" class="help">
</div>
<div class="Messagebox_title">
<h1 >Favorites
</h1>
</div>
<div class="Messagebox">
<h4 >You can access your favorite devices in this section. Your favorite devices will be those that were marked by a heart-shaped button.</h4>
</div>
</div>
</div>
<div>
<div class="box">
<div class="picture">
<img src="Iconos/Help/all.png" alt="All" class="help">
</div>
<div class="Messagebox_title">
<h1 >All
</h1>
</div>
<div class="Messagebox">
<h4 >You can access all your devices in this section regardless of the type of device or the room in which they are located.</h4>
</div>
</div>
</div>
<div class='adding_info'>
<div class="box">
<div class="picture">
<img src="Iconos/Help/addhelp.png" alt="Add" class="help">
</div>
<div class="Messagebox_title">
<h1 >Adding devices
</h1>
</div>
<div class="Messagebox">
<h4 >To add a device, you can go to its category or to the room where it will be located. Once this is done, click on the button next to the name of the section that has the '+' symbol. This will open a popup window to complete with the information of the new device.
</h4>
</div>
</div>
</div>
<div class='deleting_info'>
<div class="box">
<div class="picture">
<img src="Iconos/Help/trash_help.png" alt="Trash" class="help">
</div>
<div class="Messagebox_title">
<h1 >Deleting devices
</h1>
</div>
<div class="Messagebox">
<h4 >To remove a device, go to a section where the device appears: its room, its category, the All section or Favorites (if applicable). Then click on the trashcan icon next to it.
</h4>
</div>
</div>
</div>
<div class='markasfav'>
<div class="box">
<div class="picture">
<img src="Iconos/Help/heart_help.png" alt="Fav" class="help">
</div>
<div class="Messagebox_title">
<h1 >Marking as favorite
</h1>
</div>
<div class="Messagebox">
<h4 >To mark or unmark a device as favorite, go to a section where the device appears: its room, its category or the All section. Then color the corresponding heart icon. If you do it from the Favorites section, you will have to reload the page to see the changes.</h4>
</div>
</div>
</div>
<div class='editing_info'>
<div class="box">
<div class="picture">
<img src="Iconos/Help/editing_device.png" alt="Edit" class="help">
</div>
<div class="Messagebox_title">
<h1 >Editing devices names
</h1>
</div>
<div class="Messagebox">
<h4 >To edit a device's name, go to a section where the device appears: its room, its category or the All section or Favorites. Move the mouse over the name until a pencil icon appears. Click on the name and a box will be displayed where you can type a new name. Finally, press enter to save or click outside the box.
</h4>
</div>
</div>
</div>
<div class='changing_room'>
<div class="box">
<div class="picture">
<img src="Iconos/Help/changing_room.png" alt="Edit" class="help">
</div>
<div class="Messagebox_title">
<h1 >Changing devices names
</h1>
</div>
<div class="Messagebox">
<h4 >To change a device's room, go to the device's category. Move the mouse over the device's room until a pencil icon appears. Click on the room and a box with your existing rooms will appear. Choose the room you want to place the device in. Finally, press enter to save or click outside the box.
</h4>
</div>
</div>
</div>
<div class='status_info'>
<div class="box">
<div class="picture">
<img src="Iconos/Help/status.png" alt="Edit" class="help">
</div>
<div class="Messagebox_title">
<h1 >Devices shorcut status
</h1>
</div>
<div class="Messagebox">
<h4> You can see the status of the device using its shortcut located in the bar. In addition, you can press the icon to change its status. This is not applicable for the refrigerator, which only shows the refrigerator's temperature.
</h4>
</div>
</div>
</div>
<div class='status_info'>
<div class="box">
<div class="picture">
<img src="Iconos/Help/bar.png" alt="Edit" class="help">
</div>
<div class="Messagebox_title">
<h1>All device functionalities
</h1>
</div>
<div class="Messagebox">
<h4> You can see all the functionalities and the status of the device by pressing on the device bar. This will open a panel within the list where all its features are displayed. You can interact with each of the functionalities of the device.
</h4>
</div>
</div>
</div>
</div>
<div class='help_cat' id="Routines">
<div>
<div class="box">
<div class="picture">
<img src="Iconos/Help/routine.png" alt="Routine" class="help">
</div>
<div class="Messagebox_title">
<h1 >Play Routines
</h1>
</div>
<div class="Messagebox">
<h4 >You can play your routines by clicking on the play icon next to its name. This will display a black label on the bottom of the page warning you that the routine was played. After this, the status of the devices involved in the routine will change according to the action executed.
</h4>
</div>
</div>
</div>
<div>
<div class="box">
<div class="picture">
<img src="Iconos/Help/routines_details.png" alt="Routine" class="help">
</div>
<div class="Messagebox_title">
<h1 >Routines details
</h1>
</div>
<div class="Messagebox">
<h4>You can access the details of the routines by clicking on the bar. This expands a panel that will show the devices involved and the actions it will execute if it is played.
</h4>
</div>
</div>
</div>
<div>
<div class="box">
<div class="picture">
<img src="Iconos/Help/routine_add.png" alt="Routine" class="help">
</div>
<div class="Messagebox_title">
<h1 >Adding routines
</h1>
</div>
<div class="Messagebox">
<h4>You can add routines by clicking on the '+' icon that appears next to "Routines". This will display a popup to add the routine information.
</h4>
</div>
</div>
</div>
<div>
<div class="box">
<div class="picture">
<img src="Iconos/Help/routine_delete.png" alt="Routine" class="help">
</div>
<div class="Messagebox_title">
<h1 >Deleting routines
</h1>
</div>
<div class="Messagebox">
<h4>You can delete routines by clicking on the trashcan icon that appears in the bar. This will display a popup to confirm the action.
</h4>
</div>
</div>
</div>
<div>
<div class="box">
<div class="picture">
<img src="Iconos/Help/routine_edit.png" alt="Routine" class="help">
</div>
<div class="Messagebox_title">
<h1 >Editing routines
</h1>
</div>
<div class="Messagebox">
<h4>You can edit routines by clicking on the pencil icon that appears in the bar. This will display a popup to add one device and an action to it.
</h4>
</div>
</div>
</div>
</div>
<footer>
<div id="footer">
<p>Copyright © 2018, TechHaus. All rights reserved.</p>
</div>
</footer>
<script src="js/api.js"></script>
<script src="js/help.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<noscript>
<META HTTP-EQUIV="Refresh" CONTENT="0;URL=ShowErrorPage.html">
</noscript>
</body>
</html>