Merge pull request #165 from sandboxnu/sobel-filter

Sobel filter

package.json

@@ -14,6 +14,10 @@
     "csstype": "3.0.6",
     "filter": "0.1.1",
     "gaussian-convolution-kernel": "1.0.0",
+    "hog-features": "1.0.0",
+    "image-js": "0.31.4",
+    "jimp": "0.16.1",
+    "mathjs": "^9.3.0",
     "ml-dataset-iris": "1.1.1",
     "ml-distance-euclidean": "2.0.0",
     "ml-kmeans": "5.0.0",
@@ -57,7 +61,7 @@
     "eslint-plugin-prettier": "3.3.1",
     "eslint-plugin-react": "7.22.0",
     "eslint-plugin-react-hooks": "4.2.0",
-    "postcss": "8.2.10",
+    "postcss": "8.1.13",
     "postcss-cli": "7.1.2",
     "prettier": "2.2.1",
     "react-scripts": "4.0.1",

src/index.css

@@ -69,3 +69,63 @@ input[type="range"] {
 input[type="range"]:focus {
   outline: none;
 }
+
+.kmeansgraph {
+  position: relative;
+  width: 60%;
+  height: 50%;
+  float: right;
+}
+
+.axis-selector button {
+  border: none;
+  outline: none;
+  padding: 7px 10px;
+  margin: 1px;
+  background-color: #8D9DBA;
+  font-weight: bold;
+  font-size: 12pt;
+  color: #f2f2f2;
+}
+
+.axis-selector button:hover {
+  background-color: #617394;
+}
+
+.axis-selector button.selected {
+  background-color: #394D73;
+}
+
+.min-w-20vw {
+  min-width: 20vw;
+}
+
+.max-w-20vw {
+  max-width: 20vw;
+}
+
+.max-w-60vw {
+  max-width: 60vw;
+}
+
+.w-20vw {
+  width: 20vw;
+}
+
+.w-60vw {
+  width: 60vw;
+}
+
+.sobel-image-width {
+  width: 60vw;
+}
+
+@media (min-width:768px) {
+  .sobel-image-width {
+    width: 20vw;
+  }
+}
+
+.img-invert {
+  filter: invert(1)
+}

src/modulePage/ModuleSection.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import SobelFilterDemo from '../modules/computerVision/sobelFilter/SobelFilterDemo';
 import GaussianBlurDemo from '../modules/computerVision/gaussianBlur/GaussianBlurDemo';
 import GaborDemo from '../modules/computerVision/gaborFilter/gaborFilter';
 import DiffOfGaussianDemo from '../modules/computerVision/diffofgaussian/DiffOfGaussian';
@@ -87,6 +88,14 @@ function getDemo(comp: string, scheme: ColorScheme) {
           demoProps={demoArgs}
         />
       );
+    case 'SobelFilterDemo':
+      return (
+        <ImageSelectableDemo
+          Demo={SobelFilterDemo}
+          initImg="stopSign.jpeg"
+          demoProps={demoArgs}
+        />
+      );
     case 'PCADemo':
       return <PCADemo {...demoArgs} />;
     case 'RawDataTable':

src/modules/computerVision/imageSelector/ImageSelector.tsx

@@ -16,6 +16,8 @@ const ALL_IMGS: { [name: string]: any } = {
     .default,
   'purpleFlowers.jpeg': require('../../../media/modules/computerVision/imageLibrary/purpleFlowers.jpeg')
     .default,
+  'stopSign.jpeg': require('../../../media/modules/computerVision/imageLibrary/stopSign.jpeg')
+    .default,
   'steps.png': require('../../../media/modules/computerVision/imageLibrary/steps.png')
     .default,
   'tabbyCat.jpg': require('../../../media/modules/computerVision/imageLibrary/tabbyCat.jpg')

src/modules/computerVision/sobelFilter/SobelFilterDemo.tsx

@@ -0,0 +1,173 @@
+/* eslint-disable */
+
+import React, { useLayoutEffect, useRef, useState, useEffect } from "react";
+import {
+  gradientImages,
+  GradientsType
+} from "./sobelFilter";
+import vertDarkLightKernel from "../../../media/modules/computerVision/sobelKernels/vertical_darktolight.png";
+import vertLightDarkKernel from "../../../media/modules/computerVision/sobelKernels/vertical_lighttodark.png";
+import horizDarkLightKernel from "../../../media/modules/computerVision/sobelKernels/horizontal_darktolight.png";
+import horizLightDarkKernel from "../../../media/modules/computerVision/sobelKernels/horizontal_lighttodark.png";
+import diagDownDarkLightKernel from "../../../media/modules/computerVision/sobelKernels/diagonaldown_darktolight.png";
+import diagDownLightDarkKernel from "../../../media/modules/computerVision/sobelKernels/diagonaldown_lighttodark.png";
+import diagUpDarkLightKernel from "../../../media/modules/computerVision/sobelKernels/diagonalup_darktolight.png";
+import diagUpLightDarkKernel from "../../../media/modules/computerVision/sobelKernels/diagonalup_lighttodark.png";
+
+type GradientImageType = {
+  label: string;
+  gradient: ImageData;
+  width: number;
+  height: number;
+  labelColor: string;
+};
+
+export const GradientImage: React.FC<GradientImageType> = ({
+  label,
+  gradient,
+  width,
+  height,
+  labelColor,
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const cnvElm = canvasRef.current;
+    if (!cnvElm) return;
+    createImageBitmap(gradient).then(img =>
+      cnvElm
+        .getContext('2d')
+        ?.drawImage(img, 0, 0, cnvElm.width, cnvElm.height),
+    );
+  });
+
+  return (
+    <div className="my-auto mx-3">
+      <p className={`${labelColor} md:hidden`}>{label}</p>
+      <canvas
+        className="crisp-pixels mx-auto sobel-image-width"
+        ref={canvasRef}
+        width={width}
+        height={height}
+      />
+    </div>
+  );
+};
+
+type SobelFilterRowType = {
+  label: string,
+  labelColor: string,
+  darkLightImage: ImageData,
+  lightDarkImage: ImageData,
+  darkLightKernelSrc: string,
+  lightDarkKernelSrc: string
+}
+
+const SobelFilterRow: React.FC<SobelFilterRowType> = ({
+  label,
+  labelColor,
+  darkLightImage,
+  lightDarkImage,
+  darkLightKernelSrc,
+  lightDarkKernelSrc
+}) => {
+  return (
+    <div className="my-3">
+      <p className={`text-3xl ${labelColor}`}>{label}</p>
+      <div className="flex flex-col md:flex-row justify-evenly ">
+        <GradientImage
+          label="Dark to Light"
+          gradient={darkLightImage}
+          width={darkLightImage.width}
+          height={darkLightImage.height}
+          labelColor={labelColor}
+        />
+        <div className="my-auto mx-auto">
+          <img src={darkLightKernelSrc} alt="img" className={`min-w-20vw ${labelColor === "text-modulePaleBlue" ? "img-invert" : ""}`} />
+        </div>
+        <div className="my-auto mx-auto">
+          <img src={lightDarkKernelSrc} alt="img" className={`min-w-20vw ${labelColor === "text-modulePaleBlue" ? "img-invert" : ""}`} />
+        </div>
+        <GradientImage
+          label="Light to Dark"
+          gradient={lightDarkImage}
+          width={lightDarkImage.width}
+          height={lightDarkImage.height}
+          labelColor={labelColor}
+        />
+      </div>
+    </div>
+  )
+};
+
+type SobelFilterDemoType = {
+  labelColor: string;
+  imgUrl: string;
+};
+
+const SobelFilterDemo: React.FC<SobelFilterDemoType> = ({
+  labelColor,
+  imgUrl,
+}) => {
+  const imgRef = useRef<HTMLImageElement>(null);
+  const [gradients, setGradients] = useState<GradientsType>();
+
+  const img = useRef('');
+  const config = useRef('');
+
+  useLayoutEffect(() => {
+    // reset to tab 0 when changing images
+    if (img.current !== imgUrl) {
+      gradientImages(imgUrl).then(gradients => setGradients(gradients));
+    }
+    img.current = imgUrl;
+  });
+
+  return (
+
+    <div>
+      <p className={`text-3xl ${labelColor}`}>Original Image</p>
+      <img ref={imgRef} src={imgUrl} alt="img" className="mx-auto sobel-image-width" />
+
+      {gradients &&
+        <div className='my-10'>
+          <SobelFilterRow
+            label="Vertical Edges"
+            labelColor={labelColor}
+            darkLightImage={gradients.vertDarkLight}
+            lightDarkImage={gradients.vertLightDark}
+            darkLightKernelSrc={vertDarkLightKernel}
+            lightDarkKernelSrc={vertLightDarkKernel}
+          />
+          <SobelFilterRow
+            label="Horizontal Edges"
+            labelColor={labelColor}
+            darkLightImage={gradients.horizDarkLight}
+            lightDarkImage={gradients.horizLightDark}
+            darkLightKernelSrc={horizDarkLightKernel}
+            lightDarkKernelSrc={horizLightDarkKernel}
+          />
+          <SobelFilterRow
+            label="Diagonal Down Edges"
+            labelColor={labelColor}
+            darkLightImage={gradients.diagDownDarkLight}
+            lightDarkImage={gradients.diagDownLightDark}
+            darkLightKernelSrc={diagDownDarkLightKernel}
+            lightDarkKernelSrc={diagDownLightDarkKernel}
+          />
+          <SobelFilterRow
+            label="Diagonal Up Edges"
+            labelColor={labelColor}
+            darkLightImage={gradients.diagUpDarkLight}
+            lightDarkImage={gradients.diagUpLightDark}
+            darkLightKernelSrc={diagUpDarkLightKernel}
+            lightDarkKernelSrc={diagUpLightDarkKernel}
+          />
+        </div>
+      }
+
+    </div>
+  );
+};
+
+export default SobelFilterDemo;