From b576e77a20de211759aca9fd0703b7591ebc36e8 Mon Sep 17 00:00:00 2001 From: foamyguy Date: Fri, 23 May 2025 07:59:18 -0500 Subject: [PATCH] remove web app code, add note in comment about where to find it --- .../opt4048_webserial/opt4048_webserial.ino | 1 + webserial/README.md | 48 --- webserial/cie1931_diagram.svg | 3 - webserial/index.html | 158 ---------- webserial/oembed.json | 12 - webserial/script.js | 283 ------------------ 6 files changed, 1 insertion(+), 504 deletions(-) delete mode 100644 webserial/README.md delete mode 100644 webserial/cie1931_diagram.svg delete mode 100644 webserial/index.html delete mode 100644 webserial/oembed.json delete mode 100644 webserial/script.js diff --git a/examples/opt4048_webserial/opt4048_webserial.ino b/examples/opt4048_webserial/opt4048_webserial.ino index fef50ae..feca014 100644 --- a/examples/opt4048_webserial/opt4048_webserial.ino +++ b/examples/opt4048_webserial/opt4048_webserial.ino @@ -8,6 +8,7 @@ * * This sketch works with the web interface in the /webserial directory, * which can be accessed at: https://adafruit.github.io/Adafruit_OPT4048/webserial/ + * Code for web app is in gh-pages branch: https://github.com/adafruit/Adafruit_OPT4048/tree/gh-pages */ #include diff --git a/webserial/README.md b/webserial/README.md deleted file mode 100644 index c164955..0000000 --- a/webserial/README.md +++ /dev/null @@ -1,48 +0,0 @@ -# OPT4048 CIE Color Plotter - -This web interface allows you to visualize color measurements from an Adafruit OPT4048 color sensor in real-time using the Web Serial API. - -## How to Use - -1. **Upload the Arduino sketch**: First, upload the `opt4048_webserial.ino` sketch from the examples folder to your Arduino board. - -2. **Connect to this web page**: You can access it at: - - https://adafruit.github.io/Adafruit_OPT4048/webserial/ - - Or host the page locally for development - -3. **Connect to your Arduino**: Click the "Connect to Arduino" button and select your Arduino from the popup menu. - -4. **View measurements**: The sensor readings will appear on the CIE chromaticity diagram, showing you exactly where the measured color falls in the CIE color space. - -## Features - -- Displays CIE x,y coordinates in real-time -- Plots the color point on a standard CIE 1931 chromaticity diagram -- Shows lux (brightness) and color temperature (CCT) values -- Provides approximate RGB color visualization -- Monitors serial output for debugging - -## Browser Compatibility - -This interface uses the Web Serial API, which is currently supported in: -- Google Chrome (version 89+) -- Microsoft Edge (version 89+) -- Opera (version 75+) - -It is **not** supported in Firefox or Safari due to their Web Serial API implementation status. - -## About the OPT4048 Sensor - -The OPT4048 is a high-precision tristimulus XYZ color sensor by Texas Instruments. The Adafruit breakout board makes it easy to interface with this sensor using I2C. - -This sensor provides accurate color measurements in XYZ color space, which can be converted to standard CIE 1931 xy chromaticity coordinates. - -## File Structure - -- `index.html` - The main webpage -- `script.js` - JavaScript code for communication and visualization -- `cie1931_diagram.svg` - SVG image of the CIE 1931 chromaticity diagram - -## License - -MIT license, all text here must be included in any redistribution \ No newline at end of file diff --git a/webserial/cie1931_diagram.svg b/webserial/cie1931_diagram.svg deleted file mode 100644 index f05f9d5..0000000 --- a/webserial/cie1931_diagram.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - 460480500520540560580600620x0.00.10.20.30.40.50.60.70.8y0.00.10.20.30.40.50.60.70.80.9E diff --git a/webserial/index.html b/webserial/index.html deleted file mode 100644 index 6982e10..0000000 --- a/webserial/index.html +++ /dev/null @@ -1,158 +0,0 @@ - - - - - - OPT4048 CIE Color Plotter - - - - - -

OPT4048 CIE Color Plotter

-

Connect your Arduino with OPT4048 sensor to visualize color measurements on a CIE diagram.

- -
-
- - - - -

Connection Status

-

Not connected

- -

Serial Monitor

-
-
- -
-

CIE 1931 Chromaticity Diagram

-
- CIE 1931 Chromaticity Diagram - -
- -
-
-

CIE x

-
-
-
-
-

CIE y

-
-
-
-
-

Lux

-
-
-
-
-

CCT (K)

-
-
-
-
- -
-

Color Approximation

