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 @@
-
+
+
+ + +
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(); }