Nota

Ciao, benvenuto nella SunFounder Raspberry Pi & Arduino & ESP32 Enthusiasts Community su Facebook! Approfondisci Raspberry Pi, Arduino ed ESP32 insieme ad altri appassionati.

Perché unirti a noi?

• Supporto Esperto: Risolvi problemi post-vendita e sfide tecniche con l’aiuto della nostra comunità e del nostro team.

• Impara & Condividi: Scambia suggerimenti e tutorial per migliorare le tue competenze.

• Anteprime Esclusive: Ottieni accesso anticipato a nuovi annunci di prodotti e anteprime esclusive.

• Sconti Speciali: Approfitta di sconti esclusivi sui nostri prodotti più recenti.

• Promozioni Festive e Omaggi: Partecipa a omaggi e promozioni durante le festività.

👉 Pronto per esplorare e creare con noi? Clicca su [Qui] e unisciti oggi stesso!

Metronomo

Qui realizzeremo un metronomo, suddiviso in 5 livelli: più alto è il livello, più veloce sarà il suono del cicalino.

Componenti Necessari

In questo progetto, abbiamo bisogno dei seguenti componenti.

È sicuramente conveniente acquistare un kit completo, ecco il link:

Nome	COMPONENTI IN QUESTO KIT	LINK
Kit Raphael	337	Raphael Kit

Puoi anche acquistarli separatamente dai link sottostanti.

INTRODUZIONE AI COMPONENTI	LINK PER L’ACQUISTO
Scheda di estensione GPIO	ACQUISTA
Breadboard	ACQUISTA
Cavi Jumper	ACQUISTA
Cicalino	ACQUISTA
Transistor	ACQUISTA

Collegamento

Nota

Qui viene utilizzato un cicalino attivo, riconoscibile dall’adesivo bianco sulla parte superiore.

Sketch

import processing.io.*;

int level = 0;
int buzzerPin = 17;
int levelRange=5;
Slider mySlider;

void setup() {
    size(400, 200);
    frameRate(50);
    mySlider = new Slider(width * 0.2,height * 0.4,width * 0.8,height * 0.6,0,levelRange,level);
    GPIO.pinMode(buzzerPin, GPIO.OUTPUT);
}

void draw() {

    background(255);
    mySlider.show();
    if(level==0){
        GPIO.digitalWrite(buzzerPin, GPIO.HIGH);
    }else if((frameCount/5) % (levelRange-level+1) ==0){
        GPIO.digitalWrite(buzzerPin, GPIO.LOW);
    }else{
        GPIO.digitalWrite(buzzerPin, GPIO.HIGH);
    }
}

void mouseDragged(){
    level = mySlider.dragPoint(mouseX,mouseY);
}

class Slider{
    float slotPointAX;
    float slotPointBX;
    float slotPointAY;
    float slotPointBY;
    float linePoint;
    float depth;
    int maxRange;
    int minRange;
    int value;

    Slider(float ax, float ay, float bx, float by, int min, int max, int v){
        slotPointAX = ax;
        slotPointAY = ay;
        slotPointBX = bx;
        slotPointBY = by;
        maxRange = max;
        minRange = min;
        value = v;
        linePoint = slotPointAX;// + map(value, minRange, maxRange, slotPointAX, slotPointBX);
        depth = (slotPointBY - slotPointAY)*0.75;
    }

    void show(){
        rectMode(CORNERS);
        fill(200);
        stroke(255,0,0);
        rect(slotPointAX, slotPointAY, slotPointBX, slotPointBY);
        fill(255,0,0);
        rect(slotPointAX, slotPointAY, linePoint, slotPointBY);
        fill(200);
        textSize(depth);
        text(minRange, slotPointAX, slotPointBY+depth);
        text(maxRange, slotPointBX, slotPointBY+depth);
        text(value, linePoint, slotPointAY);
    }

    int dragPoint(float mx, float my){
        if(mx>=slotPointAX && mx<=slotPointBX && my>=slotPointAY && my<=slotPointBY){
            value = int(map(mx,slotPointAX,slotPointBX,minRange,maxRange));
            linePoint = map(value,minRange,maxRange,slotPointAX,slotPointBX);
        }
        return value;
    }
}

Come funziona?

Abbiamo creato una classe Slider e l’abbiamo fatta funzionare come WIDGET.

Slider(ax, ay, bx, by, min, max, v)

Nella dichiarazione, devono essere passati 7 parametri.

I primi quattro parametri determinano la dimensione del widget, seguiti dalle coordinate (x1, y1) del punto di partenza in alto a sinistra e (x2, y2) in basso a destra.

Gli ultimi tre parametri determinano il suo intervallo numerico (minimo e massimo) e il valore iniziale.

La classe ha due metodi: il metodo dragPoint() rende lo slider trascinabile e restituisce il valore della posizione corrente dello slider.

int dragPoint(float mx, float my){
    if(mx>=slotPointAX && mx<=slotPointBX && my>=slotPointAY && my<=slotPointBY){
        value = int(map(mx,slotPointAX,slotPointBX,minRange,maxRange));
        linePoint = map(value,minRange,maxRange,slotPointAX,slotPointBX);
    }
    return value;
}

Un altro metodo, show(), visualizza lo Slider. Allo stesso tempo, vengono mostrati i valori dell’intervallo e il valore corrente nella posizione corrispondente.

void show(){
    rectMode(CORNERS);
    fill(200);
    stroke(255,0,0);
    rect(slotPointAX, slotPointAY, slotPointBX, slotPointBY);
    fill(255,0,0);
    rect(slotPointAX, slotPointAY, linePoint, slotPointBY);
    fill(200);
    textSize(depth);
    text(minRange, slotPointAX, slotPointBY+depth);
    text(maxRange, slotPointBX, slotPointBY+depth);
    text(value, linePoint, slotPointAY);
}