Webインターフェイスでプラグボードを表す
私は現在JavaScriptでエニグママシンを作成しています（初期のプロトタイプ here ）。プラグボードを実装する必要がある段階になりました。
これで、プラグボードは26ソケットのセットになり、各文字に1つずつ、ケーブルでパッチすることができ、出力でこれらの文字を入れ替えることができます。プラグボードの例はここにあります：
各ソケットは一度だけ接続できます。 （したがって、DをEに接続すると、DもEも再び接続できなくなります）。
さて、私が抱えている問題は、これをユーザーインターフェイスに実装する最良の方法が本当にわからないことです。私は各ソケットを選択ボックスにすることを考えましたが、それを使用するのは直感的ではないと思います。プラグとパッチケーブルを直接表すと、かなり煩雑に見え、開発するのは悪夢になります。
では、このようなプラグボードをWebインターフェースに実装する方法について何かアイデアはありますか？
ドロップダウン（またはスピナー）はかなり明白な選択です。 AをDにリンクすると、DがAにリンクされるように、対応するペアを一緒に変更します。
実装の問題は、すでにリンクされているDを（たとえば）Fにリンクするように変更することです。これをAからリンク解除して（A↔Aを取得する）、新しい相互リンクF↔Dを作成する必要があります。他の場所からリンクされている場合、Dのスピナーを無効にする方が簡単なので、ユーザーはDを変更する前に明示的にA↔Aを設定する必要があります。しかし、それは直感的ではありません。
色を使用して、リンクされている文字を表示できます。 （各ペアを異なる色で示すのではなく、「この文字にはパッチが適用されています」には単一の色をお勧めします。）
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
