Learning Lab Environnements Connectés - Contributions de l’utilisateur [fr]

Partie technique Data painting

2015-12-11T21:18:33Z

Lucas Ribeiro :

== Partie Electronique ==
Cette partie a pour but d'expliciter la réalisation technique du projet. C'est en d'autre mot la recette à suivre pour construire le projet
=== Matériel utilisé ===
* Une carte Arduino Yun
* Un capteur de température et d'humidité HTU21D-F
* Un module GPS avec son shield : EM406
* Un écran LCD-Grove et son shield adaptable à la carte Arduino
* Une batterie d'alimentation 5v 6000mAh Leitz
Voici les différents éléments en image :
[[Fichier:Arduino_yun.jpg|200px|thumb|left|carte arduino utilisée]]
[[Fichier:Capteur_temp.jpg|200px|thumb|right|capteur de température]]
[[Fichier:Gps.jpg|200px|thumb|centre|Module GPS avec son shield]]
[[Fichier:Shield_grove_arduino.jpg|200px|thumb|left|Shield grove pour arduino]]
[[Fichier:grove-LCD.jpg|200px|thumb|right|Ecran LCD]]
[[Fichier:Batterie-leitz.png|200px|thumb|centre|Batterie d'alimentation]]
 
 
 
Voici les liens vers les différentes datasheet des composants : 
[https://www.arduino.cc/en/Main/ArduinoBoardYun présentation Arduino Yun ] 
[https://www.sparkfun.com/datasheets/GPS/EM-406A_User_Manual.PDF datasheet GPS] 
[https://www.adafruit.com/datasheets/1899_HTU21D.pdf datasheet capteur de température/humidité] 
[http://www.seeedstudio.com/wiki/images/0/03/JHD1214Y_YG_1.0.pdf datassent écran LCD] 

=== Branchements ===

Pour commencer à brancher le système il est nécessaire de comprendre les différents moyens de communications des capteurs avec la carte. 
Pour commencer, parlons du GPS. Le GPS utilise la liaison série pour communiquer (TX/RX). Le shield a deux fonction de communication : UART et DLINE. Cette différence n'est qu'une variation des pins utilisées. Nous avons fonctionné, lors de notre projet, en mode DLINE. '''Attention !''' Il serait donc logique de connecter les pins 2 et 3 sur les 0 et 1 de la carte. Cependant le code créée utilise des interruptions et la carte arduino yun ne supporte pas les interruptions sur la pin 0. Il faut donc l'associer à la pin 10.

== Partie Processing ==
Une fois la donnée récupérée, elle est stockée sur la carte micro SD dans un fichier csv avec ce formattage :
<pre>
latitude,longitude,altitude,température,humidité <--- 1ère mesure
latitude,longitude,altitude,température,humidité <--- 2ème mesure
latitude,longitude,altitude,température,humidité <--- 3ème mesure
latitude,longitude,altitude,température,humidité <--- 4ème mesure
...
</pre>
voici un exemple de dix mesures captées avec le dispositif :
<pre>
45.451343,4.387325,516.40,16.07,43.03
45.451343,4.387325,516.40,16.04,43.47
45.451347,4.387387,515.40,15.75,44.35
45.451347,4.387387,515.40,15.68,44.58
45.451339,4.387518,515.40,15.48,44.78
45.451351,4.387597,511.60,15.12,45.52
45.451351,4.387597,511.60,14.98,46.01
45.451366,4.387747,513.10,14.96,46.49
45.451366,4.387747,513.10,14.95,46.91
45.451389,4.387815,515.40,14.95,46.83
45.451389,4.387815,515.40,14.98,46.78
</pre>
Le fichier obtenu (ici "data.csv") est par la suite importé sur processing et interprété en points de différentes taille et couleur avec le code suivant :
<pre>
Table table;
float[] latitude;
float[] longitude;
int[] altitude;
int[] temperature;
float[] x;
float[] y;

//-------------------------------------------------------------------------------------------------------------
//--- Données à modifier pour adapter le tracé
int maxMapAlti = 30; //diametre des cercles en fonction de l'altitude (en px)
int decalage = 250; //taille des bordures de la zone de rendu (en px)
//-------------------------------------------------------------------------------------------------------------

void setup() {
size(displayWidth, displayHeight);
frameRate(60);
table = loadTable("datas.csv");
int nbreLignes = table.getRowCount();

latitude = new float[nbreLignes];
longitude = new float[nbreLignes];
altitude = new int[nbreLignes];
temperature = new int[nbreLignes];

for (int i=0; i<=table.getRowCount()-1; i++) {
latitude[i] = table.getRow(i).getFloat(0);
longitude[i] = table.getRow(i).getFloat(1);
altitude[i] = table.getRow(i).getInt(2);
temperature[i] = table.getRow(i).getInt(3);
}

//-------------------------------------------------------------------------------------------------------------
//--- Formule de transformation de coordonées polaires en coordonées x, y à l'échelle du monde
//-------------------------------------------------------------------------------------------------------------

float[] xWorld = new float[nbreLignes];
float[] yWorld = new float[nbreLignes];
for (int i=0; i<=table.getRowCount()-1; i++) {
xWorld[i] = (longitude[i]+180)*((width-(2*decalage))/360);
float latRad = latitude[i]*PI/180;
float mercN = log(tan((PI/4)+(latRad/2)));
yWorld[i] = ((height-(2*decalage)/2))-((width-(2*decalage))*mercN/(2*PI));
}

//-------------------------------------------------------------------------------------------------------------
//--- Mise à l'échelle des coordonnées pour qu'elle apparaissent à l'échelle de la fenêtre de visualisation
//-------------------------------------------------------------------------------------------------------------

float xMax = max(xWorld);
float xMin = min(xWorld);
float yMax = max(yWorld);
float yMin = min(yWorld);
float ratioGPS = (xMax - xMin) / (yMax - yMin);
float windowWidth = width-(2*decalage);
float windowHeight = height-(2*decalage);
float ratioWindow = windowWidth/windowHeight;

x = new float[nbreLignes];
y = new float[nbreLignes];
if (ratioGPS < ratioWindow) {
for (int i=0; i<=table.getRowCount()-1; i++) {
y[i] = map(yWorld[i], yMin, yMax, decalage, height-decalage);
x[i] = map(xWorld[i], xMin, xMax, decalage, ratioGPS*(height-decalage));
}
} else {
for (int i=0; i<=table.getRowCount()-1; i++) {
x[i] = map(xWorld[i], xMin, xMax, decalage, width-decalage);
y[i] = map(yWorld[i], yMin, yMax, decalage, (width-decalage)/ratioGPS);
}
}
}

//-------------------------------------------------------------------------------------------------------------
//--- Affichage du tracé
//-------------------------------------------------------------------------------------------------------------

int timer = 1;

void draw() {
//-------------------------------------------------------------------------------------------------------------
//--- Centrage des éléments
//-------------------------------------------------------------------------------------------------------------
translate(width/2-(max(x)-min(x))/2-decalage, height/2-(max(y)-min(y))/2-decalage);
colorMode(RGB, 255);
background(255);
colorMode(HSB, 100);

//-------------------------------------------------------------------------------------------------------------
//--- Lignes entre les points (mettre le timer à 2 pour que cela fonctionne)
//-------------------------------------------------------------------------------------------------------------

stroke(5);
for (int i=0; i<=timer-2; i++) {
stroke(map(temperature[i], 0, 30, 50, 100), 90, 90);
strokeWeight(5);
line(x[i], y[i], x[i+1], y[i+1]);
}

//-------------------------------------------------------------------------------------------------------------
//--- placement des points suivant les coordonées x, y, la température et l'altitude
//-------------------------------------------------------------------------------------------------------------

noStroke();
for (int i=0; i<=timer-1; i++) {
fill(map(temperature[i], 0, 30, 50, 100), 90, 90);
ellipse(x[i], y[i], map(altitude[i], 0, 800, 1, maxMapAlti), map(altitude[i], 0, 800, 1, maxMapAlti));
}

//-------------------------------------------------------------------------------------------------------------
//--- dégradé de couleurs pour la température
//-------------------------------------------------------------------------------------------------------------
/*
for (int i=0; i<=20; i++) {
fill(50+i*2.5, 100, 100);
rect(50+52*i, 50, 50, 25);
text(int(map(50+i*2.5,50,100,0,30)) + "°C",50+52*i, 49);
}
*/

//-------------------------------------------------------------------------------------------------------------
//--- Mise à jour du timer pour faire apparaitre tous les points jusqu'à la fin de l'animation
//-------------------------------------------------------------------------------------------------------------
//save("img"+timer+".png");
if (timer >= table.getRowCount()) {
timer = table.getRowCount();
} else {
timer++;
}
}
</pre>
[[Fichier:trace-processing.png|800px|vignette|centré|Exemple du tracé obtenu à partir des mesures et du code processing]]

== Partie Maquettage ==

[[Fichier:plan_maquette.jpg|thumb|left|Plan des différents étages de la maquette]]
Les différents composants électroniques étaient disposés sur une maquette découpé à la découpeuse laser sur du bois d'une épaisseur de 3mm. 
Voici les plans en version PDF : 
*[[File:Plan_maquette.pdf]] (bien vérifier que l'épaisseur du matériau corresponde pour que les pièces s’emboîtent)

Partie technique Data painting

2015-12-11T21:15:18Z

Lucas Ribeiro :

== Partie Electronique ==
Cette partie a pour but d'expliciter la réalisation technique du projet. C'est en d'autre mot la recette à suivre pour construire le projet
=== Matériel utilisé ===
* Une carte Arduino Yun
* Un capteur de température et d'humidité HTU21D-F
* Un module GPS avec son shield : EM406
* Un écran LCD-Grove et son shield adaptable à la carte Arduino
* Une batterie d'alimentation 5v 6000mAh Leitz
Voici les différents éléments en image :
[[Fichier:Arduino_yun.jpg|200px|thumb|left|carte arduino utilisée]]
[[Fichier:Capteur_temp.jpg|200px|thumb|right|capteur de température]]
[[Fichier:Gps.jpg|200px|thumb|centre|Module GPS avec son shield]]
[[Fichier:Shield_grove_arduino.jpg|200px|thumb|left|Shield grove pour arduino]]
[[Fichier:grove-LCD.jpg|200px|thumb|right|Ecran LCD]]
[[Fichier:Batterie-leitz.png|200px|thumb|centre|Batterie d'alimentation]]
 
 
 
Voici les liens vers les différentes datasheet des composants : 
[https://www.arduino.cc/en/Main/ArduinoBoardYun présentation Arduino Yun ] 
[https://www.sparkfun.com/datasheets/GPS/EM-406A_User_Manual.PDF datasheet GPS] 
[https://www.adafruit.com/datasheets/1899_HTU21D.pdf datasheet capteur de température/humidité] 
[http://www.seeedstudio.com/wiki/images/0/03/JHD1214Y_YG_1.0.pdf datassent écran LCD] 

=== Branchements ===

Pour commencer à brancher le système il est nécessaire de comprendre les différents moyens de communications des capteurs avec la carte. 
Pour commencer, parlons du GPS. Le GPS utilise la liaison série pour communiquer (TX/RX). Le shield a deux fonction de communication : UART et DLINE. Cette différence n'est qu'une variation des pins utilisées. Nous avons fonctionné, lors de notre projet, en mode DLINE. '''Attention !''' Il serait donc logique de connecter les pins 2 et 3 sur les 0 et 1 de la carte. Cependant le code créée utilise des interruptions et la carte arduino yun ne supporte pas les interruptions sur la pin 0. Il faut donc l'associer à la pin 10.

== Partie Processing ==
Une fois la donnée récupérée, elle est stockée sur la carte micro SD dans un fichier csv avec ce formattage :
<pre>
latitude,longitude,altitude,température,humidité <--- 1ère mesure
latitude,longitude,altitude,température,humidité <--- 2ème mesure
latitude,longitude,altitude,température,humidité <--- 3ème mesure
latitude,longitude,altitude,température,humidité <--- 4ème mesure
...
</pre>
voici un exemple de dix mesures captées avec le dispositif :
<pre>
45.451343,4.387325,516.40,16.07,43.03
45.451343,4.387325,516.40,16.04,43.47
45.451347,4.387387,515.40,15.75,44.35
45.451347,4.387387,515.40,15.68,44.58
45.451339,4.387518,515.40,15.48,44.78
45.451351,4.387597,511.60,15.12,45.52
45.451351,4.387597,511.60,14.98,46.01
45.451366,4.387747,513.10,14.96,46.49
45.451366,4.387747,513.10,14.95,46.91
45.451389,4.387815,515.40,14.95,46.83
45.451389,4.387815,515.40,14.98,46.78
</pre>
Le fichier obtenu (ici "data.csv") est par la suite importé sur processing et interprété en points de différentes taille et couleur avec le code suivant :
<pre>
Table table;
float[] latitude;
float[] longitude;
int[] altitude;
int[] temperature;
float[] x;
float[] y;

//-------------------------------------------------------------------------------------------------------------
//--- Données à modifier pour adapter le tracé
int maxMapAlti = 30; //diametre des cercles en fonction de l'altitude (en px)
int decalage = 250; //taille des bordures de la zone de rendu (en px)
//-------------------------------------------------------------------------------------------------------------

void setup() {
size(displayWidth, displayHeight);
frameRate(60);
table = loadTable("datas.csv");
int nbreLignes = table.getRowCount();

latitude = new float[nbreLignes];
longitude = new float[nbreLignes];
altitude = new int[nbreLignes];
temperature = new int[nbreLignes];

for (int i=0; i<=table.getRowCount()-1; i++) {
latitude[i] = table.getRow(i).getFloat(0);
longitude[i] = table.getRow(i).getFloat(1);
altitude[i] = table.getRow(i).getInt(2);
temperature[i] = table.getRow(i).getInt(3);
}

//-------------------------------------------------------------------------------------------------------------
//--- Formule de transformation de coordonées polaires en coordonées x, y à l'échelle du monde
//-------------------------------------------------------------------------------------------------------------

float[] xWorld = new float[nbreLignes];
float[] yWorld = new float[nbreLignes];
for (int i=0; i<=table.getRowCount()-1; i++) {
xWorld[i] = (longitude[i]+180)*((width-(2*decalage))/360);
float latRad = latitude[i]*PI/180;
float mercN = log(tan((PI/4)+(latRad/2)));
yWorld[i] = ((height-(2*decalage)/2))-((width-(2*decalage))*mercN/(2*PI));
}

//-------------------------------------------------------------------------------------------------------------
//--- Mise à l'échelle des coordonnées pour qu'elle apparaissent à l'échelle de la fenêtre de visualisation
//-------------------------------------------------------------------------------------------------------------

float xMax = max(xWorld);
float xMin = min(xWorld);
float yMax = max(yWorld);
float yMin = min(yWorld);
float ratioGPS = (xMax - xMin) / (yMax - yMin);
float windowWidth = width-(2*decalage);
float windowHeight = height-(2*decalage);
float ratioWindow = windowWidth/windowHeight;

x = new float[nbreLignes];
y = new float[nbreLignes];
if (ratioGPS < ratioWindow) {
for (int i=0; i<=table.getRowCount()-1; i++) {
y[i] = map(yWorld[i], yMin, yMax, decalage, height-decalage);
x[i] = map(xWorld[i], xMin, xMax, decalage, ratioGPS*(height-decalage));
}
} else {
for (int i=0; i<=table.getRowCount()-1; i++) {
x[i] = map(xWorld[i], xMin, xMax, decalage, width-decalage);
y[i] = map(yWorld[i], yMin, yMax, decalage, (width-decalage)/ratioGPS);
}
}
}

//-------------------------------------------------------------------------------------------------------------
//--- Affichage du tracé
//-------------------------------------------------------------------------------------------------------------

int timer = 1;

void draw() {
//-------------------------------------------------------------------------------------------------------------
//--- Centrage des éléments
//-------------------------------------------------------------------------------------------------------------
translate(width/2-(max(x)-min(x))/2-decalage, height/2-(max(y)-min(y))/2-decalage);
colorMode(RGB, 255);
background(255);
colorMode(HSB, 100);

//-------------------------------------------------------------------------------------------------------------
//--- Lignes entre les points (mettre le timer à 2 pour que cela fonctionne)
//-------------------------------------------------------------------------------------------------------------

stroke(5);
for (int i=0; i<=timer-2; i++) {
stroke(map(temperature[i], 0, 30, 50, 100), 90, 90);
strokeWeight(5);
line(x[i], y[i], x[i+1], y[i+1]);
}

//-------------------------------------------------------------------------------------------------------------
//--- placement des points suivant les coordonées x, y, la température et l'altitude
//-------------------------------------------------------------------------------------------------------------

noStroke();
for (int i=0; i<=timer-1; i++) {
fill(map(temperature[i], 0, 30, 50, 100), 90, 90);
ellipse(x[i], y[i], map(altitude[i], 0, 800, 1, maxMapAlti), map(altitude[i], 0, 800, 1, maxMapAlti));
}

//-------------------------------------------------------------------------------------------------------------
//--- dégradé de couleurs pour la température
//-------------------------------------------------------------------------------------------------------------
/*
for (int i=0; i<=20; i++) {
fill(50+i*2.5, 100, 100);
rect(50+52*i, 50, 50, 25);
text(int(map(50+i*2.5,50,100,0,30)) + "°C",50+52*i, 49);
}
*/

//-------------------------------------------------------------------------------------------------------------
//--- Mise à jour du timer pour faire apparaitre tous les points jusqu'à la fin de l'animation
//-------------------------------------------------------------------------------------------------------------
//save("img"+timer+".png");
if (timer >= table.getRowCount()) {
timer = table.getRowCount();
} else {
timer++;
}
}
</pre>
[[Fichier:trace-processing.png|vignette|centré|Exemple du tracé obtenu à partir des mesures et du code processing]]

== Partie Maquettage ==

[[Fichier:plan_maquette.jpg|thumb|left|Plan des différents étages de la maquette]]
Les différents composants électroniques étaient disposés sur une maquette découpé à la découpeuse laser sur du bois d'une épaisseur de 3mm. 
Voici les plans en version PDF : 
*[[File:Plan_maquette.pdf]] (bien vérifier que l'épaisseur du matériau corresponde pour que les pièces s’emboîtent)

Partie technique Data painting

2015-12-11T21:11:19Z

Lucas Ribeiro :

== Partie Electronique ==
Cette partie a pour but d'expliciter la réalisation technique du projet. C'est en d'autre mot la recette à suivre pour construire le projet
=== Matériel utilisé ===
* Une carte Arduino Yun
* Un capteur de température et d'humidité HTU21D-F
* Un module GPS avec son shield : EM406
* Un écran LCD-Grove et son shield adaptable à la carte Arduino
* Une batterie d'alimentation 5v 6000mAh Leitz
Voici les différents éléments en image :
[[Fichier:Arduino_yun.jpg|200px|thumb|left|carte arduino utilisée]]
[[Fichier:Capteur_temp.jpg|200px|thumb|right|capteur de température]]
[[Fichier:Gps.jpg|200px|thumb|centre|Module GPS avec son shield]]
[[Fichier:Shield_grove_arduino.jpg|200px|thumb|left|Shield grove pour arduino]]
[[Fichier:grove-LCD.jpg|200px|thumb|right|Ecran LCD]]
[[Fichier:Batterie-leitz.png|200px|thumb|centre|Batterie d'alimentation]]
 
 
 
Voici les liens vers les différentes datasheet des composants : 
[https://www.arduino.cc/en/Main/ArduinoBoardYun présentation Arduino Yun ] 
[https://www.sparkfun.com/datasheets/GPS/EM-406A_User_Manual.PDF datasheet GPS] 
[https://www.adafruit.com/datasheets/1899_HTU21D.pdf datasheet capteur de température/humidité] 
[http://www.seeedstudio.com/wiki/images/0/03/JHD1214Y_YG_1.0.pdf datassent écran LCD] 

=== Branchements ===

Pour commencer à brancher le système il est nécessaire de comprendre les différents moyens de communications des capteurs avec la carte. 
Pour commencer, parlons du GPS. Le GPS utilise la liaison série pour communiquer (TX/RX). Le shield a deux fonction de communication : UART et DLINE. Cette différence n'est qu'une variation des pins utilisées. Nous avons fonctionné, lors de notre projet, en mode DLINE. '''Attention !''' Il serait donc logique de connecter les pins 2 et 3 sur les 0 et 1 de la carte. Cependant le code créée utilise des interruptions et la carte arduino yun ne supporte pas les interruptions sur la pin 0. Il faut donc l'associer à la pin 10.

== Partie Processing ==
Une fois la donnée récupérée, elle est stockée sur la carte micro SD dans un fichier csv avec ce formattage :
<pre>
latitude,longitude,altitude,température,humidité <--- 1ère mesure
latitude,longitude,altitude,température,humidité <--- 2ème mesure
latitude,longitude,altitude,température,humidité <--- 3ème mesure
latitude,longitude,altitude,température,humidité <--- 4ème mesure
...
</pre>
voici un exemple de dix mesures captées avec le dispositif :
<pre>
45.451343,4.387325,516.40,16.07,43.03
45.451343,4.387325,516.40,16.04,43.47
45.451347,4.387387,515.40,15.75,44.35
45.451347,4.387387,515.40,15.68,44.58
45.451339,4.387518,515.40,15.48,44.78
45.451351,4.387597,511.60,15.12,45.52
45.451351,4.387597,511.60,14.98,46.01
45.451366,4.387747,513.10,14.96,46.49
45.451366,4.387747,513.10,14.95,46.91
45.451389,4.387815,515.40,14.95,46.83
45.451389,4.387815,515.40,14.98,46.78
</pre>
Le fichier obtenu (ici "data.csv") est par la suite importé sur processing et interprété en points de différentes taille et couleur avec le code suivant :
<pre>
Table table;
float[] latitude;
float[] longitude;
int[] altitude;
int[] temperature;
float[] x;
float[] y;

//-------------------------------------------------------------------------------------------------------------
//--- Données à modifier pour adapter le tracé
int maxMapAlti = 30; //diametre des cercles en fonction de l'altitude (en px)
int decalage = 250; //taille des bordures de la zone de rendu (en px)
//-------------------------------------------------------------------------------------------------------------

void setup() {
size(displayWidth, displayHeight);
frameRate(60);
table = loadTable("datas.csv");
int nbreLignes = table.getRowCount();

latitude = new float[nbreLignes];
longitude = new float[nbreLignes];
altitude = new int[nbreLignes];
temperature = new int[nbreLignes];

for (int i=0; i<=table.getRowCount()-1; i++) {
latitude[i] = table.getRow(i).getFloat(0);
longitude[i] = table.getRow(i).getFloat(1);
altitude[i] = table.getRow(i).getInt(2);
temperature[i] = table.getRow(i).getInt(3);
}

//-------------------------------------------------------------------------------------------------------------
//--- Formule de transformation de coordonées polaires en coordonées x, y à l'échelle du monde
//-------------------------------------------------------------------------------------------------------------

float[] xWorld = new float[nbreLignes];
float[] yWorld = new float[nbreLignes];
for (int i=0; i<=table.getRowCount()-1; i++) {
xWorld[i] = (longitude[i]+180)*((width-(2*decalage))/360);
float latRad = latitude[i]*PI/180;
float mercN = log(tan((PI/4)+(latRad/2)));
yWorld[i] = ((height-(2*decalage)/2))-((width-(2*decalage))*mercN/(2*PI));
}

//-------------------------------------------------------------------------------------------------------------
//--- Mise à l'échelle des coordonnées pour qu'elle apparaissent à l'échelle de la fenêtre de visualisation
//-------------------------------------------------------------------------------------------------------------

float xMax = max(xWorld);
float xMin = min(xWorld);
float yMax = max(yWorld);
float yMin = min(yWorld);
float ratioGPS = (xMax - xMin) / (yMax - yMin);
float windowWidth = width-(2*decalage);
float windowHeight = height-(2*decalage);
float ratioWindow = windowWidth/windowHeight;

x = new float[nbreLignes];
y = new float[nbreLignes];
if (ratioGPS < ratioWindow) {
for (int i=0; i<=table.getRowCount()-1; i++) {
y[i] = map(yWorld[i], yMin, yMax, decalage, height-decalage);
x[i] = map(xWorld[i], xMin, xMax, decalage, ratioGPS*(height-decalage));
}
} else {
for (int i=0; i<=table.getRowCount()-1; i++) {
x[i] = map(xWorld[i], xMin, xMax, decalage, width-decalage);
y[i] = map(yWorld[i], yMin, yMax, decalage, (width-decalage)/ratioGPS);
}
}
}

//-------------------------------------------------------------------------------------------------------------
//--- Affichage du tracé
//-------------------------------------------------------------------------------------------------------------

int timer = 1;

void draw() {
//-------------------------------------------------------------------------------------------------------------
//--- Centrage des éléments
//-------------------------------------------------------------------------------------------------------------
translate(width/2-(max(x)-min(x))/2-decalage, height/2-(max(y)-min(y))/2-decalage);
colorMode(RGB, 255);
background(255);
colorMode(HSB, 100);

//-------------------------------------------------------------------------------------------------------------
//--- Lignes entre les points (mettre le timer à 2 pour que cela fonctionne)
//-------------------------------------------------------------------------------------------------------------

stroke(5);
for (int i=0; i<=timer-2; i++) {
stroke(map(temperature[i], 0, 30, 50, 100), 90, 90);
strokeWeight(5);
line(x[i], y[i], x[i+1], y[i+1]);
}

//-------------------------------------------------------------------------------------------------------------
//--- placement des points suivant les coordonées x, y, la température et l'altitude
//-------------------------------------------------------------------------------------------------------------

noStroke();
for (int i=0; i<=timer-1; i++) {
fill(map(temperature[i], 0, 30, 50, 100), 90, 90);
ellipse(x[i], y[i], map(altitude[i], 0, 800, 1, maxMapAlti), map(altitude[i], 0, 800, 1, maxMapAlti));
}

//-------------------------------------------------------------------------------------------------------------
//--- dégradé de couleurs pour la température
//-------------------------------------------------------------------------------------------------------------
/*
for (int i=0; i<=20; i++) {
fill(50+i*2.5, 100, 100);
rect(50+52*i, 50, 50, 25);
text(int(map(50+i*2.5,50,100,0,30)) + "°C",50+52*i, 49);
}
*/

//-------------------------------------------------------------------------------------------------------------
//--- Mise à jour du timer pour faire apparaitre tous les points jusqu'à la fin de l'animation
//-------------------------------------------------------------------------------------------------------------
//save("img"+timer+".png");
if (timer >= table.getRowCount()) {
timer = table.getRowCount();
} else {
timer++;
}
}
</pre>
[[Fichier:trace-processing.png|vignette|centré|Exemple du tracé obtenu à partir des mesures et du code processing]]

== Partie Maquettage ==

[[Fichier:plan_maquette.jpg|thumb|left|Module GPS avec son shield]]
[[File:Plan_maquette.pdf]]

Fichier:Plan maquette.jpg

2015-12-11T21:08:55Z

Lucas Ribeiro : image de la maquette réalisée

image de la maquette réalisée

Partie technique Data painting

2015-12-11T21:02:55Z

Lucas Ribeiro :

== Partie Electronique ==
Cette partie a pour but d'expliciter la réalisation technique du projet. C'est en d'autre mot la recette à suivre pour construire le projet
=== Matériel utilisé ===
* Une carte Arduino Yun
* Un capteur de température et d'humidité HTU21D-F
* Un module GPS avec son shield : EM406
* Un écran LCD-Grove et son shield adaptable à la carte Arduino
* Une batterie d'alimentation 5v 6000mAh Leitz
Voici les différents éléments en image :
[[Fichier:Arduino_yun.jpg|200px|thumb|left|carte arduino utilisée]]
[[Fichier:Capteur_temp.jpg|200px|thumb|right|capteur de température]]
[[Fichier:Gps.jpg|200px|thumb|centre|Module GPS avec son shield]]
[[Fichier:Shield_grove_arduino.jpg|200px|thumb|left|Shield grove pour arduino]]
[[Fichier:grove-LCD.jpg|200px|thumb|right|Ecran LCD]]
[[Fichier:Batterie-leitz.png|200px|thumb|centre|Batterie d'alimentation]]
 
 
 
Voici les liens vers les différentes datasheet des composants : 
[https://www.arduino.cc/en/Main/ArduinoBoardYun présentation Arduino Yun ] 
[https://www.sparkfun.com/datasheets/GPS/EM-406A_User_Manual.PDF datasheet GPS] 
[https://www.adafruit.com/datasheets/1899_HTU21D.pdf datasheet capteur de température/humidité] 
[http://www.seeedstudio.com/wiki/images/0/03/JHD1214Y_YG_1.0.pdf datassent écran LCD] 

=== Branchements ===

Pour commencer à brancher le système il est nécessaire de comprendre les différents moyens de communications des capteurs avec la carte. 
Pour commencer, parlons du GPS. Le GPS utilise la liaison série pour communiquer (TX/RX). Le shield a deux fonction de communication : UART et DLINE. Cette différence n'est qu'une variation des pins utilisées. Nous avons fonctionné, lors de notre projet, en mode DLINE. '''Attention !''' Il serait donc logique de connecter les pins 2 et 3 sur les 0 et 1 de la carte. Cependant le code créée utilise des interruptions et la carte arduino yun ne supporte pas les interruptions sur la pin 0. Il faut donc l'associer à la pin 10.

== Partie Processing ==
Une fois la donnée récupérée, elle est stockée sur la carte micro SD dans un fichier csv avec ce formattage :
<pre>
latitude,longitude,altitude,température,humidité <--- 1ère mesure
latitude,longitude,altitude,température,humidité <--- 2ème mesure
latitude,longitude,altitude,température,humidité <--- 3ème mesure
latitude,longitude,altitude,température,humidité <--- 4ème mesure
...
</pre>
voici un exemple de dix mesures captées avec le dispositif :
<pre>
45.451343,4.387325,516.40,16.07,43.03
45.451343,4.387325,516.40,16.04,43.47
45.451347,4.387387,515.40,15.75,44.35
45.451347,4.387387,515.40,15.68,44.58
45.451339,4.387518,515.40,15.48,44.78
45.451351,4.387597,511.60,15.12,45.52
45.451351,4.387597,511.60,14.98,46.01
45.451366,4.387747,513.10,14.96,46.49
45.451366,4.387747,513.10,14.95,46.91
45.451389,4.387815,515.40,14.95,46.83
45.451389,4.387815,515.40,14.98,46.78
</pre>
Le fichier obtenu (ici "data.csv") est par la suite importé sur processing et interprété en points de différentes taille et couleur avec le code suivant :
<pre>
Table table;
float[] latitude;
float[] longitude;
int[] altitude;
int[] temperature;
float[] x;
float[] y;

//-------------------------------------------------------------------------------------------------------------
//--- Données à modifier pour adapter le tracé
int maxMapAlti = 30; //diametre des cercles en fonction de l'altitude (en px)
int decalage = 250; //taille des bordures de la zone de rendu (en px)
//-------------------------------------------------------------------------------------------------------------

void setup() {
size(displayWidth, displayHeight);
frameRate(60);
table = loadTable("datas.csv");
int nbreLignes = table.getRowCount();

latitude = new float[nbreLignes];
longitude = new float[nbreLignes];
altitude = new int[nbreLignes];
temperature = new int[nbreLignes];

for (int i=0; i<=table.getRowCount()-1; i++) {
latitude[i] = table.getRow(i).getFloat(0);
longitude[i] = table.getRow(i).getFloat(1);
altitude[i] = table.getRow(i).getInt(2);
temperature[i] = table.getRow(i).getInt(3);
}

//-------------------------------------------------------------------------------------------------------------
//--- Formule de transformation de coordonées polaires en coordonées x, y à l'échelle du monde
//-------------------------------------------------------------------------------------------------------------

float[] xWorld = new float[nbreLignes];
float[] yWorld = new float[nbreLignes];
for (int i=0; i<=table.getRowCount()-1; i++) {
xWorld[i] = (longitude[i]+180)*((width-(2*decalage))/360);
float latRad = latitude[i]*PI/180;
float mercN = log(tan((PI/4)+(latRad/2)));
yWorld[i] = ((height-(2*decalage)/2))-((width-(2*decalage))*mercN/(2*PI));
}

//-------------------------------------------------------------------------------------------------------------
//--- Mise à l'échelle des coordonnées pour qu'elle apparaissent à l'échelle de la fenêtre de visualisation
//-------------------------------------------------------------------------------------------------------------

float xMax = max(xWorld);
float xMin = min(xWorld);
float yMax = max(yWorld);
float yMin = min(yWorld);
float ratioGPS = (xMax - xMin) / (yMax - yMin);
float windowWidth = width-(2*decalage);
float windowHeight = height-(2*decalage);
float ratioWindow = windowWidth/windowHeight;

x = new float[nbreLignes];
y = new float[nbreLignes];
if (ratioGPS < ratioWindow) {
for (int i=0; i<=table.getRowCount()-1; i++) {
y[i] = map(yWorld[i], yMin, yMax, decalage, height-decalage);
x[i] = map(xWorld[i], xMin, xMax, decalage, ratioGPS*(height-decalage));
}
} else {
for (int i=0; i<=table.getRowCount()-1; i++) {
x[i] = map(xWorld[i], xMin, xMax, decalage, width-decalage);
y[i] = map(yWorld[i], yMin, yMax, decalage, (width-decalage)/ratioGPS);
}
}
}

//-------------------------------------------------------------------------------------------------------------
//--- Affichage du tracé
//-------------------------------------------------------------------------------------------------------------

int timer = 1;

void draw() {
//-------------------------------------------------------------------------------------------------------------
//--- Centrage des éléments
//-------------------------------------------------------------------------------------------------------------
translate(width/2-(max(x)-min(x))/2-decalage, height/2-(max(y)-min(y))/2-decalage);
colorMode(RGB, 255);
background(255);
colorMode(HSB, 100);

//-------------------------------------------------------------------------------------------------------------
//--- Lignes entre les points (mettre le timer à 2 pour que cela fonctionne)
//-------------------------------------------------------------------------------------------------------------

stroke(5);
for (int i=0; i<=timer-2; i++) {
stroke(map(temperature[i], 0, 30, 50, 100), 90, 90);
strokeWeight(5);
line(x[i], y[i], x[i+1], y[i+1]);
}

//-------------------------------------------------------------------------------------------------------------
//--- placement des points suivant les coordonées x, y, la température et l'altitude
//-------------------------------------------------------------------------------------------------------------

noStroke();
for (int i=0; i<=timer-1; i++) {
fill(map(temperature[i], 0, 30, 50, 100), 90, 90);
ellipse(x[i], y[i], map(altitude[i], 0, 800, 1, maxMapAlti), map(altitude[i], 0, 800, 1, maxMapAlti));
}

//-------------------------------------------------------------------------------------------------------------
//--- dégradé de couleurs pour la température
//-------------------------------------------------------------------------------------------------------------
/*
for (int i=0; i<=20; i++) {
fill(50+i*2.5, 100, 100);
rect(50+52*i, 50, 50, 25);
text(int(map(50+i*2.5,50,100,0,30)) + "°C",50+52*i, 49);
}
*/

//-------------------------------------------------------------------------------------------------------------
//--- Mise à jour du timer pour faire apparaitre tous les points jusqu'à la fin de l'animation
//-------------------------------------------------------------------------------------------------------------
//save("img"+timer+".png");
if (timer >= table.getRowCount()) {
timer = table.getRowCount();
} else {
timer++;
}
}
</pre>
[[Fichier:trace-processing.png|vignette|centré|Exemple du tracé obtenu à partir des mesures et du code processing]]

== Partie Maquettage ==

Fichier:Trace-processing.png

2015-12-11T21:00:04Z

Lucas Ribeiro :

Fichier:Plan maquette.pdf

2015-12-11T20:46:02Z

Lucas Ribeiro :

Phasage Data Painting

2015-12-11T18:33:28Z

Lucas Ribeiro : /* Jour 9 */

= Jour 1 =

Après une présentation générale du sujet, puis de l'utilisation des capteurs et des objets connectés dans le monde, nous nous sommes penchés sur le sujet.

La première question posée était : " quelle nouvelle utilisation pouvons nous faire des capteurs ? "

En effet les capteurs et les systèmes embarqués sont présents partout dans nos vie, cependant comment les utiliser d'une manière nouvelle ? Comment les mettre en valeur ? L'idée de Data Painting est alors apparue : " Dessiner une oeuvre influencée par des données captées ".
De nombreux capteurs sont utilisés dans ce but : GPS, son, taux de CO2, température, altimètre...
Les informations ainsi récoltées sont alors utilisées pour former une oeuvre, qui se dessine en fonction des valeurs captées. Exemple : le trait change de couleur lorsque la température évolue.

[[Fichier:preview_data_painting.jpg|vignette|centré|Prévisualisation d'un data painting]]

Tous ces capteurs sont situés sur un vêtement qui reste à définir mais peuvent être utilisés juste en utilisant celui-ci.

=Jour 2=

Les questions commencent à évoluer. Nous avons décidé d'utilisé un mind mapping afin d'avoir une vue globale du sujet et de définir une idée claire vers laquelle nous voulons aller.

Cette séance nous a permis de toucher les multiples application que pouvait réaliser notre vêtement. Nous avons également écrit un personna dans le cadre d'une utilisation avec plusieurs personnes. Cependant nous écartons rapidement la solution multi-utilisateur car la relation que ceux-ci peuvent avoir n'est pas clairement définie et n'a pour l'instant pas de sens.
Le rendu final doit, pour nous, pouvoir être quelque chose de concret, de palpable. Nous imaginons donc de donner la possibilité à l'utilisateur de choisir la forme souhaitée pour son oeuvre : tableau, carte postale, dessin... Cependant il pourra tout à fait décider de récupérer l'oeuvre sous format numérique.

Voici le personna écrit :

''Manal et Pratheep, deux jeunes étudiants passionnés d'art et de numérique se rendent au salon : Datavisualisation se déroulant à Saint-Etienne sous un beau soleil de printemps 2016. Ils souhaitent passer un moment sympa tout en questionnant leur sensibilité numérico-artistique. Ils aperçoivent un stand au beau milieu des autres qui pique leur curiosité. Ils s'aprochent donc et voilà que Pratheep se voit affubler d'une drôle de combinaison pendant que Manal siège devant un étrange tableau de bord surplombé d'un écran 27 pouces. Pratheep est alors invité à déambuler dans tout le salon. Et la ! STUPEUR ! Manal voit apparaitre en temps réel le parcours de son ami sous ses yeux. Du vert, du bleu, des formes, des angles, des nuances, en manipulant les instruments, elle peut littéralement interargir sur le rendu graphique du parcours. Une fois Pratheep de retour et dans une tenue vestimentaire adéquate, ils engagent une vive conversation sur l'expérience étonnante qu'ils viennent de vivre et repartent conquis par cette épopée étonnante.''

[[Fichier:Mind_mapping.jpg|vignette|centré|Mind mapping jour 2]]

=Jour 3=

Nous avons découpé le projet en différentes actions qu'il nous faut mener puis nous les avons hiérarchisées en fonction du temps qu'il nous faudra pour les réaliser : 
* 1 - Choix des composants 
* 1 - choix de la visualisation des données en direct 
* 2 - définir le scénario 
* 5 - choix du vêtement 
* 10 - choix de la visualisation des données post-expérience 
* 10 - mise en place vêtement composant 
* 20 - dessin du design du vêtement 
* 20 - réception composant 
* 50 - traitement processing 
* 50 - traitement Arduino 
* 100 - mise en place des capteurs (température, altitude, GPS et champs magnétique) 
* non noté : restitution du projet (vidéo, dessins, 3D, présentation orale...) 
 

Nous avons aussi établi une liste des capteurs dont nous allons avoir besoin pour développer le projet : 
* GPS
* température et altitude
* Champs magnétique terrestre
 
Pour notre prochain rendez-vous l'objectif sera de faire le choix des composants, d'écrire un scénario d'usage et de réfléchir au type de vêtement sur lequel les composants seront accrochés.

=Jour 4=
Nous avons écrit différentes personas correspondant à plusieurs utilisations possibles de notre procédé :
 
'''Lina, 43 ans, cadre''' 
''Lina cadre dynamique de 43 ans vient d’acheter son nouveau vêtement Data Painting. Fan de randonnée elle décide d’aller l’essayer dans le parc du Pilat. Elle enfile son vêtement et commence à marcher sur ce trajet qu’elle connaît bien. Dès ses premiers pas son vêtement interagit avec l’extérieur. Les capteurs se mettent en fonctionnement et récupère la température, l’altitude… Lina voit toutes ces données s’afficher en temps réel sur le petit écran placé sur son bras. Elle continue ainsi sa balade dans le parc du Pilat. Après être revenue à sa voiture Lina rentre chez elle. Une fois arrivée elle allume son PC et insère sa carte mémoire dans celui-ci. Après quelques minutes son imprimante avale une feuille. En quelques secondes la feuille à l’origine vierge de toutes choses vient de devenir bien plus colorée. Lina reconnaît la randonnée qu’elle a réalisée il y a quelques heures. Cependant son tracé est plein de couleur, rempli de forme et de texture qui évoluent le long de celui-ci. Elle le suit des yeux et se remémore certains moments marquant de sa balade. Elle partage même cette expérience avec son mari en lui expliquant comment sa randonnée peut ressembler à ça.
''
 
'''William, jeune étudiant New-Yorkais de 21 ans''' 
''William se voit offrir une panoplie Iron-Man avec de multiples capteurs et écran intégré dans le bras. Il décide d'aller se balader à travers les allés et les quartiers géométriques de sa ville. Dés l'allumage de sa panoplie, l'écran s'illumine. Une multitude de chiffres défile : témpérature, altitude, position GPS et même champs magnétique! Après une heure de balade, il décide de rentrer chez lui afin de tester la seconde fonctionnalité de sa panoplie. Il saisit la carte mémoire du costume et l'insert dans son PC. Après quelques clics, on peut entendre l'imprimante vrombir en imprimant quelque chose. Une curieuse forme apparait. William reconnait quand même son parcours, mais il est teinté de multiples couleurs, formes, symboles. De sorte que la feuille précédemment blanche, est devenu une véritable oeuvre d'art.''

Une fois les persona établit nous avons commencé à mettre en place le hardware (carte et différents capteurs) 
[[Fichier:Premier_circuit.JPG|vignette|centré|Montage réalisé]]
Nous avons aussi réfléchi au vêtement qui va accueillir ces capteurs. Il faut qu'il permette d'y placer tous les capteurs (GPS, température et altitude, champs magnétique), la plaque Arduino, un écran LCD et une batterie. 

[[Fichier:dessins1.jpg|vignette|centré|Premier type de proposition : l'adaptation du dispositif sur des vêtements existants]]
[[Fichier:dessins2.jpg|vignette|centré|Deuxième type de proposition : la création d'un nouveau vêtement]]

=Jour 5=
travail sur la visualisation des données. 
Les deux cartes ci-dessous présentent une visualisation de plusieurs données :
* les données de localisation GPS avec le tracé
* les données de vitesse avec les pictogrammes (pause, arrêt nocturne, marche, course, voiture,...)
* les données d'altitude avec l'épaisseur du tracé
* les données de température avec la couleur du tracé
[[Fichier:Carte-mont-blanc.jpg|vignette|centre|visualisation de plusieurs randonnées autour du mont blanc (1 semaine)]]
[[Fichier:Carte-new-york.jpg|vignette|centre|visualisation d'une ballade d'une journée dans New-York]]

=Jour 6=
Ce jour marque le début de la semaine de Workshop.
Les objectifs de cette semaine sont les suivants :
* Réaliser l'implémentation de tous les capteurs sur arduino
* Concrétiser la visualisation des données via procesing
* Réaliser un prototype respectant toutes les contraintes demandées
* Ecrire, filmer et monter une vidéo de présentation du produit

Nous avons continué à travailler sur deux fenêtres distinctes : la mise en place des capteurs et la visualisation des données. 
Après plusieurs essais durant toute la journée, la GPS fonctionne correctement. Il donne la latitude et la longitude de la position à laquelle il se situe.
Il faut néanmoins continuer l'implémentation des autres capteurs afin d'obtenir l'altitude et la température. 
Du côté de la visualisation tous les pictogrammes ont été crées (voiture, avion, marche, course, sommeil...).
La visualisation a été décomposée en fonction des différentes données créées. Chacune d'entre elles induit un changement spécifique dans la visualisation (couleur, épaisseur...). 
[[Fichier:representations-donnees.jpg|vignette|centre|Interprétations visuelles des données]]

= Jour 7 =
Le workshop continue. Nous avons assisté à une conférence sur la captation et la datavisualisation très intéressante. Cette conférence mettait en avant les "dangers" actuels de la captation et la façon de changer ses effets en résultat bénéfique. Nous avons ensuite continuer à mettre en place les différents capteurs. Après cette journée les capteur de température, d'humidité, GPS et altitude fonctionnent séparément. 
Du côté de la visualisation des données, nous avons écrit un programme processing, qui permet d'afficher un trajet modifié en fonction des paramètres cités plus haut. ce programme est fonctionnel avec des valeurs fictives.

= Jour 8 =
Nous devons maintenant réunir les différents codes pour faire fonctionner tous nos capteurs ensemble. De plus il est nécessaire d'enregistrer les données en local pour pouvoir les interpréter ensuite. Nous voulons également implanter une notion de temps réel. Pour cela nous avons ajouter au système un écran LCD affichant les données brutes lors de la balade. 
Nous avons également commencé à prototyper une maquette de notre système. En utilisant une découpeuse laser, nous avons designer plusieurs pièces qui une fois assemblées contiendront notre système. Tous les capteurs fonctionnent maintenant sur la même carte arduino. Ils affichent la position, l'altitude, la température et le pourcentage d'humidité sur le port série.

= Jour 9 =
C'est l'avant dernier jour du workshop. Nous continuons deux tâches en parallèles : la sauvegarde des données sur une carte SD pour les interpréter ensuite et l'assemblage de la maquette avec tous nos composants électroniques. Une fois l'enregistrement en local fonctionnel nous montons notre système. Il affiche les données brutes sur le l'écran LCD et les enregistre dans le même temps. 
Nous avons ensuite décidé de tourner une vidéo mettant en scène l'utilisation de notre produit. Cette vidéo présente le produit tel que nous l'avons imaginé et nous tel que nous avons pu le concevoir jusqu'à ce jour. Cependant les fonctionnalités sont entièrement respectées, le problème restant est un problème de miniaturisation.
[[Fichier:photo05_bis.jpg|200px|thumb|centre|Vue de côté]]
[[Fichier:photo03.jpg|200px|thumb|centre|Vue de dessus]]

= Jour 10 - Rendu final =
La vidéo a été finalisé, le prototype fonctionne parfaitement. Il nous reste à créer quelques slides pour présenter notre projet devant la communauté TSE - IRAM - ESADSE.

[http://www.slideshare.net/RomainGuiotSamson/rendu-datapainting Présentation projet DataPainting]

Partie technique Data painting

2015-12-11T18:30:31Z

Lucas Ribeiro :

Phasage Data Painting

2015-12-08T13:02:02Z

Lucas Ribeiro :

Fichier:Representations-donnees.jpg

2015-12-08T08:56:54Z

Lucas Ribeiro :

Phasage Data Painting

2015-11-25T11:14:01Z

Lucas Ribeiro :

Fichier:Carte-new-york.jpg

2015-11-25T11:07:44Z

Lucas Ribeiro : Lucas Ribeiro a téléchargé une nouvelle version de Fichier:Carte-new-york.jpg

Fichier:Carte-mont-blanc.jpg

2015-11-25T11:06:54Z

Lucas Ribeiro : Lucas Ribeiro a téléchargé une nouvelle version de Fichier:Carte-mont-blanc.jpg

Phasage Data Painting

2015-11-24T16:56:35Z

Lucas Ribeiro :

Fichier:Carte-new-york.jpg

2015-11-24T16:49:14Z

Lucas Ribeiro :

Fichier:Carte-mont-blanc.jpg

2015-11-24T16:48:56Z

Lucas Ribeiro :

Phasage Data Painting

2015-11-18T17:12:21Z

Lucas Ribeiro :

Fichier:Dessins2.jpg

2015-11-18T17:04:57Z

Lucas Ribeiro :

Fichier:Dessins1.jpg

2015-11-18T17:03:35Z

Lucas Ribeiro :

Phasage Data Painting

2015-11-17T15:56:39Z

Lucas Ribeiro :

Phasage Data Painting

2015-11-17T15:07:43Z

Lucas Ribeiro :

Phasage Data Painting

2015-11-17T14:51:28Z

Lucas Ribeiro :

Phasage Data Painting

2015-11-03T15:45:13Z

Lucas Ribeiro :

==Jour 1==

Après une présentation générale du sujet, puis de l'utilisation des capteurs et des objets connectés dans le monde, nous nous sommes penchés sur le sujet.

La première question posée était : " quelle nouvelle utilisation pouvons nous faire des capteurs ? "

En effet les capteurs et les systèmes embarqués sont présents partout dans nos vie, cependant comment les utiliser d'une manière nouvelle ? Comment les mettre en valeur ? L'idée de Data Painting est alors apparue : " Dessiner une oeuvre influencée par des données captées ".
De nombreux capteurs sont utilisés dans ce but : GPS, son, taux de CO2, température, altimètre...
Les informations ainsi récoltées sont alors utilisées pour former une oeuvre, qui se dessine en fonction des valeurs captées. Exemple : le trait change de couleur lorsque la température évolue.

[[Fichier:preview_data_painting.jpg|vignette|centré|Prévisualisation d'un data painting]]

Tous ces capteurs sont situés sur un vêtement qui reste à définir mais peuvent être utilisés juste en utilisant celui-ci.

==Jour 2==

Les questions commencent à évoluer. Nous avons décidé d'utilisé un mind mapping afin d'avoir une vue globale du sujet et de définir une idée claire vers laquelle nous voulons aller.

Cette séance nous a permis de toucher les multiples application que pouvait réaliser notre vêtement. Nous avons également écrit un personna dans le cadre d'une utilisation avec plusieurs personnes. Cependant nous écartons rapidement la solution multi-utilisateur car la relation que ceux-ci peuvent avoir n'est pas clairement définie et n'a pour l'instant pas de sens.
Le rendu final doit, pour nous, pouvoir être quelque chose de concret, de palpable. Nous imaginons donc de donner la possibilité à l'utilisateur de choisir la forme souhaitée pour son oeuvre : tableau, carte postale, dessin... Cependant il pourra tout à fait décider de récupérer l'oeuvre sous format numérique.

Voici le personna écrit :

''Manal et Pratheep, deux jeunes étudiants passionnés d'art et de numérique se rendent au salon : Datavisualisation se déroulant à Saint-Etienne sous un beau soleil de printemps 2016. Ils souhaitent passer un moment sympa tout en questionnant leur sensibilité numérico-artistique. Ils aperçoivent un stand au beau milieu des autres qui pique leur curiosité. Ils s'aprochent donc et voilà que Pratheep se voit affubler d'une drôle de combinaison pendant que Manal siège devant un étrange tableau de bord surplombé d'un écran 27 pouces. Pratheep est alors invité à déambuler dans tout le salon. Et la ! STUPEUR ! Manal voit apparaitre en temps réel le parcours de son ami sous ses yeux. Du vert, du bleu, des formes, des angles, des nuances, en manipulant les instruments, elle peut littéralement interargir sur le rendu graphique du parcours. Une fois Pratheep de retour et dans une tenue vestimentaire adéquate, ils engagent une vive conversation sur l'expérience étonnante qu'ils viennent de vivre et repartent conquis par cette épopée étonnante.''

[[Fichier:Mind_mapping.jpg|vignette|centré|Mind mapping jour 2]]

==Jour 3==

Nous avons découpé le projet en différentes actions qu'il nous faut mener puis nous les avons hiérarchisées en fonction du temps qu'il nous faudra pour les réaliser : 
* 1 - Choix des composants 
* 1 - choix de la visualisation des données en direct 
* 2 - définir le scénario 
* 5 - choix du vêtement 
* 10 - choix de la visualisation des données post-expérience 
* 10 - mise en place vêtement composant 
* 20 - dessin du design du vêtement 
* 20 - réception composant 
* 50 - traitement processing 
* 50 - traitement Arduino 
* 100 - mise en place des capteurs (température, altitude, GPS et champs magnétique) 
* non noté : restitution du projet (vidéo, dessins, 3D, présentation orale...) 
 

Nous avons aussi établi une liste des capteurs dont nous allons avoir besoin pour développer le projet : 
* GPS
* température et altitude
* Champs magnétique terrestre
 
Pour notre prochain rendez-vous l'objectif sera de faire le choix des composants, d'écrire un scénario d'usage et de réfléchir au type de vêtement sur lequel les composants seront accrochés.

Phasage Data Painting

2015-11-03T15:39:20Z

Lucas Ribeiro :

==Jour 1==

Après une présentation générale du sujet, puis de l'utilisation des capteurs et des objets connectés dans le monde, nous nous sommes penchés sur le sujet.

La première question posée était : " quelle nouvelle utilisation pouvons nous faire des capteurs ? "

En effet les capteurs et les systèmes embarqués sont présents partout dans nos vie, cependant comment les utiliser d'une manière nouvelle ? Comment les mettre en valeur ? L'idée de Data Painting est alors apparue : " Dessiner une oeuvre influencée par des données captées ".
De nombreux capteurs sont utilisés dans ce but : GPS, son, taux de CO2, température, altimètre...
Les informations ainsi récoltées sont alors utilisées pour former une oeuvre, qui se dessine en fonction des valeurs captées. Exemple : le trait change de couleur lorsque la température évolue.

[[Fichier:preview_data_painting.jpg|vignette|centré|Prévisualisation d'un data painting]]

Tous ces capteurs sont situés sur un vêtement qui reste à définir mais peuvent être utilisés juste en utilisant celui-ci.

==Jour 2==

Les questions commencent à évoluer. Nous avons décidé d'utilisé un mind mapping afin d'avoir une vue globale du sujet et de définir une idée claire vers laquelle nous voulons aller.

Cette séance nous a permis de toucher les multiples application que pouvait réaliser notre vêtement. Nous avons également écrit un personna dans le cadre d'une utilisation avec plusieurs personnes. Cependant nous écartons rapidement la solution multi-utilisateur car la relation que ceux-ci peuvent avoir n'est pas clairement définie et n'a pour l'instant pas de sens.
Le rendu final doit, pour nous, pouvoir être quelque chose de concret, de palpable. Nous imaginons donc de donner la possibilité à l'utilisateur de choisir la forme souhaitée pour son oeuvre : tableau, carte postale, dessin... Cependant il pourra tout à fait décider de récupérer l'oeuvre sous format numérique.

Voici le personna écrit :

''Manal et Pratheep, deux jeunes étudiants passionnés d'art et de numérique se rendent au salon : Datavisualisation se déroulant à Saint-Etienne sous un beau soleil de printemps 2016. Ils souhaitent passer un moment sympa tout en questionnant leur sensibilité numérico-artistique. Ils aperçoivent un stand au beau milieu des autres qui pique leur curiosité. Ils s'aprochent donc et voilà que Pratheep se voit affubler d'une drôle de combinaison pendant que Manal siège devant un étrange tableau de bord surplombé d'un écran 27 pouces. Pratheep est alors invité à déambuler dans tout le salon. Et la ! STUPEUR ! Manal voit apparaitre en temps réel le parcours de son ami sous ses yeux. Du vert, du bleu, des formes, des angles, des nuances, en manipulant les instruments, elle peut littéralement interargir sur le rendu graphique du parcours. Une fois Pratheep de retour et dans une tenue vestimentaire adéquate, ils engagent une vive conversation sur l'expérience étonnante qu'ils viennent de vivre et repartent conquis par cette épopée étonnante.''

[[Fichier:Mind_mapping.jpg|vignette|centré|Mind mapping jour 2]]

==Jour 3==

Nous avons découpé le projet en différentes actions qu'il nous faut mener puis nous les avons hiérarchisées en fonction du temps qu'il nous faudra pour les réaliser : 
1 - Choix des composants 
1 - choix de la visualisation des données en direct 
2 - définir le scénario 
5 - choix du vêtement 
10 - choix de la visualisation des données post-expérience 
10 - mise en place vêtement composant 
20 - dessin du design du vêtement 
20 - réception composant 
50 - traitement processing 
50 - traitement Arduino 
100 - mise en place des capteurs (température, altitude, GPS et champs magnétique) 
non noté : restitution du projet (vidéo, dessins, 3D, présentation orale...) 
 
écrire scénario,

Nous avons établi une liste des capteurs dont nous allons avoir besoin pour développer le projet : 
'''• GPS''' 
'''• température et altitude''' 
'''• Champs magnétique terrestre'''

Phasage Data Painting

2015-11-03T15:25:23Z

Lucas Ribeiro :

•''' Jour 1 '''

Après une présentation générale du sujet, puis de l'utilisation des capteurs et des objets connectés dans le monde, nous nous sommes penchés sur le sujet.

La première question posée était : " quelle nouvelle utilisation pouvons nous faire des capteurs ? "

En effet les capteurs et les systèmes embarqués sont présents partout dans nos vie, cependant comment les utiliser d'une manière nouvelle ? Comment les mettre en valeur ? L'idée de Data Painting est alors apparue : " Dessiner une oeuvre influencée par des données captées ".
De nombreux capteurs sont utilisés dans ce but : GPS, son, taux de CO2, température, altimètre...
Les informations ainsi récoltées sont alors utilisées pour former une oeuvre, qui se dessine en fonction des valeurs captées. Exemple : le trait change de couleur lorsque la température évolue.

[[Fichier:preview_data_painting.jpg|vignette|centré|Prévisualisation d'un data painting]]

Tous ces capteurs sont situés sur un vêtement qui reste à définir mais peuvent être utilisés juste en utilisant celui-ci.

•''' Jour 2 '''

Les questions commencent à évoluer. Nous avons décidé d'utilisé un mind mapping afin d'avoir une vue globale du sujet et de définir une idée claire vers laquelle nous voulons aller.

Cette séance nous a permis de toucher les multiples application que pouvait réaliser notre vêtement. Nous avons également écrit un personna dans le cadre d'une utilisation avec plusieurs personnes. Cependant nous écartons rapidement la solution multi-utilisateur car la relation que ceux-ci peuvent avoir n'est pas clairement définie et n'a pour l'instant pas de sens.
Le rendu final doit, pour nous, pouvoir être quelque chose de concret, de palpable. Nous imaginons donc de donner la possibilité à l'utilisateur de choisir la forme souhaitée pour son oeuvre : tableau, carte postale, dessin... Cependant il pourra tout à fait décider de récupérer l'oeuvre sous format numérique.

Voici le personna écrit :

''Manal et Pratheep, deux jeunes étudiants passionnés d'art et de numérique se rendent au salon : Datavisualisation se déroulant à Saint-Etienne sous un beau soleil de printemps 2016. Ils souhaitent passer un moment sympa tout en questionnant leur sensibilité numérico-artistique. Ils aperçoivent un stand au beau milieu des autres qui pique leur curiosité. Ils s'aprochent donc et voilà que Pratheep se voit affubler d'une drôle de combinaison pendant que Manal siège devant un étrange tableau de bord surplombé d'un écran 27 pouces. Pratheep est alors invité à déambuler dans tout le salon. Et la ! STUPEUR ! Manal voit apparaitre en temps réel le parcours de son ami sous ses yeux. Du vert, du bleu, des formes, des angles, des nuances, en manipulant les instruments, elle peut littéralement interargir sur le rendu graphique du parcours. Une fois Pratheep de retour et dans une tenue vestimentaire adéquate, ils engagent une vive conversation sur l'expérience étonnante qu'ils viennent de vivre et repartent conquis par cette épopée étonnante.''

[[Fichier:Mind_mapping.jpg|vignette|centré|Mind mapping jour 2]]

•''' Jour 3 '''

Nous avons découpé le projet en différentes actions qu'il nous faut mener puis nous les avons hiérarchisées en fonction du temps qu'il nous faudra pour les réaliser : 
1 - Choix des composants 
1 - choix de la visualisation des données en direct 
2 - définir le scénario 
5 - choix du vêtement 
10 - choix de la visualisation des données post-expérience 
10 - mise en place vêtement composant 
20 - dessin du design du vêtement 
20 - réception composant 
50 - traitement processing 
50 - traitement Arduino 
100 - mise en place des capteurs (température, altitude, GPS et champs magnétique) 
non noté : restitution du projet (vidéo, dessins, 3D, présentation orale...)

Phasage Data Painting

2015-11-03T15:23:21Z

Lucas Ribeiro :

•''' Jour 1 '''

Après une présentation générale du sujet, puis de l'utilisation des capteurs et des objets connectés dans le monde, nous nous sommes penchés sur le sujet.

La première question posée était : " quelle nouvelle utilisation pouvons nous faire des capteurs ? "

En effet les capteurs et les systèmes embarqués sont présents partout dans nos vie, cependant comment les utiliser d'une manière nouvelle ? Comment les mettre en valeur ? L'idée de Data Painting est alors apparue : " Dessiner une oeuvre influencée par des données captées ".
De nombreux capteurs sont utilisés dans ce but : GPS, son, taux de CO2, température, altimètre...
Les informations ainsi récoltées sont alors utilisées pour former une oeuvre, qui se dessine en fonction des valeurs captées. Exemple : le trait change de couleur lorsque la température évolue.

[[Fichier:preview_data_painting.jpg|vignette|centré|Prévisualisation d'un data painting]]

Tous ces capteurs sont situés sur un vêtement qui reste à définir mais peuvent être utilisés juste en utilisant celui-ci.

•''' Jour 2 '''

Les questions commencent à évoluer. Nous avons décidé d'utilisé un mind mapping afin d'avoir une vue globale du sujet et de définir une idée claire vers laquelle nous voulons aller.

Cette séance nous a permis de toucher les multiples application que pouvait réaliser notre vêtement. Nous avons également écrit un personna dans le cadre d'une utilisation avec plusieurs personnes. Cependant nous écartons rapidement la solution multi-utilisateur car la relation que ceux-ci peuvent avoir n'est pas clairement définie et n'a pour l'instant pas de sens.
Le rendu final doit, pour nous, pouvoir être quelque chose de concret, de palpable. Nous imaginons donc de donner la possibilité à l'utilisateur de choisir la forme souhaitée pour son oeuvre : tableau, carte postale, dessin... Cependant il pourra tout à fait décider de récupérer l'oeuvre sous format numérique.

Voici le personna écrit :

''Manal et Pratheep, deux jeunes étudiants passionnés d'art et de numérique se rendent au salon : Datavisualisation se déroulant à Saint-Etienne sous un beau soleil de printemps 2016. Ils souhaitent passer un moment sympa tout en questionnant leur sensibilité numérico-artistique. Ils aperçoivent un stand au beau milieu des autres qui pique leur curiosité. Ils s'aprochent donc et voilà que Pratheep se voit affubler d'une drôle de combinaison pendant que Manal siège devant un étrange tableau de bord surplombé d'un écran 27 pouces. Pratheep est alors invité à déambuler dans tout le salon. Et la ! STUPEUR ! Manal voit apparaitre en temps réel le parcours de son ami sous ses yeux. Du vert, du bleu, des formes, des angles, des nuances, en manipulant les instruments, elle peut littéralement interargir sur le rendu graphique du parcours. Une fois Pratheep de retour et dans une tenue vestimentaire adéquate, ils engagent une vive conversation sur l'expérience étonnante qu'ils viennent de vivre et repartent conquis par cette épopée étonnante.''

[[Fichier:Mind_mapping.jpg|vignette|centré|Mind mapping jour 2]]

•''' Jour 3 '''

Nous avons découpé le projet en différentes actions qu'il nous faut mener puis nous les avons hiérarchisées en fonction du temps qu'il nous faudra pour les réaliser :
1 - Choix des composants
1 - choix de la visualisation des données en direct
2 - définir le scénario
5 - choix du vêtement
10 - choix de la visualisation des données post-expérience
10 - mise en place vêtement composant
20 - dessin du design du vêtement
20 - réception composant
50 - traitement processing
50 - traitement Arduino
100 - mise en place des capteurs (température, altitude, GPS et champs magnétique)
non noté : restitution du projet (vidéo, dessins, 3D, présentation orale...)

Phasage Data Painting

2015-11-03T13:31:05Z

Lucas Ribeiro :