[Closed] a discussion about a delicate matter…

ok. here is the answer…
check the size of spinner… it’s small, right? but it wide enough to show 2 digits. (maximum slot number is 24, and we don’t need to show more than 2 digits).

but try to select text in the spinner? is it easy? NO! you have to take aim at it every time. for what reason? how hard was to make the field a little bigger without changing anything else?
and the problem would be solved… the moral of the story – don’t go crazy trying design tight UI

  try(destroydialog a) catch()
  rollout a "Bad" width:200
  (
  	checkbox useeditor_ch "Use Material Editor" align:#left offset:[-4,0] across:2
  	spinner slot_sp "Slot: " range:[1,24,1] type:#integer fieldwidth:24 enabled:useeditor_ch.state align:#rigth offset:[4,1]
  	
  	on useeditor_ch changed state do slot_sp.enabled = state 
  )
  createdialog a pos:[600,200]
  
  try(destroydialog b) catch()
  rollout b "Good" width:200
  (
  	checkbox useeditor_ch "Use Material Editor" align:#left offset:[-4,0] across:2
  	spinner slot_sp "Slot: " range:[1,24,1] type:#integer fieldwidth:32 enabled:useeditor_ch.state align:#rigth offset:[4,1]
  	
  	on useeditor_ch changed state do slot_sp.enabled = state 
  )
  createdialog b pos:[600,280]
  

the spinner is designed to have some empty spice after all digits to make easier the text editing.

i’ve seen UIs with spinner’s edit field for only 1 digit. Have you too?

hm! thanks, Denis!

here is another problem:

 try(destroydialog a) catch()
 rollout a "Bad" width:200
 (
 	group "Normal Map: " 
 	(
 		label space_lb "Space:" across:2 align:#right offset:[-50,1]
 		radiobuttons space_rb labels:#("Local XYZ", "Tangent") columns:2 align:#left offset:[-44,0]
 		
 		label red_lb "Red:" across:2 align:#right offset:[-50,5]
 		radiobuttons xdir_rb labels:#("Left", "Right") columns:2 align:#left offset:[-44,4]
 		
 		label green_lb "Green:" across:2 align:#right offset:[-50,-2]
 		radiobuttons ydir_rb labels:#("Down", "Up") columns:2 align:#left offset:[-44,-3]
 	)
 )
 createdialog a pos:[600,200]
 

everything is ok… but i like when everything is perfect.
labels are aligned…
first columns of all three radiobuttons are aligned…
how to vertically align the second column of all three radiobuttons controls?

(don’t break radiobuttons on two controls)

You have different space between 1st and 2nd row and 2nd and 3rd.
Here is the answer

 try(destroydialog a) catch()
 rollout a "Bad" width:200
 (
	 group "Normal Map: " 
	 (
		 label space_lb "Space:" across:2 align:#right offset:[-50,1]
		 radiobuttons space_rb labels:#("Local XYZ", "Tangent") columns:2 align:#left offset:[-44,0]
		 
		 label red_lb "Red:" across:2 align:#right offset:[-50,-3]
		 radiobuttons xdir_rb labels:#("Left	 
", "Right") columns:2 align:#left offset:[-44,-3]
		 
		 label green_lb "Green:" across:2 align:#right offset:[-50,-2]
		 radiobuttons ydir_rb labels:#("Down	  ", "Up") columns:2 align:#left offset:[-44,-3]
	 )
 )
 createdialog a pos:[600,200]

edit: gazybra answer it I think.

but I prefer this [raw]:

try(destroydialog a) catch()
 rollout a "Bad" width:233 height:97
 (
 	groupBox grp1 "Normal Map: " pos:[5,6] width:221 height:87
 	label space_lb "Space:" pos:[14,25] width:34 height:13 across:2
 	radiobuttons space_rb "" pos:[53,25] width:73 height:32 labels:#("Local XYZ", "Tangent") default:1 columns:1
 		
 	label red_lb "Red:" pos:[132,27] width:23 height:13 across:2
 	radiobuttons xdir_rb "" pos:[168,26] width:48 height:32 labels:#("Left", "Right") default:1 columns:1
 		
 	label green_lb "Green:" pos:[130,58] width:32 height:13 across:2
 	radiobuttons ydir_rb "" pos:[168,60] width:51 height:32 labels:#("Down", "Up") columns:1
 	groupBox grp2 "" pos:[125,6] width:100 height:87
 )
 createdialog a pos:[600,200]

cos it can grouped by the nature of its control…red green is color , but space can different control . I hope you dont mind. Gwah time to sleep

And what about empty space in bottom-left corner. I think that is rigth place for some logo
Good night and sleep well, bud

Personally, I would agree if editing the spinner field is something you need to do frequently.

Sometimes they are used for functions you would access from time to time. In this case, I prefer to adjust them to the design.

If it is difficult to select the spinner field, I imagine it is much harder to pick up the arrows.

One to three extra digits spaces would be good (I prefer two), if you can afford that.

And all this would be solved somehow if when you click on the field, everything is selected.

Awesome and insightful thread!

I’m probably one of the few guys who still use the dreaded Visual Maxscript editor… the tool does help me do an initial visual layout. But it does get painful when I need to re-edit the UI down the line. :banghead:

I also think gazybra got it. : )

Here’s an alternative to how I might build the UI. Only because I sometimes find radio buttons to be daunting to look at. I also added in a small function I tend to use in order to align my labels.

try(destroydialog b) catch()
rollout b "Test" width:200
(
	groupBox grp_normals "Normal Map:" pos:[5,5] width:190 height:45
	groupBox normals_clr "" pos:[5,43] width:190 height:62
	
	label lbl_space "Space:" pos:[35,30] width:45 height:15
	dropDownList ddl_space "" pos:[85,25] width:105 height:21 items:#("Local XYZ", "Tangent")
	label lbl_red "Red:" pos:[35,60] width:45 height:15
	dropDownList ddl_red "" pos:[85,55] width:105 height:21 items:#("Left", "Right")
	label lbl_green "Green:" pos:[35,85] width:45 height:15
	dropDownList ddl_green "" pos:[85,80] width:105 height:21 items:#("Down", "Up")
	
	fn fixLabels ui offset:3 =
	(
		for p in ui.controls where classOf p == LabelControl do
		(
			adjust = (ui.width/2)+offset
			txtSize = getTextExtent p.text
			p.pos.x = adjust-txtSize.x
		)
	)
	
	on b open do fixLabels b offset:-20
)
createdialog b

For reference, here are the other UI corrections:
gazybra

fajar

i really like your idea. the problem of drop-down controls is that a user has to drop the control to know what options he has… the radiobuttons control shows all possible options