refactor<tel> moved some functions and changed in the styles

teleop/htm/static/CSS/mobileController.css

@@ -128,25 +128,25 @@
 
 
 .control_symbol {
-  border: 14px solid #d0d0d0;
   box-shadow: inset 1px 1px 3px #fff;
+  display: none;
+  position: relative;
   width: 40vw;
   height: 40vw;
+  background: #fff;
+  border: 14px solid #d0d0d0;
   border-radius: 100%;
-  position: relative;
-  display: none;
   vertical-align: middle;
-  background: #fff;
 }
 
 .control_symbol:before,
 .control_symbol:after {
   content: '';
   position: absolute;
   top: 0;
+  bottom: 0;
   left: 0;
   right: 0;
-  bottom: 0;
 }
 
 
@@ -166,10 +166,10 @@
 }
 
 .control_symbol.minus:before {
-  background: #d0d0d0;
-  margin: auto 7vw;
-  height: 4vw;
   box-shadow: 0px 1px 1px #ffffff9e;
+  height: 4vw;
+  margin: auto 7vw;
+  background: #d0d0d0;
 }
 
 .control_symbol:active {

teleop/htm/static/CSS/style.css

@@ -26,10 +26,10 @@
 
 html,
 body {
+  overflow: hidden;
   height: 100%;
   margin: 0;
   padding: 0;
-  overflow: hidden;
   background-color: var(--background_color_light_mode);
   font-family: "Sora", Arial, sans-serif;
   color: var(--text_color_light_mode);
@@ -78,12 +78,11 @@ body {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  box-sizing: border-box;
   width: 100%;
+  min-height: 60px;
   padding: 10px 20px;
   border-bottom: 2px solid var(--VOR-light-color);
-  box-sizing: border-box;
-  min-height: 60px;
-  /* Adjust this value as needed */
 }
 
 #header_bar .left_section,
@@ -160,15 +159,38 @@ body {
   font-weight: 200;
 }
 
+
+
+#front_camera_framerate,
+#rear_camera_framerate,
+#inference_fps {
+  width: 2ch !important;
+}
+
+#inference_surprise,
+#inference_critic,
+#inference_brake_critic,
+#inference_obstacle,
+#inference_desired_speed {
+  width: 3ch !important;
+}
+
+#navigation_heading {
+  width: 7ch !important;
+}
+
+#navigation_match_image_distance,
+#navigation_current_command,
+#navigation_direction {
+  width: 4ch !important;
+}
+
 #debug_drive_values p span,
 #mjpeg_quality_val {
-  font-weight: bold;
   display: inline-block;
-  /* Ensures the width is respected */
   width: 3ch;
-  /* Reserves space for exactly three digits */
+  font-weight: bold;
   text-align: center;
-  /* Centers the text within the span */
 }
 
 /* Third Layer: Stream Quality and Options */
@@ -392,15 +414,15 @@ body {
 }
 
 #top_layer_iframe {
+  display: none;
   position: absolute;
+  z-index: 9999;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 9999;
-  display: none;
-  border: none;
   background-color: rgba(255, 255, 255, 0.9);
+  border: none;
 }
 
 #viewport_canvas {
