webupdi/index.html at main · manuelkasper/webupdi · 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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebUPDI - Serial UPDI Programmer</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>WebUPDI</h1>
            <p>Web-based Serial UPDI Programmer</p>
        </div>

        <div class="content">
            <div class="content-wrapper">
                <div class="controls-column">
                    <!-- Connection Section -->
                    <div class="section">
                        <h2>Connection Settings</h2>

                        <div id="status" class="status disconnected">
                            Status: <strong>Disconnected</strong>
                        </div>

                        <div class="input-row">
                            <div class="form-group">
                                <label for="baud-rate">Baud Rate:</label>
                                <select id="baud-rate">
                                    <option value="115200">115200</option>
                                    <option value="230400" selected>230400</option>
                                    <option value="460800">460800</option>
                                    <option value="921600">921600</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="timeout">Read Timeout (ms):</label>
                                <input type="number" id="timeout" value="1000" min="10" max="3000" step="1">
                            </div>
                        </div>

                        <div class="button-group">
                            <button class="btn-primary" id="btn-connect">Connect</button>
                            <button class="btn-danger" id="btn-disconnect">Disconnect</button>
                        </div>
                    </div>

                    <!-- Device Selection Section -->
                    <div class="section">
                        <h2>Device Configuration</h2>

                        <div class="form-group">
                            <label for="device-select">Select Target Device:</label>
                            <select id="device-select">
                                <option value="">-- Select a device --</option>
                            </select>
                        </div>

                        <div id="selected-device-info">
                            <h3>Selected Device Information:</h3>
                            <div></div>
                        </div>
                    </div>

                    <!-- Programming Section -->
                    <div class="section">
                        <h2>Programming Operations</h2>

                        <div class="advanced-section">
                            <h3>Load Intel HEX or Binary File</h3>
                            <div class="form-group">
                                <label for="program-file">Select File:</label>
                                <input type="file" id="program-file" accept=".hex,.eep,.bin">
                            </div>
                            <div class="form-group">
                                <label for="program-target">Target Memory:</label>
                                <select id="program-target">
                                    <option value="flash">Flash Memory</option>
                                    <option value="eeprom">EEPROM</option>
                                    <option value="userrow">User Row</option>
                                </select>
                            </div>
                            <div id="program-preview">
                                <small id="program-info"></small>
                            </div>
                            <div id="program-progress">
                                <div class="program-progress-bar-container">
                                    <div class="program-progress-bar-background">
                                        <div id="program-progress-bar"></div>
                                    </div>
                                    <small id="program-progress-text"></small>
                                </div>
                            </div>
                            <button class="btn-primary" id="btn-program-file">Program File</button>
                        </div>
                    </div>

                    <!-- Chip Erase Section -->
                    <div class="section">
                        <div class="button-group">
                            <button class="btn-danger" id="btn-unlock">Chip Erase/Unlock</button>
                        </div>
                    </div>

                    <!-- Memory Operations Section -->
                    <div class="section">
                        <h2>Memory Operations</h2>

                        <div class="advanced-section">
                            <h3>Read Data</h3>
                            <div class="input-row">
                                <div class="form-group">
                                    <label for="read-address">Address (hex):</label>
                                    <input type="text" id="read-address" placeholder="0x1400" value="0x1400">
                                </div>
                                <div class="form-group">
                                    <label for="read-size">Size (bytes):</label>
                                    <input type="number" id="read-size" value="32" min="1" max="256">
                                </div>
                            </div>
                            <button class="btn-primary" id="btn-read-data">Read Data</button>
                        </div>
                    </div>
                </div>

                <!-- Log Section -->
                <div class="log-column">
                    <div class="section">
                        <h2>Operation Log</h2>
                        <button class="btn-secondary" id="btn-clear-log">Clear Log</button>
                        <div id="log" class="log"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="module">
        import { initializeUI } from './webupdi-ui.ts';

        // Initialize the UI when the page loads
        window.addEventListener('load', () => {
            initializeUI();
        });
    </script>
</body>
</html>