ver 2
This commit is contained in:
92
templates/compare.html
Normal file
92
templates/compare.html
Normal file
@@ -0,0 +1,92 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-TW">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Wafer Map Comparison</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-container">
|
||||
<!-- Sidebar for Controls -->
|
||||
<aside class="sidebar">
|
||||
<header class="sidebar-header">
|
||||
<h1>Map Comparison</h1>
|
||||
<a href="/" class="button-secondary" style="text-align: center;">Back to Editor</a>
|
||||
</header>
|
||||
|
||||
<!-- Step 1: Upload Multiple Files -->
|
||||
<div id="upload-section" class="card active">
|
||||
<div class="card-header">
|
||||
<h2>Step 1: Upload Maps</h2>
|
||||
</div>
|
||||
<form id="upload-form">
|
||||
<input type="file" id="file-input" name="files" accept=".txt" multiple required>
|
||||
<button type="submit" class="button-primary">Upload & Analyze</button>
|
||||
</form>
|
||||
<div id="upload-status" class="status"></div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Define Bins -->
|
||||
<div id="bin-definition-section" class="card">
|
||||
<div class="card-header">
|
||||
<h2>Step 2: Define Bin Codes</h2>
|
||||
<p class="hint-text">These definitions will apply to all maps.</p>
|
||||
</div>
|
||||
<form id="bin-definition-form">
|
||||
<div id="bin-map-container"></div>
|
||||
<button type="submit" class="button-primary">Generate Maps</button>
|
||||
</form>
|
||||
<div id="bin-status" class="status"></div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3: Set References & Compare -->
|
||||
<div id="comparison-controls-section" class="card">
|
||||
<div class="card-header">
|
||||
<h2>Step 3: Set References & Compare</h2>
|
||||
</div>
|
||||
<div id="reference-setter-container">
|
||||
<!-- Map reference setters will be dynamically inserted here -->
|
||||
</div>
|
||||
<div class="control-group-divider"></div>
|
||||
<button id="compare-btn" class="button-primary" disabled>Run Comparison</button>
|
||||
<div id="compare-status" class="status"></div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content Area for Canvas -->
|
||||
<main class="main-content">
|
||||
<div id="viewer-section" style="display: none;">
|
||||
<div class="map-viewer-controls">
|
||||
<label for="map-selector">Select Map:</label>
|
||||
<select id="map-selector"></select>
|
||||
<button id="rotate-map-btn" class="button-secondary">Rotate 90°</button>
|
||||
</div>
|
||||
<div id="map-container">
|
||||
<canvas id="wafer-map-canvas"></canvas>
|
||||
<div id="reference-info" class="status">Click on a die to set its reference point.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="comparison-result-section" style="display: none;">
|
||||
<div class="map-viewer-controls">
|
||||
<button id="back-to-viewer-btn" class="button-secondary">Back to Viewer</button>
|
||||
</div>
|
||||
<div id="result-map-container">
|
||||
<canvas id="result-map-canvas"></canvas>
|
||||
<div id="map-tooltip" class="map-tooltip"></div>
|
||||
</div>
|
||||
<div id="result-legend" class="counts-container"></div>
|
||||
</div>
|
||||
<div id="welcome-message">
|
||||
<h2>Welcome to Map Comparison</h2>
|
||||
<p>Please upload two or more map files to begin.</p>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="{{ url_for('static', filename='js/compare.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
@@ -15,6 +15,7 @@
|
||||
<aside class="sidebar">
|
||||
<header class="sidebar-header">
|
||||
<h1>Wafer Map Pro</h1>
|
||||
<a href="/compare" class="button-secondary" style="text-align: center; margin-top: 10px;">Go to Comparison</a>
|
||||
</header>
|
||||
|
||||
<!-- Step 1: Upload -->
|
||||
@@ -50,23 +51,72 @@
|
||||
<h2>Step 3: Actions</h2>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<div class="control-group">
|
||||
<label for="bin-type-selector">Set Bin Type:</label>
|
||||
<select id="bin-type-selector">
|
||||
<option value="good">Good</option>
|
||||
<option value="ng">NG</option>
|
||||
<option value="dummy">Dummy</option>
|
||||
<option value="ignore">Ignore</option>
|
||||
</select>
|
||||
<button id="update-selection-btn" class="button-secondary">Apply</button>
|
||||
<!-- Edit Tools -->
|
||||
<div class="control-section">
|
||||
<h3 class="control-section-header">Edit Tools</h3>
|
||||
<div class="control-group">
|
||||
<label for="bin-type-selector">Set Bin Type:</label>
|
||||
<select id="bin-type-selector">
|
||||
<option value="good">Good</option>
|
||||
<option value="ng">NG</option>
|
||||
<option value="dummy">Dummy</option>
|
||||
<option value="ignore">Ignore</option>
|
||||
</select>
|
||||
<button id="update-selection-btn" class="button-secondary">Apply to Selection</button>
|
||||
</div>
|
||||
<div class="control-group-divider"></div>
|
||||
<div class="control-group">
|
||||
<label>Selection Mode:</label>
|
||||
<div class="btn-group">
|
||||
<button id="box-select-btn" class="button-secondary active">Box</button>
|
||||
<button id="polygon-select-btn" class="button-secondary">Polygon</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="hint-text">Pro-tip: Hold <strong>Shift</strong> for Box Select, or <strong>Ctrl</strong> for multi-select.</p>
|
||||
<div class="control-group-divider"></div>
|
||||
<div class="control-group vertical">
|
||||
<label>Inset from Edge:</label>
|
||||
<div class="inset-control-row">
|
||||
<label for="inset-layers">Layers:</label>
|
||||
<input type="number" id="inset-layers" value="1" min="1">
|
||||
</div>
|
||||
<div class="inset-control-row">
|
||||
<label for="inset-from-bin">From:</label>
|
||||
<select id="inset-from-bin">
|
||||
<option value="good">Good</option>
|
||||
<option value="ng">NG</option>
|
||||
<option value="dummy">Dummy</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="inset-control-row">
|
||||
<label for="inset-to-bin">To:</label>
|
||||
<select id="inset-to-bin">
|
||||
<option value="ng">NG</option>
|
||||
<option value="good">Good</option>
|
||||
<option value="dummy">Dummy</option>
|
||||
</select>
|
||||
</div>
|
||||
<button id="inset-map-btn" class="button-secondary">Run Inset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group-grid">
|
||||
<button id="rotate-btn" class="button-secondary">Rotate 90°</button>
|
||||
<button id="reset-view-btn" class="button-secondary">Reset View</button>
|
||||
|
||||
<!-- View Tools -->
|
||||
<div class="control-section">
|
||||
<h3 class="control-section-header">View Tools</h3>
|
||||
<div class="control-group-grid four-cols">
|
||||
<button id="undo-btn" class="button-secondary" disabled>Undo</button>
|
||||
<button id="redo-btn" class="button-secondary" disabled>Redo</button>
|
||||
<button id="rotate-btn" class="button-secondary">Rotate 90°</button>
|
||||
<button id="reset-view-btn" class="button-secondary">Reset Map</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- File Actions -->
|
||||
<div class="control-section">
|
||||
<h3 class="control-section-header">File</h3>
|
||||
<a id="download-btn" class="button-primary" href="/download" download>Download .txt</a>
|
||||
</div>
|
||||
</div>
|
||||
<p class="hint-text">Pro-tip: Hold <strong>Shift</strong> and drag to select a region.</p>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
Reference in New Issue
Block a user