SmagYun, une Arduino Yùn préparée pour les développeurs Web et développeurs de jeux multi-joueurs

not french ? see this page in English
article suivant : SmagYun, Comment accéder aux fonctionnalités Arduino depuis Javascript

Smagyun, qu'est-ce que c'est ?

SmagYun est une préparation particulière de la carte Arduino Yun officielle.

SmagYun Démos : node avec socket.io pour le temps réel, threejs, p5js, phazer, babylon,

Pour commander une carte SmagYun déjà configurée, ou poser des questions : twitter @DFaveris ou  scenaristeur@gmail.com ou sms au 0671578914.

Vous pouvez vous balader avec et la brancher sur un chargeur de smartphone micro-usb, ou sur une batterie pour l'emmener ou vous voulez : dans le bus, au parc, en soirée...

ArduinoYun photo officielle

SmagYun est "tunnée" pour faciliter le développements en proposant un environnement prêt à l'emploi pour le développement d'applications multi-utilisateurs ou de jeux multi-joueurs en réseau local, fourni par un hotspot localisé. Ainsi vous jouez avec les gens qui sont à côté de vous... Une mini-console multi-joueurs...

Comme une Nintendo Switch? Non, pas vraiment, puisque là, chacun possède déjà la manette dans sa poche (son smartphone), de plus, on peut customiser les applications pour agir dans le monde réel, ce que ne fait pas la Nintendo Switch ( Accès aux fonctionnalités Arduino : moteurs, capteurs...) et pour trois fois moins cher que la Switch).

Ces jeux peuvent en effet utiliser les fonctionnalités de la carte Arduino ainsi que les fonctionnalités des smartphones comme contrôleur : accéléromètre, GPS, appareil photo, micro...

SmagYun facilite également la découverte de la programmation avec des outils simples (P5JS...), et de la robotique, la découverte de l'écosystème Arduino et des objets connectés (iot)...

+ Une communauté d'utilisateurs / développeurs pour partager les jeux et applications.

Sur SmagYun, on peut héberger des projets : Javascript, P5js, Threejs, nodejs, babylonjs, phazer, unity, python... Le php est également possible, mysql...



Pour des informations sur la carte Arduino Yun officielle, reportez-vous aux nombreuses documentations proposées sur l'un des deux sites Arduino officiels ou ailleurs sur le net, ça ne manque pas, ici on va parler de SmagYun...

Pour commander une carte SmagYun déjà configurée, ou poser des questions : twitter @DFaveris ou  scenaristeur@gmail.com ou sms au 0671578914.

Par où commencer ?

L'Arduino Yun est un peu particulière de par sa configuration : une puce Arduino et une puce Linux.

ArduinoYun utilisée par SmagYun

La préparation SmagYun vous permet de vous affranchir de la programmation de la partie Arduino et vous donne accès aux fonctionnalités Arduino directement depuis une page Web programmée en JavaScript.

Cette préparation transforme les 8Mb de stockage et les bascule sur la carte sd (8Go par exemple), elle inclue également l'installation des outils nécessaires pour vous faciliter les développements, comme l'installation de Nodejs, ou de lininoio. Vous n'avez qu'à la brancher et vous occuper du développement des applications/jeux comme décrit ci-dessous...

La carte SmagYun (ArduinoYun préparée par Smag0) fournit par défaut un hotspot wifi "Arduino-Yun-XXXXXXXXXX" sur lequel on peut connecter un ordinateur ou un smartphone.

SmagYun HotSpot Wifi Connexion

Une fois connecté à ce wifi, vous pouvez lancer votre navigateur à l'adresse http://192.168.240.1 pour voir la page d'accueil de la carte.

SmagYùn Accueil

1ère étape : Comment modifier la page d'accueil de SmagYun ?

La page d’accueil précitée peut être modifiée, c'est le fichier "index.html" du répertoire /www dans le système Linux de la carte.

SmagYun Modification de la page d'accueil

