text updates

web/script.js

@@ -11,9 +11,20 @@ let resizedImageContainer = document.getElementById("image-resize");
 let dctCoefficientContainer = document.getElementById("image-dct");
 let formImage = document.getElementById("dctimage");
 
-let originalImage = document.createElement("img");
 let resizedBuffer = null;
 
+// Resets all containers, deletes images, etc
+// Redefines the event handlers for the base image
+function reset() {
+	//imageContainers.forEach((imageContainer) => {
+	for (let imageContainer of imageContainers) {
+		imageContainer.replaceChildren();
+	}
+	resizedImageContainer.replaceChildren();
+	dctCoefficientContainer.replaceChildren();
+	document.getElementById("resize").classList.remove("resize");
+}
+
 // Uses the resized buffer to get DCT coefficients
 function getDCT() {
 	let buf = new Uint8Array(resizedBuffer)
@@ -26,17 +37,6 @@ function getDCT() {
 	}
 }
 
-// Resets all containers, deletes images, etc
-// Redefines the event handlers for the base image
-function reset() {
-	//imageContainers.forEach((imageContainer) => {
-	for (let imageContainer of imageContainers) {
-		imageContainer.replaceChildren();
-	}
-	resizedImageContainer.replaceChildren();
-	dctCoefficientContainer.replaceChildren();
-}
-
 // Result from the resize worker, means we get resized buffer
 resizeWorker.onmessage = function (e) {
 	console.log(e.data);
@@ -46,8 +46,17 @@ resizeWorker.onmessage = function (e) {
 		new Blob([resizedBuffer], { type: 'image/png' })
 	);
 	resizedImageContainer.appendChild(resizedImage);
+
+	// Set the width of the image explictly to help with the animation
+	let image = document.getElementById("resize-original").children[0];
+	image.width = image.width;
+	image.height = image.height;
 }
 
+document.getElementById("resize-button").addEventListener("click", function() {
+	document.getElementById("resize").classList.add("resize");
+});
+
 // User selected an image from disk. Start the demo.
 formImage.addEventListener("change", function() {
 	reset();
@@ -65,5 +74,7 @@ formImage.addEventListener("change", function() {
 			resizeWorker.postMessage(buf);
 		});
 	}
-	document.getElementById("demo-cont").classList.add("visible");
+
+	// Show the rest of the demo.
+	document.getElementById("demo-resize").classList.add("visible");
 });