I'm currently making an enigma machine in JavaScript (early working prototype here). I've now just reached the stage where I need to implement the plugboard.

Now the plugboard is a set of 26 sockets, one for each letter, that can be patched together with a cable, with the effect of swapping those letters around in the output. An example of a plugboard is here:

example plugboard

Each socket can only be connected once. (so if I connect D to E, then neither D nor E can be connected to again).

Now, the problem I have, is that I really don't know the best way to implement this in a user interface. I've thought of making each socket a select box, but I don't think that would be intuitive to use. directly representing plugs and patch cables would look quite messy, and would a nightmare to develop.

So does anybody have any ideas on how to implement such a plugboard in a web interface?

1 Answer 1


Dropdowns (or spinners) would be a fairly obvious choice. Change corresponding pairs together, so that if you link A to D, D gets linked to A.

The implementation problem would then be changing an already-linked D to link to (say) F: you would need to unlink it from A (so you get A↔A) and make a new reciprocal link F↔D. It would be easier to disable D's spinner when it's linked from somewhere else, so that the user would need to explicitly set A↔A before changing D; but that's not as intuitive.

You could use colour to show letters which are linked. (I'd suggest a single colour for "This letter is patched", rather than indicating each pair with a different colour.)


download bmml source – Wireframes created with Balsamiq Mockups

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.