initial attempt at adding usb demo

how-to/detect-usb-devices/README.md

@@ -0,0 +1,45 @@
+# Detect USB Devices
+
+## How it Works
+
+The app.ts listens for button clicks and creates with a dynamic openfin window or from a manifest.
+
+The manifest is located in the config folder along with the manifest for this sample application
+
+## Get Started
+
+Follow the instructions below to get up and running.
+
+### Set up the project
+
+1. Install dependencies and do the initial build. Note that these examples assume you are in the sub-directory for the example.
+
+```shell
+npm run setup
+```
+
+2. Build the project.
+
+```shell
+npm run build
+```
+
+3. Start the test server in a new window.
+
+```shell
+npm run start
+```
+
+4. Start the Platform application.
+
+```shell
+npm run client
+```
+
+### What you will see
+
+1. The default platform provider window (as the manifest sets autoshow to true to help with development)
+
+## A note about this example
+
+This is an example of how to use OpenFin APIs to configure OpenFin Container. Its purpose is to provide an example and suggestions. **DO NOT** assume that it contains production-ready code. Please use this as a guide and provide feedback. Thanks!

how-to/detect-usb-devices/client/src/app.ts

@@ -0,0 +1,84 @@
+import type OpenFin from "@openfin/core";
+
+document.addEventListener("DOMContentLoaded", async () => {
+	try {
+		await initDom();
+	} catch (error) {
+		console.error(error);
+	}
+});
+
+/**
+ * Initialize the DOM components.
+ */
+async function initDom(): Promise<void> {
+	const btnOpenDynamicWindow = document.querySelector("#btn-open-dynamic-window");
+	if (btnOpenDynamicWindow) {
+		btnOpenDynamicWindow.addEventListener("click", async (e: Event) => openDynamicApplicationWindow());
+	}
+
+	const btnCheckForDevices = document.querySelector("#btn-check-for-usb-devices");
+	if (btnCheckForDevices) {
+		btnCheckForDevices.addEventListener("click", checkForUsbDevices);
+	}
+}
+
+/**
+ * Checks to see what devices to connect.
+ */
+async function requestDevice(): Promise<void> {
+	await navigator.usb.requestDevice({ filters: [{ vendorId: 0x1133 }] });
+}
+
+
+/**
+ * Open a window using dynamic options.
+ * @returns The window.
+ */
+async function openDynamicApplicationWindow(): Promise<OpenFin.Window> {
+	const winOption = {
+		name: "child",
+		defaultWidth: 800,
+		defaultHeight: 800,
+		url: "https://developers.openfin.co/of-docs/docs/connect-usb-hid#find-all-connected-devices",
+		frame: true,
+		autoShow: true
+	};
+	return fin.Window.create(winOption);
+}
+
+/**
+ * Use the usb.getDevices method to get a list of connected devices.
+ */
+async function checkForUsbDevices(): Promise<void> {
+	await requestDevice();
+	// Get all connected USB devices the website has been granted access to.
+	// if ("usb" in navigator) {
+	// 	const usb = navigator.usb;
+	// 	await usb.getDevices()
+	// 	.then((devices) => {
+	// 		if (devices.length > 0) {
+	// 			console.log(`There are ${devices.length} detected USB devices.`);
+	// 			for (const device of devices) {
+	// 				console.log(device.productName); // "Arduino Micro"
+	// 				console.log(device.manufacturerName); // "Arduino LLC"
+	// 			}
+	// 		} else {
+	// 			console.log("There are no detected USB devices.");
+	// 		}
+	// 		return true;
+	// 	})
+	// 	.catch((error) => {
+	// 		console.error(error);
+	// 	});
+	// } else {
+	// 	console.log("There is no USB detection on the Navigator window object for this browser.");
+	// }
+}
+
+/**
+ *
+ */
+// function addDeviceToList() {
+
+// }

how-to/detect-usb-devices/client/tsconfig.json

@@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"target": "es2021",
+		"module": "ES2020",
+		"sourceMap": true,
+		"rootDir": "./src",
+		"outDir": "build",
+		"skipLibCheck": true,
+		"strict": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"moduleResolution": "node",
+		"types": ["./types/fin", "w3c-web-usb"]
+	},
+	"include": ["./src/**/*.ts"]
+}

how-to/detect-usb-devices/client/types/fin.d.ts

@@ -0,0 +1,5 @@
+import type { fin as FinApi } from "@openfin/core";
+
+declare global {
+	const fin: typeof FinApi;
+}

how-to/detect-usb-devices/client/webpack.config.js

@@ -0,0 +1,24 @@
+const path = require('path');
+
+module.exports = [
+	{
+		entry: './client/src/app.ts',
+		devtool: 'inline-source-map',
+		module: {
+			rules: [
+				{
+					test: /\.tsx?$/,
+					use: 'ts-loader',
+					exclude: /node_modules/
+				}
+			]
+		},
+		resolve: {
+			extensions: ['.tsx', '.ts', '.js']
+		},
+		output: {
+			filename: 'app.bundle.js',
+			path: path.resolve(__dirname, '..', 'public', 'js')
+		}
+	}
+];

how-to/detect-usb-devices/package.json

@@ -0,0 +1,25 @@
+{
+	"name": "detect-usb-devices",
+	"version": "38.83.79",
+	"description": "A demonstration of how to check for connected usb devices",
+	"main": "index.js",
+	"scripts": {
+		"kill": "node ./scripts/kill.mjs",
+		"client": "node ./scripts/launch.mjs",
+		"build-client": "webpack build --config ./client/webpack.config.js --mode=development",
+		"build": "npm run build-client",
+		"start": "npx --yes http-server ./public -p 5050 -c-1",
+		"setup": "cd ../../ && npm install && cd how-to/create-window && npm run build"
+	},
+	"author": "[email protected]",
+	"license": "SEE LICENSE IN LICENSE.MD",
+	"devDependencies": {
+		"@openfin/core": "38.83.79",
+		"@openfin/node-adapter": "38.83.79",
+		"@types/w3c-web-usb": "^1.0.10",
+		"ts-loader": "^9.5.1",
+		"typescript": "^5.4.5",
+		"webpack": "^5.91.0",
+		"webpack-cli": "^5.1.4"
+	}
+}