docs: customized calculations

Author: lukaszkurantdev

docs/pages/customized.md

@@ -1 +1,63 @@
-In special cases where you need maximum performance, you can easily create your own code in C++ and run it from within the JS code.
+# Customized calculations (C++)
+
+> Only in advanced cases.
+
+In special cases where you will need maximum performance or some functionality is missing from the library, you can easily create your own code in C++ and run it from JS code.
+
+As the code can be written in C++, the solution will be fully cross-platform and does not need different implementations for iOS and Android.
+
+In file `cpp/react-native-fast-opencv.cpp` find this lines:
+
+```cpp
+/// ...
+} else if (propName == "clearBuffers") {
+    return jsi::Function::createFromHostFunction(
+      runtime, jsi::PropNameID::forAscii(runtime, "clearBuffers"), 1,
+      [=](jsi::Runtime& runtime, const jsi::Value& thisValue, const jsi::Value* arguments,
+        size_t count) -> jsi::Value {
+              
+      FOCV_Storage::clear();
+      return true;
+    });
+  }
+
+  return jsi::HostObject::get(runtime, propNameId);
+}
+// ...
+```
+
+Add your own else check with your own customized name of function:
+
+```cpp
+else if (propName == "customFunction") {
+    return jsi::Function::createFromHostFunction(
+      runtime, jsi::PropNameID::forAscii(runtime, "clearBuffers"), 1,
+      [=](jsi::Runtime& runtime, const jsi::Value& thisValue, const jsi::Value* arguments,
+        size_t count) -> jsi::Value {
+
+        // Params
+        FOCV_FunctionArguments args(runtime, arguments);
+
+        // Example – first param is string
+        auto param1 = args.asString(0);
+
+        // Second param is Mat
+        auto functionName = args.asMatPtr(1);
+
+        // etc
+
+        // Calculations... 
+        // HERE OpenCV functions and API is available
+        // Check how to get parameters from function
+        // Examples in FOCV_Function.cpp
+
+      // return JSI data or just do something...
+    });
+  }
+```
+
+Compile et voilà – you can use it in your JS code:
+
+```js
+OpenCV.customFunction(params);
+```

docs/pages/examples/_meta.json

@@ -1,3 +1,4 @@
 {
-  "realtimedetection": "Real-time detection"
+  "realtimedetection": "Real-time detection",
+  "blur": "Blur image on separated thread"
 }

docs/pages/examples/blur.md

@@ -28,6 +28,7 @@ Due to the size of the OpenCV library, this port currently only supports selecte
 
 List of available functions are available [here](./availablefunctions.md).
 
+---
 
 ### Credits
 Special thanks to:

docs/pages/index.md

@@ -13,21 +13,21 @@ const logo = () => {
             data-name="Path 16"
             d="M-7.119,4.2A8.289,8.289,0,0,1-10.981-5.12a8.289,8.289,0,0,1,8.006-6.143A8.289,8.289,0,0,1,5.032-5.12,8.289,8.289,0,0,1,1.17,4.2l-2.5-4.323A3.3,3.3,0,0,0,.211-3.828,3.3,3.3,0,0,0-2.975-6.272,3.3,3.3,0,0,0-6.16-3.828,3.3,3.3,0,0,0-4.623-.119Z"
             transform="translate(23.58 11.263)"
-            fill="#fff"
+           fill="#409ded"
           />
           <path
             id="Path_17"
             data-name="Path 17"
             d="M4.145,15.467a8.289,8.289,0,1,1,8.289,0l-2.5-4.323a3.3,3.3,0,1,0-3.3,0Z"
             transform="translate(38.36 32.945) rotate(180)"
-            fill="#fff"
+      fill="#409ded"
           />
           <path
             id="Path_18"
             data-name="Path 18"
             d="M4.145,15.468a8.289,8.289,0,1,1,8.289,0l-2.5-4.323a3.3,3.3,0,1,0-3.3,0Z"
             transform="translate(8.29 35.979) rotate(-119.998)"
-            fill="#fff"
+     fill="#409ded"
           />
         </g>
       </svg>

docs/theme.config.jsx

@@ -77,8 +77,10 @@ export function ImageExample() {
     }
   };
 
-  const test2 = useRunOnJS((data: string) => {
-    setB64(data);
+  const [base64, setBase64] = useState<string>('');
+
+  const setImage = useRunOnJS((data: string) => {
+    setBase64(data);
   }, []);
 
   const worklet = useWorklet(
@@ -103,7 +105,7 @@ export function ImageExample() {
 
         const result = OpenCV.toJSValue(dst);
 
-        test2(result.base64);
+        setImage(result.base64);
       }
     },
     []