From c0ca9bb72f2afbc78413262cdb36475eed13519c Mon Sep 17 00:00:00 2001 From: Ken Kahn Date: Wed, 13 Nov 2024 07:12:50 +0000 Subject: [PATCH 1/5] Commented out unneeded parts of the "learn JavaScript" app --- apps/learn-javascript.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/learn-javascript.html b/apps/learn-javascript.html index 94bb748..64f9705 100644 --- a/apps/learn-javascript.html +++ b/apps/learn-javascript.html @@ -33,7 +33,7 @@

Welcome to Turtle Graphics Programming!

-

What shape would you like to program today?

+
@@ -151,7 +151,7 @@

Welcome to Turtle Graphics Programming!

} // Initial Welcome Interaction - alert('Welcome! Let\'s start by programming a simple shape. What shape would you like to create?'); + // alert('Welcome! Let\'s start by programming a simple shape. What shape would you like to create?'); From 426b889d1e5cf2a044ad18c66fb9d9c8d4609cee Mon Sep 17 00:00:00 2001 From: Ken Kahn Date: Wed, 13 Nov 2024 07:13:15 +0000 Subject: [PATCH 2/5] Updated finger drawing app --- apps/Finger drawing/app.js | 34 +++- apps/finger-draw.html | 327 +++++++++++++++++++++++++++++++++++++ 2 files changed, 358 insertions(+), 3 deletions(-) create mode 100644 apps/finger-draw.html diff --git a/apps/Finger drawing/app.js b/apps/Finger drawing/app.js index 34063ab..32281ac 100644 --- a/apps/Finger drawing/app.js +++ b/apps/Finger drawing/app.js @@ -4,8 +4,21 @@ let currentColor = 'black'; // Default color async function setupWebcam() { try { - const constraints = { video: { width: 640, height: 480 } }; - video.srcObject = await navigator.mediaDevices.getUserMedia(constraints); + // First list available devices to help with debugging + const devices = await navigator.mediaDevices.enumerateDevices(); + const videoDevices = devices.filter(device => device.kind === 'videoinput'); + console.log('Available video devices:', videoDevices); + + const constraints = { + video: { + width: 640, + height: 480 + } + }; + + const stream = await navigator.mediaDevices.getUserMedia(constraints); + video.srcObject = stream; + return new Promise((resolve) => { video.onloadedmetadata = () => { video.play(); @@ -13,7 +26,22 @@ async function setupWebcam() { }; }); } catch (err) { - console.error(err); + console.error('Webcam setup error:', err.name, err.message); + // Handle specific errors + switch (err.name) { + case 'NotAllowedError': + alert('Camera access was denied. Please check your browser permissions.'); + break; + case 'NotFoundError': + alert('No camera device was found. Please check your camera connection.'); + break; + case 'NotReadableError': + alert('Camera is in use by another application.'); + break; + default: + alert('Error accessing camera: ' + err.message); + } + throw err; } } diff --git a/apps/finger-draw.html b/apps/finger-draw.html new file mode 100644 index 0000000..82513a1 --- /dev/null +++ b/apps/finger-draw.html @@ -0,0 +1,327 @@ + + + + + + + Finger Drawing App + + + + + + + +
Status: Initializing...
+
Loading HandPose model...
+ +
+
+ Last spoken: +
+ Current color: black +
+ + +
+ +
+

Instructions

+
    +
  1. Allow access to your webcam when prompted
    2. +
  2. Point your index finger upwards to start drawing on the canvas
    3. +
  3. Speak a color (red, green, blue, yellow, orange, purple, black, white) to change the drawing color
    4. +
+
+ + + + From 94fff944ad50edb664acbe4dcc393c41cbf4ab4f Mon Sep 17 00:00:00 2001 From: Ken Kahn Date: Wed, 13 Nov 2024 09:20:11 +0000 Subject: [PATCH 3/5] Better error reporting --- apps/learn-javascript.html | 42 ++++++++++++++++++++++---------------- 1 file changed, 24 insertions(+), 18 deletions(-) diff --git a/apps/learn-javascript.html b/apps/learn-javascript.html index 64f9705..282848e 100644 --- a/apps/learn-javascript.html +++ b/apps/learn-javascript.html @@ -131,24 +131,30 @@

