23/06/2018

YunDessinCollaboratif (YDC) et les Journées Européennes du Patrimoine (JEP)

A l'occasion des Journées Européennes du Patrimoine 2018 placées sous le thème de "L'art en partage", Smag0 et l'association "Les Bricodeurs" vous propose d'utiliser dans plusieurs espaces culturels le dispositif "YunDessinCollaboratif"

Démo Online http://dessincollaboratif.herokuapp.com/
Gallerie que Twitter (@DCollaboratif) : https://twitter.com/DCollaboratif


Qu'est ce que YunDessinCollaboratif (YDC) ?

YDC est un dispositif permettant à des dizaines d'utilisateurs de partager la création d'une oeuvre artistique.
Il suffit de se connecter sur le réseau Wifi du boitier, d'ouvrir la page d'accueil, et chacun peut dessiner grâce à son smartphone, sa tablette ou son ordinateur sur une oeuvre collaborative.
Chacun est libre de compléter l'oeuvre en temps réel.


Fonctionnalités complémentaires

YDC permet d'effectuer des captures d'écran afin de sauvegarder à tout moment une oeuvre
-à développer : YDC enregistre automatiquement à chaque minute une capture d'écran afin de recréer un historique de la création collaborative
- à développer : YDC permet la création de "salles" pour élaborer plusieurs oeuvres en même temps
- à développer : diffusion en temps réel des oeuvres sur un site internet

Technique : 

YunDessinCollaboratif est une application nodejs basée sur de https://sketchpad.tk/
installée sur une carte Arduino Yùn, cette carte proposant un hotspot Wifi.
YDC est installable en tout lieu à condition de disposer d'une prise electrique, et pour la diffusion un pc avec écran ou videoprojecteur avec écran.

Les dernières mises à jour de YunDessinCollaboratif se trouvent ici : 
 https://github.com/scenaristeur/lininoapps/tree/master/root/sketchpad

Et les Bricodeurs dans tout ça ? 

Les Bricodeurs
Collectif du numérique citoyen
Les Bricodeurs est le collectif des professionnels du numérique engagés pour que l’expertise numérique soit au service de l’utilité sociale.
Particulièrement attentifs à l’ouverture et la diversité de genre, culturelle et sociale dans nos actions et nos instances, nous établissons une passerelle entre les expertises techniques, les besoins sociétaux et le grand public."
YDC/sketchpad a été testé à plusieurs reprises mais nécessite encore quelques ajustements. Les Bricodeurs se proposent d'animer des ateliers pendant l'été pour les personnes qui souhaiteraient s'investir dans le projet et apprendre à programmer des applications sur ce type de plateforme.
Potentiel actuel : une dizaine de boitiers YDC
04/05/2019: Visite au festival 'Peinture fraîche' à la halle Debourg/ Gerland où j'ai discuté avec Maxime T du projet https://thelivedrawingproject.com/fr/
Les deux projets sont très proches et utilisent la même stack ( nodejs, socket.io, webapp, mobile utilisateur, vidéoprojecteur) pour une même finalité de dessin collaboratif.
Nouvelle inspiration : le dessin est organisé sous forme de calques / layers que les utilisateurs peuvent gérer sauvegarder, copier, partager...




Spoggy et la prise de notes

Voici quelques exemples de prises de notes effectués lors des conférences au cours du hackathon PerseUp. Hackathon dont nous avons déjà longuement parlé.

- Analyse des réseaux en Egyptologie
- Analyse Visuelle des réseaux
- Méthodologie de Conception de DataVisualisation


Ces notes ont été prises dans le feu de l'action, chacun peut les corriger, les compléter et demander leur modification sur cette page

Pour rappel, il est également possible des prendre des notes à plusieurs en même temps sur le même graphe... En passant par le bouton de menu "+" / mode / collaboratif

Pour savoir comment utiliser Spoggy  consultez l'aide bouton de menu "+" / Aide



10/06/2018

La Barrière LEGO - Arduino

Objets connectés, iot, Arduino, par où commencer ?


"La barrière LEGO, un bon projet pour débuter avec Arduino".


" ça serait bien, une barrière pour ma maison LEGO !
- Une barrière pour ta maison de LEGO, ok, qu'est-ce qu'il nous faut ? Un moteur pour actionner la barrière, et un moyen de la déclencher. Pour le moteur, on va utiliser un SG90, fourni avec la plupart des kits Arduino, et pour activer ce moteur ?? J'ai une Funduino Mega2560 qui traîne, on va voir ce qu'on peut faire avec, mais note que n'importe quelle carte Arduino, ou compatible doit faire l'affaire..."



