From 5e6ac6467827f010c19da30276ca23b779352efc Mon Sep 17 00:00:00 2001
From: Klaus Eckelt <Klaus.Eckelt@jku.at>
Date: Thu, 28 Dec 2023 09:31:44 +0000
Subject: [PATCH 1/2] cleanup logging

---
 src/Detail/Image/OpenCV-ImgDiff.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Detail/Image/OpenCV-ImgDiff.js b/src/Detail/Image/OpenCV-ImgDiff.js
index 6b0ed5a..663180f 100644
--- a/src/Detail/Image/OpenCV-ImgDiff.js
+++ b/src/Detail/Image/OpenCV-ImgDiff.js
@@ -47,14 +47,14 @@ export function addDifferenceHighlight(
   const diff = getDiff(baseImgMat, compareImgMat, true, kernelSize);
   const diffReverse = getDiff(compareImgMat, baseImgMat, false, kernelSize);
 
-  console.log('length before', compareImgMat.data.length);
+  // console.log('length before', compareImgMat.data.length);
 
   if (grayscale) {
     cv.cvtColor(compareImgMat, compareImgMat, cv.COLOR_BGR2GRAY);
     cv.cvtColor(compareImgMat, compareImgMat, cv.COLOR_GRAY2BGRA);
   }
 
-  console.log('length after', compareImgMat.data.length);
+  // console.log('length after', compareImgMat.data.length);
 
   const thickness = -1; // -1 = filled, 1 = 1px thick, 2 = 2px thick, ...
   const contourDrawOpacity = 255; // draw contour fully opaque because it would set the pixels' opacity and not make the contour itself transparent
@@ -129,8 +129,8 @@ function pixelDiff(target, mask, mask2, diffOverlayWeight, color, colorBoth) {
     }
   }
   cv.addWeighted(overlay, diffOverlayWeight, target, 1 - diffOverlayWeight, 0, target, -1);
-  console.log('similarPixels', similarPixels, 'differentPixels', maskData.length - similarPixels);
-  console.log('pixelSimilartiy', similarPixels / maskData.length);
+  // console.log('similarPixels', similarPixels, 'differentPixels', maskData.length - similarPixels);
+  // console.log('pixelSimilartiy', similarPixels / maskData.length);
   return similarPixels / maskData.length;
 }
 

From e568a7e95a8dd5b19334acdc102ec5c797b8c481 Mon Sep 17 00:00:00 2001
From: Klaus Eckelt <Klaus.Eckelt@jku.at>
Date: Thu, 28 Dec 2023 09:37:06 +0000
Subject: [PATCH 2/2] Add functionality to greyscale checkbox #67

---
 src/Detail/ImgDetailDiff.tsx | 36 ++++++++++++++++++++++++------------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/Detail/ImgDetailDiff.tsx b/src/Detail/ImgDetailDiff.tsx
index 234c838..65d3740 100644
--- a/src/Detail/ImgDetailDiff.tsx
+++ b/src/Detail/ImgDetailDiff.tsx
@@ -13,9 +13,13 @@ export const ImgDetailDiff = ({ newCell, oldCell }: IDiffProps) => {
   };
 
   const [showChanges, setHighlightChanges] = React.useState(true);
+  const [showGreyscale, setShowGreyscale] = React.useState(true);
   const handleHighlightChangesChange = () => {
     setHighlightChanges(!showChanges);
   };
+  const handleGreyscaleChange = () => {
+    setShowGreyscale(!showGreyscale);
+  };
 
   const [oldBase64, setOldBase64] = useState(prepareBase64(oldCell));
   const [newBase64, setNewBase64] = useState(prepareBase64(newCell));
@@ -32,7 +36,6 @@ export const ImgDetailDiff = ({ newCell, oldCell }: IDiffProps) => {
 
   useEffect(() => {
     const addDiffs = async () => {
-      console.log('useEffect calls addDiffs', showChanges);
       if (showChanges) {
         const addedBase64 = await addDifferenceHighlight(
           prepareBase64(oldCell),
@@ -43,7 +46,8 @@ export const ImgDetailDiff = ({ newCell, oldCell }: IDiffProps) => {
             b: 165
           },
           3,
-          false
+          false,
+          showGreyscale
         );
         if (addedBase64) {
           setNewBase64(addedBase64.img);
@@ -51,11 +55,18 @@ export const ImgDetailDiff = ({ newCell, oldCell }: IDiffProps) => {
         setAdditions(addedBase64?.changes);
         let similarity = 1 - (1 - (addedBase64?.pixelSimilartiy ?? 1));
 
-        const removedBase64 = await addDifferenceHighlight(prepareBase64(newCell), prepareBase64(oldCell), {
-          r: 240,
-          g: 82,
-          b: 104
-        });
+        const removedBase64 = await addDifferenceHighlight(
+          prepareBase64(newCell),
+          prepareBase64(oldCell),
+          {
+            r: 240,
+            g: 82,
+            b: 104
+          },
+          3,
+          false,
+          showGreyscale
+        );
         if (removedBase64) {
           setOldBase64(removedBase64.img);
         }
@@ -70,7 +81,7 @@ export const ImgDetailDiff = ({ newCell, oldCell }: IDiffProps) => {
     };
 
     addDiffs();
-  }, [showChanges]);
+  }, [showChanges, showGreyscale]);
 
   function getSidebySideDiff(): React.ReactNode {
     return (
@@ -203,8 +214,9 @@ export const ImgDetailDiff = ({ newCell, oldCell }: IDiffProps) => {
         <label>
           <input
             type="checkbox"
-            checked={showChanges}
-            onChange={handleHighlightChangesChange}
+            checked={showGreyscale}
+            disabled={!showChanges}
+            onChange={handleGreyscaleChange}
             style={{ marginBottom: '1em' }}
           />
           Convert to Greyscale
@@ -222,8 +234,8 @@ export const ImgDetailDiff = ({ newCell, oldCell }: IDiffProps) => {
           // else show nothing
           additions !== undefined && deletions !== undefined ? (
             <>
-              <span style={{ fontWeight: 600 }}>Added Regions: {additions}</span>
-              <span style={{ fontWeight: 600 }}>Removed: {deletions}</span>
+              <span style={{ fontWeight: 600 }}>Regions Added: {additions}</span>
+              <span style={{ fontWeight: 600 }}>Regions Removed: {deletions}</span>
             </>
           ) : (
             <> </>