Note

Bonjour, bienvenue dans la communauté SunFounder pour les passionnés de Raspberry Pi, Arduino et ESP32 sur Facebook ! Plongez plus profondément dans l’univers du Raspberry Pi, Arduino et ESP32 avec d’autres amateurs.

Pourquoi nous rejoindre ?

• Support d’experts : Résolvez vos problèmes après-vente et relevez des défis techniques avec l’aide de notre communauté et de notre équipe.

• Apprendre & Partager : Échangez des astuces et des tutoriels pour améliorer vos compétences.

• Aperçus exclusifs : Accédez en avant-première aux annonces de nouveaux produits et bénéficiez d’aperçus exclusifs.

• Réductions spéciales : Profitez de réductions exclusives sur nos nouveaux produits.

• Promotions festives et cadeaux : Participez à des promotions spéciales et à des tirages au sort.

👉 Prêt à explorer et à créer avec nous ? Cliquez sur [Ici] et rejoignez-nous dès aujourd’hui !

Metronome

Dans ce projet, nous allons créer un métronome, qui est divisé en 5 niveaux. Plus le niveau est élevé, plus le signal sonore du buzzer est rapide.

Câblage

Note

Un buzzer actif est utilisé ici, identifiable par un autocollant blanc sur sa surface.

Code

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;
    }
}

Comment ça fonctionne ?

Ici, nous avons créé une classe Slider qui agit comme un widget.

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

Lors de la déclaration, sept paramètres doivent être passés.

Les quatre premiers déterminent la taille du widget, correspondant aux coordonnées (x1, y1) du point de départ en haut à gauche et (x2, y2) du point en bas à droite.

Les trois derniers définissent la plage de valeurs (min à max) et la valeur initiale.

La classe dispose de deux méthodes principales. La première, dragPoint(), permet de rendre le curseur glissable et de renvoyer la valeur actuelle de la position du curseur.

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;
}

La seconde méthode, show(), affiche le curseur, tout en indiquant la plage de valeurs et la valeur actuelle.

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);
}

Pour plus d’informations, veuillez consulter la Processing Reference.