Ruleta gràfica amb Obniz: 5 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:15

He fet una ruleta gràfica. Si premeu el botó, la ruleta comença a girar. Si torneu a prémer, la ruleta deixa de girar i emet un so.

Pas 1: Circuit

Utilitzem només un altaveu per cable i un botó.

Els números de PIN dels cables estan escrits al programa.

button = obniz.wired ("Button", {signal: 6, gnd: 7}); speaker = obniz.wired ("Speaker", {signal: 0, gnd: 1});

Pas 2: Gireu la imatge de la regla

En HTML, podeu utilitzar "CSS transform". Per exemple, aquest és el codi de rotació de la imatge 90 graus.

document.getElementById ("ruleta"). style = "transformar: girar (90 graus);";

Per iniciar i deixar de girar lentament, afegiu una velocitat var per al grau de rotació per fotograma.

deixa velocitat = 0; deixem deg = 0; funció rotate () {deg + = velocitat; document.getElementById ("ruleta"). style = "transformar: girar (" + deg + "deg);";

}

setInterval (rotar, 10);

Pas 3: emet un pit

Voleu fer un pit a la ruleta sense cap canvi? Amb això, podeu emetre un so de 440Hz a 10 ms.

speaker.play (440); espera obniz.wait (10); speaker.stop ();

Així es pot saber sobre el canvi de ruleta núm.

if (Math.floor ((deg + speed) / (360 / 7.0)) - Math.floor (deg / (360 / 7.0))> = 1) {onRouletteChange (); }

Per tant, aquest és el codi de rotació i pitit.

deixa velocitat = 0; deixem deg = 0; function rotate () {// on value change if (Math.floor ((deg + speed) / (360 / 7.0)) - Math.floor (deg / (360 / 7.0))> = 1) {onRouletteChange (); } deg + = velocitat; document.getElementById ("ruleta"). style = "transformar: girar (" + deg + "deg);";

}

setInterval (rotar, 10);

funció asincronitzada onRouletteChange () {

if (! speaker) {return;} speaker.play (440); espera obniz.wait (10); speaker.stop (); }

Pas 4: Inicieu el botó premut

Per conèixer l’estat del botó, afegiu var buttonStat i configureu el valor de l’estat actual del botó.

button.onchange = funció (premut) {buttonState = premut; };

I també afegiu fase var per a l'estat actual de la ruleta.

const PHASE_WAIT_FOR_START = 0; const PHASE_ROTATE = 1; const PHASE_STOPPING = 2; const PHASE_STOPPED = 3;

Per exemple, quan la fase és PHASE_WAIT_FOR_START i voleu la fase següent.

if (fase == PHASE_WAIT_FOR_START) {velocitat = 0; if (buttonState) {phase = PHASE_ROTATE; }}

Per accelerar la regla, canvieu la velocitat de la var.

if (fase == PHASE_ROTATE) {velocitat = velocitat + 0,5; }

Per accelerar la regla, canvieu la velocitat de la var.

:

if (fase == PHASE_STOPPING) {velocitat = velocitat-0,2; }

Aquests són components de la ruleta. Fem-ho!

Pas 5: programa

Consulteu aquí el programa