stm32-web-programmer/index.html at master · AmeNote-Michael/stm32-web-programmer · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>STM32 Programmer</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">

  <div>
    <h1>STM32 Flash Programmer</h1>
    <p class="subtitle">USB DFU (DfuSe) via WebUSB &mdash; Chrome or Electron desktop app</p>
  </div>

  <!-- File -->
  <section>
    <h2>Firmware File</h2>
    <div class="drop-zone" id="dropZone">
      Drop .hex or .bin file here, or click to browse
      <input type="file" id="fileInput" accept=".hex,.bin" hidden>
    </div>

    <div class="file-info" id="fileInfo" hidden>
      <span id="fileName"></span>
      <span id="fileSize"></span>
      <span id="segInfo"></span>
    </div>

    <div class="bin-row" id="binRow" hidden>
      <label for="binAddr">Flash address</label>
      <input type="text" id="binAddr" value="0x08000000" spellcheck="false">
    </div>
  </section>

  <!-- Device -->
  <section>
    <h2>Device</h2>
    <div class="device-row">
      <button id="connectBtn">Connect Device</button>
      <span class="status" id="deviceStatus">No device</span>
    </div>
    <div class="device-info" id="deviceInfo" hidden>
      <span id="deviceName"></span>
      <span id="mapInfo"></span>
    </div>
  </section>

  <!-- Program -->
  <section>
    <h2>Program</h2>
    <div class="action-row">
      <button class="primary" id="programBtn" disabled>Program Flash</button>
      <label>
        <input type="checkbox" id="verifyAfter" checked>
        Verify after write
      </label>
      <label>
        <input type="checkbox" id="leaveDfu" checked>
        Leave DFU &amp; reset
      </label>
    </div>
  </section>

  <!-- Progress -->
  <section id="progressSec" hidden>
    <h2>Progress</h2>
    <div class="progress-group">
      <label>Erase</label>
      <div class="progress-track"><div class="progress-fill" id="eraseBar" style="width:0%"></div></div>
      <span class="progress-lbl" id="eraseLbl">—</span>
    </div>
    <div class="progress-group">
      <label>Write</label>
      <div class="progress-track"><div class="progress-fill" id="writeBar" style="width:0%"></div></div>
      <span class="progress-lbl" id="writeLbl">—</span>
    </div>
    <div class="progress-group">
      <label>Verify</label>
      <div class="progress-track"><div class="progress-fill" id="verifyBar" style="width:0%"></div></div>
      <span class="progress-lbl" id="verifyLbl">—</span>
    </div>
  </section>

  <!-- Log -->
  <section>
    <div class="log-header">
      <span>Log</span>
      <button class="btn-sm" id="clearLog">Clear</button>
    </div>
    <div id="log"></div>
  </section>

</div>
<script src="src/hex-parser.js"></script>
<script src="src/dfu.js"></script>
<script src="src/app.js"></script>
</body>
</html>