DIY Arduino Touchscreen MP3 Speler & Wewekker – Stap-voor-Stap Handleiding

Overzicht

Deze Arduino touchscreen MP3-speler en wekker heeft een starts met grote klok, datum, temperatuur, en knoppen voor Muziekspeler en Wekker.

Muziekspeler

Grote Play-knop, Previous/Next ernaast. Bovenin: voortgangsbalk. Onderin: volume-balk met +/- knoppen. Rechtsboven: klok. Linksboven: Menu-knop (terug naar start).

Wekker

Uren/minuten instellen met H/M knoppen. SET bevestigt, CLEAR wist. Bij alarm: liedje speelt harder, tot DISMISS knop ingedrukt wordt.

Hoe het werkt

Hardware: Arduino Mega, 3.2" TFT touchscreen met shield, BY8001-16P MP3-module (microSD, MP3/WAV, 3 W versterker), DS3231 RTC module.

Componenten

• BY8001-16P MP3 Module
• 3.2" TFT Touch Display
• TFT Display Mega Shield
• 0.5 W Speaker
• DS3231 Real Time Clock
• Arduino Mega

Schakelschema

TFT shield blokkeert Arduino pinnen → custom pinheaders tussen shield en Arduino. Extra pinheader op 5 V van shield (shield gebruikt alle VCC pinnen).

Raadpleeg eerdere tutorials voor TFT touch en DS3231. MP3-module: kort uitleg.

BY8001-16P MP3 Module

Werkt met microSD, MP3/WAV, ingebouwde 3 W versterker. Besturing via 5 knoppen of seriëel (microcontroller). Seriële pinnen 3.3 V → RX via 1k weerstand aan Arduino TX. Pads A, B, C: voor microcontroller-besturing 3 weerstanden verwijderen. Pinnen 6/7 voor luidspreker direct, 4/5 voor externe versterker. Arduino: BY8001 bibliotheek (GitHub).

Broncode

Code in secties uitgelegd. Complete code aan het einde.

Bibliotheken: UTFT.h, URTouch.h, SoftwareSerial.h, BY8001.h, DS3231.h. Objecten, fonts, bitmaps (afbeeldingen geconverteerd met ImageConverter565 tool).

#include <UTFT.h>
#include <URTouch.h>
#include <SoftwareSerial.h>
#include <BY8001.h>
#include <DS3231.h>

// Objecten
UTFT myGLCD(SSD1289, 38, 39, 40, 41); // Aanpassen aan jouw display/shield
URTouch myTouch(6, 5, 4, 3, 2);
SoftwareSerial mp3Serial(11, 10); // RX, TX
BY8001 mp3;
DS3231 rtc(SDA, SCL);

// Fonts & Bitmaps
extern uint8_t SmallFont[]; extern uint8_t BigFont[]; extern uint8_t SevenSegNumFont[];
extern unsigned int MusicPlayerButton[0x1040]; extern unsigned int AlarmButton[0x1040];
extern unsigned int ButtonPlay[0x1AE9]; extern unsigned int ButtonPause[0x1AE9];
extern unsigned int PreviousButton[0x9C4]; extern unsigned int NextButton[0x9C4];
extern unsigned int VolumeDown[0x170]; extern unsigned int VolumeUp[0x3B8];

// Variabelen
int x, y; char currentPage, playStatus; int iV = 15; int trackNum = 1; int b = 16;
int aHours = 0; int aMinutes = 0; boolean alarmNotSet = true; String alarmString = "";
float currentTemperature, temperature;
static word totalTime, elapsedTime, playback, minutes, seconds, lastSeconds, minutesR, secondsR;
String currentClock, currentHours, currentMinutes, currentSeconds, currentDate;
String timeString, hoursString, minutesString, secondsString, hoursS, minutesS, secondsS, dateS;

Bitmaps (.c bestanden) in sketch map zetten. Downloadlink in originele tutorial.

setup(): Display, touch, RTC, seriële poorten (9600 baud), MP3 module initialiseren (800 ms wachten voor cold boot), startscherm tekenen, initiële waarden (volume 15, temperatuur, datum, tijd).

void setup() {
  myGLCD.InitLCD(); myGLCD.clrScr(); myTouch.InitTouch(); myTouch.setPrecision(PREC_MEDIUM);
  rtc.begin();
  Serial.begin(9600); mp3Serial.begin(9600); mp3.setup(mp3Serial); delay(800);
  drawHomeScreen(); currentPage = '0'; playStatus = '0'; mp3.setVolume(15); delay(100);
  currentTemperature = rtc.getTemp(); currentDate = rtc.getDateStr(); currentClock = rtc.getTimeStr();
  timeString = rtc.getTimeStr();
  currentHours = timeString.substring(0,2); currentMinutes = timeString.substring(3,5); currentSeconds = timeString.substring(6,8);
}

