Kör en webbsida i realtid med hjälp av Arduino, SensorMonkey och Processing.js (6 / 6 steg)

Steg 6: Rita grafer av Data med hjälp av Processing.js

i den sista (och bästa!) delen av denna tutorial, jag ska skapa en enkel webbsida för att visa utdata från min Arduino är nu tom live över Internet med SensorMonkey (jag har laddat ner senaste Processing.js biblioteket - 1.3.6 på i skrivande stund - och placerade den i samma katalog som webbsidan). Måste du redigera koden nedan att matcha variabler direktuppspelas av din Arduino (om du har kopierat min accelerometer setup exakt):

(Viktigt! Du måste ersätta YOUR_NAMESPACE och YOUR_PUBLIC_KEY i koden nedan med de som har tilldelats till dig när du loggar in till SensorMonkey)

--------------------------------------------------------------------------------
<! DOCTYPE html >
< html >
< head >
< title > driva en webpage i realtid med hjälp av Arduino, SensorMonkey och Processing.js < / title >
< script type = "text/javascript" src = "http://sensormonkey.eeng.nuim.ie/socket.io/socket.io.js" >< / script >
< script type = "text/javascript" src = "http://sensormonkey.eeng.nuim.ie/js/client.min.js" >< / script >
< script type = "text/javascript" src = "bearbetning-1.3.6.js" >< / script >
< style type = "text/css" >
.sensor-name {
text-align: center;
bredd: 300px;
}
canvas {
Border: 1px solid grey;
}
< / stil >
< / head >
< body onload = "setTimeout (kör, 100);" >
< div class = "sensor-namn" > Accelerometer X < / div >
< canvas bearbetning-datakällor = "Graph.pde" id = "AccelX" >< / canvas >
< div class = "sensor-namn" > Accelerometer Y < / div >
< canvas bearbetning-datakällor = "Graph.pde" id = "AccelY" >< / canvas >
< div class = "sensor-namn" > Accelerometer Z < / div >
< canvas bearbetning-datakällor = "Graph.pde" id = "AccelZ" >< / canvas >
< script type = "text/javascript" >
funktionen run() {
var accelXGraph = Processing.getInstanceById ("AccelX");
var accelYGraph = Processing.getInstanceById ("AccelY");
var accelZGraph = Processing.getInstanceById ("AccelZ");

accelXGraph.setColor (255, 0, 0, 100); Röd.
accelYGraph.setColor (0, 128, 0, 100); Grön.
accelZGraph.setColor (0, 0, 255, 100); Blå.

// 1. Ansluta till SensorMonkey
// 2. Gå med i namnområdet
// 3. Prenumerera på ström
// 4. Lyssna på "publicera" och "bulkPublish" händelser

var kund = nya SensorMonkey.Client ("http://sensormonkey.eeng.nuim.ie");
client.on ("connect", function() {
client.joinNamespace ("YOUR_NAMESPACE", "YOUR_PUBLIC_KEY", funktion (e) {
om (e) {
Alert ("kunde inte ansluta namnområde:" + e);
hemkomst.
}

client.subscribeToStream ("/ public/min Arduino", fungera (e) {
om (e) {
Alert ("Det gick inte att prenumerera på ström:" + e);
hemkomst.
}

client.on ("publicera", funktion (namn, fält) {
om (namn === "/ public/min Arduino") {
accelXGraph.update (fält ["Accelerometer X"]);
accelYGraph.update (fält ["Accelerometer Y"]);
accelZGraph.update (fält ['Accelerometer Z']);
}
} );

client.on ("bulkPublish", funktion (namn, fält) {
om (namn === "/ public/min Arduino") {
för (var jag = 0, len = fält ["Accelerometer X"] Value; i < len; i ++) {
accelXGraph.update (fält ["Accelerometer X"] [i]);
accelYGraph.update (fält ["Accelerometer Y"] [i]);
accelZGraph.update (fält ["Accelerometer Z"] [i]);
}
}
} );
} );
} );

client.on ("koppla", function() {
Alert ("klienten har kopplats!");
} );
} );
}
< / script >
< / body >
< / html >
--------------------------------------------------------------------------------

Utan att gå in alltför detaljerat (du kan hitta mer information om JavaScript klienten API här) grundläggande arbetsflödet är följande:

-Import-klient
-Anslut till SensorMonkey
-Gå med namnområde
-Prenumerera på ström
-Lyssna på "publicera" och "bulkPublish" händelser

För att Diagramdata, använder jag följande Processing.js skissen (spara detta till en fil kallad Graph.pde och placera den i samma katalog som webpage ovan):

--------------------------------------------------------------------------------
int xPos = 0; Vågräta koordinaten används för att rita nästa datapunkten.
int yMin = 0; Lägsta förväntade datavärde.
int yMax = 1023; Maximala förväntade datavärde.
färg c; Linjefärg används för att rita grafen.

Anger stroke färg används för att rita grafen.
void setColor (int r, int g, int b, int en) {
c = färg (r, g, b, en);
}

void setup() {
storlek (300, 200);
frameRate (50);
setColor (255, 0, 0, 100);
drawGrid();
}

Annullera draw() {} / / tömma draw() funktion.

void drawGrid() {
int h = höjd;
int w = bredd;

bakgrund (255);

stroke (127 127, 127, 127);

Rita horisontella linjer.
linje (0, h / 4, w, h / 4);
linje (0, h / 2, w, h / 2);
linje (0, h * 3 / 4, Wennerholm, * 3 / 4);

Rita vertikala linjer.
linje (w / 4, 0, w / 4, h);
linje (w / 2, 0, w / 2, h);
linje (w * 3 / 4, 0, w * 3 / 4, h);

Rita etiketter.
fylla (0);
text (str (yMin), 5, h - 5);
text (str (yMax), 5, 12);
}

{Ogiltig uppdatering (float data)
När vi når kanten av skärmen, vira runt till början.
om (xPos > = bredd) {
xPos = 0;
drawGrid();
}

Diagram datapunkten och öka den vågräta koordinaten.
data = karta (data, yMin, yMax, 0, höjd);
stroke (c).
linje (xPos, höjd, xPos, höjd - data);
xPos ++;
}
--------------------------------------------------------------------------------

I ditt fall, beroende på givare som du direktuppspelar, kanske du behöver mer eller mindre grafer på din hemsida. Om du behöver öka/minska storleken på diagrammen, spänna av datavärden som kan ritas, bildfrekvens etc kan du redigera filen Graph.pde. Kom bara ihåg att inkludera Graph.pde filen en gång för varje variabel som du vill rita (inuti en < duk > element) och namnge dem därefter (e.g. < canvas bearbetning-datakällor = "Graph.pde" id = "TemperatureSensor" >< / canvas >). Sedan behöver du bara få en hänvisning till grafen (erhålls genom att anropa metoden Processing.getInstanceById() ) och Använd funktionen update() att rita nya datapunkter fick i "publicera" och "bulkPublish" händelsehanterare.

Det är det! Jag har nu en accelerometer som driver en webbsida i realtid med hjälp av Arduino, SensorMonkey och Processing.js. Jag kan vara värd för webbsidan på en offentlig webbserver och direkt människor att Visa länken på alla enheter med en HTML5 kompatibel webbläsare. Tack för läsning och håll utkik efter ytterligare instructables visar mer avancerade användningsfall och projekt inom en snar framtid.