13/03/2016

bigdata facile - une application Android pour visualiser, les informations sur un serveur bigdata perso

[ cet article fait partie de la série RDF FACILE - Mon petit BigData ]

Le but de ce post est de faciliter la construction d'une petite appli pour mettre à jour, consulter, visualiser les informations d'un serveur Fuseki (serveur RDF/Sparql), et de créer ainsi, notre petit #bigdata à nous ;-).

La première étape est d'avoir accès à un serveur Fuseki/Sparql. Pour ce faire, vous pouvez suivre les instructions décrites ici : http://smag0.blogspot.fr/2016/03/un-serveur-fuseki-rdf-bigdata-sur.html ou utiliser celui qui y est mentionné ( serveur de test : http://rdf-smag0.rhcloud.com/ )

Pour créer l'appli, on va utiliser ce qu'il y a de plus simple --> Pas la peine de se prendre la tête...


Créez un compte sur App inventor, et commencez un nouveau projet. ( Les flémards peuvent aussi piquer le code ici : http://ai2.appinventor.mit.edu/?galleryId=4993525195735040).

Si vous n'avez jamais pratiqué App Inventor, faites-vous la main avec les tutos, ou posez-vos questions en commentaire de ce post, on trouvera bien quelqu'un pour vous répondre...
Mais d'abord commençons par faire le point sur ce qui va nous être utile :
  1. une requête pour aller interroger le serveur : http://rdf-smag0.rhcloud.com/ds/query?query=select+*+where+%7B%3Fs%3Fp%3Fo%7D&output=json . Je sais, c'est un peu brut pour ceux qui ne connaissent pas le rdf, et les requêtes Sparql, mais ce n'est pas le sujet de cet article...
Entrons dans le vif du sujet
Lorsque vous ouvrez un nouveau projet sur App inventor, le premier écran est Screen1, on va en créer deux autres grâce au bouton "ajouter écran" (en admettant que vous ayez passé votre interface de App Inventor en français... si si, c'est possible, en haut à droite ).
Nos deux nouveaux écrans pourraient par exemple s'appeler "Visualisation" et "Saisie".
Sur l'écran Screen1, créez deux boutons pour accéder aux écrans que l'on vient de créer, et affectez leur le code pour ouvrir les écrans respectifs.
( Pour la bascule Designer / Bloc, utilisez les deux boutons "Designer" & "Blocs", juste au dessus du panneau "Propriétés" )




Avec les blocs : 




Attaquons-nous pour commencer à l'écran "Visualisation".
Pour voir ce que notre serveur a dans le ventre, on va ajouter un composant "WEB", on le trouve dans "Connectivité" de la "Palette". C'est lui qui se chargera de la requete.
Ajoutez aussi un bouton pour le retour sur l'écran d'accueil,  une "zone de texte" avec les propriétés Height et Width en "remplir parent", et "Nuance" en "Attente résultat", c'est là que l'on affichera le retour de la requête, dans un premier temps.


Et en backstage : 



Dans le mode "Blocs", Ajouter une variable , nommez-la "requeteTest" et donnez-lui la valeur : http://rdf-smag0.rhcloud.com/ds/query?query=select+*+where+%7B%3Fs%3Fp%3Fo%7D&output=json 
Complétez les blocs de codes comme l'image ci dessus : 

Quand "Visualisation initialise, faire " / mettre Web1.Url à obtenir global requestTest, appeler Web1.Obtenir

Quand Web1.Texte reçu, faire / Mettre TextBox1.Texte à / obtenir Contenu de réponse

et le code pour le retour sur la page d'accueil : 

Quand Bouton1Click, faire / Fermer l'écran

Vous pouvez déjà tester votre appli , le mieux , c'est avec le AI Compagnon, dans le menu "Connecté", mais c'est pas encore au point, repassez sur l'interface en anglais, orsque vous souhaitez tester votre application --> attention, verifiez que "contenu de réponse s'est bien traduit en "Content réponse" .

Si tout va bien, vous devriez voir appraitre dans la zone de texte, un truc qui ressemble à : 



{
  "head": {
    "vars": [ "s" , "p" , "o" ]
  } ,
  "results": {
    "bindings": [
      {
        "s": { "type": "uri" , "value": "http://example.org/dog1" } ,
        "p": { "type": "uri" , "value": "http://www.w3.org/1999/02/22-rdf-syntax-ns#type" } ,
        "o": { "type": "uri" , "value": "http://example.org/animal" }
      } ,
      {
        "s": { "type": "uri" , "value": "http://example.org/cat1" } ,
        "p": { "type": "uri" , "value": "http://www.w3.org/1999/02/22-rdf-syntax-ns#type" } ,
        "o": { "type": "uri" , "value": "http://example.org/cat" }
      } ,
      {
        "s": { "type": "uri" , "value": "http://example.org/cat" } ,
        "p": { "type": "uri" , "value": "http://www.w3.org/2000/01/rdf-schema#subClassOf" } ,
        "o": { "type": "uri" , "value": "http://example.org/animal" }
      } ,
      {
        "s": { "type": "uri" , "value": "http://example.org/zoo/host" } ,
        "p": { "type": "uri" , "value": "http://www.w3.org/2000/01/rdf-schema#range" } ,
        "o": { "type": "uri" , "value": "http://example.org/animal" }
      } ,
      {
        "s": { "type": "uri" , "value": "http://example.org/zoo1" } ,
        "p": { "type": "uri" , "value": "http://example.org/zoo/host" } ,
        "o": { "type": "uri" , "value": "http://example.org/cat2" }
      } ,
      {
        "s": { "type": "uri" , "value": "http://example.org/cat3" } ,
        "p": { "type": "uri" , "value": "http://www.w3.org/2002/07/owl#sameAs" } ,
        "o": { "type": "uri" , "value": "http://example.org/cat2" }
      }
    ]
  }
}


c'est le résultat de notre requete au format JSON !!! 
Yahou, Wahou, on a récupéré nos infos...
Et maintenant ???

Maintenant, nous plusieurs pistes :
1. modifier la requête pour qu'elle ne renvoie que les résultat qui nous intéressent, Thérèse.
2. traiter et mettre en forme ces données pour les afficher selon notre besoin,
3. créer la page de saisie pour insérer de nouvelles données sur notre serveur

Laquelle de ces trois pistes souhaitez-vous pour le prochain article ? 



[ cet article fait partie de la série RDF FACILE - Mon petit BigData ]



11/03/2016

Un serveur fuseki RDF bigdata sur openshift

[ cet article fait partie de la série RDF FACILE - Mon petit BigData ]


serveur de test : http://rdf-smag0.rhcloud.com/
- choisissez "Control Panel",
-  puis le Dataset "/ds",
- cliquez sur select,
-  un formulaire apparait, ou vous pouvez insérer des données (SPARQL Update) ou executer une requete (SPARQL Query))

repo github : https://github.com/scenaristeur/smag0-fuseki-rdf-openshift
(des problèmes de socket lorsque l'on tente d'utiliser la dernière version de Fuseki, donc on reste pour l'instant avec l'ancienne)


test pour insérer des données :


PREFIX rdf:   <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX rdfs:   <http://www.w3.org/2000/01/rdf-schema#>
PREFIX ex:   <http://example.org/>
PREFIX zoo:   <http://example.org/zoo/>
PREFIX owl: <http://www.w3.org/2002/07/owl#>


INSERT DATA {
GRAPH <http://example/bookStore>
{
ex:dog1    rdf:type         ex:animal .
ex:cat1    rdf:type         ex:cat .
ex:cat     rdfs:subClassOf  ex:animal .
zoo:host   rdfs:range       ex:animal .
ex:zoo1    zoo:host         ex:cat2 .
ex:cat3    owl:sameAs       ex:cat2 .
}
}



--> remplacez  le bloc  :
ex:dog1    rdf:type         ex:animal .
ex:cat1    rdf:type         ex:cat .
ex:cat     rdfs:subClassOf  ex:animal .
zoo:host   rdfs:range       ex:animal .
ex:zoo1    zoo:host         ex:cat2 .
ex:cat3    owl:sameAs       ex:cat2 .

par les triplets que vous souhaitez ajouter



test pour récupérer des données : 

select * where {?s ?p ?o}

ce qui nous donne pour une requete GET , et des données de retour au format JSON,
 par exemple pour une appli
 avec APP INVENTOR ou PROCESSING,
ou encore depuis une page web en javascript  l'url :

http://rdf-smag0.rhcloud.com/ds/query?query=select+*+where+%7B%3Fs+%3Fp+%3Fo%7D&output=json

Par exemple, on peut utiliser App Inventor pour récupérer les données : http://smag0.blogspot.fr/2016/03/bigdata-facile-une-application-android.html

ensuite, complétez-là pour mettre à jour les données du serveur :
http://smag0.blogspot.fr/2016/03/big-data-facile-une-application-pour.html


[ cet article fait partie de la série RDF FACILE - Mon petit BigData ]



04/03/2016

Dreamcatcher 3D sous Meteor

Objectif, un graphMaker en 3D.
un environnement 3D, dans lequel on peut se déplacer au milieu des graphes.
un mélange de http://smag0.meteor.com  (pour la gestion des triplets /graphes )
et de https://github.com/JohnRodney/Meteor-VR-Pano-demo (pour les deplacements)
https://github.com/JohnRodney/meteor-vr-demo  (pour la gestion de objets cubes)

--> securisation et authentification -> meteor
--> 3D avec thrrejs


  1. installer meteor 
  2. creez votre app :  meteor create mon app
  3. aller dedans : cd monapp
  4. ajouter le package THREEJS : meteor add limemakers:three



Mon carnet, je l'ai volontairement perdu

le carnet volant .

Achetez un carnet,
ou trouvez-en un chez vous.
Piquez le à votre fille
 ou reliez quelques feuilles A4,
 pliées en 4 ...
 et notez dedans quelques idées,

 ce qui vous vient par la tête,
 ou ce qui vous vient par le coeur.
Notez ces pensées dans le carnet sus mentionné,
 comme elles vous viennent,
 retravaillez-les
 si vous le Souhaitez,
barrez,
 rognez,
 tournez,
ecrivez-les
 à l'envers,
 en verlan,
 en chantant,
 en notes,
en dessins,
 en uml,
 en mindmap
 ou en Rdf
et terminez
 par le mention :

 " ce carnet à été perdu volontairement.
Si vous lisez ceci,
 deux possibilités :
        - soit vous avez commencé par la fin,
        - soit vous avez lu depuis le début.

Si vous avez commencé par la fin,
 et que cela vous plait,
je vous invite à consulter le début.

Si vous avez déjà commencé par le debut,
 et que votre lecture vous a fait réagir,
 l'initiateur de ce carnet
 vous invite à écrire,
comme lui-même l'a fait,
 et a par la même occasion
 provoqué en vous
le plaisir
 de découvrir
de nouveaux points
 de vue,
externes aux vôtre,
 et à pu ainsi
 vous ouvrir
 une fenêtre sur le monde,
 ou sur un monde différent du voöôtre.

 Ce plaisir,
 vous pouūüvez vous aussi
 le procurer à des inconnunus,
 nus ou non...
n'est pas la gestion!

Pratuitement ou gresque!
 Oui mÔdÃm on vous demande
juste d'écrire à votre tour
 dans ce carnet,
 d'y inscrire quelques unes de vos pensées,
et de continuer la chaîne de 2 manières :
       - La première en perdant à nouveau ce carnet,
 pour qu'il soit trouvé par quelqu'un d'autre,
 et la seconde en renvoyant un autre carnet
que vous trouverez chez vous,
 piquerez à votre fille,
votre frère,
votre patron,...
 à la caissière de chez Leclerc,
ou au pilote
de l'avion,
au photo
graphe, à l'ontologiste...

en renvoyez
le à l'adresse postale
que vous trouverez à cette adresse
 web : http://smag0.blogspot.fr/NS/Personne/DavidF "


-- ( fin du message à noter à la fin du carnet ) --

 --> remplacez "David"
 par votre identifiant
sur le site Smag0
si vous en avez un,
ou trouvez une façon habile,
 facile.
 subtile,
maligne,
 pour donner à votre lecteur
 une dernière fois
 l'occasion de se creuser la tête
 avec vos écrits
ou votre esprit,
 de vous connaître.

Votre lecteur,
 qu'il ai apprécié vos écrits,
 ou se soit amusé
avec votre prouesse finale,
aura passé un bon moment,
ou aura,
tout du moins,
 j'ose espérer,
fait suivre
votre carnet en le perdant à son tour.

Et vous,  ???
vous aurez lancé une idée !
Peut-être fera-t-elle le tour du monde,
 si vos lecteurs sont captivés.
 Ira-t-elle dans l'espace ???

Imaginez,
 si un jour,
lorsque le ou les carnets
dont vous êtes l'initiateur
sera ou seront
 terminés,

 quelqu'un vous les renverra,

 et vous pourrez découvrir

 à votre tour

les idées

 et les pensées

que les vôtres


 auront apporté


 aux différents
 possesseurs temporaires
de votre carnet.


26/02/2016

Dreamcatcher V3 integration dans Meteor

in English, at the bottom of this post ;-)

