refactor<tel>

MWLCDev · Aug 22, 2024 · ea9c917 · ea9c917
1 parent f116e3c
commit ea9c917
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 81 deletions.
diff --git a/teleop/htm/static/CSS/style.css b/teleop/htm/static/CSS/style.css
@@ -315,7 +315,6 @@ body {
 .right_section button {
   cursor: pointer;
   border: none;
-  border-radius: 4px;
 }
 
 .hidden {

diff --git a/teleop/htm/static/JS/Index/index_c_screen.js b/teleop/htm/static/JS/Index/index_c_screen.js
@@ -1,6 +1,6 @@
 import CTRL_STAT from '../mobileController/mobileController_z_state.js'; // Stands for control state
 
-import { dev_tools, page_utils } from './index_a_utils.js';
+import { dev_tools, isMobileDevice, page_utils } from './index_a_utils.js';
 import { gamepad_controller } from './index_b_gamepad.js';
 import { gamepad_socket } from './index_e_teleop.js';
 
@@ -544,17 +544,12 @@ export var teleop_screen = {
 			el_inf_speed_val.text(message.max_speed.toFixed(1));
 			el_inf_speed_label.text('MAX');
 			this._render_distance_indicators();
-      $('#mobile_controller_container .current_mode_button').text('stop');
-      $('#mobile_controller_container .current_mode_button').css('background-color', '#f41e52');
-      $('#mobile_controller_container .current_mode_button').css('border', 'none');
+      this.control_current_mode_btn_mc(true)
 		} else {
 			el_inf_speed.hide();
 			el_autopilot_status.text('00:00:00');
 			el_autopilot_status.hide();
-      $('#mobile_controller_container .current_mode_button').text('start');
-      $('#mobile_controller_container .current_mode_button').css('background-color', '#451c58');
-      $('#mobile_controller_container .current_mode_button').css('color', 'white');
-      $('#mobile_controller_container .current_mode_button').css('box-shadow', 'none');
+      this.control_current_mode_btn_mc(false)
 		}
 		if (message._is_on_autopilot && message.ctl_activation > 0) {
 			// Convert the time from milliseconds to seconds.
@@ -577,7 +572,20 @@ export var teleop_screen = {
 			el_steering_wheel.css('transform', 'rotate(' + display_rotation + 'deg)');
 		}
 	},
-
+	control_current_mode_btn_mc: function (active) {
+		if (CTRL_STAT.currentPage == 'autopilot_link') {
+			if (active) {
+				$('#mobile_controller_container .current_mode_button').text('stop');
+				$('#mobile_controller_container .current_mode_button').css('background-color', '#f41e52');
+				$('#mobile_controller_container .current_mode_button').css('border', 'none');
+			} else {
+				$('#mobile_controller_container .current_mode_button').text('start');
+				$('#mobile_controller_container .current_mode_button').css('background-color', '#451c58');
+				$('#mobile_controller_container .current_mode_button').css('color', 'white');
+				$('#mobile_controller_container .current_mode_button').css('box-shadow', 'none');
+			}
+		}
+	},
 	_on_camera_selection: function () {
 		const _active = this.active_camera;
 		const _selected = this.selected_camera;

diff --git a/teleop/htm/static/JS/Index/index_e_teleop.js b/teleop/htm/static/JS/Index/index_e_teleop.js
@@ -84,6 +84,7 @@ class MovementCommandSocket {
 		const modeSwitchingPages = ['ai_training_link', 'autopilot_link', 'map_recognition_link', 'follow_link'];
 		var current_page = localStorage.getItem('user.menu.screen');
 		if (isMobileDevice() || modeSwitchingPages.includes(current_page)) {
+      console.log(CTRL_STAT.mobileCommandJSON)
 			this._send(CTRL_STAT.mobileCommandJSON);
 			teleop_screen.message_box_update();
 

diff --git a/teleop/htm/static/JS/mobileController/mobileController_b_shape_square.js b/teleop/htm/static/JS/mobileController/mobileController_b_shape_square.js
@@ -136,15 +136,17 @@ class ControlSquare {
 		fade(); // Start the fade-out animation
 	}
 
-	showOtherSquare(cmd) {
-		if (cmd) {
-			this.otherSquare.style.borderColor = 'red';
-			this.otherStopText.style.display = 'block';
-			this.otherDirectionText.style.display = 'none';
-		} else {
-			this.otherSquare.style.borderColor = '#f6f6f6';
-			this.otherStopText.style.display = 'none';
-			this.otherDirectionText.style.display = 'block';
+	showOtherSquare(show) {
+		if (CTRL_STAT.currentPage !== 'ai_training_link') {
+			if (show) {
+				this.otherSquare.style.borderColor = 'red';
+				this.otherStopText.style.display = 'block';
+				this.otherDirectionText.style.display = 'none';
+			} else {
+				this.otherSquare.style.borderColor = '#f6f6f6';
+				this.otherStopText.style.display = 'none';
+				this.otherDirectionText.style.display = 'block';
+			}
 		}
 	}
 

diff --git a/teleop/htm/static/JS/mobileController/mobileController_f_auto_navigation.js b/teleop/htm/static/JS/mobileController/mobileController_f_auto_navigation.js
@@ -20,20 +20,19 @@ class AutoNavigationHandler {
 		$('#mobile_controller_container .current_mode_button').css('background-color', '#451c58');
 		$('#mobile_controller_container .current_mode_button').css('color', 'white');
 		$('#mobile_controller_container .current_mode_button').css('box-shadow', 'none');
-
+		this.bindButtonAction();
+	}
+	bindButtonAction() {
 		$('#mobile_controller_container .current_mode_button').click((event) => {
-      const buttonText = $(event.target).text().toLowerCase();
-      console.log('clicked');
-      console.log(CTRL_STAT.currentPage, buttonText);
-      if (CTRL_STAT.currentPage === 'autopilot_link' && buttonText === 'start') {
-          console.log('Start');
-          this.startAutoNavigation();
-      }
-      if (CTRL_STAT.currentPage === 'autopilot_link' && buttonText === 'stop') {
-          this.stopAutoNavigation();
-      }
-  });
-
+			const buttonText = $(event.target).text().toLowerCase();
+			if (CTRL_STAT.currentPage === 'autopilot_link' && buttonText === 'start') {
+				console.log('Start');
+				this.startAutoNavigation();
+			}
+			if (CTRL_STAT.currentPage === 'autopilot_link' && buttonText === 'stop') {
+				this.stopAutoNavigation();
+			}
+		});
 
 		document.querySelectorAll('.control_symbol').forEach((item) => {
 			item.addEventListener('touchstart', (event) => {
@@ -47,7 +46,6 @@ class AutoNavigationHandler {
 			});
 		});
 	}
-
 	startAutoNavigation() {
 		addDataToMobileCommand({ button_y: 1 });
 	}

diff --git a/teleop/htm/static/JS/mobileController/mobileController_f_following.js b/teleop/htm/static/JS/mobileController/mobileController_f_following.js
@@ -7,30 +7,32 @@ class FollowingHandler {
 		this.initialSetup();
 		this.startPolling();
 	}
-
-  initializeDOM() {
-    // $("#mobile_controller_container .current_mode_state").text('Loading...')
-    $('#mobile_controller_container .current_mode_button').show();
-    $('#mobile_controller_container .current_mode_button').text('start following');
-    $('#mobile_controller_container .middle_section').hide();
-    $('#mobile_controller_container .square').hide();
-
-    this.sendSwitchFollowingRequest('show_image');
-
-    $('#mobile_controller_container .current_mode_button').click(() => {
-      if (CTRL_STAT.followingState === 'inactive') {
-        this.sendSwitchFollowingRequest('show_image');
-      } else if (CTRL_STAT.followingState === 'image') {
-        this.sendSwitchFollowingRequest('start_following');
-      } else if (CTRL_STAT.followingState === 'active') {
-        this.sendSwitchFollowingRequest('show_image');
-      }
-    });
-
-    // It should send the stopping command `sendSwitchFollowingRequest("stop_following")` when I switch the pages
-    this.initializeCanvas();
-  }
-
+
+	initializeDOM() {
+		// $("#mobile_controller_container .current_mode_state").text('Loading...')
+		$('#mobile_controller_container .current_mode_button').show();
+		$('#mobile_controller_container .current_mode_button').text('start following');
+		$('#mobile_controller_container .middle_section').hide();
+		$('#mobile_controller_container .square').hide();
+
+		this.sendSwitchFollowingRequest('show_image');
+
+		this.bindButtonAction();
+		// It should send the stopping command `sendSwitchFollowingRequest("stop_following")` when I switch the pages
+		this.initializeCanvas();
+	}
+	bindButtonAction() {
+		$('#mobile_controller_container .current_mode_button').click(() => {
+			if (CTRL_STAT.followingState === 'inactive') {
+				this.sendSwitchFollowingRequest('show_image');
+			} else if (CTRL_STAT.followingState === 'image') {
+				this.sendSwitchFollowingRequest('start_following');
+			} else if (CTRL_STAT.followingState === 'active') {
+				this.sendSwitchFollowingRequest('show_image');
+			}
+		});
+	}
+
 	initializeCanvas() {
 		this.canvas = document.getElementById('following_imageCanvas');
 		if (this.canvas) {

diff --git a/teleop/htm/static/JS/mobileController/mobileController_f_maneuver_training.js b/teleop/htm/static/JS/mobileController/mobileController_f_maneuver_training.js
@@ -4,30 +4,35 @@ import CTRL_STAT from './mobileController_z_state.js';
 class ManeuverTrainingHandler {
 	constructor() {}
 
-
-  initializeDOM() {
-    //TODO: it should hide the canvas but keep the squares visible
-    $('#mobile_controller_container .steeringWheel').hide();
-    $("#mobile_controller_container #backward_square").children().hide();
-
-    $('#mobile_controller_container .current_mode_button').show();
-    $('#mobile_controller_container .current_mode_button').text('start');
-    $('#mobile_controller_container .current_mode_button').css('background-color', '#451c58');
-    $('#mobile_controller_container .current_mode_button').css('color', 'white');
-    $('#mobile_controller_container .current_mode_button').css('box-shadow', 'none');
-    $('#mobile_controller_container #backward_square').addClass('maneuver_square');
-
-    $('#mobile_controller_container .current_mode_button').click(() => {
-      const buttonText = $(this).text().toLowerCase();
-      if (CTRL_STAT.currentPage === 'ai_training_link' && buttonText === 'start') {
-        this.startTraining();
-      }
-      if (CTRL_STAT.currentPage === 'ai_training_link' && buttonText === 'stop') {
-        this.stopTraining();
-      }
-    });
-  }
-
+	initializeDOM() {
+		//TODO: it should hide the canvas but keep the squares visible
+		$('#mobile_controller_container .steeringWheel').hide();
+		$('#mobile_controller_container #backward_square').children().hide();
+		$('.control_symbol').css('display', 'none');
+		$('#mobile_controller_container #backward_square .trail_canvas').hide();
+
+		$('#mobile_controller_container #forward_square .square_text').text('forward');
+
+		$('#mobile_controller_container .current_mode_button').show();
+		$('#mobile_controller_container .current_mode_button').text('start');
+		$('#mobile_controller_container .current_mode_button').css('background-color', '#451c58');
+		$('#mobile_controller_container .current_mode_button').css('color', 'white');
+		$('#mobile_controller_container .current_mode_button').css('box-shadow', 'none');
+		$('#mobile_controller_container #backward_square').addClass('maneuver_square');
+
+		this.bindButtonAction();
+	}
+	bindButtonAction() {
+		$('#mobile_controller_container .current_mode_button').click((event) => {
+			const buttonText = $(event.target).text().toLowerCase();
+			if (CTRL_STAT.currentPage === 'ai_training_link' && buttonText === 'start') {
+				this.startTraining();
+			}
+			if (CTRL_STAT.currentPage === 'ai_training_link' && buttonText === 'stop') {
+				this.stopTraining();
+			}
+		});
+	}
 
 	startTraining() {
 		addDataToMobileCommand({ button_y: 1 });