Peephole Drawing (or some path tools in the future)

[midora]

Attached a basic implementation of a tool to outline a path (others like text, gears and more are on the list)

Please be aware this is a developer version and not a final plugin. Just to show the current state.

Some functions are not implemented, some functionality is missing (like undo and location of the drawing peephole depending on the mouse position). The plugin may work slow on large images.

 

The two .dll and the two .dlc files in the .zip have to be copied to the Effects folder.

The default menu Entry is Menu->Effects->Path Tools->Outline Path

 

No documentation in the moment (it works InkScape like), but some hints:

- Two basic modes: 'Append nodes' and 'Edit nodes':

- A path consists of nodes and lines between the nodes

- Each node may show two handles (one for each possible connected line)

- In Append mode:

  - Click to set a new node, Click and drag to set the node and its handle

  - Click to the start node or the last node finishes the path and switches to edit mode

- Edit mode:

  - Click and drag a node to a new position

  - Click and drag a node handle to change the curvature

  - Shift click and drag a node to create a node handle (if it does not exist).

  - You may select one or more nodes (shift click will add)

- Drawing in the main window is relative to the bounding rectangle of the selection

- Readme describe shortcur keys

 

And now start to play 😉

Edited November 3, 2021 by midora

[midora]

This is the disadvantage if you are not writing a documentation...

Yes all files have to be copied to the Effect folder (The .dlc files are text files containing the translations).

[Red ochre]

Wow!

 

A bit tricky to get used to but amazing functionality - ability to edit nodes very useful - very well done and thanks!

Any possibility to show the clipboard in the U.I window - so the U.I can be full screen size and we can 'trace' geometric lines over a background image?

 

Love the 'test' texture too!

Here's a quick 'play'

[midora]

Wow!

 

A bit tricky to get used to but amazing functionality - ability to edit nodes very useful - very well done and thanks!

Any possibility to show the clipboard in the U.I window - so the U.I can be full screen size and we can 'trace' geometric lines over a background image?!

 

 

Great result for a quick 'play'. That's what I'm expecting from combining a path tool with one of your plugins.

 

Tracing is an important reason to use paths. This plugin tries to allow it in the main window but to change/enhance this later is not too difficult.

 

 

 Love the 'test' texture too!

 

;-) I guess you already know that this means custom brushes in the future (but the OptionBitmapSelector element is missing).

 

One additional remark:

 

All is based on OptionBasedLibrary which provides a programming interface simular to PropertyBased. But the library allows you to add your own option elements. Here the path editor is implemented as an external Option element 'OptionPathDrawingBoard' which provides you in OnSetRenderInfo() the current path. So developers are able to add the path editor as easy as an slider. The following shows the OnSetRenderInfo() used in 'Outline Path':

 

