Virtual Nodes
Synthetic Walkers
Coverage Analysis
Excellent (GDOP < 2)
Good (GDOP 2-4)
Fair (GDOP 4-8)
Poor (GDOP > 8)
No Coverage
Coverage: --
Mean GDOP: --
Simulation
Results
Expected Accuracy:
--
Coverage Score:
--
`;
document.body.appendChild(panel);
// Store element references
elements = {
panel: panel,
closeBtn: document.getElementById('sim-close-btn'),
spaceWidth: document.getElementById('sim-space-width'),
spaceDepth: document.getElementById('sim-space-depth'),
spaceHeight: document.getElementById('sim-space-height'),
applySpace: document.getElementById('sim-apply-space'),
toolBtns: document.querySelectorAll('.sim-tool-btn'),
addNode: document.getElementById('sim-add-node'),
clearNodes: document.getElementById('sim-clear-nodes'),
nodesContainer: document.getElementById('sim-nodes-container'),
walkerType: document.getElementById('sim-walker-type'),
addWalker: document.getElementById('sim-add-walker'),
clearWalkers: document.getElementById('sim-clear-walkers'),
walkersContainer: document.getElementById('sim-walkers-container'),
showGDOP: document.getElementById('sim-show-gdop'),
updateGDOP: document.getElementById('sim-update-gdop'),
startBtn: document.getElementById('sim-start-btn'),
pauseBtn: document.getElementById('sim-pause-btn'),
stopBtn: document.getElementById('sim-stop-btn'),
time: document.getElementById('sim-time'),
progressFill: document.getElementById('sim-progress-fill'),
resultsSection: document.getElementById('sim-results-section'),
resultAccuracy: document.getElementById('sim-result-accuracy'),
resultCoverage: document.getElementById('sim-result-coverage'),
recommendationsSection: document.getElementById('sim-recommendations-section'),
recommendations: document.getElementById('sim-recommendations'),
shoppingSection: document.getElementById('sim-shopping-section'),
shoppingList: document.getElementById('sim-shopping-list'),
};
// Attach event listeners
elements.closeBtn.addEventListener('click', exitSimulator);
elements.applySpace.addEventListener('click', applySpace);
elements.toolBtns.forEach(btn => {
btn.addEventListener('click', () => selectTool(btn.dataset.tool));
});
elements.addNode.addEventListener('click', addNode);
elements.clearNodes.addEventListener('click', clearNodes);
elements.addWalker.addEventListener('click', addWalker);
elements.clearWalkers.addEventListener('click', clearWalkers);
elements.showGDOP.addEventListener('change', toggleGDOP);
elements.updateGDOP.addEventListener('click', updateGDOP);
elements.startBtn.addEventListener('click', startSimulation);
elements.pauseBtn.addEventListener('click', pauseSimulation);
elements.stopBtn.addEventListener('click', stopSimulation);
// Set default tool
selectTool('select');
}
// ============================================
// Router Integration
// ============================================
function onModeChange(newMode, oldMode) {
if (newMode === 'simulate') {
enterSimulator();
} else if (oldMode === 'simulate') {
exitSimulator();
}
}
function enterSimulator() {
console.log('[Simulate] Entering simulator mode');
elements.panel.style.display = 'block';
// Apply default space
applySpace();
// Create session
createSession();
}
function exitSimulator() {
console.log('[Simulate] Exiting simulator mode');
elements.panel.style.display = 'none';
// Stop simulation if running
if (state.simulationRunning) {
stopSimulation();
}
// Clear visualization
clearSimulationMeshes();
}
// ============================================
// Session Management
// ============================================
async function createSession() {
try {
const response = await fetch('/api/simulator/session', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
space: state.space,
}),
});
if (!response.ok) throw new Error('Failed to create session');
const data = await response.json();
state.sessionId = data.session_id;
console.log('[Simulate] Session created:', state.sessionId);
} catch (err) {
console.error('[Simulate] Failed to create session:', err);
}
}
// ============================================
// Space Management
// ============================================
function applySpace() {
const width = parseFloat(elements.spaceWidth.value);
const depth = parseFloat(elements.spaceDepth.value);
const height = parseFloat(elements.spaceHeight.value);
state.space = { width, depth, height, walls: [] };
// Update 3D visualization
if (window.Viz3D) {
window.Viz3D.applyRoom({
width: width,
depth: depth,
height: height,
origin_x: 0,
origin_z: 0,
});
}
console.log('[Simulate] Space applied:', state.space);
}
// ============================================
// Tool Selection
// ============================================
function selectTool(tool) {
state.currentTool = tool;
// Update button states
elements.toolBtns.forEach(btn => {
if (btn.dataset.tool === tool) {
btn.classList.add('active');
} else {
btn.classList.remove('active');
}
});
console.log('[Simulate] Tool selected:', tool);
}
// ============================================
// Node Management
// ============================================
function addNode() {
const id = 'node_' + Date.now();
const node = {
id: id,
name: 'Node ' + (state.nodes.length + 1),
type: 'virtual',
position: {
x: state.space.width / 2,
y: 1.0,
z: state.space.depth / 2,
},
role: 'tx_rx',
enabled: true,
};
state.nodes.push(node);
renderNodes();
updateNodeVisualization(node);
// Sync with backend
syncNode(node);
console.log('[Simulate] Node added:', node);
}
function removeNode(nodeId) {
state.nodes = state.nodes.filter(n => n.id !== nodeId);
renderNodes();
removeNodeVisualization(nodeId);
// Sync with backend
deleteNode(nodeId);
console.log('[Simulate] Node removed:', nodeId);
}
function updateNodePosition(nodeId, position) {
const node = state.nodes.find(n => n.id === nodeId);
if (node) {
node.position = position;
updateNodeVisualization(node);
syncNode(node);
}
}
function clearNodes() {
state.nodes.forEach(n => removeNodeVisualization(n.id));
state.nodes = [];
renderNodes();
console.log('[Simulate] All nodes cleared');
}
function renderNodes() {
elements.nodesContainer.innerHTML = '';
state.nodes.forEach(node => {
const div = document.createElement('div');
div.className = 'sim-item';
div.innerHTML = `