GSoC 2016 – Final post: TuxPaint, a QML Canvas 2d creation

Datetime:2016-08-23 03:01:25          Topic:          Share

Every journey eventually ends and though not expected nor desired, Google Summer of Code 2016 is officially over. These three months have been full of fun and good times but also hard work. I have learned the “Secrets of the Git”,  how to approach and work with a big project, give myself smaller tasks and solve them in order to achieve the greater goal.

It’s been a great experience working with different people having the same objective: creating a reliable and educational piece of software but at the same time with a friendly interface for children. I interacted with teachers, students and developers from all around the worlds and I learned a lot from each and every one of them.

Participating at GSoC with GCompris was a very educational period for me and I hope I brought some improvement to the community as well. I hope my work will help children of all ages learn something new and have fun while interacting with my activities.

Update on my work:

In the second part of GSoC (after the mid-term evaluations), I finished Crane, Alphabetical Order and Share and started working on the hardest task of all: porting TuxPaint. A presentation of the old TuxPaint can be accessed here: http://gcompris.net/screenshots-en.html#tuxpaint .

First of all, I must admit that this is the hardest project I have ever worked on, mostly due to the lack of documentation on the subject and also because of its complexity, mixing many tools and functionalities.

That being said, in developing TuxPaint, I took the liberty to redesign the old version and give it a new look. So let me introduce… TuxPaint:

TuxPaint presents itself to the user with many useful tools like different types of brush, eraser, size selector, shapes: circle, rectangle, lines, text, undo and redo, load children creation or other images and the possibility of saving the current painting.

I’ll start presenting the brushes:

The pencil is used in the first image, where I drew the smiling face. The next three are pattern based brushes: you use them to draw circles, horizontal and vertical lines. Next are a spray brush and a pen tool, followed by a circle line and a crossing lines pen. The last tool is a blurred line, with extra shadow.

All tools can be customized to have any color the user needs. All he has to do is pick the desired color from the top part of the screen and the size he wants from the right panel.

Next tools on the list are represented by the shapes:

  • circle and rectangle

  • two types of lines:
  1. Free-angle lines and Horizontal and Vertical lines

This slideshow requires JavaScript.

Another functionality TuxPaint brings to the user is the ability of writing text onto the painting:

The text color can be set by picking any color from top and the size can be changed by pressing on the “size” button, just like the customization of the brushes.

Next tools are “Undo” and “Redo”, which are self-explanatory: when pressed, “Undo” removes the last addition and “Redo” brings it back.

The user also has the ability to save his creation by pressing on the last tool, represented by a blue disk. This feature enables him to go back to any previous creation and start working at it from where he left it.

Pressing on the “Load” button brings to the view a side screen with images that can be imported to the main board.

The “TuxPaint” button brings to the view another screen which contains users’ previous creation.

Another feature that TuxPaint brings is the “reload” button. It resets all the board by erasing everything and painting the board in white. For security reasons, if the user has anything drawn on the board, a Dialog Message will appear, asking him if he wants to save his work. He can choose to save it or not, or to go back to painting. A similar Dialog Box will appear when pressing on the Home button, to prevent him from losing his painting.

This slideshow requires JavaScript.

In the development of TuxPaint, I used Qml Canvas 2d, and besides the qml documentation, I had to go through many HTML 5 canvas 2d documentation. Since this is uncharted land for me, it took me a lot of time and research in order to fully understand the context and the way canvas2d works.

For some brush types I used as example a post on html5 canvas2d drawing – http://perfectionkills.com/exploring-canvas-drawing-techniques/  and modified them to my needs.

Though finished, TuxPaint is not bug-free. It will take some time for me (and mentors) to continue testing it, but for now, it is functional and meets all the expectations.

My work for GCompris as part of GSoC is over now (except being fixing minor bugs on the not yet merged activities: Share, Alphabetical Order, PhotoHunter-Help feature and Paint) but my contribution is not over. I enjoyed my time spent with the KDE community, especially with the GCompris team so I plan to actively participate on the chat, give help to the new contributors anytime I am able to and help building great activities furthermore in the future.

Last but not least, I would like to thank the mentors and especially Johnny Jazeix for his 24/7 help and support.