From 7fe92f627a4b349ac261adc3da94b4b2def8a578 Mon Sep 17 00:00:00 2001 From: Ahmed Mahfouz Date: Tue, 20 Aug 2024 16:01:39 +0200 Subject: [PATCH] refactor remove debugging logs from the prev. commit and work on blur style for the helper message on how to connect a mobile controller. It is working fine now. I need to work on the visuals and what would be written inside of it --- .../htm/static/JS/Index/index_video_mjpeg.js | 4 +- teleop/htm/static/JS/index.js | 35 ++-- teleop/htm/static/JS/router.js | 153 +++++++----------- .../htm/static/JS/userMenu/menu_settings.js | 9 +- 4 files changed, 74 insertions(+), 127 deletions(-) diff --git a/teleop/htm/static/JS/Index/index_video_mjpeg.js b/teleop/htm/static/JS/Index/index_video_mjpeg.js index 52616078..28c9f39f 100644 --- a/teleop/htm/static/JS/Index/index_video_mjpeg.js +++ b/teleop/htm/static/JS/Index/index_video_mjpeg.js @@ -360,6 +360,7 @@ var mjpeg_rear_camera_consumer = function (_blob) { console.error('Error setting rear camera consumer:', error); } }; + var mjpeg_front_camera_consumer = function (_blob) { try { if (typeof _blob == 'string') { @@ -374,13 +375,10 @@ var mjpeg_front_camera_consumer = function (_blob) { }; export function mjpeg_start_all() { - console.log('MJPEG start_all called'); if (mjpeg_rear_camera != undefined) { - console.log('Starting rear camera MJPEG stream'); mjpeg_rear_camera.start_socket(); } if (mjpeg_front_camera != undefined) { - console.log('Starting front camera MJPEG stream'); mjpeg_front_camera.start_socket(); } } diff --git a/teleop/htm/static/JS/index.js b/teleop/htm/static/JS/index.js index 60ee3443..b9e1a908 100644 --- a/teleop/htm/static/JS/index.js +++ b/teleop/htm/static/JS/index.js @@ -16,42 +16,29 @@ function initComponents() { console.error('Error while initializing components:', error); } } -let handlersRunning = false; + function start_all_handlers() { - console.log('Attempting to start all handlers'); - if (!handlersRunning) { - console.log('Handlers not running, starting now'); - try { + try { + if (CTRL_STAT.currentPage == 'normal_ui_link') { mjpeg_start_all(); h264_start_all(); - handlersRunning = true; - console.log('All handlers started successfully'); - } catch (error) { - console.error('Error starting handlers:', error); } - } else { - handlersRunning = false; - start_all_handlers(); - console.log('Handlers already running. Will force restart'); + } catch (error) { + console.error('Error starting handlers:', error); } } function stop_all_handlers() { - console.log('Attempting to stop all handlers'); - if (handlersRunning) { - console.log('Handlers running, stopping now'); - try { + try { + if (CTRL_STAT.currentPage == 'normal_ui_link') { mjpeg_stop_all(); h264_stop_all(); - handlersRunning = false; - console.log('All handlers stopped successfully'); - } catch (error) { - console.error('Error stopping handlers:', error); } - } else { - console.log('Handlers not running, skipping stop'); + } catch (error) { + console.error('Error stopping handlers:', error); } } + function handleVisibilityChange() { if (CTRL_STAT.currentPage == 'normal_ui_link') { if (document.hidden) { @@ -72,7 +59,7 @@ 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, stop_all_handlers); + 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 diff --git a/teleop/htm/static/JS/router.js b/teleop/htm/static/JS/router.js index 68bc036d..8317821d 100644 --- a/teleop/htm/static/JS/router.js +++ b/teleop/htm/static/JS/router.js @@ -11,16 +11,12 @@ import { LogBox } from './userMenu/menu_logbox.js'; import { UserSettingsManager } from './userMenu/menu_settings.js'; export class Router { - constructor(helpMessageManager, messageContainerManager, advancedThemeManager, start_all_handlers,stop_all_handlers) { + constructor(helpMessageManager, messageContainerManager, advancedThemeManager, start_all_handlers) { this.helpMessageManager = helpMessageManager; this.messageContainerManager = messageContainerManager; this.advancedThemeManager = advancedThemeManager; this.start_all_handlers = start_all_handlers; - this.stop_all_handlers = stop_all_handlers; - $('.hamburger_menu_nav a').click((event) => { - this.handleUserMenuRoute(event.target.id); - this.assignNavButtonActions(event.target.id); - }); + this.bindDomActions(); this.mode_to_nav_link = { normal_ui_link: 'manual drive', ai_training_link: 'ai training', @@ -29,7 +25,12 @@ export class Router { follow_link: 'follow', }; } - + bindDomActions() { + $('.hamburger_menu_nav a').click((event) => { + this.handleUserMenuRoute(event.target.id); + this.assignNavButtonActions(event.target.id); + }); + } updateHeaderBar() { const sections = ['left_section', 'right_section']; sections.forEach((section) => $(`#header_bar .${section}`)[isMobileDevice() ? 'show' : 'hide']()); @@ -46,7 +47,6 @@ export class Router { .empty() .load(url, function (response, status, xhr) { if (status == 'success') { - console.log('Page loaded successfully, initializing content'); callback(); } else { console.error('Failed to load the page:', xhr.status); @@ -83,99 +83,61 @@ export class Router { console.error('No image found for ID:', selectedLinkId); } } - handleUserMenuRoute(selectedLinkId) { - console.log(`Handling route change to: ${selectedLinkId}`); - this.updateModeUI(selectedLinkId); - - CTRL_STAT.currentPage = selectedLinkId; - localStorage.setItem('user.menu.screen', selectedLinkId); - - const modeSwitchingPages = ['normal_ui_link', 'ai_training_link', 'autopilot_link', 'map_recognition_link', 'follow_link']; - if (modeSwitchingPages.includes(selectedLinkId)) { - console.log(`Switching to mode: ${selectedLinkId}`); - const targetPage = isMobileDevice() ? '/mc' : '/normal_ui'; - const currentPage = $('main#application_content').data('current-page'); - if (currentPage === '/normal_ui' || currentPage === '/mc') { - if (selectedLinkId === 'normal_ui_link') { - console.log('Already on normal_ui, reloading content'); - this.loadContentBasedOnDevice(); - this.assignNavButtonActions(selectedLinkId); - } - } else { - console.log(`Loading page: ${targetPage}`); - this.loadPage(targetPage, () => { - if (selectedLinkId === 'normal_ui_link') { - console.log('Normal UI loaded, setting up elements'); - teleop_screen.set_normal_ui_elements(); - teleop_screen._init(); - console.log('Calling start_all_handlers after UI setup'); - this.start_all_handlers(); - } else { - this.callbackBasedOnDevice(); - } - this.assignNavButtonActions(selectedLinkId); + handleUserMenuRoute(selectedLinkId) { + this.updateModeUI(selectedLinkId); - if (selectedLinkId === 'normal_ui_link') { - console.log('Forcibly restarting handlers'); - this.stop_all_handlers(); // Ensure handlers are stopped first + CTRL_STAT.currentPage = selectedLinkId; + localStorage.setItem('user.menu.screen', selectedLinkId); - setTimeout(() => { - this.start_all_handlers(); // Then start them again - this.checkAndReinitializeStreams(); - }, 1000); // Slight delay before restarting handlers - } - }); - } - } else { - console.log(`Loading non-mode page: ${selectedLinkId}`); - const pageMap = { - settings_link: [ - '/menu_settings', - () => { - new UserSettingsManager(); - this.advancedThemeManager.bindActions(); - }, - ], - controls_link: ['/menu_controls', () => new ControlSettings()], - events_link: ['/menu_logbox', () => new LogBox()], - }; - const [url, callback] = pageMap[selectedLinkId] || []; - if (url) { - this.loadPage(url, () => { - if (callback) callback(); - this.assignNavButtonActions(selectedLinkId); - }); - } - } -} - - checkAndReinitializeStreams() { - console.log('Checking and reinitializing streams'); - - const canvas = document.getElementById('viewport_canvas'); + const modeSwitchingPages = ['normal_ui_link', 'ai_training_link', 'autopilot_link', 'map_recognition_link', 'follow_link']; + if (modeSwitchingPages.includes(selectedLinkId)) { + const targetPage = isMobileDevice() ? '/mc' : '/normal_ui'; + const currentPage = $('main#application_content').data('current-page'); - if (!canvas || canvas.width === 0 || canvas.height === 0) { - console.log('Canvas not fully initialized, waiting for reinitialization'); - setTimeout(() => { - this.checkAndReinitializeStreams(); // Re-check after a short delay - }, 500); - } else { - console.log('Canvas found and ready, reinitializing streams'); - this.reinitializeStreams(); - } -} - -reinitializeStreams() { - console.log('Reinitializing streams on canvas'); - teleop_screen.set_normal_ui_elements(); - teleop_screen._init(); - this.start_all_handlers(); -} + if (currentPage === '/normal_ui' || currentPage === '/mc') { + if (selectedLinkId === 'normal_ui_link') { + this.loadContentBasedOnDevice(); + // Run the callback after loading the content + this.assignNavButtonActions(selectedLinkId); + } + } else { + this.loadPage(targetPage, () => { + if (selectedLinkId === 'normal_ui_link') { + this.loadContentBasedOnDevice(); + } else { + // Call the appropriate callback based on the device + this.callbackBasedOnDevice(); + } + // Run the callback after the page has been loaded + this.assignNavButtonActions(selectedLinkId); + }); + } + } else { + const pageMap = { + settings_link: [ + '/menu_settings', + () => { + new UserSettingsManager(); + this.advancedThemeManager.bindActions(); + }, + ], + controls_link: ['/menu_controls', () => new ControlSettings()], + events_link: ['/menu_logbox', () => new LogBox()], + }; + const [url, callback] = pageMap[selectedLinkId] || []; + if (url) { + this.loadPage(url, () => { + if (callback) callback(); + // Run the callback after the page has been loaded + this.assignNavButtonActions(selectedLinkId); + }); + } + } + } loadContentBasedOnDevice() { const url = isMobileDevice() ? '/mc' : '/normal_ui'; - console.log(`Loading content for device: ${url}`); this.loadPage(url, () => this.callbackBasedOnDevice()); } @@ -200,8 +162,7 @@ reinitializeStreams() { else if (navLink == 'map_recognition_link') confidenceNavButtonHandler.initializeDOM(); else if (navLink == 'phone_controller_link') { this.helpMessageManager.connectPhoneMessage(); - $('.message_container').removeClass('hidden').hide().fadeIn(500); - closeMessageContainer(); + this.updateModeUI('normal_ui_link'); } } } diff --git a/teleop/htm/static/JS/userMenu/menu_settings.js b/teleop/htm/static/JS/userMenu/menu_settings.js index e89427b6..58a012ac 100644 --- a/teleop/htm/static/JS/userMenu/menu_settings.js +++ b/teleop/htm/static/JS/userMenu/menu_settings.js @@ -34,7 +34,7 @@ class UserSettingsManager { }) .catch((error) => alert('Error fetching settings: ' + error.message)); } - + populateForm(settings) { this.form.innerHTML = ''; Object.entries(settings).forEach(([section, options]) => { @@ -44,9 +44,10 @@ class UserSettingsManager { fieldset.appendChild(legend); Object.entries(options).forEach(([name, value]) => { - // Skip specific fields as they are already in the relay settings menu - if (section === 'vehicle' && (name === 'ras.driver.steering.offset' || name === 'ras.driver.motor.scale')) return; - + // Skip specific fields as they are already in the relay settings menu (menu_control.js) + if (section === 'vehicle' && ['ras.driver.steering.offset', 'ras.driver.motor.scale', 'ras.driver.deadzone.width'].includes(name)) { + return; + } const input = document.createElement('input'); input.type = value === 'true' || value === 'false' ? 'checkbox' : 'text'; input.name = this.filterFieldName(section, name); // Use the transformed name