web-dev-qa-db-fra.com

Représenter un plugboard dans une interface web

Je fais actuellement une machine Enigma en JavaScript (premier prototype fonctionnel ici ). Je viens maintenant d'atteindre le stade où j'ai besoin d'implémenter le plugboard.

Maintenant, le plugboard est un ensemble de 26 prises, une pour chaque lettre, qui peuvent être corrigées avec un câble, avec pour effet de permuter ces lettres dans la sortie. Un exemple de tableau de connexion est ici:

example plugboard

Chaque prise ne peut être connectée qu'une seule fois. (donc si je connecte D à E, alors ni D ni E ne peuvent être connectés à nouveau).

Maintenant, le problème que j'ai, c'est que je ne sais vraiment pas la meilleure façon de l'implémenter dans une interface utilisateur. J'ai pensé à faire de chaque socket une boîte de sélection, mais je ne pense pas que ce serait intuitif à utiliser. représenter directement les fiches et les câbles de raccordement aurait l'air assez désordonné et serait un cauchemar à développer.

Alors, quelqu'un a-t-il des idées sur la façon de mettre en œuvre un tel plugboard dans une interface Web?

4
Sam

Les listes déroulantes (ou spinners) seraient un choix assez évident. Modifiez les paires correspondantes ensemble, de sorte que si vous liez A à D, D soit lié à A.

Le problème d'implémentation serait alors de changer un D déjà lié pour le lier à (disons) F: vous auriez besoin de le dissocier de A (pour obtenir A↔A) et de créer un nouveau lien réciproque F↔D. Il serait plus facile de désactiver le spinner de D lorsqu'il est lié ailleurs, de sorte que l'utilisateur devrait définir explicitement A↔A avant de changer D; mais ce n'est pas aussi intuitif.

Vous pouvez utiliser la couleur pour afficher les lettres liées. (Je suggère une seule couleur pour "Cette lettre est corrigée", plutôt que d'indiquer chaque paire avec une couleur différente.)

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

3
Andrew Leach