Canvas Pro, "Simple" drawing Widget based on Canvas Options

[CSM]

Canvas Pro
download

Canvas Pro is a "simple" drawing program that allows you to create masterpieces and works of art!
The Widget has some very handy and cool features. Read below for just a few of its capabilities:

• 6 different figures/shapes to draw.
• Undo/Redo
• Stylish look.

Download it and try it out!

List of features to come (maybe):

• 7th figure/shape.
• Custom Tooltips.
• Plugins to allow custom figures/shapes.

Dock Icon graciously provided by Michael's Programming.


P.S.: Yes, the debug window is supposed to be on, just in case. There should be no problems though.

[Lauurent]

It looks nice, the drawing is quite fast although it would be nice to be able to change the brush size and choose different brush shapes.

Also I have an error in the debug window: "ReferenceError: preference is not defined (canvasPro.kon: Line 59)"

[g6auc]

Canvas Pro
Canvas Pro is a "simple" drawing program that allows you to create masterpieces and works of art!
The Widget has some very handy and cool features. Read below for just a few of its capabilities:

On the Macintosh, I can't get the polygon to change shape. Control+click brings up the context menu, Command+click has no effect. For cross-platform use, it would be better to use Alt+click or Option+click (you need to test for both).

[Hunter890]

For that empty button, mabye a fill button, so you can make the outline and the inner fill different colors. Other than that, it works fine for me on xp-sp2 windows xp pro.

On the Macintosh, I can't get the polygon to change shape. Control+click brings up the context menu, Command+click has no effect. For cross-platform use, it would be better to use Alt+click or Option+click (you need to test for both).

or mabye just an eraser tool, if thats possible

[slthytove]

Neat Widget! Here are some of my thoughts while using it:

• Overall, the Widget is very responsive - nice job optimizing things!
• The toolbar buttons were difficult to see unless they were in front of a solid color - when I first opened the Widget, the toolbar was in front of another couple Widgets, and I could barely make things out. Perhaps if they were more contrasty, or less transparent overall?
• I like the polygon tool - I think that the method used to specify the number of sides could be better, though. Perhaps if the mouse button were held down over the toolbar button, then something would popup and allow the number of sides to be chosen?

I'm not entirely sure what I would use this Widget for, but like I said, it's neat. Great job!

[CSM]

It looks nice, the drawing is quite fast although it would be nice to be able to change the brush size and choose different brush shapes.

Also I have an error in the debug window: "ReferenceError: preference is not defined (canvasPro.kon: Line 59)"

I forgot the "s" in preferences. I re-uploaded a fix.
As for brush size, I could do that, Canvas does have a "line width" property I can change.
As for different brush style, the best I can give you is round versus flat end on lines, nothing fancy. Sorry.

On the Macintosh, I can't get the polygon to change shape. Control+click brings up the context menu, Command+click has no effect. For cross-platform use, it would be better to use Alt+click or Option+click (you need to test for both).

Okay, thanks. I'll change that.

For that empty button, mabye a fill button, so you can make the outline and the inner fill different colors. Other than that, it works fine for me on xp-sp2 windows xp pro.
or mabye just an eraser tool, if thats possible

There is a fill button already. It is opposite the color button.
As for eraser, I tried that, but the "erased" parts didn't show up until you released the mouse.
Even then, all you got was a bunch squares that jerkily followed the mouse.
You can turn it back on in the code if you wish.
The button was opposite the trash-can/clear button.

Neat Widget! Here are some of my thoughts while using it:

• Overall, the Widget is very responsive - nice job optimizing things!
• The toolbar buttons were difficult to see unless they were in front of a solid color - when I first opened the Widget, the toolbar was in front of another couple Widgets, and I could barely make things out. Perhaps if they were more contrasty, or less transparent overall?
• I like the polygon tool - I think that the method used to specify the number of sides could be better, though. Perhaps if the mouse button were held down over the toolbar button, then something would popup and allow the number of sides to be chosen?

I'm not entirely sure what I would use this Widget for, but like I said, it's neat. Great job!