-
- (Note: This is a rough approximation) -
-
-
- - - - diff --git a/webserial/oembed.json b/webserial/oembed.json deleted file mode 100644 index 4b90eef..0000000 --- a/webserial/oembed.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "version": "1.0", - "type": "rich", - "title": "Adafruit OPT4048 Library", - "provider_name": "Adafruit", - "provider_url": "https://www.adafruit.com", - "author_name": "Adafruit", - "author_url": "https://github.com/adafruit", - "width": 800, - "height": 600, - "html": "" -} diff --git a/webserial/script.js b/webserial/script.js deleted file mode 100644 index 9b81e8a..0000000 --- a/webserial/script.js +++ /dev/null @@ -1,283 +0,0 @@ -// Global variables -let port; -let reader; -let writer; -let readTimeout; -let keepReading = false; -let decoder = new TextDecoder(); -let lineBuffer = ''; - -// DOM Elements -const connectButton = document.getElementById('connect-button'); -const disconnectButton = document.getElementById('disconnect-button'); -const clearButton = document.getElementById('clear-button'); -const statusDisplay = document.getElementById('status'); -const serialLog = document.getElementById('serial-log'); -const dataPoint = document.getElementById('data-point'); -const cieXDisplay = document.getElementById('cie-x'); -const cieYDisplay = document.getElementById('cie-y'); -const luxDisplay = document.getElementById('lux'); -const cctDisplay = document.getElementById('cct'); -const colorSample = document.getElementById('color-sample'); - -// Check if Web Serial API is supported -if ('serial' in navigator) { - connectButton.addEventListener('click', connectToArduino); - disconnectButton.addEventListener('click', disconnectFromArduino); - clearButton.addEventListener('click', clearLog); -} else { - statusDisplay.textContent = 'Web Serial API not supported in this browser. Try Chrome or Edge.'; - connectButton.disabled = true; -} - -// Connect to Arduino via Web Serial -async function connectToArduino() { - try { - // Request a port and open a connection - port = await navigator.serial.requestPort(); - await port.open({ baudRate: 115200 }); - - // Set up the reader and writer - reader = port.readable.getReader(); - writer = port.writable.getWriter(); - - // Enable/disable buttons - connectButton.disabled = true; - disconnectButton.disabled = false; - statusDisplay.textContent = 'Connected to Arduino'; - addToLog('Connected to Arduino', 'status'); - - // Start reading data - keepReading = true; - readSerialData(); - } catch (error) { - console.error('Error connecting to Arduino:', error); - addToLog(`Error connecting: ${error.message}`, 'error'); - statusDisplay.textContent = 'Connection failed'; - } -} - -// Disconnect from Arduino -async function disconnectFromArduino() { - if (reader) { - keepReading = false; - clearTimeout(readTimeout); - - try { - await reader.cancel(); - await reader.releaseLock(); - reader = null; - } catch (error) { - console.error('Error releasing reader:', error); - } - } - - if (writer) { - try { - await writer.close(); - writer = null; - } catch (error) { - console.error('Error releasing writer:', error); - } - } - - if (port) { - try { - await port.close(); - port = null; - } catch (error) { - console.error('Error closing port:', error); - } - } - - // Update UI - connectButton.disabled = false; - disconnectButton.disabled = true; - statusDisplay.textContent = 'Disconnected'; - addToLog('Disconnected from Arduino', 'status'); - hideDataPoint(); -} - -// Read data from the serial port -async function readSerialData() { - while (port && keepReading) { - try { - const { value, done } = await reader.read(); - - if (done) { - // Reader has been canceled - break; - } - - // Process the received data - processSerialData(decoder.decode(value)); - } catch (error) { - console.error('Error reading data:', error); - addToLog(`Error reading data: ${error.message}`, 'error'); - break; - } - } - - // If we exited the loop without being explicitly disconnected - if (keepReading) { - disconnectFromArduino(); - } -} - -// Process data received from Arduino -function processSerialData(data) { - // Add received data to the buffer - lineBuffer += data; - - // Process complete lines - let lineEnd; - while ((lineEnd = lineBuffer.indexOf('\n')) !== -1) { - const line = lineBuffer.substring(0, lineEnd).trim(); - lineBuffer = lineBuffer.substring(lineEnd + 1); - - if (line) { - addToLog(line); - parseDataFromLine(line); - } - } -} - -// Parse data from a line received from Arduino -function parseDataFromLine(line) { - // Look for CIE x value - const cieXMatch = line.match(/CIE x: ([\d.]+)/); - if (cieXMatch) { - const cieX = parseFloat(cieXMatch[1]); - cieXDisplay.textContent = cieX.toFixed(6); - } - - // Look for CIE y value - const cieYMatch = line.match(/CIE y: ([\d.]+)/); - if (cieYMatch) { - const cieY = parseFloat(cieYMatch[1]); - cieYDisplay.textContent = cieY.toFixed(6); - - // If we have both x and y, update the plot - if (cieXMatch) { - const cieX = parseFloat(cieXMatch[1]); - updateCIEPlot(cieX, cieY); - } - } - - // Look for Lux value - const luxMatch = line.match(/Lux: ([\d.]+)/); - if (luxMatch) { - const lux = parseFloat(luxMatch[1]); - luxDisplay.textContent = lux.toFixed(2); - } - - // Look for Color Temperature value - const cctMatch = line.match(/Color Temperature: ([\d.]+)/); - if (cctMatch) { - const cct = parseFloat(cctMatch[1]); - cctDisplay.textContent = cct.toFixed(0); - } -} - -// Update the CIE plot with new data point -function updateCIEPlot(x, y) { - // Get the dimensions of the CIE diagram image - const cieImage = document.querySelector('#cie-diagram img'); - const imageRect = cieImage.getBoundingClientRect(); - - // The SVG has a coordinate system where: - // - X axis is marked from 0.0 to 0.8 (matched to pixel positions 60 to 470) - // - Y axis is marked from 0.0 to 0.9 (matched to pixel positions 476 to 15) - - // Define the SVG's coordinate mapping - const svgXMin = 60, svgXMax = 470; // Left and right edge pixel positions in SVG - const svgYMin = 476, svgYMax = 15; // Bottom and top edge pixel positions in SVG - const cieXMin = 0.0, cieXMax = 0.8; // Min and max x chromaticity values - const cieYMin = 0.0, cieYMax = 0.9; // Min and max y chromaticity values - - // Map the CIE coordinates to percentages within the SVG viewport - const svgWidth = svgXMax - svgXMin; - const svgHeight = svgYMin - svgYMax; - - // Calculate the percentage position (normalize to SVG viewBox) - const xPercent = ((x - cieXMin) / (cieXMax - cieXMin)) * 100; - const yPercent = (1 - ((y - cieYMin) / (cieYMax - cieYMin))) * 100; // Invert y-axis - - // Set the data point position - dataPoint.style.left = `${xPercent}%`; - dataPoint.style.top = `${yPercent}%`; - dataPoint.style.display = 'block'; - - // Update the color sample with an approximate RGB color - updateColorSample(x, y); -} - -// Convert CIE XYZ to RGB for color approximation -function updateColorSample(x, y) { - // Calculate XYZ from xyY (assuming Y=1 for relative luminance) - const Y = 1.0; - const X = (x * Y) / y; - const Z = ((1 - x - y) * Y) / y; - - // XYZ to RGB conversion (sRGB) - // Using the standard D65 transformation matrix - let r = X * 3.2406 - Y * 1.5372 - Z * 0.4986; - let g = -X * 0.9689 + Y * 1.8758 + Z * 0.0415; - let b = X * 0.0557 - Y * 0.2040 + Z * 1.0570; - - // Apply gamma correction - r = r <= 0.0031308 ? 12.92 * r : 1.055 * Math.pow(r, 1/2.4) - 0.055; - g = g <= 0.0031308 ? 12.92 * g : 1.055 * Math.pow(g, 1/2.4) - 0.055; - b = b <= 0.0031308 ? 12.92 * b : 1.055 * Math.pow(b, 1/2.4) - 0.055; - - // Clamp RGB values between 0 and 1 - r = Math.min(Math.max(0, r), 1); - g = Math.min(Math.max(0, g), 1); - b = Math.min(Math.max(0, b), 1); - - // Convert to 8-bit color values - const ri = Math.round(r * 255); - const gi = Math.round(g * 255); - const bi = Math.round(b * 255); - - // Set the background color of the sample - colorSample.style.backgroundColor = `rgb(${ri}, ${gi}, ${bi})`; -} - -// Hide the data point and reset all displays -function hideDataPoint() { - dataPoint.style.display = 'none'; - cieXDisplay.textContent = '-'; - cieYDisplay.textContent = '-'; - luxDisplay.textContent = '-'; - cctDisplay.textContent = '-'; - colorSample.style.backgroundColor = 'transparent'; -} - -// Add a message to the serial log -function addToLog(message, type = 'data') { - const entry = document.createElement('div'); - entry.textContent = message; - entry.className = `log-entry ${type}`; - serialLog.appendChild(entry); - serialLog.scrollTop = serialLog.scrollHeight; -} - -// Clear the serial log -function clearLog() { - serialLog.innerHTML = ''; -} - -// Send a command to the Arduino -async function sendCommand(command) { - if (writer) { - try { - const encoder = new TextEncoder(); - await writer.write(encoder.encode(command + '\n')); - addToLog(`Sent: ${command}`, 'command'); - } catch (error) { - console.error('Error sending command:', error); - addToLog(`Error sending command: ${error.message}`, 'error'); - } - } -} \ No newline at end of file