Création d'un bouton rotatif

Bonjour,

Voilà j’aurai besoin d’un coup de pouce pour mon projet, pour le bac.
J’ai un amplificateur de guitare avec notamment un bouton rotatif volume.
Je voulais savoir s’il était possible de créer un bouton rotatif que l’utilisateur de ma page web pourrait tourner afin de relever une valeur sur 100 par exemple selon l'angle, avec du Javascript.
Le but étant d'allumer de 0 à 5 LED selon que le bouton soit à telle ou telle position. Si c'est sur 100, par exemple, une LED s'allume tout les 20% de volume. Et tout ça en Javascript!
Je sais manipuler le HTML, le CSS mais le Javascript moyen, et je n'ai pas trouver sur internet...
J'espère avoir été clair dans mes explications.

Merci d'avance

Voilà comment moi je vois les choses. Peut-être que tu n'imagines pas exactement ça comme ça, mais je te donne des pistes.

Au niveau interactif, il faut que tu traques la position de la souris par rapport au centre du bouton, et que tu appliques un petit peu de trigo (juste un petit tan^-1(y/x), et une condition pour ajuster le signe, rien de trop méchant). Si l'utilisateur clique sur le potar (évènement mousedown), tu commutes une variable globale booléenne qui indique que l'orientation du potar doit être mise à jour. Si l'utilisateur relâche le bouton de la souris, il n'est plus forcément au-dessus, du coup tu dois surveiller l'évènement mouseup sur l'ensemble de la page.
Et pour mettre à jour l'orientation du bouton, surveille l'évènement mousemove, sur l'ensemble de la page également.

Au niveau affichage, je vois deux possibilités :

– avec un élément <img> que tu orientes avec la règle CSS transform: rotate(…) (voir par exemple le tuto de David Walsh) ;
– avec un canvas, et les fonction JavaScript de dessin et de copie d'image rotate et drawImage (désolé si tous les liens que je te donne sont en anglais).

Et pour les led, reprends la valeur d'angle que tu obtiens avec le fameux tan^-1, et fais une simple règle de trois ;)

Voilà, c'est juste des pistes. N'hésite pas à poser des questions :)

Merci de ta réponse mais c'est un peu compliquer tout ça... Je démarre à peine en JavaScript dsl

Puis je tiens à préciser que j'ai un oral à la fin, donc ce serai bien si je pouvais vraiment tout comprendre à ce que je fais. Du coup mon idée n'est vraiment pas possible?

Si si c'est possible, je te donne simplement des pistes. C'est à toi de faire le travail ;)
Tu as une idée de par où commencer ou tu veux des indices ?

C'est un peu compliqué parce qu'il n'existe pas de composant tout fait pour ça. En effet, les boutons qui tournent c'est bien pour les pouces et les index, mais c'est pas très pratique avec une souris ! On peut imaginer des trucs, mais ça implique des interactions un peu bizarres et des calculs d'angle.

Tu ne voudrais pas plutôt partir sur des éléments HTML plus classiques, comme un <input type="range"> ?

Salut, l'input de type range, très bonne idée, je ne connaissais pas. Je vais essayer avec ça, si tout va bien je vois comment faire pour le reste. Merci