Note

Bonjour et bienvenue dans la Communauté Facebook des passionnés de Raspberry Pi, Arduino et ESP32 de SunFounder ! Plongez plus profondément dans l’univers des Raspberry Pi, Arduino et ESP32 avec d’autres passionnés.

Pourquoi rejoindre ?

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

• Apprendre et 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 aux aperçus.

• Réductions spéciales : Profitez de réductions exclusives sur nos produits les plus récents.

• Promotions festives et cadeaux : Participez à des cadeaux et des promotions de vacances.

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

Métronome

Nous allons ici fabriquer un métronome. Le métronome est divisé en 5 niveaux : plus le niveau est élevé, plus l’appel du buzzer est urgent.

Composants nécessaires

Dans ce projet, nous avons besoin des composants suivants.

Il est certainement pratique d’acheter un kit complet, voici le lien :

Nom	ÉLÉMENTS DANS CE KIT	LIEN
Kit Raphael	337	Raphael Kit

Vous pouvez également les acheter séparément via les liens ci-dessous.

INTRODUCTION DES COMPOSANTS	LIEN D’ACHAT
Carte d’extension GPIO	ACHETER
Plaque d’expérimentation (Breadboard)	ACHETER
Fils de Liaison	ACHETER
Buzzer	ACHETER
Transistor	ACHETER

Câblage

Note

Un buzzer actif est utilisé ici, et il a un autocollant blanc dessus.

Croquis

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 marche ?

Ici, nous avons créé une classe Slider et l’avons utilisée comme WIDGET.

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

Lors de la déclaration, elle nécessite de passer 7 paramètres.

Les quatre premiers paramètres déterminent la taille du widget, suivis par les coordonnées (x1, y1) du point de départ en haut à gauche et (x2, y2) en bas à droite.

Les trois derniers paramètres déterminent sa plage de valeurs (de min à max) et la valeur initiale.

Elle possède deux méthodes, l’effet de dragPoint() est de rendre le curseur glissable et de retourner la valeur de position actuelle 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;
}

Une autre méthode, show(), est utilisée pour afficher le curseur. En même temps, la valeur de la plage et la valeur actuelle sont affichées à la position correspondante.

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