update react sample

Author: Shen-wb

hello-world/react/src/App.css

@@ -1,34 +1,52 @@
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.title {
   display: flex;
-  flex-direction: column;
-  align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  align-items: center;
+  margin-top: 20px;
 }
+/* .title .title-text {
 
-.App-link {
-  color: #61dafb;
+} */
+.title .title-logo {
+  width: 60px;
+  height: 60px;
+  animation: retate 5s infinite linear;
+}
+.top-btns {
+  width: 30%;
+  margin: 20px auto;
+}
+.top-btns button {
+  display: inline-block;
+  border: 1px solid black;
+  padding: 5px 15px;
+  background-color: transparent;
+  cursor: pointer;
+}
+.top-btns button:first-child {
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+  border-right: transparent;
+}
+.top-btns button:nth-child(2) {
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+  border-left: transparent;
+}
+
+@media screen and (max-width: 500px) {
+  .top-btns {
+      width: 70%;
+  }
 }
 
-@keyframes App-logo-spin {
+@keyframes retate {
   from {
-    transform: rotate(0deg);
+      transform: rotate(0deg);
   }
   to {
-    transform: rotate(360deg);
+      transform: rotate(360deg);
   }
-}
+}

hello-world/react/src/App.test.tsx

@@ -1,12 +1,31 @@
-import HelloWorld from './components/HelloWorld/HelloWorld';
+import React from 'react';
+import reactLogo from './assets/logo.svg';
+import VideoCapture from './components/VideoCapture/VideoCapture';
+import ImageCapture from './components/ImageCapture/ImageCapture';
 import './App.css';
 
-function App() {
-  return (
-    <div className="App">
-      <HelloWorld></HelloWorld>
-    </div>
-  );
+class App extends React.Component {
+  state = {
+    mode: "video"
+  };
+
+  render() {
+    return (
+      <div className="App">
+        <div className='App'>
+          <div className='title'>
+            <h2 className='title-text'>Hello World for React</h2>
+            <img className='title-logo' src={reactLogo} alt="logo"></img>
+          </div>
+          <div className='top-btns'>
+            <button onClick={() => { this.setState({ mode: "video" }) }} style={{ backgroundColor: this.state.mode === "video" ? "rgb(255, 174, 55)" : "#fff" }}>Video Capture</button>
+            <button onClick={() => { this.setState({ mode: "image" }) }} style={{ backgroundColor: this.state.mode === "image" ? "rgb(255, 174, 55)" : "#fff" }}>Image Capture</button>
+          </div>
+          {this.state.mode === "video" ? <VideoCapture /> : <ImageCapture />}
+        </div>
+      </div>
+    );
+  }
 }
 
 export default App;

hello-world/react/src/App.tsx

@@ -1,7 +1,18 @@
-.div-image-capture {
+.capture-img {
+  width: 100%;
+  height: 100%;
+  font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
+}
+
+.capture-img .img-ipt {
+  width: 80%;
+  height: 100%;
   display: flex;
   justify-content: center;
-  align-items: center;
-  width: 100%;
   border: 1px solid black;
+  margin: 0 auto;
+}
+
+.capture-img .result-area {
+  margin-top: 20px;
 }

hello-world/react/src/assets/logo.svg

@@ -5,67 +5,47 @@ import "../../cvr"; // import side effects. The license, engineResourcePath, so
 import "./ImageCapture.css";
 
 class ImageCapture extends React.Component {
-  pInit: Promise<CaptureVisionRouter> | null = null;
-  pDestroy: Promise<void> | null = null;
+  pRouter: Promise<CaptureVisionRouter> | null = null;
+  resRef: React.RefObject<HTMLDivElement> = React.createRef();
+  iptRef: React.RefObject<HTMLInputElement> = React.createRef();
 
   async init(): Promise<CaptureVisionRouter> {
     const router = await CaptureVisionRouter.createInstance();
     return router;
   }
 
-  async destroy(): Promise<void> {
-    if (this.pInit) {
-      const router = await this.pInit;
-      router.dispose();
-    }
-  }
-
-  decodeImg = async (e: React.ChangeEvent<HTMLInputElement>) => {
+  captureImage = async (e: any) => {
     try {
-      const router = await this.pInit;
-      // Decode selected image with 'ReadBarcodes_SpeedFirst' template.
-      const result = await router!.capture(
-        e.target.files![0],
-        "ReadBarcodes_SpeedFirst"
-      );
-      let texts = "";
+      this.resRef.current!.innerText = "";
+      const router = await this.pRouter;
+      const result = await router!.capture(e.target.files[0]);
       for (let item of result.items) {
-        console.log((item as BarcodeResultItem).text);
-        texts += (item as BarcodeResultItem).text + "\n";
+        let _item = item as BarcodeResultItem;
+        console.log(_item.text);
+        this.resRef.current!.innerText += `${_item.formatString} : ${_item.text}\n`
       }
-      if (texts !== "") alert(texts);
-      if (!result.items.length) alert("No barcode found");
+      this.iptRef.current!.value = '';
     } catch (ex: any) {
       let errMsg = ex.message || ex;
       console.error(errMsg);
       alert(errMsg);
     }
-    e.target.value = "";
-  };
+  }
 
   async componentDidMount() {
-    // In 'development', React runs setup and cleanup one extra time before the actual setup in Strict Mode.
-    if (this.pDestroy) {
-      await this.pDestroy;
-      this.pInit = this.init();
-    } else {
-      this.pInit = this.init();
-    }
+    this.pRouter = CaptureVisionRouter.createInstance();
   }
 
   async componentWillUnmount() {
-    await (this.pDestroy = this.destroy());
-    console.log("ImageCapture Component Unmount");
+    (await this.pRouter)!.dispose();
+    console.log('ImageCapture Component Unmount');
   }
 
   render() {
     return (
-      <div className="div-image-capture">
-        <input
-          type="file"
-          accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp"
-          onChange={this.decodeImg}
-        />
+      <div className="capture-img">
+        <div className="img-ipt"><input type="file" ref={this.iptRef} onChange={this.captureImage} /></div>
+        <div className="result-area" ref={this.resRef}></div>
       </div>
     );
   }

hello-world/react/src/components/HelloWorld/HelloWorld.css

@@ -1,13 +1,10 @@
-body {
+* {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  padding: 0;
+  box-sizing: border-box;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+html, body {
+  text-align: center;
+  min-width: 350px;
+}

hello-world/react/src/components/HelloWorld/HelloWorld.tsx

@@ -1,19 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
+import './index.css';
+import "./cvr";
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+root.render(<App />);