La version hébergée sur Météor n'est plus, préférez la version "Autonome Collaboratif "







Nous en sommes maintenant à la V3 de Dreamcatcher : les plus curieux peuvent déjà y jeter un oeil : http://smag0.meteor.com/

  1.  v1 : http://smag-smag0.rhcloud.com/DreamCatcher/
    1. explications : http://smag0.blogspot.fr/2015/08/dreamcatcher-lattrape-reves.html
    2. Fonctionnalités :
      1. test de la bibliothèque de la bibliothèque traer pour processingjs pour gérer un environnement physique de répulsion, attraction des noeuds, deplacement à la souris, zoom avec les flèches (voir notice/help)
      2. test de drag&drop
      3. test d'integration, export de fichier rdf , n3
      4. sauvegarde de graphe avec touche "s" chargement des données depuis un serveur Fuseki, un sparql endpoint, via une requete sparl ou un service web hebergé ailleurs avec Java/Jena
      5. Creation de sessions pour travailler à plusieurs sur un graphe
    3. utilisationhttp://smag-smag0.rhcloud.com/DreamCatcher/help.html
  2. v2 : http://smag-smag0.rhcloud.com/DreamCatcher1/
    1. explications : http://smag0.blogspot.fr/2015/12/dreamcatcher-ou-comment-partager-des.html
    2. Fonctionnalités : une evolution de la V1, avec prise en charge de la 3D, grâce à P5JS, test égalment avec three.js 
    3. utilisation
      1. cliquer sur "charger Demo" puis sur afficher texte
      2. les curseurs permettent de zoomer, déplacer la caméra
  3. v3 ; http://smag0.meteor.com/
    1. explications : http://smag0.blogspot.fr/2016/02/dreamcatcher-v3-integration-dans-meteor.html
    2. besoin; besoin d'une identification, authentification pour partager, donner des droits sur les graphes, les sessions
    3. dépôt github : https://github.com/scenaristeur/dreamcatcher-smag0
    4. utilisation
      1. en arrivant sur la page d'accueil, on peut s'authentifier, ou créer son compte, 
      2. ensuite on peut créer un post ou participer aux post existants
        1. creer un post : rien de plus simple (attention aux lien, s'il existe déjà, ça empeche de créer le post)
        2. ajouter un triplet ou statement à un post existant, en insérant un sujet, une propriete, et un objet, et en validant. ce triplet/statement devrait s'insérer dans le graphe en haut de page . si aucun graphe n'apparait : revenez sur la page d'accueil, puis actualisez, ( tous les fichiers ne semblent pas encore chargés si on atterit directement sur un post)



version anglaise : 

Dreamcatcher V3 integration in Meteor
We are now in V3 Dreamcatcher: the curious can already have a look: http://smag0.meteor.com/

 v1: http://smag-smag0.rhcloud.com/DreamCatcher/
explanations http://smag0.blogspot.fr/2015/08/dreamcatcher-lattrape-reves.html
features:
test library for the library traer processing.js to manage a physical environment repulsion, attraction knots, displacement mouse, zoom with the mouse (see manual / help)
drag & drop test
integration testing, rdf file export, n3
Backup graph with "s" key data loading from a Fuseki server, endpoint sparql, via a request sparl or a hosted web service elsewhere with Java / Jena
Creation of sessions to work together on a graph
Use: http://smag-smag0.rhcloud.com/DreamCatcher/help.html
v2: http://smag-smag0.rhcloud.com/DreamCatcher1/
explanations http://smag0.blogspot.fr/2015/12/dreamcatcher-ou-comment-partager-des.html
Features: an evolution of the V1, with support of 3D, thanks to P5JS, égalment test Three.js
use :
click "Load Demo" and then display text
sliders allow you to zoom, move the camera
v3; http://smag0.meteor.com/
explanations http://smag0.blogspot.fr/2016/02/dreamcatcher-v3-integration-dans-meteor.html
need; require identification, authentication to share, give rights on graphs, sessions
use :
arriving on the home page, you can authenticate or create an account,
then you can create a post or participate in existing post
create a post: nothing simpler (watch link, if it exists, it prevents creating the post)
add a triplet or statement to an existing post, inserting a subject, a property and an object, and validating. this triplet / statement should be part of the graph to the top. if no graph will appear: return to the home page and then refresh, (all files do not yet appear directly responsible if it lands on a post)

19/02/2016

La halle Girard un lieu pour la Lyon French






Bonjour à tous !

Vous le savez sans doute en ayant suivi les activités de notre collectif OpenARA, nous allons répondre à l’appel d’offre de la Halle Girard (http://www.marchesonline.com/appels-offres/avis/concession-de-service-relative-a-la-gestion-et-l-anima/ao-6844828-1)

Qu’est ce que c’est ?

Il s’agit de la concession de service relative à la gestion et l'animation du bâtiment Totem de la French Tech de Lyon.

Le progrès de Lyon résume ainsi : « Dès 2017, un petit bout du monde, très agité, des technologies nouvelles. Ici se réalisera en effet, « le futur lieu Totem de la French Tech » et « la véritable vitrine de la filière numérique lyonnaise ».

Le réseau OpenARA, c’est à dire nous tous (!), avons décidé de tenter notre chance en répondant à cet appel d’offre. Ce n’est pas tout OpenARA qui répond, conformément à nos principes depuis le début de cette aventure, c’est tout ceux qui le peuvent et le désirent. Nous respectons les engagements que nous avons pris en commun : toute la construction de ce dossier est ouverte et disponible, chacun d’entre vous est appelé à se manifester et à contribuer au dossier.

Cela peut paraitre un peu complexe de prime abord, mais ...

NOUS AVONS BESOIN DE LA CONTRIBUTION DE CHACUN AU DOSSIER POUR POUVOIR RÉPONDRE DANS LES DÉLAIS

soit ... le 4 mars !

Les liens utiles
- vers le Drive Totem:
https://drive.google.com/folderview?id=0B2mWkS5A4S81LXMyX2NUNFVtX1U&usp=sharing

- vers le Hackpad Totem pour le suivi de l’avancement :
https://hackpad.com/Btiment-Totem-qad0kuO3nTS

- Recrutement des membres du consortium avant le 20 Février, à chacun de nous d'indiquer dans ce tableur qui il va contacter (cette liste permet l'ajout d'autres "prospects", si vous en sentez l'opportunité)
https://docs.google.com/spreadsheets/d/1Pgm3jQ7wv63B_XLsJAkveKo6FVPp3XWRk31rXKirLaQ/edit?usp=sharing

Le forum slack d’OpenARA :
Pour mémoire, chacun est invité également à participer aux discussions sur
https://openara.slack.com
(ouvert à tous sur simple demande par mail à l’un des membres à moi par exemple)

Il s'agit d'une occasion rare de se réapproprier un système et d'en faire quelque chose de sympa et d’utile pour tous.

Merci de faire passer ces éléments à toutes les personnes et organisations capables de contribuer à une réponse collective rapide ! N’hésitez pas à contribuer vous-même.

Tous les membres du réseau peuvent répondre à vos questions ou pour tout point et coordination.

Quelques contacts :
Benjamin CHOW PETIT : benjaminchowpetit@gmail.com ou06.95.07.00.51
Pierre AUMONT : pierre.aumont@gmail.com ou 06 68 38 46 03
RIEUL TECHER : rieul.techer@gmail.com

A bientôt dans les documents !
Pierre, Benjamin, Connie, Rieul, Rémy, Kévin, Virgil, Emmanuel, Stéphane, Xavier, Adrien, Samuel, Nicolas etc ...


07/02/2016

Insert d'informations sur un serveur Fuseki, post

1. installer fuseki pour qu'il soit accessible sur http://127.0.0.1:3030

2. creer un fichier smag.html  dans le repertoire webapp du serveur fuseki, avec le contenu qui suit et y accéder via http://127.0.0.1:3030/smag.html


<!DOCTYPE html>
<!-- https://github.com/scenaristeur/coolitude4/blob/master/Coolitude4/src/org/favedave/smag0/coolitude4/projet/Projet.java -->

<html>
    <body>
  
  
    </body>
   <script>
var debutRequete = "INSERT DATA { GRAPH <http://example/bookStore> {";
var finRequete = "} }";
var data="test";

</script>


<script>
function post(path, params, method) {
    method = method || "post"; // Set method to post by default if not specified.

    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);
console.log(params);

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
         }
    }


  
  
       document.body.appendChild(form);

    form.submit();
}



