{{:bandeau-labz5.png|}} ====== Présentation ====== ===== Sujet : ===== Nous le sentons émerger sans saisir la mesure des perspectives qu’il ouvre. L’internet (que nous apprenons toujours à apprivoiser) évolue vers un **internet des objets**. Cette évolution amplifie davantage ses **interactions avec le monde physique**. La où wikipedia defini le web des objets comme **“l’intégration de tout appareil interrogeable ou contrôlable à distance, dans le monde du World Wide Web”**, le terme lui-même « internet des objets » amène déjà son lot de questions : **Quels sont ces objets connectés à travers cette nouvelle évolution d’internet ? Qui les connecte et sur quels modes d’interactions?** Et nous, les humains de l’histoire, **sommes-nous sujets ou objets de ces interactions? Entre les produits et solutions qui proposent un internet des objets clé en main, quelle place pouvons nous occuper comme citoyens et créateurs? Pourquoi cette appropriation de la relation homme-machine est-elle si importante?** En tant que créateurs, notre point d’entrée vers internet se trouve souvent du côté du web. Le Labz#5 de ZINC et Flux(o) propose donc d’aborder ce paradigme émergent sous l’angle d’un « web des objets » par des principes et technologies que nous connaissons et d’autres encore à découvrir. ===== Intervenants : ===== ==== Djela Djamba Okoko: ==== [[https://www.linkedin.com/in/djeladjambaokoko/fr|Djela Djamba Okoko]] est designer d'interaction, son travail se concentre sur les interactions cinématographiques. Les cultures du cinéma, du web et du mashup orientent mes méthodes et ma démarche (UX) centrées sur l'utilisateur. Son design cherche à stimuler la communication et la collaboration créative entre créateurs audiovisuels et développeurs du web sur le terrain des interfaces, autour de flux cinématographiques. À travers Rizomer, il revisite l'image de cinéma comme donnée numérique pour imaginer de nouvelles expériences. Après des études de communication et de cinéma à l'université Concordia au Canada, son parcours l'a mené de Montréal à Marseille, de la création à la diffusion de court-métrages (Oneira Pictures, Main Film, Société de développement des entreprises culturelles du Québec), à l'analyse statistique pour le secteur bancaire et des firmes d'études, vers le design d'interaction notamment avec Flux(o), Tabasco Vidéo et Storycode Provence. ==== Nicolas Brignol : ==== ====== Avant le LabZ ====== ===== Les infos pratiques ===== ☛ Pour se rendre à La Friche Belle de mai : [[http://www.lafriche.org/content/acc%C3%A8s]] ☛ Pour trouver le LFO : {{ :plan.jpg?200 |}} ===== Instructions ===== Une fois inscrit et logué sur le site vous pouvez apporter des modifications au site et ajouter vos ressources sur cette page. ∴ Pour ajouter le contenu : - Cliquer sur le pictogramme avec le crayon "modifier la page" ☛ {{:pictomodifier.png?20|}} ou sur le bouton "modifier" en dessous de chaque paragraphe - Taper votre texte dans la zone souhaitée et cliquer sur enregistrer ∴ Pour insérer une image : Cliquer sur le cadre dans les petits icônes au dessus de la zone de saisi de texte, aller sur sélectionner un fichier, choisir votre fichier souhaité dans vos dossiers. Puis cliquer sur "envoyer", attendre que le fichier soit chargé et cliquer sur "terminer". Votre fichier est maintenant dans la banque de médias, descendez un peu et choisissez votre image pour l'insérer. ===== Ressources ===== Trame de la session "Contexte" : {{:labz5_-_web_des_objets_-_session-1-contexte.pdf|}} Trame de la session "Design" : {{:labz5_-_web_des_objets_-_session-2-design.pdf|}} L'environnement Arduino pour Mac : {{:undefined:arduino-1.6.6-macosx.zip|}} Le web service le plus simple : [[https://github.com/Neekobus/MostSimpleWebService|GitHub : MSWB]] Dossier des programmes arduino du LabZ#5 : {{:labz5.zip|}} ou sur [[http://zinclafriche.org/labz5/|LabZ5]] ====== Pendant le LabZ ====== Prise de notes de la 1ère journée (merci Sarah!) : {{:labz5-notes-j1.docx|}} Les notes de la 2ème journée (encore merci Sarah) : {{:labz_5_j2_-_notes.docx|}} ===== Mindmap ===== {{:labz5-mindmap-v1.jpg?700|}} ===== Gazouillis ===== <html> <a class="twitter-timeline" href="https://twitter.com/FluxoLab" data-widget-id="666626073124282368">Tweets de @FluxoLab</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </html> [TWITTER:USER:fluxolab:5] ====== Après le LabZ ====== ===== Retour en images ===== {{:img_9696.jpg?200|}} {{:img_9729.jpg?200|}} {{:img_9740.jpg?200|}} {{:img_9713.jpg?200|}} {{:img_9801.jpg?200|}} {{:img_9804.jpg?200|}} {{:img_9867.jpg?200|}} {{:img_9874.jpg?200|}} {{:img_9696.jpg?200|}} {{:img_9964.jpg?200|}} {{:img_9950.jpg?200|}} {{:img_0012.jpg?200|}} {{:img_0017.jpg?200|}} {{:img_9988.jpg?200|}} {{:img_9989.jpg?200|}} {{:img_9996.jpg?200|}} ===== La synthèse ===== ===== Le code du prototype ===== Le code suivant a été utilisé pour la présentation finale du prototype qui est naît lors de ce LabZ : la Birthday door. Une porte connectée à une page web et à un dispositif interactif à l'intérieur de la salle. Un bruit de fête simulant une fête dans la salee et à l'extérieur. Une fois qu'un utilisateur ouvre la porte un capteur détecte la pression exercée sur la poignée de la porte et un autre capteur détecte la lumière qui rentre lors de l'ouverture de la porte. Ces deux capteurs provoquent un décompte lors de l'ouverture de la porte illustrée par une page web sous forme d'un visuel d'un gâteau d'anniversaire et une bande sonore souhaitant un joyeux anniversaire à la personne rentrante. Les contraintes techniques du aux technologies physiques et du langage web sont indiqués dans un ReadMe. <webcode frameborder=1 width=100% height=55px > # labZ#5 Ceci est le code utilisé lors de la présentation finale du labZ#5 Ce code a été réalisé en urgence à la dernière minute, il devra faire l'objet d'une refonte avant réutilisation, il est fourni uniquement à titre de documentation. Nous avons fait évolué le code proposé qui ne permettait pas de remonter des évennements sans rechargement de la page. Hors, comme il a été choisi de travailler avec des ambiances sonores, il n'était pas envisageable d'avoir une coupure toutes les 5 sec. Nous avons donc opté pour l'utilisation des technologies javascript et websockets afin de permettre la remontée des évennements et les changements d'état sans qu'un rechargement soit nécessaire. La compatabilité avec le code fourni pour les arduinos a été conservée. ## Prérequis nodejs + npm ## Installation : npm install ## Usage: node server.js Le serveur écoute sur 0.0.0.0 (toutes les adresses IP de la machines), port 9999. Accès depuis le poste local : http://127.0.0.1:9999 ## API les exemples sont données avec l'adresse IP 127.0.0.1, ceci ne fonctionne que sur le poste local, il faut utiliser l'adresse ip externe depuis les modules arduino. ### Capteur capacitif curl http://127.0.0.1:9999/touch?state=X X peut etre `1` lorsque le capteur détecte un contact, ou `0` ### Capteur d'ouverture curl http://127.0.0.1:9999/open?state=X X peut etre `1` lorsque la porte est ouverte, ou `0` lorsqu'elle est fermée. ## Séquence La séquence imaginée : - l'utilisateur se trouve derrière la porte, la musique de fête joue. - l'utilisateur touche la poignée, un appel `/touch?state=1` est envoyé, le silence se fait - si l'utilisateur est surpris et lache la poignée, `/touch?state=0` est envoyé, la musique revient - l'utilisateur, qui touche toujours la poignée, pousse la porte, le capteur de lumière détecte l'ouverture, `/open?state=1` est envoyé, la musique d'anniversaire se joue. Un compteur de bougies est également incrémenté, et l'image du gateau correspondante au nombre de bougies est affiché. - l'utilisateur lache la poignée, `/touch?state=0` est envoyé, mais n'a aucun effet à ce stade. - la porte est refermée, le capteur de lumière envoie `/open?state=0`, la musique de fête revient </webcode> <webcode frameborder=1 width=100% height=55px > var express = require('express'); var sockjs = require('sockjs'); var clients = {}; var candles = 1; var sockjs_opts = {sockjs_url: "http://cdn.jsdelivr.net/sockjs/1.0.1/sockjs.min.js"}; var sockjs_echo = sockjs.createServer(sockjs_opts); sockjs_echo.on('connection', function(conn) { clients[conn.id] = conn; conn.on('data', function(message) { conn.write(message); }); }); function broadcast(message){ for (var client in clients){ clients[client].write(JSON.stringify(message)); } } var app = express.createServer(); sockjs_echo.installHandlers(app, {prefix:'/ws'}); var touch = 0; var opened = 0; app.use(express.static('public')); app.get('/', function (req, res) { res.sendfile(__dirname + '/index.html'); }); app.get('/touch', function (req,res) { touch = req.query.state; broadcast({"touch":touch}); res.send('ok'); }); app.get('/open', function (req,res) { opened = req.query.state; broadcast({"opened":opened}); candles++; broadcast({"candles":candles}); res.send('ok'); }); console.log(' [*] Listening on 0.0.0.0:9999' ); app.listen(9999, '0.0.0.0'); </webcode> Capacitor.ino <webcode frameborder=1 width=100% height=55px > #include <CapacitiveSensor.h> /* * CapitiveSense Library Demo Sketch * Paul Badger 2008 * Uses a high value resistor e.g. 10M between send pin and receive pin * Resistor effects sensitivity, experiment with values, 50K - 50M. Larger resistor values yield larger sensor values. * Receive pin is the sensor pin - try different amounts of foil/metal on this pin */ CapacitiveSensor cs_4_2 = CapacitiveSensor(4,2); // 10M resistor between pins 4 & 2, pin 2 is sensor pin, add a wire and or foil if desired //CapacitiveSensor cs_4_6 = CapacitiveSensor(4,6); // 10M resistor between pins 4 & 6, pin 6 is sensor pin, add a wire and or foil //CapacitiveSensor cs_4_8 = CapacitiveSensor(4,8); // 10M resistor between pins 4 & 8, pin 8 is sensor pin, add a wire and or foil void setup() { cs_4_2.set_CS_AutocaL_Millis(0xFFFFFFFF); // turn off autocalibrate on channel 1 - just as an example Serial.begin(9600); pinMode(9,OUTPUT); } void loop() { long start = millis(); long total1 = cs_4_2.capacitiveSensor(30); //long total2 = cs_4_6.capacitiveSensor(30); //long total3 = cs_4_8.capacitiveSensor(30); //Serial.print(millis() - start); // check on performance in milliseconds //Serial.print("\t"); // tab character for debug windown spacing if(total1 > 300) { digitalWrite(9,HIGH); } else { digitalWrite(9,LOW); } Serial.println(total1); // print sensor output 1 //Serial.print("\t"); //Serial.print(total2); // print sensor output 2 //Serial.print("\t"); //Serial.println(total3); // print sensor output 3 delay(10); // arbitrary delay to limit data to serial port } </webcode> ===== Les avis des participants ===== ===== Les avis des intervenants =====