+
+ +
+
+
- Week 1 -
The first week of PFD lesson involves the objectives of undertaking real-life IT projects by making use of @@ -29,13 +44,16 @@
- Week 1 -
SGTRACETOGETHER. As a result, my team is looking forward to discuss with our lecturer to refine and solidify it. ++ Back to top +
-
+
+
+ Back to top +
-
- Week 2 -
After meeting with our lecturer, our team decided to discard our prior concept because it did not @@ -112,13 +130,16 @@
- Week 2 -
+
+ Back to top +
-
+
-
-
+
+
+ Back to top +
-
- Week 4 -
Moving onto week 4, although we were unable to obtain a GPS tracker, my team and I continued to work on @@ -196,13 +220,16 @@
- Week 4 -
- Map output from python script -
+
+ Back to top +
-
+
@@ -264,13 +291,16 @@
Firstly, the ESP32 NodeMCU with its built-in WiFi capabilities can effectively communicate with web servers and send data. In this scenario, the ESP32 will be used to collect the GPS coordinates, which will then be transmitted to a MySQL database via an HTTP POST request to the PHP Webpage. PHP, a scripting language, will handle the server-side processing of receiving the data from the ESP32, and storing it in the MySQL database. Next, a python script with multiple libraries such as matplotlib and cartopy will be used to plot out the entire route and pathway of the security guard to visualise for areas of improvements.
+
+ Back to top +
-
- Week 5 (Hackathon) -
@@ -264,13 +291,16 @@
- Week 5 (Hackathon) -
Firstly, the ESP32 NodeMCU with its built-in WiFi capabilities can effectively communicate with web servers and send data. In this scenario, the ESP32 will be used to collect the GPS coordinates, which will then be transmitted to a MySQL database via an HTTP POST request to the PHP Webpage. PHP, a scripting language, will handle the server-side processing of receiving the data from the ESP32, and storing it in the MySQL database. Next, a python script with multiple libraries such as matplotlib and cartopy will be used to plot out the entire route and pathway of the security guard to visualise for areas of improvements.
+
+ Back to top +
-
+
+ Back to top +
-
- Break weeks -
After the valuable experience and knowledge learnt about requiring the Raspberry Pi to provide date and time for the Neo M6 GPS Hat. I decided to try and fix the problems that was unresolved back in the hackathon week.
@@ -286,13 +316,16 @@
- Break weeks -
Considering the potential inaccuracy of altitude readings, I intend to enhance the precision by incorporating a barometric pressure sensor for indoor altitude measurements.
++ Back to top +
-
+
+
+ Back to top +
-
- Week 12 -
@@ -328,45 +361,57 @@- Week 12 -
- phpMyAdmin Mysql Database records -
+
+ Back to top +
-
+
-
-
+
-
-
+
diff --git a/styles.css b/styles.css
index fd9b281..8fe3c91 100644
--- a/styles.css
+++ b/styles.css
@@ -65,6 +65,100 @@ h2{
img{
border-radius: 5px;
}
+.Top_Nav{
+ text-align: center;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 10%;
+ height: 80px;
+ box-sizing: border-box;
+ position: sticky;
+ top: 0;
+ z-index: 1;
+}
+.button-nav {
+ align-items: center;
+ appearance: none;
+ background-color:white;
+ border-radius: 4px;
+ border-width: 0;
+ box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
+ box-sizing: border-box;
+ color: black;
+ cursor: pointer;
+ display: inline-flex;
+ font-family: "JetBrains Mono",monospace;
+ height: 48px;
+ justify-content: center;
+ line-height: 1;
+ list-style: none;
+ overflow: hidden;
+ padding-left: 16px;
+ padding-right: 16px;
+ position: relative;
+ text-align: left;
+ text-decoration: none;
+ transition: box-shadow .15s,transform .15s;
+ user-select: none;
+ -webkit-user-select: none;
+ touch-action: manipulation;
+ white-space: nowrap;
+ will-change: box-shadow,transform;
+ font-size: 18px;
+}
+.button-nav:focus {
+ box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
+}
+.button-nav:hover {
+box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
+transform: translateY(-2px);
+}
+.button-nav:active {
+box-shadow: #D6D6E7 0 3px 7px inset;
+transform: translateY(2px);
+}
+.button-nav-back {
+ align-items: center;
+ appearance: none;
+ background-color:black;
+ border-radius: 4px;
+ border-width: 0;
+ box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
+ box-sizing: border-box;
+ color:white;
+ cursor: pointer;
+ display: inline-flex;
+ font-family: "JetBrains Mono",monospace;
+ height: 48px;
+ justify-content: center;
+ line-height: 1;
+ list-style: none;
+ overflow: hidden;
+ padding-left: 16px;
+ padding-right: 16px;
+ position: relative;
+ text-align: left;
+ text-decoration: none;
+ transition: box-shadow .15s,transform .15s;
+ user-select: none;
+ -webkit-user-select: none;
+ touch-action: manipulation;
+ white-space: nowrap;
+ will-change: box-shadow,transform;
+ font-size: 18px;
+}
+.button-nav-back:focus {
+ box-shadow: white 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
+}
+.button-nav-back:hover {
+box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
+transform: translateY(-2px);
+}
+.button-nav-back:active {
+box-shadow: white 0 3px 7px inset;
+transform: translateY(2px);
+}
@media only screen and (max-width: 900px) {
.blog-post{
width: 80%;