ES-TU PRÊT A RELEVER LE DEFI DE CREER UNE BARRIERE LEGO EN SEULEMENT 20 LIGNES DE CODE ???

- niveau débutant,
- matériel : KIT "Barrière LEGO Arduino" comprenant :

  • une carte arduino
  • une breadboard
  • un capteur ultrason
  • un servomoteur
  • une télécommande infrarouge et son capteur
  • quelques leds de couleur et les resistances qui les protègent
  • des câbles pour effectuer les connexions...
C'est tout ce qu'il faut pour construire les deux versions de la "Barrière LEGO Arduino"
! le kit "Barrière LEGO Arduino" ne comprend pas les pièces LEGO pour fixer le servomoteur (voir au bas de cette page pour plus de précisions)



Pour 20€ chez LEGO, tu as ça , mais tu peux aussi choisir d'aller voir un peu plus loin et d'apprendre à coder avec le kit "Barrière LEGO Arduino"
 --> commander un kit "Barriere LEGO - Arduino"  
ou envoyez un mail à scenaristeur@gmail.com

La barrière LEGO peut être déclinée sous plusieurs versions, et celles-ci peuvent être combinées :
- 1 la barrière LEGO à partir d'un capteur ultrason.
- 2 la barrière LEGO utilisant la télécommande infrarouge
... a vous de voir ensuite comment vous pouvez améliorer votre barrière LEGO... 😉

Le graphe de la barriere LEGO

Nous allons voir dans un premier temps la version avec le capteur ultrason :

- 1 la barrière LEGO à partir d'un capteur ultrason.

Quand un véhicule passe devant le capteur Ultrason, la barrière se lève pendant trois secondes puis reprend sa position initiale : 




 










Matériel nécessaire :  'KIT Arduino Barrière LEGO'
 --> commander un kit "Barriere LEGO - Arduino"  
ou envoyez un mail à scenaristeur@gmail.com

1 breadboard (ou planche à pain en français ), c'est la plaque où l'on va positionner nos composants et qui nous permettra d'établir les connexions entre ceux-ci.

A l'interieur de la breadbord, des connexions sont déjà établies (traits noirs sur la photo ci-dessous), par exemple, vous pour connecter une broche qui serait connectée en 'A1', vous pouvez utilisez tous les trous de 'B1' à 'E1'. Les trous 'F1' à 'J1' sont également connectés entre eux.

une carte Arduino Uno ou
une carte Arduino Nano avec son cable USB,
ou compatible
un capteur ultrasons HC-SR04 pour capter le passage d'un véhicule
Un servomoteur SG90 pour actionner la barrière
Une dizaine de câbles pour relier tout ça 
Une barre LEGO Technic qui servira de barrière
+ Quelques briques LEGO pour fixer le servomoteur


Repérez les deux lignes à l'extérieur de la breadboard: une rouge et une bleue. Ne les utilisez pas pour l'instant, elles serviront à transmettre le courant pour alimenter les composants.




Effectuer les branchements


1. Commencez par positionner et enficher la carte Arduino et le capteur ultrasons HC-SR04 sur la breadboard :
- la carte Arduino au centre de la breadbord et le capteur sur le bord.

