My Exercise2. PaintUp - coloring multi-colored sketches online

Some time ago I wrote about my android application coloring book and an online gallery for publishing sketches and paintings from the application. The idea of ​​a browser-based online coloring is quite logical, but somehow there was no incentive to sit down and do it. It was obvious that I would have to use technologies that I didn’t work with and it didn’t inspire much. But somehow there was time and I decided to try. Looking ahead to say that in the process revealed quite obscure properties of browsers. It turned out that there are online compilers (in particular, with ++) that produce executable files for windows and linux. And besides, I had to install Linux for the first time (Ubuntu).

So, the main wish was to try to hide the coloring algorithm itself. As a consequence, the implementation of the algorithm on JS disappears. It remains either to use a different browser technology, or to leave the browser only drawing, and the coloring "read" on the server.

The first thing that comes to mind is flash. To some extent, it allows you to protect the code and, at the same time, you can combine drawing and coloring in one application. But I never worked with a flash. I installed the adobe flash trial, downloaded a similar example and ... somehow I didn’t work with a flash. I had to postpone this option and try something else.

The next option was a Java browser application. But it was dropped because of the need for the application to run additional software.
')
So I smoothly approached the option of browser drawing and server account.

Browser drawing is canvas or svg. But it turns out a very bad feature of browsers from the point of view of the coloring algorithm. When drawing lines, non-switchable antialiasing is used. At first there were attempts to combat this software replacement of all at least some transparent pixels with the background color. But as it turned out, transparency is not everything. Smoothing occurs not only with the help of transparency - but also by color. That is, a drawn and “opaque” monochrome line contains pixels differing in one or several RGB components by up to 5 units. In my case, this is a serious problem, since the algorithm should get all the pixels of the same color for a single-color line. And it is solved in two ways. Either by preprocessing with artificial replacement of “similar” pixels by pixels of the desired color, or by pixel-by-pixel drawing. The second way was chosen - drawing via putImageData. It was necessary, however, to write a search function for a pixel “straight line” connecting two points.

Ok, with drawing in the first approximation everything is clear. To transfer the image to the server use jquery. Now server solver.

First, I ported the coloring algorithm from C ++ to PHP. It turned out very expensive - even a small image (200x300) with two color lines is painted for about 40 seconds. We do not need such hockey. Therefore, I start to think in the direction of a C ++ application that either spins on the server as a service, or it is started by a PHP controller. Here the difficulties were already organizational. First of all, to start the service, besides having a dedicated server with root-rights, you also need to be able to administer it. And I, unfortunately, do not possess the necessary skills. Here I was very lucky for the first time. On one of my “regular” hosting sites, it was possible to run PHP exec in PHP. The case remained behind the utility build under linux. Unfortunately, even here I didn’t have enough experience, so I spent some time searching for online compilers. Found only one www.onlinecompiler.net , and then without the ability to compile multi-file projects. But it was enough for tests (it was possible to call the http script-controller, which ran an empty program and returned the value).

It was too late to retreat, and I decided to try ubuntu. I downloaded the image, launched it through vmware and started reading the literature on “the topic of compiling projects in Linux” :) I was lucky here a second time, because I managed to compile my project into an executable file from almost half a kick.

If you, the username, have ever folded puzzles, then you will remember the feeling when you already have several assembled large but separate pieces on the table and then, finally, they begin to connect with each other. Yes, after successfully assembling the executable file, I felt about the same thing.

It was a small matter. Put on the server index.php with the drawing on js, put solver.php on which the browser sends the “task” and gets the coloring, lay out and set the execution flags for the a.out executable and so on to the little things.

And the chain came to life.
As a result, JS allows you to draw a task and sends it as a PNG file using AJAX to a server-side PHP controller. The controller accepts a PNG, opens it, does some preprocessing, stores the result in a temporary BMP, and sets the ./a.out on it. He opens the BMP, does the coloring, saves the result to the new BMP and transfers control back to the PHP controller. The controller opens the result, presses it in JPEG, deletes all intermediate files and gives the HTTP request the address of the JPEG picture to the pending answer. Client JS, receiving the address of the picture, creates a tag and shows the result of the entire work to the user in the browser.

This scheme is certainly far from ideal. And it’s not even the fact that a decent part of file manipulations can be transferred to the C ++ side. In an amicable way, the application should turn around. Well, or in extreme cases, be used as a php extension. But this does not prevent to feel the feeling of the complete gestalt :)

PS: For those who wish to try out - a test version of the assembly . To reduce the load (and this is a common shared hosting), the size of the “task” is limited to 250x350 pixels, and the number of colors is 15 tons. Draw at least two color lines, press PaintUp and get coloring. Please do not abuse :)

PPS: Coloring will be deleted, so if you want to save it to memory, save it locally.