<!--post('/contact/', {name: 'Johnny Bravo'}); -->
//post('http://127.0.0.1:3030/test/update', {"update" : update});


function constructRequete(){

 var update  =  "PREFIX rdf:   <http://www.w3.org/1999/02/22-rdf-syntax-ns#> ";
 update +=  "PREFIX rdfs:   <http://www.w3.org/2000/01/rdf-schema#>";
     update += "PREFIX smag:   <http://smag0.blogspot.fr/NS#>";
     update += "PREFIX zoo:   <http://example.org/zoo#>";
     update += "PREFIX owl: <http://www.w3.org/2002/07/owl#>";
     update += "PREFIX ex: <http://example.org#>";
update+= "INSERT DATA {";
 //update += "GRAPH <http://smag0.blogspot.fr/GraphTest>{";
  //update += "smag:RobokIze    rdf:type         smag:Site .";
  //update +="smag:RobokIze   smag:objectif         'un site de vente revente piece detachees , pour robots, et objets connectes' ." ;
//     update += "ex:cat     rdfs:subClassOf  ex:animal .";
//     update += "zoo:host   rdfs:range       ex:animal .";
//     update += "ex:zoo1    zoo:host         ex:cat2 .";
//     update += "ex:cat3    owl:sameAs       ex:cat2 .";
//    update += "ex:cat3    owl:sameAs       ex:cat2 .";
  
    var sujet=document.getElementById("sujet").value;
    var propriete=document.getElementById("propriete").value;
    var objet=document.getElementById("objet").value;
 update += "smag:"+sujet+"    smag:"+propriete+"         smag:"+objet+" .";

 // fin requete avec graphe var finRequete = "} }";
 var finRequete = "}"; // fin requete sans graphe

update+=finRequete;
console.log(update);


post('http://127.0.0.1:3030/test/update', {"update" : update});
    //console.log(update);
  
    //console.log(document.getElementById("sujet").value);
    //window.location.assign('http://127.0.0.1:3030/smag.html');
//modifier la pause créée par l'alerte --> ceci permet la mise à jour par la fonction post
    alert(update);
    maj();
}

