view transition and touchups

johntalton · Jan 11, 2024 · f23d84d · f23d84d
1 parent c95b120
commit f23d84d
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -6,9 +6,9 @@
   },
   "dependencies": {
     "@johntalton/adt7410": "../adt7410",
-    "@johntalton/aht20": "../aht20",
     "@johntalton/adxl375": "../adxl375",
     "@johntalton/ags02ma": "../ags02ma",
+    "@johntalton/aht20": "^1.1.0",
     "@johntalton/am2320": "^1.0.0",
     "@johntalton/and-other-delights": "../and-other-delights",
     "@johntalton/bitsmush": "^1.0.0",

diff --git a/public/css/adxl375.css b/public/css/adxl375.css
@@ -1,7 +1,11 @@
 adxl375-config {
+  & > button {
+    margin-block-end: 1em;
+  }
 
   & canvas {
     border: 1px solid black;
     background-color: white;
+    border-radius: 1em;
   }
 }
diff --git a/public/devices-i2c/adxl375.js b/public/devices-i2c/adxl375.js
@@ -3,6 +3,8 @@ import { ADXL375 } from '@johntalton/adxl375'
 
 const delayMs = ms => new Promise(resolve => setTimeout(resolve, ms))
 
+let going = false
+
 export class ADXL375Builder {
 	#abus
 	#device
@@ -60,7 +62,9 @@ export class ADXL375Builder {
 
 	}
 
-	async close() { }
+	async close() {
+		going = false
+	}
 
 	signature() { }
 
@@ -140,9 +144,11 @@ export class ADXL375Builder {
 			}
 
 
+
 			Promise.resolve().then(async () => {
-				while(true) {
-					await delayMs(100)
+				going = true
+				while(going) {
+					// await delayMs(10)
 
 					const { entries } = await this.#device.getFIFOStatus()
 					console.log('fetch', entries)

diff --git a/public/devices-serial/exc-i2cdriver.js b/public/devices-serial/exc-i2cdriver.js
@@ -197,6 +197,7 @@ export class ExcameraI2CDriverUIBuilder {
 
 								const deviceGuess = guessSelectElem.value
 
+								// todo change over to newer post message style
 								self.#ui.addI2CDevice({
 									port: self.#port,
 									type: deviceGuess,
@@ -281,7 +282,7 @@ export class ExcameraI2CDriverUIBuilder {
 						</select>
 					</form>
 
-					<form data-info>
+					<form data-info method="dialog">
 						<label>Model</label>
 						<output name="model">${identifier}</output>
 
@@ -306,7 +307,7 @@ export class ExcameraI2CDriverUIBuilder {
 						<label>SCL</label>
 						<output name="scl"></output>
 
-						<button id="updateConfigInfo">Update</button>
+						<button id="updateConfigInfo" type="button">Update</button>
 					</form>
 
 
@@ -492,6 +493,8 @@ export class ExcameraI2CDriverUIBuilder {
 
 		const updateButton = stuff.getElementById('updateConfigInfo')
 		updateButton.addEventListener('click', event => {
+			event.preventDefault()
+
 			updateButton.disabled = true
 			Promise.resolve()
 				.then(async () => {
@@ -527,7 +530,10 @@ export class ExcameraI2CDriverUIBuilder {
 
 					updateButton.disabled = false
 				})
-				.catch(e => console.warn(e))
+				.catch(e => {
+					updateButton.disabled = false
+					console.warn(e)
+				})
 		})
 
 

diff --git a/public/index.css b/public/index.css
@@ -55,3 +55,8 @@
 	}
 
 }
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation-duration: 600ms;
+}
diff --git a/public/index.html b/public/index.html
@@ -1,6 +1,10 @@
 <!DOCTYPE html>
 <html>
 	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="view-transition" content="same-origin" />
+
 		<title>Web I²C Playground</title>
 
 		<link rel="manifest" href="manifest.json" />

diff --git a/public/index.js b/public/index.js
@@ -148,19 +148,20 @@ function buildDeviceListItem(deviceListElem, builder) {
 
 	//
 	liElem.addEventListener('click', e => {
-		deviceListElem.querySelectorAll('li').forEach(li => {
-			li.removeAttribute('data-active')
-			const bElem = li.querySelector('button')
-			bElem.disabled = false
-		})
-
-		liElem.toggleAttribute('data-active', true)
-		buttonElem.disabled = true
+		const transition = document.startViewTransition(() => {
+			deviceListElem.querySelectorAll('li').forEach(li => {
+				li.removeAttribute('data-active')
+				const bElem = li.querySelector('button')
+				bElem.disabled = false
+			})
 
-		mainElem.querySelectorAll('section').forEach(s => s.removeAttribute('data-active'))
+			liElem.toggleAttribute('data-active', true)
+			buttonElem.disabled = true
 
-		sectionElem.toggleAttribute('data-active', true)
+			mainElem.querySelectorAll('section').forEach(s => s.removeAttribute('data-active'))
 
+			sectionElem.toggleAttribute('data-active', true)
+		})
 	}, { once: false })
 
 	// demolisher
@@ -170,6 +171,10 @@ function buildDeviceListItem(deviceListElem, builder) {
 		// 	console.log(vdev)
 		// })
 
+		builder.close()
+			.catch(e => console.warn(e))
+
+
 		liElem.remove()
 		sectionElem.remove()
 	}