Editing an array of numbers which length is variable

Question

For the needs of a line drawing program, I need to edit an array of integers. The only constraint on the array is its length, which has to be even, and greater or equal to two. The solution I have for now looks like this:

The [ x ] stands for editable text boxes.

Initially: ( this one represents the default dashed line: - - - -)

[ 1 ] [ 1 ] [ ] [ ]

User has filled one of the two empty fields: (inconsistent state)

[ 1 ] [ 1 ] [ 2 ] [ ]

User has filled the remaining field:

[ 1 ] [ 1 ] [ 2 ] [ 2 ] [ ] [ ]

Is this correct, or is there a better way to do this ?

Edit: I don't want any form of markup language as suggested in one answer.

Answer 1

So, am I understanding your situation correctly when I assume that …

[1][1]
- - - - - - - 
[2][2]
--  --  --  --
[1][1][2][2]
- --  - --  - --  

I guess it's necessary to provide pairs because this should also be possible:

[2][1]
-- -- -- -- -- 

First of all, I don't think it's necessary to require the user provide a pair of values. If the number of values is odd, then the last number can be assumed to be meaning an even dash/gap section, so that …

[1] => [1][1]
[2][2][1] => [2][2][1][1]

This is also how it's implemented in Adobe Illustrator. Quite frankly, I can't think of a better way of doing this.

EDIT:

Another way of allowing for uneven fields would be to just repeat the sequence as provided in the inputs, so that …

[1]
----------------
(-|-|-|-|-|-|-|-|-)

[1][1][2]
- --- --- --- --- --
(- --|- --|- --|- --|- --|- --)

While I think this approach would be less intuitive, it would – on the other hand – add the flexibility of creating offsets at the beginning of the line (as seen in the second example). It might help to preview the resulting sequence near the inputs, like so:

right: Suggestion #1, current Adobe Illustrator approach left: Suggestion #2, slightly more flexible

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

A simpler way to do this would be to have a single text box and get the user to input a series of numbers separated by spaces:

1 2 3 4 5 6 7 8

This has a number of benefits:

• You can quickly split the string on the space (or other delimiter) to determine how many elements there are and raise an error if there are an odd number of values.

• There are no constraints on the number of pairs of values the user can enter.

If you really want to use separate text boxes (for syntax and error highlighting as you mention) then convert each box to take a pair of numbers separated by a space:

[1 2] [3 4] [5 6] ...

Thus there will always be an even number of values and you can use your highlighting scheme and also raise an error if any box contains anything other than two numbers.