Pour y accéder plusieurs solutions s'offrent à vous :
- depuis la page d'accueil :
- rendez-vous dans la section Admin, et cliquez sur "ArduinoOs", saisissez le mot de passe de la carte (arduino par défaut, PENSEZ A LE CHANGER SI VOUS ETES ADMIN !!!!)

SmagYun Admin section

SmagYun ArduinoOs Login

- une fois entré dans l'interface ArduinoOs, cliquez sur l'icone Arduino en haut à gauche, puis sur Utilities, et file Manager. Vous avez ici accès à l'ensemble des fichiers du système Linux.

SmagYun FileManager

- sélectionnez sur la gauche "Arduino storage", et naviguez jusqu'au dossier /www

- double-cliquez sur index.html, et sélectionnez un éditeur de texte (code mirror ou textpad)

SmagYun Edition page d'accueil, sélection de l'éditeur

- faites les modifications souhaitées, et enregistrez votre fichier.

SmagYun Edition page d'accueil, Code-Mirror

- retournez à l'adresse http://192.168.240.1, vous devriez voir vos modifications apparaître.
 Ce n'est pas plus compliqué que cela.
Vous pouvez de cette manière customiser votre page et l'adapter à vos besoins.


Pour modifier les fichiers de la carte SmagYun, vous pouvez également utiliser :
- Winscp et Putty depuis Windows.
- Scp et ssh depuis Linux.
plus d'infos sur l'utilisation de WinSCP et putty avec la carte SmagYun dans l'article suivant.


Configurer Winscp et Putty avec l'adresse 192.168.240.1, et SCP pour Winscp.


le repertoire /www est un serveur web. sa configuration peut s'effectuer dans le fichier /etc/config/uhttpd

La pluplart des fichiers de config se trouve dans /etc ou /etc/config.
La configuration est modifiable via les commandes UCI

L'interface Arduinoos permet la plupart des opérations de gestion de la carte.
L'interface Luci permet également d'effectuer des opérations de la carte (basée sur OpenWrt)

Pour commander une carte SmagYun déjà configurée, ou poser des questions : twitter @DFaveris ou  scenaristeur@gmail.com ou sms au 0671578914.

Bien maintenant que l'on sait comment accéder aux fichiers et les modifier, tentons d'utiliser les fonctionnalités Arduino depuis Javascript :

SmagYun, Comment accéder aux fonctionnalités Arduino depuis Javascript

+
!! A compléter au plus vite !! avec :

Comment développer des applications / jeux multijoueurs sur la carte SmagYun ?

Des applications multi-utilisateurs et des jeux multi-joueurs
-> Le répertoire Root et l'utilisation de socket.io avec NodeJs

SmagYun Démos : node avec socket.io, threejs, p5js, phazer, babylon 

Utiliser les fonctionnalités Arduino depuis une page Web
-> exemple blink dans ide + node

Comment connecter SmagYun sur un réseau Existant Wifi, Ethernet

Qu'est-ce qu'un MAS ou système multi-agent ?

D'après le document Object-Oriented Simulator of Multi-Agent System for Temporally Rich Domains un MAS peut être défini ainsi :

MAS=(E, O, A, R, Op, LoU), (voir Ferber J. Multi-Agent Systems: An introduction to Distributed Artificial Intelligence, Adison-Wesley, 1999 )

where E is an environment, i.e. space which has a volume. In our experimental environment, E is a dynamical scene – a space with defined metrics. By knowing physical characteristics of objects (velocity, acceleration), and because of metric space, a temporal component can be assigned to each action. O is a set of objects situated in E. The objects are movable and/or stationary and they can be perceived by agents. A is an assembly of agents. Agents may be represented as specific objects (A⊆O) representing active entities with or without sensors. R is a set of temporal and some spatial relations among objects and agents. Op is a set of operations of agents, such as: perceiving, transforming and manipulation of objects. LoU is a set of, socalled, laws of the universe, which are common for the environment E.

