AuthorTopic: I'm making a paint program, so useful tools, ideas and features required please  (Read 156487 times)

Offline happymonster

  • 0010
  • *
  • Posts: 455
  • Karma: +0/-0
    • View Profile
Alright.. I've been messing around tonight with an analysis of the GUI of different programs. I know that some people that tried Pixe would have been looking at it in fullscreen modes, so it would have looked bigger than running in a window.

I'm made a comparison here:
http://www.funkemunke.com/Pixe_GUI_work.png
(900k file)

As you can see it's not actually that bad compared to other programs in terms of GUI space (the panel in Pixe is the total GUI space, so less width than the tools + layer panel stuff in photoshop). However an analysis of Photoshop CS, Photoshop Elements, GIMP, Texture Maker etc, seems to reveal a standard icon size of around 24 x 24 pixels (compared to the 32 x 32 in Pixe). Photoshop and Photoshop Elements actually use a size which is slightly shorter in height than width for its icons which makes sense for a vertical arrangement of tools.

In terms of width, Pixe is 256 pixels across, which some people here have complained about. Photoshop and Texture Maker use more GUI space in terms of width (with gui sections combined), but perhaps some of the effect is more psychological. Maybe the 75% size panel with 24 x 24 icons works better for most people..

Things to note: Texture Maker has the most complex GUI and uses a more fixed width style (like I am using) but with collapsable GUI sections. How well do these actually work? Sometimes I find them confusing, maybe that could be an option for the GUI if I can manage to do it?

I love the pixel perfect bold 8-pt tahoma font that Texture Maker uses. The lower class character gfx helps in all of these programs. Something I could add to soften the look?
 

Offline Ai

  • 0100
  • ***
  • Posts: 1057
  • Karma: +2/-0
  • finti
    • http://pixeljoint.com/pixels/profile.asp?id=1996
    • finticemo
    • View Profile
I like the flood fill testing, but I have an idea which might work better? Instead of testing horizontally and vertically like you do now (when most flood fills use horizontal or vertical spans) why not match the source pixel to ones in a target pattern? That would allow you to fill in custom dither pattens, as well as small patterns and potentially shapes that have previously been filled in with a pattern from a brush. Finding the XY offset for the pattern might be a bit tricky, as would trying to automatically find repeating patterns.

What do you think? :)

It would certainly fix the 'invasiveness' problem inherent in 20-way filling.
(the 20way filling was deliberately 'a generic fill for most dithers' so the user could get a good result without needing to configure which patterns to search for; so 20-way fill actually copes with a lot of custom dither-patterns already.)

One of the things you didn't mention is that usually dither patterns come in groups, so matching to one of several same-size patterns is probably a more realistic use.

I've actually tried to do that before, but have a much better idea of how to do it now.
the alignment issues.. I think it requires a two-pass approach:

Preparation:
 1. Generate a binary mask for the entire image, which is True where the pixel matches seed color.
 2. Initialize a 'matched' array (uint8) to 0 (1 == pattern 0 matched , 2 == pattern 1 matched..)
 3. Calculate hashes for each of the patterns being matched

Execution:
 1. SCARY. But mainly, treat the current location as upper-left, then hash that rectangular area of the seed-mask and compare it to each stored hash. Don't try to match areas where >= half of the pixels have already been matched.
If it matches a hash, store the result in a temporary list, and keep searching with different offsets.Inspect each item in the list for best 'suitability', which tries to minimize the amount of neighbouring True pixels in the seed-mask, and mark the best area.
 2. Try to match any remaining areas where one or more unvisited True pixels in the seed mask remain.
If the area is partially visited, prefer matching one of the already-matched patterns listed in the matched array.
(possibly need to support matching a partial pattern.. eg for the left side of the picture, if the leftmost 2x4 are unmatched and the next 4x4 is matched, need to match just the half of the pattern that fits on the picture.)

Obviously that isn't a floodfill; I find it a bit difficult to think how to constrain it in the usual floodfill way.

A variation on that scheme can be used to convert dither patterns -> some solid color.

Just for fun, I have a really simple dither-detection aka high-frequency noise detection algorithm that is relatively immune to XY offset.

1. Move in steps of 2 pixels along y,x axes
2. Calculate an average for the 4 2x2 squares at offsets (+0,+0), (+1,+0), (+0,+1), (+1,+1)
3. If the averages are all equal and the pixels are all equal, continue the loop at the next position.
4. Check those 4 averages against each other. each pixel is included in 3 of them, and
    if the averages that a pixel is included in all match, that pixel is marked as dither.

Your GUI isn't really as big as I thought. What's that toolbox labelled 'icons 27x25'?
If you insist on being pessimistic about your own abilities, consider also being pessimistic about the accuracy of that pessimistic judgement.

Offline happymonster

  • 0010
  • *
  • Posts: 455
  • Karma: +0/-0
    • View Profile
Just off to work, so can't responsd properly..

I think there is an easier way to do the fill, will try to talk about that this evening (my time)
The 27 x 25 icons are from Photoshop Elements.

Offline happymonster

  • 0010
  • *
  • Posts: 455
  • Karma: +0/-0
    • View Profile
Here's a test using a 75% size (192 pixels in width, 24 x 24 icons). Please ignore the pixel resized icons, this is just a test for the size. As you can see the top part of the GUI is in the new size. Does this look better?

http://www.funkemunke.com/Pixe_GUI_test1.png

