Improve Frontend App

##Current features *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 *The navigation menu on the manual control page is not responsive to the size of the window. But we will fix it while working on the relative user story. *I tried to make the Header on the manual control page to be sticky to top while scrolling. But, it needs some java script. So, that is in our todo list. Fixes #2
DIT112-V21 · Apr 14, 2021 · 464b9d2 · 464b9d2
1 parent 86bda94
commit 464b9d2
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");
+  }
+}*/