myble: Kom igång med p5.ble.js och Arduino Nano 33 BLE

Välkommen till myble: en innovativ plattform för att kombinera kraften i Bluetooth Low Energy (BLE) med den intuitiva kodningsmiljön i p5.js och hardware-funktionaliteten från Arduino Nano 33 BLE. I denna artikel kommer du att lära dig hur du kan skapa interaktiva applikationer som kan styra LED-lampor och reagera på knapptryckningar genom att använda BLE-teknik. Vi kommer att gå igenom varje steg i processen för att säkerställa att alla har möjlighet att förstå och implementera teknologin, oavsett erfarenhet av programmering eller elektronik.

Att använda p5.ble.js och Arduino Nano 33 BLE är en spännande resa mot att utforska interaktivitet och skapande. Vi kommer att dyka ner i detaljer om hur dessa verktyg arbetar tillsammans och hur du kan konfigurera ditt system för att skapa fantastiska och funktionella projekt. Genom att avsluta den här guiden kommer du ha en grundlig förståelse för BLE-teknik och hur du kan använda dessa resurser för att bygga din egen applikation som finns i myble.

Introduktion

I denna guide kommer vi att utforska flera viktiga komponenter av att använda p5.ble.js tillsammans med Arduino Nano 33 BLE. Du kommer att lära dig om grunderna i BLE, hur man installerar nödvändiga bibliotek, hur man konfigurerar BLE-tjänster och karakteristik, och dessutom hur man skapar ett användargränssnitt med p5.js. Målet är att skapa en applikation där du kan styra LED-lampor och läsa knapptryckningar via en Bluetooth-anslutning. Denna programvara är perfekt för att bygga interaktiva installationsverktyg eller utbildningsmaterial som gör användaren nyfiken på teknologi.

Vad är p5.ble.js?

p5.ble.js är ett bibliotek utvecklat för att möjliggöra interaktion med Bluetooth Low Energy (BLE) enheter på ett enkelt och effektivt sätt. Med detta bibliotek kan användare enkelt kommunicera med olika BLE-enheter direkt från sin webbläsare genom att använda JavaScript. p5.ble.js är särskilt användbart för dem som arbetar med interaktiva konstverk eller prototyper, eftersom det integreras väl med p5.js, som är en fantastisk ram för kreativ programmering.

Genom att använda p5.ble.js kan utvecklare snabbt och enkelt bygga applikationer som kommunicerar med Arduino Nano 33 BLE och andra BLE-enheter. Det gör att vi kan läsa och skriva data metoder, hantera notifieringar och svara på händelser, vilket gör våra applikationer mer dynamiska och intressanta. Denna typ av teknik öppnar upp dörrar till kreativa möjligheter och får användaren att interagera på nya sätt.

Kom igång med Arduino Nano 33 BLE

För att komma igång med Arduino Nano 33 BLE, måste detta kort först förberedas för att kommunicera med BLE-enheter. Du behöver ha en dator med Arduino IDE installerad och även en Arduino Nano 33 BLE-enhet nära till hands.

Installera nödvändiga bibliotek

Innan du kan börja skriva koden till din myble app, är det viktigt att installera några nödvändiga bibliotek i din Arduino IDE. Öppna Arduino IDE och gå till Sketch > Include Library > Manage Libraries. Skriv in Arduino BLE i sökfältet och installera den senaste versionen av biblioteket.

När detta bibliotek är installerat, är du redo att börja konfigurera tjänster och karakteristik för din BLE-enhet. Det är också bra att se till att du har installerat p5.js och p5.ble.js i din webbutvecklingsmiljö, så att du kan skriva den front-end koden för att kommunicera med din Arduino.

Konfigurera BLE-tjänster och karakteristik

Nästa steg i processen är att konfigurera BLE-tjänster och karakteristik på din Arduino Nano 33 BLE. Tjänster är som en samling av karakteristik, där varje karakteristik har specifika funktioner och egenskaper. Du kan tänka på tjänster som olika typer av delar som din applikation arbetar med. Till exempel, en tjänst kan vara kopplad till att styra en LED-lampa, medan en annan kan vara kopplad till att läsa knapptryck.

För att skapa en tjänst och karaktäristik i din kod, använder du följande exempel:

#include <ArduinoBLE.h>

BLEService ledService("12345678-1234-1234-1234-123456789abc");
BLEByteCharacteristic ledCharacteristic("12345678-1234-1234-1234-123456789abc", BLERead | BLEWrite);

Denna kod skapar en BLE-service med en specifik UUID och en karakteristik som kan läsas och skrivas till. När detta är konfigurerat i din Arduino Nano 33 BLE, är vi klara för att skapa användargränssnittet med p5.js.

Skapa användargränssnittet med p5.js

Att skapa ett användargränssnitt i p5.js är både enkelt och roligt. Det ger dig möjlighet att bygga visuella element som användaren kan interagera med. Istället för att bara ha en textbaserad kommunikation, kan du nu använda knappar, sliders, och animeringar. Låt oss bygga ett grundläggande användargränssnitt med två knappar, en för att ansluta till en BLE-enhet, och en annan för att växla ett LED-ljus.

