Start a new topic
Text
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 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>
)
export default App;
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;
Vagatsingh2016
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 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;
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:
Gwenaelle @MyScript
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: