Handwriting Character Recognition

Used to analyze answers to math questions, currently built to recognize the following characters: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, <, >, =.

For our app purpose:

• Numbers can be recognized as a group, like 1234
• Operators can only be identified when drawn individually

Install

npm i @edumedia/handwriting-character-recognition

Usage

Download the LibData from the main repo's public/data.json and make it available in your app at /data.json (for example in your public folder).

You can also specify the path from which the data will be loaded when you initialize the DrawingAnalyzer:

const drawingAnalyzer = new DrawingAnalyzer({dataPath: "my-data-path"})

When you have your data ready, import the DrawingAnalyzer, give it a CharacterDrawing and do what you want with the result.

import { DrawingAnalyzer, type CharacterDrawing } from "@edumedia/handwriting-character-recognition"

// Create your DrawingAnalyzer instance
const drawingAnalyzer = new DrawingAnalyzer()

// Initialize a drawing
const userDrawing: CharacterDrawing = {
  id: "user", // id is used internaly when processing our data, you can write anything here
  strokes: [],
  strokeWidth: 10, // Since we analyze points, we need the strokeWidth to see if two lines are touching
  // Dimention of the canvas on which the strokes are drawn
  width: 280,
  height: 280,
};

// Let your user fill `userDrawing.strokes` with a great UI

// Analyze the drawing
const analyzerResult = drawingAnalyzer.analyze(userDrawing)

// Do something with the result
console.log(analyzerResult.characterString)

Live example