Documentation for ManiWordle
Click the link above to start ManiWordle, a flexible word cloud generator. This Webapplication was
designed and tested using Google Chrome, therefore you get the best experience by this application
using this browser. It was last tested with Chrome v19. This version included a bug in which
you could not save the displayed word cloud after clicking "Save Image", this bug was fixed
in later versions (tested with Google Chrome build 21.0.1171.0 dev-m).
Usage
When you start ManiWordle, you can enter a text in the textarea. After this, you can change following
options regarding the appearance of the word cloud that is generated when clicking on Create.
- Text font (serif, sans-serif, cursive, fantasy, monospace)
- Font style (normal, italic, bold)
- Fill option (fill, fill + border)
- Background color
- 5 Text colors
- Border color
- Maximum text rotation (from 0 to 90 degrees)
After this step, the click on "Create!" generates a word cloud. In the next window that appears
you can change the options of each word individually by selecting it with the mouse. You have the options to:
- Move the word. If the word is dropped at a position where a bigger or a pinned word lies, the currently moved word is
moved back. On the other side, if you drop a big word at a position where smaller words lie, all the smaller words of the
new position of the bigger word have to move.
- Rotate the word by dragging the green rotation point. As for collisions, the same rules are applied as when moving a word.
- Delete a word by pressing del/entf.
- Pin a word, so it stays at its position even if a bigger word gets dropped upon it.
- Change the color, font, font style, border and the border color of the selected word.
If you are happy about the resulting word cloud, you can generate a png image by clicking the "Save Image"-button and save it
by right click and the "Save Image as..." option. Note: Due to a bug in the current release version of Google Chrome, the "Save Image as..." option
does not work in this version. In the current developer version this bug does not exist any more (v21).
Javascript Source Code Documentation
-
Contains all eventhandlers for the user interface. The main function of this file is called
when the window is loaded; initializes the canvas, texthandler and all needed classes.
-
Contains helping functions like Debugger, InverseColor, ValueToHex, WordSort and UpdateFancyBox.
-
Contains a blacklist of known words that are ignored in the word cloud generation (like "and" etc.) and a function
to check if a word is in this blacklist.
-
The real "main"-class of this application. Contains the creation of the kineticjs-stage and its layers.
It further contains the options of the word cloud generation like the font, all the colors or the word rotation.
It contains the main function that is called when the Create!-Button is clicked, and then calls the draw-function
of all words that need to be drawn. Other functions it contains are setters for the word cloud options.
-
This class is another big and important class of this applications. It contains the drawing algorithm of the words
(the positioning algorithm, collision detection, event handlers when clicking on a word, dragging it and releasing it).
It further contains the kineticjs word shape, and the selection shape of each word. It basically contains all interactions
of the word itself.
-
Contains the essential function ReadText(text) which creates the wordlist that later will be drawn. It counts the appearances
of the words, removes characters like "." or ",".
This class contains also a pointer to the currently selected word, so you can access this word from all other classes.
-
This class defines a bounding box for a word that is used in the collision detection system.
Used libraries
-
For the color picking options
-
For checking if the browser supports HTML5 canvas.
-
For the Save Image function. JQuery Plugin.