Design Quandary
-
I've been trying to come up with a form that performs the following function: The user selects a pattern which consists of one to six image layer files. Each files consists of a single-color area on a transparent background, and are overlaid on top of each other (in a specific order). What the user will be able to do: 0) Select a replacement color for the non-transparent portion on an image-by-image basis. 1) Blur an image (with a numeric value indicating the amount of blur to apply) 2) Select a layer to be used or not 3) Flip the image vertically 4) Mirror the image horizontally 5) The composited image is updated as the user changes settings. Right now, I have this form[^]. The idea is that the user assigns a color by right-clicking each of the layer panels on the left side. the checkbox next to each of the layer panels is used to indicate which layer is affected by the three buttons (Flip, Mirror, and Restore). When the user right-clicks on a layer panel, a borderless form that holds a listbox of available colors is displayed at the mouse position, and when selected, the color is displayed on the layer panel in the label that currently reads "No Color", and the name of the selected color will also be displayed in that label. I toyed with using a listview instead of the layer panels, but the association between the listbox and a color selector was even more klunky than what I have now. Opinions, options, suggestions are now being entertained.
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997 -
I've been trying to come up with a form that performs the following function: The user selects a pattern which consists of one to six image layer files. Each files consists of a single-color area on a transparent background, and are overlaid on top of each other (in a specific order). What the user will be able to do: 0) Select a replacement color for the non-transparent portion on an image-by-image basis. 1) Blur an image (with a numeric value indicating the amount of blur to apply) 2) Select a layer to be used or not 3) Flip the image vertically 4) Mirror the image horizontally 5) The composited image is updated as the user changes settings. Right now, I have this form[^]. The idea is that the user assigns a color by right-clicking each of the layer panels on the left side. the checkbox next to each of the layer panels is used to indicate which layer is affected by the three buttons (Flip, Mirror, and Restore). When the user right-clicks on a layer panel, a borderless form that holds a listbox of available colors is displayed at the mouse position, and when selected, the color is displayed on the layer panel in the label that currently reads "No Color", and the name of the selected color will also be displayed in that label. I toyed with using a listview instead of the layer panels, but the association between the listbox and a color selector was even more klunky than what I have now. Opinions, options, suggestions are now being entertained.
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997What you are effectively doing here is mirror the way that a graphics program such as Fireworks or Photoshop behaves. If you take a look at those applications, and have a play around with the way that Layers works, you'll get the general idea. Basically, you'd separate the layer out from the action, so you might end up with the following idea(mocked out in line art):
+-------------------------+
| Title |
| Layer 6 |
| Layer 5 |
| Layer 4 |
| Layer 3 |
| Layer 2 |
| Layer 1 |
+-------------------------+
| Add layer Remove layer |
+-------------------------+I would make this a floating panel. Then, when the user selects a layer from this list, and a separate panel just details the options once; these options being tied to the selected layer.
Forgive your enemies - it messes with their heads
"Mind bleach! Send me mind bleach!" - Nagy Vilmos
My blog | My articles | MoXAML PowerToys | Mole 2010 - debugging made easier - my favourite utility
-
I've been trying to come up with a form that performs the following function: The user selects a pattern which consists of one to six image layer files. Each files consists of a single-color area on a transparent background, and are overlaid on top of each other (in a specific order). What the user will be able to do: 0) Select a replacement color for the non-transparent portion on an image-by-image basis. 1) Blur an image (with a numeric value indicating the amount of blur to apply) 2) Select a layer to be used or not 3) Flip the image vertically 4) Mirror the image horizontally 5) The composited image is updated as the user changes settings. Right now, I have this form[^]. The idea is that the user assigns a color by right-clicking each of the layer panels on the left side. the checkbox next to each of the layer panels is used to indicate which layer is affected by the three buttons (Flip, Mirror, and Restore). When the user right-clicks on a layer panel, a borderless form that holds a listbox of available colors is displayed at the mouse position, and when selected, the color is displayed on the layer panel in the label that currently reads "No Color", and the name of the selected color will also be displayed in that label. I toyed with using a listview instead of the layer panels, but the association between the listbox and a color selector was even more klunky than what I have now. Opinions, options, suggestions are now being entertained.
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997If I am understanding your question correctly... You could try emulating the "standard" layer UI from most photo editing software (i.e. photoshop or PSP). Each layer is an item in your list and each layer can access the same set of properties and attributes. [edit] This UI style for layers hasn't really changed because it uses very little real estate. IMO, your current app, is using way to much space up on the left for the configuration controls. [edit 2] I just noticed that your Blur setting is not a slider control. A slider control is better for image apps because it allows the user to visualize the change difference better then entering in numbers only.
Just along for the ride. "the meat from that butcher is just the dogs danglies, absolutely amazing cuts of beef." - DaveAuld (2011)
"No, that is just the earthly manifestation of the Great God Retardon." - Nagy Vilmos (2011) -
If I am understanding your question correctly... You could try emulating the "standard" layer UI from most photo editing software (i.e. photoshop or PSP). Each layer is an item in your list and each layer can access the same set of properties and attributes. [edit] This UI style for layers hasn't really changed because it uses very little real estate. IMO, your current app, is using way to much space up on the left for the configuration controls. [edit 2] I just noticed that your Blur setting is not a slider control. A slider control is better for image apps because it allows the user to visualize the change difference better then entering in numbers only.
Just along for the ride. "the meat from that butcher is just the dogs danglies, absolutely amazing cuts of beef." - DaveAuld (2011)
"No, that is just the earthly manifestation of the Great God Retardon." - Nagy Vilmos (2011)Great minds, and all that.:thumbsup:
Forgive your enemies - it messes with their heads
"Mind bleach! Send me mind bleach!" - Nagy Vilmos
My blog | My articles | MoXAML PowerToys | Mole 2010 - debugging made easier - my favourite utility
-
Great minds, and all that.:thumbsup:
Forgive your enemies - it messes with their heads
"Mind bleach! Send me mind bleach!" - Nagy Vilmos
My blog | My articles | MoXAML PowerToys | Mole 2010 - debugging made easier - my favourite utility
Back at you. Didn't see your post till after I submitted mine. :)
Just along for the ride. "the meat from that butcher is just the dogs danglies, absolutely amazing cuts of beef." - DaveAuld (2011)
"No, that is just the earthly manifestation of the Great God Retardon." - Nagy Vilmos (2011) -
I've been trying to come up with a form that performs the following function: The user selects a pattern which consists of one to six image layer files. Each files consists of a single-color area on a transparent background, and are overlaid on top of each other (in a specific order). What the user will be able to do: 0) Select a replacement color for the non-transparent portion on an image-by-image basis. 1) Blur an image (with a numeric value indicating the amount of blur to apply) 2) Select a layer to be used or not 3) Flip the image vertically 4) Mirror the image horizontally 5) The composited image is updated as the user changes settings. Right now, I have this form[^]. The idea is that the user assigns a color by right-clicking each of the layer panels on the left side. the checkbox next to each of the layer panels is used to indicate which layer is affected by the three buttons (Flip, Mirror, and Restore). When the user right-clicks on a layer panel, a borderless form that holds a listbox of available colors is displayed at the mouse position, and when selected, the color is displayed on the layer panel in the label that currently reads "No Color", and the name of the selected color will also be displayed in that label. I toyed with using a listview instead of the layer panels, but the association between the listbox and a color selector was even more klunky than what I have now. Opinions, options, suggestions are now being entertained.
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997First thing that springs to mind is that you are repeating the same collection of controls multiple times. I would have a listbox of layers and have the colour/visibility/blur property controls only once, populated depending on the layer selection in the listbox. This would also allow multi selection of layers or operations such as mirroring
Pedis ex oris Quidquid latine dictum sit, altum sonatur
-
I've been trying to come up with a form that performs the following function: The user selects a pattern which consists of one to six image layer files. Each files consists of a single-color area on a transparent background, and are overlaid on top of each other (in a specific order). What the user will be able to do: 0) Select a replacement color for the non-transparent portion on an image-by-image basis. 1) Blur an image (with a numeric value indicating the amount of blur to apply) 2) Select a layer to be used or not 3) Flip the image vertically 4) Mirror the image horizontally 5) The composited image is updated as the user changes settings. Right now, I have this form[^]. The idea is that the user assigns a color by right-clicking each of the layer panels on the left side. the checkbox next to each of the layer panels is used to indicate which layer is affected by the three buttons (Flip, Mirror, and Restore). When the user right-clicks on a layer panel, a borderless form that holds a listbox of available colors is displayed at the mouse position, and when selected, the color is displayed on the layer panel in the label that currently reads "No Color", and the name of the selected color will also be displayed in that label. I toyed with using a listview instead of the layer panels, but the association between the listbox and a color selector was even more klunky than what I have now. Opinions, options, suggestions are now being entertained.
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997As with Pete and Slacker, separate the selection of the layer from the action and no action is available unless a layer is selected. I also wonder if you can visually show the
blurwith thecolourin the layer selection, maybe dither out the border based on the blur? Does the blur need a checkbox AND a value, shirley if it's blank / zero there is no blur? Using a Pete UI:+-------------------------------------------------------------------------------------+
| Hide a Gun v [] x |
+-------------------------------------------------------------------------------------+Layer: ----+ Weapon v Pattern v 0. Blue +-------------------------------------------------------------------+ *1. Red 2. White 3. --- 4. --- 5. --- ,--------------, 6. --- L.,------, ,--' -----------+ ______/(______( (________,------==========. (###========\_________--===-----======================= Visible x ,',""""\ ,-+-_ __,___,____,____,____,___ Blur 17 = \ \ )_) ( )__,____,____,____,____ = \ \ )====) `:__ __\ \ \_) /====/ \ `----' /====/ \[JW] Flip `-._/ :____ Mirror Restore +-------------------------------------------------------------------+ -
What you are effectively doing here is mirror the way that a graphics program such as Fireworks or Photoshop behaves. If you take a look at those applications, and have a play around with the way that Layers works, you'll get the general idea. Basically, you'd separate the layer out from the action, so you might end up with the following idea(mocked out in line art):
+-------------------------+
| Title |
| Layer 6 |
| Layer 5 |
| Layer 4 |
| Layer 3 |
| Layer 2 |
| Layer 1 |
+-------------------------+
| Add layer Remove layer |
+-------------------------+I would make this a floating panel. Then, when the user selects a layer from this list, and a separate panel just details the options once; these options being tied to the selected layer.
Forgive your enemies - it messes with their heads
"Mind bleach! Send me mind bleach!" - Nagy Vilmos
My blog | My articles | MoXAML PowerToys | Mole 2010 - debugging made easier - my favourite utility
I thought about that, but I don't have to allow removal/adding of a layer. The number of layers possible is 1 to 6, and the number of layer panels will refelct the available layers (if there are only 5 layer images, only 5 layer panels will be displayed.
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997 -
If I am understanding your question correctly... You could try emulating the "standard" layer UI from most photo editing software (i.e. photoshop or PSP). Each layer is an item in your list and each layer can access the same set of properties and attributes. [edit] This UI style for layers hasn't really changed because it uses very little real estate. IMO, your current app, is using way to much space up on the left for the configuration controls. [edit 2] I just noticed that your Blur setting is not a slider control. A slider control is better for image apps because it allows the user to visualize the change difference better then entering in numbers only.
Just along for the ride. "the meat from that butcher is just the dogs danglies, absolutely amazing cuts of beef." - DaveAuld (2011)
"No, that is just the earthly manifestation of the Great God Retardon." - Nagy Vilmos (2011)Slacker007 wrote:
This UI style for layers hasn't really changed because it uses very little real estate. IMO, your current app, is using way to much space up on the left for the configuration controls.
I agree that it takes up a lot of room. That's why I asked this qeustion. :)
Slacker007 wrote:
I just noticed that your Blur setting is not a slider control. A slider control is better for image apps because it allows the user to visualize the change difference better then entering in numbers only.
I was thinking about an up/down control, but yeah, I agree.
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997 -
I've been trying to come up with a form that performs the following function: The user selects a pattern which consists of one to six image layer files. Each files consists of a single-color area on a transparent background, and are overlaid on top of each other (in a specific order). What the user will be able to do: 0) Select a replacement color for the non-transparent portion on an image-by-image basis. 1) Blur an image (with a numeric value indicating the amount of blur to apply) 2) Select a layer to be used or not 3) Flip the image vertically 4) Mirror the image horizontally 5) The composited image is updated as the user changes settings. Right now, I have this form[^]. The idea is that the user assigns a color by right-clicking each of the layer panels on the left side. the checkbox next to each of the layer panels is used to indicate which layer is affected by the three buttons (Flip, Mirror, and Restore). When the user right-clicks on a layer panel, a borderless form that holds a listbox of available colors is displayed at the mouse position, and when selected, the color is displayed on the layer panel in the label that currently reads "No Color", and the name of the selected color will also be displayed in that label. I toyed with using a listview instead of the layer panels, but the association between the listbox and a color selector was even more klunky than what I have now. Opinions, options, suggestions are now being entertained.
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997My first thought ... before reading the other responses to this message ... was that the end-user should add "layers" via a menu, or other UI element, until the limit is reached. Which might leave more room for UI ? But, if it is important to you that all six possible layers be presented, then an alternative to going the route of emulating "layers" in PhotoShop, or whatever, might be to use an "Outlook" style "TaskBar" control, where one, selected, layer ui expands full-size, and the others are in their "collapsed state." This type of control is so easy to simulate in WinForms, just using contained panels inside a panel, docking, and a mousedown event for all contained panels that adjusts their vertical sizes. It seems to me that having a series of checkboxes that control only whether the "layer" has the possible transformations (Flip, Mirror) applied to it is kind of "counter-intuitive." I think I'd either move those checkboxes inside the layer UI's, and title them 'Allow Transform' or come up with ? Having a 'Restore' button next to the graphic transform buttons also doesn't feel quite right to me; what about putting that next to the 'Save' button ? I should disclaim this suggestion by saying I don't really know if 'Restore' applies only to 'undoing' the last transform, or more 'global' application state. best, Bill
"Beauty is in the eye of the beholder, and it may be necessary from time to time to give a stupid or misinformed beholder a black eye." Miss Piggy"
-
Slacker007 wrote:
This UI style for layers hasn't really changed because it uses very little real estate. IMO, your current app, is using way to much space up on the left for the configuration controls.
I agree that it takes up a lot of room. That's why I asked this qeustion. :)
Slacker007 wrote:
I just noticed that your Blur setting is not a slider control. A slider control is better for image apps because it allows the user to visualize the change difference better then entering in numbers only.
I was thinking about an up/down control, but yeah, I agree.
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997John Simmons / outlaw programmer wrote:
up/down control,
That would work as well. Can't wait to see the full app when you have finished.
Just along for the ride. "the meat from that butcher is just the dogs danglies, absolutely amazing cuts of beef." - DaveAuld (2011)
"No, that is just the earthly manifestation of the Great God Retardon." - Nagy Vilmos (2011) -
What you are effectively doing here is mirror the way that a graphics program such as Fireworks or Photoshop behaves. If you take a look at those applications, and have a play around with the way that Layers works, you'll get the general idea. Basically, you'd separate the layer out from the action, so you might end up with the following idea(mocked out in line art):
+-------------------------+
| Title |
| Layer 6 |
| Layer 5 |
| Layer 4 |
| Layer 3 |
| Layer 2 |
| Layer 1 |
+-------------------------+
| Add layer Remove layer |
+-------------------------+I would make this a floating panel. Then, when the user selects a layer from this list, and a separate panel just details the options once; these options being tied to the selected layer.
Forgive your enemies - it messes with their heads
"Mind bleach! Send me mind bleach!" - Nagy Vilmos
My blog | My articles | MoXAML PowerToys | Mole 2010 - debugging made easier - my favourite utility
http://www.codeproject.com/Messages/4037183/Design-Quandary-v2.aspx[^]
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997 -
If I am understanding your question correctly... You could try emulating the "standard" layer UI from most photo editing software (i.e. photoshop or PSP). Each layer is an item in your list and each layer can access the same set of properties and attributes. [edit] This UI style for layers hasn't really changed because it uses very little real estate. IMO, your current app, is using way to much space up on the left for the configuration controls. [edit 2] I just noticed that your Blur setting is not a slider control. A slider control is better for image apps because it allows the user to visualize the change difference better then entering in numbers only.
Just along for the ride. "the meat from that butcher is just the dogs danglies, absolutely amazing cuts of beef." - DaveAuld (2011)
"No, that is just the earthly manifestation of the Great God Retardon." - Nagy Vilmos (2011)http://www.codeproject.com/Messages/4037183/Design-Quandary-v2.aspx[^]
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997 -
My first thought ... before reading the other responses to this message ... was that the end-user should add "layers" via a menu, or other UI element, until the limit is reached. Which might leave more room for UI ? But, if it is important to you that all six possible layers be presented, then an alternative to going the route of emulating "layers" in PhotoShop, or whatever, might be to use an "Outlook" style "TaskBar" control, where one, selected, layer ui expands full-size, and the others are in their "collapsed state." This type of control is so easy to simulate in WinForms, just using contained panels inside a panel, docking, and a mousedown event for all contained panels that adjusts their vertical sizes. It seems to me that having a series of checkboxes that control only whether the "layer" has the possible transformations (Flip, Mirror) applied to it is kind of "counter-intuitive." I think I'd either move those checkboxes inside the layer UI's, and title them 'Allow Transform' or come up with ? Having a 'Restore' button next to the graphic transform buttons also doesn't feel quite right to me; what about putting that next to the 'Save' button ? I should disclaim this suggestion by saying I don't really know if 'Restore' applies only to 'undoing' the last transform, or more 'global' application state. best, Bill
"Beauty is in the eye of the beholder, and it may be necessary from time to time to give a stupid or misinformed beholder a black eye." Miss Piggy"
http://www.codeproject.com/Messages/4037183/Design-Quandary-v2.aspx[^]
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997 -
First thing that springs to mind is that you are repeating the same collection of controls multiple times. I would have a listbox of layers and have the colour/visibility/blur property controls only once, populated depending on the layer selection in the listbox. This would also allow multi selection of layers or operations such as mirroring
Pedis ex oris Quidquid latine dictum sit, altum sonatur
http://www.codeproject.com/Messages/4037183/Design-Quandary-v2.aspx[^]
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997 -
As with Pete and Slacker, separate the selection of the layer from the action and no action is available unless a layer is selected. I also wonder if you can visually show the
blurwith thecolourin the layer selection, maybe dither out the border based on the blur? Does the blur need a checkbox AND a value, shirley if it's blank / zero there is no blur? Using a Pete UI:+-------------------------------------------------------------------------------------+
| Hide a Gun v [] x |
+-------------------------------------------------------------------------------------+Layer: ----+ Weapon v Pattern v 0. Blue +-------------------------------------------------------------------+ *1. Red 2. White 3. --- 4. --- 5. --- ,--------------, 6. --- L.,------, ,--' -----------+ ______/(______( (________,------==========. (###========\_________--===-----======================= Visible x ,',""""\ ,-+-_ __,___,____,____,____,___ Blur 17 = \ \ )_) ( )__,____,____,____,____ = \ \ )====) `:__ __\ \ \_) /====/ \ `----' /====/ \[JW] Flip `-._/ :____ Mirror Restore +-------------------------------------------------------------------+ ASCII Art is a paint, ain't it? :) http://www.codeproject.com/Messages/4037183/Design-Quandary-v2.aspx[^]
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997 -
http://www.codeproject.com/Messages/4037183/Design-Quandary-v2.aspx[^]
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997Sorry, just got back from lunch. Anyway, what you have got there seems a reasonable compromise.
Forgive your enemies - it messes with their heads
"Mind bleach! Send me mind bleach!" - Nagy Vilmos
My blog | My articles | MoXAML PowerToys | Mole 2010 - debugging made easier - my favourite utility
