Tested under Firefox 3.5.6 and Google Chrome 188.8.131.52
See below if you are interested in the implementation and coding parts.
- Download and share your drawings in PNG, PDF, or SVG formats.
- Box, circle, lines, and curve primitive shapes
- Shadows when supported by browser
- Text in several hand-drawn fonts rendered on the server
- Rotate & scale shapes individually or in groups
- Select colours using an HSV colour wheel.
- Unlimited levels of Undo/Redo
UsageUsers who are familiar with vector graphics programs such as CorelDRAW! or Inkscape will have no problem using it, because the some of the most common keyboard shortcuts work the same way. Otherwise, it will take some getting used to.
List of keyboard shortcuts
The keyboard is the only way to do some things.
|C||Start drawing a new curve|
|L||Start drawing a new line|
|Page Up||Move selected shapes toward you|
|Page Down||Move selected shapes away from you|
|Home||Bring selected shapes to front|
|End||Send selecting shapes to back|
|Ctrl+G||Group selected shapes|
|Ctrl+Shift+G||Un-group selected shapes|
|Shift +||Restore normal zooming|
|Arrow Keys||Move around while zoomed-in|
Saving and loadingDrawings can be stored on the website by clicking on "Save". If you do not have an account, the drawings will be deleted in a few hours, or if you close your web browser. As soon as you create an account, the drawings will be transferred to long term storage.
If you don't want to create an account, the "Save" option will also allow you to download your drawing as an image.
Drawing simple shapes
Click on the rectangle or circle tool in the toolbar, and the desired shapes will immediately appear in the upper left of the drawing area. You can then drag them to where you want to go.
No two shapes are alike. If you create two circles, they will be slightly different. However, if you duplicate a shape using Ctrl+D, the duplicate will be exactly the same.
Drawing lines and curves
To draw a line, click the line tool in the toolbar, then click anywhere in the drawing window to place the first point. You can then click again to place the second point, and so on. To end the line, double click. If you end the line or curve close enough to where you started it, then it will create a closed shape.
Hint: The line tool can be activated by pressing "L", and the curve tool can be activated by pressing "C".
Lines have a sloppiness property that can be set after drawing it. To set the property, select on the line you have drawn. The options pertaining to the line will appear to the left of the drawing window.
Curves do not have sloppiness, but smoothness. By increasing smoothness, the curve is modified to make rounder corners.
Text is placed the same way as circles or rectangles. Click on the text tool, and some default text is placed in the upper left of the image. You can change what the text says by clicking on the text, and then modifying the "text" property that appears to the right of the canvas.
Example: Editing text using the properties area
You can move, scale, or rotate text. However, in this version of the drawing software, scaling will result in loss of quality. Instead, change the font size in the properties area.
While not in line or curve mode, you can select things by dragging a box around them using the mouse. The box must fully enclose the shapes to select them. You can also add a shape to an existing selection by pressing the shift key while clicking it.
Overlapping shapesYou can move a shape to the front using the Home key on the keyboard. Send it to the back using the End key.
Point edit modeFor some shapes, you can move the corners around by entering "Edit" mode. You can enter edit move by clicking on an already-selected object. In edit mode, the corners that you can move are highlighted using a blue box.
Example: Point edit mode
DeleteDelete all objects in the selection by hitting the Delete key on the keyboard.
To avoid having to repeatedly select complex groups of shapes, you can "group" the current selection using Ctrl+G. Now, when you click on any one of the group members, all will be selected. You can break apart any selected groups using Ctrl+Shift+G.
Copy/PasteYou can copy pieces of your drawings between documents and browser windows. While there are shapes selected, click on "Copy" and they will be transferred to the zwibbler clipboard, stored in your browser. You can then open another document later or in another browser window and paste the shapes there.
DuplicateWhile there are shapes selected, you can duplicate them by pressing Ctrl+D. Copies of the objects will appear over the existing ones. You will have to move them aside to see the effect.
Zooming inIncrease magnification by pressing +. Decrease by pressing -. Restore to original magnification by pressing Shift+'+'. While zoomed in, you can move around using the arrow keys on the keyboard.
BugsThe last 10% of work to make a polished program takes 90% of the time. I know about these bugs:
- Scaling text reduces its quality.
- There's no way to set the background colour of a drawing.
I should write something about the implementation. Hmm, the undo stack is pretty standard stuff but may be new to some people. But the thing I was happiest to find was the concept of abstracted Mouse Behaviours.
Design patterns for mouse behaviour are slim pickings. When a novice programmer designs a mouse-intensive application, he or she will tend to make a very complex function that deals with all possible cases when the mouse is clicked or moved. It can quickly grow to be unmaintainable.
To deal with this complexity, we separate the possible states of the system into various MouseBehaviour objects, which implement onMouseDown(x,y), onMouseUp(x,y), and onMouseMove(x,y). (This is a variation on the State design pattern). The default mouse behaviour is the selection mode. If you press the mouse button while over something, it then replaces the default mouse behaviour with a new mouse behaviour. When you lift the button, the new behaviour ends and reverts back to the previous behaviour. This keeps everything simple. There are several mouse behaviours:
- DefaultBehaviour -- Depending on where you click, it replaces the current behaviour with a new instance of one of the other behaviours.
- SelectBoxBehaviour -- if you click on an empty area of the image, it handles drawing the select box. When you lift the button, it selects everything in the rectangle you have drawn.
- TransformSelection -- if you clicked on a selection handle, then it transforms the selected shapes as you move the mouse.
- MoveEditNodeBehaviour -- If you click a blue edit node, then it moves the node.
- DrawLinesBehaviour -- Places points in a line shape until you double-click to end it.
LicenseZwibbler.com is not open source. All source code is Copyright 2010 Hanov Solutions Inc. Drawings produced by you using zwibbler.com remain your property.
Please contact me directly by email for support.
We are looking for a simple server side drawing software to add to our web site.
The reason we need it is that we want to have the ability to actually "sign" customers on a web form (using their finger/stylus) using a tablet/smartphone.
We need a simple software with an API that allows the signing/drawing in b/w (no need for colors, brushes, etc...), and saving the image created as a file in our server. The file needs to be saved in a JPG/BMP format.
Do you have something a simple as that ?
firstname.lastname@example.org..pls email me as soon as possible
my compliment, maybe you can implement the program in this way , because i have not found the page tht i was looking for.
good and usefull work
Thank you guys
How can we display the properties panel in the embedded version of zwibber ?
here's a tutorial on multiuser sketch pads to get you started...
First time: saved, closed, tried to reopen - TypeError: a is null
Second time - Blue Screen of Death
Third time - Saved, tried to get pdf, got: TypeError: a is null
why don't you put your invention on github,
so everybody could collaborate on this awesome project
and have like an ass-load of benefits from it?
I created a windows application that behaves in a similar fashion to your application. If you do a search on youtube for procadtivity, you will find 3 or 4 videos showing my application in use. I would be very interested in working with you to create a drawing application that would be faster than anything on the market today. Email:email@example.com
You have to press Enter when you finish typing to update the text. But now that you mention it I can see how it is a problem. Thanks for pointing it out.
or perhaps download an SVG
how much are we talking about?
Very good work. Very nice tool.
However rest assured that I am taking all reasonable precautions to keep your saved data available.
You can implement the saving in png option with the function .toUrl(), then ajax the previous content generated to a PHP script with png header in ;)
This makes sketching so much nicer, because it's equally accurate than my drawing, but just looks better.
Wish there was a "real" app like this for everyday offline use.
2 RFEs: line arrows, and OpenID sing-in
Thanks for this tool
I'd like to see point editing for curves - I'd be in hog heaven if I could mess with the Bezier curve handles.
I too am interested in license - I'd dearly love to copy this out and hack it into... well, frankly, something that draws spaceships. Some preset objects, a symmetry mode; it's be sweet. Fingers crossed for MIT or such...
I looked at the source and there is not license info... are you planning to release under a standard license?
Really fun to us. The big wow factor for me is that simple cartoons often get the point across better than powerpoints or Omnigraphs which take far more time and energy to produce.
Really marvelous work. If you decide to open source, I would love to help take to the next step (not that it needs to be improved really -- as it stands it's really quite marvelous!); but a couple thoughts I have:
* object linking with a semantic KB?
* overlay planes over a visual backdrop (e.g., photo, screencap)?
* Domain specific object palettes?
* audio annotation?
I've just discovered your blog and am really enjoying it.
Very cute little webapp.