initial commit
This commit is contained in:
commit
fc1ff1b47b
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kanji Recognition</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<script src="./script.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id='canvas'></canvas>
|
||||
<div id='response'>None</div>
|
||||
<button id="clear">Clear</button>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
const responseDiv = document.getElementById("response");
|
||||
const clearButton = document.getElementById("clear");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* API */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
const MAX_RESULTS = 10;
|
||||
const API = 'https://inputtools.google.com/request?itc=ja-t-i0-handwrit&app=translate';
|
||||
const DEVICE = navigator.userAgent
|
||||
|
||||
const generateRequestData = strokes => ({
|
||||
app_version: 0.4,
|
||||
api_level: '537.36',
|
||||
device: DEVICE,
|
||||
input_type: 0,
|
||||
options: 'enable_pre_space',
|
||||
requests: [
|
||||
{
|
||||
writing_guide: {
|
||||
writing_area_width: canvas.width,
|
||||
writing_area_height: canvas.height
|
||||
},
|
||||
pre_context: '',
|
||||
max_num_results: MAX_RESULTS,
|
||||
max_completions: 0,
|
||||
language: 'ja',
|
||||
ink: strokes
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const sendKanjiRequest = async (strokes) => fetch(API, {
|
||||
headers: { "content-type": "application/json; charset=UTF-8" },
|
||||
body: JSON.stringify(generateRequestData(strokes)),
|
||||
method: "POST"
|
||||
})
|
||||
.then(data => data.json())
|
||||
.then(res => {
|
||||
if (res[0] != "SUCCESS") throw Error(res[0]);
|
||||
responseDiv.innerText = res[1][0][1].join(', ');
|
||||
})
|
||||
.catch(err => console.error(err));
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* CANVAS */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
const MILLISECONDS_PER_POINT = 20;
|
||||
|
||||
canvas.height = 500;
|
||||
canvas.width = 500;
|
||||
|
||||
ctx.strokeStyle = 'black';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.lineCap = 'round';
|
||||
ctx.lineJoin = 'round';
|
||||
|
||||
let strokes = [];
|
||||
|
||||
let newStroke = {};
|
||||
let mouseDown = false;
|
||||
let drawingTimeout = -1;
|
||||
let timerStart = 0;
|
||||
let x = 0;
|
||||
let y = 0;
|
||||
|
||||
/** Clear/initialize the newStroke variable after adding the current to globalStrokes */
|
||||
genNewStroke = () => {
|
||||
newStroke = {
|
||||
'xs': [],
|
||||
'ys': [],
|
||||
'times': [],
|
||||
};
|
||||
}
|
||||
|
||||
genNewStroke();
|
||||
|
||||
const addPointToNewStroke = (x, y) => {
|
||||
newStroke.xs.push(x);
|
||||
newStroke.ys.push(y);
|
||||
newStroke.times.push(Date.now() - timerStart);
|
||||
}
|
||||
|
||||
const drawLine = (dx, dy) => {
|
||||
ctx.moveTo(x, y);
|
||||
ctx.lineTo(dx, dy);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
updateStroke = (newX, newY) => {
|
||||
drawLine(newX, newY);
|
||||
addPointToNewStroke(newX, newY);
|
||||
x = newX;
|
||||
y = newY;
|
||||
drawingTimeout = -1;
|
||||
}
|
||||
|
||||
const initStroke = (initX, initY) => {
|
||||
genNewStroke();
|
||||
timerStart = Date.now();
|
||||
x = initX;
|
||||
y = initY;
|
||||
mouseDown = true;
|
||||
ctx.beginPath();
|
||||
}
|
||||
|
||||
const updateStrokeIfPrevLineIsDone = (newX, newY) => {
|
||||
if (mouseDown === true && drawingTimeout === -1)
|
||||
drawingTimeout = setTimeout(
|
||||
() => updateStroke(newX, newY),
|
||||
MILLISECONDS_PER_POINT
|
||||
);
|
||||
}
|
||||
|
||||
const endStroke = () => {
|
||||
if (!(drawingTimeout === -1)) {
|
||||
clearTimeout(drawingTimeout);
|
||||
drawingTimeout = -1;
|
||||
}
|
||||
mouseDown = false;
|
||||
ctx.closePath();
|
||||
strokes.push([newStroke.xs, newStroke.ys, newStroke.times]);
|
||||
sendKanjiRequest(strokes);
|
||||
}
|
||||
|
||||
const clearBoard = () => {
|
||||
strokes = [];
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
responseDiv.innerHTML = 'None';
|
||||
}
|
||||
|
||||
canvas.onmousedown = event => initStroke(event.offsetX, event.offsetY);
|
||||
canvas.onmousemove = event => updateStrokeIfPrevLineIsDone(event.offsetX, event.offsetY);
|
||||
canvas.onmouseup = () => endStroke();
|
||||
|
||||
const getOffset = (x, y) => {
|
||||
const canvasRect = canvas.getBoundingClientRect();
|
||||
return [x - canvasRect.left, y - canvasRect.top];
|
||||
}
|
||||
|
||||
canvas.ontouchstart = event => {
|
||||
event.preventDefault();
|
||||
({clientX, clientY} = event.changedTouches[0]);
|
||||
[x, y] = getOffset(clientX, clientY);
|
||||
initStroke(x, y);
|
||||
}
|
||||
|
||||
canvas.ontouchmove = event => {
|
||||
event.preventDefault();
|
||||
({clientX, clientY} = event.changedTouches[0]);
|
||||
[x, y] = getOffset(clientX, clientY);
|
||||
updateStrokeIfPrevLineIsDone(x, y);
|
||||
}
|
||||
|
||||
canvas.ontouchend = () => endStroke();
|
||||
|
||||
clearButton.onclick = () => clearBoard();
|
||||
Reference in New Issue