Resizing GUI, getting things right.


Artscript v2 is out, and while it looks and works smoother than the first version it does come with some big drawbacks and missed opportunities.

Resize gui problem:

Version 2 Current GUI

Version 2 Current GUI

While I was designing the new GUI I wanted something more organic that grew and shrink as sizes were selected, or deselected. And while it delivers exactly what I wanted to achieve I didn’t see the big picture on this.

The new Resize was supposed to be all about multiple sizes!

So, what are the main problems I have identified:

  • It doesn’t allow to load lists with sizes for quick deployment: This is the biggest missed opportunity. While it’s possible to load 3 or 4 sizes on demand, it’s useless to deploy a set of output sizes from your artwork, easily. This is specially true when you use common set of sizes each time. Whether it’s four or 100 sizes, the script must be able to deliver
  • It requires a lot of clicking to set custom sizes (at least 4 clicks, slower than previous version). This might not sound so bad, but the more clicks the less joy.
  • After 4 sizes it becomes difficult to manage. Because of the size, there is a physical limit on the sizes you can stack, the limit is given by the size of your screen, minus the height of the image list. And as of Tk 8.5, it is not possible to add scrolling to a frame.
  • It doesn’t allow to select a size for preview. At the moment I circumvent this by using the first size of the list, but if the user wants to know how it looks at an specific size… well, it’s not possible.
  • Up until today there was probably a nasty bug in release version. I happen to miss a huge bug in the sizes gui. If more than 9 sizes where selected. An easy fix, but that means there probably are more hidden somewhere. (bug fixed)

On the bright side, it does allow to identify quickly how many sizes you where getting, as long as you had no more than 5.

Redefining resize tab

To solve all that I decided to implement a new set of options. It might not be as sober as the current deployment, but I will do my best to make it a joy to use, even if you don’t need all those nasty advanced stuff.

Proposed GUI

Proposed GUI

The proposal has a quite lot more of options from the start, but I believe this set is the absolute minimum to offer the advance functionality without adding to much garbage.

On the left I have the input sources area, and while it’s not defined properly with a title it is easy to identify by spacing (I will put more on the final version).

This area serves as the control center for all the sizes in the presets. There are a few presets by default. Which are

  • Wallpaper: Mostly 4:3 and 16:9 aspect ratio sizes
  • Texture: 1024,512, 256 and 128×128 tile sizes
  • Icon: 1:1 ratio 256,128,96,64,32 and 16 sizes
  • User: Defined by user

I would like to add some print sizes, but those vary depending on dpi so it might not be totally wise to do so.

How it works

As it’s divided in two main areas we should see them separatedly

Left pane

Selecting a size from the dropdown list adds sizes to the next dropdown list. You can add sizes in batch mode by pressing the ‘+’ button on the right of the preset listbox, or individually.

If you add a size individually it will be checked for processing by default. The edit button loads the size to the custom size boxes.

Custom sizes can be set using the 3 boxes below. Aspect Ratio, width, height:

  • Aspect ratio accepts gimp ( 8:5 ) and krita (1.25 ) syntax.
  • There is no option to lock aspect ratio. If it’s empty (default) it is ignored
  • Width: changing will only affect height if aspect ratio is set, same for Height
  • Pressing the “X” label swaps the values of width and height boxes and updates the aspect ratio if set. (probably this should go in a button of its own)

The current state of the code uses editable comboboxes instead of entry fields. The idea is to have some values to work with in the custom boxes. For instance, if you don’t want to use the preset boxes, just set an aspect ratio, select width from size box, and hit ‘+’ button.

Probably pressing enter might be a good idea to add to list

Operator defines how the image source is going to fill the target size. scaling, streching, zooming, etc.

Right pane

When you open the resize tab the list on the right will not be empty. This is by design. But the things loaded are no other than the user defined presets. This is normally the most common usage.

Now, sizes listed on the right box are not processed by default, you have to check them, and to do so there are a couple of ways.

  • Click the box on the left, green filled boxes are ready to process
  • Select with the mouse and press the button “Set“, or the key ‘+‘ on your keyboard.

You can select like you would do normally on lists like this.

  • Ctrl-A selects all (there is also a button for that)
  • Ctrl-D de-selects all (there is a button for that)
  • Ctrl+i invert selection. selected items are not unselected. (button as well)
  • Ctrl + click, Add/Remove selection in non contiguous way
  • shift + click, Add/Remove selection in contiguous mode

To unset, press the green box of the selected item you wish to deselect, or select and press ‘‘ (minus) on your keyboard.

The list can be cleared to work with a white canvas or it can be fully loaded (all presets)
It is possible to sort the list by sizes, and by set or unset state (all set sizes will appear on the top)

Doing this, the new GUI feels a lot more natural to use and while a bit more complex it is by far much more manageable

Does it solve the problems?

  1. It doesn’t allow to load lists with sizes for quick deployment.
    • Load lists are called presets, and can be loaded by default.

  2. It requires a lot of clicking to set custom sizes (at least 4 clicks, slower than previous version).
    • It requires a single click to set a preset size.
    • If no user defined preset exists, it lists common sizes. again 1 click to set
    • Setting a custom size still needs a bit of clicking, but aspect ratio makes it faster when its more than one size.
    • Finally, adding a 100 sizes preset is a one click operation, and after CTRL-A, it ony requires to press ‘+’ or a click to set them. 3 clicks for 100 sizes I think its good advancement
  3. After 4 sizes it becomes difficult to manage.
    • As it is a list and can be sorted and (hopefully) filtered, this is no longer an issue.
    • Also, the scrollbar does allow to move between a huge amount of sizes.
  4. It doesn’t allow to select a size for preview.
    • Selected size is used for preview size (or it will)
  5. Up until today there was probably a nasty bug in release version
    • The usage of a widget avoids this type of bugs, but it might trigger new ones, sadly this is on par with my abilities.

I think that’ pretty much solves the problems I have identified. If I can make it work like that then If there are no complains this could be the new resize tab for 2.1 release.

Final words

Making a simple to use GUI but powerful enough to serve all purposes it’s quite a challenge, to make it more difficult my relative short experience with tcl/tk signify a big obstacle to quickly get the ideas I have.

Even with that shortcomings the GUI is coming out quite nicely, it does 60% of what is listed here. and does it well.

Testing GUi

Testing GUi

So what do you think about it, is it to complex? Should I hide mos options by default? Should I remove buttons, add more options? What do you normally need?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s