From 0aaa5a9ac25ca8619e9bd6d63f2f7cb5ec813a99 Mon Sep 17 00:00:00 2001
From: Andrei Emeltchenko <andrei.emeltchenko@intel.com>
Date: Fri, 8 Sep 2023 13:01:57 +0300
Subject: [PATCH] samples: webusb: Copy needed file from the external
 repository

Copy file index.html from the external repository
finikorg/webusb-sample.

Signed-off-by: Andrei Emeltchenko <andrei.emeltchenko@intel.com>
---
 doc/conf.py                          |   1 +
 samples/subsys/usb/webusb/index.html | 125 +++++++++++++++++++++++++++
 2 files changed, 126 insertions(+)
 create mode 100644 samples/subsys/usb/webusb/index.html
diff --git a/doc/conf.py b/doc/conf.py
index 05e4eb3d803..592e3d19def 100644
--- a/doc/conf.py
+++ b/doc/conf.py
@@ -284,6 +284,7 @@ external_content_contents = [
     (ZEPHYR_BASE / "doc", "[!_]*"),
     (ZEPHYR_BASE, "boards/**/*.rst"),
     (ZEPHYR_BASE, "boards/**/doc"),
+    (ZEPHYR_BASE, "samples/**/*.html"),
     (ZEPHYR_BASE, "samples/**/*.rst"),
     (ZEPHYR_BASE, "samples/**/doc"),
     (ZEPHYR_BASE, "snippets/**/*.rst"),
diff --git a/samples/subsys/usb/webusb/index.html b/samples/subsys/usb/webusb/index.html
new file mode 100644
index 00000000000..a8d3efb9f24
--- /dev/null
+++ b/samples/subsys/usb/webusb/index.html
@@ -0,0 +1,125 @@
+<html>
+  <head>
+    <title>WebUSB Serial Sample Application</title>
+  </head>
+
+
+<body>
+  <script>
+var serial = {};
+
+(function() {
+  'use strict';
+
+  serial.getPorts = function() {
+    return navigator.usb.getDevices().then(devices => {
+      return devices.map(device => new serial.Port(device));
+    });
+  };
+
+  serial.requestPort = function() {
+    const filters = [
+      { 'vendorId': 0x2fe3, 'productId': 0x0100 },
+      { 'vendorId': 0x2fe3, 'productId': 0x00a },
+      { 'vendorId': 0x8086, 'productId': 0xF8A1 },
+    ];
+    return navigator.usb.requestDevice({ 'filters': filters }).then(
+      device => new serial.Port(device)
+    );
+  }
+
+  serial.Port = function(device) {
+    this.device_ = device;
+  };
+
+  serial.Port.prototype.connect = function() {
+    let readLoop = () => {
+      const {
+        endpointNumber
+      } = this.device_.configuration.interfaces[0].alternate.endpoints[0]
+      this.device_.transferIn(endpointNumber, 64).then(result => {
+        this.onReceive(result.data);
+        readLoop();
+      }, error => {
+        this.onReceiveError(error);
+      });
+    };
+
+    return this.device_.open()
+        .then(() => {
+          if (this.device_.configuration === null) {
+            return this.device_.selectConfiguration(1);
+          }
+        })
+        .then(() => this.device_.claimInterface(0))
+        .then(() => {
+          readLoop();
+        });
+  };
+
+  serial.Port.prototype.disconnect = function() {
+    return this.device_.close();
+  };
+
+  serial.Port.prototype.send = function(data) {
+    const {
+      endpointNumber
+    } = this.device_.configuration.interfaces[0].alternate.endpoints[1]
+    return this.device_.transferOut(endpointNumber, data);
+  };
+})();
+
+let port;
+
+function connect() {
+  port.connect().then(() => {
+    port.onReceive = data => {
+      let textDecoder = new TextDecoder();
+      console.log("Received:", textDecoder.decode(data));
+      document.getElementById('output').value += textDecoder.decode(data);
+    }
+    port.onReceiveError = error => {
+      console.error(error);
+      document.querySelector("#connect").style = "visibility: initial";
+      port.disconnect();
+    };
+  });
+}
+
+function send(string) {
+  console.log("sending to serial:" + string.length);
+  if (string.length === 0)
+    return;
+  console.log("sending to serial: [" + string +"]\n");
+
+  let view = new TextEncoder('utf-8').encode(string);
+  console.log(view);
+  if (port) {
+    port.send(view);
+  }
+};
+
+window.onload = _ => {
+  document.querySelector("#connect").onclick = function() {
+    serial.requestPort().then(selectedPort => {
+      port = selectedPort;
+      this.style = "visibility: hidden";
+      connect();
+    });
+  }
+
+  document.querySelector("#submit").onclick = () => {
+    let source = document.querySelector("#editor").value;
+    send(source);
+  }
+}
+
+</script>
+ <button id="connect" style="visibility: initial">Connect To WebUSB Device</button>
+ <br><br><label for="title">Sender: </label> <br>
+ <textarea id="editor", rows="25" cols="80" id="source">WebUSB!</textarea>
+ <br><button id="submit">Send</button>
+ <br><br>
+ <label for="title">Receiver: </label> </br>
+ <textarea id="output", rows="25" cols="80" id="source"></textarea>
+</body>
