-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathPNOBTB.html
275 lines (228 loc) · 16.7 KB
/
PNOBTB.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<title style="font-size: 60%;">Sylvi BTB</title>
</head>
<body style="background-color: #28282b;">
<div class="mobilemenubutton">
<div id="rcorners1" class="child" onclick="setVisible('mobile_menu')" style="width: fit-content; height: fit-content;">
<i class="material-symbols-rounded" id="" style="padding: 3px; font-size: 32px; color: aliceblue;"> menu </i>
</div>
</div>
<div id="mobile_menu" style="height: fit-content;">
<div id="rcorners1" style="width: 100%; height: fit-content; padding-bottom: 20px; background-color: #252527;">
<div>
<div class="center" id="" onclick="setInvisible('mobile_menu')" style=" width: fit-content; position: absolute; top: 10px; margin-left: 0px; user-select: none;">
<i class="material-symbols-rounded" id="navbarformat" style="color: aliceblue;"> chevron_left </i>
</div>
<div style="width: 100%; height: 100%; display: flexbox; flex-direction: column; margin-top: 55px; padding-top: 20px; text-align: center;">
<div class="m_menubutton">
<a href="index.html" class="m_menubutton" style="color: aliceblue; text-decoration: none;">
<i class="material-symbols-rounded" id="navbarformat"> Home </i>
<p style="margin: 0;"> Home </p>
</a>
</div>
<div class="m_menubutton">
<a href="about.html" style="color: aliceblue; text-decoration: none;">
<i class="material-symbols-rounded" id="navbarformat"> recent_patient </i>
<p style="margin: 0;"> Skills </p>
</a>
</div>
<div class="m_menubutton">
<a href="contact.html" class="m_menubutton" style="color: aliceblue; text-decoration: none;">
<i class="material-symbols-rounded" id="navbarformat"> contact_page </i>
<p style="margin: 0;"> Contact </p>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="leftbar">
<div>
<div id="abs_center">
<nav>
<ul>
<li><a href="index.html">
<i class="material-symbols-rounded" id="navbarformat"> Home </i>
<p id="abs_center" style="margin: 0;"> Home </p>
</a></li>
<li><a href="about.html">
<i class="material-symbols-rounded" id="navbarformat"> recent_patient </i>
<p id="abs_center" style="margin: 0;"> Skills </p>
</a></li>
<li id="abs_center"><a href="contact.html">
<i class="material-symbols-rounded" id="navbarformat"> contact_page </i>
<p id="abs_center" style="margin: 0;"> Contact </p>
</a></li>
</ul>
</nav>
</div>
</div>
</div>
<div class="socialbar" style="height: fit-content;">
<div>
<div id="abs_center" style="display: inline; flex-wrap: nowrap; flex-direction: row;">
<a href="https://github.com/NiicoNiicoDev" style="margin-right: 10px;">
<img src="images/social/githubicon.png" class="portfolioimage" alt="github" style="max-width: 32px; max-height: 32px; min-height: 32px; min-width: 32px;">
</a>
<a href="https://www.linkedin.com/in/georgewcottrell/">
<img src="images/social/linkedinIcon.png" class="portfolioimage" alt="linkedin" style=" max-width: 32px; max-height: 32px; min-height: 32px; min-width: 32px;">
</a>
</div>
</div>
</div>
<div class="rightbody" id="rightbody" style="width: 80%;">
<div class="center" style="padding-top: 40px; width:40vw; padding-left: 20px; padding-right: 20px;">
<div id="rcorners1" style="margin-bottom: 20px;">
<p id="abs_center" style="font-size:xx-large; font-weight: bolder; padding: 20px; margin: 0; text-align: center;">
Sylvi PNO
</p>
<p id="abs_center" style="font-size:small; font-weight: 100; padding: 20px; margin: 0; text-align: center;">
(All Content included in this page is accurate as of 24/03/2025)
</p>
</div>
</div>
<hr id="abs_center" style="width: 90%;">
<div class="center" style="width:40vw; padding-left: 20px; padding-right: 20px;">
<p id="abs_center" style="font-size:large; font-weight: bold; padding: 20px; margin: 0; text-align: center;">
Sylvi PNO is an screen based - image detection automation tool for the 'PokeNexus' Pokemon MMO game developed using Python.
The tool is currently in an 'early access' phase and is actively being worked on myself.
</p>
<p id="abs_center" style="font-size:large; font-weight: bold; padding: 20px; margin: 0; text-align: center;">
The application makes use of libraries such as:<br>
</p>
<ul id="abs_center" style="color:white; font-size:normal; font-weight: 600; padding: 20px; margin: 0; text-align: Left;">
<li> TKinter</li>
<li> TesseractOCR</li>
<li> OpenCV2</li>
<li> Pandas</li>
<li> Pillow</li>
<li> Google Firebase</li>
<li> PokeAPI</li>
</ul>
</div>
<hr id="abs_center" style="width: 90%;">
<div class="center" style="padding-top: 10px; width:40vw; padding-left: 20px; padding-right: 20px;">
<div id="rcorners1" style="margin-bottom: 40px;">
<p id="abs_center" style="font-size:x-large; font-weight: bolder; padding: 5px; margin: 0; text-align: center;">
Key Features
</p>
</div>
<div>
<div id="rcorners1" style="margin-bottom: 20px;">
<p id="abs_center" style="font-size:large; font-weight: bold; padding: 5px; margin: 0; text-align: center;">
Login System with Database Records
</p>
</div>
<div id="abs_center" style="display: flex; flex-direction: row;" >
<img src="images/portfolio/SylviPNO/login_screen.png" style="display: block; border-radius: 20px; margin-bottom: 20px; width:auto; height: auto; margin-right: 20px;" alt="Coming Soon">
<div style="width: 80%; min-width: 400px; max-width: 600px">
<p id="abs_center" style="font-size:large; font-weight: normal; padding: 10px; margin: 0; text-align: center; align-content: center;">
The Bot start with the user required a set of credentials to log in to the program and gain access.
The credentials are passed through some authentication logic which connects with a google firebase database the check the credentials are valid, the user has a valid amount
of access time remaining on the software and that the number of active logins using those credentials are within specified limits.
</p>
<p style="font-size:large; font-weight: normal; padding: 10px; padding-top: 20px; margin: 0; text-align: center;">
If either the credentials provided are invalid, the user has no access time remaining or the user is has exceeded the amount of simultaneous login they are allowed to have at any given time.
the software will prompt the user to contact the distributor of the software (myself) in order to correct any issues or to extended there usage time for the software.
</p>
</div>
</div>
</div>
</div>
<hr id="abs_center" style="width: 60%;">
<div class="center" style="padding-top: 10px; width:40vw; padding-left: 20px; padding-right: 20px;">
<div>
<div id="rcorners1" style="margin-bottom: 20px;">
<p id="abs_center" style="font-size:large; font-weight: bold; padding: 5px; margin: 0; text-align: center;">
Image Detection and Image Reading
</p>
</div>
<div id="abs_center">
<img src="images/portfolio/SylviPNO/PNODetection.jpg" style="display: block; border-radius: 20px; margin-bottom: 20px; width:auto; height: auto;" alt="Coming Soon">
<div style="width: 80%">
<p id="abs_center" style="font-size:large; font-weight: normal; padding: 10px; margin: 0; text-align: center; align-content: center;">
The core area of the bot is the use of Win32GUI, TesseractOCR and OpenCV2 to read in screen images in real time, detect certain sections of the screen detect a variation of
text or images to read in data for the bots operation.
</p>
<p style="font-size:large; font-weight: normal; padding: 10px; padding-top: 20px; margin: 0; text-align: center;">
Three examples of this can be seen in the screenshot above where the name of the enemy, and the enemies health and the
current turn number are all read in using Win32GUI to get the intial screen view, then OpenCV2 is used to detect the correct sections of the screen (red, blue and green boxes) to read from. Following
this TesseractOCR is then used to read the text on the screen and get the correct values using a combination of filtering and image adjustment.
</p>
</div>
</div>
</div>
</div>
<hr id="abs_center" style="width: 60%;">
<div class="center" style="padding-top: 10px; width:40vw; padding-left: 20px; padding-right: 20px;">
<div>
<div id="rcorners1" style="margin-bottom: 20px;">
<p id="abs_center" style="font-size:large; font-weight: bold; padding: 5px; margin: 0; text-align: center;">
Team Selection and File Saving System
</p>
</div>
<div id="abs_center" style="display: flex; flex-direction:unset;" >
<img src="images/portfolio/SylviPNO/team_selection.png" style="display: block; border-radius: 20px; margin-bottom: 20px; width:auto; height: auto; margin-right: 20px;" alt="Coming Soon">
<div style="width: 80%; min-width: 400px; max-width: 600px">
<p id="abs_center" style="font-size:large; font-weight: normal; padding: 10px; margin: 0; text-align: center; align-content: center;">
Once the user has logged into the software they will be presented initially with a home screen with a button containing the text 'Start'. If this button is pressed the without a team selected, the user is
prompted to move over to the 'Team' tab where they can specify their completed 'team' and respective information and values regarding that team.
</p>
<p style="font-size:large; font-weight: normal; padding: 10px; padding-top: 20px; margin: 0; text-align: center;">
The team screen consists of 2 main sections : The information selection section and the file selection menu. The information section is, as stated above,
an area for the user to select a replicated version of their 'Pokemon' team that is being used within the PokeNexus game client. This section is comprised of 6 copies of a
custom widget called 'PokemonWidget'. This widget contains a total of 5 drop down menus and 4 entry fields. These menus / fields allow the user to select a pokemon,
4 moves and enter the corresponding 'PP' values for each of the selected moves.
</p>
<p style="font-size:large; font-weight: normal; padding: 10px; padding-top: 20px; margin: 0; text-align: center;">
The other section of the team selection screen is the Team Selection drop down menu. In this menu the user can select from 2 types of options: 'Team X' or 'New'.
'Team X' is an option that will appear when a user selects the new option enters all relevant details into the information section and then hits the save button below.
A file is then generated locally that stores all of the data from the information section is CSV format. This can then be re-read in for later use.
The 'New' option, as mentioned above, is an option that allows a user to create a new team and then save this team for later use.
</p>
</div>
</div>
</div>
</div>
<hr id="abs_center" style="width: 90%;">
<div class="center" style="padding-top: 10px; width:40vw; padding-left: 20px; padding-right: 20px; margin-bottom: 60px;">
<div id="rcorners1" style="margin-bottom: 40px;">
<p id="abs_center" style="font-size:x-large; font-weight: bolder; padding: 5px; margin: 0; text-align: center;">
Learning Points
</p>
<p style="font-size:large; font-weight: normal; padding: 10px; padding-top: 20px; text-align: center;">
There are 3 main areas in which I felt like I have most improved so far in the creation of this project.
The first of these areas in the implementation and understanding of server-side authentication.
The login system for Sylvi BTB was my first experience with server-side authentication systems within software development.
Although there is still a lot for me to learn in this regard I believe I've already gained a considerably stronger understanding about not just the
implementation side of login system and authentication systems but also practices that should be used and why security regarding these systems is so important.
</p>
<p style="font-size:large; font-weight: normal; padding: 10px; padding-top: 20px; margin-bottom: 60px; text-align: center;">
The second area in which I feel i have made the largest amount of progression is in regards to testing and the importance of thorough and complete testing of applications.
Testing for Sylvi BTB was especially important given the nature of the software. With it being an automation tool, the tool is expected to be able to run in an isolated environment with
little to no interaction once initial setup is complete. This means that once the user presses the start button, there should be no crashes, errors or issues arising during the
runtime period of the software. This meant that a large volume of testing had to be conducted for each and every aspect of the software to ensure perfect functionality.
</p>
</div>
</div>
</div>
</body>
</html>
<script>
function setVisible(id) {
document.getElementById(id).style.visibility = 'visible';
document.getElementById(id).style.width = '100px'
document.getElementById('rightbody').style.opacity = '0.1'
}
function setInvisible(id) {
document.getElementById(id).style.width = '0px'
document.getElementById(id).style.visibility = 'hidden';
document.getElementById('rightbody').style.opacity = '1'
}
</script>