Minimap & Quality Controls

Control the minimap navigation aid and rendering quality settings to optimize user experience and performance in virtual spaces. These controls help users navigate large environments and adjust visual quality based on device capabilities.

getMinimapSize

getMinimapSize([callback: Function])

Returns the current dimensions of the minimap display as width and height values. Use this to understand the current minimap configuration and adjust UI layouts accordingly.

Returns: Array with width and height [width: number, height: number] or undefined if minimap is not available

api.getMinimapSize(function(size) {
  if (size) {
    console.log('Minimap size:', size[0], 'x', size[1]);
    
    // Adjust UI layout based on minimap size
    adjustUILayout(size[0], size[1]);
  } else {
    console.log('Minimap not available');
  }
});

---

hideMinimap

hideMinimap([callback: Function])

Hides the minimap navigation aid to provide more screen space for the 3D environment or when navigation assistance is not needed.

api.hideMinimap(function() {
  console.log('Minimap hidden');
  
  // Update UI to reflect minimap state
  updateMinimapToggleButton(false);
  
  // Optionally expand 3D viewport
  expandViewport();
});

// Hide minimap for immersive presentations
function startPresentationMode() {
  api.hideMinimap();
  // Additional presentation setup...
}

---

showMinimap

showMinimap([callback: Function])

Shows the minimap navigation aid to help users orient themselves and navigate within large virtual spaces.

api.showMinimap(function() {
  console.log('Minimap displayed');
  
  // Update UI to reflect minimap state
  updateMinimapToggleButton(true);
  
  // Adjust viewport if needed
  adjustViewportForMinimap();
});

// Show minimap for exploration mode
function enableExplorationMode() {
  api.showMinimap();
  // Additional exploration features...
}

---

setQuality

setQuality(type: QualityType, [callback: Function])

Sets the rendering quality level for the 3D viewer to balance visual fidelity with performance. Quality settings affect texture resolution, lighting complexity, and rendering effects.

Parameters:

• type: QualityType - Quality level setting (specific values depend on implementation)

// Set high quality for desktop devices
api.setQuality('high', function() {
  console.log('High quality rendering enabled');
  updateQualityIndicator('high');
});

// Set low quality for mobile devices or performance optimization
api.setQuality('low', function() {
  console.log('Low quality rendering for better performance');
  updateQualityIndicator('low');
});

// Automatic quality based on device detection
function setOptimalQuality() {
  const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  const qualityLevel = isMobile ? 'medium' : 'high';
  
  api.setQuality(qualityLevel, function() {
    console.log(`Quality set to ${qualityLevel} for device type`);
  });
}

Navigation & Quality Management Examples

Minimap Controller:

class MinimapController {
  constructor() {
    this.isVisible = true;
    this.currentSize = null;
    this.userPreference = localStorage.getItem('minimap-visible') !== 'false';
  }
  
  initialize() {
    // Set initial state based on user preference
    if (this.userPreference) {
      this.show();
    } else {
      this.hide();
    }
    
    // Get current size for UI layout
    this.updateSize();
  }
  
  toggle() {
    if (this.isVisible) {
      this.hide();
    } else {
      this.show();
    }
  }
  
  show() {
    api.showMinimap(() => {
      this.isVisible = true;
      this.savePreference();
      this.updateUI();
      console.log('Minimap shown');
    });
  }
  
  hide() {
    api.hideMinimap(() => {
      this.isVisible = false;
      this.savePreference();
      this.updateUI();
      console.log('Minimap hidden');
    });
  }
  
  updateSize() {
    api.getMinimapSize((size) => {
      this.currentSize = size;
      this.adjustLayout();
    });
  }
  
  savePreference() {
    localStorage.setItem('minimap-visible', this.isVisible.toString());
  }
  
  updateUI() {
    const toggleButton = document.getElementById('minimap-toggle');
    if (toggleButton) {
      toggleButton.textContent = this.isVisible ? 'Hide Map' : 'Show Map';
      toggleButton.classList.toggle('active', this.isVisible);
    }
  }
  
  adjustLayout() {
    if (this.currentSize && this.isVisible) {
      // Adjust main UI layout to accommodate minimap
      const mainContent = document.getElementById('main-content');
      if (mainContent) {
        mainContent.style.marginRight = `${this.currentSize[0] + 20}px`;
      }
    }
  }
}

const minimapController = new MinimapController();
minimapController.initialize();

Adaptive Quality Manager:

class QualityManager {
  constructor() {
    this.currentQuality = 'medium';
    this.performanceMonitor = new PerformanceMonitor();
    this.qualityLevels = ['low', 'medium', 'high', 'ultra'];
  }
  
  initialize() {
    // Set initial quality based on device capabilities
    this.setOptimalQuality();
    
    // Monitor performance and adjust automatically
    this.startPerformanceMonitoring();
  }
  
  setOptimalQuality() {
    const deviceCapabilities = this.assessDeviceCapabilities();
    let targetQuality;
    
    if (deviceCapabilities.score >= 80) {
      targetQuality = 'high';
    } else if (deviceCapabilities.score >= 60) {
      targetQuality = 'medium';
    } else {
      targetQuality = 'low';
    }
    
    this.setQuality(targetQuality);
  }
  