Well, Canvas is just that fast!
As for contrast, I use .7 transparency, same as the border to the drawing surface. * I'll look into making it a little darker.
As for the button, it isn't really a button. When that object is made, it adds something to the onMouseDown of the canvas object to activate itself when clicked inside its borders.
I could have it do a popMenu, if that is easier. (Then I can use names: triangle, square, pentagon, hexagon, heptagon, octagon, nonagon, decagon, undecagon/hendecagon, dodecagon. )
It used to be a Prompt, but to have it prompt you every time was annoying, plus the prompt focused my first window and activated my dock hack, hiding Canvas Pro.
This Widget is for doodling, or drawing something serious, but overall it doesn't have a set purpose, that's what makes it fun!

* I have a darkish background.


Thanks for the feed back guys!
Glad you like Canvas Pro.

Some other cool features not mentioned above:

• You can save and load Canvas Pro Files.
  • Canvas Pro files save the current redo stack so anything you undid earlier is still redo-able when you reload.
• You can export to jpg/jpeg or png.

[Drevor]

whooo

[Sentinel]

How about a k-line tool kind of like the line tool except after setting the first point, it draws a konnected line from the 2nd most recently set point to the most recently set point.

A similarly handy tool would be an irregular k-gon tool that for the first 2 points draws a line, but for every point set after the second point it draws a line from the Kth point to the Kth-1 point as well as a line between the Kth point and the 1st point, clearing the line between the Kth-1 point and the 1st point each time. When fill mode is turned on it should fill the irregular polygon that is being created.

Both of these tools could have come in pretty handy for Drevor's pièce de résistance(above)

splines and curves would be good tools too

[CSM]

How about a k-line tool kind of like the line tool except after setting the first point, it draws a konnected line from the 2nd most recently set point to the most recently set point.

Wouldn't that just draw over itself?

A similarly handy tool would be an irregular k-gon tool that for the first 2 points draws a line, but for every point set after the second point it draws a line from the Kth point to the Kth-1 point as well as a line between the Kth point and the 1st point, clearing the line between the Kth-1 point and the 1st point each time. When fill mode is turned on it should fill the irregular polygon that is being created.

Both of these tools could have come in pretty handy for Drevor's pièce de résistance(above)

