Scribble-pad for my Handwriting recognition project!

In my first blog post, I mentioned about my interest to work on handwriting recognition. I’ve been working on it since quite some time now, just didn’t get time to post intermittently. I thought it’s a good time to publish what I’ve been doing on this hobbistic project of mine.

In this post, I’ll share one way of accepting user input i.e. by building a scribble pad. This is one of the most intuitive ways of capturing user input for further processing.

So I decided to create a scribble-pad myself, and what better development technology could I use than Qt and QML. (Fyi, using Qt and QML in an application – gives a Qt Quick application, as they call it)  So, today I’ll be talking about this scribble-pad component in my handwriting recognition exploration.

Here’s how the scribble-pad is finally going to look like! I didn’t concentrate much on the UI part of the scribble pad, but it works well on a mobile device too – I’ve been testing it on Nokia C7.

Let’s now get into the technical implementation of the scribble-pad. The UI of the application is written with QML while some of the engine part (like saving the painted image) is done with Qt.

The white rectangle would be acting as a canvas for the user to scribble on. So basically, when the user clicks/touches the canvas, a new object is created at that point (x,y) using Qt.createQmlObject function.

With QDeclarativeView we direct our UI to a QML file.  Most of the UI components inside the QML are generic – like we’ve used a ListView for showing the color list. The ListView has a model which defines the data to be displayed, and a delegate which defines how the data should be displayed. Items in a ListView are laid out vertically.

 Rectangle {
        id: selectcolor
        width: 40
        height: parent.height - title.height - save.height title.bottom
        anchors.left: parent.left
        border.color: "black"
        ListView {
            id: listView
            width: parent.width
            height: parent.height
            boundsBehavior: Flickable.StopAtBounds
            transformOrigin: Item.Center
            anchors.right: parent.right
            anchors.leftMargin: 4
            smooth: true
            clip: true
            anchors.fill: parent
            delegate: Item {
                height: 45
                anchors.centerIn: parent.Center
                Row {
                    id: row
                    spacing: 1
                    Rectangle {
                        border.color: "black"
                        width: 30
                        height: 35
                        color: colorCode
                        radius: 5
                            anchors.fill:parent; focus: true;
                                // The javascript function setcolorSize(colour, objectwidth, objectheight) invoked
            model: ListModel {
                ListElement {
                    colorCode: "Black"
                ListElement {
                    colorCode: "Grey"
                ListElement {
                    colorCode: "Brown"
                ListElement {
                    colorCode: "Yellow"

We also have buttons for Saving and Resetting the scribble-pad.

The interesting part is the onMousePositionChanged function in the white rectangle. onMousePositionChanged will help us locate the (x,y) coordinates on the canvas. We then invoke the shape function of our Javascript file that will draw a rectangle dynamically.


Here’s what the paintshape(x,y) function does,

With the help of Qt.createQmlObject an object is created dynamically which is set at the (x,y) coordinates with the specified color.

We have saved the image with the help of Qt function:

QString MainWindow::myCppfunction_save()
    originalPixmap = QPixmap::grabWindow(winId(),41,40,319,570);
    QImage image= originalPixmap.toImage();
    QString path;
    path = "C:\\Data\\Images\\En\\SavedImage.bmp";;
    return path;

The above function is invoked from the QML file and by using the QtDeclarativeContext. QtDeclarativeContext allows data to be exposed to the QML components instantiated by the QML engine. Hence, this function would return a file path to the QML code where the Image component of Qml with the help of its “source” property saves the image to that path.

So, that was my first step towards handwriting recognition. Next, we will attempt to process the saved image to recognize what the user has scribbled.

This entry was posted in Code Example, Nokia, Projects, Qt Quick, Symbian and tagged , , , , , , , . Bookmark the permalink.

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s