Forums

Start a new topic

Text

Answered

How to set recognized value to text box in react js

Hi Team, 

As we can draw the character on page and can recognized it also and setting the value in Editor

<div id="editor" touch-action="none"></div>


But the place of <div> how can I save that value in textbox in react.js.

I followed below git example 

https://github.com/mathieuancelin/react-handwriting-recognition

I have written code below , now I want to the recognized value in textbox on button click to how can I do?



import React, { useRef, useEffect } from 'react';


import logo from './logo.svg';

import './App.css';

import * as iink from 'iink-js';



function App() {

  const editorRef = useRef(null);

  const editorStyle = {

    'minWidth': '100px',

    'minHeight': '100px',

    'width': '100vw',

    'height': '400px',//'calc(100vh - 190px)',

    'touchAction': 'none',

  };


  useEffect(() => {

    let editor = editorRef.current;

    editor = iink.register(editorRef.current, {

      recognitionParams: {

        type: 'TEXT',

        protocol: 'WEBSOCKET',

        apiVersion: 'V4',

        server: {

          scheme: 'https',

          host: 'webdemoapi.myscript.com',

          applicationKey: 'xxx',

          hmacKey: 'yyy',

 

        },

      },

    });

    window.addEventListener('resize', () => { 

      editor.resize() 

    });


    return () => {

      window.removeEventListener('resize', () => { editor.resize() });

      this.editor.close();

    }

  }, []);


  return (

    <div className="App">

      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        <h1 className="App-title">Handwriting Recognization</h1>

      </header>

      <div>

 

    </div> 

    <div id="editor" touch-action="none" style={editorStyle} ref={editorRef}></div>    

  </div>

 

  )

}


export default App;


Best Answer

Hello,


Thank you for contacting us


First when posting on the forum don't post your keys, as those are personal.


If you want to add a convert button, starting from the Reac example, you can simply use following code:

import React, { useRef, useEffect } from 'react';
import logo from './logo.svg';
import './App.css';
import * as iink from 'iink-js';

function App() {
  const editorRef = useRef(null);
  const editorStyle = {
    'minWidth': '100px',
    'minHeight': '100px',
    'width': '100vw',
    'height': 'calc(100vh - 190px)',
    'touchAction': 'none',
  };

  function convert() {
    editorRef.current.editor.convert();
  }
  

  useEffect(() => {
    let editor = editorRef.current;
    editor = iink.register(editorRef.current, {
      recognitionParams: {
        type: 'TEXT',
        protocol: 'WEBSOCKET',
        apiVersion: 'V4',
        server: {
          scheme: 'https',
          host: 'webdemoapi.myscript.com',
          applicationKey: 'xxx',
          hmacKey: 'yyy',
        },
      },
    });
    window.addEventListener('resize', () => { 
      editor.resize() 
    });

    return () => {
      window.removeEventListener('resize', () => { editor.resize() });
      this.editor.close();
    }
  }, []);


  return (
    <div className="App">
      <header className="App-header">
        <button class="classic-btn" onClick={convert} >Convert</button>
      </header>
      <div style={editorStyle} ref={editorRef} touch-action="none">
      </div>
    </div>
  )
}

export default App;




1 Comment
Answer

Hello,


Thank you for contacting us


First when posting on the forum don't post your keys, as those are personal.


If you want to add a convert button, starting from the Reac example, you can simply use following code:

import React, { useRef, useEffect } from 'react';
import logo from './logo.svg';
import './App.css';
import * as iink from 'iink-js';

function App() {
  const editorRef = useRef(null);
  const editorStyle = {
    'minWidth': '100px',
    'minHeight': '100px',
    'width': '100vw',
    'height': 'calc(100vh - 190px)',
    'touchAction': 'none',
  };

  function convert() {
    editorRef.current.editor.convert();
  }
  

  useEffect(() => {
    let editor = editorRef.current;
    editor = iink.register(editorRef.current, {
      recognitionParams: {
        type: 'TEXT',
        protocol: 'WEBSOCKET',
        apiVersion: 'V4',
        server: {
          scheme: 'https',
          host: 'webdemoapi.myscript.com',
          applicationKey: 'xxx',
          hmacKey: 'yyy',
        },
      },
    });
    window.addEventListener('resize', () => { 
      editor.resize() 
    });

    return () => {
      window.removeEventListener('resize', () => { editor.resize() });
      this.editor.close();
    }
  }, []);


  return (
    <div className="App">
      <header className="App-header">
        <button class="classic-btn" onClick={convert} >Convert</button>
      </header>
      <div style={editorStyle} ref={editorRef} touch-action="none">
      </div>
    </div>
  )
}

export default App;