Étape 6: Graphique des données à l’aide de Processing.js
(Important ! Vous devez remplacer YOUR_NAMESPACE et YOUR_PUBLIC_KEY dans le code ci-dessous avec ceux qui vous sont affectées lorsque vous vous connectez à SensorMonkey)
--------------------------------------------------------------------------------
< ! DOCTYPE html >
< html >
< tête >
< titre > lecteur une page Web en temps réel en utilisant Arduino, SensorMonkey et 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 = « traitement-1.3.6.js » >< / script >
< style type = « text/css » >
.capteur-nom {}
text-align : center ;
Width : 300px ;
}
{de toile
border : 1px solid grey ;
}
< / style >
< / head >
< onload corps = "setTimeout (lancer, 100);" >
< div class = « nom du capteur » > accéléromètre X < / div >
< toile traitement-des sources de données = « Graph.pde » id = « AccelX » >< / toile >
< div class = « nom du capteur » > accéléromètre Y < / div >
< toile traitement-des sources de données = « Graph.pde » id = « AccelY » >< / toile >
< div class = « nom du capteur » > accéléromètre Z < / div >
< toile traitement-des sources de données = « Graph.pde » id = « AccelZ » >< / toile >
< script type = « text/javascript » >
fonction run() {}
var accelXGraph = Processing.getInstanceById ("AccelX") ;
var accelYGraph = Processing.getInstanceById ("AccelY") ;
var accelZGraph = Processing.getInstanceById ("AccelZ") ;
accelXGraph.setColor (255, 0, 0, 100) ; Rouge.
accelYGraph.setColor (0, 128, 0, 100) ; Vert.
accelZGraph.setColor (0, 0, 255, 100) ; Bleu.
// 1. Se connecter à SensorMonkey
// 2. Rejoignez l’espace de noms
// 3. S’abonner au flux de données
// 4. Écouter les événements « publier » et « bulkPublish »
var client = new SensorMonkey.Client ("http://sensormonkey.eeng.nuim.ie") ;
client.on ("se connecter", function() {}
client.joinNamespace ("YOUR_NAMESPACE", "YOUR_PUBLIC_KEY", function (e) {}
Si (e) {}
Alert ("Impossible de rejoindre l’espace de noms:" + e) ;
retour ;
}
client.subscribeToStream ("/ public/mon Arduino", function (e) {}
Si (e) {}
Alert ("n’a pas pu s’abonner au flux de données:" + e) ;
retour ;
}
client.on ("publier", function (nom, champs) {}
Si (nom === "/ public/mon Arduino") {}
accelXGraph.update (champs ["accéléromètre X"]) ;
accelYGraph.update (champs ["accéléromètre Y"]) ;
accelZGraph.update (champs [« Z accéléromètre"]) ;
}
} );
client.on ("bulkPublish", function (nom, champs) {}
Si (nom === "/ public/mon Arduino") {}
pour (var i = 0, len = fields ["accéléromètre X"] .length; i < len; i ++) {
accelXGraph.update (champs ["accéléromètre X"] [i]) ;
accelYGraph.update (champs ["accéléromètre Y"] [i]) ;
accelZGraph.update (champs ["accéléromètre Z"] [i]) ;
}
}
} );
} );
} );
client.on ("déconnecter", function() {}
Alert ("Client a été déconnecté!") ;
} );
} );
}
< /script >
< / body >
< / html >
--------------------------------------------------------------------------------
Sans entrer dans trop de détails (vous pouvez trouver plus d’informations sur l’API du client JavaScript ici) le workflow de base est la suivante :
-Client import
-Se connecter à SensorMonkey
-Rejoindre l’espace de noms
-S’abonner au flux de données
-Écouter « publier » et « bulkPublish » événements
Pour le graphique de données, j’utilise le croquis Processing.js suivant (enregistrer ceci dans un fichier appelé Graph.pde et placez-le dans le même répertoire que la page Web ci-dessus) :
--------------------------------------------------------------------------------
xPos int = 0 ; Coordonnée horizontale utilisée pour dessiner le prochain point de données.
yMin int = 0 ; Valeur minimale des données attendues.
int yMax = 1023 ; Valeur maximale des données attendues.
c de couleur ; Couleur de contour utilisée pour dessiner le graphique.
Définit la couleur utilisée pour dessiner le graphique.
void setColor (int r, g int, int b, int a) {}
c = couleur (r, g, b, a) ;
}
void setup() {}
Size (300, 200) ;
frameRate (50) ;
setColor (255, 0, 0, 100) ;
drawGrid() ;
}
void draw() {} / / Empty function draw().
void drawGrid() {}
int h = hauteur ;
int w = largeur ;
arrière-plan (255) ;
accident vasculaire cérébral (127, 127, 127, 127) ;
Tracer des lignes horizontales.
ligne (0, h / 4, w, h / 4) ;
ligne (0, h / 2, w, h / 2) ;
ligne (0, h * 3 / 4, w, h * 3 / 4) ;
Tracer des lignes verticales.
ligne (w / 4, 0, w / 4 h) ;
ligne (w / 2, 0, w / 2, h) ;
ligne (w * 3 / 4, 0, w * 3 / 4 h) ;
Dessiner des étiquettes.
remplir (0) ;
texte (str (yMin), 5, h - 5) ;
texte (str (yMax), 5, 12) ;
}
Sub update (données float) {}
Quand nous atteignons le bord de l’écran, enrouler autour du début.
Si (xPos > = largeur) {}
PosX = 0 ;
drawGrid() ;
}
Graphique du point de données et incrémenter la coordonnée horizontale.
données = carte (données, yMin, yMax, hauteur 0,) ;
accident vasculaire cérébral (c) ;
ligne (xPos, hauteur, xPos, hauteur - données) ;
xPos ++ ;
}
--------------------------------------------------------------------------------
Dans votre cas, selon l’ou les capteurs qui vous sont transmises en continu, vous devrez peut-être plus ou moins graphiques dans votre page Web. Vous pouvez modifier le fichier Graph.pde si vous avez besoin augmenter/diminuer la taille des graphiques, la plage de valeurs de données qui peut être tracée, etc, la cadence. N’oubliez pas d’inclure le fichier Graph.pde une fois pour chaque variable que vous voulez tracer (à l’intérieur d’un élément < canvas >) et nommez-les en conséquence (par exemple < toile traitement-des sources de données = « Graph.pde » id = « TemperatureSensor » >< / toile >). Ensuite, vous avez juste besoin d’obtenir une référence à la courbe (obtenue en appelant la méthode Processing.getInstanceById() ) et utiliser la fonction update() pour tracer de nouveaux points de données reçues dans le « publier » et « bulkPublish » des gestionnaires d’événements.
C’est tout! J’ai maintenant un accéléromètre conduire une page Web en temps réel en utilisant Arduino, SensorMonkey et Processing.js. Je peux héberger la page Web sur un serveur Web public et orienter les gens pour voir le lien sur n’importe quel appareil avec un navigateur compatible HTML5. Merci pour la lecture et regarder dehors pour instructables supplémentaires montrant les cas d’usage plus avancées et les projets dans un avenir proche.
