Merge pull request #878 from arduino/camera-filters

Add image filter dropdown to Web Serial Camera
arduino · Apr 29, 2024 · ba5f661 · ba5f661
2 parents 7ed8f10 + 80ebbf7
commit ba5f661
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 9 deletions.
diff --git a/libraries/Camera/extras/WebSerialCamera/app.js b/libraries/Camera/extras/WebSerialCamera/app.js
@@ -21,19 +21,14 @@ 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');
 
 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
@@ -9,12 +9,23 @@
 <body>
   <div id="main-container">
     <canvas id="bitmapCanvas"></canvas>
-    <div id="controls">
+    <div class="controls">
       <button id="connect">Connect</button>
       <button id="save-image">Save Image</button>
       <button id="refresh">Refresh</button>
       <button id="start">Start</button>
     </div>
+    <div class="controls">
+      <label for="filter">Filter</label>
+      <select id="filter-selector">
+        <option value="none">None</option>
+        <option value="gray-scale">Grayscale</option>
+        <option value="black-and-white">Black and White</option>
+        <option value="sepia">Sepia</option>
+        <option value="pixelate">Pixelate</option>
+        <option value="blur">Blur</option>
+      </select>
+    </div>
   </div>
   <script src="filters.js"></script>
   <script src="transformers.js"></script>

diff --git 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
@@ -306,6 +306,7 @@ class ImageDataTransformer extends StartStopSequenceTransformer {
         this.imageMode = null;
         this.width = null;
         this.height = null;
+        this.filter = null;
         this.imageDataProcessor.reset();
     }