84 lines
2.6 KiB
HTML
84 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SCADA Device Layout Tool</title>
|
|
<link rel="stylesheet" crossorigin href="/assets/index-D5Q66DLP.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- Toolbar -->
|
|
<div id="toolbar">
|
|
<h2>Project</h2>
|
|
<div class="setting">
|
|
<label for="mcmSelect">MCM:</label>
|
|
<select id="mcmSelect">
|
|
<option value="MCM08">MCM08</option>
|
|
</select>
|
|
</div>
|
|
|
|
<h2>Background PDF</h2>
|
|
<div class="setting">
|
|
<button id="loadPDF">Load PDF</button>
|
|
<input type="file" id="pdfFile" accept=".pdf" style="display:none">
|
|
</div>
|
|
<div class="setting">
|
|
<button id="pdfZoomIn">PDF +</button>
|
|
<button id="pdfZoomOut">PDF -</button>
|
|
</div>
|
|
<div class="setting">
|
|
<button id="editBackground">Edit Background</button>
|
|
<button id="pdfRemove">Remove PDF</button>
|
|
</div>
|
|
<div class="setting" id="pdfInfo" style="font-size:11px;color:#888;"></div>
|
|
|
|
<h2>Settings</h2>
|
|
<div class="setting">
|
|
<label for="gridSize">Grid Size (px):</label>
|
|
<input type="number" id="gridSize" value="20" min="5" max="100" step="5">
|
|
</div>
|
|
<div class="setting">
|
|
<label for="minSpacing">Min Edge Spacing (px):</label>
|
|
<input type="number" id="minSpacing" value="10" min="0" max="100" step="5">
|
|
</div>
|
|
<div class="setting">
|
|
<label>
|
|
<input type="checkbox" id="showGrid" checked> Show Grid
|
|
</label>
|
|
</div>
|
|
<div class="setting">
|
|
<label>
|
|
<input type="checkbox" id="snapEnabled" checked> Snap to Grid
|
|
</label>
|
|
</div>
|
|
<div class="setting">
|
|
<button id="clearCanvas">Clear Canvas</button>
|
|
<button id="exportSVG">Export SVG</button>
|
|
<button id="saveLayout">Save Layout</button>
|
|
<button id="loadLayout">Load Layout</button>
|
|
<input type="file" id="importFile" accept=".json" style="display:none">
|
|
</div>
|
|
|
|
<h2>Symbols</h2>
|
|
<div id="palette"></div>
|
|
</div>
|
|
|
|
<!-- Canvas -->
|
|
<div id="canvas-wrapper">
|
|
<div id="canvas">
|
|
<div id="pdf-background"></div>
|
|
<svg id="grid-overlay" width="1920" height="1080"></svg>
|
|
<div id="drop-zone"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
|
|
<script>
|
|
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
|
|
</script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|