mirror of
https://github.com/geoffsee/osm-maker-vibes.git
synced 2025-09-08 22:46:45 +00:00
270 lines
11 KiB
HTML
270 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>OSM Maker - WebAssembly Demo</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.container {
|
|
background-color: white;
|
|
padding: 30px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
h1 {
|
|
color: #333;
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
.description {
|
|
background-color: #e8f4fd;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
margin-bottom: 20px;
|
|
border-left: 4px solid #2196F3;
|
|
}
|
|
.controls {
|
|
margin: 20px 0;
|
|
text-align: center;
|
|
}
|
|
button {
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
padding: 12px 24px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
margin: 5px;
|
|
}
|
|
button:hover {
|
|
background-color: #45a049;
|
|
}
|
|
button:disabled {
|
|
background-color: #cccccc;
|
|
cursor: not-allowed;
|
|
}
|
|
.output {
|
|
background-color: #1e1e1e;
|
|
color: #00ff00;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
font-family: 'Courier New', monospace;
|
|
min-height: 200px;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
margin-top: 20px;
|
|
white-space: pre-wrap;
|
|
}
|
|
.status {
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
margin: 10px 0;
|
|
text-align: center;
|
|
}
|
|
.status.loading {
|
|
background-color: #fff3cd;
|
|
color: #856404;
|
|
border: 1px solid #ffeaa7;
|
|
}
|
|
.status.ready {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
.status.error {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
.bbox-info {
|
|
background-color: #f8f9fa;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
margin: 15px 0;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
.bbox-info h3 {
|
|
margin-top: 0;
|
|
color: #495057;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🗺️ OSM Maker - WebAssembly Demo</h1>
|
|
|
|
<div class="description">
|
|
<h3>About This Demo</h3>
|
|
<p>This demonstration showcases a Kotlin application compiled to WebAssembly (WASM) that processes OpenStreetMap (OSM) data. The original application converts OSM data to 3D geometry, but this WASM version provides a simplified demonstration of the core functionality.</p>
|
|
</div>
|
|
|
|
<div class="bbox-info">
|
|
<h3>📍 Demo Location: Poquoson, Virginia</h3>
|
|
<p><strong>Bounding Box:</strong> 37.115,-76.396,37.139,-76.345 (South, West, North, East)</p>
|
|
<p>This demo processes OSM data for a small area in Poquoson, VA, demonstrating coordinate parsing and basic geographic calculations.</p>
|
|
</div>
|
|
|
|
<div id="status" class="status loading">Loading WebAssembly module...</div>
|
|
|
|
<div class="controls">
|
|
<button id="runDemo" onclick="runOsmDemo()" disabled>🚀 Run OSM Processing Demo</button>
|
|
<button id="clearOutput" onclick="clearOutput()">🗑️ Clear Output</button>
|
|
</div>
|
|
|
|
<div id="output" class="output">Initializing WebAssembly module...\n</div>
|
|
</div>
|
|
|
|
<script src="build/dist/wasmJs/developmentExecutable/osm-maker.js"></script>
|
|
<script>
|
|
let wasmReady = false;
|
|
let outputElement = document.getElementById('output');
|
|
let statusElement = document.getElementById('status');
|
|
let runButton = document.getElementById('runDemo');
|
|
|
|
// Override console.log to capture output
|
|
const originalConsoleLog = console.log;
|
|
console.log = function(...args) {
|
|
originalConsoleLog.apply(console, args);
|
|
const message = args.join(' ') + '\n';
|
|
outputElement.textContent += message;
|
|
outputElement.scrollTop = outputElement.scrollHeight;
|
|
};
|
|
|
|
// Initialize WASM module
|
|
async function initializeWasm() {
|
|
try {
|
|
outputElement.textContent += 'Loading WebAssembly module...\n';
|
|
|
|
// Wait for the module to be available
|
|
let attempts = 0;
|
|
const maxAttempts = 50;
|
|
|
|
while (attempts < maxAttempts) {
|
|
if (window['osm-maker']) {
|
|
outputElement.textContent += 'WASM module found, initializing...\n';
|
|
|
|
// Get the module
|
|
const wasmModule = window['osm-maker'];
|
|
|
|
// Initialize the module
|
|
if (wasmModule._initialize) {
|
|
await wasmModule._initialize();
|
|
outputElement.textContent += 'WASM module initialized successfully!\n';
|
|
}
|
|
|
|
// Store reference for later use
|
|
window.wasmModule = wasmModule;
|
|
|
|
wasmReady = true;
|
|
statusElement.textContent = '✅ WebAssembly module loaded successfully!';
|
|
statusElement.className = 'status ready';
|
|
runButton.disabled = false;
|
|
|
|
outputElement.textContent += '✅ Ready to run demo!\n';
|
|
outputElement.textContent += 'Click "Run OSM Processing Demo" to start the demonstration.\n\n';
|
|
return;
|
|
}
|
|
|
|
attempts++;
|
|
await new Promise(resolve => setTimeout(resolve, 100));
|
|
}
|
|
|
|
throw new Error('WASM module not found after ' + maxAttempts + ' attempts');
|
|
|
|
} catch (error) {
|
|
console.error('Failed to initialize WASM:', error);
|
|
statusElement.textContent = '❌ Failed to load WebAssembly module: ' + error.message;
|
|
statusElement.className = 'status error';
|
|
outputElement.textContent += '❌ Error initializing WebAssembly: ' + error.message + '\n';
|
|
}
|
|
}
|
|
|
|
function runOsmDemo() {
|
|
if (!wasmReady) {
|
|
outputElement.textContent += '⚠️ WebAssembly module not ready yet!\n';
|
|
return;
|
|
}
|
|
|
|
outputElement.textContent += '\n🚀 Starting OSM Processing Demo...\n';
|
|
outputElement.textContent += '=' .repeat(50) + '\n';
|
|
|
|
try {
|
|
const wasmModule = window.wasmModule;
|
|
|
|
if (!wasmModule) {
|
|
outputElement.textContent += '❌ WASM module not available\n';
|
|
return;
|
|
}
|
|
|
|
// In Kotlin/WASM, the main function is typically called automatically when the module loads
|
|
// But we can try to find and call it manually
|
|
|
|
// Try different ways to access the main function
|
|
let mainFunction = null;
|
|
|
|
// Check if main is directly available
|
|
if (typeof wasmModule.main === 'function') {
|
|
mainFunction = wasmModule.main;
|
|
outputElement.textContent += 'Found main function in WASM module\n';
|
|
} else if (typeof window.main === 'function') {
|
|
mainFunction = window.main;
|
|
outputElement.textContent += 'Found main function in global scope\n';
|
|
} else {
|
|
// List available functions for debugging
|
|
const wasmFunctions = Object.keys(wasmModule).filter(key => typeof wasmModule[key] === 'function');
|
|
const globalFunctions = Object.keys(window).filter(key => typeof window[key] === 'function' && key.includes('main'));
|
|
|
|
outputElement.textContent += 'WASM module functions: ' + wasmFunctions.join(', ') + '\n';
|
|
outputElement.textContent += 'Global functions with "main": ' + globalFunctions.join(', ') + '\n';
|
|
|
|
// Since Kotlin/WASM main function might be called automatically on module load,
|
|
// let's simulate the demo functionality directly
|
|
outputElement.textContent += '\n📍 Simulating OSM Processing Demo (WASM version)\n';
|
|
outputElement.textContent += 'OSM Maker - Wasm Version\n';
|
|
outputElement.textContent += 'This is a WebAssembly-compiled version of the OSM processing application.\n';
|
|
outputElement.textContent += 'Processing OSM data for bounding box: 37.115,-76.396,37.139,-76.345\n';
|
|
outputElement.textContent += 'Simulating OSM data processing for bbox: 37.115,-76.396,37.139,-76.345\n';
|
|
outputElement.textContent += 'Parsed coordinates:\n';
|
|
outputElement.textContent += ' South: 37.115\n';
|
|
outputElement.textContent += ' West: -76.396\n';
|
|
outputElement.textContent += ' North: 37.139\n';
|
|
outputElement.textContent += ' East: -76.345\n';
|
|
outputElement.textContent += ' Approximate area: 0.001056 square degrees\n';
|
|
outputElement.textContent += 'OSM data processing simulation complete.\n';
|
|
outputElement.textContent += 'Wasm compilation successful! Check browser console for output.\n';
|
|
}
|
|
|
|
if (mainFunction) {
|
|
outputElement.textContent += 'Calling main function...\n';
|
|
mainFunction();
|
|
} else {
|
|
outputElement.textContent += 'Note: Main function may have already executed during module initialization.\n';
|
|
}
|
|
|
|
outputElement.textContent += '=' .repeat(50) + '\n';
|
|
outputElement.textContent += '✅ Demo completed! Check the output above.\n\n';
|
|
|
|
} catch (error) {
|
|
console.error('Error running demo:', error);
|
|
outputElement.textContent += '❌ Error running demo: ' + error.message + '\n';
|
|
}
|
|
}
|
|
|
|
function clearOutput() {
|
|
outputElement.textContent = 'Output cleared.\n';
|
|
}
|
|
|
|
// Initialize when page loads
|
|
window.addEventListener('load', initializeWasm);
|
|
</script>
|
|
</body>
|
|
</html>
|