support and browser validation and cleanup

johntalton · Jun 27, 2024 · da3c191 · da3c191
1 parent df532ac
commit da3c191
Show file tree

Hide file tree

Showing 15 changed files with 506 additions and 38 deletions.
diff --git a/package.json b/package.json
@@ -9,25 +9,29 @@
     "@johntalton/adxl375": "^1.0.0",
     "@johntalton/aht20": "^1.2.0",
     "@johntalton/am2320": "^1.0.0",
-    "@johntalton/and-other-delights": "../and-other-delights",
+    "@johntalton/and-other-delights": "^8.3.0",
     "@johntalton/aw9523": "^2.0.0",
     "@johntalton/bitsmush": "^1.0.1",
     "@johntalton/boschieu": "^6.0.1",
     "@johntalton/ds1841": "^2.0.0",
     "@johntalton/ds3231": "^1.1.1",
     "@johntalton/ds3502": "^5.0.0",
-    "@johntalton/excamera-i2cdriver": "../excamera-i2cdriver",
-    "@johntalton/ht16k33": "../ht16k33",
-    "@johntalton/i2c-bus-excamera-i2cdriver": "../i2c-bus-excamera-i2cdriver",
-    "@johntalton/i2c-bus-mcp2221": "../i2c-bus-mcp2221",
+    "@johntalton/excamera-i2cdriver": "^3.0.0",
+    "@johntalton/ht16k33": "^1.1.1",
+    "@johntalton/i2c-bus-excamera-i2cdriver": "^3.0.1",
+    "@johntalton/i2c-bus-mcp2221": "^4.0.0",
     "@johntalton/i2c-bus-tca9548a": "^1.0.1",
-    "@johntalton/i2c-port": "^1.0.0",
-    "@johntalton/mcp2221": "../mcp2221",
+    "@johntalton/i2c-port": "^4.0.0",
+    "@johntalton/mcp2221": "^4.0.0",
     "@johntalton/mcp23": "^6.0.2",
-    "@johntalton/pca9536": "../pca9536",
-    "@johntalton/pcf8523": "../pcf8523",
+    "@johntalton/pca9536": "^1.0.2",
+    "@johntalton/pcf8523": "^2.0.1",
     "@johntalton/pcf8574": "^2.1.0",
-    "@johntalton/tca9548a": "^5.0.0",
-    "@johntalton/tsl2591": "^1.0.0"
+    "@johntalton/tca9548a": "^5.1.1",
+    "@johntalton/tsl2591": "^1.0.0",
+    "body-parser": "^1.20.2",
+    "cors": "^2.8.5",
+    "express": "^4.19.2",
+    "node-hid": "^3.1.0"
   }
 }
diff --git a/public/css/app/app-main.css b/public/css/app/app-main.css
@@ -38,6 +38,26 @@ main > section:not([data-active]) {
   display: none;
 }
 
