From 80ebbf7917f9b7a8ee03c61a624b6c0ecaa645da Mon Sep 17 00:00:00 2001 From: Sebastian Romero Date: Wed, 31 Jan 2024 14:35:07 -0300 Subject: [PATCH] Add dropdown for image filter --- .../Camera/extras/WebSerialCamera/app.js | 45 ++++++++++++++++--- .../Camera/extras/WebSerialCamera/index.html | 13 +++++- .../Camera/extras/WebSerialCamera/style.css | 17 ++++++- .../extras/WebSerialCamera/transformers.js | 1 + 4 files changed, 67 insertions(+), 9 deletions(-) diff --git a/libraries/Camera/extras/WebSerialCamera/app.js b/libraries/Camera/extras/WebSerialCamera/app.js index 68823b347..364a7d1d5 100644 --- a/libraries/Camera/extras/WebSerialCamera/app.js +++ b/libraries/Camera/extras/WebSerialCamera/app.js @@ -21,6 +21,7 @@ const connectButton = document.getElementById('connect'); const refreshButton = document.getElementById('refresh'); const startButton = document.getElementById('start'); const saveImageButton = document.getElementById('save-image'); +const filterSelector = document.getElementById('filter-selector'); const canvas = document.getElementById('bitmapCanvas'); const ctx = canvas.getContext('2d'); @@ -28,12 +29,6 @@ const imageDataTransfomer = new ImageDataTransformer(ctx); imageDataTransfomer.setStartSequence([0xfa, 0xce, 0xfe, 0xed]); imageDataTransfomer.setStopSequence([0xda, 0xbb, 0xad, 0x00]); -// 🐣 Uncomment one of the following lines to apply a filter to the image data -// imageDataTransfomer.filter = new GrayScaleFilter(); -// imageDataTransfomer.filter = new BlackAndWhiteFilter(); -// imageDataTransfomer.filter = new SepiaColorFilter(); -// imageDataTransfomer.filter = new PixelateFilter(8); -// imageDataTransfomer.filter = new BlurFilter(8); const connectionHandler = new SerialConnectionHandler(); @@ -54,12 +49,20 @@ connectionHandler.onConnect = async () => { } imageDataTransfomer.setImageMode(imageMode); imageDataTransfomer.setResolution(imageResolution.width, imageResolution.height); + + // Filters are only available for color images + if(imageMode !== 'GRAYSCALE'){ + filterSelector.disabled = false; + } + renderStream(); }; connectionHandler.onDisconnect = () => { - connectButton.textContent = 'Connect'; imageDataTransfomer.reset(); + connectButton.textContent = 'Connect'; + filterSelector.disabled = true; + filterSelector.value = 'none'; }; @@ -122,9 +125,37 @@ saveImageButton.addEventListener('click', () => { link.remove(); }); +filterSelector.addEventListener('change', () => { + const filter = filterSelector.value; + switch(filter){ + case 'none': + imageDataTransfomer.filter = null; + break; + case 'gray-scale': + imageDataTransfomer.filter = new GrayScaleFilter(); + break; + case 'black-and-white': + imageDataTransfomer.filter = new BlackAndWhiteFilter(); + break; + case 'sepia': + imageDataTransfomer.filter = new SepiaColorFilter(); + break; + case 'pixelate': + imageDataTransfomer.filter = new PixelateFilter(8); + break; + case 'blur': + imageDataTransfomer.filter = new BlurFilter(8); + break; + default: + imageDataTransfomer.filter = null; + } +}); + // On page load event, try to connect to the serial port window.addEventListener('load', async () => { + filterSelector.disabled = true; console.log('🚀 Page loaded. Trying to connect to serial port...'); + setTimeout(() => { connectionHandler.autoConnect(); }, 1000); diff --git a/libraries/Camera/extras/WebSerialCamera/index.html b/libraries/Camera/extras/WebSerialCamera/index.html index 3f677a2ff..ba70c1b43 100644 --- a/libraries/Camera/extras/WebSerialCamera/index.html +++ b/libraries/Camera/extras/WebSerialCamera/index.html @@ -9,12 +9,23 @@

+ Filter + +

diff --git a/libraries/Camera/extras/WebSerialCamera/style.css b/libraries/Camera/extras/WebSerialCamera/style.css index ef9f7832f..71fe2c19c 100644 --- a/libraries/Camera/extras/WebSerialCamera/style.css +++ b/libraries/Camera/extras/WebSerialCamera/style.css @@ -22,7 +22,7 @@ body { margin-top: 20px; } -#controls { +.controls { display: flex; flex-direction: row; align-items: center; @@ -58,6 +58,21 @@ button:hover { background-color: var(--main-control-color-hover); } +label { + font-family: 'Open Sans', sans-serif; + font-size: 1rem; + font-weight: bold; + color: var(--secondary-text-color); +} + +select { + font-family: 'Open Sans', sans-serif; + font-size: 1rem; + border: 1px solid #ccc; + padding: 5px 10px; + border-radius: 5px; +} + #refresh { display: none; } diff --git a/libraries/Camera/extras/WebSerialCamera/transformers.js b/libraries/Camera/extras/WebSerialCamera/transformers.js index 722353c20..ac32c43c4 100644 --- a/libraries/Camera/extras/WebSerialCamera/transformers.js +++ b/libraries/Camera/extras/WebSerialCamera/transformers.js @@ -306,6 +306,7 @@ class ImageDataTransformer extends StartStopSequenceTransformer { this.imageMode = null; this.width = null; this.height = null; + this.filter = null; this.imageDataProcessor.reset(); } pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies: