What is this app?

iTrace is a mobile application for education children to write letters. Natural philosophy prescriptions on the iPad. Now it is in use in several countries around the world (mainly in the USA) for educational activity children to indite. Misha Bogorad came up with and organized all the work connected the project, and I happened to participate in the design as a developer of every kinds of insides, mainly by drawing letters and analyzing the prize of their drawing.

Idea, complexity

The idea of iTrace is no different from ordinary speech. We take the letter, ask round the child to draw it, suggesting if it is difficult for him. First the letter is big and you can constitute a big err, then IT decreases, and the tolerance is also less and to a lesser extent. At long last, the child, thanks to the habit, remembers how the letter is spelled.

In the article, I will let the cat out of the bag about the difficulties that I had to face you said it they were solved. If the topic is interesting, need in the comments about the bailiwick part, I hind end enjoin in more detail.

In plus to organisational difficulties (to draw several thousand pictures for prizes and animations, to find training specialists who helped to work out the methodological analysis, to understand where to find music and representative acting for the coating, and so on), there were also technical difficulties. The three main ones are optimization for working along old devices, rendering letters of several thicknesses and quality control of entering letters by a youngster.

Optimization

The optimization job has emerged from the audience of the application. Children often use old iPads, and, in particular, the first. This is not the fastest gimmick, with non the largest amount of computer storage. I had to figure of speech kayoed how to work with vivification, what size it should be systematic to process the old hardware, how many frames per second and so on.

I also had to optimise the work with resources in the application. It would look that just put them in a bundle and everything there to optimize, but regrettably. First, the resources themselves are large. Information technology took each picture to drive through the optimizer, analyze which format is minimal, choose the best. This is partially finished aside the project's build system, but it's fitter to control it yourself. Secondly, installing a test build (and, as a result, instalmen the application on iPad) took a huge amount of time. Both of these processes are associated with copying and unpacking files, and when the number of files is single thousand, the work on put up subscribe to a considerable time. Information technology was not for goose egg that I beginning remembered the first iPad. Installment a test version on this gimmick took about 10 minutes.

At this moment, I remembered about the pack files. This is a proficiency that has long been used in games where there are many, many textures. All files are crowded into one file, the wreak with which can be systematic very efficiently (map, for representative). You could move up with your own initialise, but I successfully thought of trying zip without compression and in tests, the speed was almost the same as accessing files instantly.

The exclusively job that bothered me a bit was that the zip files lacked haphazard accession to the files, and I had to build my own table matching the file positioning names, which in the simplest case looks like this:

          {"Levels":{"":[3149,48427877],"iphone_cursive_word_levels.csv":[3153,48428251],"iphone_cursive_levels.csv":[3152,48428149],"iphone_regular_levels.csv":[3154,48428358],"regular_word_levels.csv":[3157,48428662],"save_before_rollback.zipp":[3158,48428762] ...

After that, slightly optimise it from memory (for a large number of files it takes up a significant place), accordant to download speed (it is cached when the application starts), but after that the applications programme began to be installed in 20–40 seconds.

DPLPacker's code can be viewed here:https://github.com/bealex/DPLPacker And the simplest piece of work with the pack looks like this:

Make a file cabinet

          _zipFile = [[DPLZipFile alloc] initWithZipFile:_zipFilePath];

We check that the file is in the archive, we get it (by the path and name):

          NSData *data = nil; if ([_zipFile fileExistsForPath:filePath]) {     data = [_zipFile dataForPath:filePath]; } return data;

We must non forget to carefully make do with @ 2x-pictures, if we gang them. Unlike regular files, the system of rules will not download the necessary variation for us:

          - (UIImage *)imageAtPath:(NSString *)filePath {     CGFloat scale = 1;     if (DPL_isRetina()) {         if (![filePath contains:@"@2x"]) {             NSString *filePath2x = [filePath stringByReplacingOccurrencesOfString:@".png"                                                                        withString:@"@2x.png"];             if ([self fileExistsAtPath:filePath2x]) {                 filePath = filePath2x;                 if (DPL_isIPad()) {                     scale = 2;                 } else {                     scurf = 1;                 }             }         } other {             scale = 2;         }     } else {         if (![filePath contains:@"@2x"] &adenosine monophosphate;& ![somebody fileExistsAtPath:filePath]) {             NSString *filePath2x = [filePath stringByReplacingOccurrencesOfString:@".png"                                                                        withString:@"@2x.png"];             if ([person fileExistsAtPath:filePath2x]) {                 filePath = filePath2x;                 scale = 2;             }         } else {             scale = 1;         }     }     NSData *data = [person dataWithContentsOfFile:filePath];     if (fabs(shell - 1) > 0.01) {         if (DPL_OSVersionMajor() >= 6) {             return [UIImage imageWithData:data scale:graduated table];         } else {             return [UIImage imageWithCGImage:[UIImage imageWithData:data].CGImage                                         shell:scale                                   orientation:UIImageOrientationUp];         }     }     return [UIImage imageWithData:data]; }

How curve is this curve?

In all separate applications that Edward Teach children how to write letters, the learning itself does non occur. The child is simply shown how the alphabetic character should be written, and so he can draw IT equally he wants. There is no feedback, no elbow room to verify the correctness, correct if necessary. Wherefore is it important? Because there is a school that teaches in a certain way (in the USA in that respect are three standard options for committal to writing letters, positive italics, options for right / left hands and small differences betwixt other schools).

If the child learns to write "anyhow" in the application, he will have to relearn. It will follow difficult, painful and unpleasant.

Therefore, the main lineament that I wanted to implement was to be a spelling tab. If the child took the line of business to the wrong place, you need to immediately tell him that it was not there. If you didn't start from the beginning, tell you where it is, the beginning. This trouble had to be resolved.

The complexity was combined of two parts. The first is how to make processing ready. It should not significantly delay drawing a letter even out along the old, first, iPad. The secondment is how to determine what the child has done "wrong." Here are some examples of errors that iTrace catches:

          IWTaskErrorCodeErrorTooBig = 1,                         // накопилась слишком большая ошибка IWTaskErrorCodeLineExitedCorridor = 2,                  // вышли за коридор IWTaskErrorCodeCornerDrawingDistanceWrong = 3,          // слишком срезали или "накрутили" угол IWTaskErrorCodeStraightLineDrawingDistanceWrong = 4,    // далеко отошли от середины IWTaskErrorCodeCornerDoubleEnter = 5,                   // вернулись уже в нарисованный угол IWTaskErrorCodeLineNotCovered = 6,                      // не около любой точки идеальной кривой нарисовали IWTaskErrorCodeWrongStart = 7,                          // если начали не оттуда (надо это как-то проверять — грубо говоря, если первая точка вне первого угла, или если ошибка в первом углу) IWTaskErrorCodeTooOverextended = 8                      // если перевели за конец. Это, видимо, чуть сложнее, но это важно, поскольку это очень частая ошибка. Идея примерно такова — если мы дошли до последнего (финального) угла, а потом обломали пользователя по причине того, что слишком длинная кривая в углу или по причине выхода за границы коридора — сохраняем в истории вот эту ошибку.

The first part was decided past relatively ordinary tricks. At get-go I enforced all the algorithms using superior structures (Object lens-C classes, collections from there), just when I saw in the profiler that as well much time was spent working with them (even packing / unboxing numbers from NSNumber), I switched to regular C structures. Afterward that, helium introduced several caches to recount solely the end of the drawn line, and not completely of it. This allowed to murder brake system when drawing weeklong lines, and accomplish the desirable carrying out.

The main task of determining "what the child did wrong" was to check what "wrong" was. What are the mistakes? We highlighted few:

the opening of drawing is not from the right point,
incomplete line
affected too far sideways from the perfect line,
went "in the wrong direction." This error is different from the previous one, since we tin can come back along the ideal line,
cut the niche

And so they tried to lick how to formalize entirely these errors. It is clear that you postulate to compare the perfect line and the drawn one. It is clear up that you need to break them into gnomish segments, compare them so accumulate the accumulated error. The difficulty was in the corners. They cannot be thrown out at completely, corners are an important part of the letter. But the error in them accumulates very simply and precise quick.

After two months of trial run and error, we got something like this:

break the curve into "analogue segments",
'tween the segments we have areas that we call "corners". An angle is just a small segment where the direction of the parentage changes dramatically. It can be either a proper corner, Beaver State some sort of eyelet, or the beginning / closing of the line.
on linear segments, we count, every bit antecedently thought. We look at the similarity of the directions of the segments and the space between the philosophical theory / drawn veer. We amass an error.
in the corners we smel at the difference between the distance of the ideal and the drawn curve. And that's information technology. Surprisingly, it turned out that if you correctly take the allowable difference, so this simple rule checks the lottery of the corners well.

The fancy shows angles (large circles). They are searched automatically, according to the curve specified in the SVG format.

Russian language

It was logical to take on that the applications programme would need to be localized into different languages. But what languages IT will Be and when exactly after the start we bequeath do it, IT was non prima facie. And the development was carried unconscious without regard to any other language.

When the desire and opportunity appeared to support the Russian spoken communication, information technology turned out that this was non entirely simple.

Prototypal, you need to translate the interface. Moreover, if the interface should be tied to the language of the organisation, then the language of direction Crataegus oxycantha be different. You motive to be able to switch them. And you need to make the long Land tally everywhere in the interface.

Secondly, the splendid baptistery that we used did not contain Russian letters. I had to order a rescript of the face.

Third, information technology took Thomas More pictures. The State language has more letters, more exercises. To boot to pictures, a new dubbing was also needed.

Fourth, it was necessary to refine the algorithm for working with letters. Diacritics ("d", "e"), small strokes ("c" or "u") - all this complicated the algorithm for controlling the select of drafting.

Packing resources to a file out came in very handy. Having created several such packages and switching these files, it turned bent embody very handy to alternate between languages.

Little things

Of course, there were galore little things in development. E.g., iTrace can print "real" paper, paper. To piss it more interesting for children, a labyrinth is haggard at the bottom of each recipe. It is generated all prison term anew, it was amusing to choose the parameters so that the children were both interested and non very simple / embarrassing.

There were problems with the rising slope. For example, when we tried first to enable Bear on ID for the parent gate (special tasks that parents, but not children, to enter the application settings), we were refused, saying "no". I had to talk with Apple representatives, go up with a more accurate algorithmic program for working with Touch ID, after which the feature was accepted.

Also, we did not immediately figure out how to make a buy inside the free translation. At the start they wanted to realise a purchase of each small feature, just after discussion they decided to make only unitary purchase "for everything".

It was interesting to draw the letters themselves. They are careworn a lot where, and in dashes in dashes, and in different thicknesses on the drawing screen, and in history, where you hindquarters see the child's attempts to draw letters on with errors ... everywhere at that place are their own requirements, their own difficulties.

The result is a great application. Take a feeling. There is a free version, with a purchase wrong, and a paid one. More 350 thousand people have already looked, and many like IT. :-)