Utilisation de Janus

SmagYun

Objectif :

 Console Multi-joueurs OpenSource : SMAGYUN

cet article a été déplacé là http://smag0.blogspot.fr/2017/08/smagyun-une-arduino-yun-preparee-pour.html

pour une autre vue du projet SmagYun, basée sur le projet Smag0,
- faites un tour ici : http://smag-cece4.firebaseapp.com/?search=SmagYun (attention cette interface met du temps à charger, la page reste blanche un bon moment )
- ou téléchargez les informations au format json à cette adresse
- vous pouvez aussi effectuer votre requête Sparql sur le endpoint https://rdf-smag0.rhcloud.com/ds/query
- requête pouvant être de la forme :
 SELECT * FROM <http://smag0.blogspot.fr/SparqlUpdate> WHERE { { <http://smag0.blogspot.fr/NS#SmagYun> ?Predicat ?Objet} UNION { ?Sujet ?Predicat <http://smag0.blogspot.fr/NS#SmagYun>  } }

pour commander une carte déjà configurée, ou poser des questions : twitter @DFaveris

Polocracy : Polymer pour l'holacracy

https://github.com/scenaristeur/Polocracy/tree/6bb1f9caba41ad8174f36cecbd7e7d1a13cac2d8

Arduino contrôler un servomoteur avec un capteur de distance

