Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make Greyscale Checkbox for Image Diffs work #72

Merged
merged 2 commits into from
Dec 28, 2023
Merged

Make Greyscale Checkbox for Image Diffs work #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5e6ac64
cleanup logging
keckelt Dec 28, 2023
e568a7e
Add functionality to greyscale checkbox #67
keckelt Dec 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/Detail/Image/OpenCV-ImgDiff.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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;
}

Expand Down
36 changes: 24 additions & 12 deletions src/Detail/ImgDetailDiff.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,13 @@
};

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));
Expand All @@ -32,7 +36,6 @@

useEffect(() => {
const addDiffs = async () => {
console.log('useEffect calls addDiffs', showChanges);
if (showChanges) {
const addedBase64 = await addDifferenceHighlight(
prepareBase64(oldCell),
Expand All @@ -43,19 +46,27 @@
b: 165
},
3,
false
false,
showGreyscale
);
if (addedBase64) {
setNewBase64(addedBase64.img);
}
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);
}
Expand All @@ -70,7 +81,7 @@
};

addDiffs();
}, [showChanges]);
}, [showChanges, showGreyscale]);

function getSidebySideDiff(): React.ReactNode {
return (
Expand Down Expand Up @@ -203,8 +214,9 @@
<label>
<input
type="checkbox"
checked={showChanges}
onChange={handleHighlightChangesChange}
checked={showGreyscale}
disabled={!showChanges}
onChange={handleGreyscaleChange}
style={{ marginBottom: '1em' }}
/>
Convert to Greyscale
Expand All @@ -222,8 +234,8 @@
// 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>
</>
) : (
<> </>
Expand Down Expand Up @@ -390,7 +402,7 @@
/**
* Compute the mean structural similarity index between two images.
*/
function ssim(

Check warning on line 405 in src/Detail/ImgDetailDiff.tsx

View workflow job for this annotation

GitHub Actions / build 

'ssim' is defined but never used
baseImgData: Uint8ClampedArray | number[],
compareImgData: Uint8ClampedArray | number[],
baseImgWidth: number,
Expand All @@ -402,7 +414,7 @@
const L = 255;
const C1 = (K1 * L) ** 2;
const C2 = (K2 * L) ** 2;
const C3 = C2 / 2;

Check warning on line 417 in src/Detail/ImgDetailDiff.tsx

View workflow job for this annotation

GitHub Actions / build 

'C3' is assigned a value but never used

let sum = 0;
let count = 0;
Expand Down Expand Up @@ -474,7 +486,7 @@
return mutualInfo;
}

function nmi(

Check warning on line 489 in src/Detail/ImgDetailDiff.tsx

View workflow job for this annotation

GitHub Actions / build 

'nmi' is defined but never used
baseImageData: Uint8ClampedArray | number[],
compareImageData: Uint8ClampedArray | number[],
numBins: number
Expand All @@ -490,7 +502,7 @@
return nmiValue;
}

function meanSquaredError(

Check warning on line 505 in src/Detail/ImgDetailDiff.tsx

View workflow job for this annotation

GitHub Actions / build 

'meanSquaredError' is defined but never used
baseImageData: Uint8ClampedArray | number[],
compareImageData: Uint8ClampedArray | number[]
): number {
Expand Down
Loading