289 lines
8.6 KiB
TypeScript
289 lines
8.6 KiB
TypeScript
import { Hono } from '@hono/hono';
|
||
import { serveStatic } from '@hono/hono/serve-static';
|
||
import { html } from '@hono/hono/html';
|
||
import { Context } from '@hono/hono';
|
||
|
||
// Create Hono app
|
||
const app = new Hono();
|
||
|
||
// Store AGV positions
|
||
const agvPositions: Map<string, { x: number; y: number; theta: number }> = new Map();
|
||
let server: { shutdown: () => Promise<void> } | null = null;
|
||
let isRunning = false;
|
||
|
||
// Serve static files
|
||
app.use('/*', serveStatic({
|
||
root: './',
|
||
getContent: async (path, c) => {
|
||
try {
|
||
const file = await Deno.readFile(path);
|
||
return file;
|
||
} catch {
|
||
return null;
|
||
}
|
||
}
|
||
}));
|
||
|
||
// Main page with canvas
|
||
app.get('/', (c: Context) => {
|
||
return c.html(html`
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>AGV Position Monitor</title>
|
||
<style>
|
||
body {
|
||
margin: 0;
|
||
padding: 20px;
|
||
background-color: #f0f0f0;
|
||
font-family: Arial, sans-serif;
|
||
}
|
||
canvas {
|
||
background-color: white;
|
||
border: 1px solid #ccc;
|
||
margin: 20px 0;
|
||
}
|
||
.controls {
|
||
margin: 20px 0;
|
||
}
|
||
button {
|
||
padding: 8px 16px;
|
||
margin-right: 10px;
|
||
background-color: #4CAF50;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
button:hover {
|
||
background-color: #45a049;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>AGV Position Monitor</h1>
|
||
<div class="controls">
|
||
<button onclick="startUpdates()">Start Updates</button>
|
||
<button onclick="stopUpdates()">Stop Updates</button>
|
||
</div>
|
||
<canvas id="agvCanvas" width="800" height="800"></canvas>
|
||
<script>
|
||
const canvas = document.getElementById('agvCanvas');
|
||
const ctx = canvas.getContext('2d');
|
||
let updateInterval;
|
||
|
||
// Scale factor for visualization
|
||
const SCALE = 2; // Scale adjusted for 400x400 meter area
|
||
const AGV_SIZE = 8; // AGV representation size
|
||
const GRID_SIZE = 400; // 400x400 meter grid
|
||
const COLORS = ['#4CAF50', '#2196F3', '#FFC107', '#9C27B0', '#FF5722', '#607D8B'];
|
||
|
||
function getColor(id) {
|
||
// Simple hash function to get consistent color for each AGV
|
||
let hash = 0;
|
||
for (let i = 0; i < id.length; i++) {
|
||
hash = id.charCodeAt(i) + ((hash << 5) - hash);
|
||
}
|
||
return COLORS[Math.abs(hash) % COLORS.length];
|
||
}
|
||
|
||
function drawAGV(x, y, theta, id, color) {
|
||
ctx.save();
|
||
// Center the canvas and flip Y axis to match coordinate system
|
||
ctx.translate(canvas.width/2 + x * SCALE, canvas.height/2 - y * SCALE);
|
||
ctx.rotate(-theta); // Negative theta to match coordinate system
|
||
|
||
// Draw AGV body
|
||
ctx.fillStyle = color;
|
||
ctx.fillRect(-AGV_SIZE/2, -AGV_SIZE/2, AGV_SIZE, AGV_SIZE);
|
||
|
||
// Draw direction indicator
|
||
ctx.beginPath();
|
||
ctx.moveTo(0, 0);
|
||
ctx.lineTo(AGV_SIZE/2, 0);
|
||
ctx.strokeStyle = 'white';
|
||
ctx.lineWidth = 2;
|
||
ctx.stroke();
|
||
|
||
ctx.restore();
|
||
|
||
// Draw AGV name
|
||
ctx.save();
|
||
ctx.translate(canvas.width/2 + x * SCALE, canvas.height/2 - y * SCALE - AGV_SIZE);
|
||
ctx.fillStyle = color;
|
||
ctx.font = '12px Arial';
|
||
ctx.textAlign = 'center';
|
||
ctx.fillText(id, 0, 0);
|
||
ctx.restore();
|
||
}
|
||
|
||
function clearCanvas() {
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
|
||
// Draw grid
|
||
ctx.strokeStyle = '#ddd';
|
||
ctx.lineWidth = 1;
|
||
|
||
// Grid interval for labels (show every 20 units)
|
||
const LABEL_INTERVAL = 20;
|
||
|
||
// Vertical lines
|
||
for (let x = -GRID_SIZE/2; x <= GRID_SIZE/2; x++) {
|
||
const drawX = canvas.width/2 + x * SCALE;
|
||
ctx.beginPath();
|
||
ctx.moveTo(drawX, 0);
|
||
ctx.lineTo(drawX, canvas.height);
|
||
ctx.stroke();
|
||
|
||
// Add X axis labels (every LABEL_INTERVAL units)
|
||
if (x % LABEL_INTERVAL === 0) {
|
||
ctx.fillStyle = '#666';
|
||
ctx.font = '12px Arial';
|
||
ctx.textAlign = 'center';
|
||
ctx.fillText(x.toString(), drawX, canvas.height/2 + 20);
|
||
}
|
||
}
|
||
|
||
// Horizontal lines
|
||
for (let y = -GRID_SIZE/2; y <= GRID_SIZE/2; y++) {
|
||
const drawY = canvas.height/2 + y * SCALE;
|
||
ctx.beginPath();
|
||
ctx.moveTo(0, drawY);
|
||
ctx.lineTo(canvas.width, drawY);
|
||
ctx.stroke();
|
||
|
||
// Add Y axis labels (every LABEL_INTERVAL units)
|
||
if (y % LABEL_INTERVAL === 0) {
|
||
ctx.fillStyle = '#666';
|
||
ctx.font = '12px Arial';
|
||
ctx.textAlign = 'right';
|
||
ctx.fillText((-y).toString(), canvas.width/2 - 10, drawY + 4);
|
||
}
|
||
}
|
||
|
||
// Draw axis lines
|
||
ctx.strokeStyle = '#999';
|
||
ctx.lineWidth = 2;
|
||
|
||
// X axis
|
||
ctx.beginPath();
|
||
ctx.moveTo(0, canvas.height/2);
|
||
ctx.lineTo(canvas.width, canvas.height/2);
|
||
ctx.stroke();
|
||
|
||
// Y axis
|
||
ctx.beginPath();
|
||
ctx.moveTo(canvas.width/2, 0);
|
||
ctx.lineTo(canvas.width/2, canvas.height);
|
||
ctx.stroke();
|
||
|
||
// Add axes labels
|
||
ctx.fillStyle = '#444';
|
||
ctx.font = 'bold 14px Arial';
|
||
ctx.textAlign = 'center';
|
||
ctx.fillText('X', canvas.width - 15, canvas.height/2 - 10);
|
||
ctx.fillText('Y', canvas.width/2 + 15, 15);
|
||
}
|
||
|
||
function updatePositions() {
|
||
fetch('/positions')
|
||
.then(response => response.json())
|
||
.then(positions => {
|
||
clearCanvas();
|
||
positions.forEach(pos => {
|
||
const color = getColor(pos.id);
|
||
drawAGV(
|
||
pos.position.x,
|
||
pos.position.y,
|
||
pos.position.theta,
|
||
pos.id,
|
||
color
|
||
);
|
||
});
|
||
})
|
||
.catch(error => console.error('Error fetching positions:', error));
|
||
}
|
||
|
||
function startUpdates() {
|
||
if (!updateInterval) {
|
||
updateInterval = setInterval(updatePositions, 1000);
|
||
}
|
||
}
|
||
|
||
function stopUpdates() {
|
||
if (updateInterval) {
|
||
clearInterval(updateInterval);
|
||
updateInterval = null;
|
||
}
|
||
}
|
||
|
||
// Start updates automatically
|
||
startUpdates();
|
||
</script>
|
||
</body>
|
||
</html>
|
||
`);
|
||
});
|
||
|
||
// API endpoint to get current positions
|
||
app.get('/positions', (c: Context) => {
|
||
// Convert Map to array of objects with id and position
|
||
const positions = Array.from(agvPositions.entries()).map(([id, pos]) => ({
|
||
id,
|
||
position: pos
|
||
}));
|
||
return c.json(positions);
|
||
});
|
||
|
||
// Handle messages from main thread
|
||
self.onmessage = (event) => {
|
||
const message = event.data;
|
||
|
||
if (message.type === 'positionUpdate') {
|
||
const { agvId, position } = message.data;
|
||
// console.log("agvId", agvId, "position", position);
|
||
agvPositions.set(`${agvId.manufacturer}/${agvId.serialNumber}`, position);
|
||
} else if (message.type === 'shutdown') {
|
||
stopServer();
|
||
}
|
||
};
|
||
|
||
// Start the server
|
||
export async function startServer(port: number = 3001) {
|
||
if (isRunning) {
|
||
console.log("Web服务器已在运行中");
|
||
return false;
|
||
}
|
||
|
||
try {
|
||
server = Deno.serve({ port }, app.fetch);
|
||
isRunning = true;
|
||
console.log(`Web服务器已启动，监听端口 ${port}`);
|
||
return true;
|
||
} catch (error) {
|
||
console.error(`服务器启动失败: ${error}`);
|
||
return false;
|
||
}
|
||
}
|
||
|
||
// Stop the server
|
||
export async function stopServer() {
|
||
if (!isRunning || !server) {
|
||
console.log("Web服务器未在运行");
|
||
return false;
|
||
}
|
||
|
||
try {
|
||
await server.shutdown();
|
||
isRunning = false;
|
||
server = null;
|
||
console.log('Web服务器已关闭');
|
||
return true;
|
||
} catch (error) {
|
||
console.error(`服务器关闭失败: ${error}`);
|
||
return false;
|
||
}
|
||
}
|
||
|
||
// Start the server when the worker is initialized
|
||
startServer();
|