Ett enkelt p5.js-exempel kan se ut så här:

let connectButton;
let ledButton;

function setup() {
    createCanvas(400, 200);
    connectButton = createButton("Anslut till BLE");
    connectButton.mousePressed(connect);
    ledButton = createButton("Växla LED");
    ledButton.mousePressed(toggleLED);
}

function draw() {
    background(220);
    text("Tryck på knappen för att ansluta till LED!", 10, 30);
}

Genom att använda knappen som vi har skapat kan användare enkelt trycka på för att ansluta till sin enhet och växla LED-ljuset. Vi kommer att koppla dessa knappar till funktionerna som definierar beteendet för anslutning och LED-växling.

Ansluta till en BLE-enhet

Nu när vi har vårt användargränssnitt, måste vi implementera anslutningslogiken som låter oss söka efter och ansluta till BLE-enheter i närheten. Vi kommer att använda följande funktioner för att uppnå detta. Vi definierar en connect-funktion för att starta en BLE-skanning och sedan ansluta till en vald enhet:

function connect() {
    // Starta scanningen efter BLE-enheter
    BLE.scan([], true, deviceFound, 100);
}

function deviceFound(device) {
    // Här kan du lägga till logik för att välja en enhet och ansluta
    BLE.connect(device);
}

Denna kod skapar en koppling till en BLE-enhet när den hittas. Det är viktigt att ha en metod för att hantera eventuella fel vid anslutningen och informera användaren om statusen. Till exempel, vi kan ge feedback om enheten är ansluten framgångsrikt eller om det har misslyckats.

Hantera knapptryckningar

Nu som vi har vår anslutning etablerad, måste vi implementera logik för att hantera knapptryckningar. Genom att använda BLE.read() och BLE.write() kan vi hämta data från karaktäristiken när knappen trycks. Här är ett exempel på hur vi kan göra detta:

function toggleLED() {
    let ledState = ledCharacteristic.value;
    ledCharacteristic.write(ledState === 1 ? 0 : 1);
}

När knappen trycks, kommer toggleLED-funktionen att läsa det aktuella tillståndet av LED-ljuset och växla det mellan av och på. Det är en enkel och effektiv metod för att hantera interaktioner i realtid.

Växla LED-ljuset

I den tidigare funktionen har vi hanterat logiken för att växla LED-ljuset. Men låt oss nu återkoppla till hårdvaran och styra LED-ljuset på din Arduino Nano 33 BLE. Vi behöver se till att när knappen trycks på appen, reflekteras det till LED-ljuset kopplat till vår enhet:

ledCharacteristic.write(ledState);

Detta kommando låter oss skriva värde till LED-karakteristiken och styra dess tillstånd direkt genom knappen i vår app. Återigen, använd feedback för att meddela användaren om allt fungerar som förväntat, eller om det uppstod ett problem.

Visualisera interaktioner på skärmen

För att förbättra användarupplevelsen ännu mer, vill vi visualisera statusen för vår interaktion på skärmen. Vi kan använda p5.js för att rita på canvasen och ändra färgen på en rektangel baserat på statusen för LED-ljuset:

function draw() {
    background(220);
    if (ledCharacteristic.value) {
        fill(0, 255, 0); // Grön för på
    } else {
        fill(255, 0, 0); // Röd för av
    }
    rect(50, 50, 300, 100);
}

Denna kod kommer att rita en rektangel som ändrar färg beroende på LED-ljuset status. Detta ger tydlig feedback till användaren och gör det lättare att förstå vad som händer i applikationen.

Sammanfattning

Vi har nu täckt grunderna för att skapa en applikation med p5.ble.js och Arduino Nano 33 BLE som låter oss styra LED-ljus och hantera knapptryckningar genom en intuitiv användargränssnitt. Genom att kombinera BLE-teknik med kreativ programmering får vi möjlighet att skapa interaktiva och kreativa projekt som fångar användarens intresse.

Genom att följa denna guide har du nu förstått hur man bygger en grundläggande applikation för att arbeta med Bluetooth Low Energy och hur man skapar ett användargränssnitt med p5.js. Det kan fungera som grund för många fler projekt och utforskningar inom programmering och elektronik. Vi hoppas att du är inspirerad och redo att skapa med ditt nya kunnande!

Ytterligare resurser

För att fortsätta din resa med myble, p5.ble.js, och Arduino Nano 33 BLE, kolla in följande resurser:

• p5.js officiella webbplats
• Arduino BLE-dokumentation
• p5.ble.js GitHub-repo
• Arduino Nano 33 BLE tutorialer

Lycka till med dina framtida projekt och kom ihåg, skapa och ha kul med teknik! Använd myble som din guide för att dyka ännu djupare in i världen av BLE-applikationer.

Tack för att du läste vår artikel, du kan se alla artiklar i våra webbkartor eller i Sitemaps

Tyckte du att den här artikeln var användbar? myble: Kom igång med p5.ble.js och Arduino Nano 33 BLE Du kan se mer här NanoPi.