Improve Frontend App

*The background picture, Logo and some other features are added. *A layout is prepared so that it shall be used as template for the rest of the pages. ## Future Improvements *Make the navigation menu as multi-level responsive menu. *Make the Header sticky to top while scrolling down. Fixes #2
DIT112-V21 · Apr 14, 2021 · 8b65005 · 8b65005
1 parent 86bda94
commit 8b65005
Show file tree

Hide file tree

Showing 20 changed files with 1,320 additions and 5,559 deletions.
diff --git a/frontendApp/Drive.html b/frontendApp/Drive.html
diff --git a/frontendApp/images/8896_PIA24466_Mars_Helicopter-web.jpeg b/frontendApp/images/8896_PIA24466_Mars_Helicopter-web.jpeg
diff --git a/frontendApp/images/PIA22316.jpeg b/frontendApp/images/PIA22316.jpeg
diff --git a/frontendApp/images/cactus.jpg b/frontendApp/images/cactus.jpg
diff --git a/frontendApp/images/favicon.ico b/frontendApp/images/favicon.ico
diff --git a/...ns-drop-down-list-menu-arrow-computer-5afb9d32be3ba5.9657372715264392187792.png b/...ns-drop-down-list-menu-arrow-computer-5afb9d32be3ba5.9657372715264392187792.png
diff --git a/frontendApp/images/mars.jpeg b/frontendApp/images/mars.jpeg
diff --git a/frontendApp/images/mars2020-mast-rover-head.jpeg b/frontendApp/images/mars2020-mast-rover-head.jpeg
diff --git a/frontendApp/images/marsAnimation.gif b/frontendApp/images/marsAnimation.gif
diff --git a/frontendApp/images/picture.jpeg b/frontendApp/images/picture.jpeg
diff --git a/frontendApp/images/rover-logo.png b/frontendApp/images/rover-logo.png
diff --git a/frontendApp/index.html b/frontendApp/index.html
@@ -1,38 +1,44 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
-
-    <title>SmartRover</title>
-    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
-    <link rel="stylesheet" type = "text/css" href="style.css">
-</head>
-<body >
-    <div class = "wrapper">
-
-        <nav class="main-nav">
-            <input type="checkbox" id="check" >
-            <label for="check" class= "checkbtn">
-                <i class="fas fa-bars fa-2x"></i>
-            </label>
-            <div>
-                <img src="/images/testLogo.png" alt="">
-            </div>
-
-            <ul>
-                <li><a class= "active" href= "#">Home</a></li>
-                <li><a href= "Drive.html">Manual Control</a></li>
-                <li><a href= "#">Mission</a></li>
-                <li><a href= "#">Settings</a></li>
-            </ul>
-        </nav>
-        <section>
-
-
-        </section>
-
-    </div> <!--wrapper ends-->
-
-</body>
-</html>
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
+    <title>SmartRover - Home</title>
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+    <link rel="stylesheet" type = "text/css" href="style.css">
+</head>
+
+
+<body >
+    <div class = "wrapper">
+
+        <nav class="main-nav">
+
+            <div>
+                <img src="images/rover-logo.png" alt="SmartRover logo">
+            </div>
+            <div class="menus">
+                <input type="checkbox" id="check" >
+                <label for="check" class= "checkbtn">
+                    <i class="fas fa-bars fa-2x"></i>
+                </label>
+                <ul>
+                    <li><a class= "active" href= "#">Home</a></li>
+                    <li><a href= "manual-control.html">Manual Control</a></li>
+                    <li><a href= "#">Mission</a></li>
+                    <li><a href= "#">Settings</a></li>
+                    <li><a href="#">Help</a></li>
+                </ul>
+            </div>
+
+
+        </nav>j
+        <section>
+
+
+        </section>
+
+    </div> <!--wrapper ends-->
+
+</body>
+</html>
diff --git a/frontendApp/main.js b/frontendApp/main.js
@@ -1,30 +1,74 @@
-const { app, BrowserWindow } = require('electron')
-const path = require('path')
-
-function createWindow () {
-  const win = new BrowserWindow({
-    width: 800,
-    height: 600,
-    webPreferences: {
-      preload: path.join(__dirname, 'preload.js')
-    }
-  })
-
-  win.loadFile('index.html')
-}
-
-app.whenReady().then(() => {
-  createWindow()
-
-  app.on('activate', () => {
-    if (BrowserWindow.getAllWindows().length === 0) {
-      createWindow()
-    }
-  })
-})
-
-app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
-    app.quit()
-  }
-})
+const { app, BrowserWindow, globalShortcut } = require('electron')
+
+const path = require('path')
+
+function createWindow () {
+	const mainWindow = new BrowserWindow({
+		width: 1280,
+		height: 960,
+		icon: path.join(__dirname, 'images/favicon.ico'),
+    	webPreferences: {
+      		preload: path.join(__dirname, 'preload.js')
+    	}
+  	})
+
+	mainWindow.loadFile('index.html')
+
+	/* Global shortcut for F5 to reload window */
+	globalShortcut.register('f5', function() {
+		console.log('f5 is pressed')
+		mainWindow.reload()
+	})
+
+	globalShortcut.register('CommandOrControl+R', function() {
+		console.log('CommandOrControl+R is pressed')
+		mainWindow.reload()
+	})	
+}
+
+
+app.whenReady().then(() => {
+	createWindow()
+
+	app.on('activate', () => {
+		if (mainWindow.getAllWindows().length === 0) {
+			createWindow()
+    	}
+	})
+})
+
+app.on('window-all-closed', () => {
+	if (process.platform !== 'darwin') {
+		app.quit()
+	}
+})
+
+app.on('will-quit', () => {
+	// Unregister a shortcut.
+	globalShortcut.unregister('CommandOrControl+X')
+
+	// Unregister all shortcuts.
+	globalShortcut.unregisterAll()
+})
+
+//For header position
+// When the user scrolls the page, execute myFunction
+/*
+mainWindow.onscroll= function() {myFunction()};
+
+
+// Get the header
+const document= mainWindow.loadFile('manual-control.html')
+var header  = document.getElementById(myHeader);
+
+// Get the offset position of the navbar
+var sticky = header.offsetTop;
+
+// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
+function myFunction() {
+  if (mainWindow.pageYOffset > sticky) {
+    header.classList.add("sticky");
+  } else {
+    header.classList.remove("sticky");
+  }
+}*/