-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhelp.html
108 lines (98 loc) · 4.39 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
<!DOCTYPE html>
<html>
<head>
<title>User Guide </title>
<style>
/* style for the container of the user guide */
.container {
margin: auto;
width: 80%;
padding: 20px;
background-color: #f2f2f2;
border-radius: 10px;
}
/* style for the step numbers */
.step-number {
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
border-radius: 50%;
background-color: blue;
color: white;
font-size: 20px;
line-height: 30px;
margin-right: 10px;
}
/* style for the image */
.screenshot {
max-width: 80%;
height: auto;
display: block;
margin: auto;
margin-top: 20px;
border: 1px solid #ccc;
box-shadow: 1px 1px 3px #ccc;
}
</style>
</head>
<body>
<div class="container">
<button onclick="window.location.href='bootStrap.html'">Return to App</button>
<h1>User Guide For Asset Creation APP</h1>
<p>Welcome! Our app allows you to easily create asset points on a map and get insights out of them easily.<br>The use
is intuitive, simply follow the steps below and you will be all prepared. </p>
<p>
Here are the steps to get started:
</p>
<ol>
<div>
<div class="step-number">1</div>
After starting the app, you will see a map with blue points representing existing asset points. If you are new
to this app, the map will be empty.
<img src="img/screenshot1.png" alt="Screenshot of map" class="screenshot">
</div>
<div>
<div class="step-number">2</div>
To view the latest condition information of an existing asset point, simply click on the blue point and a pop-up
will appear.
<img src="img/screenshot2.png" alt="Screenshot of map" class="screenshot">
</div>
<div>
<div class="step-number">3</div>
To create your own asset point, explore the map and click on the location you want. A pop-up form will appear
for you to fill in.
<img src="img/assetform.PNG" alt="Screenshot of popup" class="screenshot">
Please note that both<b> Asset Name</b> and <b>Installation Date</b> are compulsory fields. If you leave
them blank, a reminder message will pop up. Simply click on OK to close them and refill the form.
<img src="img/popup1.PNG" alt="Screenshot of popup" class="screenshot">
<img src="img/popup2.PNG" alt="Screenshot of popup" class="screenshot">
<br><b>Important: The name you choose for your asset must be unique. If the name has already been taken, a
reminder will pop up, and you'll need to choose a different name and refill the form.</b>
</li>
<div>
<div class="step-number">4</div>
Once you have successfully created an asset, you can get more insights by exploring the functions on the sidebar:
<img src="img/sidebar_menu.png" alt="Screenshot of popup" class="screenshot">
<ul>
<li>Click on <b>List of Assets in Best Condition</b> and you will see a pop-up list containing the name of assets in good condition.</li>
<li>Click on <b>Daily Reporting Rates Graph -All Users</b>, and a bar graph showing the number of reports have been submitted in total and with the worst condition values will appear in replace the map.
<li>To get back to map view, simply click on the check on the right of bar chart.</li>
<img src="img/graph.png" alt="Screenshot of popup" class="screenshot">
</li>
</ul>
</div>
<div>
<div class="step-number">5</div>
If you ever forget how to use the app, don't worry! Simply click on the dropdown menu <b>Help (User Guide)</b> in the Help Menu list on the top right of the screen, and you'll be guided back to this user guide.
<img src="img/helpmenu.png" alt="Screenshot of popup" class="screenshot">
</div>
<div>
<div class="step-number">6</div>
If you want to explore more about the asset information, click on the <b>Dashboard (Assets Visulisation)</b> menu in the Help Menu list and you'll be directed to the dashboard page, where you can explore asset information in a 3D map via clicking on the bar graph.
<img src="img/dashboard_menu.png" alt="Screenshot of popup" class="screenshot">
</div>
</ol>
</div>
</body>
</html>