function httpGetAsync(theUrl, callback)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
           callback(xmlHttp.responseText);
            //console.log(xmlHttp.responseText);
             //document.getElementById("result").innerHTML = xhttp.responseText;
    }
    xmlHttp.open("GET", theUrl, true); // true for asynchronous
    xmlHttp.send(null);
}

function updateDiv(data){
var myJSONOBJECT= eval('(' + data+ ')');
// ou var myJSONOBJECT= JSON.parse(data, reviver);
var bindings = myJSONOBJECT.results.bindings;
//console.log("update");
//var resultat="";
var list = document.getElementById('resultats');
while (list.firstChild) {
    list.removeChild(list.firstChild);
}
for(i in bindings) {
  var binding = bindings[i];
  //alert(binding); // a for-loop to print all the bindings
  sujet=binding.s.value.split("#")[1];
  propriete=binding.p.value.split("#")[1];
  objet=binding.o.value.split("#")[1];
//  resultat=sujet +" "+propriete+" "+objet;
 // console.log("resultat :"+resultat);
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(sujet));
entry.appendChild(document.createTextNode("  -> "));
entry.appendChild(document.createTextNode(propriete));
entry.appendChild(document.createTextNode("  -> "));
entry.appendChild(document.createTextNode(objet));
list.appendChild(entry);
}
//document.getElementById("result").innerHTML = resultat;