+[data-no-support] {
+  margin-inline: 0 2em;
+  margin-block-end: 1em;
+  padding: 1em;
+  border-radius: 1em;
+  padding-block: 2em;
+
+  border: 7px groove var(--color-accent--darker-error, red);
+  background-color: var(--color-accent--lightest-error, red);
+  color: var(--color-accent--lightest-error-text, red);
+}
+
+[data-no-support][data-dismissed] {
+  display: none;
+}
+
+body:not([data-supports=""]) [data-no-support] {
+  display: none;
+}
+
 main > section {
   & p[data-loading] {
     display: flex;

diff --git a/public/css/defs.css b/public/css/defs.css
@@ -28,6 +28,10 @@
 
 
 [data-theme] {
+	--color-white: white;
+	--color-black: black;
+	--color-gray: gray;
+
 	/*  */
 	--color-disabled: var(--color-gray);
 	--color-opaque-black: rgba(50 50 50 / 0.25);

diff --git a/public/css/libs/form.css b/public/css/libs/form.css
@@ -128,19 +128,27 @@ form {
 
   & input[type="text"] {
     accent-color: var(--color-accent--darker, red);
-    border: 0;
+    /* background-color: var(--color-accent--lightest, red);
+    color: var(--color-accent--lightest-text, red); */
+     background-color: var(--color-accent--lighter, red);
+    color: var(--color-accent--lighter-text, red);
 
-    border-radius: 2em;
+    border-width: 2px;
+    border-style: solid;
+    border-color: var(--color-accent--darker, red);
+
+    border-radius: 1em;
     padding-inline-start: 1em;
-    padding-block: .5em;
+    padding-block: .75em;
 
-    &:not(:focus-visible) {
-      background-color: var(--color-accent--lighter, red);
-      color: var(--color-accent--lighter-text, red);
+    width: 100%;
+
+    &:focus-visible {
+      background-color: var(--color-white, white);
+      color: var(--color-black, black);
     }
 
     &:disabled {
-      border: 0;
       background-color: #00000014;
     }
 

diff --git a/public/custom-elements/web.html b/public/custom-elements/web.html
@@ -0,0 +1,56 @@
+<!DOCTYPE>
+<html>
+	<body>
+		<web-config>
+			<style>
+				web-config {
+					margin-block-start: 1em;
+					margin-inline-end: 2em;
+
+					display: flex;
+					flex-wrap: wrap;
+					gap: 1em;
+
+					& > form {
+						flex-grow: 1;
+						min-width: 100%;
+
+						& > fieldset {
+							border-width: 0;
+							background-color: var(--color-accent--lightest, red);
+							color: var(--color-accent--lightest-text, red);
+						}
+					}
+				}
+			</style>
+
+			<form>
+				<fieldset>
+					<label>Web Address</label>
+					<input name="url" type="text" value="http://localhost:3000/mcp" />
+				</fieldset>
+			</form>
+
+			<div data-scan-group>
+				<button data-scan>Scan 🔎</button>
+
+				<addr-display name="scanResults">
+				</addr-display>
+
+				<ul data-device-list>
+					<!-- dynamic content -->
+					<template>
+						<li>
+							<form>
+								<hex-display></hex-display>
+								<select></select>
+								<button>Create Device 🕹️</button>
+							</form>
+						</li>
+					</template>
+				</ul>
+
+			</div>
+		</web-config>
+	</body>
+</html>
diff --git a/public/devices-i2c/adt7410.js b/public/devices-i2c/adt7410.js
@@ -74,7 +74,9 @@ export class ADT7410Builder {
 
 		//
 		const refreshId = async () => {
+			// console.log('refresh id')
 			this.#id = await this.#device.getId()
+				.then(id => { console.log(id); return id })
 				.catch(e => ({ manufactureId: NaN, revisionId: NaN, matchedVendor: false }))
 
 			idOutput.value = `Manufacture: 0x${this.#id.manufactureId.toString(16).padStart(2, '0')}, Revision ${this.#id.revisionId} ${this.#id.matchedVendor ? '' : '🛑'}`

diff --git a/public/devices-i2c/tsl2591.js b/public/devices-i2c/tsl2591.js
@@ -84,6 +84,7 @@ export class TSL2591Builder {
 			check('enabled', enabled)
 			check('powerOn', powerOn)
 
+			console.log({ gain, time })
 			const gainSelect = root?.querySelector('select[name="gain"]')
 			gainSelect.value = gain
 
@@ -278,7 +279,9 @@ export class TSL2591Builder {
 							yield device.getColor()
 						}
 						catch(e) {
-							// console.log('again?', e)
+							console.log('break', e)
+							break
+							console.log('again?', e)
 							await delayMs(1000 / 10)
 						}
 					}

diff --git a/public/devices-serial/exc-i2cdriver.js b/public/devices-serial/exc-i2cdriver.js
@@ -326,6 +326,13 @@ export class ExcameraI2CDriverUIBuilder {
 			// bufferSize: 1
 		})
 
+		const signals = await this.#port.getSignals()
+		console.log(`Clear To Send:       ${signals.clearToSend}`)
+		console.log(`Data Carrier Detect: ${signals.dataCarrierDetect}`)
+		console.log(`Data Set Ready:      ${signals.dataSetReady}`)
+		console.log(`Ring Indicator:      ${signals.ringIndicator}`)
+
+
 		// device author provided init script
 		await initScript(this.#port)
 

diff --git a/public/hydrate/theme.js b/public/hydrate/theme.js
@@ -14,8 +14,13 @@ export async function hydrateTheme() {
 
 		themRollerButton.setAttribute('title', theme)
 
-		const transition = document.startViewTransition(() => {
+		if (!document.startViewTransition) {
 			document.body.setAttribute('data-theme', theme)
-		})
+		}
+		else {
+			const transition = document.startViewTransition(() => {
+				document.body.setAttribute('data-theme', theme)
+			})
+		}
 	})
 }