protected override void OnSetRenderInfo(OptionBasedEffectConfigToken effectToken, RenderArgs dstArgs, RenderArgs srcArgs)
        {
            // Get the options from the token
            optPoints = OptionPathDrawingBoard.GetItemValue(OptionNames.DrawingBoard, effectToken.Items);
            optClosed = OptionPathDrawingBoard.GetItemClosed(OptionNames.DrawingBoard, effectToken.Items);
            optPeephole = OptionPathDrawingBoard.GetItemPeephole(OptionNames.DrawingBoard, effectToken.Items);
            optLineWidth = OptionInt32Slider.GetItemValue(OptionNames.LineWidth, effectToken.Items);
            optLineBrush = OptionEnumDropDown<LineBrushEnum>.GetItemValue(OptionNames.LineBrush, effectToken.Items);
            optLineHatchStyle = OptionEnumDropDown<HatchStyle>.GetItemValue(OptionNames.LineHatchStyle, effectToken.Items);
            optLineColor = OptionInt32ColorWheel.GetItemValue(OptionNames.LineColor, effectToken.Items);
            optLineStyle = OptionEnumDropDown<LineStyleEnum>.GetItemValue(OptionNames.LineStyle, effectToken.Items);
            optLineDashCap = OptionEnumDropDown<LineDashCapEnum>.GetItemValue(OptionNames.LineDashCap, effectToken.Items);
            optLineStartCap = OptionEnumDropDown<LineCapEnum>.GetItemValue(OptionNames.LineStartCap, effectToken.Items);
            optLineEndCap = OptionEnumDropDown<LineCapEnum>.GetItemValue(OptionNames.LineEndCap, effectToken.Items);
            optLineJoin = OptionEnumDropDown<LineJoinEnum>.GetItemValue(OptionNames.LineJoin, effectToken.Items);
            optShowNodePoints = OptionEnumCheckBoxes<ShowEnum>.GetItemChecked(OptionNames.ShowWhileEditing, ShowEnum.ShowNodePoints, effectToken.Items);
            optShowNodeHandles = OptionEnumCheckBoxes<ShowEnum>.GetItemChecked(OptionNames.ShowWhileEditing, ShowEnum.ShowNodeHandles, effectToken.Items);
            optShowPeephole = OptionEnumCheckBoxes<ShowEnum>.GetItemChecked(OptionNames.ShowWhileEditing, ShowEnum.ShowPeephole, effectToken.Items);
            optShowMouse = OptionEnumCheckBoxes<ShowEnum>.GetItemChecked(OptionNames.ShowWhileEditing, ShowEnum.ShowMouse, effectToken.Items);
            base.OnSetRenderInfo(effectToken, dstArgs, srcArgs);
        }

 

I'm pretty sure that it is possible to implement a lot of effects based on paths.

Also you will be able to load, save, and share paths among plugins.

[midora]

Updated to 0.5 to fix broken functionality

- Fixed: Effect didn't remember path after OK.

- Fixed: Loading and saving the options (via the 'Manage Options'  menu item)

    This allows to handle a set of paths/figures.

- Handles are only visible on selected nodes or on the last clicked node

[DrewDale]

I love this plugin, even at it's 'test' stage.

[midora]

I love this plugin, even at it's 'test' stage.

 

There are so many things missing. Next step will add fill options including gradients.

 

[midora]

Update to 0.6 adds different fill modes and extends stroke.

- Texture fill allows custom brushes, scaling and rotation (known bug: scale values < 5% will crash)

- Radial Gradient allows to change center and boundary color, shape, focus size and center.
  The center point can be moved in the peephole. The center position is handled relative to the start node.

- The color wheels allow access to the alpha channel

- Nodes can be added to selected path segments.

- Ctrl-S to save options, Ctrl-O to load options. Maybe you know already: You can copy the options to the clipboard and publish them in text form on the forum so that others can paste them back to the plugin and use your path. This feature is still not final because there is no version check on the options collection.
 

[DrewDale]

Really liking the gradient option and all the other goddies too. Nice one

[Rick Brewster]

Lots of flickering when resizing the dialog! Pretty cool though

[midora]

Really liking the gradient option and all the other goddies too. Nice one

 

Always so fast to test something. Thanks.

 

Here a small example based on a square path and shifted the center point a bit. Then save and used as texture brush.

 

 

Lots of flickering when resizing the dialog! Pretty cool though

 

Yeah, I know. This is an issue in the OptionBasedLibrary especially for this plugin. I guess you know the basic problem quite well. Trying to calculate the optimal size with and without slider. Here is the special issue that the drawingboard option element shrinks its height (to keep the box square) if the slider is there. Typically an object increases its height if you shrink its width. This may lead now to the situation that there is suddenly enough space in the dialog so that the slider is no longer needed. And so on... Seems there is no chance to solve this issue based on a Panel control.

[DrewDale]

You can't beat testing out a new plugin, even in development. Nice square path example too very impressed indeed

[RFX]

>inb4 Plug-In of 2013 Award goes to this plug-in... It's very innovative and will allow even beginners to create epic graphics. Thanks Midora! I'm totally gonna make you a flash based siggy as a thank you lol!