//var bindings = sr.results.bindings;

// JavaScript  for...in loop iterates
// through the properties of bindings array
// which are [0,1,length-1] as opposed to the
// array item.

//for(i in bindings) {
 // var binding = bindings[i];
 // alert(binding); // a for-loop to print all the bindings
//}

// The only difference here (a subtle one) is
// that the iterator variable is n as opposed to r
// n=name, r=row index
//for(i in bindings) {
  //var binding = bindings[i];
  //for(n in binding) {
  //  alert(binding[n].value); // a nested for-loop to print binding values
 // }
//}



}


function maj(){
//console.log('maj');
httpGetAsync('http://127.0.0.1:3030/test/query?query=select+*+where{%0D%0A%0D%0A%3Fs+%3Fp+%3Fo}%0D%0A&output=json',updateDiv);

}

</script>



<form name="form1" onsubmit="constructRequete()">
<input type="texte" name="q" value="a">

 <input type="submit">
</form>

<ul id="resultats"></ul>

<div id="result">

</div>

<script>

setInterval(function(){ maj(); }, 3000);
//maj();

            var inputSujet = document.createElement("input");
            inputSujet.setAttribute("type", "text");
            inputSujet.setAttribute("name", "sujet");
            inputSujet.setAttribute("id", "sujet");
            inputSujet.setAttribute("placeholder", "Sujet");
          
            form1.appendChild(inputSujet);
          
            var inputPropriete = document.createElement("input");
            inputPropriete.setAttribute("type", "text");
            inputPropriete.setAttribute("name", "propriete");
            inputPropriete.setAttribute("id", "propriete");
            inputPropriete.setAttribute("placeholder", "propriete");

            form1.appendChild(inputPropriete);
          
            var inputObjet = document.createElement("input");
            inputObjet.setAttribute("type", "text");
            inputObjet.setAttribute("name", "objet");
            inputObjet.setAttribute("id", "objet");
            inputObjet.setAttribute("placeholder", "Objet");

            form1.appendChild(inputObjet);
  
    // console.log(document.getElementById("sujet").value);
</script>


</html>