Welcome to Turtle Graphics Programming!

} }); - // Display Error with Copy Button - function displayError(message) { - const errorContainer = document.getElementById('errorContainer'); - const errorMsg = document.createElement('span'); - errorMsg.textContent = `Error: ${message}`; - const copyButton = document.createElement('button'); - copyButton.textContent = 'Paste this error message into the chat for help'; - copyButton.id = 'copyButton'; - copyButton.addEventListener('click', () => { - navigator.clipboard.writeText(message).then(() => { - alert('Error message copied to clipboard!'); - }).catch(err => { - alert('Failed to copy!'); - }); - }); - errorContainer.appendChild(errorMsg); - errorContainer.appendChild(copyButton); - } +// Display Error with Copy Button +function displayError(message) { + const errorContainer = document.getElementById('errorContainer'); + const errorMsg = document.createElement('span'); + errorMsg.textContent = `Error: ${message}`; + const copyButton = document.createElement('button'); + copyButton.textContent = 'Paste this error message into the chat for help'; + copyButton.id = 'copyButton'; + + // Get the current user code to include in the clipboard + const userCode = document.getElementById('editor').value; + const fullMessage = `Error: ${message}\n\nUser Program:\n${userCode}`; + + copyButton.addEventListener('click', () => { + navigator.clipboard.writeText(fullMessage).then(() => { + alert('Error message and code copied to clipboard!'); + }).catch(err => { + alert('Failed to copy!'); + }); + }); + + errorContainer.appendChild(errorMsg); + errorContainer.appendChild(copyButton); +} // Initial Welcome Interaction // alert('Welcome! Let\'s start by programming a simple shape. What shape would you like to create?'); From 2caa8b4a9eebc0986621eecea8c588c895d6d038 Mon Sep 17 00:00:00 2001 From: Ken Kahn Date: Thu, 14 Nov 2024 11:28:52 +0000 Subject: [PATCH 4/5] Learning JavaScript has visible turtle now --- apps/learn-javascript.html | 175 +++++++++++++++++++++++++------------ 1 file changed, 119 insertions(+), 56 deletions(-) diff --git a/apps/learn-javascript.html b/apps/learn-javascript.html index 282848e..d5df52d 100644 --- a/apps/learn-javascript.html +++ b/apps/learn-javascript.html @@ -2,54 +2,100 @@ - Turtle Graphics for 8th Graders + Learning JavaScript -

Welcome to Turtle Graphics Programming!

- - -
- +

A JavaScript Playground

+ +
+ -
+
- +
+ + + + + + +
- \ No newline at end of file + From fdb62babb8d68f829428c409602d131cd738b39d Mon Sep 17 00:00:00 2001 From: Ken Kahn Date: Thu, 14 Nov 2024 11:56:19 +0000 Subject: [PATCH 5/5] turtle color matches pen color --- apps/learn-javascript.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/learn-javascript.html b/apps/learn-javascript.html index d5df52d..af23b18 100644 --- a/apps/learn-javascript.html +++ b/apps/learn-javascript.html @@ -83,7 +83,7 @@

A JavaScript Playground

- + @@ -92,6 +92,7 @@

A JavaScript Playground

const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const turtleSVG = document.getElementById('turtle-svg'); + const turtleBody = document.getElementById('turtle-body'); // Reference to the triangle element let turtle = { x: canvas.width / 2, y: canvas.height / 2, @@ -125,6 +126,7 @@

A JavaScript Playground

}, setcolor: function(color) { this.color = color; + turtleBody.setAttribute("fill", color); // Update the turtle color }, reset: function() { ctx.clearRect(0, 0, canvas.width, canvas.height); @@ -133,6 +135,7 @@

A JavaScript Playground

this.angle = 270; // Reset to facing north (upwards) this.penDown = true; this.color = '#000'; + turtleBody.setAttribute("fill", this.color); // Reset the turtle color updateTurtlePosition(); } };