2. Pour alimenter le capteur ultrason HC-SR04, nous allons créer un circuit :
- repérez sur la carte Arduino la broche notée '5V' (c'est le + ) et branchez un fil pour la relier jusqu'à la ligne rouge.
- repérez sur le capteur HC-SR04 la broche notée 'VCC' et reliez la également à la ligne rouge



Dans un deuxième temps :
- repérez sur la carte Arduino une des broches notée 'GND' (c'est le -) et branchez un fil pour la relier jusqu'à la ligne bleue.
- repérez sur le capteur la broche notée 'GND' et reliez-la avec la ligne bleue.

Vous devriez maintenant avoir une carte Arduino, un capteur ultrason HC-SR04 et 4 fils comme sur la photo suivante :




Le capteur HC-SR04 est un capteur ultrason et fonctionne suivant le principe du sonar de la chauve-souris : un ultrason est émis, puis l’écho est réceptionné, la délai entre l’émission et la réception permet de calculer la distance de l'obstacle.
Sur le capteur il reste deux broches : 'Trig' et 'Echo' . Avec deux autres fils, reliez 'Trig' à la broche 'D3' de la carte Arduino et 'Echo' à la broche 'D4' . 'Trig' enverra un ultrason et 'Echo' réceptionnera l'écho...






Passons maintenant à la programmation de la carte Arduino :

Une petite video pour l'installation du logiciel,
Pensez bien à vérifier la configuration de la carte dans le menu 'Outils/ type de carte' et 'Outils/port' (choix de la carte et de son port). Pour plus de précisions ces sujets ont étés maintes fois traités comme ici.



Voici le code de test du capteur HCSR-04 présenté dans la vidéo :
#include <HCSR04.h>

UltraSonicDistanceSensor distanceSensor(3,4);  // Initialize sensor that uses digital pins 13 and 12.

void setup () {
    Serial.begin(9600);  // We initialize serial connection so that we could print values from sensor.
}

void loop () {
    // Every 500 miliseconds, do a measurement using the sensor and print the distance in centimeters.
    Serial.println(distanceSensor.measureDistanceCm());
    delay(500);
}

En allant ensuite consulter le traceur série, vous devriez voir une courbe apparaître :




Maintenant que le capteur est opérationnel, on va pouvoir brancher le servomoteur :
sur un servomoteur, nous avons 3 fils :
- le + (rouge)
- le - (noir ou marron)
- la mesure (jaune ou blanc)

Utilisez trois nouveaux fils pour prolonger ceux issus du moteurs


et connectez ceux-ci de la manière suivante :
le + vers la ligne rouge de la breadboard,
le - vers la ligne bleue de la breadboard
le 3ème vers la broche 'D9' de la carte Arduino




Reprenons maintenant notre code et modifions le pour prend en compte le moteur. On peut s'inspiré de l'exemple 'Knob' comme évoqué dans la vidéo d'installation du logiciel Arduino :

Attention les deux vidéos suivantes se superposent  pour montrer à la fois la partie code et la partie exécution du code :

Confection du code :



Voici le code qui permet de faire fonctionner notre barrière LEGO avec déclenchement par capteur Ultrason :


////////////////////////////////////////////////////////////////////////////////////////
// Le code suivant correspond au tutoriel présenté à cette adresse :                  //
// http://smag0.blogspot.com/2017/06/arduino-barriere-lego.html                       //
// L'objectif est de créér une barrière qui se lève lorsqu'un véhicule passe devant   //
// le capteur ultrason                                                                //
// Pensez à bien vérifier le type de carte et le port COM dans le menu 'Outils'       //
////////////////////////////////////////////////////////////////////////////////////////


/* Import de la librairie pour le capteur ultrason HCSR04
  et pour le servomoteur */
#include <HCSR04.h>
#include <Servo.h>

/* On créé un objet capteur ultrason (UltraSonicDistanceSensor)
  que l'on initialise sur les pins D3 pour TRIG et D4 pour ECHO*/
UltraSonicDistanceSensor capteur_distance(3, 4);

/* Creation d'un objet Servo pour contrôler le servomoteur */
Servo mon_servo;


/*  la fonction setup() permet de mettre en place l'environnement */
void setup () {
  /* - On initialise une connection série pour pouvoir afficher les
 valeurs dans le moniteur ou le traceur (menu Outils).
       - On indique que notre servomoteur est relié à la Pin 9
       - On positionne notre servomoteur à l'horizontale (180°)   */
  Serial.begin(9600);
  mon_servo.attach(9);
  mon_servo.write(180);
}


/* la fonction loop() boucle à l'infini,
 lit la valeur du capteur et actionne le moteur */
void loop () {
  /* on lit la distance en cm mesurée par le capteur grâce
 à la fonction measureDistanceCm de l'objet capteur_distance précédemment créé */
  int distance = capteur_distance.measureDistanceCm(); 
   /* on teste si la valeur est comprise entre 1 cm et 15 cm */   
  if ( distance > 1 && distance < 15 ) {  
    /* Si elle est comprise entre 1 cm et 15 cm
 on l'envoi à la connexion série pour l'afficher dans le moniteur ou le traceur */               
    Serial.println(distance);                            
/* On demande envoi un angle de 90° au servo moteur ce qui doit lever la barrière */ 
    mon_servo.write(90);                                 
    /* et on attend 3000 millisecondes = 3 secondes avant de continuer */
    delay(3000);
  } else {
    /* Sinon, la distance n'est pas comprise entre 1cm et 15 cm,
 on baisse la barrière en positionnant le servomoteur à 180° */
    mon_servo.write(180);                                 
  }
  /* On attend 500 millisecondes avant d'effectuer une nouvelle boucle (loop)
 et de lire la valeur suivante */
  delay(500);                                             
}


Exécution du code :





Qu'est-ce qu'il vous reste à faire ?
Trouver le moyen de fixer le servo-moteur à l'aide de briques et de plaques LEGO, ci dessous un exemple de ce que l'on peut faire :










arduino barriere LEGO ancien

Objets connectés, iot, Arduino, par où commencer ?

[[ CET ARTICLE EST UNE ANCIENNE VERSION, LA NOUVELLE VERSION EST DISPONIBLE ICI http://smag0.blogspot.com/2017/06/arduino-barriere-lego.html ]]


- niveau débutant, matériel requis aucun (carte Arduino ou Simulateur).
Si vous n'avez pas de carte Arduino, vous pouvez vous entraîner sur la simulation proposée par le site https://circuits.io/  . Pour chaque étape de ce tutoriel, on décrit d'abord la procédure avec la carte, puis avec le simulateur.

par exemple, à cette adresse, vous trouverez une version de la barrière LEGO ( cliquez sur "Start Simulation", puis sur l'un des deux boutons de la télécommande : triangle vers le haut, ou vers le bas pour activer le moteur dans un sens ou dans l'autre).

"La barrière LEGO, un bon projet pour débuter avec Arduino".


" ça serait bien, une barrière pour ma maison LEGO !
- Une barrière pour ta maison de LEGO, ok, qu'est-ce qu'il nous faut ? Un moteur pour actionner la barrière, et un moyen de la déclencher. Pour le moteur, on va utiliser un SG90, fourni avec la plupart des kits Arduino, et pour activer ce moteur ?? J'ai une Funduino Mega2560 qui traîne, on va voir ce qu'on peut faire avec, mais note que n'importe quelle carte Arduino, ou compatible doit faire l'affaire..."


Pour découvrir l'écosystème Arduino, nous allons donc voir aujourd'hui comment réaliser, étape par étape, une barrière LEGO.

On passe l'installation du logiciel, la connexion de la carte, et sa configuration (choix de la carte et de son port), ces sujets ont étés maintes fois traités comme ici, par exemple, le but étant ici de voir les étapes pour appréhender sa carte Arduino.

Admettons donc que vous l'ayez branchée sur le port USB, et que vous l'avez configurée (type de carte et port).

La première étape quand on veut utiliser une carte de ce type et de tester l'interaction avec, on va donc dans un premier temps tenter de lui envoyer des informations avec notre clavier.

Communiquer avec sa carte Arduino par le clavier.

Recevoir des informations envoyées par la carte.

https://circuits.io/circuits/5205037-recevoir-des-informations-envoyees-par-la-carte

La carte Arduino utilise une liaison série ( le cable USB par lequel vous l'avez branchée à votre PC). Pour voir ce qu'y se passe exactement, le logiciel Arduino est doté d'un "Moniteur Série" que l'on peut ouvrir dans le menu "Outils / Moniteur Série" ... Jusque là rien de bien compliqué.

Pour ouvrir la communication entre la carte et ce moniteur série, une instruction qui parle d'elle même  : 

Serial.begin(9600);

Serial = série, begin = démarre, 9600 = la vitesse à laquelle on souhaite communiquer avec la carte.
ceci va donc nous démarrer la communication... et pour écrire ? 

 Serial.print("Mon texte");

Vous l'aurez deviné : print = imprimer.

Bien nous avons maintenant le minimum pour attaquer notre premier programme... Ou presque... juste une petite chose avant d'y aller... dans l'éditeur Arduino, vous avez deux fonctions :

void setup(){

}
et

void loop(){

}

Ces deux fonctions sont essentielles pour le logiciel Arduino : setup représente l'initialisation du programme et loop est une boucle qui se répète à l'infini, enfin tant qu'on ne lui a pas demandé de s'arrêter ;-).

Donc pour notre premier programme, on va copier les deux instructions que l'on a vues concernant le moniteur série, à l'intérieur de la fonction setup(){ } 


void setup() {
 Serial.begin(9600);
 Serial.print("Mon texte");
}
 
void loop() {
 
}
    

Sauvegardez ce programme et "Téléversez-le" (c'est à dire envoyez-le vers la carte), ça peut se faire avec la flèche vers la droite dans le logiciel, ou par raccourcis clavier : Ctrl+r. 
D'autres raccourcis claviers qui vous seront utiles : Ctrl+s : sauvegarder et Ctrl+t : réorganiser votre code... ça peut toujours être utile.

Lorsque le logiciel /éditeur Arduino vous indique "Téléversement terminé", vous pouvez ouvrir le moniteur série (dans le menu outils ou par Ctrl+Maj+m ).
Vous devriez voir le moniteur s'ouvrir, et la ligne de texte " Mon texte" s'afficher.
Si ce n'est pas le cas, vérifier, que la vitesse de communication est bien de "9600 bauds" (en bas à droite du moniteur série.


Si vous n'avez pas de carte Arduino disponible, voici comment faire la même chose dans le simulateur CIRCUITS.IO : 

Une fois que vous êtes connecté sur le site https://circuits.io, cliquez sur "New", puis "New Electronics Lab" ("Nouveau" et "Nouveau Laboratoire Electronique").
Vous vous retrouvez alors avec la représentation d'un plaque d'essai, mais vide, on va y ajouter quelques composants, en commençant par une carte Arduino :
Cliquez sur le bouton "Components", agrandissez le bandeau qui s'est ouvert en bas ( en glissant sa limite supérieure vers le haut ), et parcourez les composants jusqu'à trouver le saint Graal, la carte "Arduino Uno R3", vous pouvez aussi facilement la trouver en tapant "uno" dans le moteur de recherche sur la droite.
Une fois que vous l'avez trouvée, glissez-la sur votre plaque d'essais et refermez le panneau des composants en cliquant à nouveau sur "Components".

Passez ensuite dans l'éditeur de code en cliquant sur le bouton "Code Editor" et de la même manière que précédemment, agrandissez ce panneau.

Un code est déjà présent, cette fois, c'est le code "Blink", qui veut dire "clignoter". Avant de l'effacer et de le remplacer par notre code de communication via le moniteur série (accessible ici par le bouton "Serial Monitor" en bas à droite), vous pouvez exécuter ce code en cliquant sur le bouton "Upload & Run" du panneau "Code Editor" ou le bouton "Start Simulation" à côté du bouton "Components" déjà vu précédemment.
L'exécution de ce code devrait faire clignoter la représentation d'une LED orange, à côté de la lettre "L", au dessus de "TX" et "RX", en plein milieu de la carte.

Si vous avez lancé le programme "Blink", stoppez la simulation par "Stop Simulation", évidemment.
Vous pouvez ensuite remplacer le code "Blink" par le code :

void setup() {
 Serial.begin(9600);
 Serial.print("Mon texte");
}
 
void loop() {
 
}


Exécutez-le ensuite par "Upload & Run" ou "Start Simulation".
Vérifiez que la carte affiche bien "Mon texte", en cliquant sur le bouton "Serial Monitor" si vous ne l'avez pas encore fait.

Bien, maintenant on en est au même point. Que ce soit la carte réelle ou la carte virtuelle, elle peut nous envoyer des informations avec l'instruction : Serial.print("Mon texte").

Vous pouvez continuez les tests en changeant le texte.
Si vous déplacez l'instruction Serial.print("Mon texte"), dans la fonction loop, et relancez la simulation, vous verrez votre ligne s'afficher à l'infini.

Envoyer des informations à la carte


Ok, maintenant que la carte peut nous parler, essayons de lui parler en retour.

Pour ce faire, on va également utiliser le moniteur série, mais dans l'autre sens.
A notre disposition, nous avons dans ce moniteur une zone de saisie, c'est là qu'il faudra taper notre texte à envoyer, et le bouton "Envoyer" (ou "Send" dans le simulateur).
Pour l'instant, si vous tapez du texte et cliquez sur le bouton "Envoyer", rien ne se passe, mais on va modifier notre programme pour qu'il "écoute" ce qu'on aura à lui dire...


A vos claviers... Prêts ? C'est parti !

D'abord, on va créer une variable au dessus de la fonction setup(){} pour pouvoir stocker le texte qui sera saisi au clavier... Appelons la, au hasard "saisie" mais vous pouvez lui donner le nom que vous voulez (à part quelques noms réservés).
On déclare donc une nouvelle variable de type "String" (chaîne de caractères) et de valeur vide  (="") :

String saisie = "";

nb : vous l'aurez certainement remarqué : les lignes ou blocs de commande se terminent par un point-virgule.

Ensuite pour que notre carte écoute ce que l'on a à lui dire, on va utiliser une méthode encore une fois liée à Serial.
d'abord :
Serial.available() pour available = diponible : on lui demande donc d'écouter/regarder si quelque chose est disponible dans Serial, c'est à dire dans le moniteur série, et si c'est le cas, on lui demandera de lire cette information et de la stocker dans la variable que nous avons précédemment créée. On pourra ensuite la manipuler, et en faire ce que l'on veut.


Comment ça se passe concrètement :
"Voir si quelque chose est disponible dans Serial" est traduit concrètement par Serail.available() > 0, c'est à dire que la longueur des choses disponibles dans Serial est plus longue que 0.
Pour tester, on utilise "if" sous la forme :

if (quelque chose){action} traduit par si 'quelque chose', alors 'action'.

On a parlé de la condition, mais qu'en est-il de l'action ?
Pour l'action, on va encore utiliser une méthode de Serial, la méthode Serial.readString(), qui veut dire "lire la chaîne de caractères".
Et une fois qu'on l'aura lue, on la stockera dans la variable "saisie" que l'on a déclarée par :
String saisie = "";

Ok, donc ? ça donne :

String saisie = "";                             // on déclare la variable 'saisie'

void setup() {                                   //on retrouve notre fonction 'setup' pour l'initialisation
  Serial.begin(9600);                        // on démarre la communication entre la carte et le moniteur série
  Serial.println("Mon texte");              /*  on teste l'affichage d'un premier texte, cela nous garantir que                                                                  la carte est bien opérationnelle */
}                                                      // fin de la fonction d'initialisation

void loop() {                                   // la fonction qui boucle est lancée
  if (Serial.available() > 0) {           // la carte teste pour savoir si quelque chose est disponible
    saisie = Serial.readString();        // si c'est le cas, elle lit l'information et la stocke dans la variable 'saisie'
    Serial.print("J'ai reçu : ");          // Elle affiche  "j'ai reçu :
    Serial.println(saisie);                 // et le contenu de ce qu'elle a reçu
  }
}

Nous avons ici de nouvelle choses :
les lignes de commentaires commencent par //
les commentaires sur plusieurs lignes sont délimités par /* et */
Serial.println() ajoute un retour à la ligne après le Serial.print();


Copiez ce code dans l'éditeur ou le simulateur, et "téléversez" ou lancez la simulation.
Rendez-vous ensuite dans le moniteur série, tapez du texte dans la zone appropriée et validez par "Envoyer" ou "Send".

La carte devrait vous répondre "J'ai reçu" suivi de votre texte.
Remarques pour le simulateur, le délai peut paraître long et le "ç" ne passe pas bien, mais vous devriez avoir une réponse !

Et voilà pour la première étape : comment communiquer avec la carte, dans un sens et dans l'autre.

Prochaine étape ?
Brancher le moteur de la barrière et le commander avec le clavier.

09/06/2018

Quand Spoggy s'attaque à Persée, Retour après la bataille

Bon dans le dernier article ( Quand Spoggy utilise Polymer pour s'attaquer à Persée... ), nous vous avions fait part de la stratégie que Spoggy comptait adopter pour s'attaquer à Persée...

Pour tout vous dire, la vraie attaque a eu lieu le weekend dernier, à la Cuisine du Web  et était organisée par l'équipe de Persée, lors de son premier hackathon : PerséeUP ... A noter également la complicité de l'équipe MuseomixAura et de quelques autres intervenants...

Super accueil, super conditions, super tout tout tout... Un hackathon tellement sympa qu'on aurait presque pu le faire en famille, m'enfin, je me comprend 😜...

Pour ceux qui débarque après la bataille, (et oui, il y en aura toujours, et c'est certainement mieux ainsi), il convient de rappeler ce qu'est Spoggy et en quoi l'assaut de Persée était une phase importante de son développement...

D'abord, Spoggy s'inscrit dans un projet plus vaste et a pour objectif de faciliter l'utilisation des données au format RDF pour tout un chacun, pour mon fils de 7 ans ou ma mère de .... non, restons corrects...

Pour le projet Smag0, il nous est en effet apparu plus judicieux de partir sur le format de données RDF qui permet l'interconnexion de bases de connaissances...



Chaque objet connecté, chaque robot possède une petite base de connaissances au format rdf ou un endpoint sparql...
(Fuseki est un simple fichier Zip à décompresser & ne nécessite que java8).

Spoggy doit être capable de se connecter à plusieurs triplestores ou endpoints, tels qu'un serveur Fuseki personnel, DBPedia, ou d'autres format comme celui par exemple de Semantic Forms

Spoggy correspond à l'interface utilisateur (en vert) vers les triplestore, et le triplestore Persée correspond à ce format, il est l'un des "Autres serveurs et sourtces RDF" (cadre rouge sur le schéma). 
Spoggy permet d'une part de créer des graphes RDF , mais la partie qui nous intéresse ici, c'est la restitution des informations sous forme visuelle... Et l'adaptation à Persée était un peu l'épreuve du feu pour Spoggy...
Lors du hackathon, plusieurs projets ont émergé dont un qui avait pour objectif de faciliter l'exploration des données Persée, par la navigation sous forme de graphe, en représentant les noeuds et les liens qui les unissent... C'était la brèche, je me suis engouffré avec mon Spoggy...

Une équipe au top, avec une Françoise passionnée de RDF, un Max chercheur-utilisateur, une Cécile qui avait déjà réfléchi a la visualisation/ navigation, un Karl et Baptiste développeurs, ça c'est pour les compétences générales, mais bien d'autres cachées... Pour l'occasion, j'avais même invité notre Jean-Marc, garant national de la régularité du RDF, qui ne s'est pas géné pour bousculer un peu l'équipe de Persée... 😏

Avec tout ça, les idées ont fusé, les post-it collés, on décollé, les marqueurs ont chauffé sur les dashboards... Une cohésion s'est installée rapidement entre des personnes qui ne s'étaient jamais rencontrées avant... C'est ça la force des hackathons...


Bon et concrètement qu'est ce que ça donne ?

Grâce aux requêtes de Karl et Cécile, Spoggy permet maintenant de naviguer de trois façons différentes dans les données de Persée : 
(a noter une fonctionnalité développée lors du hackathon n'a pas encore été intégrée dans les vidéos qui suivent, c'est l'affichage de la page correspondante de Persée, Persée semble bloquer l'inclusion de ses pages dans une iframe ? mais l'intégration d'un plugin Spoggy dans les pages Persée pourrait résoudre cet ecueil)

1 En utilisant une url paramétrée pour Spoggy :  


La première idée était d'inclure "un graphe de navigation" dans les pages de Persée, mais ne pouvant évidemment pas intervenir sur ces pages (à voir si un jour on pourra), nous avons fait l'inverse : inclure les données de Persée dans Spoggy. La transition peut être effectuée au moyen d'un bouton dans la page de Persée qui renverrait vers Spoggy avec comme paramètres les informations que l'on veut afficher : 

Attention, pour se brancher sur Persee, vous devez consulter Spoggy en http et non https !

par exemple la page Persée sur Pierre Bourdieu  (http://www.persee.fr/authority/30551 ) aurait un bouton qui renverrait vers Spoggy, ou afficherait le graphe via cette adresse (remplacer 'www' par 'data et 'authority' par 'person' : 


Pour un document tel que http://www.persee.fr/doc/ahess_0395-2649_1977_num_32_3_293828, remplacez simplement 'www' par 'data' : 





2 : Mode Exploration de Spoggy appliqué à Persée : 

En utilisant les "Requêtes prédéfinies de Karl & Cécile "





3: Spoggy en mode recherche textuelle sur les données de Persée : 






Et Maintenant ???

Il y a encore quelques requêtes à revoir, des filtres, et des aménagements...
petit rappel : 
- pour participer au développement de Spoggy, c'est sur le github heroku-spoggy
- pour apporter de nouvelles idées : utilisez le kanban de heroku-spoggy

A l'issue de tout ce travail, il semble important que les fournisseur de données via des triplestore, fournissent à leur utilisateurs, des points d'entrée, des requêtes génériques de : 
- exploration & de recherche ( en jaune dans le code ci-dessous),
- une fonction pour parser les résultats associée aux requêtes précédentes, pour transformer ces résultats en noeuds/liens utilisables par un outil de visualisation. (en vert dans le code ci-dessous),
- et des requêtes complémentaires en fonction du type de noeud sur lesquels on clic (en bleu dans le code ci-dessous)

Ceci devrait être faisable si les fournisseurs de données via triplestore fournissaient également un fichier json de présentation, de requêtes, de fonctions de parsing et de tout outil qui pourrait aider à explorer leur triplestore... 
Un exemple de ce à quoi cela pourrait ressembler est (a l'heure actuelle dans le fichier spoggy-endpoint, mais c'est certainement amené à changer pour généraliser la proicédure ;-) : 

{
name:'Persee',
description: "Le portail Persée\n \
Persée est un programme national de numérisation et de diffusion de collections de documents scientifiques.\
Sur son portail (www.persee.fr) plus de 200 collections de revues publiées de 1820 à nos jours sont disponibles.\
Le portail permet une recherche dans certaines métadonnées et le texte de plus de 700 000 documents et 500 000 illustrations. \
Les interfaces de recherche actuelles permettent d’exploiter trois index (documents, illustrations et auteurs) \
et elles sont dotées de fonctionnalités de tri, de facettes, etc.",
plus: 'http://data.persee.fr/ressources/le-triplestore-de-persee/',
url: 'http://data.persee.fr/sparql', // url: 'http://data.persee.fr',
image: 'https://www.persee.fr/static/persee.png',
actif: true,
selectionnable: true,
type: 'virtuoso',
read:true, write:false,
exploreQuery: {
query: 'SELECT DISTINCT ?s ?t ?sub \
WHERE {\
?s ?p bibo:Document.\
?s dcterms:title ?t.\
?s dcterms:subject ?sub.\
filter (lang(?sub) = "" || langMatches(lang(?sub), "fr"))\
} LIMIT 100' ,
typeResources:{
s: 'bibo:Document',
sub: 'Subjects'
},
parseToVis : function(app, results, endpointUrl,typeResources, group){
// var app = this;
var visRes = {nodes:[], edges:[]};
results.forEach(function(r){
console.log(r);
let node = {
id: app.visId(r.s.value),
type: null,
resourceType: typeResources.s,
uri: r.s.value,
label: app.visLabelSplit(app.visLabel(r.t.value)),
endpointUrl: endpointUrl,
color: "rgb(76,0,74)",
font: {
color: 'rgb(255,255,255)'
},
cid: group,
y: 2*Math.random()
}
var trouveN = visRes.nodes.find(function(element){
return node.id == element.id
});
if (trouveN) {
// console.log("TROUVE ")
// console.log(trouveN)
node = trouveN;
}else{
visRes.nodes.push(node);
}
let nodeSub = {
id: r.sub.value,
type: r.sub.type,
resourceType: typeResources.sub,
label: app.visLabelSplit(r.sub.value),
endpointUrl: endpointUrl,
color: "rgb(107,142,35)",
shape: "box",
cid: group,
y: 2*Math.random()
}
var trouveS = visRes.nodes.find(function(element){
return nodeSub.id == element.id
});
if (trouveS) {
// console.log("TROUVE ")
// console.log(trouveS)
nodeSub = trouveS;
}else{
visRes.nodes.push(nodeSub);
}
let eType = {from : node.id, to: nodeSub.id, label: "subject"}
if (!visRes.edges.includes(eType)){
visRes.edges.push(eType)
}
});
return visRes;
}
},
searchQuery : {
query: ' SELECT distinct * WHERE { ?s rdfs:label ?label . \
?s rdf:type ?type . \
OPTIONAL { ?s dcterms:title ?title .} \
FILTER(bif:contains(?label, "RECHERCHE")) . \
} LIMIT 100',
typeResource:'bibo:Document'
},
clickonNode: [
{type : "Personne",
detecteur: "http://xmlns.com/foaf/0.1/Person",
requete : 'PREFIX dcterms: <http://purl.org/dc/terms/> \
PREFIX foaf: <http://xmlns.com/foaf/0.1/> \
SELECT DISTINCT ?person ?name \
WHERE { \
?doc dcterms:creator <NODEID>. \
?doc dcterms:creator ?person. \
?person foaf:name ?name. \
}',
lienCree : "co-auteur"
},
{type : "Document",
detecteur: " a revoir",
requete : 'a revoir',
lienCree : "a revoir"
}
]
/* exploreQuery: 'select distinct ?Concept where {[] a ?Concept} LIMIT 100'*/
},
  




Vous retrouverez les développements complémentaires effectués lors du hackathon dans la branche Persée du repo github de Spoggy