  setQuality(qualityLevel) {
    if (!this.qualityLevels.includes(qualityLevel)) {
      console.error('Invalid quality level:', qualityLevel);
      return;
    }
    
    api.setQuality(qualityLevel, () => {
      this.currentQuality = qualityLevel;
      this.updateQualityUI();
      this.saveQualityPreference();
      console.log(`Quality set to: ${qualityLevel}`);
    });
  }
  
  assessDeviceCapabilities() {
    // Simple device capability assessment
    const canvas = document.createElement('canvas');
    const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
    
    let score = 50; // Base score
    
    // Check WebGL support
    if (gl) {
      score += 20;
      
      // Check for advanced features
      if (gl.getExtension('OES_texture_float')) score += 10;
      if (gl.getExtension('WEBGL_depth_texture')) score += 10;
    }
    
    // Check device memory (if available)
    if (navigator.deviceMemory) {
      score += Math.min(navigator.deviceMemory * 5, 20);
    }
    
    // Check for mobile device
    const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    if (isMobile) score -= 15;
    
    return { score, isMobile };
  }
  
  startPerformanceMonitoring() {
    setInterval(() => {
      const fps = this.performanceMonitor.getCurrentFPS();
      
      if (fps < 30 && this.currentQuality !== 'low') {
        // Performance is poor, reduce quality
        const currentIndex = this.qualityLevels.indexOf(this.currentQuality);
        if (currentIndex > 0) {
          this.setQuality(this.qualityLevels[currentIndex - 1]);
          console.log('Quality reduced due to poor performance');
        }
      } else if (fps > 55 && this.currentQuality !== 'high') {
        // Performance is good, potentially increase quality
        const currentIndex = this.qualityLevels.indexOf(this.currentQuality);
        if (currentIndex < this.qualityLevels.length - 1) {
          this.setQuality(this.qualityLevels[currentIndex + 1]);
          console.log('Quality increased due to good performance');
        }
      }
    }, 10000); // Check every 10 seconds
  }
  
  updateQualityUI() {
    const qualityIndicator = document.getElementById('quality-indicator');
    const qualitySelect = document.getElementById('quality-select');
    
    if (qualityIndicator) {
      qualityIndicator.textContent = `Quality: ${this.currentQuality.toUpperCase()}`;
      qualityIndicator.className = `quality-${this.currentQuality}`;
    }
    
    if (qualitySelect) {
      qualitySelect.value = this.currentQuality;
    }
  }
  
  saveQualityPreference() {
    localStorage.setItem('preferred-quality', this.currentQuality);
  }
}

class PerformanceMonitor {
  constructor() {
    this.frameCount = 0;
    this.lastTime = performance.now();
    this.fps = 60;
  }
  
  getCurrentFPS() {
    // Simple FPS calculation
    const now = performance.now();
    const delta = now - this.lastTime;
    
    if (delta >= 1000) {
      this.fps = (this.frameCount * 1000) / delta;
      this.frameCount = 0;
      this.lastTime = now;
    }
    
    this.frameCount++;
    return this.fps;
  }
}

const qualityManager = new QualityManager();
qualityManager.initialize();

Integrated Navigation & Quality Controls:

function createNavigationControls() {
  const controlPanel = document.createElement('div');
  controlPanel.innerHTML = `
    <div class="navigation-controls">
      <h3>Navigation & Display</h3>
      
      <div class="minimap-controls">
        <label>
          <input type="checkbox" id="minimap-toggle" checked>
          Show Minimap
        </label>
        <span id="minimap-size-info"></span>
      </div>
      
      <div class="quality-controls">
        <label for="quality-select">Rendering Quality:</label>
        <select id="quality-select">
          <option value="low">Low (Better Performance)</option>
          <option value="medium" selected>Medium (Balanced)</option>
          <option value="high">High (Better Quality)</option>
        </select>
        <div id="quality-indicator">Quality: MEDIUM</div>
      </div>
      
      <div class="performance-info">
        <span id="fps-counter">FPS: --</span>
      </div>
    </div>
  `;
  
  document.body.appendChild(controlPanel);
  
  // Set up event listeners
  document.getElementById('minimap-toggle').addEventListener('change', (e) => {
    if (e.target.checked) {
      minimapController.show();
    } else {
      minimapController.hide();
    }
  });
  
  document.getElementById('quality-select').addEventListener('change', (e) => {
    qualityManager.setQuality(e.target.value);
  });
}

// Initialize controls when page loads
document.addEventListener('DOMContentLoaded', createNavigationControls);

Best Practices

Minimap Usage:

• Show minimap by default in large, complex spaces
• Hide minimap during focused tasks or presentations
• Provide easy toggle controls for user preference

Quality Management:

• Start with device-appropriate quality settings
• Monitor performance and adjust automatically when possible
• Allow manual quality override for user preference
• Provide clear feedback about current quality level

User Experience:

• Save user preferences for minimap and quality settings
• Provide visual feedback for all control changes
• Consider accessibility needs when designing controls