Offline Ai

  • 0100
  • ***
  • Posts: 1057
  • Karma: +2/-0
  • finti
    • http://pixeljoint.com/pixels/profile.asp?id=1996
    • finticemo
    • View Profile
Quote
As you can see the top part of the GUI is in the new size. Does this look better?
Definitely! If you don't plan to put anything in the gaps between pen colors, I suggest expanding them so the spaces are half their current size.
The 'I: 0' confuses me. is that supposed to indicate the color under the mouse cursor currently?

Just off to work, so can't responsd properly..

I think there is an easier way to do the fill, will try to talk about that this evening (my time)
Excellent. I had an idea it could be done with convolution, but my convolution-fu is weak :). I look forward to hearing what you think.
« Last Edit: December 19, 2008, 11:22:58 am by Ai »
If you insist on being pessimistic about your own abilities, consider also being pessimistic about the accuracy of that pessimistic judgement.

Offline questseeker

  • 0010
  • *
  • Posts: 112
  • Karma: +0/-0
    • View Profile

Quote
Ellipses are awful. Rounding the center to pixel centers and radius to whole pixels, so that even sizes are impossible, is even worse than rounding incorrectly.
Er.. thanks!  :P ProMotion seems to work in the same way.. Can you give me an example of how to do it?


You might round both the center (or corners) and the radius to half pixel increments in both directions if the zoom factor is 2:1 or bigger (i.e. if these fractions correspond to distinct cursor positions).
Alternatively, you could have one or two switches or tool states to align ellipses either to the "cracks" between pixels or to pixel centers (at any zoom levels).

Offline happymonster

  • 0010
  • *
  • Posts: 455
  • Karma: +0/-0
    • View Profile
Questseeker: I'm sorry, I don't understand. Are you talking about fractional (i.e. aliased) pixels?

Ai: The i stands for the palette index. Not enough space to put the full word..

As for the fill, well I was thinking that you could ask the user to select the start fill point in an area where the 'full pattern' is visible. So they don't fill in a corner, or narrow section.
Then we could start by assuming that as it's a pattern fill we will have a minimum of 2 x 2. So we could start by scanning that area, and then increasing the width until the pattern starts repeating. If the patterns repeats X times completely in the width dimension then we can pull it back to the original size. (This would help with larger dither patterns that have small repeated area). If we then did the same in the Y dimension, we could probably reasonably 'grab' a dither pattern and maybe other patterns too. Then we can fill any repeating pixels based on the grabbed pattern.

Offline happymonster

  • 0010
  • *
  • Posts: 455
  • Karma: +0/-0
    • View Profile
Ok. I've been working on making the GUI better and smaller in the last few days. Although I like the large look it seems clear that I am the minority and that it will stop me having so many options available at once. I don't want to lose motivation and interest because of getting bogged down in a GUI, but I have worked to improve things.

Changes:
Using bold 7 point Tahoma font which I really like and is smaller than the font used before.
Removed icon 'text' below to save space.
Redrew most icons to fit into 24 x 24 in size. Spacing is the same so they don't appear so cramped.
Removed two icons from tools and shrunk the width by 32 pixels (now 224 pixels).
Made sliders smaller in width and height and repositioned some to see how it looks like.

Now I can have sections open for palette, layers, brush, tool options all at the same time I think. I'm still working on the look.. What do you think? Better?

Screenshot:

Offline Ai

  • 0100
  • ***
  • Posts: 1057
  • Karma: +2/-0
  • finti
    • http://pixeljoint.com/pixels/profile.asp?id=1996
    • finticemo
    • View Profile
Questseeker: I'm sorry, I don't understand. Are you talking about fractional (i.e. aliased) pixels?

Ai: The i stands for the palette index. Not enough space to put the full word..
Yes, sorry -- I knew that, what I was trying to ask is, why is it 0? none of the pens appear to be set to #0, so I asked whether it was showing the color index under cursor in the image. (I have the same question about the white dot in the palette)

Maybe you could show a tooltip when the user mouses over that 'I R G B' area, to avoid this kind of confusion.

Quote
As for the fill, well I was thinking that you could ask the user to select the start fill point in an area where the 'full pattern' is visible. So they don't fill in a corner, or narrow section.
Then we could start by assuming that as it's a pattern fill we will have a minimum of 2 x 2. So we could start by scanning that area, and then increasing the width until the pattern starts repeating. If the patterns repeats X times completely in the width dimension then we can pull it back to the original size. (This would help with larger dither patterns that have small repeated area). If we then did the same in the Y dimension, we could probably reasonably 'grab' a dither pattern and maybe other patterns too. Then we can fill any repeating pixels based on the grabbed pattern.
Oh, I see! That's a pretty good reason for limiting it to 1 pattern at a time :)

Quote
What do you think? Better?
*far* better!
* much cleaner icons, and the font is indeed wonderful.
* looks less thrown-together, more coherent.
* Consider making your scrollbars taller if you have the space
   (or make just the scroll handle taller. IMO while scrollbar size is not so important, having a large scrollbar handle is quite important.)
If you insist on being pessimistic about your own abilities, consider also being pessimistic about the accuracy of that pessimistic judgement.

Offline happymonster

  • 0010
  • *
  • Posts: 455
  • Karma: +0/-0
    • View Profile
Thanks! :)

Yes, the I refers to the palette index (not a pen), so if your mouse is over a pixel of index colour 1 in an image, it will show 1. The white dot will only appear when you are over an image and marks the index colour for each reference.

I'm going out today, so no time to reply in more detail (maybe this evening, my time).