Tool for drawing snowflakes in the browser

Theme design "Habrahabr . "

2 days ago I finished developing a tool for drawing snowflakes, debugged it in greenhouse local conditions and was ready to send it to the long voyage. But the launch of the “project” on the open Internet had to be postponed 2 times. At first, when integrating with a third-party site, cross-domain AJAX requests refused to work using the POST method (and GET was not enough for all requests), then on a slow channel, asynchronous data loading and presentation appeared in the form of glitches. Now everything seems to be fixed, laid out and awaiting manifestations of attention in relation to itself.

I will talk about the development, plans, brazenly promoting the offer of cooperation. Now a lot of text will go, and below is another picture.
')

Prehistory, passing into history

A passion for snowflakes arose somehow unexpectedly. Developed a library of exporting documents to PDF and when I got to the transformation of vector objects I thought that it would be nice to sketch out some cool demo after the completion of the development and thus make an advertisement for myself. I wanted to start before the New Year, so I considered the topics relevant.

I caught fire to develop a generator of snowflakes for given weather conditions, reread a lot of information about this and even advanced a bit in drawing snow crystals according to specified parameters (see the first screenshots ). But then I realized that I would not have time to make a full-fledged generator of correct snowflakes and decided to limit myself to an editor. In addition, it is also more fun for the user, since it assumes his personal participation. So the idea of ​​developing an interactive greeting card was born. Subsequently - a separate postcard, and not as part of some other project. By the way, I did not manage to launch the project related to PDF before the holidays.

In the early stages of development, the snowflake drawing tool was an SVG image with an embedded JavaScript library. Of course, not all browsers worked, so at one point I moved to the graphic framework Raphaël, which is well-known in our narrow circles. For even more skrashivaniya everyday web developer jQuery was connected. jQuery became responsible for AJAX requests to the server where data is stored and for tricky platform-independent manipulations with DOM. Raphaël was entrusted with browser-independent rendering of all vector and interaction of objects on the canvas with the user's mouse.

Raphaël had to finish quite a bit, because there were problems with updating the canvas in Chrome (there is a special crutch for WebKit, but it does not work for all versions of browsers on WebKit) and did not want to change their position in the stack of graphic objects contained in the <a > (and these are not only those that are in the link, but also those that have a pop-up hint). The first was treated by adjusting the regular expression that defines the browser engine. The second is to add an automatic deletion of <a> when resetting to empty lines of the href and title parameters. In an amicable way, it would be necessary to finish the methods of moving objects themselves, but there I would not get off with a little blood.

By the way, the <a> tag in SVG interfered with the correct initialization of the “bookmark button” AddThis . I used it in order not to fence the bike with sharing the results of drawing.

Now about cross-domain AJAX requests using the POST method. Unfortunately, they are not supported by browsers in order to ensure user security. The GET method has no such restrictions, but has a de facto length limit. De jure, this should not be so, however, some browsers, let's not poke fingers, do not allow making inquiries on links a little more than 2 thousand in length. And somehow it is ugly to drive large amounts of data in addresses. Therefore, it was decided to continue to transmit POST within your domain, and when placing the application on a third-party site, cut the data into pieces, transfer it using the GET method (using JSONP technology) and only when sending the last piece, execute the request on the server.

In order to make it convenient to use the application on any site, all the code is in the JS library. It is connected and initialized by inserting a few tags on the page. Therefore, even the index page on the project site is a simple HTML file. The link to the library in the <script> tag can at anchor (everything after #) contain additional parameters: the client identifier (used only when placing the code on a third-party site), the design theme and the default snowflake identifier.

The anchor also passes identifiers in the link to a specific snowflake with a specific theme. That is, if you remove the application from the page, the link will remain working, just without a postcard. This is the first important reason for which the anchors were used, and the second - they allow you to maximally abandon the scripts on the server.

Themes, like the snowflake parameters, are regular JavaScript objects in JSON format. If for the description of snowflakes in the object only the sizes of crystals of half of one branch of snowflakes are stored (the rest are cloned when built), then with the themes it is a little more complicated. It describes the entire interface of the application: where what elements are located, how they look (images are specified by a vector or a raster), how they behave when hovering, pressing, when they are inactive. There are also text strings for specific languages ​​(changing the language without loading another theme is only planned) and even styles for the page (if there is a need to change them according to the theme) and raw JS code (you may need for special actions, for example, to add events or moving objects).

In general, the themes can be very different from each other and initially I planned to use this opportunity for branding cards. It is a pity that I did not have time to finish earlier. But Christmas is still ahead, Old New Year, New Year of the next year ... So contact us, we can integrate a card somewhere.


"White Rabbit" - the main theme of the coming year.

Plans

• Add print mode folded snowflakes to cut it out of paper. As in childhood, but more technologically.
• Add export to vector and raster formats.
• Refine the choice of language and change the topic directly in the application, and not through a link.
• Add personal pages with a list of your own snowflakes and statistics (data are already being collected, but so far they are only tied to the user ID, which is carefully stored in COOKIE).
• Add a snowflake rating.
• Add the ability to leave comments, personal greetings and photos.
• Modify the drawing of a double 12-coal snowflake.
• Refine moving and zooming while editing.
• Optimize code.

UPD ₁ : Now when using the application

UPD ₂ : Yesterday, when using the application on a third-party site without registering as a partner, visitors were given links to images on my site. Eliminated this misunderstanding. And further. If someone plans to place the code on his homepage or simply wants to receive news about the project, email me at yuriyapostol@gmail.com something like “I want to receive news about the Snowflake project” or “I want to be aware of changes in the Snowflakes API”.

UPD ₃ : Embed code on your website:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="http://apostolstudio.com/lab/snowflake/raphael-apos.min.js" type="text/javascript" charset="utf-8"></script> <script src="http://apostolstudio.com/lab/snowflake/snowflake.js" type="text/javascript" charset="utf-8"></script> <div id="snowflake_container"><div id="snowflake_paper">...</div></div> 

All scripts can be moved to <head>. To initialize an application with special parameters, list them in the link to the main script after #. Example with theme and default snowflakes:

 <script src="http://apostolstudio.com/lab/snowflake/snowflake.js#theme=Rabbit&flake=kOQxOPNwnQZS" type="text/javascript" charset="utf-8"></script>