Skip to content

Commit

Permalink
refactor<tel> remove debugging logs from the prev. commit and work on…
Browse files Browse the repository at this point in the history 
… 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
  • Loading branch information
@Ahelsamahy
Ahelsamahy committed Aug 20, 2024
1 parent 66c746f commit 7fe92f6
Show file tree
Hide file tree
Showing 4 changed files with 74 additions and 127 deletions.
4 changes: 1 addition & 3 deletions teleop/htm/static/JS/Index/index_video_mjpeg.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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') {
Expand All @@ -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();
}
}
Expand Down
35 changes: 11 additions & 24 deletions teleop/htm/static/JS/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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

Expand Down
153 changes: 57 additions & 96 deletions teleop/htm/static/JS/router.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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']());
Expand All @@ -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);
Expand Down Expand Up @@ -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());
}

Expand All @@ -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');
}
}
}
9 changes: 5 additions & 4 deletions teleop/htm/static/JS/userMenu/menu_settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]) => {
Expand All @@ -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
Expand Down

0 comments on commit 7fe92f6

Please sign in to comment.