egg/wafer_map_webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ver 2

Browse Source
This commit is contained in:
beabigegg
2025-07-30 11:24:58 +08:00
parent ede5af22f8
commit 9f7040ece9
10 changed files with 1667 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

374
static/js/script.js
View File

@@ -20,6 +20,11 @@ document.addEventListener('DOMContentLoaded', () => {
const updateSelectionBtn = document.getElementById('update-selection-btn');
const resetViewBtn = document.getElementById('reset-view-btn');
const rotateBtn = document.getElementById('rotate-btn');
const polygonSelectBtn = document.getElementById('polygon-select-btn');
const boxSelectBtn = document.getElementById('box-select-btn');
const insetMapBtn = document.getElementById('inset-map-btn');
const undoBtn = document.getElementById('undo-btn');
const redoBtn = document.getElementById('redo-btn');
const binCountsContainer = document.getElementById('bin-counts');
// --- State Management ---
@@ -33,10 +38,17 @@ document.addEventListener('DOMContentLoaded', () => {
const SELECTION_COLOR = 'rgba(0, 123, 255, 0.5)';
let transform = { x: 0, y: 0, scale: 1 };
let isPanning = false;
let isSelecting = false;
let panStart = { x: 0, y: 0 };
let selectionStart = { x: 0, y: 0 };
let selectionEnd = { x: 0, y: 0 };
// --- Selection modes ---
let selectionMode = 'box'; // 'box', 'polygon'
let isBoxSelecting = false;
let boxSelectionStart = { x: 0, y: 0 };
let boxSelectionEnd = { x: 0, y: 0 };
let isDrawingPolygon = false;
let polygonPoints = [];
let currentMousePos = { x: 0, y: 0 };
// --- UI/UX Functions ---
function setStatus(element, message, isError = false) {
@@ -62,6 +74,21 @@ document.addEventListener('DOMContentLoaded', () => {
if(to) to.classList.add('active');
}
function updateHistoryButtons(canUndo, canRedo) {
undoBtn.disabled = !canUndo;
redoBtn.disabled = !canRedo;
}
function handleMapUpdate(result) {
waferMap = result.wafer_map;
mapRows = result.rows;
mapCols = result.cols;
selection.clear();
updateBinCounts();
draw();
}
// --- Canvas & Data Functions ---
function worldToScreen(x, y) {
return { x: x * transform.scale + transform.x, y: y * transform.scale + transform.y };
@@ -121,17 +148,7 @@ document.addEventListener('DOMContentLoaded', () => {
function draw() {
requestAnimationFrame(() => {
const dieSize = 10;
const minScaleForGrid = 4;
const maxScaleForGrid = 10;
let gridAlpha = (transform.scale - minScaleForGrid) / (maxScaleForGrid - minScaleForGrid);
gridAlpha = Math.min(1, Math.max(0, gridAlpha));
// Dynamically set canvas background
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (gridAlpha > 0) {
ctx.fillStyle = `rgba(240, 240, 240, ${gridAlpha})`;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
ctx.save();
ctx.translate(transform.x, transform.y);
@@ -145,24 +162,6 @@ document.addEventListener('DOMContentLoaded', () => {
ctx.fillRect(c * dieSize, r * dieSize, dieSize, dieSize);
}
}
// Draw grid lines
if (gridAlpha > 0) {
ctx.strokeStyle = `rgba(0, 0, 0, ${gridAlpha})`;
ctx.lineWidth = 1 / transform.scale;
for (let r = 0; r <= mapRows; r++) {
ctx.beginPath();
ctx.moveTo(0, r * dieSize);
ctx.lineTo(mapCols * dieSize, r * dieSize);
ctx.stroke();
}
for (let c = 0; c <= mapCols; c++) {
ctx.beginPath();
ctx.moveTo(c * dieSize, 0);
ctx.lineTo(c * dieSize, mapRows * dieSize);
ctx.stroke();
}
}
// Draw selection highlights
ctx.fillStyle = SELECTION_COLOR;
@@ -174,19 +173,44 @@ document.addEventListener('DOMContentLoaded', () => {
ctx.restore();
// Draw selection rectangle (in screen space)
if (isSelecting) {
if (isBoxSelecting) {
ctx.fillStyle = 'rgba(0, 123, 255, 0.2)';
ctx.strokeStyle = 'rgba(0, 123, 255, 0.8)';
ctx.lineWidth = 1;
const rect = {
x: Math.min(selectionStart.x, selectionEnd.x),
y: Math.min(selectionStart.y, selectionEnd.y),
w: Math.abs(selectionStart.x - selectionEnd.x),
h: Math.abs(selectionStart.y - selectionEnd.y)
x: Math.min(boxSelectionStart.x, boxSelectionEnd.x),
y: Math.min(boxSelectionStart.y, boxSelectionEnd.y),
w: Math.abs(boxSelectionStart.x - boxSelectionEnd.x),
h: Math.abs(boxSelectionStart.y - boxSelectionEnd.y)
};
ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
}
// Draw polygon (in screen space)
if (isDrawingPolygon && polygonPoints.length > 0) {
ctx.beginPath();
ctx.moveTo(polygonPoints[0].x, polygonPoints[0].y);
for (let i = 1; i < polygonPoints.length; i++) {
ctx.lineTo(polygonPoints[i].x, polygonPoints[i].y);
}
ctx.strokeStyle = 'rgba(255, 0, 0, 0.8)';
ctx.lineWidth = 2;
ctx.stroke();
// Draw line to current mouse position
ctx.lineTo(currentMousePos.x, currentMousePos.y);
ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
ctx.stroke();
// Draw vertices
ctx.fillStyle = 'red';
polygonPoints.forEach(p => {
ctx.beginPath();
ctx.arc(p.x, p.y, 4, 0, 2 * Math.PI);
ctx.fill();
});
}
});
}
@@ -241,16 +265,13 @@ document.addEventListener('DOMContentLoaded', () => {
const result = await response.json();
if (!response.ok) throw new Error(result.error);
waferMap = result.wafer_map;
mapRows = result.rows;
mapCols = result.cols;
welcomeMessage.style.display = 'none';
editorSection.style.display = 'flex';
handleMapUpdate(result);
resetTransform();
updateBinCounts();
draw();
updateHistoryButtons(false, false); // History starts here
switchCard(binDefinitionSection, editorControlsSection);
} catch (error) {
@@ -260,6 +281,7 @@ document.addEventListener('DOMContentLoaded', () => {
canvas.addEventListener('wheel', (e) => {
e.preventDefault();
if (isDrawingPolygon) return;
const rect = canvas.getBoundingClientRect();
const mouse = { x: e.clientX - rect.left, y: e.clientY - rect.top };
const worldPos = screenToWorld(mouse.x, mouse.y);
@@ -275,10 +297,12 @@ document.addEventListener('DOMContentLoaded', () => {
});
canvas.addEventListener('mousedown', (e) => {
if (e.shiftKey) {
isSelecting = true;
selectionStart = { x: e.offsetX, y: e.offsetY };
selectionEnd = selectionStart;
if (selectionMode === 'box' && e.shiftKey) {
isBoxSelecting = true;
boxSelectionStart = { x: e.offsetX, y: e.offsetY };
boxSelectionEnd = boxSelectionStart;
} else if (selectionMode === 'polygon') {
// Polygon drawing is handled in 'click' to avoid conflict with panning
} else {
isPanning = true;
panStart = { x: e.clientX, y: e.clientY };
@@ -286,6 +310,7 @@ document.addEventListener('DOMContentLoaded', () => {
});
canvas.addEventListener('mousemove', (e) => {
currentMousePos = { x: e.offsetX, y: e.offsetY };
if (isPanning) {
const dx = e.clientX - panStart.x;
const dy = e.clientY - panStart.y;
@@ -293,55 +318,157 @@ document.addEventListener('DOMContentLoaded', () => {
transform.y += dy;
panStart = { x: e.clientX, y: e.clientY };
draw();
} else if (isSelecting) {
selectionEnd = { x: e.offsetX, y: e.offsetY };
} else if (isBoxSelecting) {
boxSelectionEnd = { x: e.offsetX, y: e.offsetY };
draw();
} else if (isDrawingPolygon) {
draw();
}
});
window.addEventListener('mouseup', (e) => {
if (isPanning) isPanning = false;
if (isSelecting) {
isSelecting = false;
const startWorld = screenToWorld(selectionStart.x, selectionStart.y);
const endWorld = screenToWorld(selectionEnd.x, selectionEnd.y);
const startCol = Math.floor(Math.min(startWorld.x, endWorld.x) / 10);
const endCol = Math.floor(Math.max(startWorld.x, endWorld.x) / 10);
const startRow = Math.floor(Math.min(startWorld.y, endWorld.y) / 10);
const endRow = Math.floor(Math.max(startWorld.y, endWorld.y) / 10);
if (!e.ctrlKey) selection.clear();
for (let r = startRow; r <= endRow; r++) {
for (let c = startCol; c <= endCol; c++) {
if (r >= 0 && r < mapRows && c >= 0 && c < mapCols) {
const key = `${r},${c}`;
if (selection.has(key)) selection.delete(key);
else selection.add(key);
}
}
}
setStatus(editorStatus, `${selection.size} die(s) selected.`);
if (isBoxSelecting) {
isBoxSelecting = false;
selectDiesInBox();
draw();
}
});
canvas.addEventListener('click', (e) => {
const wasDrag = Math.abs(e.clientX - panStart.x) > 2 || Math.abs(e.clientY - panStart.y) > 2;
if (e.shiftKey || (isPanning && wasDrag)) return;
if (isPanning && wasDrag) return;
const die = getDieAtScreen(e.offsetX, e.offsetY);
if (die) {
if (!e.ctrlKey) selection.clear();
const key = `${die.row},${die.col}`;
if (selection.has(key)) selection.delete(key);
else selection.add(key);
setStatus(editorStatus, `${selection.size} die(s) selected.`);
draw();
if (selectionMode === 'polygon') {
handlePolygonClick(e);
} else {
if (e.shiftKey) return; // Box selection is handled in mousedown/up
const die = getDieAtScreen(e.offsetX, e.offsetY);
if (die) {
if (!e.ctrlKey) selection.clear();
const key = `${die.row},${die.col}`;
if (selection.has(key)) selection.delete(key);
else selection.add(key);
setStatus(editorStatus, `${selection.size} die(s) selected.`);
draw();
}
}
});
canvas.addEventListener('dblclick', (e) => {
if (selectionMode === 'polygon' && isDrawingPolygon) {
e.preventDefault();
closeAndSelectPolygon();
}
});
// --- Selection Logic ---
function selectDiesInBox() {
const startWorld = screenToWorld(boxSelectionStart.x, boxSelectionStart.y);
const endWorld = screenToWorld(boxSelectionEnd.x, boxSelectionEnd.y);
const startCol = Math.floor(Math.min(startWorld.x, endWorld.x) / 10);
const endCol = Math.floor(Math.max(startWorld.x, endWorld.x) / 10);
const startRow = Math.floor(Math.min(startWorld.y, endWorld.y) / 10);
const endRow = Math.floor(Math.max(startWorld.y, endWorld.y) / 10);
if (!window.event.ctrlKey) selection.clear();
for (let r = startRow; r <= endRow; r++) {
for (let c = startCol; c <= endCol; c++) {
if (r >= 0 && r < mapRows && c >= 0 && c < mapCols) {
const key = `${r},${c}`;
if (selection.has(key)) selection.delete(key);
else selection.add(key);
}
}
}
setStatus(editorStatus, `${selection.size} die(s) selected.`);
}
function handlePolygonClick(e) {
const point = { x: e.offsetX, y: e.offsetY };
if (!isDrawingPolygon) {
isDrawingPolygon = true;
polygonPoints = [point];
setStatus(editorStatus, 'Polygon drawing started. Click to add points, double-click to finish.');
} else {
// Check if closing polygon
const firstPoint = polygonPoints[0];
const dist = Math.sqrt(Math.pow(point.x - firstPoint.x, 2) + Math.pow(point.y - firstPoint.y, 2));
if (dist < 10 && polygonPoints.length > 2) {
closeAndSelectPolygon();
} else {
polygonPoints.push(point);
}
}
draw();
}
function closeAndSelectPolygon() {
if (!window.event.ctrlKey) selection.clear();
selectDiesInPolygon();
isDrawingPolygon = false;
polygonPoints = [];
draw();
}
function selectDiesInPolygon() {
const dieSize = 10;
const polygonInWorld = polygonPoints.map(p => screenToWorld(p.x, p.y));
for (let r = 0; r < mapRows; r++) {
for (let c = 0; c < mapCols; c++) {
const dieCenter = {
x: c * dieSize + dieSize / 2,
y: r * dieSize + dieSize / 2
};
if (pointInPolygon(dieCenter, polygonInWorld)) {
const key = `${r},${c}`;
if (selection.has(key)) selection.delete(key);
else selection.add(key);
}
}
}
setStatus(editorStatus, `${selection.size} die(s) selected.`);
}
function pointInPolygon(point, vs) {
// ray-casting algorithm based on
// https://wrf.ecse.rpi.edu/Research/Short_Notes/pnpoly.html
const x = point.x, y = point.y;
let inside = false;
for (let i = 0, j = vs.length - 1; i < vs.length; j = i++) {
const xi = vs[i].x, yi = vs[i].y;
const xj = vs[j].x, yj = vs[j].y;
const intersect = ((yi > y) !== (yj > y))
&& (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
if (intersect) inside = !inside;
}
return inside;
}
// --- Action Buttons ---
function setSelectionMode(mode) {
selectionMode = mode;
if (mode === 'polygon') {
polygonSelectBtn.classList.add('active');
boxSelectBtn.classList.remove('active');
setStatus(editorStatus, 'Polygon select mode. Click to draw, dbl-click to finish.');
isDrawingPolygon = false;
polygonPoints = [];
} else { // box mode
boxSelectBtn.classList.add('active');
polygonSelectBtn.classList.remove('active');
setStatus(editorStatus, 'Box select mode. Hold Shift and drag to select.');
isDrawingPolygon = false; // Cancel any ongoing polygon drawing
}
draw();
}
boxSelectBtn.addEventListener('click', () => setSelectionMode('box'));
polygonSelectBtn.addEventListener('click', () => setSelectionMode('polygon'));
updateSelectionBtn.addEventListener('click', async () => {
if (selection.size === 0) {
setStatus(editorStatus, 'No dies selected to update.', true);
@@ -361,19 +488,30 @@ document.addEventListener('DOMContentLoaded', () => {
const result = await response.json();
if (!response.ok) throw new Error(result.error);
waferMap = result.wafer_map;
selection.clear();
updateBinCounts();
handleMapUpdate(result);
setStatus(editorStatus, 'Update successful.');
draw();
updateHistoryButtons(true, false);
} catch (error) {
setStatus(editorStatus, `Error: ${error.message}`, true);
}
});
resetViewBtn.addEventListener('click', () => {
resetTransform();
draw();
resetViewBtn.addEventListener('click', async () => {
setStatus(editorStatus, 'Resetting map to original state...');
try {
const response = await fetch('/reset_map', { method: 'POST' });
const result = await response.json();
if (!response.ok) throw new Error(result.error);
handleMapUpdate(result);
resetTransform(); // Also reset zoom and pan
draw();
setStatus(editorStatus, 'Map has been reset.');
updateHistoryButtons(result.can_undo, result.can_redo);
} catch (error) {
setStatus(editorStatus, `Error: ${error.message}`, true);
}
});
rotateBtn.addEventListener('click', async () => {
@@ -383,19 +521,69 @@ document.addEventListener('DOMContentLoaded', () => {
const result = await response.json();
if (!response.ok) throw new Error(result.error);
waferMap = result.wafer_map;
mapRows = result.rows;
mapCols = result.cols;
selection.clear();
resetTransform();
updateBinCounts();
draw();
handleMapUpdate(result);
setStatus(editorStatus, 'Map rotated successfully.');
updateHistoryButtons(true, false);
} catch (error) {
setStatus(editorStatus, `Error: ${error.message}`, true);
}
});
insetMapBtn.addEventListener('click', async () => {
const layers = document.getElementById('inset-layers').value;
const fromBin = document.getElementById('inset-from-bin').value;
const toBin = document.getElementById('inset-to-bin').value;
if (parseInt(layers) < 1) {
setStatus(editorStatus, 'Inset layers must be at least 1.', true);
return;
}
if (fromBin === toBin) {
setStatus(editorStatus, "'From' and 'To' bin types cannot be the same.", true);
return;
}
setStatus(editorStatus, `Insetting ${layers} layer(s)...`);
try {
const response = await fetch('/inset_map', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
layers: layers,
from_bin: fromBin,
to_bin: toBin
}),
});
const result = await response.json();
if (!response.ok) throw new Error(result.error);
handleMapUpdate(result);
setStatus(editorStatus, 'Inset operation successful.');
updateHistoryButtons(true, false);
} catch (error) {
setStatus(editorStatus, `Error: ${error.message}`, true);
}
});
async function handleHistoryAction(action) {
setStatus(editorStatus, `Performing ${action}...`);
try {
const response = await fetch(`/${action}`, { method: 'POST' });
const result = await response.json();
if (!response.ok) throw new Error(result.error);
handleMapUpdate(result);
setStatus(editorStatus, `${action} successful.`);
updateHistoryButtons(result.can_undo, result.can_redo);
} catch (error) {
setStatus(editorStatus, `Error: ${error.message}`, true);
}
}
undoBtn.addEventListener('click', () => handleHistoryAction('undo'));
redoBtn.addEventListener('click', () => handleHistoryAction('redo'));
new ResizeObserver(() => {
if (mapRows > 0) { // Only resize if there is a map