@@ -457,6 +479,7 @@ body {
   align-items: center;
   gap: 10px;
   position: absolute;
+  z-index: 3;
   top: 0;
   left: 50%;
   transform: translate(-50%, 0);
@@ -465,7 +488,6 @@ body {
   background-color: rgba(0, 0, 0, 0.75);
   border-bottom-right-radius: 10px;
   border-bottom-left-radius: 10px;
-  z-index: 3;
 }
 
 #message_box_button_take_control {

teleop/htm/static/JS/Index/index_a_utils.js

@@ -10,11 +10,30 @@ jQuery.fn.is_visible = function () {
 	return this.css('visibility') == 'visible';
 };
 
-export function isMobileDevice() {
+function isMobileDevice() {
 	return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
 }
 
-export var network_utils = {
+var screen_utils = {
+	_create_image: function (url) {
+		var img = new Image(); // Make sure to declare 'img' locally
+		img.src = url;
+		return img;
+	},
+
+	_decorate_server_message: function (message) {
+		message._is_on_autopilot = message.ctl == 5;
+		message._has_passage = message.inf_total_penalty < 1;
+		if (message.geo_head == undefined) {
+			message.geo_head_text = 'n/a';
+		} else {
+			message.geo_head_text = message.geo_head.toFixed(2);
+		}
+		return message;
+	},
+};
+
+var network_utils = {
 	getSSID: async function () {
 		try {
 			const response = await fetch('/run_get_SSID');
@@ -28,7 +47,7 @@ export var network_utils = {
 };
 
 // Define the sockets that will be used for communication
-export var socket_utils = {
+var socket_utils = {
 	_init: function () {
 		// noop.
 	},
@@ -55,9 +74,8 @@ export var socket_utils = {
 	},
 };
 
-export var dev_tools = {
+var dev_tools = {
 	_develop: null,
-	_vehicle: null,
 	_image_cache: new Map(),
 
 	_random_choice: function (arr) {
@@ -97,7 +115,7 @@ export var dev_tools = {
 
 	get_img_url: function (camera_position) {
 		const _key = this.is_develop();
-		return '/develop/' + this._vehicle + '/img_' + camera_position + '_' + _key + '.jpg';
+		return '/develop/img_' + camera_position + '_' + _key + '.jpg';
 	},
 
 	get_img_blob: async function (camera_position, callback) {
@@ -133,7 +151,7 @@ export var dev_tools = {
 	},
 };
 
-export var page_utils = {
+var page_utils = {
 	_capabilities: null,
 
 	_init: function () {
@@ -181,3 +199,4 @@ export var page_utils = {
 		window.localStorage.setItem('video.stream.type', stream_type.toLowerCase());
 	},
 };
+export { screen_utils, network_utils, socket_utils, dev_tools, page_utils, isMobileDevice };

teleop/htm/static/JS/Index/index_c_screen.js

@@ -98,6 +98,7 @@ class AdvancedThemeManager {
 }
 
 class NavigationManager {
+	//Deal with the navigation bar and toggle the blur motion when the navigation bar is active
 	constructor() {
 		this.toggleBtn = document.getElementById('hamburger_menu_toggle');
 		this.nav = document.querySelector('.hamburger_menu_nav');
@@ -139,6 +140,7 @@ class NavigationManager {
 }
 
 class HelpMessageManager {
+	//Define the types of message that will show in the help menu
 	constructor() {
 		this.help_message_img = $('.message_container img');
 		this.help_message_grid = document.querySelector('.help_message_grid');
@@ -228,7 +230,6 @@ class MessageContainerManager {
 		this.helpMessageManager = helpMessageManager;
 	}
 
-	// Set up event handlers
 	initEventHandlers() {
 		try {
 			$('.toggle_help_message').click(() => {
@@ -278,33 +279,6 @@ class MessageContainerManager {
 	}
 }
 
-export function setupThemeManagers() {
-	new NavigationManager();
-	new DarkThemeManager();
-	let advancedThemeManager = new AdvancedThemeManager();
-	let helpMessageManager = new HelpMessageManager();
-	let messageContainerManager = new MessageContainerManager(helpMessageManager);
-	return { helpMessageManager, messageContainerManager, advancedThemeManager };
-}
-
-export var screen_utils = {
-	_create_image: function (url) {
-		var img = new Image(); // Make sure to declare 'img' locally
-		img.src = url;
-		return img;
-	},
-
-	_decorate_server_message: function (message) {
-		message._is_on_autopilot = message.ctl == 5;
-		message._has_passage = message.inf_total_penalty < 1;
-		if (message.geo_head == undefined) {
-			message.geo_head_text = 'n/a';
-		} else {
-			message.geo_head_text = message.geo_head.toFixed(2);
-		}
-		return message;
-	},
-};
 
 class PathRenderer {
 	// Method to render a trapezoid shape
@@ -330,11 +304,10 @@ class PathRenderer {
 	// Method to get constants based on the vehicle type
 	_getConstants() {
 		const constants = {
-			default: [400 / 640, 74 / 480, 6 / 640, 8 / 480, 0.65, 0.65, 0.8, 0.7, 80 / 640, 2 / 480],
 			rover1: [400 / 640, 120 / 480, 6 / 640, 8 / 480, 0.65, 0.65, 0.8, 0.7, 65 / 640, 2 / 480],
 		};
 
-		return constants[dev_tools._vehicle] || constants.default;
+		return constants.rover1;
 	}
 
 	// Method to render the path
@@ -345,7 +318,7 @@ class PathRenderer {
 		}
 
 		const canvas = ctx.canvas;
-		const [tzWidthFactor, tzHeightFactor, gapFactor, cutFactor, taper, heightShrink, gapShrink, cutShrink, wSteeringFactor, hSteeringFactor] = this._getConstants(); // Corrected the method call here
+		const [tzWidthFactor, tzHeightFactor, gapFactor, cutFactor, taper, heightShrink, gapShrink, cutShrink, wSteeringFactor, hSteeringFactor] = this._getConstants();
 
 		// Calculating dimensions based on canvas size
 		const tzWidth = tzWidthFactor * canvas.width;
@@ -356,7 +329,6 @@ class PathRenderer {
 		const hSteering = hSteeringFactor * canvas.height;
 
 		// Start from the middle of the base of the trapezoid.
-
 		let baseAx = canvas.width / 2 - tzWidth / 2;
 		let baseAy = canvas.height - gap;
 		let baseBx = baseAx + tzWidth;
@@ -389,7 +361,6 @@ class PathRenderer {
 
 			// Update the base coordinates for the next step
 			// The next step starts from the top of the previous with gap.
-
 			const cutShrinked = 0.5 * cut * Math.pow(cutShrink, idx);
 			const gapShrinked = gap * Math.pow(gapShrink, idx);
 

teleop/htm/static/JS/index.js

@@ -1,10 +1,9 @@
 import { dev_tools, isMobileDevice, network_utils, page_utils, socket_utils } from './Index/index_a_utils.js';
-import { setupThemeManagers } from './Index/index_c_screen.js';
+import { helpMessageManager, messageContainerManager, advancedThemeManager  } from './Index/index_c_screen.js';
 import { navigator_start_all } from './Index/index_d_navigator.js';
 import { teleop_start_all } from './Index/index_e_teleop.js';
-import { init_mjpeg } from './Index/index_video_mjpeg.js';
 import { h264_start_all, h264_stop_all } from './Index/index_video_hlp.js';
-import { mjpeg_start_all, mjpeg_stop_all } from './Index/index_video_mjpeg.js';
+import { init_mjpeg, mjpeg_start_all, mjpeg_stop_all } from './Index/index_video_mjpeg.js';
 import CTRL_STAT from './mobileController/mobileController_z_state.js'; // Stands for control state
 import { Router } from './router.js';
 
@@ -58,7 +57,6 @@ function showSSID() {
 
 $(window).on('load', () => {
 	['phone_controller_link'].forEach((id) => $(`#${id}`)[isMobileDevice() ? 'hide' : 'show']());
-	let { helpMessageManager, messageContainerManager, advancedThemeManager } = setupThemeManagers();
 	const router = new Router(helpMessageManager, messageContainerManager, advancedThemeManager, start_all_handlers);
 
 	router.handleUserMenuRoute(localStorage.getItem('user.menu.screen') || 'normal_ui_link'); // Need to have a default value for the homepage

teleop/htm/static/JS/mobileController/mobileController_c_logic.js

@@ -11,7 +11,6 @@ function setMobileCommand(x, y) {
 	} else {
 		console.error('Invalid types for setMobileCommand:', { x, y });
 	}
-	console.log(x, y);
 }
 
 function addDataToMobileCommand(newData) {

teleop/htm/static/JS/router.js

@@ -1,5 +1,5 @@
 import { isMobileDevice } from './Index/index_a_utils.js';
-import { teleop_screen } from './Index/index_c_screen.js';
+import { roverUI } from './Index/index_c_screen.js';
 import { setupMobileController } from './mobileController/mobileController_a_app.js';
 import { autoNavigationNavButtonHandler } from './mobileController/mobileController_f_auto_navigation.js';
 import { confidenceNavButtonHandler } from './mobileController/mobileController_f_confidence.js';
@@ -146,8 +146,8 @@ export class Router {
 			setupMobileController();
 		} else {
 			this.messageContainerManager.initEventHandlers();
-			teleop_screen.set_normal_ui_elements();
-			teleop_screen._init();
+			roverUI.init();
+			roverUI.setNormalUIElements();
 			this.start_all_handlers();
 		}
 	}

teleop/htm/templates/userMenu/menu_logbox.html

@@ -1,4 +1,3 @@
-
 <div id="logbox_container">
 	<h1 class="title">Training Events</h1>
 
@@ -29,8 +28,9 @@ <h1 class="title">Training Events</h1>
 					<th>Steer Intervention</th>
 					<th>Speed Intervention</th>
 					<th>Save</th>
-          <th>Latitude</th>
+					<th>Latitude</th>
 					<th>Longitude</th>
+					<!-- AP = AutoPilot -->
 					<th>AP Steer</th>
 					<th>AP Brake</th>
 					<th>AP Steer Confidence</th>