tag:blogger.com,1999:blog-54343259895122628292024-03-26T11:47:23.426+01:00Smag0"Un robot qui range ma chambre"Smag0http://www.blogger.com/profile/00938895135265434540noreply@blogger.comBlogger146125tag:blogger.com,1999:blog-5434325989512262829.post-58814688007511881212024-03-26T10:51:00.000+01:002024-03-26T10:51:51.960+01:00un génie llm dans mon libreoffice<iframe width="480" height="270" src="https://youtube.com/embed/VUpspZo40_M?si=T3onxMPAWCeRFKu4" frameborder="0"></iframe>Smag0http://www.blogger.com/profile/00938895135265434540noreply@blogger.com0tag:blogger.com,1999:blog-5434325989512262829.post-50104810635793346792023-09-21T00:03:00.001+02:002023-09-21T00:03:27.302+02:00GitHub - OpenBMB/AgentVerse: 🤖 AgentVerse 🪐 provides a flexible framework that simplifies the process of building custom multi-agent environments for large language models (LLMs).<div dir="auto"><a href="https://github.com/OpenBMB/AgentVerse">https://github.com/OpenBMB/AgentVerse</a> </div> Smag0http://www.blogger.com/profile/00938895135265434540noreply@blogger.com0tag:blogger.com,1999:blog-5434325989512262829.post-16306748480555502882021-04-25T10:13:00.000+02:002021-04-25T10:13:02.834+02:00Le paradoxe de la décentralisation<p> Qui dit decentralisation dit eviter les points de convergences, les point de concentration, et preferer l'éclatement...</p><p>Ceci pour éviter les points de ruptures, les vulnérabilités concentrées... C'est toute la force d'un réseau decentralisés... </p><p>Mais c'est aussi sa plus grande faiblesse... vouloir à tout prix decentraliser permet certes une plus grande liberté, mais il manque une cohesion certaine, une synchronisation, des hubs qui permettent de rayonner les avancées effectuées par chacun des noeuds décentralisés... Décentralisé ne veut pas necessairement dire isolé... Autonome certes, mais relié... devient nécessaire de faire étinceler chaque connexion d'un réseau decentralisé...</p>Smag0http://www.blogger.com/profile/00938895135265434540noreply@blogger.com0tag:blogger.com,1999:blog-5434325989512262829.post-24988920898706943862021-01-13T09:30:00.001+01:002021-01-13T09:30:32.983+01:00obsolescence des compétences<div dir="ltr"><a href="https://www.journaldunet.com/management/ressources-humaines/1494837-obsolescence-des-competences-comment-identifier-les-salaries-concernes/?utm_campaign=Management_2021-01-12&utm_medium=email&seen=2&utm_source=MagNews&een=605ff1020b1a43afe5ce7ddd80c1b900">https://www.journaldunet.com/management/ressources-humaines/1494837-obsolescence-des-competences-comment-identifier-les-salaries-concernes/?utm_campaign=Management_2021-01-12&utm_medium=email&seen=2&utm_source=MagNews&een=605ff1020b1a43afe5ce7ddd80c1b900</a><br clear="all"><br>-- <br><div dir="ltr" class="gmail_signature" data-smartmail="gmail_signature"><div dir="ltr"><a href="http://smag0.blogspot.fr" target="_blank">http://smag0.blogspot.fr</a></div></div></div> Smag0http://www.blogger.com/profile/00938895135265434540noreply@blogger.com0tag:blogger.com,1999:blog-5434325989512262829.post-34990799999296260062021-01-01T13:12:00.003+01:002021-01-01T13:12:39.928+01:00Solid, Semapps, Community-server et les autres<p> Adios 2020, Hello 2021...</p><p>Pour tout le monde 2020 a été une année spéciale, évidemment... </p><p>Beaucoup d'organisations et de systèmes que l'on croyait stable ont été chamboulés et ont ou auront du mal à s'en remettre, sans parler de ceux qui étaient moins stables, vivotaient ou tentaient de survivre.</p><p>2020, c'est aussi pour beaucoup une opportunité pour se recentrer, redéfinir <b>"l'essentiel" 😜</b></p><p>Personnellement, j'ai pu continuer à explorer un peu plus le LinkedData, les bases de connaissances distribuées, ou les projets autour de Solid... </p><p>Et c'est le moment à mon avis de faire le, point sur ce qui se profile à l'horizon... </p><p>Après le Node Solid Server, en plus du 'SolidServer Entreprise' dont je n'ai pas encore eu la chance de tâter, deux serveurs semblent très prometteurs pour exposer des données compatibles avec les spécifications Solid... </p><p>- d'abord le community-server qui semble être le remplaçant du node-solid-server <a href="https://rubenverborgh.github.io/Solid-World-September-2020/#" target="_blank">Présentation</a><br /></p><p>- de l'autre côté du ring, le serveur Semapps <a href="https://semapps.org/blog" target="_blank">Présentation Semapps</a><br /></p><p>Mais ne vous inquiétez pas, il n'est pas ici question de compétition, mais plutôt d'un check des fonctionnalités existantes, tout en sachant que celles-ci évolueront des deux côtés, mais il est toujours bon de faire le point de temps et temps...ça évitera en tout cas de repartir à zéro à chaque fois...</p><p> </p><p><span style="font-family: georgia;"><span style="font-size: large;">Installation / Configuration</span></span></p><p><a href="https://github.com/solid/community-server" target="_blank"> - install de solid Community-Server</a><br /></p><p><a href="https://semapps.org/docs/guides/ldp-server" target="_blank">- install de Semapps</a> (Docker ne semble pas nécessaire -> <a href="https://dfaveris.medium.com/installer-semapps-sans-docker-b92f3574f07f" target="_blank">install de Semapps sans Docker</a> )</p><p> </p><p> après mure reflexion, il semble utile de créer un repo pour ce projet</p><p>--> la suite ici <a href="https://github.com/scenaristeur/solid-client">https://github.com/scenaristeur/solid-client</a><br /></p><p> </p><p> </p><p> </p><p>Envoi de données LDP</p><p> </p><p>semapps liste de containers prédéterminée --> voir comment créer des container <br /></p><p> exemple semapps : </p><div class="prism-code language-undefined codeBlock_3iAC" tabindex="0"><div class="codeBlockLines_b7E3" style="background-color: #292d3e; color: #bfc7d5;"><div class="token-line" style="color: #bfc7d5;"><span class="token plain">POST /persons HTTP/1.1</span></div><div class="token-line" style="color: #bfc7d5;"><span class="token plain">Host: localhost:3000</span></div><div class="token-line" style="color: #bfc7d5;"><span class="token plain">Content-Type: application/json</span></div><div class="token-line" style="color: #bfc7d5;"><span class="token plain">Accept: */*</span></div><div class="token-line" style="color: #bfc7d5;"><span class="token plain">Content-Length: 97</span></div><div class="token-line" style="color: #bfc7d5;"><span class="token plain" style="display: inline-block;">
</span></div><div class="token-line" style="color: #bfc7d5;"><span class="token plain">{</span></div><div class="token-line" style="color: #bfc7d5;"><span class="token plain"> "@context": "https://www.w3.org/ns/activitystreams",</span></div><div class="token-line" style="color: #bfc7d5;"><span class="token plain"> "type": "Person",</span></div><div class="token-line" style="color: #bfc7d5;"><span class="token plain"> "name": "Guillaume Cousin"</span></div><div class="token-line" style="color: #bfc7d5;"><span class="token plain">}</span></div></div></div><p><br />Content-type : application/json<br /><br />```<br />{<br /> "@context": "https://json-ld.org/contexts/person.jsonld",<br /> "@id": "http://dbpedia.org/resource/John_Lennon",<br /> "name": "John Lennon",<br /> "born": "1940-10-09",<br /> "spouse": "http://dbpedia.org/resource/Cynthia_Lennon"<br />}<br />```<br /><br /><br />```<br />{<br /> "@context": "https://json-ld.org/contexts/person.jsonld",<br /> "name": "Manu Sporny",<br /> "homepage": "http://manu.sporny.org/",<br /> "image": "http://manu.sporny.org/images/manu.png"<br />}<br />``` <br /></p><p><br /></p><p><br /></p><p><br /></p><p><br /></p>Smag0http://www.blogger.com/profile/00938895135265434540noreply@blogger.com0tag:blogger.com,1999:blog-5434325989512262829.post-36282672875292981542020-10-12T12:07:00.007+02:002020-10-12T16:52:30.384+02:00On repart à zéro<p> Savoir où l'on va.</p><p>Des idées, des projets, beaucoup de questions et d'inconnues.</p><p>Je ne peux pas tout faire tout seul, et il arrive un moment où la définition de rôles devient nécessaire. </p><p>Inspiré par l'holacratie, la décentralisation avec Solid, mes rencontres avec l'Assemblée Virtuelle & Stratinblox, <br /></p><p><b>Construire un projet Web </b> :</p><p> https://www.youtube.com/watch?v=VKecnqlbytQ&feature=youtu.be</p><p>Equipe du projet web, Raison d'être : Concevoir un site qui convertisse les visiteurs en clients<br /></p><p> nécessite les rôles suivants : </p><p> - chef de projet : interlocuteur principal, recueillir les demandes et coordonner tous les techniciens qui conçoivent le site. <br /></p><p> - web designer : </p><p>- intégrateur : </p><p>- developpeur : </p><p>- administrateur système : </p><p>- redacteur web : </p><p>- webmarketeur : </p><p>Etape1 : le chef de projet analyse les besoins & définit le cahier des charges. Réfléchit à
l'outil qui sera utilisé (site vitrine : Wordpress/Drupal, site marchand : Prestashop/Woocommerce) </p><p>Etape
2a : Rédacteur & webmarketeur établissent la liste des pages,
démarre la rédaction et optimisation pour le référencement -->
objectif : un site visible dans les moteurs de recherche (architecture
optimisée pour le SEO https://www.youtube.com/watch?v=vJ586FZnoxA , mot
clés, une page correspond à un sujet, gloomaps, draw.io, views =
rubriques, sitemap, page d'accueil :
https://www.youtube.com/watch?v=rB2Dypi36Zs)<br /></p><p>Etape 2b : Chef
de projet (+ Rédacteur + Webmarketeur) : conçoit la structure des
différents modèles de pages (Mockup ou Wireframe ou Zooning) -->
recherche d'ergonomie, expérience utilisateur</p><p>Etape 2c : le
webdesigner met son inspiration au service de la charte graphique,
--> mettre en valeur la marque. Propose un design moderne qui
s'adapte à toutes les tailles d'écran<br /></p><p>Etape 3a : Intégrateur :
code les maquettes graphiques --> donner vie aux maquettes que le
web designer a réalisé, intégration des contenus, texte, images et
vidéos</p><p>Etape 3b : Développeur créé les fonctionnalités spécifiques comme module de paiement, de réservation, de donation</p><p>Etape 4 : Administrateur système : sécuriser le site contre attaques & intrusions : hébergement, nom de domaine, https, ssl</p><p>Etape 5 : toute l'équipe : test & retests avant & après la mise en ligne -> garantir le bon fonctionnement du site</p><p>continuité : mise à jour des éléments techniques pour garantir le fonctionnement du site<br /></p><p><br /></p><p> </p><p>Démarrer une coopérative : </p><p>https://coopedia.starter.coop/fr/public-dashboard <br /></p><p>Etape 1 : identifier les besoins </p><p>Etape 2 : Motiver & inclure les membres </p><p>Etape 3 : Générer les idées d'affaires</p><p>Etape 4: Construire son prévisionnel</p><p>Etape 5 : Contacter une structure de support aux entreprises</p><p>Etape 6 : Monter une structure juridique <br /></p><p><br /></p><p>Code Buysse : </p><p>(Etapes :Monter une structure juridique, Identifier des besoins, Motiver et inclure les membres )
</p><div>
</div><p> </p><p>https://www.cera.coop/fr/coop%C3%A9ratives/info-et-recherche/documentation-et-publications/2020/20200904_f_la-gouvernance-des-cooperatives</p><p>& http://www.codebuysse.com/fr/why.aspx</p><p>& http://www.codebuysse.com/downloads/CodeBuysseIII_FR.pdf</p><p><br /></p><p>Monter sa boite </p><p>https://www.thefamily.co/ <br /></p><p>https://www.youtube.com/watch?v=Ho5TzMP6DxE</p><p>KOUDETAT <br /></p><p>https://www.koudetat.co/ <br /></p><p> Choisir son co-fondateur par son état d'esprit ( détermination, à quel point ils sont déterminés)</p><p>https://www.youtube.com/watch?v=KMc_ZrRgMM0</p><p>-> tout est important, rien est un détail (ne rien laisser passer, toujours obtenir le meilleur, quoi qu'on fasse)</p><p>- résistance au stress</p><p>- on passera plus de temps avec son cofondateur qu'avec son conjoint</p><p>- quelqu'un que l'on admire</p><p>-
admettre la part d'irrationnel dans la création d'une boîte :
psychologie des gens par rapport à leur tâches, courbe d'apprentissage
des gens avc qui on a envie de passer du temps</p><p>- top 10
entreprises the family : homogène dans le style de l'équipe, Star of
services : bourrins, -> chercher la singularité </p><p>- ATTENTION,
point d'inflexion : manque de confiance entre cofondateurs (film
Godfather). Attention aux politiques, dents longues. Tous les jours etre
drivé par ce que l'on a le plus envie de faire. Avoir un projet de vie
aligné avec l'existence d'un marché. Si pas de rêve -> employé, si
rêve : fondateur, entrepreneur. Ne pas s'accrocher à faire quelque chose
qui ne marche pas. Ne pas optimiser pour survivre, mais pour vivre dans
l'oppulence. Pivot : repartir de zéro. Traction : immédiat ou jamais. </p><p>Quand
ça ne décolle pas, repartir à zéro. AirBnb: "Si c'était ta dernière
idée à vivre, est-ce que tu bosserait pour moi", exemple une peinture ne
se corrige pas, chaque geste est un geste de chef d’œuvre, utilisation
de multiples croquis, on recommence, on peint, on jette, on peint, on
jette. idem en musique, on recommence à Z.<br /></p><p>Devenir expert dans un sujet : travailler 10000 heures, 10 ans.</p><p>Savoir par quoi on est drivé</p><p>Entrepreneur
: prêt à faire n'importe quoi pour la croissance et la survie de la
boîte, être capable d'exécuter tout ce qu'il y a à faire au moment où il
faut le faire, avoir un goût de l'apprentissage permanent et de la
flexibilité permanente.</p><p>10 étapes de l'entrepreneur <br /></p><p>- 1 imaginer son idée (Minority report)</p><p>- 2 communiquer son idée et convaincre les gens</p><p>-
3 lever des fonds (tictac qui fait mal commence, tout le monde veut
donner de l'argent en seed, 300 000€ pour en faire 1 million) mais ça
n'a pas d'impact. ce qui a un impact, c'est le produit et les clients.
Garder seulement les choses qui amène produit & clients. Ensuite, ce
n'est pas à l'entrepreneur de faire tout ça, il sera le bouche trou car
légitime, la légitimité coûte cher. </p><p><br /></p><p>Business Model scalable (rendement d'échelle, plus il y a de client moins le client coûte cher) profitable, répétable.</p><p>Innover dans le business model. L'ensemble des briques logiques qui amène à construire un business et à amener de la valeur.</p><p>Caractéristique d'un Business model <br /></p><p>1> value proposition : qu'est-ce que vous offrez, à qui et comment vous le faites.</p><p>2> clients : qui sont-ils? caractéristiques, démographie, spécialisations <br /></p><p>3> distribution : comment connecter la value-proposition aux clients en question, systématique & en croissance<br /></p><p>4>
satisfaction client primordial : de quelle façon vous allez rendre
votre service client --> confiance du client (ex: Zappos)</p><p>5> partenariats : quels types de partenariat, quels types de partenaires</p><p>6>
ressources fondamentales dont on a besoin pour rendre l'entreprise
viable (diamant pour un bijoutier) ressource matérielle, virtuelle,
humaine, de talent. Startup : la startup croit, difficile à appréhender,
--> besoin de plus de ressource -> rendre viable le business
model , problème de ressource lors de croissance --> savoir gérer sa
croissance --> capacité à capter les ressources</p><p>7> Assets :
qu'est-ce que vous allez construire & qui a de la valeur dans le
long-terme, et qui permet de valoriser l'entreprise (exemple, la marque :
Frigidaire est une marque -> marque transformée en nom de produit)
-> produire une ressource qui est hyper valorisée par le marché et
qui permet e se distinguer<br /></p><p>8> structure de coût (maîtriser
les coûts) et structure de revenus. la façon de facturer, découle des
points précédents (Google : 8 ans avant d'avoir un business model) .
Pour réussir à avoir des revenus, il faut réussir à avoir de la valeur.</p><p><br /></p><p>Starup qui réussit (25 ingénieurs), petite PME : 10 millions de chiffre d'affaires en 4,5 ans <br /></p><p>Un ingénieur coûte en moyenne 200 000€ /an salaire, avantages, charges sociales<br /></p><p> Ne pas confondre quête de Business model & quête de pricing</p><p>Ne pas innover sur toutes les caractéristiques du business model.</p><p>Ne pas juste faire différent, faire mieux !</p><p>Un
secret n'est pas confidentiel : quelque chose que l'on peut dire à tout
le monde & que personne ne croira, quelque chose que vous savez
être vrai mais que personne ne comprend avant un certain temps ( Google :
le nombre de site internet allait exploser)</p><p>Une bonne idée de
startup paraît forcément mauvaise, elle est en avance sur son temps.
seul l'entrepreneur voit le futur au présent.</p><p>Construire, explore, chercher le business model est compliqué. <br /></p><p>Revenus artificiel, d'opportunité <> revenus de business model</p><p>Distinction startup (business model flou) <> Entreprise ( business model -> entraine une attente de revenus)</p><p>En quoi vous êtes différent? Qu'est-ce que fait la concurrence ?</p><p>Le
boulot de la startup est ce découvrir son business model, celui de
l'entreprise est d'écraser la concurrence. La startup ne doit pas se
focaliser sur la concurrence ( étudier la concurrence coûte cher et
risque de caricature) ignorer la concurrence , se focaliser sur sa
croissance, ses métriques internes. Comprendre le mécanisme qui amène la
croissance ascendante. Le marché est un sorte de lac. la startup est un
organisme qui évolue sur ce lac dans sa bulle.</p><p>Startup ne doit pas se focaliser sur la concurrence.</p><p>Une
startup n'est pas une entreprise, elle cherche son business model, à
assembler des les différentes briques du business model, avec les moyens
du bord.</p><p>Un entrepreneur (startup) ne fait pas le travail d'un chef d'entreprise (entreprise avec revenu et business model établit)<br /></p><p>2 types d'entrepreneur : </p><p>-Startup
Scalable : MAGICIEN (recommence & recommence jusqu'à trouver la
bonne formule magique) essaie de construire une entreprise scalable (la
croissance coûte de moins en moins cher) , coût fixes peuvent être
élevés, mais coût variables doivent être faibles : plus on a de clients,
moins ça coûte cher -> exponentiel. au début ça coûte cher, mais à
la longue le coût par client doit baisser. Tant que le sort magique
n'est pas sorti, on n'a rien, on peut n'avoir rien pendant longtemps.
Airbnb, 36 mois. <br />1 -> courbe de l'enthousiasme de l'initiation,<br /> 2 -> limbes du désespoir (s'écroule) début de la merdasse<br />3->
idée de lancer de nouvelles features mais n'est pas efficaces ->
continuer la merdasse -> chatouillis de faux espoirs, & on finit
par comprendre la value-proposition, la traction, premières liquidités,
puis évolution par plateaux (avec risques de vexation, crash
d'inaptitudes)<br /> </p><p>Starup scalable marche instantanément (ça peut
mettre longtemps) a de la croisssance immédiatement le jour où c'est le
bon concept, vous dépasse toujours dans vos attentes. -> les gens
sont plus enthousiastes que vous à propos de ce que vous faites
(facebook a été lancé avec 8 features) Regarder le feedback client pour
s'améliorer, mais pas pour prendre des décisions.</p><p>Toute personne qui vous deteste est un client déjà conquis<br /></p><p><br /></p><p>- Startup non scalable : TITAN : construite dans l'effort, chemin sûr, très peu de risques, mais efforts incomensurable</p><p><br /></p><p>Problème : Evaluer le problème : https://www.youtube.com/watch?v=qZBHw-8PVlE<br /></p><p>- pas juste une idée, mais résoudre un problème <br /></p><p>- problème en croissance --> opportunité de marché</p><p>-> est-ce que le problème est actuel et en croissance, est-ce que le problème est définissable ?</p><p>MARCHE : </p><p>- que l'on conquiert (concurrence, marketting) ou que l'on CONSTRUIT (concurrence et marketting ne comptent pas) ?</p><p>construire : à quel point on se projette dans le marché, à quel point toutes les projections sont réelles<br /></p><p><br /></p><p><br /><br /></p>Smag0http://www.blogger.com/profile/00938895135265434540noreply@blogger.com0tag:blogger.com,1999:blog-5434325989512262829.post-50090171158836232432020-09-02T23:58:00.000+02:002020-09-02T23:58:51.827+02:00Create a Popock module for Holacracy4.0 Tension<p>In this tutorial, we will see how to build your own module for <a href="https://scenaristeur.github.io/solid-vue-panes" target="_blank">Popock</a> webApp. </p><p></p><p>The source code of the project is on github ( <a href="https://github.com/scenaristeur/solid-vue-panes/">https://github.com/scenaristeur/solid-vue-panes/</a> ) .</p><p>Popock is build as a portal with different modules (inbox, chat, databrowser and many more) that uses <a href="https://solidproject.org/" target="_blank">Solid LinkedData platform</a> as a backend.</p><p> You can use <a href="https://scenaristeur.github.io/solid-vue-panes" target="_blank">Popock</a> at <a href="https://scenaristeur.github.io/solid-vue-panes">https://scenaristeur.github.io/solid-vue-panes</a><br /></p><p> Popock is one of the first Vuejs app I build, after playing a lot with Lit-Element (ex Polymer) webcomponents.</p><p>Solid LinkedData platform is a backend i really enjoy as one one the core principe is to allow anyone to store its data anywhere he want... </p><p>And link this data to other people or organization data without any third party.<br /></p><p>In this tutorial, we will create a first basic Solid Interaction, but before that lets retrieve Popock source code on your machine and create some basic file to host our module.</p><p>Then for the module, we will take the example of a simple form that store an <b>Holacracy Tension</b> on a SolidPod. ( Holacracy is a method of management that decentralize the power but it's not the purpose of this tuto. This tutorial is just to show you how to create a VueJs/Solid Module on Popock.</p><p>To understand what we do here, some html/css/javascript knowledge could be a very good start point, but we will try to make a tutorial as simple as possible, so if you just know how to use commandline to create files & folders on your machine, you should be able to follow what we talk about ;-).<br /></p><p> THis tutorial has benn tested on Windows10 & Linux Mint 19.2. If you encounter some issue, or have any question, please share it <a href="https://forum.solidproject.org/t/new-popock-design-feedback-welcome/3378" target="_blank">Solid Forum.</a></p><h2 style="text-align: left;">Prepare your Developer Environnement <br /></h2><p> Install if you don't have it already : </p><ul style="text-align: left;"><li>nodejs <a href="https://nodejs.org/en/download/">https://nodejs.org/en/download/</a><br /></li><li>git <a href="https://git-scm.com/downloads">https://git-scm.com/downloads</a><br /></li><li>vue-cli ( <code><span class="token function">npm</span> <span class="token function">install</span> -g @vue/cli ) <a href="https://cli.vuejs.org/">https://cli.vuejs.org/</a><br /><br /></code></li></ul><h2 style="text-align: left;"> Clone the repository (project source code)<br /></h2><p style="text-align: left;">Open a command line window or a terminal and use git clone to get project source code <br /></p><p style="text-align: left;"><i>git clone https://github.com/scenaristeur/solid-vue-panes.git</i></p><p style="text-align: left;">cd to the solid-vue-panes just created folder </p><p style="text-align: left;"><i>cd solid-vue-panes</i></p><p style="text-align: left;">The data structure of the project should look something like that </p><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-oLvGAuIITB8/X1APAgk7lDI/AAAAAAAAdD8/zbjtN8U9ky8vr7HxdRDdtI3UA75UO2cagCLcBGAsYHQ/s1379/project_structure.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1379" data-original-width="464" height="500" src="https://1.bp.blogspot.com/-oLvGAuIITB8/X1APAgk7lDI/AAAAAAAAdD8/zbjtN8U9ky8vr7HxdRDdtI3UA75UO2cagCLcBGAsYHQ/w169-h500/project_structure.png" width="169" /></a></div><p></p><p style="text-align: left;">As lot of nodejs projects, the node_modules folder only appears when you type<br /> </p><p style="text-align: left;"><i> npm install</i></p><p style="text-align: left;">so please type it to install project dependancies edicted in the package.json... <i></i></p><p style="text-align: left;">Some warning can be shown during dependencies installationbut that should end with something like </p><p style="text-align: left;"><i>xxx packages installed </i></p><p style="text-align: left;">If everyting is ok we can go futhrtmore, but if you encountered any problem or have question, remember to use the forum.</p><p style="text-align: left;">If everything is 'OK' just start the development server with </p><p style="text-align: left;"><i>npm run serve</i><br /></p><p style="text-align: left;"> </p><h2 style="text-align: left;"> Cre<span>ate the Tension-Module files</span><br /></h2><ol style="text-align: left;"><li>create <br /></li><li>view</li><li><br /></li></ol><p style="text-align: left;"> 1. First, in the <b>src/components/ folder</b>, create a folder named "<b>tension</b>" or anyother name, because at he end of this tutorial, the module should have been created...</p><p style="text-align: left;">This is where the major part of our module will reside, but to display it we will create a simple view that represent the root of our module. </p><p style="text-align: left;">In the <b>src/views/</b> folder, please create our <b>TensionView.vue</b> file.</p><p style="text-align: left;">You can duplicate the content the src/view/ModeleView.vue to get the starting content : </p><p style="text-align: left;"><b>src/views/TensionView.vue</b></p><p style="margin-left: 40px; text-align: left;"><template><br /> <div class="tension-view"><br /><!-- <Component /> --><br /></div><br /></template><br /><br /><script><br />// @ is an alias to /src<br /><br />export default {<br /> name: 'TensionView',<br /> /* components: {<br /> 'Component': () => import('@/components/Component'),<br />},*/<br />}<br /></script><br /><style><br />.tension-view {<br /> text-align: left;<br />}<br /></style><br /></p><p style="text-align: left;"> </p><p style="text-align: left;"> <br /></p><p style="text-align: left;"> </p><p style="text-align: left;"> </p><p style="text-align: left;"><br /></p><h2 style="text-align: left;"><br /></h2>Smag0http://www.blogger.com/profile/00938895135265434540noreply@blogger.com0tag:blogger.com,1999:blog-5434325989512262829.post-3892410628542414762020-06-12T17:19:00.000+02:002020-06-12T17:19:00.843+02:00Semapps to visjs<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
1 requete<br />
<br />
```<br />
const rawResponse = await fetch(this.params.source, {<br /> method: 'POST',<br /> headers: {<br /> 'Accept': 'application/ld+json',<br /> // 'Content-Type': 'application/json'<br /> },<br /> body: this.params.query<br /> });<br /> const triples = await rawResponse.json();<br /> console.log(triples);<br />
<br />
```<br />
<br />
une fois que tu recupéré tes triples<br />
<br />
````<br />
triples.forEach((t, i) => {<br /> let n_sub = {id: t.subject.value, label: app.localName(t.subject.value), title: t.subject.value}<br /> app.addNodeIfNotExist(n_sub)<br /> let n_obj = {id: t.object.value, label: app.localName(t.object.value), title: t.object.value}<br /> app.addNodeIfNotExist(n_obj)<br /> let edge = {from: n_sub.id, to: n_obj.id, label: app.localName(t.predicate.value), title: t.predicate.value}<br /> /* app.network.body.data.edges.update(edge)*/<br /> this.addEdgeIfNotExist(edge)<br /> this.network.fit();<br /> }); <br />
<br />
<br />
``` </div>
Smag0http://www.blogger.com/profile/00938895135265434540noreply@blogger.com0tag:blogger.com,1999:blog-5434325989512262829.post-21514446199851856682020-05-02T10:59:00.000+02:002020-05-02T11:00:28.693+02:00Solid & the Decentralized Web<div dir="ltr" style="text-align: left;" trbidi="on">
<ol style="text-align: left;">
<li>What is the Solid Project ?<br /><br /><br />Well first,<br />
there are lot of things whose name is Solid on the net, and in computer programming too...<br />
but the one we will discuss here is the project launched by <a href="https://en.wikipedia.org/wiki/Tim_Berners-Lee" target="_blank">Sir Tim Berners-Lee</a> (the man known as the inventor of web in 1989).<br />
<br />
Sure
that it's hard to say one man invented the web, as there was many
people that worked on it, but Tim wrote an important part to describe
all you use each day.<br />
<br />
Working at <a href="https://en.wikipedia.org/wiki/CERN" target="_blank">CERN</a>,
he proposed some tools to facilitate sharing and updating information
among researchers, by making first HTML pages, & describing how the
links works...<br />
<br />
<b>His goal was to provide each person a way to share what information he want.</b><br />
<br />
From this time, its "invention" has been reused a lot until now and many businesses use it...<br />
<br />
BUT,<br />
as
anyone knows, some companies use those technologies, but the user is
not the owner of its data. Those companies uses your data, to show you
ads that could interest you, sell your data...<br />
<br />
<br />
As the director of <a href="https://en.wikipedia.org/wiki/World_Wide_Web_Consortium" target="_blank">the W3C consortium</a>, Tim always applied to provide ways to share informations and to connect (<a href="https://en.wikipedia.org/wiki/Linked_data" target="_blank">LinkedData</a>) them and now he want to revert the tendance.<br />
<br />
The goal of Solid is to give back to each one a way to manage its data, to decide who he want to share one part of information.<br />
<br />
To do that, Tim created the company <a href="https://inrupt.com/solid" target="_blank">Inrupt</a> to help the <a href="https://solidproject.org/" target="_blank">Solid Project</a>.<br />
<br />
To know more about the Solid philosophy, check the Wikipedia page [ <a href="https://en.wikipedia.org/wiki/Solid_(web_decentralization_project)" target="_blank">English</a> ] [ <a href="https://fr.wikipedia.org/wiki/Solid_(projet_de_web_d%C3%A9centralis%C3%A9)" target="_blank">French</a> ]<br />
or the <a href="https://solidproject.org/" target="_blank">SolidProject</a><br />
an old page describing the <a href="https://solid.mit.edu/" target="_blank">Solid project</a><br />
<br />
<br />
The <a href="https://forum.solidproject.org/" target="_blank">Community Forum</a> is a good start and the newcomers are always welcomed to ask questions and<br />
more technical question can also be asked on <a href="https://gitter.im/solid/chat" target="_blank">gitter/Solid/chat</a><br />
</li>
<li> How Solid Works ?<br /><br />Building apps on Solid is really different as building apps in other ways. Whereas in current ways, data or information are stored in databases.<br />In the Solid philosophy, each user store its data on a POD and authorize apps to read its data or not.<br />For example, we could imagine a service provider that <br /></li>
<li><br /></li>
</ol>
<br />
<br />
<br /></div>
Smag0http://www.blogger.com/profile/00938895135265434540noreply@blogger.com0tag:blogger.com,1999:blog-5434325989512262829.post-1544510581552968532020-01-18T19:45:00.000+01:002020-01-18T19:51:36.585+01:00La Galaxie Solid<div dir="ltr" style="text-align: left;" trbidi="on">
<!--<div dir="ltr" style="text-align: left;" trbidi="on">
[Same post in English](https://spoggy.solid.community/public/plume/?post=https%3A%2F%2Fspoggy.solid.community%2Fpublic%2Fplume%2F1579364445870-solid-galaxy.ttl)<br />-->
Je vais vous emmener vers une nouvelle galaxie, la <b>Galaxie Solid</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.stockvault.net/data/2016/08/23/208216/preview16.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="487" data-original-width="780" height="199" src="https://www.stockvault.net/data/2016/08/23/208216/preview16.jpg" width="320" /></a></div>
<br />
<br />
<br />
Dans cette galaxie, approchons-nous de cette petite planète que nous voyons là-bas...<br />
<br />
Elle se nomme <b>Provider One</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://images.freeimages.com/images/large-previews/fc6/twin-planets-1530962.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="600" data-original-width="800" height="240" src="https://images.freeimages.com/images/large-previews/fc6/twin-planets-1530962.jpg" width="320" /></a></div>
<br />
<br />
Sur cette planète, chaque nouvel arrivant se voit attribuer une petite parcelle de terrain pour en faire ce que bon lui semble.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://mineskill.fr/wp-content/uploads/2013/06/2013-06-02_16.54.43.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="470" data-original-width="800" height="188" src="https://mineskill.fr/wp-content/uploads/2013/06/2013-06-02_16.54.43.png" width="320" /></a></div>
<br />
<br />
En faire ce que bon lui semble, comme par exemple, planter des carottes, des pommes, faire une piscine, une Tour Eiffel, monter un business, créer un château...<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://s3.amazonaws.com/nichesites-files/wwgdb_com/images/games/8446/gallery/24510.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="450" data-original-width="800" height="180" src="https://s3.amazonaws.com/nichesites-files/wwgdb_com/images/games/8446/gallery/24510.jpg" width="320" /></a></div>
<br />
<br />
<br />
Vous savez, comme dans "Minecraft", ou d'autres jeux courants, comme "Farm machin", ou le vieux "Sim city"...<br />
<br />
Voilà, en gros, chacun peut avoir un ou plusieurs espaces où il y fait ce qui lui plait, et dans votre parcelle, vous choisissez ce que vous exposez aux autres grâce aux espaces "Privé" & "Public" définis par défaut sur votre parcelle. Vous pouvez aussi definir des groupes d'utilisateurs et des niveaux d'accès. Nous reviendrons sur ces espaces.<br />
<br />
C'est vous qui décidez à qui vous donnez l'accès pour visiter votre château ou venir prendre des pommes.<br />
<br />
Mais attention, il y a une petite différence par rapport à ce que l'on a l'habitude de voir : ce n'est pas parce que quelqu'un vous prend des pommes que vous en avez moins.<br />
En fait c'est plutôt comme si elles étaient dupliquées ! Elles sont disponibles ppour les autres, mais vous les avez<br />
<br />
Par exemple, si j'ai un petit creux<br />
<br />
<br />
<br />
<br />
<br /></div>
Smag0http://www.blogger.com/profile/00938895135265434540noreply@blogger.com0tag:blogger.com,1999:blog-5434325989512262829.post-19236757670429235002020-01-18T17:19:00.001+01:002020-01-18T17:19:45.293+01:00Installation du Blog Plume sur mon POD Solid<div dir="ltr" style="text-align: left;" trbidi="on">
Solid ? Plume ?<br />
<br />
<a href="https://forum.solidproject.org/t/solid-plume-simple-blog-app/1681/71">https://forum.solidproject.org/t/solid-plume-simple-blog-app/1681/71</a><br />
<br />
Solid copy <a href="https://otman.solid.community/public/solid-file-client/examples/copy/">https://otman.solid.community/public/solid-file-client/examples/copy/</a><br />
<br />
<br />
```<br />
<div style="background-color: white; color: #222222; font-family: Helvetica, Arial, sans-serif; font-size: 14px;">
I’ve written an example <span class="highlight-strong" style="background-color: #ffffa6;">copy</span> app which can be used to install plume easily. It is based on the new solid-file-client which will hopefully be released soon, so it will likely be integrated in solid-filemanager in the future.</div>
<h2 style="background-color: white; color: #222222; font-family: Helvetica, Arial, sans-serif; font-size: 1.3195em; line-height: 1.2; margin: 30px 0px 10px;">
Installing</h2>
<div style="background-color: white; color: #222222; font-family: Helvetica, Arial, sans-serif; font-size: 14px;">
Open Solid <span class="highlight-strong" style="background-color: #ffffa6;">Copy</span> (currently available <a href="https://otman.solid.community/public/solid-file-client/examples/copy/" rel="nofollow noopener" style="background: transparent; color: #0088cc; cursor: pointer; overflow-wrap: break-word; text-decoration-line: none;">here <span class="badge badge-notification clicks" style="background-color: #e9e9e9; border-radius: 10px; border: none; color: #919191; display: inline-block; font-size: 0.7579em; line-height: 1; min-width: 8px; padding: 3px 5px; position: relative; text-align: center; top: -1px; vertical-align: middle; white-space: nowrap;" title="6 clicks">6</span></a>. In the future likely on the solid-file-client website)<br />
<span class="highlight-strong" style="background-color: #ffffa6;">Copy</span> from <a href="https://otman.inrupt.net/public/solid-plume-0.11/" rel="nofollow noopener" style="background: transparent; color: #0088cc; cursor: pointer; overflow-wrap: break-word; text-decoration-line: none;">https://otman.inrupt.net/public/solid-plume-0.11/ <span class="badge badge-notification clicks" style="background-color: #e9e9e9; border-radius: 10px; border: none; color: #919191; display: inline-block; font-size: 0.7579em; line-height: 1; min-width: 8px; padding: 3px 5px; position: relative; text-align: center; top: -1px; vertical-align: middle; white-space: nowrap;" title="4 clicks">4</span></a><br />
To <a href="https://your-pod.example.org/public/plume/" rel="nofollow noopener" style="background: transparent; color: #0088cc; cursor: pointer; overflow-wrap: break-word; text-decoration-line: none;">https://your-pod.example.org/public/plume/ <span class="badge badge-notification clicks" style="background-color: #e9e9e9; border-radius: 10px; border: none; color: #919191; display: inline-block; font-size: 0.7579em; line-height: 1; min-width: 8px; padding: 3px 5px; position: relative; text-align: center; top: -1px; vertical-align: middle; white-space: nowrap;" title="2 clicks">2</span></a><br />
Wait until it is finished…</div>
<div style="background-color: white; color: #222222; font-family: Helvetica, Arial, sans-serif; font-size: 14px;">
Then you need to edit and rename config-example.txt. For instance with solid-filemanager:</div>
<ul style="background-color: white; clear: both; color: #222222; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin: 0px; padding: 0px 0px 0px 40px;">
<li>Open <a href="https://otto-aa.github.io/solid-filemanager/" rel="nofollow noopener" style="background: transparent; color: #0088cc; cursor: pointer; overflow-wrap: break-word; text-decoration-line: none;">https://otto-aa.github.io/solid-filemanager/ <span class="badge badge-notification clicks" style="background-color: #e9e9e9; border-radius: 10px; border: none; color: #919191; display: inline-block; font-size: 0.7579em; line-height: 1; min-width: 8px; padding: 3px 5px; position: relative; text-align: center; top: -1px; vertical-align: middle; white-space: nowrap;" title="2 clicks">2</span></a></li>
<li>Login and open the plume directory</li>
<li>Right-click and edit config-example.txt (change the webId to yours and the title)</li>
<li>Right-click and rename config-example.txt to config.txt</li>
</ul>
<div style="background-color: white; color: #222222; font-family: Helvetica, Arial, sans-serif; font-size: 14px;">
Now plume should be installed on your pod and you can open plume in your browser (/public/plume/ without index.html at the end).</div>
<div style="background-color: white; color: #222222; font-family: Helvetica, Arial, sans-serif; font-size: 14px;">
<a class="mention" href="https://forum.solidproject.org/u/happybeing" style="background: rgb(233, 233, 233); border-radius: 8px; color: #646464; cursor: pointer; font-size: 0.93em; font-weight: bold; overflow-wrap: break-word; padding: 2px 4px; text-decoration-line: none;">@happybeing</a> If you want to be sure, that Solid <span class="highlight-strong" style="background-color: #ffffa6;">Copy</span> and the solid-plume-0.11 links are persistent, I’d suggest you to <span class="highlight-strong" style="background-color: #ffffa6;">copy</span> them to your pod. It could happen that they get deleted while I test stuff, or when I need more storage space…</div>
```<br />
<br />
Solid copy <a href="https://jeff-zucker.github.io/solid-file-client/docs/examples/">https://jeff-zucker.github.io/solid-file-client/docs/examples/</a></div>
Smag0http://www.blogger.com/profile/00938895135265434540noreply@blogger.com0tag:blogger.com,1999:blog-5434325989512262829.post-26012067068260201612019-09-14T17:05:00.000+02:002019-09-14T17:05:13.469+02:00La Barrière LEGO avec telecommande - Arduino<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Cet article fait suite à <a href="http://smag0.blogspot.com/2017/06/arduino-barriere-lego.html" target="_blank">l'article La Barrière LEGO</a><br />
<br />
Car c'est bien beau d'avoir une barrière LEGO qui se lève à l'approche d'un véhicule, seulement le problème, c'est une fois que l'on est passé, comment on fait pour revenir, car il n'y a pas de capteur de l'autre côté de la barrière...<br />
<br />
La solution est d'utiliser une télécommande, sur laquelle nous utiliserons deux boutons... un pour lever la barrière et l'autre pour la baisser !<br />
<br />
<video><br />
<br />
Prenez maintenant la télécommande et son capteur fournis dans le kit (voir <a href="http://smag0.blogspot.com/2017/06/arduino-barriere-lego.html" target="_blank">l'article La Barrière LEGO</a> pour vous procurer le kit )<br />
<br />
<br />
Sur la plaque du capteur infrarouge, repérez les broches S et -<br />
<br />
<table border="1px" style="font-family: arial; text-align: center;"><tbody>
<tr><th>PIN</th><th>Description</th><th>Couleur du câble</th><th>Connexion vers la carte ARDUINO</th></tr>
<tr><td>S</td><td>Sortie des données</td><td>marron</td><td>D11</td></tr>
<tr><td></td><td>3.3 - 5V</td><td>rouge</td><td> VCC / 5V</td></tr>
<tr><td>-</td><td>0V</td><td>noir</td><td> GND</td></tr>
</tbody></table>
</div>
<br />
--> Utilisez les câbles fournis avec la télécommande et reliez<br />
la pin S du capteur à la pin D11 de la carte Arduino<br />
la pin du milieu du capteur à la pin 5V / VCC de la carte Arduino<br />
la pin - du capteur<br />
<br />
<troisphotos branchements><br />
<br />
<br />
<br />
Installez la librairie IRremote et ouvrez l'exemple IRrecvDemo<br />
<trois photos install><br />
<br />
Nous n'allons pas nous servir du code hexadécimal de la touche, mais son code décimal. Pour ce faire, ajoutez la ligne<br />
<pre style="background-color: #eeeeee; white-space: pre-wrap; word-wrap: break-word;"><span style="color: red;"><b><span style="font-size: large;"> Serial.println(results.value);</span></b></span></pre>
<br />
comme indiqué dans le code ci-dessous :<br />
<br />
<pre style="background-color: #eeeeee; white-space: pre-wrap; word-wrap: break-word;"><div style="font-family: "times new roman"; font-size: medium; white-space: normal;">
#include <IRremote.h></div>
<span style="font-size: 12px;">
</span><div style="font-family: "times new roman"; font-size: medium; white-space: normal;">
</div>
<span style="font-size: 12px;">
</span><div style="font-family: "times new roman"; font-size: medium; white-space: normal;">
int RECV_PIN = 11;</div>
<span style="font-size: 12px;">
</span><div style="font-family: "times new roman"; font-size: medium; white-space: normal;">
</div>
<span style="font-size: 12px;">
</span><div style="font-family: "times new roman"; font-size: medium; white-space: normal;">
IRrecv irrecv(RECV_PIN);</div>
<span style="font-size: 12px;">
</span><div style="font-family: "times new roman"; font-size: medium; white-space: normal;">
</div>
<span style="font-size: 12px;">
</span><div style="font-family: "times new roman"; font-size: medium; white-space: normal;">
decode_results results;</div>
<span style="font-size: 12px;">
</span><div style="font-family: "times new roman"; font-size: medium; white-space: normal;">
</div>
<span style="font-size: 12px;">
</span><div style="font-family: "times new roman"; font-size: medium; white-space: normal;">
void setup()</div>
<span style="font-size: 12px;">
</span><div style="font-family: "times new roman"; font-size: medium; white-space: normal;">
{</div>
<span style="font-size: 12px;">
</span><div style="font-family: "times new roman"; font-size: medium; white-space: normal;">
Serial.begin(9600);</div>
<span style="font-size: 12px;">
</span><div style="font-family: "times new roman"; font-size: medium; white-space: normal;">
// In case the interrupt driver crashes on setup, give a clue</div>
<span style="font-size: 12px;">
</span><div style="font-family: "times new roman"; font-size: medium; white-space: normal;">
// to the user what's going on.</div>
<span style="font-size: 12px;">
</span><div style="font-family: "times new roman"; font-size: medium; white-space: normal;">
Serial.println("Enabling IRin");</div>
<span style="font-size: 12px;">
</span><div style="font-family: "times new roman"; font-size: medium; white-space: normal;">
irrecv.enableIRIn(); // Start the receiver</div>
<span style="font-size: 12px;">
</span><div style="font-family: "times new roman"; font-size: medium; white-space: normal;">
Serial.println("Enabled IRin");</div>
<span style="font-size: 12px;">
</span><div style="font-family: "times new roman"; font-size: medium; white-space: normal;">
}</div>
<span style="font-size: 12px;">
</span><div style="font-family: "times new roman"; font-size: medium; white-space: normal;">
</div>
<span style="font-size: 12px;">
</span><div style="font-family: "times new roman"; font-size: medium; white-space: normal;">
void loop() {</div>
<span style="font-size: 12px;">
</span><div style="font-family: "times new roman"; font-size: medium; white-space: normal;">
if (irrecv.decode(&results)) {</div>
<span style="font-size: 12px;">
</span><div style="font-family: "times new roman"; font-size: medium; white-space: normal;">
Serial.println(results.value, HEX);</div>
<span style="color: red;"><span style="font-size: 12px;"> </span><b><span style="font-size: large;"> Serial.println(results.value);</span></b></span><span style="font-size: 12px;">
</span><div style="font-family: "times new roman"; font-size: medium; white-space: normal;">
irrecv.resume(); // Receive the next value</div>
<div style="font-family: "times new roman"; font-size: medium; white-space: normal;">
}</div>
<div style="font-family: "times new roman"; font-size: medium; white-space: normal;">
delay(100);</div>
<div style="font-family: "times new roman"; font-size: medium; white-space: normal;">
}</div>
<span style="font-size: 12px;">
</span></pre>
<br />
Enregistrez ce code sous le nom de "Test_Telecommande" et téléverser-le sur la carte.<br />
<br />
<br />
Ouvrez le moniteur série (dans le menu Outils) et appuyez alternativement sur les touches "Fleche Haut" et "Fleche Bas" de la télécommande.<br />
Attention, si vous appuyez trop longtemps sur une touche, il peut arriver que les codes parasites "FFFFFFFF" et "4294967295", mais nous allons les gérer<br />
<div>
<br /></div>
<br />
<photo codes><br />
<br />
A chaque appui de touche, vous devriez voir apparaître un code correspondant à la touche appuyée . Moi j'ai pour :<br />
<br />
<table border="1px" style="font-family: arial; text-align: center;"><tbody>
<tr><th></th><th>Flèche HAUT</th><th>Flèche BAS</th></tr>
<tr><td>code hexadécimal</td><td>FF18E7</td><td>FF4AB5</td></tr>
<tr><td><span style="background-color: lime;">code décimal</span></td><td><span style="background-color: lime;">16718055</span></td><td><span style="background-color: lime;">16730805</span></td></tr>
</tbody></table>
<br />
<span style="background-color: lime;">Notez les codes que vous affiche le moniteur, ils peuvent être différents des miens !</span><br />
<span style="background-color: lime;"><br /></span>
<span style="background-color: lime;"><br /></span>
Modifiez maintenant le code de la manière suivante pour détecter l'appui sur les deux flèches "HAUT" et "BAS".<br />
<span style="background-color: lime;"><br /></span>
<span style="background-color: lime;"><br /></span>
<br />
<div>
<span style="background-color: red;"></span><br />
<span style="background-color: red;"></span><br />
<pre style="background-color: #eeeeee; word-wrap: break-word;"><div>
<span style="font-family: "times new roman";"><span style="white-space: normal;">#include <IRremote.h></span></span><br />
<span style="font-family: "times new roman";"><span style="white-space: normal;">
</span></span>
<span style="font-family: "times new roman";"><span style="white-space: normal;">int RECV_PIN = 11;</span></span><br />
<span style="font-family: "times new roman";"><span style="white-space: normal;">
</span></span>
<span style="font-family: "times new roman";"><span style="white-space: normal;">IRrecv irrecv(RECV_PIN);</span></span><br />
<span style="font-family: "times new roman";"><span style="white-space: normal;">
</span></span>
<span style="font-family: "times new roman";"><span style="white-space: normal;">decode_results results;</span></span><br />
<span style="font-family: "times new roman";"><span style="white-space: normal;">
</span></span>
<span style="font-family: "times new roman";"><span style="white-space: normal;">void setup()</span></span><br />
<span style="font-family: "times new roman";"><span style="white-space: normal;">{</span></span><br />
<span style="font-family: "times new roman";"><span style="white-space: normal;"> Serial.begin(9600);</span></span><br />
<span style="font-family: "times new roman";"><span style="white-space: normal;"> // In case the interrupt driver crashes on setup, give a clue</span></span><br />
<span style="font-family: "times new roman";"><span style="white-space: normal;"> // to the user what's going on.</span></span><br />
<span style="font-family: "times new roman";"><span style="white-space: normal;"> Serial.println("Enabling IRin");</span></span><br />
<span style="font-family: "times new roman";"><span style="white-space: normal;"> irrecv.enableIRIn(); // Start the receiver</span></span><br />
<span style="font-family: "times new roman";"><span style="white-space: normal;"> Serial.println("Enabled IRin");</span></span><br />
<span style="font-family: "times new roman";"><span style="white-space: normal;">}</span></span><br />
<span style="font-family: "times new roman";"><span style="white-space: normal;">
</span></span>
<span style="font-family: "times new roman";"><span style="white-space: normal;">void loop() {</span></span><br />
<span style="font-family: "times new roman";"><span style="white-space: normal;"> if (irrecv.decode(&results)) {</span></span><br />
<span style="font-family: "times new roman";"><span style="white-space: normal;"> <span style="color: red;">// </span>Serial.println(results.value, HEX);</span></span><br />
<span style="font-family: "times new roman";"><span style="white-space: normal;"> <span style="color: red;"> // </span>Serial.println(results.value);</span></span><br />
<span style="font-family: "times new roman";"><span style="white-space: normal;"> <span style="color: red;"> if (results.value == 16718055) {</span></span></span><br />
<span style="color: red; font-family: "times new roman";"><span style="white-space: normal;"> Serial.println("HAUT");</span></span><br />
<span style="color: red; font-family: "times new roman";"><span style="white-space: normal;"> } else if (results.value == 16730805) {</span></span><br />
<span style="color: red; font-family: "times new roman";"><span style="white-space: normal;"> Serial.println("BAS");</span></span><br />
<span style="color: red; font-family: "times new roman";"><span style="white-space: normal;"> } else {</span></span><br />
<span style="color: red; font-family: "times new roman";"><span style="white-space: normal;"> Serial.println(results.value);</span></span><br />
<span style="color: red; font-family: "times new roman";"><span style="white-space: normal;"> }</span></span><br />
<span style="font-family: "times new roman";"><span style="white-space: normal;"> irrecv.resume(); // Receive the next value</span></span><br />
<span style="font-family: "times new roman";"><span style="white-space: normal;"> }</span></span><br />
<span style="font-family: "times new roman";"><span style="white-space: normal;"> delay(100);</span></span><br />
<span style="font-family: "times new roman";"><span style="white-space: normal;">}</span></span></div>
</pre>
<span style="background-color: red;"><br /></span>
</div>
Enregistrez votre programme (que l'on appelle également Sketch chez Arduino), et téléversez-le sur la carte. Ouvrez-le moniteur série et appuyez successivement sur les touches "HAUT" et "BAS". Ces deux mots devraient maintenant s'afficher dans le moniteur :<br />
<br />
<photo moniteur haut bas><br />
<br />
On va maintenant utiliser deux fonctions leve_barriere() et baisse_barriere() dans lesquelles ont ajoutera le code contrôlant le servomoteur...<br />
<br />
Modifiez maintenant le code comme suit :<br />
<br />
<div style="background-color: #eeeeee; font-family: monospace; white-space: pre;">
<span style="font-family: "times new roman";"><span style="white-space: normal;">00);</span></span></div>
<div style="background-color: #eeeeee; font-family: monospace; white-space: pre;">
<span style="font-family: "times new roman";"><span style="white-space: normal;"><br /></span></span></div>
<br />
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">#include <IRremote.h></span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"><br /></span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">int RECV_PIN = 11;</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"><br /></span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">IRrecv irrecv(RECV_PIN);</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"><br /></span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">decode_results results;</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"><br /></span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">void setup()</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">{</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> Serial.begin(9600);</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> // In case the interrupt driver crashes on setup, give a clue</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> // to the user what's going on.</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> Serial.println("Enabling IRin");</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> irrecv.enableIRIn(); // Start the receiver</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> Serial.println("Enabled IRin");</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">}</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"><br /></span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">void loop() {</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> if (irrecv.decode(&results)) {</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> // Serial.println(results.value, HEX);</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> // Serial.println(results.value);</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> if (results.value == 16718055) {</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> <span style="color: red;"> leve_barriere();</span></span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> } else if (results.value == 16730805) {</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> <span style="color: red;">baisse_barriere();</span></span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> } else {</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> Serial.println(results.value);</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> }</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> irrecv.resume(); // Receive the next value</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> }</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> delay(100);</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">}</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"><br /></span></div>
<div style="background-color: #eeeeee;">
<span style="color: red; font-family: "times new roman";">void leve_barriere(){</span></div>
<div style="background-color: #eeeeee;">
<span style="color: red; font-family: "times new roman";"> Serial.println("HAUT dans la fonction");</span></div>
<div style="background-color: #eeeeee;">
<span style="color: red; font-family: "times new roman";">}</span></div>
<div style="background-color: #eeeeee;">
<span style="color: red; font-family: "times new roman";"><br /></span></div>
<div style="background-color: #eeeeee;">
<span style="color: red; font-family: "times new roman";">void baisse_barriere(){</span></div>
<div style="background-color: #eeeeee;">
<span style="color: red; font-family: "times new roman";"> Serial.println("BAS dans la fonction");</span></div>
<div style="background-color: #eeeeee;">
<span style="color: red; font-family: "times new roman";">}</span></div>
<br />
<br />
<photo leve barriere fonction><br />
<br />
<br />
Bien bien bien, pas mal jusque là... Il ne nous reste plus qu'à brancher le servomoteur comme dans <a href="http://smag0.blogspot.com/2017/06/arduino-barriere-lego.html" target="_blank">l'article précédent</a> sur la <span style="color: red;">PIN D9</span> et à ajouter le code qui gère ce moteur :<br />
<br />
Comme on n'a pas utilisé les lignes "bleus et rouges" pour le 5V et le GRND, on va juxtaposer les câbles d'alimentation du moteur à ceux du capteur infra rouge .<br />
<br />
<photos branchement moteur><br />
<br />
Un petit peu de copier/coller depuis le code produit dans l'article précédent, et votre code pourrait ressembler à ceci :<br />
<br />
<br />
<div style="background-color: #eeeeee;">
<br /></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"><br /></span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">#include <IRremote.h></span></div>
<div style="background-color: #eeeeee;">
<span style="color: red; font-family: "times new roman";">#include <Servo.h></span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"><br /></span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">int RECV_PIN = 11;</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"><br /></span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">IRrecv irrecv(RECV_PIN);</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"><br /></span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">decode_results results;</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"><br /></span></div>
<div style="background-color: #eeeeee;">
<span style="color: red; font-family: "times new roman";">/* Creation d'un objet Servo pour contrôler le servomoteur */</span></div>
<div style="background-color: #eeeeee;">
<span style="color: red; font-family: "times new roman";">Servo mon_servo;</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"><br /></span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">void setup()</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">{</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> Serial.begin(9600);</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> // In case the interrupt driver crashes on setup, give a clue</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> // to the user what's going on.</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> Serial.println("Enabling IRin");</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> irrecv.enableIRIn(); // Start the receiver</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> Serial.println("Enabled IRin");</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> <span style="color: red;"> mon_servo.attach(9);</span></span></div>
<div style="background-color: #eeeeee;">
<span style="color: red; font-family: "times new roman";"> mon_servo.write(180);</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">}</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"><br /></span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">void loop() {</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> if (irrecv.decode(&results)) {</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> // Serial.println(results.value, HEX);</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> // Serial.println(results.value);</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> if (results.value == 16718055) {</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> leve_barriere();</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> } else if (results.value == 16730805) {</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> baisse_barriere();</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> } else {</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> Serial.println(results.value);</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> }</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> irrecv.resume(); // Receive the next value</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> }</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> delay(100);</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">}</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"><br /></span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">void leve_barriere() {</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> Serial.println("HAUT dans la fonction");</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> <span style="color: red;">mon_servo.write(90);</span></span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">}</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"><br /></span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">void baisse_barriere() {</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> Serial.println("BAS dans la fonction");</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> <span style="color: red;">mon_servo.write(180);</span></span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">}</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"><br /></span></div>
<div style="background-color: #eeeeee;">
<br /></div>
<br />
<br />
<br />
ET voilà, notre Barrière LEGO télécommandée !!!!!<br />
<br />
<video ><br />
<br />
Ajouter des leds pour indiquer si l'on peut avancer ou pas ???<br />
<br />
Inspirez-vous de ce code : un mix des exemples Blink et Fade présents dans Fichier / Exmples / 01.Basic ou sur le <a href="https://www.arduino.cc/en/Tutorial/BuiltInExamples" target="_blank">site Arduino</a> --> vous aurez aussi des indications sur la manière de brancher vos leds si vous avez des doutes<br />
<br />
<br />
Connectez vos led sur les pin 5 et 7 de l'Arduino<br />
<span style="background-color: lime;">Sans oublier de les protéger par des resistances de 220 ohms ! </span><br />
<br />
<div style="background-color: #eeeeee;">
<br /></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">int led_rouge = 5;</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">int led_verte = 7;</span><span style="font-family: "times new roman";"> </span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">void setup() {</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> // initialize digital pin as an output.</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> pinMode(led_rouge, OUTPUT);</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> pinMode(led_vertee, OUTPUT);</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">}</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"><br /></span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">// the loop function runs over and over again forever</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">void loop() {</span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> digitalWrite(led_rouge, HIGH); </span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> digitalWrite(led_verte, LOW); </span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> delay(1000); </span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> digitalWrite(led_rouge, LOW); </span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> digitalWrite(led_verte, HIGH); </span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";"> delay(1000); </span></div>
<div style="background-color: #eeeeee;">
<span style="font-family: "times new roman";">}</span></div>
<div>
<span style="font-family: "times new roman";"><br /></span></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /></div>
Smag0http://www.blogger.com/profile/00938895135265434540noreply@blogger.com0tag:blogger.com,1999:blog-5434325989512262829.post-80611158999198819882019-06-25T15:03:00.000+02:002019-06-25T15:03:05.630+02:00Joystick pour controller la souris<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<a href="https://www.brainy-bits.com/arduino-joystick-tutorial/">https://www.brainy-bits.com/arduino-joystick-tutorial/</a><br />
<br />
<br />
<br />
// Arduino pin numbers<br />
const int SW_pin = 2; // digital pin connected to switch output<br />
const int X_pin = 0; // analog pin connected to X output<br />
const int Y_pin = 1; // analog pin connected to Y output<br />
<br />
void setup() {<br />
pinMode(SW_pin, INPUT);<br />
digitalWrite(SW_pin, HIGH);<br />
Serial.begin(115200);<br />
}<br />
<br />
void loop() {<br />
// Serial.print("Switch: ");<br />
// Serial.print(digitalRead(SW_pin));<br />
// Serial.print("\n");<br />
// Serial.print("X-axis: ");<br />
Serial.print(analogRead(X_pin));<br />
// Serial.print("\n");<br />
Serial.print(",");<br />
// Serial.print("Y-axis: ");<br />
Serial.println(analogRead(Y_pin));<br />
// Serial.print("\n\n");<br />
delay(50);<br />
}<br />
<br />
<br />
<br />
<br /></div>
Smag0http://www.blogger.com/profile/00938895135265434540noreply@blogger.com0tag:blogger.com,1999:blog-5434325989512262829.post-54873229571676879572019-05-04T08:06:00.001+02:002019-05-05T08:49:25.241+02:00OSrdf<p dir="ltr"><br>
OSrdf :</p>
<p dir="ltr">Organic System Resource Data File<br>
Organization System RDF<br>
Operating System Rewritten by David F<br>
or Something Ridiculous about ... ;-)</p>
<p dir="ltr">Un Operating System, système d'exploitation basé sur un système multi-agents, où tout est AGENT HOLACRATIQUE au sens Janus/SARL.</p>
<p dir="ltr">La machine est un agent<br>
Le système de fichier est un agent </p>
<p dir="ltr">https://medium.com/datadriveninvestor/writing-your-own-file-system-is-not-as-hard-as-you-may-think-aa4af09329cd</p>
<p dir="ltr">Un dossier, un fichier, un périphérique (écran, clavier, souris, imprimante 3D, carte reseau...) sont des agents<br>
Une donnée, un triplet, une ressource...<br>
Un utilisateur, une connexion, une page web, un clic de souris, un formulaire, un champ de formulaire, un bouton, un composant web ( basé sur github/scenaristeur/evejs) sont des agents</p>
<p dir="ltr">Des agents autonomes ayant chacun un but propre ou contribuant à un but plus général.</p>
<p dir="ltr">Les buts / raisons d'être / prochaines actions de chacun de ces agents pouvant être définies grâce à un système inspiré du management à la manière de l'holacratie. ( Cercle, rôle, raison d'être)...</p>
<p dir="ltr">-> Résultat, un système d'exploitation, Os qui se rapproche : <br>
- du cortex du cerveau humain ( des neurones interconnectés comme des noeuds d'un graphe Spoggy)<br>
- de l'organisation de notre holacratique <br>
- de notre vision limitée du monde et notre façon de le concevoir par association, découverte, apprentissage...</p>
<p dir="ltr">What about l'ordinateur quantique developpé par IBM et qui peine à trouver des applications ? Mais serait peut-être une opportunité pour ce genre d'OS ? <br></p>
Smag0http://www.blogger.com/profile/00938895135265434540noreply@blogger.com0tag:blogger.com,1999:blog-5434325989512262829.post-49575702970488972092018-08-19T21:02:00.000+02:002019-05-04T08:07:20.305+02:00Découverte de l'Arduino Yun rev2 - Tutoriel - Prise en main<div dir="ltr" style="text-align: left;" trbidi="on">
0 https://www.youtube.com/watch?v=9-hPhWHWnvs<br />
https://www.youtube.com/watch?v=VXYLsdVrq7E<br />
<br />
1 connexion réseau<br />
2 carte memoire<br />
extroot configuration :<br />
https://openwrt.org/docs/guide-user/additional-software/extroot_configuration?s[]=extroot<br />
https://wiki.openwrt.org/doc/howto/extroot<br />
https://openwrt.org/docs/guide-user/additional-software/extroot_configuration<br />
<br />
<pre class="code bash" style="background: rgba(255, 255, 255, 0.9); border-radius: 2px; border: 1px solid rgb(204, 204, 204); box-shadow: rgb(204, 204, 204) 0px 0px 0.5em inset; color: #333333; direction: ltr; font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace; font-size: 14px; margin-bottom: 1.4em; overflow: auto; padding: 0.7em 1em; word-wrap: normal;">opkg update <span class="sy0" style="color: #66cc66;">&&</span> opkg <span class="kw2" style="color: black; font-weight: bold;">install</span> block-mount kmod-fs-ext4 kmod-usb-storage e2fsprogs kmod-usb-ohci kmod-usb-uhci <span class="kw2" style="color: black; font-weight: bold;">fdisk</span></pre>
<pre class="code bash" style="background: rgba(255, 255, 255, 0.9); border-radius: 2px; border: 1px solid rgb(204, 204, 204); box-shadow: rgb(204, 204, 204) 0px 0px 0.5em inset; color: #333333; direction: ltr; font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace; font-size: 14px; margin-bottom: 1.4em; overflow: auto; padding: 0.7em 1em; word-wrap: normal;">block info
<span class="sy0" style="color: #66cc66;">/</span>dev<span class="sy0" style="color: #66cc66;">/</span>mtdblock2: <span class="re2" style="color: #993333;">UUID</span>=<span class="st0" style="color: red;">"9fd43c61-c3f2c38f-13440ce7-53f0d42d"</span> <span class="re2" style="color: #993333;">VERSION</span>=<span class="st0" style="color: red;">"4.0"</span> <span class="re2" style="color: #993333;">MOUNT</span>=<span class="st0" style="color: red;">"/rom"</span> <span class="re2" style="color: #993333;">TYPE</span>=<span class="st0" style="color: red;">"squashfs"</span>
<span class="sy0" style="color: #66cc66;">/</span>dev<span class="sy0" style="color: #66cc66;">/</span>mtdblock3: <span class="re2" style="color: #993333;">MOUNT</span>=<span class="st0" style="color: red;">"/overlay"</span> <span class="re2" style="color: #993333;">TYPE</span>=<span class="st0" style="color: red;">"jffs2"</span>
<span class="sy0" style="color: #66cc66;">/</span>dev<span class="sy0" style="color: #66cc66;">/</span>sda1: <span class="re2" style="color: #993333;">UUID</span>=<span class="st0" style="color: red;">"fdacc9f1-0e0e-45ab-acee-9cb9cc8d7d49"</span> <span class="re2" style="color: #993333;">VERSION</span>=<span class="st0" style="color: red;">"1.4"</span> <span class="re2" style="color: #993333;">TYPE</span>=<span class="st0" style="color: red;">"f2fs"</span></pre>
<br />
<div style="background-color: rgba(255, 255, 255, 0.8); color: #333333; font-family: Arial, sans-serif; font-size: 14px; margin-bottom: 1.4em; padding: 0px;">
For f2fs:</div>
<pre class="code bash" style="background: rgba(255, 255, 255, 0.9); border-radius: 2px; border: 1px solid rgb(204, 204, 204); box-shadow: rgb(204, 204, 204) 0px 0px 0.5em inset; color: #333333; direction: ltr; font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace; font-size: 14px; margin-bottom: 1.4em; overflow: auto; padding: 0.7em 1em; word-wrap: normal;">mkfs.f2fs <span class="sy0" style="color: #66cc66;">/</span>dev<span class="sy0" style="color: #66cc66;">/</span>sda1</pre>
<div style="background-color: rgba(255, 255, 255, 0.8); color: #333333; font-family: Arial, sans-serif; font-size: 14px; margin-bottom: 1.4em; padding: 0px;">
For ext4:</div>
<pre class="code bash" style="background: rgba(255, 255, 255, 0.9); border-radius: 2px; border: 1px solid rgb(204, 204, 204); box-shadow: rgb(204, 204, 204) 0px 0px 0.5em inset; color: #333333; direction: ltr; font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace; font-size: 14px; margin-bottom: 1.4em; overflow: auto; padding: 0.7em 1em; word-wrap: normal;">mkfs.ext4 <span class="sy0" style="color: #66cc66;">/</span>dev<span class="sy0" style="color: #66cc66;">/</span>sda1</pre>
<br />
<br />
<br />
<pre class="code bash" style="background: rgba(255, 255, 255, 0.9); border-radius: 2px; border: 1px solid rgb(204, 204, 204); box-shadow: rgb(204, 204, 204) 0px 0px 0.5em inset; color: #333333; direction: ltr; font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace; font-size: 14px; margin-bottom: 1.4em; overflow: auto; padding: 0.7em 1em; word-wrap: normal;"><span class="kw2" style="color: black; font-weight: bold;">mount</span> <span class="sy0" style="color: #66cc66;">/</span>dev<span class="sy0" style="color: #66cc66;">/</span>sda1 <span class="sy0" style="color: #66cc66;">/</span>mnt ; <span class="kw2" style="color: black; font-weight: bold;">tar</span> <span class="re5" style="color: #660033;">-C</span> <span class="sy0" style="color: #66cc66;">/</span>overlay <span class="re5" style="color: #660033;">-cvf</span> - . <span class="sy0" style="color: #66cc66;">|</span> <span class="kw2" style="color: black; font-weight: bold;">tar</span> <span class="re5" style="color: #660033;">-C</span> <span class="sy0" style="color: #66cc66;">/</span>mnt <span class="re5" style="color: #660033;">-xf</span> - ; <span class="kw2" style="color: black; font-weight: bold;">umount</span> <span class="sy0" style="color: #66cc66;">/</span>mnt</pre>
reboot<br />
<br />
<br />
System /mount Points<br />
<br />
<br />
<h2 class="sectionedit15" id="notes" style="clear: left; color: #333333; font-family: Arial, sans-serif; line-height: 1.2; margin: 0px 0px 0.666em; padding: 0px;">
Notes</h2>
<div class="level2" style="color: #333333; font-family: Arial, sans-serif; font-size: 14px; margin: 0px; padding: 0px;">
</div>
<h3 class="sectionedit16" id="opkg_status" style="clear: left; color: #333333; font-family: Arial, sans-serif; font-size: 1.125em; line-height: 1.2; margin: 0px 0px 0.888em; padding: 0px;">
opkg Status</h3>
<div class="level3" style="font-size: 14px; margin: 0px; padding: 0px;">
<div style="color: #333333; font-family: Arial, sans-serif; margin-bottom: 1.4em; padding: 0px;">
Saving <code style="background-color: #eeeeee; border-radius: 2px; color: #555555; direction: ltr; font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace; font-size: 1em; white-space: pre;">opkg</code> status in the extroot, instead of in RAM, saves some RAM and keeps package lists available after a reboot.</div>
<ol style="list-style-image: initial; list-style-position: outside; margin: 0px 0px 1.4em; padding: 0px 0px 0px 1.5em;">
<li class="level1" style="color: #666666; font-family: Arial, sans-serif; margin: 0px 0px 0px 1.5em; padding: 0px;"><div class="li" style="color: #333333; margin: 0px; padding: 0px;">
Generate the new folder on the extroot: <code style="background-color: #eeeeee; border-radius: 2px; color: #555555; direction: ltr; font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace; font-size: 1em; white-space: pre;">mkdir /opkg-lists</code></div>
</li>
<li class="level1 node" style="color: #666666; font-family: Arial, sans-serif; margin: 0px 0px 0px 1.5em; padding: 0px;"><div class="li" style="color: #333333; margin: 0px; padding: 0px;">
Edit <code style="background-color: #eeeeee; border-radius: 2px; color: #555555; direction: ltr; font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace; font-size: 1em; white-space: pre;">/etc/opkg.conf</code>, changing:</div>
</li>
<ul style="color: #333333; font-family: Arial, sans-serif; list-style: square outside; margin: 0px; padding: 0px;">
<li class="level2" style="margin: 0px 0px 0px 1.5em; padding: 0px;"><div class="li" style="color: #333333; margin: 0px; padding: 0px;">
<code style="background-color: #eeeeee; border-radius: 2px; color: #555555; direction: ltr; font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace; font-size: 1em; white-space: pre;">lists_dir ext /var/opkg-lists</code><br /><strong>into</strong></div>
</li>
<li class="level2" style="margin: 0px 0px 0px 1.5em; padding: 0px;"><div class="li" style="color: #333333; margin: 0px; padding: 0px;">
<code style="background-color: #eeeeee; border-radius: 2px; color: #555555; direction: ltr; font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace; font-size: 1em; white-space: pre;">lists_dir ext /opkg-lists</code></div>
</li>
</ul>
</ol>
<div>
<span style="color: #555555; font-family: Consolas, Andale Mono WT, Andale Mono, Bitstream Vera Sans Mono, Nimbus Mono L, Monaco, Courier New, monospace;"><span style="white-space: pre;">update list</span></span></div>
<div>
<span style="color: #555555; font-family: Consolas, Andale Mono WT, Andale Mono, Bitstream Vera Sans Mono, Nimbus Mono L, Monaco, Courier New, monospace;"><span style="white-space: pre;">rm -r </span></span><span style="background-color: #eeeeee; color: #555555; font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace; white-space: pre;">/var/opkg-lists</span></div>
<div>
<span style="color: #555555; font-family: Consolas, Andale Mono WT, Andale Mono, Bitstream Vera Sans Mono, Nimbus Mono L, Monaco, Courier New, monospace;"><span style="white-space: pre;"><br /></span></span></div>
</div>
<br />
3 install nodejs<br />
( nxhack : https://wiki.openwrt.org/doc/devel/feeds<br />
custom feeds : <span style="color: #24292e; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px;">src-git node https://github.com/nxhack/openwrt-node-packages.git;master )</span><br />
<span style="color: #24292e; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px;"><br /></span>
<span style="color: #24292e; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px;">sinon update liste node -> V6</span><br />
<span style="color: #24292e; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px;"><br /></span>
<span style="color: #24292e; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px;"><br /></span>
<span style="color: #24292e; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px;">opkg install node node-npm</span><br />
<span style="color: #24292e; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px;"><br /></span>
<span style="color: #24292e; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px;"><br /></span>
<span style="color: #24292e; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px;">install socket.io</span><br />
<span style="color: #24292e; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px;">opkg install node-socket.io --force-overwrite ( conflit de fichiers avec node-ws)</span></div>
Smag0http://www.blogger.com/profile/00938895135265434540noreply@blogger.com0tag:blogger.com,1999:blog-5434325989512262829.post-57169826162768960182018-06-23T10:50:00.002+02:002019-05-05T09:06:09.426+02:00YunDessinCollaboratif (YDC) et les Journées Européennes du Patrimoine (JEP)<div dir="ltr" style="text-align: left;" trbidi="on">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 <b>"YunDessinCollaboratif"</b><br></div><div dir="ltr" style="text-align: left;" trbidi="on"><b><br></b></div><div dir="ltr" style="text-align: left;" trbidi="on"><b>Démo Online http://dessincollaboratif.herokuapp.com/</b></div><div dir="ltr" style="text-align: left;" trbidi="on"><b>Gallerie que Twitter (@DCollaboratif) : https://twitter.com/DCollaboratif</b><br>
<b><br></b>
<h2 style="text-align: left;"><b><br></b><b>Qu'est ce que YunDessinCollaboratif (YDC) ?</b></h2>
YDC est un dispositif permettant à des dizaines d'utilisateurs de partager la création d'une oeuvre artistique.<br>
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.<br>
Chacun est libre de compléter l'oeuvre en temps réel.<br>
<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-pL1qz2qbqEs/Wy4BLL3lS8I/AAAAAAAAVqA/3eqYYhqMs2stjDlaXRSRxbOChEHlTsoigCLcBGAs/s1600/YunDessinCollaboratif%2BJounees%2Bdu%2BPatrimoine%2BSmagYun%2BLes%2BBricodeurs.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="829" data-original-width="1600" height="329" src="https://1.bp.blogspot.com/-pL1qz2qbqEs/Wy4BLL3lS8I/AAAAAAAAVqA/3eqYYhqMs2stjDlaXRSRxbOChEHlTsoigCLcBGAs/s640/YunDessinCollaboratif%2BJounees%2Bdu%2BPatrimoine%2BSmagYun%2BLes%2BBricodeurs.jpg" width="640"></a></div>
<h2 style="text-align: left;">
<br></h2>
<h2 style="text-align: left;">
Fonctionnalités complémentaires</h2>
<div>
YDC permet d'effectuer des captures d'écran afin de sauvegarder à tout moment une oeuvre</div>
<div>
-à développer : YDC enregistre automatiquement à chaque minute une capture d'écran afin de recréer un historique de la création collaborative</div>
<div>
- à développer : YDC permet la création de "salles" pour élaborer plusieurs oeuvres en même temps</div>
<div>
- à développer : diffusion en temps réel des oeuvres sur un site internet</div>
<h2 style="text-align: left;">
Technique : </h2>
YunDessinCollaboratif est une application nodejs basée sur de <a href="https://sketchpad.tk/" target="_blank">https://sketchpad.tk/</a><br>
installée sur une carte <a href="http://smag0.blogspot.com/2017/08/smagyun-une-arduino-yun-preparee-pour.html" target="_blank">Arduino Yùn,</a> cette carte proposant un hotspot Wifi.<br>
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.<br>
<br>
Les dernières mises à jour de YunDessinCollaboratif se trouvent ici : <br>
<a href="https://github.com/scenaristeur/lininoapps/tree/master/root/sketchpad" target="_blank">https://github.com/scenaristeur/lininoapps/tree/master/root/sketchpad</a><br>
<br>
<h2 style="text-align: left;">
Et les Bricodeurs dans tout ça ? </h2>
<a href="https://lesbricodeurs.fr/" style="font-size: 1.125rem;" target="_blank">Les Bricodeurs</a><br>
<div style="box-sizing: border-box; font-size: 1.125rem; line-height: 1.55556; margin-bottom: 1.375rem; text-align: left; transition: all 0.2s ease;">
<span style="color: blue;">Collectif du numérique citoyen<br>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.<br>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."</span></div>
<div style="box-sizing: border-box; font-size: 1.125rem; line-height: 1.55556; margin-bottom: 1.375rem; text-align: left; transition: all 0.2s ease;">
<span style="font-size: small;">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.</span></div>
<div style="box-sizing: border-box; font-size: 1.125rem; line-height: 1.55556; margin-bottom: 1.375rem; text-align: left; transition: all 0.2s ease;">
<span style="font-size: small;">Potentiel actuel : une dizaine de boitiers YDC</span></div><div style="box-sizing: border-box; font-size: 1.125rem; line-height: 1.55556; margin-bottom: 1.375rem; text-align: left; transition: all 0.2s ease;"><span style="font-size: small;">04/05/2019: Visite au festival 'Peinture fraîche' à la halle Debourg/ Gerland où j'ai discuté avec Maxime T du projet https</span>://thelivedrawingproject.com/fr/</div><div style="box-sizing: border-box; font-size: 1.125rem; line-height: 1.55556; margin-bottom: 1.375rem; text-align: left; transition: all 0.2s ease;">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.</div><div style="box-sizing: border-box; font-size: 1.125rem; line-height: 1.55556; margin-bottom: 1.375rem; text-align: left; transition: all 0.2s ease;">Nouvelle inspiration : le dessin est organisé sous forme de calques / layers que les utilisateurs peuvent gérer sauvegarder, copier, partager...</div><div style="box-sizing: border-box; font-size: 1.125rem; line-height: 1.55556; margin-bottom: 1.375rem; text-align: left; transition: all 0.2s ease;"><br></div><div style="box-sizing: border-box; font-size: 1.125rem; line-height: 1.55556; margin-bottom: 1.375rem; text-align: left; transition: all 0.2s ease;"><br></div><div style="box-sizing: border-box; font-size: 1.125rem; line-height: 1.55556; margin-bottom: 1.375rem; text-align: left; transition: all 0.2s ease;"><br></div>
<br></div>
Smag0http://www.blogger.com/profile/00938895135265434540noreply@blogger.com0tag:blogger.com,1999:blog-5434325989512262829.post-32011154325172099222018-06-23T00:19:00.001+02:002018-06-23T00:19:18.754+02:00Spoggy et la prise de notes<div dir="ltr" style="text-align: left;" trbidi="on">
Voici quelques exemples de prises de notes effectués lors des conférences au cours du <a href="http://data.persee.fr/perseeup/" target="_blank">hackathon PerseUp</a>. Hackathon dont <a href="http://smag0.blogspot.com/2018/06/quand-spoggy-sattaque-persee-retour.html" target="_blank">nous avons déjà longuement parlé.</a><br />
<br />
- <a href="http://spoggy.herokuapp.com/?source=https://raw.githubusercontent.com/scenaristeur/heroku-spoggy/master/public/exemple_files/persee01/PerseeUp%20-%20Analyse%20des%20r%C3%A9seaux%20en%20Egyptologie_spoggy_nodes_edges_1527841518070.json" target="_blank">Analyse des réseaux en Egyptologie</a><br />
- <a href="https://raw.githubusercontent.com/scenaristeur/heroku-spoggy/master/public/exemple_files/persee01/Analyse%20Visuelle%20des%20Re%C3%A9seaux_spoggy_nodes_edges_1527845014626.json" target="_blank">Analyse Visuelle des réseaux</a><br />
- <a href="http://spoggy.herokuapp.com/?source=https://raw.githubusercontent.com/scenaristeur/heroku-spoggy/master/public/exemple_files/persee01/M%C3%A9thodologies%20de%20Conception%20de%20Data%20Visualization_spoggy_nodes_edges_1527848878984.json" target="_blank">Méthodologie de Conception de DataVisualisation</a><br />
<br />
<br />
Ces notes ont été prises dans le feu de l'action, chacun peut les corriger, les compléter et <a href="https://github.com/scenaristeur/heroku-spoggy/tree/master/public/exemple_files/persee01" target="_blank">demander leur modification sur cette page</a><br />
<br />
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<br />
<br />
Pour savoir comment utiliser Spoggy consultez l'aide bouton de menu "+" / Aide<br />
<br />
<br />
<div>
<br /></div>
</div>
Smag0http://www.blogger.com/profile/00938895135265434540noreply@blogger.com0tag:blogger.com,1999:blog-5434325989512262829.post-84125724152616050762018-06-10T14:30:00.000+02:002018-06-30T10:56:32.718+02:00La Barrière LEGO - Arduino<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Objets connectés, iot, Arduino, par où commencer ?<br />
<br />
<br />
<h3 style="text-align: left;">
"La barrière LEGO, un bon projet pour débuter avec Arduino".</h3>
<div>
<div>
<i><br /></i><i>" ça serait bien, une barrière pour ma maison LEGO !</i></div>
<div>
<i>- 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..."</i></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/8HF8NKLyokc/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/8HF8NKLyokc?feature=player_embedded" width="320"></iframe></div>
<div>
<br /></div>
</div>
<br />
<br />
<div style="text-align: center;">
<span style="background-color: lime;">ES-TU PRÊT A RELEVER LE DEFI DE CREER UNE BARRIERE LEGO EN SEULEMENT 20 LIGNES DE CODE ???</span></div>
<div>
<br />
- niveau débutant,<br />
- matériel : KIT "Barrière LEGO Arduino" comprenant :<br />
<br />
<ul style="text-align: left;">
<li>une carte arduino</li>
<li>une breadboard</li>
<li>un capteur ultrason</li>
<li>un servomoteur</li>
<li>une télécommande infrarouge et son capteur</li>
<li>quelques leds de couleur et les resistances qui les protègent</li>
<li>des câbles pour effectuer les connexions...</li>
</ul>
<div>
C'est tout ce qu'il faut pour construire les deux versions de la "Barrière LEGO Arduino"<br />
! 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)</div>
<br />
<br />
<br />
Pour 20€ chez LEGO, <a href="https://www.google.fr/search?biw=1368&bih=807&tbm=shop&q=lego&tbs=vw%3Ag%2Cmr%3A1%2Cprice%3A1%2Cppr_min%3A15%2Cppr_max%3A20&ei=Rj4tW4uEAsznUpqPoNAE&ved=0ahUKEwiLv-Db8efbAhXMsxQKHZoHCEoQuisI8wQoBQ" target="_blank">tu as ça</a> , mais tu peux aussi choisir d'aller voir un peu plus loin et d'apprendre à coder avec le kit "Barrière LEGO Arduino"<br />
<b> --> </b><a href="mailto:scenaristeur@gmail.com" rel="nofollow" target="_blank"><b>commander un kit "Barriere LEGO - Arduino" </b> </a><br />
<a href="mailto:scenaristeur@gmail.com" rel="nofollow" target="_blank">ou envoyez un mail à scenaristeur@gmail.com</a><br />
<br />
<h3 style="text-align: left;">
</h3>
<div>
La barrière LEGO peut être déclinée sous plusieurs versions, et celles-ci peuvent être combinées :<br />
- 1 la barrière LEGO à partir d'un capteur ultrason.<br />
- 2 la barrière LEGO utilisant la télécommande infrarouge<br />
... a vous de voir ensuite comment vous pouvez améliorer votre barrière LEGO... 😉<br />
<br />
<a href="http://spoggy.herokuapp.com/?source=https://raw.githubusercontent.com/scenaristeur/heroku-spoggy/master/public/exemple_files/Barriere%20Lego.json" target="_blank">Le graphe de la barriere LEGO</a><br />
<br />
Nous allons voir dans un premier temps la version avec le capteur ultrason :<br />
<br />
<h2 style="text-align: left;">
- 1 la barrière LEGO à partir d'un capteur ultrason.</h2>
<div>
Quand un véhicule passe devant le capteur Ultrason, la barrière se lève pendant trois secondes puis reprend sa position initiale : </div>
<div>
<br /></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-w98CdDE0EEs/Wx0RfLvGR6I/AAAAAAAAVic/NgSO0hAzPrIhAcGTVG4A8s-OM0v8V5IkwCLcBGAs/s1600/IMG_20180610_104627.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="903" data-original-width="1600" height="180" src="https://1.bp.blogspot.com/-w98CdDE0EEs/Wx0RfLvGR6I/AAAAAAAAVic/NgSO0hAzPrIhAcGTVG4A8s-OM0v8V5IkwCLcBGAs/s320/IMG_20180610_104627.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-koizN9SxKgw/Wx0RgcI9npI/AAAAAAAAVis/DlJLj86dXTwH-2Ypw_rLEEKA19xF1-ktwCLcBGAs/s1600/IMG_20180610_104652.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="903" data-original-width="1600" height="180" src="https://4.bp.blogspot.com/-koizN9SxKgw/Wx0RgcI9npI/AAAAAAAAVis/DlJLj86dXTwH-2Ypw_rLEEKA19xF1-ktwCLcBGAs/s320/IMG_20180610_104652.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-Yf8o1ovrg9A/Wx0Rfc0Qa0I/AAAAAAAAVik/8KCNYIXlhQ01PmAJsSo5TLM0qtLqEo2UwCLcBGAs/s1600/IMG_20180610_104637.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="903" data-original-width="1600" height="180" src="https://1.bp.blogspot.com/-Yf8o1ovrg9A/Wx0Rfc0Qa0I/AAAAAAAAVik/8KCNYIXlhQ01PmAJsSo5TLM0qtLqEo2UwCLcBGAs/s320/IMG_20180610_104637.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-jcRetKf6kC0/Wx0Rf0-r0cI/AAAAAAAAVio/8942RSblDN8j7vH9-3xgTiRzP_6bV9I_ACLcBGAs/s1600/IMG_20180610_104643.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="903" data-original-width="1600" height="180" src="https://3.bp.blogspot.com/-jcRetKf6kC0/Wx0Rf0-r0cI/AAAAAAAAVio/8942RSblDN8j7vH9-3xgTiRzP_6bV9I_ACLcBGAs/s320/IMG_20180610_104643.jpg" width="320" /></a><span style="text-align: left;"> </span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-gFGmRJZgon8/Wx0RhINE2lI/AAAAAAAAVi4/lGYqA6H_7ggQR9A-93sY_9EjeCXcYnsAwCLcBGAs/s1600/IMG_20180610_104712.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="903" data-original-width="1600" height="180" src="https://4.bp.blogspot.com/-gFGmRJZgon8/Wx0RhINE2lI/AAAAAAAAVi4/lGYqA6H_7ggQR9A-93sY_9EjeCXcYnsAwCLcBGAs/s320/IMG_20180610_104712.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-YzVJVF0OlYA/Wx0RhYOEURI/AAAAAAAAVi8/uLRMx_LBjAcaG8g4iQb76onmsg335Qr_ACLcBGAs/s1600/IMG_20180610_104716.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="903" data-original-width="1600" height="180" src="https://4.bp.blogspot.com/-YzVJVF0OlYA/Wx0RhYOEURI/AAAAAAAAVi8/uLRMx_LBjAcaG8g4iQb76onmsg335Qr_ACLcBGAs/s320/IMG_20180610_104716.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-tCHqLiNfqJA/Wx0RhcZ-q5I/AAAAAAAAVjA/jf9BIxGeeooePDg6ximQN7OPC1IZkZiZwCLcBGAs/s1600/IMG_20180610_104734.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="903" data-original-width="1600" height="180" src="https://4.bp.blogspot.com/-tCHqLiNfqJA/Wx0RhcZ-q5I/AAAAAAAAVjA/jf9BIxGeeooePDg6ximQN7OPC1IZkZiZwCLcBGAs/s320/IMG_20180610_104734.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-xnSod79js9s/Wx0RhhxUlOI/AAAAAAAAVjE/wA9UzaH2gJIEDyucHtBXQYKjIzwFnlbXACLcBGAs/s1600/IMG_20180610_104744.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="903" data-original-width="1600" height="180" src="https://2.bp.blogspot.com/-xnSod79js9s/Wx0RhhxUlOI/AAAAAAAAVjE/wA9UzaH2gJIEDyucHtBXQYKjIzwFnlbXACLcBGAs/s320/IMG_20180610_104744.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-o38KC1pJb4Y/Wx0RhhXsEhI/AAAAAAAAVjI/huiq7wceg5g1Y-pSB6of0hMeLI9pJKGZACLcBGAs/s1600/IMG_20180610_104748.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="903" data-original-width="1600" height="180" src="https://2.bp.blogspot.com/-o38KC1pJb4Y/Wx0RhhXsEhI/AAAAAAAAVjI/huiq7wceg5g1Y-pSB6of0hMeLI9pJKGZACLcBGAs/s320/IMG_20180610_104748.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-TXrPSPl1YJY/Wx0Rh2mfBCI/AAAAAAAAVjM/Nm5whhH1A84A2mr9UW2P55LzeekrBmkIQCLcBGAs/s1600/IMG_20180610_104754.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="903" data-original-width="1600" height="180" src="https://4.bp.blogspot.com/-TXrPSPl1YJY/Wx0Rh2mfBCI/AAAAAAAAVjM/Nm5whhH1A84A2mr9UW2P55LzeekrBmkIQCLcBGAs/s320/IMG_20180610_104754.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-0QVIlTN0Xe8/Wx0RiIgOoJI/AAAAAAAAVjQ/CCLuf0akREkDlbs4ZdIq7u2klzGlO4GkACLcBGAs/s1600/IMG_20180610_104804.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="903" data-original-width="1600" height="180" src="https://3.bp.blogspot.com/-0QVIlTN0Xe8/Wx0RiIgOoJI/AAAAAAAAVjQ/CCLuf0akREkDlbs4ZdIq7u2klzGlO4GkACLcBGAs/s320/IMG_20180610_104804.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-Y-JViA3ysdQ/Wx0RiALXapI/AAAAAAAAVjU/SGDYKyUN7ZYvtYu-wIMJqZ3YdkZ6cjpvwCLcBGAs/s1600/IMG_20180610_104923.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="903" data-original-width="1600" height="180" src="https://4.bp.blogspot.com/-Y-JViA3ysdQ/Wx0RiALXapI/AAAAAAAAVjU/SGDYKyUN7ZYvtYu-wIMJqZ3YdkZ6cjpvwCLcBGAs/s320/IMG_20180610_104923.jpg" width="320" /></a></div>
<br />
<br /></div>
<div>
Matériel nécessaire : 'KIT Arduino Barrière LEGO' <br />
<b> --> </b><a href="mailto:scenaristeur@gmail.com" rel="nofollow" target="_blank"><b>commander un kit "Barriere LEGO - Arduino" </b> </a><br />
<a href="mailto:scenaristeur@gmail.com" rel="nofollow" target="_blank">ou envoyez un mail à scenaristeur@gmail.com</a></div>
<div>
<br /></div>
<table border="1">
<tbody>
<tr>
<td>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.<br />
<br />
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.</td>
<td><div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-krbC9DTZqTs/Wxzsg5NvZRI/AAAAAAAAVcQ/vtkBITJCzXc0Auk7uHD-KkdP5r5eaU7ZQCLcBGAs/s1600/breadboard.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1000" data-original-width="1000" height="320" src="https://3.bp.blogspot.com/-krbC9DTZqTs/Wxzsg5NvZRI/AAAAAAAAVcQ/vtkBITJCzXc0Auk7uHD-KkdP5r5eaU7ZQCLcBGAs/s320/breadboard.jpg" width="320" /></a></div>
<br /></td>
</tr>
<tr>
<td>une carte Arduino Uno ou<br />
une carte Arduino Nano avec son cable USB,<br />
ou compatible</td>
<td><div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-l3bgrP2A9yQ/WxzsgTFpdfI/AAAAAAAAVcM/N9peUlqccvo-glcDucj-jK2jeRKoC64iQCLcBGAs/s1600/arduino-uno-r3_5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1106" data-original-width="1600" height="221" src="https://3.bp.blogspot.com/-l3bgrP2A9yQ/WxzsgTFpdfI/AAAAAAAAVcM/N9peUlqccvo-glcDucj-jK2jeRKoC64iQCLcBGAs/s320/arduino-uno-r3_5.jpg" width="320" /></a></div>
<a href="https://1.bp.blogspot.com/-N8o3lbfs0zs/WxzsgadGcYI/AAAAAAAAVcE/3nnv6kVnKrUgI3q9Qj6mSLubO8KrC43FACLcBGAs/s1600/arduino%2Bnano.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="800" height="320" src="https://1.bp.blogspot.com/-N8o3lbfs0zs/WxzsgadGcYI/AAAAAAAAVcE/3nnv6kVnKrUgI3q9Qj6mSLubO8KrC43FACLcBGAs/s320/arduino%2Bnano.jpg" width="320" /></a></td>
</tr>
<tr>
<td>un capteur ultrasons HC-SR04 pour capter le passage d'un véhicule</td>
<td><div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-78b4IAqjAeQ/WxzshLbRX5I/AAAAAAAAVcU/NhkGGcC6upIpaF7pPMEeY5BhRtXuvrefgCLcBGAs/s1600/hc-SR04.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="225" data-original-width="225" src="https://3.bp.blogspot.com/-78b4IAqjAeQ/WxzshLbRX5I/AAAAAAAAVcU/NhkGGcC6upIpaF7pPMEeY5BhRtXuvrefgCLcBGAs/s1600/hc-SR04.jpg" /></a></div>
</td>
</tr>
<tr>
<td>Un servomoteur SG90 pour actionner la barrière</td>
<td><div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-yD4pM2Q6xr4/WxzshQr7U1I/AAAAAAAAVcY/0YWdWlDZSloBcq9b5fEOqhQy9hlob90dwCLcBGAs/s1600/sg90.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="600" data-original-width="600" height="320" src="https://2.bp.blogspot.com/-yD4pM2Q6xr4/WxzshQr7U1I/AAAAAAAAVcY/0YWdWlDZSloBcq9b5fEOqhQy9hlob90dwCLcBGAs/s320/sg90.jpeg" width="320" /></a></div>
</td>
</tr>
<tr>
<td>Une dizaine de câbles pour relier tout ça </td>
<td><a href="https://3.bp.blogspot.com/-RV7Lck9c6ZI/WxzshpT6ceI/AAAAAAAAVcc/JdP71De_I_ExSkQcOSata_X-CDXnZARuQCLcBGAs/s1600/wire%2Bm_m.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="600" data-original-width="600" height="320" src="https://3.bp.blogspot.com/-RV7Lck9c6ZI/WxzshpT6ceI/AAAAAAAAVcc/JdP71De_I_ExSkQcOSata_X-CDXnZARuQCLcBGAs/s320/wire%2Bm_m.jpg" width="320" /></a></td>
</tr>
<tr>
<td>Une barre LEGO Technic qui servira de barrière</td>
<td><a href="https://4.bp.blogspot.com/-pMvYvwbEQeI/WxzsgdcpmSI/AAAAAAAAVcI/k6rnAVHAuCs01STmKYnp7ipQYpRqTDvsgCLcBGAs/s1600/barriere%2Bjaune.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br /><img border="0" data-original-height="458" data-original-width="458" height="320" src="https://4.bp.blogspot.com/-pMvYvwbEQeI/WxzsgdcpmSI/AAAAAAAAVcI/k6rnAVHAuCs01STmKYnp7ipQYpRqTDvsgCLcBGAs/s320/barriere%2Bjaune.jpg" width="320" /></a></td>
</tr>
<tr>
<td>+ Quelques briques LEGO pour fixer le servomoteur</td>
<td><br /></td>
</tr>
</tbody></table>
<div>
<br /></div>
<div>
<br /></div>
<div>
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.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-taRw3xJ33lg/Wxz2pZedpbI/AAAAAAAAVdk/mNUIsfyZmjUwCunP49Y3nMRzn_-_yyjiACLcBGAs/s1600/Breadboard-Internal-Diagram.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="406" data-original-width="362" height="320" src="https://1.bp.blogspot.com/-taRw3xJ33lg/Wxz2pZedpbI/AAAAAAAAVdk/mNUIsfyZmjUwCunP49Y3nMRzn_-_yyjiACLcBGAs/s320/Breadboard-Internal-Diagram.jpg" width="285" /></a></div>
<br />
<br />
<h4 style="text-align: left;">
Effectuer les branchements</h4>
<br />
<div style="text-align: left;">
<b>
1. </b>Commencez par positionner et enficher la carte Arduino et le capteur ultrasons HC-SR04 sur la breadboard :</div>
- la carte Arduino au centre de la breadbord et le capteur sur le bord.<br />
<br />
<div style="text-align: left;">
<b>
2.</b> Pour alimenter le capteur ultrason HC-SR04, nous allons créer un circuit :</div>
- 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.<br />
- repérez sur le capteur HC-SR04 la broche notée 'VCC' et reliez la également à la ligne rouge<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-g_wOlfVbIMM/Wx0YzMNvqoI/AAAAAAAAVkQ/X2GJp9NdpHo3GqSduPRc-hoaj1UClQywQCLcBGAs/s1600/IMG_20180610_114201.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="903" data-original-width="1600" height="180" src="https://2.bp.blogspot.com/-g_wOlfVbIMM/Wx0YzMNvqoI/AAAAAAAAVkQ/X2GJp9NdpHo3GqSduPRc-hoaj1UClQywQCLcBGAs/s320/IMG_20180610_114201.jpg" width="320" /></a></div>
<br />
<br />
Dans un deuxième temps :<br />
- 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.<br />
- repérez sur le capteur la broche notée 'GND' et reliez-la avec la ligne bleue.<br />
<br />
Vous devriez maintenant avoir une carte Arduino, un capteur ultrason HC-SR04 et 4 fils comme sur la photo suivante :<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-hJceYYt3e2g/Wx0YzUwPGuI/AAAAAAAAVkU/Ui0kGiunq0gNBSbYb5qM6QwK-eSSsdyyQCLcBGAs/s1600/IMG_20180610_114550.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="903" data-original-width="1600" height="180" src="https://3.bp.blogspot.com/-hJceYYt3e2g/Wx0YzUwPGuI/AAAAAAAAVkU/Ui0kGiunq0gNBSbYb5qM6QwK-eSSsdyyQCLcBGAs/s320/IMG_20180610_114550.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
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.<br />
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...<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-6lgsPaXzjvM/Wx0Zrg4Y5-I/AAAAAAAAVkg/P9cBmjrb5YslCeTk1BPgZ9daCAO-AVCyACLcBGAs/s1600/IMG_20180610_142746.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="903" data-original-width="1600" height="180" src="https://2.bp.blogspot.com/-6lgsPaXzjvM/Wx0Zrg4Y5-I/AAAAAAAAVkg/P9cBmjrb5YslCeTk1BPgZ9daCAO-AVCyACLcBGAs/s320/IMG_20180610_142746.jpg" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
Passons maintenant à la programmation de la carte Arduino :<br />
<br />
Une petite video pour l'installation du logiciel,<br />
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 <a href="http://www.mon-club-elec.fr/pmwiki_reference_arduino/pmwiki.php?n=Main.DebuterInstallationWindows" target="_blank">ces sujets ont étés maintes fois traités comme ici</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/jy4JqLlBcJk/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/jy4JqLlBcJk?feature=player_embedded" width="320"></iframe></div>
<br />
<br />
Voici le code de test du capteur HCSR-04 présenté dans la vidéo :<br />
<span style="background-color: yellow;">#include <HCSR04.h></span><br />
<span style="background-color: yellow;"><br /></span>
<span style="background-color: yellow;">UltraSonicDistanceSensor distanceSensor(3,4); // Initialize sensor that uses digital pins 13 and 12.</span><br />
<span style="background-color: yellow;"><br /></span>
<span style="background-color: yellow;">void setup () {</span><br />
<span style="background-color: yellow;"> Serial.begin(9600); // We initialize serial connection so that we could print values from sensor.</span><br />
<span style="background-color: yellow;">}</span><br />
<span style="background-color: yellow;"><br /></span>
<span style="background-color: yellow;">void loop () {</span><br />
<span style="background-color: yellow;"> // Every 500 miliseconds, do a measurement using the sensor and print the distance in centimeters.</span><br />
<span style="background-color: yellow;"> Serial.println(distanceSensor.measureDistanceCm());</span><br />
<span style="background-color: yellow;"> delay(500);</span><br />
<span style="background-color: yellow;">}</span><br />
<br />
En allant ensuite consulter le traceur série, vous devriez voir une courbe apparaître :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-MmGRkAJrZGE/Wx0EAZfUzII/AAAAAAAAVdw/_WOVdsCk7UYWO4af87zuUkpyZlGsE5FdACLcBGAs/s1600/traceur%2Bserie.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="875" data-original-width="1600" height="174" src="https://1.bp.blogspot.com/-MmGRkAJrZGE/Wx0EAZfUzII/AAAAAAAAVdw/_WOVdsCk7UYWO4af87zuUkpyZlGsE5FdACLcBGAs/s320/traceur%2Bserie.png" width="320" /></a></div>
<br />
<br />
<br />
Maintenant que le capteur est opérationnel, on va pouvoir brancher le servomoteur :<br />
sur un servomoteur, nous avons 3 fils :<br />
- le + (rouge)<br />
- le - (noir ou marron)<br />
- la mesure (jaune ou blanc)<br />
<br />
Utilisez trois nouveaux fils pour prolonger ceux issus du moteurs<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-JYy13Mhu7qY/Wx0TV4IdSnI/AAAAAAAAVkA/xqxBfKWkaZgh1wjK0-vhINc-eFFXGSHngCLcBGAs/s1600/IMG_20180610_130136.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="903" data-original-width="1600" height="180" src="https://3.bp.blogspot.com/-JYy13Mhu7qY/Wx0TV4IdSnI/AAAAAAAAVkA/xqxBfKWkaZgh1wjK0-vhINc-eFFXGSHngCLcBGAs/s320/IMG_20180610_130136.jpg" width="320" /></a></div>
<br />
et connectez ceux-ci de la manière suivante :<br />
le + vers la ligne rouge de la breadboard,<br />
le - vers la ligne bleue de la breadboard<br />
le 3ème vers la broche 'D9' de la carte Arduino<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-9sd7RUqpU2g/Wx0TV5dDcOI/AAAAAAAAVj8/mF44hquv21Q9RAHM91-AW0dD_oCJxxryQCLcBGAs/s1600/IMG_20180610_130438.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="903" data-original-width="1600" height="180" src="https://4.bp.blogspot.com/-9sd7RUqpU2g/Wx0TV5dDcOI/AAAAAAAAVj8/mF44hquv21Q9RAHM91-AW0dD_oCJxxryQCLcBGAs/s320/IMG_20180610_130438.jpg" width="320" /></a></div>
<br />
<br />
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 :<br />
<br />
Attention les deux vidéos suivantes se superposent pour montrer à la fois la partie code et la partie exécution du code :<br />
<br />
Confection du code :<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/h9Ad1o_39N0/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/h9Ad1o_39N0?feature=player_embedded" width="320"></iframe></div>
<br />
<br />
<br />
Voici le code qui permet de faire fonctionner notre barrière LEGO avec déclenchement par capteur Ultrason :<br />
<br />
<br />
<pre style="border: 1px dashed rgb(153, 153, 153); line-height: 14px; overflow: auto; padding: 5px; width: 653px;"><span style="color: #333333;"><span style="font-size: 12px;"><span style="background-color: #eeeeee;">////////////////////////////////////////////////////////////////////////////////////////
// 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 */
</span><span style="background-color: yellow;">#include <HCSR04.h>
#include <Servo.h>
</span><span style="background-color: #eeeeee;">
/* On créé un objet capteur ultrason (UltraSonicDistanceSensor)
que l'on initialise sur les pins D3 pour TRIG et D4 pour ECHO*/
</span><span style="background-color: yellow;">UltraSonicDistanceSensor capteur_distance(3, 4);</span><span style="background-color: #eeeeee;">
/* Creation d'un objet Servo pour contrôler le servomoteur */
</span><span style="background-color: yellow;">Servo mon_servo;
</span><span style="background-color: #eeeeee;">
/* la fonction setup() permet de mettre en place l'environnement */
</span><span style="background-color: yellow;">void setup () {</span><span style="background-color: #eeeeee;">
/* - 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°) */
</span><span style="background-color: yellow;"> Serial.begin(9600);
mon_servo.attach(9);
mon_servo.write(180);
}</span><span style="background-color: #eeeeee;">
/* la fonction loop() boucle à l'infini,
lit la valeur du capteur et actionne le moteur */
</span><span style="background-color: yellow;">void loop () {</span><span style="background-color: #eeeeee;">
/* 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éé */
</span><span style="background-color: yellow;"> int distance = capteur_distance.measureDistanceCm(); </span><span style="background-color: #eeeeee;">
/* on teste si la valeur est comprise entre 1 cm et 15 cm */
</span><span style="background-color: yellow;">if ( distance > 1 && distance < 15 ) { </span><span style="background-color: #eeeeee;">
/* 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 */
</span><span style="background-color: yellow;">Serial.println(distance); </span><span style="background-color: #eeeeee;">
/* On demande envoi un angle de 90° au servo moteur ce qui doit lever la barrière */
</span><span style="background-color: yellow;"> mon_servo.write(90); </span><span style="background-color: #eeeeee;">
/* et on attend 3000 millisecondes = 3 secondes avant de continuer */
</span><span style="background-color: yellow;">delay(3000);
} else {</span><span style="background-color: #eeeeee;">
/* Sinon, la distance n'est pas comprise entre 1cm et 15 cm,
on baisse la barrière en positionnant le servomoteur à 180° */
</span><span style="background-color: yellow;">mon_servo.write(180);
}</span><span style="background-color: #eeeeee;">
/* On attend 500 millisecondes avant d'effectuer une nouvelle boucle (loop)
et de lire la valeur suivante */
</span><span style="background-color: yellow;">delay(500);
}</span></span></span></pre>
<br />
<br />
Exécution du code :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/6sWi9HeaNEM/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/6sWi9HeaNEM?feature=player_embedded" width="320"></iframe></div>
<br />
<br />
<br />
<br />
Qu'est-ce qu'il vous reste à faire ?<br />
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 :<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-6A08ajorv4E/Wx0QmQjd_RI/AAAAAAAAVhs/2WC4YZQUAlIFxnXN1VIaGtubcfyn64HngCLcBGAs/s1600/IMG_20180610_134046.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="903" data-original-width="1600" height="180" src="https://1.bp.blogspot.com/-6A08ajorv4E/Wx0QmQjd_RI/AAAAAAAAVhs/2WC4YZQUAlIFxnXN1VIaGtubcfyn64HngCLcBGAs/s320/IMG_20180610_134046.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-ShH1mvtae-w/Wx0QmTj50hI/AAAAAAAAVh0/MO8qkRqhV3YC-b7Px3wVqvNCI0Hhxwv0gCLcBGAs/s1600/IMG_20180610_134054.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="903" data-original-width="1600" height="180" src="https://3.bp.blogspot.com/-ShH1mvtae-w/Wx0QmTj50hI/AAAAAAAAVh0/MO8qkRqhV3YC-b7Px3wVqvNCI0Hhxwv0gCLcBGAs/s320/IMG_20180610_134054.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-Ad-KL270tBY/Wx0QnNiZ9lI/AAAAAAAAVh4/dfXtL88Sv4MJdyqQ-I4Lp9FYSNaXPNd0gCLcBGAs/s1600/IMG_20180610_134102.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="903" data-original-width="1600" height="180" src="https://4.bp.blogspot.com/-Ad-KL270tBY/Wx0QnNiZ9lI/AAAAAAAAVh4/dfXtL88Sv4MJdyqQ-I4Lp9FYSNaXPNd0gCLcBGAs/s320/IMG_20180610_134102.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-lfDSyDEKexE/Wx0QnbmO_AI/AAAAAAAAVh8/e2RG_1o3e9U0tt6DliJUZoFH6eSO28wiwCLcBGAs/s1600/IMG_20180610_134116.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="903" data-original-width="1600" height="180" src="https://4.bp.blogspot.com/-lfDSyDEKexE/Wx0QnbmO_AI/AAAAAAAAVh8/e2RG_1o3e9U0tt6DliJUZoFH6eSO28wiwCLcBGAs/s320/IMG_20180610_134116.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-7UPR8b7xum4/Wx0QmgyM9YI/AAAAAAAAVhw/5SdrwjP3AK8jOFIYZwMcUrVBj_igalRXACLcBGAs/s1600/IMG_20180610_134019.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="903" data-original-width="1600" height="180" src="https://4.bp.blogspot.com/-7UPR8b7xum4/Wx0QmgyM9YI/AAAAAAAAVhw/5SdrwjP3AK8jOFIYZwMcUrVBj_igalRXACLcBGAs/s320/IMG_20180610_134019.jpg" width="320" /></a></div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<br /></div>
</div>
</div>
</div>
Smag0http://www.blogger.com/profile/00938895135265434540noreply@blogger.com0Lyon, France45.764043 4.835658999999964245.586788500000004 4.5129354999999638 45.9412975 5.1583824999999646tag:blogger.com,1999:blog-5434325989512262829.post-85992487307320709862018-06-10T13:34:00.000+02:002018-06-10T13:48:40.697+02:00arduino barriere LEGO ancien<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Objets connectés, iot, Arduino, par où commencer ?<br />
<br />
<span style="background-color: yellow; color: red;">[[ CET ARTICLE EST UNE ANCIENNE VERSION, LA NOUVELLE VERSION EST DISPONIBLE ICI <a href="http://smag0.blogspot.com/2017/06/arduino-barriere-lego.html">http://smag0.blogspot.com/2017/06/arduino-barriere-lego.html</a> ]]</span><br />
<br />
<div>
<br />
- niveau débutant, matériel requis aucun (carte Arduino ou Simulateur).<br />
Si vous n'avez pas de carte Arduino, vous pouvez vous entraîner sur la simulation proposée par le site <a href="https://circuits.io/circuits/4488716-barriere-lego-capteur-de-distance-1" target="_blank">https://circuits.io/ </a> . Pour chaque étape de ce tutoriel, on décrit d'abord la procédure avec la carte, puis avec le simulateur.<br />
<br />
par exemple, à <a href="https://circuits.io/circuits/4214118-barriere-lego-controlee-par-telecommande-infrarouge-lego-fence-with-remote-control" target="_blank">cette adresse</a>, 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).<br />
<br />
<h3 style="text-align: left;">
"La barrière LEGO, un bon projet pour débuter avec Arduino".</h3>
<div>
<div>
<i><br /></i><i>" ça serait bien, une barrière pour ma maison LEGO !</i></div>
<div>
<i>- 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..."</i></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Pour découvrir l'écosystème Arduino, nous allons donc voir aujourd'hui comment réaliser, étape par étape, une barrière LEGO.</div>
</div>
<div>
<br /></div>
<div>
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 <a href="http://www.mon-club-elec.fr/pmwiki_reference_arduino/pmwiki.php?n=Main.DebuterInstallationWindows" target="_blank">ici</a>, par exemple, le but étant ici de voir les étapes pour appréhender sa carte Arduino.</div>
<div>
<br /></div>
<div>
Admettons donc que vous l'ayez branchée sur le port USB, et que vous l'avez configurée (type de carte et port).</div>
<div>
<br /></div>
<div>
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.<br />
<h4 style="text-align: left;">
</h4>
<h4 style="text-align: left;">
Communiquer avec sa carte Arduino par le clavier.</h4>
</div>
<h3 style="text-align: left;">
Recevoir des informations envoyées par la carte.</h3>
<a href="https://circuits.io/circuits/5205037-recevoir-des-informations-envoyees-par-la-carte" target="_blank">https://circuits.io/circuits/5205037-recevoir-des-informations-envoyees-par-la-carte</a><br />
<br />
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é.</div>
</div>
<div>
<br /></div>
<div>
Pour ouvrir la communication entre la carte et ce moniteur série, une instruction qui parle d'elle même : </div>
<div>
<br /></div>
<div style="text-align: left;">
<b>Serial.begin(9600);</b></div>
<div>
<b><br /></b></div>
<div>
Serial = série, begin = démarre, 9600 = la vitesse à laquelle on souhaite communiquer avec la carte.</div>
<div>
ceci va donc nous démarrer la communication... et pour écrire ? </div>
<div>
<br /></div>
<div>
<b> Serial.print("Mon texte");</b></div>
<div>
<br /></div>
<div>
Vous l'aurez deviné : print = imprimer.</div>
<div>
<br /></div>
<div>
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 :<br />
<br /></div>
<div>
<b>void setup(){</b></div>
<div>
<b><br /></b></div>
<div>
<b>}</b></div>
<div>
et<br />
<br /></div>
<div>
<b>void loop(){</b></div>
<div>
<b><br /></b></div>
<div>
<b>}</b></div>
<div>
<br /></div>
<div>
Ces deux fonctions sont essentielles pour le logiciel Arduino : <b><u>setup</u></b> représente l'initialisation du programme et <b><u>loop</u></b> est une boucle qui se répète à l'infini, enfin tant qu'on ne lui a pas demandé de s'arrêter ;-).</div>
<div>
<br /></div>
<div>
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 <b>setup(){ } </b></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<pre><span style="background-color: #ffe599;">void setup() {
Serial.begin(9600);
Serial.print("Mon texte");
}
void loop() {
}</span>
</pre>
<br /></div>
<div>
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. </div>
<div>
D'autres raccourcis claviers qui vous seront utiles : Ctrl+s : sauvegarder et Ctrl+t : réorganiser votre code... ça peut toujours être utile.<br />
<br />
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 ).<br />
Vous devriez voir le moniteur s'ouvrir, et la ligne de texte " Mon texte" s'afficher.<br />
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.<br />
<br />
<br />
<b><u><i>Si vous n'avez pas de carte Arduino disponible, voici comment faire la même chose dans le simulateur CIRCUITS.IO : </i></u></b><br />
<b><u><i><br /></i></u></b>Une fois que vous êtes connecté sur le site <a href="https://circuits.io/" target="_blank">https://circuits.io</a>, cliquez sur "New", puis "New Electronics Lab" ("Nouveau" et "Nouveau Laboratoire Electronique").<br />
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 :<br />
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.<br />
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".<br />
<br />
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.<br />
<br />
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.<br />
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.<br />
<br />
Si vous avez lancé le programme "Blink", stoppez la simulation par "Stop Simulation", évidemment.<br />
Vous pouvez ensuite remplacer le code "Blink" par le code :<br />
<br />
<pre><span style="background-color: #ffe599;">void setup() {
Serial.begin(9600);
Serial.print("Mon texte");
}
void loop() {
}</span></pre>
<pre><span style="background-color: #ffe599;">
</span></pre>
<pre></pre>
Exécutez-le ensuite par "Upload & Run" ou "Start Simulation".<br />
Vérifiez que la carte affiche bien "Mon texte", en cliquant sur le bouton "Serial Monitor" si vous ne l'avez pas encore fait.<br />
<br />
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").<br />
<br />
Vous pouvez continuez les tests en changeant le texte.<br />
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.<br />
<br />
<h3 style="text-align: left;">
Envoyer des informations à la carte</h3>
</div>
<div>
<a href="https://circuits.io/circuits/5205348-envoyer-des-informations-a-la-carte" target="_blank">https://circuits.io/circuits/5205348-envoyer-des-informations-a-la-carte</a></div>
<div>
<br /></div>
Ok, maintenant que la carte peut nous parler, essayons de lui parler en retour.<br />
<br />
Pour ce faire, on va également utiliser le moniteur série, mais dans l'autre sens.<br />
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).<br />
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...<br />
<br />
<br />
A vos claviers... Prêts ? C'est parti !<br />
<br />
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).<br />
On déclare donc une nouvelle variable de type "String" (chaîne de caractères) et de valeur vide (="") :<br />
<br />
<b>String saisie = "";</b><br />
<br />
nb : vous l'aurez certainement remarqué : les lignes ou blocs de commande se terminent par un point-virgule.<br />
<br />
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.<br />
d'abord :<br />
<b>Serial.available() </b>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.<br />
<br />
<br />
Comment ça se passe concrètement :<br />
"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.<br />
Pour tester, on utilise "if" sous la forme :<br />
<br />
if (quelque chose){action} traduit par si 'quelque chose', alors 'action'.<br />
<br />
On a parlé de la condition, mais qu'en est-il de l'action ?<br />
Pour l'action, on va encore utiliser une méthode de Serial, la méthode <b>Serial.readString()</b>, qui veut dire "lire la chaîne de caractères".<br />
Et une fois qu'on l'aura lue, on la stockera dans la variable "saisie" que l'on a déclarée par :<br />
String saisie = "";<br />
<br />
Ok, donc ? ça donne :<br />
<br />
<span style="background-color: #ffe599;">String saisie = ""; // on déclare la variable 'saisie'</span><br />
<span style="background-color: #ffe599;"><br /></span><span style="background-color: #ffe599;">void setup() { //on retrouve notre fonction 'setup' pour l'initialisation</span><br />
<span style="background-color: #ffe599;"> Serial.begin(9600); // on démarre la communication entre la carte et le moniteur série</span><br />
<span style="background-color: #ffe599;"> Serial.println("Mon texte"); /* on teste l'affichage d'un premier texte, cela nous garantir que la carte est bien opérationnelle */</span><br />
<span style="background-color: #ffe599;">} // fin de la fonction d'initialisation</span><br />
<span style="background-color: #ffe599;"><br /></span><span style="background-color: #ffe599;">void loop() { // la fonction qui boucle est lancée</span><br />
<span style="background-color: #ffe599;"> if (Serial.available() > 0) { // la carte teste pour savoir si quelque chose est disponible</span><br />
<span style="background-color: #ffe599;"> saisie = Serial.readString(); // si c'est le cas, elle lit l'information et la stocke dans la variable 'saisie'</span><br />
<span style="background-color: #ffe599;"> Serial.print("J'ai reçu : "); // Elle affiche "j'ai reçu :</span><br />
<span style="background-color: #ffe599;"> Serial.println(saisie); // et le contenu de ce qu'elle a reçu</span><br />
<span style="background-color: #ffe599;"> }</span><br />
<span style="background-color: #ffe599;">}</span><br />
<br />
Nous avons ici de nouvelle choses :<br />
les lignes de commentaires commencent par //<br />
les commentaires sur plusieurs lignes sont délimités par /* et */<br />
Serial.println() ajoute un retour à la ligne après le Serial.print();<br />
<br />
<br />
Copiez ce code dans l'éditeur ou le simulateur, et "téléversez" ou lancez la simulation.<br />
Rendez-vous ensuite dans le moniteur série, tapez du texte dans la zone appropriée et validez par "Envoyer" ou "Send".<br />
<br />
La carte devrait vous répondre "J'ai reçu" suivi de votre texte.<br />
Remarques pour le simulateur, le délai peut paraître long et le "ç" ne passe pas bien, mais vous devriez avoir une réponse !<br />
<br />
Et voilà pour la première étape : comment communiquer avec la carte, dans un sens et dans l'autre.<br />
<br />
Prochaine étape ?<br />
Brancher le moteur de la barrière et le commander avec le clavier.<br />
<div>
<br /></div>
</div>
Smag0http://www.blogger.com/profile/00938895135265434540noreply@blogger.com0tag:blogger.com,1999:blog-5434325989512262829.post-60810297326040098592018-06-09T20:30:00.000+02:002018-06-09T20:30:48.854+02:00Quand Spoggy s'attaque à Persée, Retour après la bataille<div dir="ltr" style="text-align: left;" trbidi="on">
Bon dans le dernier article ( <a href="http://smag0.blogspot.com/2018/05/quand-spoggy-utilise-polymer-pour.html" target="_blank">Quand Spoggy utilise Polymer pour s'attaquer à Persée...</a> ), nous vous avions fait part de la stratégie que Spoggy comptait adopter pour s'attaquer à Persée...<br />
<br />
Pour tout vous dire, la vraie attaque a eu lieu le weekend dernier, à <a href="https://www.lacuisineduweb.com/" target="_blank">la Cuisine du Web</a> et était organisée par l'<a href="http://data.persee.fr/equipe/" target="_blank">équipe de Persée</a>, lors de son premier hackathon : <a href="http://data.persee.fr/perseeup/" target="_blank">PerséeUP</a> ... A noter également la complicité de l'équipe <a href="http://www.museomix.org/community/museomix-auvergne-rhone-alpes/" target="_blank">MuseomixAura</a> et de quelques autres intervenants...<br />
<br />
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 😜...<br />
<br />
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 <a href="http://spoggy.herokuapp.com/" target="_blank">Spoggy</a> et en quoi l'assaut de Persée était une phase importante de son développement...<br />
<br />
<a href="https://2.bp.blogspot.com/-Ufp22Qz6yhM/Wxv_ga4n0wI/AAAAAAAAVZk/Yh3NOpvq47sCu2oUw3bDjRLb63D3ZSZnwCLcBGAs/s1600/Smag0_uml1-750073.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="1351" data-original-width="1600" height="168" src="https://2.bp.blogspot.com/-Ufp22Qz6yhM/Wxv_ga4n0wI/AAAAAAAAVZk/Yh3NOpvq47sCu2oUw3bDjRLb63D3ZSZnwCLcBGAs/s200/Smag0_uml1-750073.png" width="200" /></a>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...<br />
<br />
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...<br />
<br />
<br />
<br />
<a href="https://2.bp.blogspot.com/-cLFOs38ZcnI/Wxv_gWYGTeI/AAAAAAAAVZg/vakS0oceVVgZnJhukAVBu7irEixkYCZygCLcBGAs/s1600/Smag0_uml_Spoggy_Detail_Interface.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" data-original-height="1351" data-original-width="1600" height="168" src="https://2.bp.blogspot.com/-cLFOs38ZcnI/Wxv_gWYGTeI/AAAAAAAAVZg/vakS0oceVVgZnJhukAVBu7irEixkYCZygCLcBGAs/s200/Smag0_uml_Spoggy_Detail_Interface.png" width="200" /></a>Chaque objet connecté, chaque robot possède une petite base de connaissances au format rdf ou un endpoint sparql...<br />
(<a href="https://jena.apache.org/documentation/fuseki2/index.html" target="_blank">Fuseki</a> est un simple fichier Zip à décompresser & ne nécessite que java8).<br />
<span style="text-align: left;"><br /></span>
<span style="text-align: left;">Spoggy doit être capable de se connecter à plusieurs triplestores ou endpoints, tels qu'un</span><span style="text-align: left;"> </span><a href="https://jena.apache.org/documentation/fuseki2/index.html" style="text-align: left;" target="_blank">serveur Fuseki</a><span style="text-align: left;"> </span><span style="text-align: left;">personnel,</span><span style="text-align: left;"> </span><a href="http://fr.dbpedia.org/" style="text-align: left;" target="_blank">DBPedia</a><span style="text-align: left;">, ou d'autres format comme celui par exemple de</span><span style="text-align: left;"> </span><a href="http://semantic-forms.cc:9112/display?displayuri=http%3A%2F%2Fsemantic-forms.cc%3A9112%2Fldp%2F1526405370065-42086316854557885" style="text-align: left;" target="_blank">Semantic Forms</a><br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://4.bp.blogspot.com/-iCFS8IfXVVk/Wxv_gdT1RlI/AAAAAAAAVZo/r8VvGKT0nXwxAt7-XpVBTl1HxU7P7GYjwCLcBGAs/s1600/Smag0_uml_Spoggy_Detail_Interface%2B2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="829" data-original-width="1600" height="103" src="https://4.bp.blogspot.com/-iCFS8IfXVVk/Wxv_gdT1RlI/AAAAAAAAVZo/r8VvGKT0nXwxAt7-XpVBTl1HxU7P7GYjwCLcBGAs/s200/Smag0_uml_Spoggy_Detail_Interface%2B2.png" width="200" /></a><br />Spoggy correspond à l'interface utilisateur (en vert) vers les triplestore, et le <a href="http://data.persee.fr/sparql" target="_blank">triplestore Persée</a> correspond à ce format, il est l'un des "Autres serveurs et sourtces RDF" (cadre rouge sur le schéma). </div>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://1.bp.blogspot.com/-AVQaXden9fk/WxwG0-bgnJI/AAAAAAAAVZ4/xs3T10IxNsoeMp_UY8pushJ6oRU2sjVuACLcBGAs/s1600/spoggy%2Bapercu%2Bgraphe%2Brdf.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" data-original-height="777" data-original-width="1600" height="155" src="https://1.bp.blogspot.com/-AVQaXden9fk/WxwG0-bgnJI/AAAAAAAAVZ4/xs3T10IxNsoeMp_UY8pushJ6oRU2sjVuACLcBGAs/s320/spoggy%2Bapercu%2Bgraphe%2Brdf.png" width="320" /></a>Spoggy permet d'une part de <a href="https://www.youtube.com/watch?v=5BHIoRyPIWc&list=PLmnJTs7YASPO61OzacKf4atmLObMFMD3m" target="_blank">créer des graphes RDF</a> , 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...</div>
<div class="" style="clear: both; text-align: left;">
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...</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
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... 😏</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
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...</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h2 style="clear: both; text-align: left;">
Bon et concrètement qu'est ce que ça donne ?</h2>
<div class="separator" style="clear: both; text-align: left;">
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 : </div>
<div class="separator" style="clear: both; text-align: left;">
(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)</div>
<h4 style="clear: both; text-align: left;">
1 En utilisant une url paramétrée pour Spoggy : </h4>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
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 : </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: yellow;">Attention, pour se brancher sur Persee, vous devez consulter Spoggy en http et non https !</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: yellow;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
par exemple la page Persée sur <a href="http://www.persee.fr/authority/30551" target="_blank">Pierre Bourdieu</a> (<a href="http://www.persee.fr/authority/30551" target="_blank">http://www.persee.fr/authority/30551</a> ) aurait un bouton qui renverrait vers Spoggy, ou afficherait le graphe via cette adresse (remplacer 'www' par 'data et 'authority' par 'person' : </div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://spoggy.herokuapp.com/?endpoint=http://data.persee.fr/sparql&uri=http://data.persee.fr/person/30551" target="_blank">http://spoggy.herokuapp.com/?endpoint=http://data.persee.fr/sparql&uri=http://data.persee.fr/person/30551</a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Pour un document tel que <a href="http://www.persee.fr/doc/ahess_0395-2649_1977_num_32_3_293828" target="_blank">http://www.persee.fr/doc/ahess_0395-2649_1977_num_32_3_293828</a>, remplacez simplement 'www' par 'data' : </div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://spoggy.herokuapp.com/?endpoint=http://data.persee.fr/sparql&uri=http://data.persee.fr/doc/ahess_0395-2649_1977_num_32_3_293828" target="_blank">http://spoggy.herokuapp.com/?endpoint=http://data.persee.fr/sparql&uri=http://data.persee.fr/doc/ahess_0395-2649_1977_num_32_3_293828</a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /><iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/lHFRhYcvaVY/0.jpg" src="https://www.youtube.com/embed/lHFRhYcvaVY?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h4 style="clear: both; text-align: left;">
2 : Mode Exploration de Spoggy appliqué à Persée : </h4>
<div class="separator" style="clear: both; text-align: left;">
En utilisant les "Requêtes prédéfinies de Karl & Cécile "</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /><iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/qR3QDTBDr44/0.jpg" src="https://www.youtube.com/embed/qR3QDTBDr44?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h4 style="clear: both; text-align: left;">
3: Spoggy en mode recherche textuelle sur les données de Persée : </h4>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /><iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/oCrFgqcFAGY/0.jpg" src="https://www.youtube.com/embed/oCrFgqcFAGY?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h2 style="clear: both; text-align: left;">
Et Maintenant ???</h2>
<div class="separator" style="clear: both; text-align: left;">
Il y a encore quelques requêtes à revoir, des filtres, et des aménagements...</div>
<div class="separator" style="clear: both; text-align: left;">
petit rappel : </div>
<div class="separator" style="clear: both; text-align: left;">
- pour participer au développement de Spoggy, c'est sur le <a href="https://github.com/scenaristeur/heroku-spoggy" target="_blank">github heroku-spoggy</a></div>
<div class="separator" style="clear: both; text-align: left;">
- pour apporter de nouvelles idées : utilisez <a href="https://github.com/scenaristeur/heroku-spoggy/projects/1" target="_blank">le kanban de heroku-spoggy</a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
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 : </div>
<div class="separator" style="clear: both; text-align: left;">
- exploration & de recherche (<span style="background-color: yellow;"> en jaune dans le code ci-dessous),</span></div>
<div class="separator" style="clear: both; text-align: left;">
- 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. (<span style="background-color: lime;">en vert dans le code ci-dessous),</span></div>
<div class="separator" style="clear: both; text-align: left;">
- et des requêtes complémentaires en fonction du type de noeud sur lesquels on clic (<span style="background-color: cyan;">en bleu dans le code ci-dessous</span>)</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
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... </div>
<div class="separator" style="clear: both; text-align: left;">
Un exemple de ce à quoi cela pourrait ressembler est (a l'heure actuelle dans <a href="https://github.com/scenaristeur/heroku-spoggy/blob/81157440156cc9dcc4315baf7ae8619184f76bc2/public/src/spoggy-endpoints/spoggy-endpoints.html#L344" target="_blank">le fichier spoggy-endpoint</a>, mais c'est certainement amené à changer pour généraliser la proicédure ;-) : </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<blockquote class="tr_bq" style="clear: both; text-align: left;">
<table class="highlight tab-size js-file-line-container" data-tab-size="8" style="background-color: white; border-collapse: collapse; border-spacing: 0px; box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 14px; tab-size: 8;"><tbody style="box-sizing: border-box;">
<tr style="box-sizing: border-box;"><td class="blob-code blob-code-inner js-file-line" id="LC344" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"> {</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="345" id="L345" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC345" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"> name<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span><span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">'</span>Persee<span class="pl-pds" style="box-sizing: border-box;">'</span></span>,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="346" id="L346" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC346" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"> description<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">"</span>Le portail Persée<span class="pl-cce" style="box-sizing: border-box;">\n</span> \</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="347" id="L347" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC347" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"><span class="pl-s" style="box-sizing: border-box; color: #032f62;"> Persée est un programme national de numérisation et de diffusion de collections de documents scientifiques.\</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="348" id="L348" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC348" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"><span class="pl-s" style="box-sizing: border-box; color: #032f62;"> Sur son portail (www.persee.fr) plus de 200 collections de revues publiées de 1820 à nos jours sont disponibles.\</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="349" id="L349" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC349" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"><span class="pl-s" style="box-sizing: border-box; color: #032f62;"> Le portail permet une recherche dans certaines métadonnées et le texte de plus de 700 000 documents et 500 000 illustrations. \</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="350" id="L350" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC350" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"><span class="pl-s" style="box-sizing: border-box; color: #032f62;"> Les interfaces de recherche actuelles permettent d’exploiter trois index (documents, illustrations et auteurs) \</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="351" id="L351" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC351" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"><span class="pl-s" style="box-sizing: border-box; color: #032f62;"> et elles sont dotées de fonctionnalités de tri, de facettes, etc.<span class="pl-pds" style="box-sizing: border-box;">"</span></span>,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="352" id="L352" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC352" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"> plus<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">'</span>http://data.persee.fr/ressources/le-triplestore-de-persee/<span class="pl-pds" style="box-sizing: border-box;">'</span></span>,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="353" id="L353" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC353" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"> url<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">'</span>http://data.persee.fr/sparql<span class="pl-pds" style="box-sizing: border-box;">'</span></span>, <span class="pl-c" style="box-sizing: border-box; color: #6a737d;"><span class="pl-c" style="box-sizing: border-box;">//</span> url: 'http://data.persee.fr',</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="354" id="L354" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC354" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"> image<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">'</span>https://www.persee.fr/static/persee.png<span class="pl-pds" style="box-sizing: border-box;">'</span></span>,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="355" id="L355" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC355" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"> actif<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">true</span>,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="356" id="L356" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC356" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"> selectionnable<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">true</span>,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="357" id="L357" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC357" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"> type<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">'</span>virtuoso<span class="pl-pds" style="box-sizing: border-box;">'</span></span>,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="358" id="L358" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC358" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"> read<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span><span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">true</span>, write<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span><span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">false</span>,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="359" id="L359" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC359" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"> <span style="background-color: yellow;"> exploreQuery<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> {</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="360" id="L360" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC360" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: yellow; box-sizing: border-box;"> query<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">'</span>SELECT DISTINCT ?s ?t ?sub \</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="361" id="L361" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC361" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"><span class="pl-s" style="background-color: yellow; box-sizing: border-box; color: #032f62;"> WHERE {\</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="362" id="L362" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC362" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"><span class="pl-s" style="background-color: yellow; box-sizing: border-box; color: #032f62;"> ?s ?p bibo:Document.\</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="363" id="L363" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC363" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"><span class="pl-s" style="background-color: yellow; box-sizing: border-box; color: #032f62;"> ?s dcterms:title ?t.\</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="364" id="L364" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC364" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"><span class="pl-s" style="background-color: yellow; box-sizing: border-box; color: #032f62;"> ?s dcterms:subject ?sub.\</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="365" id="L365" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC365" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"><span class="pl-s" style="background-color: yellow; box-sizing: border-box; color: #032f62;"> filter (lang(?sub) = "" || langMatches(lang(?sub), "fr"))\</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="366" id="L366" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC366" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: yellow; box-sizing: border-box;"><span class="pl-s" style="box-sizing: border-box; color: #032f62;"> } LIMIT 100<span class="pl-pds" style="box-sizing: border-box;">'</span></span> ,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="367" id="L367" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC367" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: yellow; box-sizing: border-box;"> typeResources<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span>{</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="368" id="L368" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC368" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: yellow; box-sizing: border-box;"> s<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">'</span>bibo:Document<span class="pl-pds" style="box-sizing: border-box;">'</span></span>,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="369" id="L369" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC369" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: yellow; box-sizing: border-box;"> sub<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">'</span>Subjects<span class="pl-pds" style="box-sizing: border-box;">'</span></span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="370" id="L370" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC370" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: yellow; box-sizing: border-box;"> },</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="371" id="L371" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC371" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"> <span style="background-color: lime;"> <span class="pl-en" style="box-sizing: border-box; color: #6f42c1;">parseToVis</span> <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">function</span>(<span class="pl-smi" style="box-sizing: border-box;">app</span>, <span class="pl-smi" style="box-sizing: border-box;">results</span>, <span class="pl-smi" style="box-sizing: border-box;">endpointUrl</span>,<span class="pl-smi" style="box-sizing: border-box;">typeResources</span>, <span class="pl-smi" style="box-sizing: border-box;">group</span>){</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="372" id="L372" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC372" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> <span class="pl-c" style="box-sizing: border-box; color: #6a737d;"><span class="pl-c" style="box-sizing: border-box;">//</span> var app = this;</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="373" id="L373" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC373" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="374" id="L374" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC374" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">var</span> visRes <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">=</span> {nodes<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span>[], edges<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span>[]};</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="375" id="L375" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC375" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> <span class="pl-smi" style="box-sizing: border-box;">results</span>.<span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">forEach</span>(<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">function</span>(<span class="pl-smi" style="box-sizing: border-box;">r</span>){</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="376" id="L376" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC376" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> <span class="pl-en" style="box-sizing: border-box; color: #6f42c1;">console</span>.<span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">log</span>(r);</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="377" id="L377" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC377" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">let</span> node <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">=</span> {</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="378" id="L378" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC378" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> id<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-smi" style="box-sizing: border-box;">app</span>.<span class="pl-en" style="box-sizing: border-box; color: #6f42c1;">visId</span>(<span class="pl-smi" style="box-sizing: border-box;">r</span>.<span class="pl-smi" style="box-sizing: border-box;">s</span>.<span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">value</span>),</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="379" id="L379" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC379" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> type<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">null</span>,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="380" id="L380" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC380" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> resourceType<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-smi" style="box-sizing: border-box;">typeResources</span>.<span class="pl-smi" style="box-sizing: border-box;">s</span>,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="381" id="L381" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC381" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> uri<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-smi" style="box-sizing: border-box;">r</span>.<span class="pl-smi" style="box-sizing: border-box;">s</span>.<span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">value</span>,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="382" id="L382" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC382" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> label<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-smi" style="box-sizing: border-box;">app</span>.<span class="pl-en" style="box-sizing: border-box; color: #6f42c1;">visLabelSplit</span>(<span class="pl-smi" style="box-sizing: border-box;">app</span>.<span class="pl-en" style="box-sizing: border-box; color: #6f42c1;">visLabel</span>(<span class="pl-smi" style="box-sizing: border-box;">r</span>.<span class="pl-smi" style="box-sizing: border-box;">t</span>.<span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">value</span>)),</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="383" id="L383" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC383" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> endpointUrl<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> endpointUrl,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="384" id="L384" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC384" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> color<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">"</span>rgb(76,0,74)<span class="pl-pds" style="box-sizing: border-box;">"</span></span>,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="385" id="L385" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC385" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> font<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> {</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="386" id="L386" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC386" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> color<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">'</span>rgb(255,255,255)<span class="pl-pds" style="box-sizing: border-box;">'</span></span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="387" id="L387" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC387" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> },</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="388" id="L388" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC388" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> cid<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> group,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="389" id="L389" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC389" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> y<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">2</span><span class="pl-k" style="box-sizing: border-box; color: #d73a49;">*</span><span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">Math</span>.<span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">random</span>()</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="390" id="L390" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC390" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> }</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="391" id="L391" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC391" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">var</span> trouveN <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">=</span> <span class="pl-smi" style="box-sizing: border-box;">visRes</span>.<span class="pl-smi" style="box-sizing: border-box;">nodes</span>.<span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">find</span>(<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">function</span>(<span class="pl-smi" style="box-sizing: border-box;">element</span>){</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="392" id="L392" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC392" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">return</span> <span class="pl-smi" style="box-sizing: border-box;">node</span>.<span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">id</span> <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">==</span> <span class="pl-smi" style="box-sizing: border-box;">element</span>.<span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">id</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="393" id="L393" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC393" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> });</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="394" id="L394" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC394" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">if</span> (trouveN) {</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="395" id="L395" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC395" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> <span class="pl-c" style="box-sizing: border-box; color: #6a737d;"><span class="pl-c" style="box-sizing: border-box;">//</span> console.log("TROUVE ")</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="396" id="L396" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC396" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> <span class="pl-c" style="box-sizing: border-box; color: #6a737d;"><span class="pl-c" style="box-sizing: border-box;">//</span> console.log(trouveN)</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="397" id="L397" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC397" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> node <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">=</span> trouveN;</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="398" id="L398" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC398" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> }<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">else</span>{</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="399" id="L399" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC399" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> <span class="pl-smi" style="box-sizing: border-box;">visRes</span>.<span class="pl-smi" style="box-sizing: border-box;">nodes</span>.<span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">push</span>(node);</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="400" id="L400" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC400" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> }</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="401" id="L401" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC401" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="402" id="L402" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC402" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">let</span> nodeSub <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">=</span> {</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="403" id="L403" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC403" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> id<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-smi" style="box-sizing: border-box;">r</span>.<span class="pl-smi" style="box-sizing: border-box;">sub</span>.<span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">value</span>,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="404" id="L404" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC404" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> type<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-smi" style="box-sizing: border-box;">r</span>.<span class="pl-smi" style="box-sizing: border-box;">sub</span>.<span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">type</span>,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="405" id="L405" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC405" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> resourceType<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-smi" style="box-sizing: border-box;">typeResources</span>.<span class="pl-smi" style="box-sizing: border-box;">sub</span>,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="406" id="L406" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC406" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> label<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-smi" style="box-sizing: border-box;">app</span>.<span class="pl-en" style="box-sizing: border-box; color: #6f42c1;">visLabelSplit</span>(<span class="pl-smi" style="box-sizing: border-box;">r</span>.<span class="pl-smi" style="box-sizing: border-box;">sub</span>.<span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">value</span>),</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="407" id="L407" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC407" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> endpointUrl<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> endpointUrl,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="408" id="L408" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC408" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> color<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">"</span>rgb(107,142,35)<span class="pl-pds" style="box-sizing: border-box;">"</span></span>,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="409" id="L409" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC409" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> shape<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">"</span>box<span class="pl-pds" style="box-sizing: border-box;">"</span></span>,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="410" id="L410" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC410" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> cid<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> group,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="411" id="L411" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC411" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> y<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">2</span><span class="pl-k" style="box-sizing: border-box; color: #d73a49;">*</span><span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">Math</span>.<span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">random</span>()</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="412" id="L412" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC412" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> }</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="413" id="L413" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC413" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">var</span> trouveS <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">=</span> <span class="pl-smi" style="box-sizing: border-box;">visRes</span>.<span class="pl-smi" style="box-sizing: border-box;">nodes</span>.<span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">find</span>(<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">function</span>(<span class="pl-smi" style="box-sizing: border-box;">element</span>){</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="414" id="L414" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC414" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">return</span> <span class="pl-smi" style="box-sizing: border-box;">nodeSub</span>.<span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">id</span> <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">==</span> <span class="pl-smi" style="box-sizing: border-box;">element</span>.<span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">id</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="415" id="L415" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC415" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> });</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="416" id="L416" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC416" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">if</span> (trouveS) {</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="417" id="L417" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC417" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> <span class="pl-c" style="box-sizing: border-box; color: #6a737d;"><span class="pl-c" style="box-sizing: border-box;">//</span> console.log("TROUVE ")</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="418" id="L418" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC418" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> <span class="pl-c" style="box-sizing: border-box; color: #6a737d;"><span class="pl-c" style="box-sizing: border-box;">//</span> console.log(trouveS)</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="419" id="L419" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC419" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> nodeSub <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">=</span> trouveS;</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="420" id="L420" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC420" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> }<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">else</span>{</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="421" id="L421" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC421" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> <span class="pl-smi" style="box-sizing: border-box;">visRes</span>.<span class="pl-smi" style="box-sizing: border-box;">nodes</span>.<span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">push</span>(nodeSub);</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="422" id="L422" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC422" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> }</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="423" id="L423" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC423" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="424" id="L424" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC424" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">let</span> eType <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">=</span> {from <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-smi" style="box-sizing: border-box;">node</span>.<span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">id</span>, to<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-smi" style="box-sizing: border-box;">nodeSub</span>.<span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">id</span>, label<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">"</span>subject<span class="pl-pds" style="box-sizing: border-box;">"</span></span>}</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="425" id="L425" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC425" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">if</span> (<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">!</span><span class="pl-smi" style="box-sizing: border-box;">visRes</span>.<span class="pl-smi" style="box-sizing: border-box;">edges</span>.<span class="pl-en" style="box-sizing: border-box; color: #6f42c1;">includes</span>(eType)){</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="426" id="L426" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC426" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> <span class="pl-smi" style="box-sizing: border-box;">visRes</span>.<span class="pl-smi" style="box-sizing: border-box;">edges</span>.<span class="pl-c1" style="box-sizing: border-box; color: #005cc5;">push</span>(eType)</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="427" id="L427" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC427" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> }</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="428" id="L428" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC428" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> });</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="429" id="L429" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC429" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="430" id="L430" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC430" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">return</span> visRes;</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="431" id="L431" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC431" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> }</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="432" id="L432" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC432" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: lime; box-sizing: border-box;"> },</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="433" id="L433" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC433" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="434" id="L434" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC434" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"> <span style="background-color: yellow;"> searchQuery <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> {</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="435" id="L435" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC435" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: yellow; box-sizing: border-box;"> query<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">'</span> SELECT distinct * WHERE { ?s rdfs:label ?label . \</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="436" id="L436" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC436" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"><span class="pl-s" style="background-color: yellow; box-sizing: border-box; color: #032f62;"> ?s rdf:type ?type . \</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="437" id="L437" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC437" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"><span class="pl-s" style="background-color: yellow; box-sizing: border-box; color: #032f62;"> OPTIONAL { ?s dcterms:title ?title .} \</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="438" id="L438" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC438" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"><span class="pl-s" style="background-color: yellow; box-sizing: border-box; color: #032f62;"> FILTER(bif:contains(?label, "RECHERCHE")) . \</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="439" id="L439" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC439" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: yellow; box-sizing: border-box;"><span class="pl-s" style="box-sizing: border-box; color: #032f62;"> } LIMIT 100<span class="pl-pds" style="box-sizing: border-box;">'</span></span>,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="440" id="L440" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC440" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: yellow; box-sizing: border-box;"> typeResource<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span><span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">'</span>bibo:Document<span class="pl-pds" style="box-sizing: border-box;">'</span></span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="441" id="L441" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC441" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: yellow; box-sizing: border-box;"> },</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="442" id="L442" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC442" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"> <span style="background-color: cyan;"> clickonNode<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> [</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="443" id="L443" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC443" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: cyan; box-sizing: border-box;"> {type <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">"</span>Personne<span class="pl-pds" style="box-sizing: border-box;">"</span></span>,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="444" id="L444" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC444" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: cyan; box-sizing: border-box;"> detecteur<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">"</span>http://xmlns.com/foaf/0.1/Person<span class="pl-pds" style="box-sizing: border-box;">"</span></span>,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="445" id="L445" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC445" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: cyan; box-sizing: border-box;"> requete <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">'</span>PREFIX dcterms: <http://purl.org/dc/terms/> \</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="446" id="L446" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC446" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"><span class="pl-s" style="background-color: cyan; box-sizing: border-box; color: #032f62;"> PREFIX foaf: <http://xmlns.com/foaf/0.1/> \</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="447" id="L447" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC447" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"><span class="pl-s" style="background-color: cyan; box-sizing: border-box; color: #032f62;"> SELECT DISTINCT ?person ?name \</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="448" id="L448" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC448" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"><span class="pl-s" style="background-color: cyan; box-sizing: border-box; color: #032f62;"> WHERE { \</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="449" id="L449" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC449" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"><span class="pl-s" style="background-color: cyan; box-sizing: border-box; color: #032f62;"> ?doc dcterms:creator <NODEID>. \</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="450" id="L450" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC450" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"><span class="pl-s" style="background-color: cyan; box-sizing: border-box; color: #032f62;"> ?doc dcterms:creator ?person. \</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="451" id="L451" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC451" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"><span class="pl-s" style="background-color: cyan; box-sizing: border-box; color: #032f62;"> ?person foaf:name ?name. \</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="452" id="L452" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC452" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: cyan; box-sizing: border-box;"><span class="pl-s" style="box-sizing: border-box; color: #032f62;"> }<span class="pl-pds" style="box-sizing: border-box;">'</span></span>,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="453" id="L453" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC453" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: cyan; box-sizing: border-box;"> lienCree <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">"</span>co-auteur<span class="pl-pds" style="box-sizing: border-box;">"</span></span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="454" id="L454" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC454" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: cyan; box-sizing: border-box;"> },</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="455" id="L455" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC455" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: cyan; box-sizing: border-box;"> {type <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">"</span>Document<span class="pl-pds" style="box-sizing: border-box;">"</span></span>,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="456" id="L456" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC456" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: cyan; box-sizing: border-box;"> detecteur<span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">"</span> a revoir<span class="pl-pds" style="box-sizing: border-box;">"</span></span>,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="457" id="L457" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC457" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: cyan; box-sizing: border-box;"> requete <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">'</span>a revoir<span class="pl-pds" style="box-sizing: border-box;">'</span></span>,</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="458" id="L458" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC458" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: cyan; box-sizing: border-box;"> lienCree <span class="pl-k" style="box-sizing: border-box; color: #d73a49;">:</span> <span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">"</span>a revoir<span class="pl-pds" style="box-sizing: border-box;">"</span></span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="459" id="L459" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC459" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: cyan; box-sizing: border-box;"> }</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="460" id="L460" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC460" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="background-color: cyan; box-sizing: border-box;"> ]</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="461" id="L461" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC461" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="462" id="L462" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC462" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"> <span class="pl-c" style="box-sizing: border-box; color: #6a737d;"><span class="pl-c" style="box-sizing: border-box;">/*</span> exploreQuery: 'select distinct ?Concept where {[] a ?Concept} LIMIT 100'<span class="pl-c" style="box-sizing: border-box;">*/</span></span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="463" id="L463" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC463" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"> },</span></td></tr>
</tbody></table>
</blockquote>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Vous retrouverez les développements complémentaires effectués lors du hackathon dans <a href="https://github.com/scenaristeur/heroku-spoggy/tree/Persee/public" target="_blank">la branche Persée du repo github de Spoggy</a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br />
<br />
<br /></div>
Smag0http://www.blogger.com/profile/00938895135265434540noreply@blogger.com0tag:blogger.com,1999:blog-5434325989512262829.post-80268075071228210092018-05-27T13:30:00.000+02:002018-05-27T21:59:11.829+02:00Quand Spoggy utilise Polymer pour s'attaquer à Persée...<div dir="ltr" style="text-align: left;" trbidi="on">
Difficulté du tuto ? ça devrait être accessible à toute personne qui a un peu approché le javascript...<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/y4k15oq9I6c/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/y4k15oq9I6c?feature=player_embedded" width="320"></iframe></div>
<br />
Dans ce petit tutoriel, on va voir comment utiliser <a href="https://en.wikipedia.org/wiki/Polymer_(library)" target="_blank">Polymer</a> ( <a href="https://www.polymer-project.org/3.0/start/" target="_blank">plus d'infos</a> ) pour effectuer des requêtes vers un endpoint sparql et afficher les résultats, on va ici utiliser :<br />
<br />
<ul style="text-align: left;">
<li>Persée : <a href="http://data.persee.fr/sparql" target="_blank">http://data.persee.fr/sparql </a> ... <a href="http://data.persee.fr/" target="_blank">plus d'infos</a>,</li>
</ul>
<br />
mais le principe est le même avec d'autres endpoints tels que :<br />
<br />
<ul style="text-align: left;">
<li>DBPEDIA : <a href="http://fr.dbpedia.org/sparql" target="_blank">http://fr.dbpedia.org/sparql</a> ... <a href="http://fr.dbpedia.org/" target="_blank">plus d'infos </a></li>
<li>Bibliothèque Nationale de France : <a href="http://data.bnf.fr/sparql" target="_blank">http://data.bnf.fr/sparql</a> ... <a href="http://data.bnf.fr/" target="_blank">plus d'infos</a></li>
<li>INSEE : <a href="http://rdf.insee.fr/sparql" target="_blank">http://rdf.insee.fr/sparql</a> ... <a href="http://rdf.insee.fr/" target="_blank">plus d'infos</a></li>
</ul>
<br />
... <a href="https://www.w3.org/wiki/SparqlEndpoints" target="_blank">et bien d'autres </a> ou <a href="https://www.lespetitescases.net/ou-s-amuser-avec-sparql" target="_blank">encore</a><br />
C'est quoi un <a href="https://bibliotheques.wordpress.com/2012/11/19/sparql-endpoint/" target="_blank">endpoint Sparql ?</a><br />
et <a href="http://data.persee.fr/ressources/quest-ce-quun-triplestore/" target="_blank">un triplestore ? un triplet ? un prédicat ? un vocabulaire ?</a><br />
<br />
<br />
ETAPE 1 : INSTALLER LA STRUCTURE D'UNE APPLI POLYMER<br />
<br />
ETAPE 2 : CREATION DE L'ELEMENT SPOGGY-SPARQL QUI VA EFFECTUER LES REQUETES VERS LE ENDPOINT<br />
<br />
ETAPE 3 : LA REQUETE VERS L'ENDPOINT SPARQL.<br />
<br />
ETAPE 4 : LANCER LA REQUETE ET RECUPERER LES RESULTATS.<br />
<br />
ETAPE 5 : AFFICHAGE DES RESULTATS SOUS FORME DE LISTE.<br />
<h2 style="text-align: left;">
</h2>
<h2 style="text-align: left;">
<br />ETAPE 1 : INSTALLER LA STRUCTUTRE D'UNE APPLI POLYMER</h2>
<br />
<br />
Prérequis :<br />
<ul>
<li>installation nodejs (v8.11.2) : <a href="https://nodejs.org/fr/" target="_blank">https://nodejs.org/fr/</a></li>
<li>installation de bower : npm install -g bower</li>
<li> Préférez le navigateur Chrome, c'est le plus adapté à l'heure actuelle pour les web-components (<a href="https://www.webcomponents.org/" target="_blank">vérifiez la compatibilité de votre navigateur au bas de cette page</a> )</li>
</ul>
<div>
Ouvrez un terminal / invite de commande et <a href="https://www.polymer-project.org/3.0/start/install-3-0" target="_blank">installez en global (-g) Polymer</a> : </div>
<div>
<ul>
<li>npm install -g polymer-cli</li>
</ul>
<div>
<br /></div>
<div>
<span style="color: red;">Nous utilisons ici Polymer 2 car à l'heure où l'on écrit ces lignes, Polymer 3 n'est pas encore stabilisé.</span></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Créez un dossier pour votre appli et un dossier 'public' à l'intérieur de celui-ci et installez l'appli exemple de Polymer: </div>
</div>
<div>
<ul>
<li>mkdir tutosparql && cd tutosparql</li>
<li>mkdir public && cd public</li>
<li>polymer init</li>
<li>choisissez '6) polymer-2-starter-kit'</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-ktDkT0btYfA/WwpxJiIVQsI/AAAAAAAAVTU/7hfr7qMr6rUl4TRduEAIfnU9-eI31MJCgCLcBGAs/s1600/installation%2BPolymer%2B2%2Bstarter-kit.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1198" data-original-width="1314" height="363" src="https://2.bp.blogspot.com/-ktDkT0btYfA/WwpxJiIVQsI/AAAAAAAAVTU/7hfr7qMr6rUl4TRduEAIfnU9-eI31MJCgCLcBGAs/s400/installation%2BPolymer%2B2%2Bstarter-kit.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
lancez polymer serve</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-kfDjfT7XgkY/WwpxJuOEZqI/AAAAAAAAVTY/T0LE8M6WkJUsXUrdLek81enJ03jectLmwCLcBGAs/s1600/lancement%2Bpolymer%2Bserve.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1307" data-original-width="1322" height="395" src="https://1.bp.blogspot.com/-kfDjfT7XgkY/WwpxJuOEZqI/AAAAAAAAVTY/T0LE8M6WkJUsXUrdLek81enJ03jectLmwCLcBGAs/s400/lancement%2Bpolymer%2Bserve.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<br /></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
Votre appli 'starter-kit' devrait normalement être accessible à l'adresse <a href="http://127.0.0.1:8081/" target="_blank">http://127.0.0.1:8081</a> </div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-lEQz4aMrIeM/WwpzDKiAuTI/AAAAAAAAVTw/FCk9qeHFUdEqRivDnIV9raOkjKvKgLazACLcBGAs/s1600/aper%25C3%25A7u%2Bpolymer%2Bstarter%2Bkit.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="767" data-original-width="1600" height="191" src="https://1.bp.blogspot.com/-lEQz4aMrIeM/WwpzDKiAuTI/AAAAAAAAVTw/FCk9qeHFUdEqRivDnIV9raOkjKvKgLazACLcBGAs/s400/aper%25C3%25A7u%2Bpolymer%2Bstarter%2Bkit.png" width="400" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Utilisez maintenant votre éditeur préféré pour changer le code de cette appli</div>
<div>
<br /></div>
<div>
Le fichier principal de notre application se trouve dans 'public/src' et se nomme 'my-app.html'</div>
<div>
<br /></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-FyCuNQjkXes/WwpynjqodhI/AAAAAAAAVTo/mb3hlCqrOC4p8a8HY5lyAfu3yjrWo379ACLcBGAs/s1600/aper%25C3%25A7u%2Bcode%2Bpolymer%2Bstarter-kit.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1067" data-original-width="1600" height="266" src="https://1.bp.blogspot.com/-FyCuNQjkXes/WwpynjqodhI/AAAAAAAAVTo/mb3hlCqrOC4p8a8HY5lyAfu3yjrWo379ACLcBGAs/s400/aper%25C3%25A7u%2Bcode%2Bpolymer%2Bstarter-kit.png" width="400" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Dans le code du fichier 'my-app.html', on constate l'import des modules 'my-view1', 'my-view2' et 'my-view3', on va utiliser et modifier 'my-view1' qui se trouve être la page d'accueil de notre appli.</div>
<div>
<br /></div>
<div>
Commençons par créer un nouvel élément que nous allons ensuite inclure dans la page 'my-view1'.</div>
<div>
Arrétez le server (Ctrl+C) ou ouvrez un nouvel invite de commande/ terminal, placez vous dans le dossier 'public/src', créez un dossier pour votre nouvel élément, lancez à nouveau 'polymer init' et choisissez 'polymer-2-element'</div>
<div>
<br /></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-yhSwsx84ODQ/Wwp0geaGtVI/AAAAAAAAVT8/pIFblq6i_bwv1CzQJ-xX7wDCps2ZToi8wCLcBGAs/s1600/polymer%2B2%2Belement%2Bspoggy-sparql.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="990" data-original-width="1303" height="303" src="https://3.bp.blogspot.com/-yhSwsx84ODQ/Wwp0geaGtVI/AAAAAAAAVT8/pIFblq6i_bwv1CzQJ-xX7wDCps2ZToi8wCLcBGAs/s400/polymer%2B2%2Belement%2Bspoggy-sparql.png" width="400" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Ceci vous créé un élément nommé 'spoggy-sparql' dans 'public/src'. </div>
<div>
Commencez par modifier la première ligne du fichier 'public/src/spoggy-sparql/spoggy-sparql.html' (on utilise un dossier public, qui n'est pas réellement la norme, donc il faut ajouter '../' pour remonter d'un niveau de plus et aller chercher 'polymer' dans le dossier 'bower_components' ;-) ) : </div>
<div>
<br /></div>
<div>
<link rel="import" href="../polymer/polymer-element.html"></div>
<div>
modifié en :</div>
<div>
<div>
<link rel="import" href="../../bower_components/polymer/polymer-element.html"></div>
</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-fkx0HnfQ3EY/Wwp2F0Tg0hI/AAAAAAAAVUI/qiWK6te2vQwsBPEhIYKvfswbjMUQjK0aACLcBGAs/s1600/modification%2Bspoggy-sparql_html%2Bpolymer%2Bstarter-kit.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1067" data-original-width="1600" height="266" src="https://1.bp.blogspot.com/-fkx0HnfQ3EY/Wwp2F0Tg0hI/AAAAAAAAVUI/qiWK6te2vQwsBPEhIYKvfswbjMUQjK0aACLcBGAs/s400/modification%2Bspoggy-sparql_html%2Bpolymer%2Bstarter-kit.png" width="400" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Maintenant que notre élément est créé, on va l'insérer dans la page 'my-view1.html'</div>
<div>
Pour importer notre element spoggy-sparql, il faut l'importer en incluant la ligne : </div>
<div>
<br /></div>
<div>
<link rel="import" href="./spoggy-sparql/spoggy-sparql.html"></div>
<div>
<br /></div>
<div>
et ensuite le positionner entre les balises <template> .... </template></div>
<div>
<br /></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-GPxXeSsaqp4/Wwp4KPkft_I/AAAAAAAAVUU/zExugtQfpaYQPwxKyboNsMDiBIegs5xCACLcBGAs/s1600/import%2Belement%2Bspoggy-sparql%2Bdans%2Bmy-view1_html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1067" data-original-width="1600" height="266" src="https://4.bp.blogspot.com/-GPxXeSsaqp4/Wwp4KPkft_I/AAAAAAAAVUU/zExugtQfpaYQPwxKyboNsMDiBIegs5xCACLcBGAs/s400/import%2Belement%2Bspoggy-sparql%2Bdans%2Bmy-view1_html.png" width="400" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Ce qui nous donne en consultant la page http://127.0.0.1:8081 (si vous avez arrêté le serveur avec Ctrl+C, relancez-le avec 'polymer serve'</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-sgCUXYvxSB8/Wwp4PFqbk_I/AAAAAAAAVUY/fqUJeOQaN5cR3i-xkywi3SiUhU80jFOWQCLcBGAs/s1600/aper%25C3%25A7u%2Binclusion%2Belement%2Bspoggy-sparql.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="642" data-original-width="1600" height="160" src="https://4.bp.blogspot.com/-sgCUXYvxSB8/Wwp4PFqbk_I/AAAAAAAAVUY/fqUJeOQaN5cR3i-xkywi3SiUhU80jFOWQCLcBGAs/s400/aper%25C3%25A7u%2Binclusion%2Belement%2Bspoggy-sparql.png" width="400" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Jusque là, tout va bien, attention, ça se corse...</div>
<div>
<br /></div>
<div>
<br /></div>
<h2 style="text-align: left;">
ETAPE 2 : CREATION DE L'ELEMENT SPOGGY-SPARQL QUI VA EFFECTUER LES REQUETES VERS LE ENDPOINT</h2>
<div>
<br /></div>
<div>
Bon passons aux choses sérieuses. Maintenant que notre structure d'appli est prête, on va pouvoir utiliser tout le potentiel de Polymer, et notamment la réutilisation des web-components ou elements...</div>
<div>
<br /></div>
<div>
On va par exemple avoir besoin du composant <a href="https://www.webcomponents.org/element/PolymerElements/iron-ajax" target="_blank"><iron-ajax></a> qui nous permettra d'effectuer les requêtes ajax asynchrones...</div>
<div>
<br /></div>
<div>
Sans plus tarder, entrons dans le vif du sujet : </div>
<div>
Placez-vous dans le dossier 'public' et installez le composant 'iron-ajax' : ( si vous n'avez pas encore installé bower, installez-le maintenant en global avec la commande 'npm install -g bower' ) </div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-Dbdxr-QkcCk/Wwp8GLuIj0I/AAAAAAAAVUo/PXDoN8xaFAECdi-cOnByx2XgiVShW-8ZgCLcBGAs/s1600/installation%2Biron-ajax.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="640" data-original-width="1333" height="191" src="https://4.bp.blogspot.com/-Dbdxr-QkcCk/Wwp8GLuIj0I/AAAAAAAAVUo/PXDoN8xaFAECdi-cOnByx2XgiVShW-8ZgCLcBGAs/s400/installation%2Biron-ajax.png" width="400" /></a></div>
<div>
<br /></div>
<div>
Vous pouvez retrouver les composants installés dans le dossier 'public/bower_components'</div>
<div>
Maintenant que le composant iron-ajax est installé, on va pouvoir l'inclure dans notre composant 'spoggy-sparql'... C'est bon ? vous suivez toujours ???</div>
<div>
<br /></div>
<div>
De la même façon que tout à l'heure, il faut importer le composant avec la ligne : </div>
<div>
<br /></div>
<div>
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html"></div>
<div>
<br /></div>
<div>
et le placer entre les balises <templates></templates></div>
<div>
<br /></div>
<div>
Ici, rien n’apparaît car le composant <iron-ajax> ne sert qu'à faire des requêtes, il n'a pas de 'visuel', mais on s'occupera de ça plus tard.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-SLjJjr96hmE/Wwp9hY2ORUI/AAAAAAAAVU0/rFYG-vhWI9gixeT_UXI2KmklZV47WsDGgCLcBGAs/s1600/import%2Biron-ajax%2Bspoggy.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1067" data-original-width="1600" height="266" src="https://3.bp.blogspot.com/-SLjJjr96hmE/Wwp9hY2ORUI/AAAAAAAAVU0/rFYG-vhWI9gixeT_UXI2KmklZV47WsDGgCLcBGAs/s400/import%2Biron-ajax%2Bspoggy.png" width="400" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Tout va bien ? </div>
<div>
On attaque maintenant la requête</div>
<div>
<br /></div>
<h2 style="text-align: left;">
ETAPE 3 : LA REQUETE VERS L'ENDPOINT SPARQL.</h2>
<div>
Donc, ce qui nous intéresse, Thérèse, c'est d'aller chercher des data à l'adresse <a href="http://data.persee.fr/sparql" target="_blank">http://data.persee.fr/sparql</a> . Ne soyons pas plus royalistes que ceux qui le sont déjà, sur cette page, il y a déjà un exemple de reqûete que voici : </div>
<div>
<br /></div>
<div>
select distinct ?p where {?p a foaf:Person} LIMIT 100</div>
<div>
<br /></div>
<div>
On va pas aller chercher plus loin pour l'instant...</div>
<div>
Mais il va falloir paramétrer notre élement <iron-ajax>.</div>
<div>
le composant iron-ajax a en effet besoin de quelques paramètres : </div>
<div>
<ul style="text-align: left;">
<li>id : un identifiant, ça ne fait pas de mal, et on en aura besoin plus tard pour lancer la requête</li>
<li>url : une url, pour savoir à quelle adresse effectuer la requête</li>
<li>param : des options qui vont contenir le corps de la requête</li>
<li>handle-as : on défini le format dans lequel on souhaite recevoir le résultat de la requête</li>
<li>on-response : la fonction à exécuter lorsque un résultat est disponible (Attention au 's' dans _handleRe<span style="background-color: red;">s</span>ponse, avec un 's' comme en anglais, je me suis fait avoir plus d'une fois...</li>
<li>on-error : la fonction à exécuter en cas d'erreur de la requête (ça peut être utile)</li>
</ul>
</div>
<div>
<br /></div>
<div>
On peut donc remplacer <iron-ajax></iron-ajax> par :</div>
<div>
<br /></div>
<div>
<table class="highlight tab-size js-file-line-container" data-tab-size="8" style="background-color: white; border-collapse: collapse; border-spacing: 0px; box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 14px; tab-size: 8;"><tbody style="box-sizing: border-box;">
<tr style="box-sizing: border-box;"><td class="blob-code blob-code-inner js-file-line" id="LC33" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><<span class="pl-ent" style="box-sizing: border-box; color: #22863a;">iron-ajax</span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="34" id="L34" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC34" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-e" style="box-sizing: border-box; color: #6f42c1;">id</span>=<span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">"</span>sparqlRequest<span class="pl-pds" style="box-sizing: border-box;">"</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="35" id="L35" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC35" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-e" style="box-sizing: border-box; color: #6f42c1;">url</span>=<span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">"</span>{{url}}<span class="pl-pds" style="box-sizing: border-box;">"</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="36" id="L36" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC36" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-e" style="box-sizing: border-box; color: #6f42c1;">params</span>=<span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">"</span>{{options}}<span class="pl-pds" style="box-sizing: border-box;">"</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="37" id="L37" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC37" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-e" style="box-sizing: border-box; color: #6f42c1;">handle-as</span>=<span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">"</span>application/sparql-results+json<span class="pl-pds" style="box-sizing: border-box;">"</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="38" id="L38" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC38" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-e" style="box-sizing: border-box; color: #6f42c1;">on-response</span>=<span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">"</span>_handleResponse<span class="pl-pds" style="box-sizing: border-box;">"</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="39" id="L39" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC39" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-e" style="box-sizing: border-box; color: #6f42c1;">on-error</span>=<span class="pl-s" style="box-sizing: border-box; color: #032f62;"><span class="pl-pds" style="box-sizing: border-box;">"</span>_handleError<span class="pl-pds" style="box-sizing: border-box;">"</span></span>></<span class="pl-ent" style="box-sizing: border-box; color: #22863a;">iron-ajax</span>>
</td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="40" id="L40" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC40" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><br /></td></tr>
</tbody></table>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-F5Vvch_0eJo/WwqBaZwbOdI/AAAAAAAAVVA/8czDHDWSTtEnA1nHtzsoeUdsV_bTdEBNgCLcBGAs/s1600/param%25C3%25A9trage%2Brequete%2Biron-ajax%2Bsparql.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1067" data-original-width="1600" height="266" src="https://1.bp.blogspot.com/-F5Vvch_0eJo/WwqBaZwbOdI/AAAAAAAAVVA/8czDHDWSTtEnA1nHtzsoeUdsV_bTdEBNgCLcBGAs/s400/param%25C3%25A9trage%2Brequete%2Biron-ajax%2Bsparql.png" width="400" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
En fait, ici, nous n'avons pas défini 'url' et 'params', mais nous avons mis en face des variables Polymer ( reconnaissables avec les doubles accolades {{...}}), cela nous permet de les modifier plus facilement, donc allons y, c'est un peu plus bas, toujours dans le fichier spoggy-sparql.html, dans la fonction 'properties (){...}'</div>
<div>
<br /></div>
<div>
Et on va remplir les variables pour accéder à l'endpoint de Persée : </div>
<div>
url avec 'http://data.persee.fr/sparql'</div>
<div>
et options avec la requête : 'select distinct ?p where {?p a foaf:Person} LIMIT 100 '</div>
<div>
... voici ce qu'il faut ajouter : </div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<div>
url: {</div>
<div>
type: String,</div>
<div>
value: 'http://data.persee.fr/sparql'</div>
<div>
},</div>
<div>
options: {</div>
<div>
type: Object,</div>
<div>
value: {</div>
<div>
query: 'select distinct ?p where {?p a foaf:Person} LIMIT 100',</div>
<div>
format: 'application/sparql-results+json',</div>
<div>
}</div>
<div>
}</div>
</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-wSh_6xfex54/WwqD-_blxqI/AAAAAAAAVVM/Imj7FDaj-70jR_QQSM_nNgNSRoN0XivggCLcBGAs/s1600/Parametrage%2Biron-ajax%2Bsparql%2Bdata.persee.fr.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1067" data-original-width="1600" height="266" src="https://1.bp.blogspot.com/-wSh_6xfex54/WwqD-_blxqI/AAAAAAAAVVM/Imj7FDaj-70jR_QQSM_nNgNSRoN0XivggCLcBGAs/s400/Parametrage%2Biron-ajax%2Bsparql%2Bdata.persee.fr.png" width="400" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
</div>
<div>
<br /></div>
<h2 style="text-align: left;">
ETAPE 4 : LANCER LA REQUETE ET RECUPERER LES RESULTATS.</h2>
<div>
<br /></div>
<div>
Commençons par créer un bouton pour lancer la requête : </div>
<div>
Comme d'habitude, on va inclure un element <paper-button> et lui mettre une fonction quand on clique dessus : </div>
<div>
installer le composant paper-button : </div>
<div>
dans 'public' executez la commande : bower install paper-button</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-UjQFB4-7_KA/WwqFYM9h4bI/AAAAAAAAVVY/HfoScGORmDscIAB0glLSXtOYCck-qDt3gCLcBGAs/s1600/install%2Bpaper-button.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="463" data-original-width="1286" height="143" src="https://3.bp.blogspot.com/-UjQFB4-7_KA/WwqFYM9h4bI/AAAAAAAAVVY/HfoScGORmDscIAB0glLSXtOYCck-qDt3gCLcBGAs/s400/install%2Bpaper-button.png" width="400" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Puis importez-le dans notre module spoggy-sparql... </div>
<div>
Comme d'habitude : </div>
<div>
import : </div>
<div>
<br /></div>
<div>
<link rel="import" href="../../bower_components/paper-button/paper-button.html"></div>
<div>
<br /></div>
<div>
placement entre les balises <template>...</templates> avec le code : </div>
<div>
<br /></div>
<div>
<paper-button on-tap="executeRequete" raised> Executer la requête</paper-button></div>
<div>
<br /></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-8fpUdQFqzB0/WwqJeYeM0_I/AAAAAAAAVVk/4HKsHhpnlgEqpGMWAN9hM7wjOt5_8lolgCLcBGAs/s1600/import%2Bpaper-button.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1067" data-original-width="1600" height="266" src="https://2.bp.blogspot.com/-8fpUdQFqzB0/WwqJeYeM0_I/AAAAAAAAVVk/4HKsHhpnlgEqpGMWAN9hM7wjOt5_8lolgCLcBGAs/s400/import%2Bpaper-button.png" width="400" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Et ça donne quoi ??? Ben y'a qu'à aller voir sur http://127.0.0.1:8081, et actualiser la page via la touche F5, ou le bouton de rafraîchissement de page pour qu'elle se recharge</div>
<div>
( nb : <a href="https://www.alsacreations.com/astuce/lire/1436-console-javascript.html" target="_blank">profitez-en pour ouvrir la console javascript</a> )</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-DK6YgqCNSzs/WwqJjneRRoI/AAAAAAAAVVo/bDZAwbWOH3Y8LGV8-bebR5fi1WPbszP-wCLcBGAs/s1600/on-tap%2Bpaper-button.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="788" data-original-width="1600" height="196" src="https://1.bp.blogspot.com/-DK6YgqCNSzs/WwqJjneRRoI/AAAAAAAAVVo/bDZAwbWOH3Y8LGV8-bebR5fi1WPbszP-wCLcBGAs/s400/on-tap%2Bpaper-button.png" width="400" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
On a bien notre bouton (1) mais quand on clique dessus, on a une erreur dans la console (2): </div>
<div>
listener method `executeRequete` not defined</div>
<div>
<br /></div>
<div>
Ah bah oui, mince, on n'a pas défini la méthode 'executeRequete' qu'on souhaite utiliser lors de l'evenement 'on-tap' du bouton (quand on clique sur le bouton)... Et bien allons-y, définissons cette méthode... son rôle ??? on a dit que quand on clique sur le bouton, on l'application devait executer la requête, non? Ok, c'est parti, attention c'est trop hard : </div>
<div>
<br /></div>
<div>
Cette fois, c'est après la fonction 'properties', et il faut ajouter (voir n°3 dans l'image qui suit): </div>
<div>
<br /></div>
<div>
<div>
executeRequete(){</div>
<div>
this.$.sparqlRequest.generateRequest()</div>
<div>
}</div>
</div>
<div>
<br /></div>
<div>
ici, on utilise l'identifiant de notre requete 'sparqlRequest' et on lui applique la fonction 'generateRequest()' .... Tu vois... trop dur ...</div>
<div>
<br /></div>
<div>
Et tant qu'on y est, maintenant, je te sens chaud, allez, on se lâche, on écrit la fonction qu'on avait définie pour récupérer les résultats, rappelle-toi, c'est la fonction '_handleResponse' dans la requete <iron-ajax> (voir n°4 dans l'image qui suit)</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<div>
_handleResponse(data){</div>
<div>
console.log("Reponse Sparql");</div>
<div>
// console.log(data);</div>
<div>
// console.log(data.detail);</div>
<div>
// console.log(data.detail.error);</div>
<div>
// console.log(data.detail.error.message);</div>
<div>
// console.log(data.detail.request);</div>
<div>
console.log(data.detail.response);</div>
<div>
let response = JSON.parse(data.detail.response);</div>
<div>
let link = response.head.link;</div>
<div>
let vars = response.head.vars;</div>
<div>
let results = response.results.bindings;</div>
<div>
console.log(results);</div>
<div>
}</div>
</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-P7uud7qLSqw/WwqLy2h8aAI/AAAAAAAAVV4/NYPWDcl-XCwERqLASuYNbRsj_fL0R6XHQCLcBGAs/s1600/function%2Bexecute%2Brequete%2Biron%2Bajax%2Bet%2Bhandle%2Bresponse%2Bsparql.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1067" data-original-width="1600" height="266" src="https://1.bp.blogspot.com/-P7uud7qLSqw/WwqLy2h8aAI/AAAAAAAAVV4/NYPWDcl-XCwERqLASuYNbRsj_fL0R6XHQCLcBGAs/s400/function%2Bexecute%2Brequete%2Biron%2Bajax%2Bet%2Bhandle%2Bresponse%2Bsparql.png" width="400" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Maintenant quand on clique sur le bouton, les résultats s'affichent dans la console, mais c'est déjà pas mal....</div>
<div>
<br /></div>
<h2 style="text-align: left;">
ETAPE 5 : AFFICHAGE DES RESULTATS SOUS FORME DE LISTE.</h2>
<div>
Mouais dans la console, ça fait pas une appli, ça, donc, on vas récupérer ces résultats, les mettre dans une variable de l'appli (this.results) et utiliser un nouveau composant Polymer (dom-repeat) pour boucler sur les resultats, agrémenté d'un autre composant, paper-item, qui est tout approprié pour afficher des listes...</div>
<div>
<br /></div>
<div>
Ajoutez à la fin de la fonction _handleResponse la ligne 'this.results = results'</div>
<div>
<br /></div>
<div>
ce qui nous donne : </div>
<div>
<div>
<div>
_handleResponse(data){</div>
<div>
console.log("Reponse Sparql");</div>
<div>
// console.log(data);</div>
<div>
// console.log(data.detail);</div>
<div>
// console.log(data.detail.error);</div>
<div>
// console.log(data.detail.error.message);</div>
<div>
// console.log(data.detail.request);</div>
<div>
console.log(data.detail.response);</div>
<div>
let response = JSON.parse(data.detail.response);</div>
<div>
let link = response.head.link;</div>
<div>
let vars = response.head.vars;</div>
<div>
let results = response.results.bindings;</div>
<div>
console.log(results);</div>
<div>
<span style="background-color: red;">this.results = results;</span></div>
<div>
}</div>
</div>
</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-1KGD_3cQAuo/WwqQwvQbeLI/AAAAAAAAVWI/uS3G5YQVbBE8MMYWAqwjhSO6rkSJzOQjwCLcBGAs/s1600/affectation%2Bresults%2Bvariable%2Bglobale.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1067" data-original-width="1600" height="266" src="https://1.bp.blogspot.com/-1KGD_3cQAuo/WwqQwvQbeLI/AAAAAAAAVWI/uS3G5YQVbBE8MMYWAqwjhSO6rkSJzOQjwCLcBGAs/s400/affectation%2Bresults%2Bvariable%2Bglobale.png" width="400" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Maintenant que nous avons sorti nos 'results' de la fonction et l'avons affecté à une variable du composant spoggy-sparql, </div>
<div>
<br /></div>
<div>
<br /></div>
<div>
on peut boucler dessus en ayant pris soin : </div>
<div>
<ul style="text-align: left;">
<li>d'avoir installé le composant 'paper-item' avec la commande 'bower install paper-item' </li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-ZJOsWOY8DJo/WwqQsEyQoHI/AAAAAAAAVWE/_lZKpPYQAWAYLUngAnw_SALqT5JSTsuXwCLcBGAs/s1600/installation%2Bpaper-item%2Bspoggy%2Bsparql%2Bpersse%2Bdata%2Bfr.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="444" data-original-width="1306" height="108" src="https://3.bp.blogspot.com/-ZJOsWOY8DJo/WwqQsEyQoHI/AAAAAAAAVWE/_lZKpPYQAWAYLUngAnw_SALqT5JSTsuXwCLcBGAs/s320/installation%2Bpaper-item%2Bspoggy%2Bsparql%2Bpersse%2Bdata%2Bfr.png" width="320" /></a></div>
<div>
<br /></div>
<ul style="text-align: left;">
<li>d'avoir importé les composants 'dom-repeat' et 'paper-item' (voir n°5)</li>
</ul>
<div>
<div>
<!-- import template repeater --></div>
<div>
<div>
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html"></div>
<div>
<link rel="import" href="../../bower_components/paper-item/paper-item.html"></div>
</div>
</div>
<div>
<br /></div>
<div>
<br /></div>
<ul style="text-align: left;">
<li>d'insérer le code pour boucler (voir n°6)</li>
</ul>
<div>
<div>
<template is="dom-repeat" items="[[results]]"></div>
<div>
<paper-item >[[item.p.value]]</paper-item></div>
<div>
</template></div>
</div>
</div>
<div>
<br /></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-5tJ8jsXJeeA/WwqX5OMBSDI/AAAAAAAAVWY/HLd0Kj4YXqwzYAgcqvJThA3ZKFgV9aCagCLcBGAs/s1600/dom-repeat%2Bsparql%2Bresult%2Bpersee%2Bdata%2Bspoggy.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1067" data-original-width="1600" height="266" src="https://3.bp.blogspot.com/-5tJ8jsXJeeA/WwqX5OMBSDI/AAAAAAAAVWY/HLd0Kj4YXqwzYAgcqvJThA3ZKFgV9aCagCLcBGAs/s400/dom-repeat%2Bsparql%2Bresult%2Bpersee%2Bdata%2Bspoggy.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br /></div>
<div>
<br /></div>
<div>
Et le résultat ? </div>
<div>
<br /></div>
<div>
Une liste des résultats issus de Persée....<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-3URnAYicg3g/WwqYArXnTSI/AAAAAAAAVWc/OfGb3E7vIPsnDF4RTzvTGHivxvOgzh-GwCLcBGAs/s1600/affichage%2Bdata%2Bpersee%2Bvisualisation.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1600" height="200" src="https://2.bp.blogspot.com/-3URnAYicg3g/WwqYArXnTSI/AAAAAAAAVWc/OfGb3E7vIPsnDF4RTzvTGHivxvOgzh-GwCLcBGAs/s400/affichage%2Bdata%2Bpersee%2Bvisualisation.png" width="400" /></a></div>
<br />
<br />
<br />
<br /></div>
<div>
A vous maintenant de nettoyer les résultats, les mettre en forme, changer la requête...<br />
pourquoi pas une requête du style :<br />
<table class="highlight tab-size js-file-line-container" data-tab-size="8" style="background-color: white; border-collapse: collapse; border-spacing: 0px; box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 14px; tab-size: 8;"><tbody style="box-sizing: border-box;">
<tr style="box-sizing: border-box;"><td class="blob-code blob-code-inner js-file-line" id="LC550" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"><span class="pl-c" style="box-sizing: border-box; color: #6a737d;"> 'SELECT DISTINCT ?s ?t ?sub</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="551" id="L551" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC551" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"><span class="pl-c" style="box-sizing: border-box; color: #6a737d;"> WHERE {</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="552" id="L552" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC552" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"><span class="pl-c" style="box-sizing: border-box; color: #6a737d;"> ?s ?p bibo:Document.</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="553" id="L553" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC553" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"><span class="pl-c" style="box-sizing: border-box; color: #6a737d;"> ?s dcterms:title ?t.</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="554" id="L554" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC554" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"><span class="pl-c" style="box-sizing: border-box; color: #6a737d;"> ?s dcterms:subject ?sub.</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="555" id="L555" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC555" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"><span class="pl-c" style="box-sizing: border-box; color: #6a737d;"> filter (lang(?sub) = "" || langMatches(lang(?sub), "fr"))</span></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="556" id="L556" style="box-sizing: border-box; color: rgba(27, 31, 35, 0.3); cursor: pointer; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; min-width: 50px; padding: 0px 10px; text-align: right; user-select: none; vertical-align: top; white-space: nowrap; width: 50px;"></td><td class="blob-code blob-code-inner js-file-line" id="LC556" style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 20px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span class="pl-s1" style="box-sizing: border-box;"><span class="pl-c" style="box-sizing: border-box; color: #6a737d;"> } LIMIT 300'</span></span></td></tr>
</tbody></table>
<br />
???<br />
<br />
<br />
Pour récupérer le code de ce tutoriel c'est <a href="https://github.com/scenaristeur/tutosparql" target="_blank">https://github.com/scenaristeur/tutosparql</a><br />
<br />
<br />
Un truc sympa, à mon humble avis, c'est de coupler avec <a href="http://visjs.org/network_examples.html" target="_blank">VisJs</a>,<br />
Pour voir ce que ça donne, utilisez <a href="http://spoggy.herokuapp.com/" target="_blank">Spoggy</a> pour vous brancher sur Persée ou DbPedia: <a href="http://spoggy.herokuapp.com/" target="_blank">http://spoggy.herokuapp.com/</a><br />
<br />
ATTENTION utilisez l'adresse <a href="http://spoggy.herokuapp.com/" target="_blank">http://spoggy.herokuapp.com/</a> et non http<span style="background-color: red;">S</span>://spoggy.herokuapp.com/ --> sans le 's' de http<span style="background-color: red;">s</span>, car http://data.persee.fr/sparql n'est pas accessible en mode sécurisé<br />
<br />
Voir la vidéo <a href="https://youtu.be/y4k15oq9I6c" target="_blank">Quand Spoggy utilise Polymer pour s'attaquer à Persée</a>...<br />
<br />
Pour participer au projet Spoggy : <a href="https://github.com/scenaristeur/heroku-spoggy" target="_blank">https://github.com/scenaristeur/heroku-spoggy</a><br />
<br />
Ps : tu auras peut-être remarqué que parfois que vous ai tutoyé... Normal,... dans les moments difficiles, il faut savoir être soudé...<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/y4k15oq9I6c/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/y4k15oq9I6c?feature=player_embedded" width="320"></iframe></div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<div>
</div>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
</div>
Smag0http://www.blogger.com/profile/00938895135265434540noreply@blogger.com0tag:blogger.com,1999:blog-5434325989512262829.post-74298757517096267962018-05-10T14:58:00.003+02:002018-05-10T14:58:49.304+02:0001 Premiers Pas avec Spoggy<iframe allowfullscreen="" frameborder="0" height="344" src="https://www.youtube.com/embed/5BHIoRyPIWc" width="459"></iframe>Smag0http://www.blogger.com/profile/00938895135265434540noreply@blogger.com0tag:blogger.com,1999:blog-5434325989512262829.post-26431780911665406382018-05-10T14:37:00.001+02:002018-05-10T14:37:56.194+02:0002 Spoggy export import fonctionnalités avancées<iframe allowfullscreen="" frameborder="0" height="344" src="https://www.youtube.com/embed/NMijjAYsuqw" width="459"></iframe>Smag0http://www.blogger.com/profile/00938895135265434540noreply@blogger.com0tag:blogger.com,1999:blog-5434325989512262829.post-38356172825557537682018-03-30T06:48:00.001+02:002018-03-30T06:48:41.063+02:00representation-task-force/interface-spec.md at master · rdfjs/representation-task-force · GitHub<div dir="auto"><a href="https://github.com/rdfjs/representation-task-force/blob/master/interface-spec.md">https://github.com/rdfjs/representation-task-force/blob/master/interface-spec.md</a></div> Smag0http://www.blogger.com/profile/00938895135265434540noreply@blogger.com0tag:blogger.com,1999:blog-5434325989512262829.post-26714515235340233242018-02-24T12:01:00.001+01:002018-02-24T12:01:03.701+01:00Spoggy sur Heroku<div dir="ltr" style="text-align: left;" trbidi="on">
test : <a href="http://spoggy.herokuapp.com/?source=https://raw.githubusercontent.com/scenaristeur/smag0-connaissance/master/Ateliers/AtelierObjetsConnectes.json" target="_blank">http://spoggy.herokuapp.com/?source=https://raw.githubusercontent.com/scenaristeur/smag0-connaissance/master/Ateliers/AtelierObjetsConnectes.json</a><br />
<br />
<br />
DEMO : <a href="http://spoggy.herokuapp.com/" target="_blank">http://spoggy.herokuapp.com/</a><br />
GITHUB : <a href="https://github.com/scenaristeur/heroku-spoggy" target="_blank">https://github.com/scenaristeur/heroku-spoggy</a><br />
<br />
<br />
<br />
<br />
CONSTRUCTION :<br />
<br />
inspiré de https://devcenter.heroku.com/articles/node-websockets<br />
<br />
```<br />
mkdir herokuspoggy<br />
cd herokuspoggy<br />
npm init --yes<br />
```<br />
<br />
modifier package.json :<br />
<pre class=" language-json" style="background: rgb(42, 42, 42); border-radius: 0.3em; border: 1px solid rgb(224, 224, 230); box-sizing: border-box; color: white; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 14px; hyphens: none; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding: 1em; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.3) 0px 1px; word-break: normal; word-wrap: normal;"><code class=" language-json" style="background: none; border-radius: 0px; box-shadow: none; box-sizing: border-box; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: inherit; hyphens: none; line-height: 1.5; padding: 0px; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.3) 0px 1px; word-break: normal; word-spacing: normal; word-wrap: normal;"><span class="token property" style="box-sizing: border-box; color: #76d9e6;">"engines"</span><span class="token operator" style="box-sizing: border-box; color: #cfd7d6;">:</span> <span class="token punctuation" style="box-sizing: border-box; color: #cfd7d6;">{</span>
<span class="token property" style="box-sizing: border-box; color: #76d9e6;">"node"</span><span class="token operator" style="box-sizing: border-box; color: #cfd7d6;">:</span> <span class="token string" style="box-sizing: border-box; color: #76d9e6;">"6.2.0"</span>
<span class="token punctuation" style="box-sizing: border-box; color: #cfd7d6;">}</span><span class="token punctuation" style="box-sizing: border-box; color: #cfd7d6;">,</span>
<span class="token property" style="box-sizing: border-box; color: #76d9e6;">"scripts"</span><span class="token operator" style="box-sizing: border-box; color: #cfd7d6;">:</span> <span class="token punctuation" style="box-sizing: border-box; color: #cfd7d6;">{</span>
<span class="token property" style="box-sizing: border-box; color: #76d9e6;">"start"</span><span class="token operator" style="box-sizing: border-box; color: #cfd7d6;">:</span> <span class="token string" style="box-sizing: border-box; color: #76d9e6;">"node server.js"</span>
<span class="token punctuation" style="box-sizing: border-box; color: #cfd7d6;">}</span></code></pre>
<br />
on suit l'OPTION2 : Socket.io<br />
<pre class=" language-term" style="background: rgb(42, 42, 42); border-radius: 0.3em; border: 1px solid rgb(224, 224, 230); box-sizing: border-box; color: white; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 14px; hyphens: none; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding: 1em; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.3) 0px 1px; word-break: normal; word-wrap: normal;"><code class=" language-term" style="background: none; border-radius: 0px; box-shadow: none; box-sizing: border-box; color: #bebec5; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: inherit; hyphens: none; line-height: 1.5; padding: 0px; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.3) 0px 1px; word-break: normal; word-spacing: normal; word-wrap: normal;"><span class="token input" style="box-sizing: border-box; color: white;">npm install --save --save-exact express socket.io</span></code></pre>
<br />
<br />
<br /></div>
Smag0http://www.blogger.com/profile/00938895135265434540noreply@blogger.com0