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. utilisation : http://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)

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 ...

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>