Hoofdloop

currentPage == '0' (startscherm): Elke seconde klok updaten (SevenSegNumFont, alleen cijfers → substring). Datum/temperatuur updaten bij wijziging. Touch detectie: Music Player knop (coördinaten) → drawFrame() (rode cirkel animatie), currentPage='1', scherm wissen, drawMusicPlayerScreen(). Alarm knop → currentPage='2', scherm wissen.

void loop() {
  if (currentPage == '0') {
    if (currentClock != rtc.getTimeStr()) {
      timeString = rtc.getTimeStr();
      hoursS = timeString.substring(0,2); minutesS = timeString.substring(3,5); secondsS = timeString.substring(6,8);
      myGLCD.setFont(SevenSegNumFont); myGLCD.setColor(0,255,0);
      myGLCD.print(secondsS, 224, 50);
      if (currentMinutes != minutesS) { myGLCD.print(minutesS, 128, 50); currentMinutes = minutesS; }
      if (currentHours != hoursS) { myGLCD.print(hoursS, 32, 50); currentHours = hoursS; }
      dateS = rtc.getDateStr(); delay(10);
      if (currentDate != dateS) { myGLCD.setColor(255,255,255); myGLCD.setFont(BigFont); myGLCD.print(rtc.getDateStr(), 153, 7); }
      temperature = rtc.getTemp(); delay(10);
      if (currentTemperature != temperature) { myGLCD.setColor(255,255,255); myGLCD.setFont(BigFont); myGLCD.printNumI(temperature, 39, 7); currentTemperature = temperature; }
      delay(10); currentClock = rtc.getTimeStr();
    }
    if (myTouch.dataAvailable()) {
      myTouch.read(); x = myTouch.getX(); y = myTouch.getY();
      if (x>=55 && x<=120 && y>=125 && y<=190) { drawFrame(87,157,33); currentPage='1'; myGLCD.clrScr(); delay(100); drawMusicPlayerScreen(); delay(100); }
      if (x>=195 && x<=260 && y>=125 && y<=190) { drawFrame(227,160,29); currentPage='2'; myGLCD.clrScr(); }
    }
  }

Muziekspeler scherm

Touch detectie: Play-knop → toggle play/pause (playStatus 0/1/2). Previous/Next → mp3.previousTrack/nextTrack(), balk updaten. Volume +/- → mp3.decrease/increaseVolume(), balk updaten. Menu → startscherm. Voortgangsbalk updaten via trackPlayTime() (elapsed/total tijd, balk vullen). Klok rechtsboven via printClock().

if (currentPage == '1') {
  if (myTouch.dataAvailable()) {
    myTouch.read(); x = myTouch.getX(); y = myTouch.getY();
    // Play knop
    if (x>=116 && x<=204 && y>=77 && y<=165) {
      if (playStatus=='0') { drawFrame(159,121,42); drawPauseButton(); mp3.playTrackFromFolder(00,001); delay(100); playStatus='2'; return; }
      if (playStatus=='1') { drawFrame(159,121,42); drawPauseButton(); mp3.play(); delay(100); playStatus='2'; return; }
      if (playStatus=='2') { drawFrame(159,121,42); drawPlayButton(); mp3.pause(); delay(100); playStatus='1'; return; }
    }
    // Previous
    if (x>=45 && x<=95 && y>=97 && y<=147) { drawFrame(70,121,26); mp3.previousTrack(); delay(100); drawTrackBar(); }
    // Next
    if (x>=227 && x<=277 && y>=97 && y<=147) { drawFrame(252,122,26); mp3.nextTrack(); delay(100); drawTrackBar(); }
    // Volume Down
    if (x>=35 && x<=75 && y>=165 && y<=209) { drawUnderline(45,205,65,205); if (iV>=0 && iV<=30) { iV--; drawVolume(iV); } mp3.decreaseVolume(); delay(100); }
    // Volume Up
    if (x>=230 && x<=280 && y>=165 && y<=209) { drawUnderline(235,205,275,205); if (iV>=0 && iV<=30) { iV++; drawVolume(iV); } mp3.increaseVolume(); delay(100); }
    // Menu
    if (x>=0 && x<=75 && y>=0 && y<=30) { myGLCD.clrScr(); drawHomeScreen(); currentPage='0'; return; }
  }
  if (playStatus=='1' || playStatus=='2') trackPlayTime();
  printClock(187,5);
}

trackPlayTime(): mp3.getTotalTrackPlaybackTime(), getElapsedTrackPlaybackTime() → minuten/seconden berekenen, balk vullen (rood). Einde nummer → volgende nummer.

Wekker scherm

Grafieken tekenen: klok, kolommen (cirkels), uren/minuten (SevenSegNumFont), H/M knoppen (afgeronde rechthoeken), SET/CLEAR knoppen. alarmNotSet=true → while lus. H/M knoppen verhogen waarden (modulo 24/60). SET → alarmString vormen (HH:MM:00 formaat, match met rtc.getTimeStr()). CLEAR → wissen. Menu → startscherm.

if (currentPage == '2') {
  // Tekenen...
  alarmNotSet = true;
  while (alarmNotSet) {
    if (myTouch.dataAvailable()) {
      myTouch.read(); x = myTouch.getX(); y = myTouch.getY();
      // H knop
      if (x>=42 && x<=82 && y>=115 && y<=145) { drawRectFrame(42,115,82,145); aHours++; if(aHours>=24) aHours=0; myGLCD.setFont(SevenSegNumFont); myGLCD.setColor(0,255,0); myGLCD.printNumI(aHours,32,50,2,'0'); }
      // M knop
      if (x>=138 && x<=178 && y>=115 && y<=145) { drawRectFrame(138,115,178,145); aMinutes++; if(aMinutes>=60) aMinutes=0; myGLCD.setFont(SevenSegNumFont); myGLCD.setColor(0,255,0); myGLCD.printNumI(aMinutes,128,50,2,'0'); }
      // SET
      if (x>=215 && x<=303 && y>=60 && y<=80) { drawRectFrame(215,60,303,90); /* alarmString samenstellen */ myGLCD.setFont(BigFont); myGLCD.print("Alarm set for:", CENTER, 165); myGLCD.print(alarmString, CENTER, 191); }
      // CLEAR
      if (x>=215 && x<=303 && y>=115 && y<=145) { drawRectFrame(215,115,303,145); alarmString=""; myGLCD.setColor(0,0,0); myGLCD.fillRect(45,165,275,210); }
      // Menu
      if (x>=0 && x<=75 && y>=0 && y<=30) { alarmNotSet=false; currentPage='0'; myGLCD.clrScr(); drawHomeScreen(); }
    }
  }
}

Alarm activeren

Als alarmNotSet==false en alarmString == rtc.getTimeStr(): scherm wissen, volume 25, eerste nummer spelen, "ALARM" tonen, DISMISS knop. While alarmOn: wachten op touch op DISMISS → alarm stoppen, volume terug 15, startscherm.

if (alarmNotSet == false) {
  if (alarmString == rtc.getTimeStr()) {
    myGLCD.clrScr(); mp3.setVolume(25); mp3.playTrackByIndexNumber(1); delay(100);
    myGLCD.setFont(BigFont); myGLCD.setColor(255,255,255);
    myGLCD.print("ALARM", CENTER, 90); myGLCD.drawBitmap(127,10,65,64,AlarmButton);
    myGLCD.print(alarmString, CENTER, 114);
    myGLCD.drawRoundRect(94,146,226,170); myGLCD.print("DISMISS", CENTER, 150);
    boolean alarmOn = true;
    while (alarmOn) {
      if (myTouch.dataAvailable()) {
        myTouch.read(); x = myTouch.getX(); y = myTouch.getY();
        if (x>=94 && x<=226 && y>=146 && y<=170) {
          drawRectFrame(94,146,226,170); alarmOn=false; alarmString=""; myGLCD.clrScr();
          mp3.stopPlayback(); delay(100); currentPage='0'; playStatus='0'; mp3.setVolume(15); drawHomeScreen();
        }
      }
    }
  }
}

Apparaat bouwen

Solidworks ontwerp. Aluminium bladmetaal: multi-tool zagen, buigen over bureau rand met klemmen/latten. Luidspreker gaten: patroon printen, boren. Zijkanten afsnijden, lijmpistool. Laken, electronics lijmen, achterkap bouten.

Complete broncode (met alle helper functies: drawHomeScreen, drawMusicPlayerScreen, drawFrame, drawRectFrame, drawUnderline, drawVolume, drawTrackBar, printClock, drawColon, drawHomeClock) staat aan het einde van de originele tutorial.

Veel bouwplezier! Vragen? Reacties hieronder.