[[ une nouvelle version de cet article est disponible ici : http://smag0.blogspot.com/2017/06/arduino-barriere-lego.html ]]


Matériel :
- une carte Arduino
- un servomoteur (noir sur grd, rouge sur 5V, jaune sur pin 9)
- un capteur Ultrason HC-SR04 (noir sur grd, rouge sur 5V, trig sur pin 12, echo sur pin 11)

/* Utilisation du capteur Ultrason HC-SR04 pour contrôler un servomoteur*/

#include <Servo.h>

Servo myservo;  // create servo object to control a servo

// définition des broches utilisées 

int servo = 9;

int trig = 12; 

int echo = 11; 

long lecture_echo; 

long cm;

int val;

long lastCm = 0;

void setup() 

{ 

  myservo.attach(servo); 

  pinMode(trig, OUTPUT); 

  digitalWrite(trig, LOW); 

  pinMode(echo, INPUT); 

  Serial.begin(9600); 

}

void loop() 

{ 

  digitalWrite(trig, HIGH); 

  delayMicroseconds(10); 

  digitalWrite(trig, LOW); 

  lecture_echo = pulseIn(echo, HIGH); 

  cm = lecture_echo / 58; 

   int diff = int(abs(lastCm - cm)); // detection de grand saut

 if(diff < 30){ // seulement si diff est faible

  val = min(cm,179);

  if( val< 179){

   Serial.print(diff);

   Serial.print(" : ");

   Serial.println(val);

   myservo.write(val); 

 }

 }

  delay(10); 

      lastCm = cm; 

}

Google Polymer Openfisca Etalab

Un petit tutoriel pour apprendre à utiliser Openfisca de la DGFIP et d'Etalab, à partir de Polymer de Google.

OpenFisca propose une Web Api permettant de calculer prestations sociales, niveau de vie, impôts...
Polymer quand à lui permet de créer de jolies interfaces mobiles ou web à partir de webcomponents.

Prérequis

- Nodejs et npm (installé avec nodejs)

Installation de Polymer-cli

npm install -g polymer-cli

Création d'un dossier de travail 

mkdir my-app cd my-app

Création de l'application

polymer init

- choisissez la ligne starter-kit
- l'application polymer doit maintenant être installé, pour vérifier, vous pouvez la lancer en utilisant la commande "polyserve" et elle devrait être accessible à l'adresse http://localhost:8080

Deux dossier nous intéressent maintenant :
- "src", c'est le dossier principal de l'application
- "bower_components", c'est le dossier des éléments de Polymer (webcomponents)

Création de l'élément "openfisca-calcul"

on va se placer dans le dossier "bower_components", créer le dossier de l'élément et créer l'élément encore une fois avec "polymer init".

cd bower_components
mkdir openfisca-calcul
polymer init

et cette fois, on va choisir de créer un élément (a blank template element)

Insertion de l'élément "openfisca-calcul"

Maintenant que notre élément est créé, on peut l'insérer dans notre application.
Allez dans le dossier "src" et ouvrez le fichier "my-view1.html" avec votre éditeur préféré.

Deux étapes sont nécessaire pour insérer un élément : l'import et le positionnement.

L'import :
<link rel="import" href="../bower_components/openfisca-calcul/openfisca-calcul.html">

Le positionnement :
Ajoutez simplement une balise ouvrante fermante représentant l'élément :

<openfisca-calcul></openfisca-calcul>

Profitons en aussi pour supprimer le "<div class="card"> ... </div>" ... on le déplacera dans notre élément

Votre fichier my-view1.html devrait maintenant ressembler à ceci :

 <!--  
 @license  
 Copyright (c) 2016 The Polymer Project Authors. All rights reserved.  
 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt  
 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt  
 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt  
 Code distributed by Google as part of the polymer project is also  
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt  
 -->  
 <link rel="import" href="../bower_components/polymer/polymer.html">  
 <link rel="import" href="shared-styles.html">  
 <link rel="import" href="../bower_components/openfisca-calcul/openfisca-calcul.html">  
 <dom-module id="my-view1">  
  <template>  
   <style include="shared-styles">  
    :host {  
     display: block;  
     padding: 10px;  
    }  
   </style>  
      <openfisca-calcul></openfisca-calcul>  
  </template>  
  <script>  
   Polymer({  
    is: 'my-view1'  
   });  
  </script>  
 </dom-module>  

Construction de l'élément "openfisca-calcul"

Avec Polymer, on favorise la réutilisation d'éléments déjà existants.

On va ici avoir besoin de trois éléments différents : 

- un "paper-button" : un bouton pour lancer le calcul,

- un "iron-ajax" qui se chargera d'effectuer la requête vers l'adresse web de l'API d'Openfisca (https://api.openfisca.fr/api/1/calculate)

- un petit "paper-spinner" pour nous indiquer que l'application est en train de traiter la requete.

L'installation de ces trois éléments se fait tout simplement : commencer par vous positionner à la racine de votre application, là où se trouve le fichier "bower.json"

bower install --save paper-button iron-ajax paper-spinner

Maintenant que ces trois éléments sont disponibles pour notre application, il ne nous reste plus qu'à les intégrer... et leur tour est joué... enfin faudra aussi taper un peu de code, on est là pour ça, quand-même...

Pour l'intégration, on opère comme avec le fichier my-view1.html.
Editez le fichier "openfisca-calcul.html" situé dans "my-app/bower_components/openfisca-calcul", et ajoutez au début les lignes suivantes :

<link rel="import" href="../iron-ajax/iron-ajax.html"> <link rel="import" href="../paper-button/paper-button.html"> <link rel="import" href="../paper-spinner/paper-spinner.html">

Ajoutez par la même occasion la ligne suivante qui nous permettra de gérer les styles : 

<link rel="import" href="../../src/shared-styles.html">

Tant qu'on est sur les styles, intégrons les en modifiant la balise <style>...< /style>  ( dans le fichier "my-app/bower_components/openfisca-calcul/openfisca-calcul.html") et en la remplaçant par :

           <style include="shared-styles">  
                :host {  
                display: block;  
                padding: 10px;  
                }  
           </style>  

Après la balise <style> ainsi modifiée, insérée l'élément concernant la requête ajax en utilisant le code suivant :

           <iron-ajax  
           id="ajaxcalculate"  
           url="https://api.openfisca.fr/api/1/calculate"  
           body="{{data2send}}"  
           method="POST"  
           handle-as="json"  
           content-type="application/json"  
           on-response="handleResponse">  
           </iron-ajax>   

Quelques explications s'imposent :

• <iron-ajax>...</iron-ajax> : nous permet d'insérer l'élément iron-ajax qui s'occupe d'effctuer la requête.
• id="ajaxcalculate" : un id qui nous permettra d'identifier la requete lors de l'appui sur le bouton "Calcul"
•  url="https://api.openfisca.fr/api/1/calculate" : l'adresse url vers laquelle la requête va être envoyée
• body="{{data2send}}" : représente les données qui vont être envoyées à l'adresse url
• method="POST" : l'API openfisca n'accepte que le requêtes de type "POST"
• handle-as="json" : le format dans lequel on souhaite récupérer les données
• content-type="application/json" : le format dans lequel les données sont envoyées à l'API
• on-response="handleResponse" : la fonction "callback" exécutée lors les résultats arrivent de l'API

Et bien voilà... on a fait le principal, ne reste plus qu'à formater les données à envoyer et traiter les données reçues...

Tant qu'on y est, profitez-en pour insérer deux <div> : un pour le bouton "calcul" et un pour le résultat :

           <div class="card">  
                <div class="circle">0</div>                 
                <paper-button raised on-tap="calcul" value="CALCUL">CALCUL <paper-spinner id="spinner" alt="Calcul en cours"></paper-spinner></paper-button>  
           </div>  
           <div class="card">  
                <div class="circle">10</div>  
                <h1>Résultat</h1>  
                <p>Revenu disponible 2015 : {{revenuDisponible}} </p>  
           </div>  

Données à envoyer et résultat

Pour les données à insérer, il faut avouer que c'est un peu compliqué de communiquer avec l'API Openfisca, mais on y arrive :
Un objet JSON (JSONObject) avec un tableau (JSONArray) nommé "scenarios" et les "variables" que l'on souhaite obtenir en sortie.
Dans le scenario, on trouve un objet "testcase" et un/des "périodes".
Dans le testcase, on défini : "familles", "foyers_fiscaux", "menages" et "individus"...
Pour simplifier ici, on va prendre l'exemple fourni par la documentation d'Openfisca.
On défini les données que l'on va envoyer : "data2send" et les données que l'on aura en résultat : "revenuDisponible"

                     data2send : {  
                          type : Object,  
                          value : {  
                               "scenarios": [  
                               {  
                                    "test_case": {  
                                         "familles": [  
                                         {  
                                              "parents": ["individu0"]  
                                         }  
                                         ],  
                                         "foyers_fiscaux": [  
                                         {  
                                              "declarants": ["individu0"]  
                                         }  
                                         ],  
                                         "individus": [  
                                         {  
                                              "date_naissance": "1980-01-01",  
                                              "id": "individu0"  
                                         }  
                                         ],  
                                         "menages": [  
                                         {  
                                              "personne_de_reference": "individu0"  
                                         }  
                                         ]  
                                    },  
                                    "period": "2015"  
                               }  
                               ],  
                               "variables": ["revdisp","nivvie_net"]  
                          }  
                     },  
                     revenuDisponible : {  
                          type : String,  
                          value : ""  
                     }       

C'est presque terminé : il reste la fonction callback lorsque l'application reçoit le résultat et le bouton pour lancer la requête :

                /**  
                     * recupere et parse la reponse du serveur  
                     */  
                     handleResponse: function(data,error){  
                          var result=data.detail.response.value;  
                          console.log("RESULTATS");  
                          console.log(result);                 
                          this.$.spinner.active=false;  
                          for (var key in result) {  
                               if (result.hasOwnProperty(key)) {  
                                    var valeur=result[key];  
                                    console.log(key+" :");  
                                    console.log(valeur);  
                               }  
                          }                 
                          // entrer ensuite dans result pour avoir les details :   
                          //     console.log(result[0].menages[0].revdisp[2015]);  
                          for (var i in result){  
                               var resultat = result[i];  
                               console.log("Revenu disponible 2015 : "+resultat.menages[0].revdisp[2015]);  
                               console.log("Niveau de vie net 2015 : "+resultat.menages[0].nivvie_net[2015]);  
                               this.revenuDisponible=resultat.menages[0].revdisp[2015];  
                          }  
                     },  

                          calcul : function(){  
                               console.log(this.data2send);  
                               this.$.spinner.active=true;  
                               this.$.ajaxcalculate.generateRequest();       
                          }  

Et voilà... le tour est joué... y'a plus qu'à cliquer sur le bouton "CALCUL"....
Allez ... si j'étais pas très clair, je vous donne le code du fichier "openfisca-calcul"... A vous d'en faire bon usage... comme par exemple un comparateur de prestations en fonction de votre situation ...

 <link rel="import" href="../polymer/polymer.html">  
 <link rel="import" href="../../src/shared-styles.html">  
 <link rel="import" href="../iron-ajax/iron-ajax.html">  
 <link rel="import" href="../paper-button/paper-button.html">  
 <link rel="import" href="../paper-spinner/paper-spinner.html">  
 <!--  
      `openfisca-calcul`  
      @demo demo/index.html   
 -->  
 <dom-module id="openfisca-calcul">  
      <template>  
           <style include="shared-styles">  
                :host {  
                display: block;  
                padding: 10px;  
                }  
           </style>  
           <iron-ajax  
           id="ajaxcalculate"  
           url="https://api.openfisca.fr/api/1/calculate"  
           body="{{data2send}}"  
           method="POST"  
           handle-as="json"  
           content-type="application/json"  
           on-response="handleResponse">  
           </iron-ajax>   
           <div class="card">  
                <div class="circle">0</div>                 
                <paper-button raised on-tap="calcul" value="CALCUL">CALCUL <paper-spinner id="spinner" alt="Calcul en cours"></paper-spinner></paper-button>  
           </div>  
           <div class="card">  
                <div class="circle">10</div>  
                <h1>Résultat</h1>  
                <p>Revenu disponible 2015 : {{revenuDisponible}} </p>  
           </div>  
      </template>  
      <script>  
           Polymer({  
                is: 'openfisca-calcul',  
                properties: {  
                     data2send : {  
                          type : Object,  
                          value : {  
                               "scenarios": [  
                               {  
                                    "test_case": {  
                                         "familles": [  
                                         {  
                                              "parents": ["individu0"]  
                                         }  
                                         ],  
                                         "foyers_fiscaux": [  
                                         {  
                                              "declarants": ["individu0"]  
                                         }  
                                         ],  
                                         "individus": [  
                                         {  
                                              "date_naissance": "1980-01-01",  
                                              "id": "individu0"  
                                         }  
                                         ],  
                                         "menages": [  
                                         {  
                                              "personne_de_reference": "individu0"  
                                         }  
                                         ]  
                                    },  
                                    "period": "2015"  
                               }  
                               ],  
                               "variables": ["revdisp","nivvie_net"]  
                          }  
                     },  
                     revenuDisponible : {  
                          type : String,  
                          value : ""  
                     }       
                },  
                /**  
                     * recupere et parse la reponse du serveur  
                     */  
                     handleResponse: function(data,error){  
                          var result=data.detail.response.value;  
                          console.log("RESULTATS");  
                          console.log(result);                 
                          this.$.spinner.active=false;  
                          for (var key in result) {  
                               if (result.hasOwnProperty(key)) {  
                                    var valeur=result[key];  
                                    console.log(key+" :");  
                                    console.log(valeur);  
                               }  
                          }                 
                          // entrer ensuite dans result pour avoir les details :   
                          //     console.log(result[0].menages[0].revdisp[2015]);  
                          for (var i in result){  
                               var resultat = result[i];  
                               console.log("Revenu disponible 2015 : "+resultat.menages[0].revdisp[2015]);  
                               console.log("Niveau de vie net 2015 : "+resultat.menages[0].nivvie_net[2015]);  
                               this.revenuDisponible=resultat.menages[0].revdisp[2015];  
                          }  
                     },  
                     /**  
                          *  
                          */  
                          calcul : function(){  
                               console.log(this.data2send);  
                               this.$.spinner.active=true;  
                               this.$.ajaxcalculate.generateRequest();       
                          }  
                     });  
                </script>  
           </dom-module>  

Le code source est téléchargeable ici https://github.com/scenaristeur

Des questions ? des erreurs ? utilisez les commentaires ci-dessous ou le forum de l'article

Sparql update un Polymer element pour mettre a jour un sparql endpoint

Objectif de cet article : Créer un element Polymer pour mettre à jour un sparql endpoint (fuseki)

inspiration : https://www.youtube.com/watch?v=k1eR_3KqJms

premier test : sparql-statements (recupérer les infos RDF sur un serveur sparl / fuseki en utilisant iron-ajax)

serveur fuseki  : http://rdf-smag0.rhcloud.com/

prérequis :
installation de nodejs, yeoman

Polymer propose polymer:seed, un element modèle servant d'exemple pour la création d'elements Polymer.

Au boulot on va créer un element "sparql-update"
sous l'invite de commande dos tapez :

yo polymer:seed sparql-update

complétez avec vos infos -6> un module modèle est créé dans votre repertoire.
Pour le lancer utilisez la commande :  polyserve

Le nouvel element généré est accessible à l'adresse :
http://localhost:8080/components/sparql-update

quelques soucis parfois d'affichage, (un certain temps pour mettre à jour ? allez voir dans le fichier README.RD généré pour avoir différents liens et testez notamment celui-ci : http://localhost:8080/components/sparql-update/test/ ) , une page de tests devrait finir par s'afficher.

Ce qui nous intéresse, Thérèse , ensuite c'est le module lui-même, on utilisera deux pages :

• la page du module :  http://localhost:8080/components/sparql-update/
• la page de demo accessible par le bouton "DEMO" en haut à droite

Laisser le terminal ou vous avez lancez polyserve ouvert et ouvrez un autre terminal pour installer l'element "iron-ajax" avec la commande  : 

bower install --save PolymerElements/iron-ajax

et incorperez cet element dans sparql-update.html avec : <link rel="import" href="../iron-ajax/iron-ajax.html"> juste après <link rel="import" href="../polymer/polymer.html">

supprimer les elements inutiles dans le modeles : 

• dans le fichier  sparql-update.html 

.author dans template/style

et ne garder que "properties" dans la definition js de l'element : 

il ne devrait vous rester plus que ceci : 

<link rel="import" href="../polymer/polymer.html">

<link rel="import" href="../iron-ajax/iron-ajax.html">

<!--
An element providing a solution to update sparql endpoint like Fuseki.
(https://github.com/scenaristeur/sparql-update)

Example:

    <sparql-update></sparql-update>

Example:

    <sparql-update>
      <h2>Hello sparql-update</h2>
    </sparql-update>

@demo demo/index.html
@hero hero.svg
-->

<dom-module id="sparql-update">

  <template>

    <style>

      :host {

        display: block;

        box-sizing: border-box;

      }

    </style>

  </template>

  <script>

    Polymer({

      is: 'sparql-update',

      properties: {

       

      }

    });

  </script>

</dom-module>

Nous avons maintenant un élement propre et on va pouvoir y mettre notre propre (ou sale ?) code

On incorpore maintenant notre element "iron-ajax" qui va se charger d'effectuer la requete POST vers notre serveur Fuseki :

<iron-ajax/iron-ajaxauto
url=""
handle-as="json"
on-response="{{handleResponse}}"></iron-ajax>

le mieux c'est de jeter un oeil au code