HardwareSetupVisualizer/index.html at main · PhilipU/HardwareSetupVisualizer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
    <title>Hardware Setup Visualizer</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <!-- Component Toolbox -->
        <div class="toolbox">
            <h3>Components</h3>
            <div class="category-selector-container">
                <label for="categorySelector">Category:</label>
                <div class="category-selector-wrapper">
                    <div id="categoryIcon" class="category-icon-display"></div>
                    <select id="categorySelector" class="category-selector">
                        <option value="all">📦 All Components</option>
                        <!-- Categories will be loaded by JavaScript -->
                    </select>
                </div>
            </div>
            <div class="component-list" id="componentList">
                <!-- Components will be loaded here -->
            </div>
            <div class="controls">
                <div class="toggle-control">
                    <label for="showLabels">
                        <input type="checkbox" id="showLabels" checked>
                        <span>Show Labels</span>
                    </label>
                </div>
                <button id="clearCanvas">Clear All</button>
                <button id="saveSetup">Save Setup</button>
                <button id="loadSetup">Load Setup</button>
                <input type="file" id="fileInput" accept=".json" style="display: none;">
            </div>

            <!-- Toolbox Context Menu -->
            <div id="toolboxContextMenu" class="context-menu" style="display: none; position: fixed;">
                <div class="menu-item" id="addToCanvas">
                    <span>➕ Add to canvas</span>
                </div>
                <div class="menu-item" id="openImage">
                    <span>🖼️ Open image</span>
                </div>
                <div class="menu-item" id="removeAll">
                    <span>🗑️ Remove all</span>
                </div>
            </div>
        </div>

        <!-- Canvas Area -->
        <div class="canvas-container">
            <canvas id="setupCanvas"></canvas>

            <!-- Component Context Menu -->
            <div id="componentContextMenu" class="context-menu" style="display: none;">
                <div class="menu-item" id="mirrorComponent">
                    <span>🔄 Mirror</span>
                </div>
                <div class="menu-item" id="deleteComponent">
                    <span>🗑️ Delete</span>
                </div>
            </div>

            <div class="canvas-info">
                <p><strong>Usage:</strong> Drag components from toolbox • Click connection points to create wires • Click wires to select • Double-click or press Delete to remove selected wire</p>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>