You can't beat testing out a new plugin, even in development...

Couldn't agree with you more on that Drew, the only thing better than beta testing would be creating one but that's definitely easier said than done.

Edited June 15, 2013 by RFX

[midora]

>inb4 Plug-In of 2013 Award goes to this plug-in... It's very

innovative and will allow even beginners to create epic graphics. Thanks

Midora! I'm totally gonna make you a flash based siggy as a thank you

lol!

 

No flash, thanks ;.) It's banned on my computers. Maybe in the future there is the need for a bunch of icons in the path tools.

 

Here a preview of the next step on the roadmap.

 

 

It's a little bit tricky to calculate the aproximated path of spirals using bézier curves...

 

[midora]

May I ask, is the term 'radiused' instead of 'rounded' used to attribute a corner where all points on the corner curve do have the same distance to one point? So, do people understand what a radiused corner means?

[Rick Brewster]

I've never heard of "radiused." 

[Red ochre]

Well, 'radiused' doesn't seem to be in many dictionaries - but I'm sure I have heard the term, mostly in an engineering/tecnical drawing context - Here's a reference!

http://oxforddictionaries.com/definition/english/radius#radius__14
 

[midora]

I've never heard of "radiused." 

 

Well I saw that coming ;-)

 

Any proposal to distinguish these types of edges by an adjective?

[Ego Eram Reputo]

I believe that people understand the term rounded or rounding to mean a blunting of a (previously sharper) corner.  

 

I'd be happy to apply radiused to a new creation:  "draw a 50mm radiused curve from A to B".  In this context, rounding or rounded just doesn't work for me.

[midora]

I believe that people understand the term rounded or rounding to mean a blunting of a (previously sharper) corner.  

 

I'd be happy to apply radiused to a new creation:  "draw a 50mm radiused curve from A to B".  In this context, rounding or rounded just doesn't work for me.

 

Assume there is a sharp corner. Now there are two basic possibilities to change this.

First keep the node corner in place and adapt the lines to the corner in a way that they are meeting smooth in the corner.

Second replace the node with two nodes and shift them along the connected lines away from the former corner. Insert a circle segment to connect the lines.

 

Inkscape uses the term 'rounded' for both operation. I don't like this. But on the other side 'radiused' is too techy.

 

I guess I will go for first 'curved' and second 'rounded'.

[Ego Eram Reputo]

I'd be tempted to call both examples arc-rounded with your examples being different arc types.  An arc could be offset toward one node or the other with a parabolic or exponentially shaped arc.

 

Not necessarily having a circular arc means I wouldn't agree that they were radiused.  Radiused would be a special cast of arc-rounded where the entire curve had a common origin.

 

 

The two right hand corners are arc-rounded.  Only the lower left is radiused.

 

Arc-rounded - arc'd for short?

[midora]

I guess easiest will be I'm adding the texts to the UI and the native tongues do the correction if needed.

 

But here are some screenshots already how the terms are used:

[midora]

Update to 0.7 adds some basic shapes.

 

Because of some renaming, delete all old peephole drawing specific files from the Effects folder first (especially the ones starting with the prefix Path...)

 

Without a modifier key the shape is placed so that its circumcircle touchs the mouse down position and the drag position.
The CONTROL modifier centers all shapes at mouse down.
Square shape:   Hold SHIFT modifier to allow rectangle
Circle shape:   Hold SHIFT modifier to allow ellipse, Hold ALT modifier to catch ellipse or circle to the drag rectangle

 

The spiral shape is not working in this update.

 

Hope the difference between rounded and curved makes sense ;-)

 

 

[DrewDale]

Nice new shapes. After a quick play I found that by just selecting the edge of the star (leaving the gradient intact) I ran Object edge & clipwarp to create this

[Red ochre]

Cool image Drew!

Really enjoying the texture fill options and the Ctrl-A (select all nodes) shortcut is a time saver too.
Could be useful for creating gear wheels - when the layer is duplicated and rotated. Great fun!