index.html
4.21 KB
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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../sakura.css" />
<title>WebUSB DFU</title>
<script src="dfu.js"></script>
<script src="dfuse.js"></script>
<script src="FileSaver.js"></script>
<script src="dfu-util.js"></script>
<style>
p.warning {
color: red;
}
p.error {
color: red;
font-weight: bold;
}
label.radio {
display: inline;
}
input:invalid {
color:red;
}
</style>
</head>
<body>
<a href="https://github.com/devanlai/webdfu"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
<p>
<span id="status"></span>
</p>
<p>
<label for="vid">Vendor ID (hex):</label>
<input list="vendor_ids" type="text" name="vid" id="vid" maxlength="6" size="8" pattern="0x[A-Fa-f0-9]{1,4}"/>
<datalist id="vendor_ids">
<option value="0x1209">dapboot DFU bootloader</option>
<option value="0x0D28">mbed DAPLink</option>
<option value="0x1EAF">LeafLabs Maple/stm32duino bootloader</option>
</datalist>
</p>
<p>
<button id="connect">Connect</button>
</p>
<dialog id="interfaceDialog">
Your device has multiple DFU interfaces. Select one from the list below:
<form id="interfaceForm" method="dialog">
<button id="selectInterface" type="submit">Select interface</button>
</form>
</dialog>
<p>
<div id="usbInfo" style="white-space: pre"></div>
<div id="dfuInfo" style="white-space: pre"></div>
</p>
<fieldset>
<legend>Runtime mode</legend>
<button id="detach" disabled="true">Detach DFU</button>
</fieldset>
<fieldset>
<form id="configForm">
<label for="transferSize">Transfer Size:</label>
<input type="number" name="transferSize" id="transferSize" value="1024"/>
<div id="dfuseFields" hidden="true">
<label for="dfuseStartAddress">DfuSe Start Address:</label>
<input type="text" name="dfuseStartAddress" id="dfuseStartAddress" title="Initial memory address to read/write from (hex)" size="10" pattern="0x[A-Fa-f0-9]+"/>
<label for="dfuseUploadSize">DfuSe Upload Size:</label>
<input type="number" name="dfuseUploadSize" id="dfuseUploadSize" min="1"/>
</div>
<legend>DFU mode</legend>
<fieldset>
<legend>Firmware Download (write to USB device)</legend>
<p>
<input type="file" id="firmwareFile" name="file" disabled="true"/>
</p>
<p>
<button id="download" disabled="true">Download</button>
</p>
<div class="log" id="downloadLog"></div>
</fieldset>
<fieldset>
<legend>Firmware Upload (read from USB device)</legend>
<p>
<button id="upload" disabled="true">Upload</button>
</p>
<div class="log" id="uploadLog"></div>
</fieldset>
</form>
</fieldset>
<h1>About</h1>
<p>
This is a proof-of-concept demo of host <a href="http://wiki.openmoko.org/wiki/USB_DFU">USB DFU</a> drivers in Javascript utilizing the <a href="https://wicg.github.io/webusb/">WebUSB</a> draft standard to implement USB firmware updates from the browser.
</p>
<h1>Prerequisites</h1>
<p>In order to run this demo, you will need:</p>
<ul>
<li>
<p>An up-to-date version of Chrome, at least version 61 or newer</p>
</li>
<li>
<p>A USB DFU class device</p>
<p>For a WebUSB friendly USB DFU bootloader that can be flashed onto <a href="http://wiki.stm32duino.com/index.php?title=Blue_Pill">inexpensive STM32F103 boards</a>, check out the <a href="https://github.com/devanlai/dapboot">dapboot</a> project.</p>
<p>Some recent STM32 parts have on-chip USB DfuSe bootloaders that are supported by this site.</p>
</li>
<ul>
</body>
</html>