96 lines
3.2 KiB
HTML
96 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Pyodide Real-Time Python Execution with Console</title>
|
|
<script src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script>
|
|
<style>
|
|
#console {
|
|
width: 100%;
|
|
height: 200px;
|
|
background-color: black;
|
|
color: white;
|
|
font-family: monospace;
|
|
padding: 10px;
|
|
overflow-y: auto;
|
|
border: 1px solid #ccc;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Real-Time Python Execution with Pyodide</h1>
|
|
<textarea id="python-code" rows="10" cols="50" placeholder="Enter your Python code here..."></textarea>
|
|
<br><br>
|
|
<button id="compile-button">Compile and Run</button>
|
|
<br><br>
|
|
<h2>Console Output:</h2>
|
|
<div id="console"></div>
|
|
|
|
<script>
|
|
const consoleElement = document.getElementById("console");
|
|
let pyodideWorker = new Worker("pyodide-worker.js");
|
|
|
|
pyodideWorker.onmessage = (event) => {
|
|
switch (event.data.type) {
|
|
case "console":
|
|
logToConsole(event.data.data);
|
|
break;
|
|
case "error":
|
|
logToConsole(`<span style="color:red;">${event.data.message}</span>`);
|
|
break;
|
|
case "fire":
|
|
fire(); // Call the JavaScript fire() function
|
|
break;
|
|
case "turn":
|
|
turn(event.data.data); // Call the JavaScript turn(deg) function
|
|
break;
|
|
}
|
|
};
|
|
|
|
function logToConsole(text) {
|
|
console.log(text.replace("<b>", "").replace("</b>", ""));
|
|
consoleElement.innerHTML += text.replace(/\n/g, "<br>") + "<br>";
|
|
consoleElement.scrollTop = consoleElement.scrollHeight;
|
|
}
|
|
|
|
// ✅ JavaScript functions to handle events
|
|
function fire() {
|
|
logToConsole("<b>🔥 Gun Fired! 🔥</b>");
|
|
}
|
|
|
|
function turn(deg) {
|
|
logToConsole(`<b>🔄 Turned ${deg} degrees</b>`);
|
|
}
|
|
|
|
// Send code to worker
|
|
document.getElementById("compile-button").addEventListener("click", () => {
|
|
const code = document.getElementById("python-code").value;
|
|
consoleElement.innerHTML = ""; // Clear console before running new code
|
|
pyodideWorker.postMessage({
|
|
type: "execute",
|
|
code: code
|
|
});
|
|
});
|
|
|
|
// ✅ Update "distance" and "speed" every 2 seconds with random values
|
|
function updateSensorData() {
|
|
const distance = Math.random() * 100; // Random distance (0-100)
|
|
const speed = Math.random() * 10; // Random speed (0-10)
|
|
|
|
pyodideWorker.postMessage({
|
|
type: "sensor_update",
|
|
data: { distance, speed }
|
|
});
|
|
|
|
//logToConsole(`📡 Sensor Update - Distance: ${distance.toFixed(2)}, Speed: ${speed.toFixed(2)}`);
|
|
}
|
|
|
|
setInterval(updateSensorData, 2000); // Call every 2 seconds
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |