Added secure web example

2025-12-19 07:23:20 +08:00 · 2017-05-11 01:33:22 +03:00
parent b224d57e55
commit 372658e9b1
11 changed files with 1318 additions and 246 deletions
--- a/examples/dfu_web.html
+++ b/examples/dfu_web.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>web-bluetooth-dfu</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <style>
+        html, body { width: 100%; padding: 0; margin: 0; font-family: sans-serif; }
+        input { font-size: 20px; }
+        button { font-size: 20px; padding: 0 20px; display: block; margin: 20px auto; }
+        .device-type { width: 160px; margin: 20px auto; white-space: nowrap; }
+        #results { height: 300px; overflow: auto; border: 1px solid lightgray; margin: 5px; }
+    </style>
+</head>
+<body>
+    <div class="device-type">
+        <input type="radio" name="device-type" id="nrf51" checked>
+        <label for="nrf51">nRF51</label>
+        <input type="radio" name="device-type" id="nrf52">
+        <label for="nrf52">nRF52</label>
+    </div>
+
+    <button onclick="setMode()">Set Mode</button>
+    <button onclick="findDFU()">Transfer</button>
+    <button onclick="both()">Both</button>
+
+    <div id="results"></div>
+
+    <script src="/dist/crc16.js"></script>
+    <script src="/dist/dfu.js"></script>
+    <script src="/dist/hex2bin.js"></script>
+
+    <script>
+        var resultsEl = document.getElementById("results");
+        var urlBase = "//thegecko.github.io/web-bluetooth-dfu/firmware/";
+
+        function log(message) {
+            console.log(message);
+            resultsEl.innerText += message + "\n";
+            resultsEl.scrollTop = resultsEl.scrollHeight;
+        }
+        dfu.addLogger(log);
+        hex2bin.addLogger(log);
+
+        function download(url) {
+            return new Promise(function(resolve, reject) {
+                var xhr = new XMLHttpRequest();
+                xhr.addEventListener("load", function() {
+                    resolve(this.responseText);
+                });
+                xhr.open("GET", url);
+                xhr.send();
+            });
+        }
+
+        function transfer(device) {
+            return new Promise(function(resolve, reject) {
+                var url = "";
+                var deviceType = document.querySelector('input[name="device-type"]:checked').id;
+
+                switch(deviceType) {
+                    case "nrf51":
+                        url = urlBase + "nrf51_app_{0}.hex";
+                        url = url.replace("{0}", device.name === "Hi_Rob" ? "bye" : "hi");
+                        break;
+                    case "nrf52":
+                        url = urlBase + "nrf52_app.hex";
+                        break;
+                }
+
+                download(url)
+                .then(hex => {
+                    var buffer = hex2bin.convert(hex);
+                    log("downloaded length: " + buffer.byteLength);
+
+                    // dfu.ImageType.Application is the default value for the third parameter
+                    // Specify this if you want to upload a softdevice/bootloader
+                    return dfu.provision(device, buffer);
+                })
+                .then(() => {
+                    log('dfu complete');
+                    resolve();
+                })
+                .catch(error => {
+                    log(error);
+                    reject(error);
+                });
+            });
+        }
+
+        function setMode() {
+            dfu.findDevice({ services: [0x180D] })
+            .then(device => dfu.writeMode(device))
+            .catch(log);
+        }
+
+        function findDFU() {
+            dfu.findDevice({ name: "DfuTarg" })
+            .then(device => transfer(device))
+            .catch(log);
+        }
+
+        function both() {
+            dfu.findDevice({ services: [0x180D] })
+            .then(device => dfu.writeMode(device))
+            .then(device => transfer(device))
+            .catch(log);
+        }
+
+    </script>
+</body>
+</html>