Do you mean that every time you draw, I draw a line between the last point and the first point?
That is easy to do, especially the way I do it. (I don't know how well fill would work.)
This would make an okay "polygon".
If you mean connect every point with every other point, this is already in there, called FunkyTool.
You have to enable it's button from the code.

splines and curves would be good tools too

I wouldn't know how to implement a good curve.
What's an spline?

[jokabomo]

Very nice. How about a "stamp" tool for that blank button? Import an image file and draw with it. Just a thought

spline

[Sentinel]

Wouldn't that just draw over itself?

Lines would always be drawn between the most recently set point and the one set just before, not back to the first point set. Basically it would create a continuous line: e.g. [5,5]---->[20,45]---->[77,32]---->[etc,etc]

Do you mean that every time you draw, I draw a line between the last point and the first point?

taking the above example for a k-line and extending it to a k-gon:

• 1st point [5,5]
• 2nd point [5,5]<---->[20,45] note: we only have two points so we can't close the polygon (or we can just draw two lines one over the other).
• 3rd pont [5,5]---->[20,45]---->[77,32]---->[5,5]
• 4th point [5,5]---->[20,45]---->[77,32]---->[45,66]---->[5,5]
• 5th point [5,5]---->[20,45]---->[77,32]---->[45,66]---->[8,8]---->[5,5]

What's an spline?

A spline is just a type of curve. There are several different types of splines curves that differ in the way the controlling points affect the outcome of the curve. Some splines draw the curve through the points you set, some draw the curve through the midpoint between each pair of points, some are even more complex utilizing variouse points and vectors.

jokabomo thanks for that link to splines

[BOINCer]

A spline is just a type of curve. There are several different types of splines curves that differ in the way the controlling points affect the outcome of the curve. Some splines draw the curve through the points you set, some draw the curve through the midpoint between each pair of points, some are even more complex utilizing variouse points and vectors.

Canvas supports drawing bezier and quadratic curves.

[Sentinel]

Well there you go.

[CSM]

Lines would always be drawn between the most recently set point and the one set just before, not back to the first point set. Basically it would create a continuous line: e.g. [5,5]---->[20,45]---->[77,32]---->[etc,etc]
taking the above example for a k-line and extending it to a k-gon:

• 1st point [5,5]
• 2nd point [5,5]<---->[20,45] note: we only have two points so we can't close the polygon (or we can just draw two lines one over the other).
• 3rd pont [5,5]---->[20,45]---->[77,32]---->[5,5]
• 4th point [5,5]---->[20,45]---->[77,32]---->[45,66]---->[5,5]
• 5th point [5,5]---->[20,45]---->[77,32]---->[45,66]---->[8,8]---->[5,5]

A spline is just a type of curve. There are several different types of splines curves that differ in the way the controlling points affect the outcome of the curve. Some splines draw the curve through the points you set, some draw the curve through the midpoint between each pair of points, some are even more complex utilizing variouse points and vectors.

jokabomo thanks for that link to splines

Okay, I've figured that without a major hack or rewrite, splines are out of the question. They are also conceptually above my head.

As for "k-line" that is the pen tool. Exactly.
The next version will offer a "polygon" which is a pen tool but I connect the last point to the first (while drawing).

I will also have added a line width popup to the fill button.
Changing the number of points on an nShape is also a popup.
Triangles are also controlled by a popup.
(this frees up another button.)

All popups are activated by shift + click.
For Windows users, ctrl+click still changes the number of sides on an nGon/nShape.

In a short while I'll upload the changes. I have to integrate line width into each object.

[CSM]

Alright! Let's try again!

Here's what I fixed/added:

• Saved Canvas Pro files now store which background was used.
  (Should not break reading in of old files)
• I increased the opacity of the toolbar.
  ( I can increase it .1 more if absolutely necessary. If I increase it anymore, the buttons visually disappear. )
• A Polygon Tool!
  ( Press any key to add a new point )
• Line width adjuster was added as a fill button menu.
  ( Tell me if I need more or different numbers )
• Triangles condensed into one button with a menu.
• All menus report which item is currently checked.

It was also brought to my attention that reading in files is not working correctly.
Can anyone else verify this?


Enjoy!


P.S: to activate a menu use "shift + click".

[CSM]

I made an oops! A major oops!
I added the Width property but forgot to add it to the source functions.
Therefore, Canvas Pro File reading stopped working.

I will warn you, files created previously will now be in compatible. Sorry.
However, If you'd like to keep them, you can hack them manually.

CODE

// This
new Line( new Point( 201, 183 ), new Point( 404, 381 ), new Color( 255, 0, 0, 1 ), false );

// Becomes this
new Line( new Point( 201, 183 ), new Point( 404, 381 ), new Color( 255, 0, 0, 1 ), 1, false );

The 1 tells the constructor the new width.

Also change this:

CODE

/* Canvas Pro :: Version - 1.5 */

// To this:
/* Canvas Pro :: Version - 1.6 */

This changes the version number and disables the alert.


In the future I will try to provide a converter tool to go from older versions of a file to new ones.
Adding more figures/shapes will not break file import, but adding some properties will.
Canvas Pro is set p to warn you if the file version number is greater than the version you currently have.
You are offered to open it anyway. Non-existent figures/shapes will just not load.

[CSM]

Updates: I fixed Undo/redo again. Evidentially in adding the width property I forgot to add it everywhere. That is fixed.

Main Post:
I would like to implement plugins, aka user defined tools.
I plan to do this by implementing a "Button" and a "Tool" object.
The "Button" object would take care of drawing the button on the correct canvas and such.
The "Tool" object would tell Canvas Pro how to draw your object/figure.
Canvas Pro will not create objects that do not have buttons, because it is the buttons job to create it, and buttons without a correspondingly named tool will not be included either.

Since you guys are going to be the ones actually using the feature, what do you want?
The idea is not set in stone. I am willing to hear any and all ideas.
I'm even willing to through my concept "out the window".
Do you want more control, or less?
Would you like a way to interface with the onKeyUp handler (like polygon)?

I need to hear from you!

[CSM]

<singsong> I'm back ... </singsong>
Anyways...

I really want to get this out of my Widget queue, as I have another project to finish up, and I have another really cool idea. <big smile/> <eye twinkle/> *

I'm going to skip making the "Plugin-Tools" for now as I would rather have them done right than all done (now) and sh*tty. I think you would agree. Besides, generally making plugins doesn't appeal to the average user, so I have to find a way to document it as much as possible and make it very simple. The hard part will be making the icon. So I may have to make a special tool that outputs "raw" Canvas commands that can be pasted into the appropriate place. Or just give up on the idea that plugin makers shouldn't be forced to know Canvas. Which limits it to programmers, but I think you guys have the most "realistic" ideas anyways ...

Back on topic:
I've decided to stop being stubborn, and listen. I'll take the suggestion and make a "Rubber Stamper" tool, to finish out the tools, before I release the Widget. Here are/will be some of the tools "nifty" features. Seeing as it will be hard to do some of them by context menu, I will create a Canvas based "options screen" to accommodate all the options. Unfortunately, the other tools do not have enough options to warrant one of these screens as well.

Some of these features need more-descriptive/better names, so I'm listening.

• Options:
  • Opaque Stamp (opacity = 1, Negates "Ink fade", switches to "Constant Ink".)
  • Real Stamp (less opacity so other items "shine through" like real stamps.)
  • -
    • Ink Fade (with every use, stamp gets more transparent. To "re-ink" the rubber stamper, click the button again. Negates "Opaque Stamp", switches to "Real Stamp")
    • Constant Ink (same opacity for each use. Can be used with "Real Stamp".)
  • -
    • Colorize (colorize the image with the currently chosen color.)
    • Original Color (negates "Hard Stamp", switches to "Light Stamp")
  • -
    • Hard Stamp (transparent areas will show the current color, as if you had pressed the rubber stamper too hard. Work with both Opaque/Real Stamp options.)
    • Light Stamp (transparent areas are just that: transparent.)
  • -
    • Sizing image/"stamp" as a percentage of total drawing area.
    • Sizing image/"stamp" as a percentage relative to the original image size.
    • Not/Respecting image ratio. (toggle-button/checkbox)
• GUI features:
  • Preview of image relative to canvas size (mini preview, not full size)
  • Height and Width text areas (or sliders, haven't decided yet.)
  • Radio/Option Buttons for the above options.
  • Cancel Button
  • Accept Button
  • Accessable by "shift + click" like every other buttons prefs/options.

The following is getting into more of an app, but I may provide a way to offer changing the canvas size (height & width) and background color. I need a way to seamlessly integrate them into the interface, preferably without more buttons, but anything is possible. However, I would prefer to finish the stamper tool first.

Seeing as you guys are all programmers and this one is fun to beta test, I should hear lots of feed back.



* Hint, hint: The idea is not new, but in a Widget it is. It's a game. It is taller that it is wide. It will all be done in Canvas, including the dock image, if I can. It will be sweet.

[CSM]

It's sad that work has stopped on this. I would really like to publish it, but I keep putting things in the way (such as): finishing the last tool (rubber stamper, see above), and plugin capabilities. I also know that with my classes, all the work that entails (CS especially), and all the time I have but am not working on this that it may never get done or published, doomed to sit in my archives next to the others I never publish or finish. Just another script library.

This post boils down to me asking for some help to finish this Widget or at least get it closer to completion/publishing. I do not believe that the Widget has an about screen, but I would be happy to create a simple one to display all the contributors.



If you would like to help/participate, I will post the latest build. This build fixes to things: "Paper Canvas" is off by default, and there is a workaround for the "last object painted artifact" when loading saved CPF files.