{"id":798,"date":"2019-06-03T13:07:29","date_gmt":"2019-06-03T11:07:29","guid":{"rendered":"https:\/\/geekcommunicant.com\/blog\/?p=798"},"modified":"2019-06-03T13:07:30","modified_gmt":"2019-06-03T11:07:30","slug":"horloge-hexagonale","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2019\/06\/03\/horloge-hexagonale\/","title":{"rendered":"Une horloge hexagonale"},"content":{"rendered":"\n<p>\u00c0 la suite de mes premi\u00e8res exp\u00e9rimentations avec les canvas (voir mes trois premiers articles \u00e9tiquet\u00e9s <a href=\"https:\/\/geekcommunicant.com\/blog\/tag\/canvas\/\">#canvas<\/a>) et de la consultation r\u00e9cente de pages traitant de la cr\u00e9ation d\u2019horloges utilisant cette technologie, j\u2019ai d\u00e9cid\u00e9 d\u2019en cr\u00e9er une \u00e0 ma fa\u00e7on.<\/p>\n\n\n\n<p>Pour mon horloge, j\u2019ai voulu le faire de mani\u00e8re originale, \u00e0 la mani\u00e8re des montres propos\u00e9es par <a rel=\"noreferrer noopener\" aria-label=\"Tokyoflash Japan (opens in a new tab)\" href=\"https:\/\/www.tokyoflash.com\/en\/watches\/\" target=\"_blank\">Tokyoflash Japan<\/a>. Mon choix s\u2019est arr\u00eat\u00e9 sur l\u2019utilisation de formes hexagonales (parce que j\u2019aime bien cette forme).<\/p>\n\n\n\n<p>Avec l\u2019utilisation d\u2019un anneau hexagonal et d\u2019un hexagone au\ncentre, un digit (dans notre cas, un ensemble anneau + hexagone au milieu) peut\nprendre 8 valeurs diff\u00e9rentes, ce qui fait que l\u2019heure sera affich\u00e9e en base 8.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"269\" src=\"https:\/\/geekcommunicant.com\/blog\/wp-content\/uploads\/hexa_digits.jpg\" alt=\"Digits hexagonaux\" class=\"wp-image-799\" srcset=\"https:\/\/geekcommunicant.com\/blog\/wp-content\/uploads\/hexa_digits.jpg 400w, https:\/\/geekcommunicant.com\/blog\/wp-content\/uploads\/hexa_digits-300x202.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><figcaption>D\u00e9tail d&rsquo;un digit hexagonal<\/figcaption><\/figure><\/div>\n\n\n\n<p>Vu que les minutes et secondes (les parties ayant les plus\ngrandes valeurs) vont de 0 \u00e0 59, deux digits en octal pour chaque suffisent.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Principe<\/h2>\n\n\n\n<p>Le principe derri\u00e8re chaque digit reste le m\u00eame&nbsp;: selon\nla valeur de ce digit, les c\u00f4t\u00e9s de l\u2019anneau et l\u2019hexagone central sont \u00ab&nbsp;allum\u00e9s&nbsp;\u00bb\n(ou non), selon l\u2019image ci-dessus.<\/p>\n\n\n\n<p>Les digits seront redessin\u00e9s toutes les secondes, en faisant appel aux fonctions de dessin dans un <code><a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/API\/WindowTimers\/setInterval\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"setInterval() (opens in a new tab)\">setInterval()<\/a><\/code>.<\/p>\n\n\n\n<!--nextpage-->\n\n\n\n<h2 class=\"wp-block-heading\">Les fonctions de dessin<\/h2>\n\n\n\n<p>Pour les fonctions de dessin des hexagones, je me suis bas\u00e9 sur des fonctions pr\u00e9sentes dans ce <a rel=\"noreferrer noopener\" aria-label=\"CodePen (opens in a new tab)\" href=\"https:\/\/codepen.io\/anon\/pen\/MJMOLx\" target=\"_blank\">CodePen<\/a>, trouv\u00e9 via ce thread <a href=\"https:\/\/stackoverflow.com\/questions\/42339467\/i-need-to-draw-a-multicolored-hexagon-on-canvas\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Stack Overflow (opens in a new tab)\">Stack Overflow<\/a>.<\/p>\n\n\n\n<p>La fonction de dessin de l\u2019anneau se pr\u00e9sente comme suit&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: false; title: ; notranslate\" title=\"\">\n\/**\n * @param {integer} cx - Coordonn\u00e9e X du centre de l&#039;anneau\n * @param {integer} cy - Coordonn\u00e9e Y du centre de l&#039;anneau\n * @param {integer} r1 - Rayon interne de l&#039;anneau\n * @param {integer} r2 - Rayon externe de l&#039;anneau\n * @param {integer} value - Valeur du digit\n *\/\nfunction outerHex(cx,cy,r1,r2,value) {\n  var PI2 = Math.PI*2;\n  var rotationAdjustment = -90 * Math.PI\/180;\n  var sidecount = 6;\n\n  for (var i = 0; i &lt; sidecount; i++) {\n    var startAngle = PI2\/sidecount*i+rotationAdjustment;\n    var endAngle = PI2\/sidecount*(i+1)+rotationAdjustment;\n\n    var cos0 = Math.cos(startAngle);\n    var sin0 = Math.sin(startAngle);\n    var cos1 = Math.cos(endAngle);\n    var sin1 = Math.sin(endAngle);\n\n    ctx.beginPath();\n    ctx.moveTo(cx+r1*cos0, cy+r1*sin0);\n    ctx.lineTo(cx+r2*cos0, cy+r2*sin0);\n    ctx.lineTo(cx+r2*cos1, cy+r2*sin1);\n    ctx.lineTo(cx+r1*cos1, cy+r1*sin1);\n    ctx.closePath();\n\n    \/*\n      Si la valeur du digit est sup\u00e9rieure ou \u00e9gale au &quot;rang&quot; du segment de l&#039;anneau,\n      on l&#039;affiche en noir\n    *\/\n    if(value &gt;= (i + 1)) {\n      ctx.fillStyle = &#039;#000&#039;;\n    } else {\n    \tctx.fillStyle = &#039;#d4d4d4&#039;;\n    }\n\n    ctx.fill();\n  }\n}\n<\/pre><\/div>\n\n\n<p>La fonction de dessin de l\u2019hexagone central est la suivante&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: false; title: ; notranslate\" title=\"\">\n\/**\n * @param {integer} cx - Coordonn\u00e9e X du centre de l&#039;hexagone\n * @param {integer} cy - Coordonn\u00e9e Y du centre de l&#039;hexagone\n * @param {integer} radius - Rayon de l&#039;hexagone\n * @param {integer} value - Valeur du digit\n *\/\nfunction innerHex(cx, cy, radius, value) {\n  var startAngle = -90;\n  var edges = 6;\n  var angle = 360\/edges;\n\n  ctx.beginPath();\n\n  for (var i = 0; i &lt;= edges; i++) {\n    var a = ((angle*i)+startAngle)*(Math.PI\/180);\n    var x = cx + radius * Math.cos(a);\n    var y = cy + radius * Math.sin(a);\n    ctx.lineTo(x, y);\n  }\n\n  \/*\n      Si la valeur du digit est sup\u00e9rieure ou \u00e9gale \u00e0 7,\n      on affiche l&#039;hexagone en noir\n    *\/\n    if(value == 7) {\n    ctx.fillStyle = &#039;#000&#039;\n  } else {\n    ctx.fillStyle = &#039;#d4d4d4&#039;;\n  }\n\n  ctx.fill();\n}\n<\/pre><\/div>\n\n\n<p>Chaque partie de l\u2019heure \u00e9tant constitu\u00e9e de deux digits, je\ncr\u00e9\u00e9 une fonction qui fait appel deux fois \u00e0 chacune des deux fonctions\npr\u00e9sent\u00e9es ci-dessus. De plus, la conversion en octal se fait dans cette fonction.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: false; title: ; notranslate\" title=\"\">\n\/**\n * @param {integer} decX - Coordonn\u00e9e X du centre des dizaines\n * @param {integer} decY - Coordonn\u00e9e Y du centre des dizaines\n * @param {integer} unitX - Coordonn\u00e9e X du centre des unit\u00e9s\n * @param {integer} unitY - Coordonn\u00e9e Y du centre des unit\u00e9s\n * @param {integer} outerRadius - Rayon externe de l&#039;anneau\n * @param {integer} innerRadius - Rayon interne de l&#039;anneau\n * @param {integer} singleRadius - Rayon de l&#039;hexagone central\n * @param {integer} partValue - Valeur de la partie d&#039;heure\n *\/\nfunction drawPart(decX, decY, unitX, unitY, outerRadius, innerRadius, singleRadius, partValue) {\n\t\/\/ Conversion en octal\n\tvar octValue = partValue.toString(8);\n\n\tvar octUnit = octValue % 10; \/\/ on r\u00e9cup\u00e8re l&#039;unit\u00e9\n\tvar octDec =  Math.floor(octValue \/ 10); \/\/ on r\u00e9cup\u00e8re la dizaine\n\n\t\/\/ On dessine le digit des dizaines\n\tinnerHex(decX, decY, singleRadius, octDec);\n\touterHex(decX, decY, innerRadius, outerRadius, octDec);\n\n\t\/\/ On dessine le digit des unit\u00e9s\n\tinnerHex(unitX, unitY, singleRadius, octUnit);\n\touterHex(unitX, unitY, innerRadius, outerRadius, octUnit);\n}\n<\/pre><\/div>\n\n\n<!--nextpage-->\n\n\n\n<h2 class=\"wp-block-heading\">Code final<\/h2>\n\n\n\n<p>Le code final est :<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: false; title: ; notranslate\" title=\"\">\n\/\/ On r\u00e9cup\u00e8re le canvas et son contexte 2D\nvar canvas = document.querySelector(&quot;canvas&quot;);\nvar ctx = canvas.getContext(&quot;2d&quot;);\n\n\/\/ On r\u00e8gle le style du texte\nctx.fillStyle = &#039;#000&#039;;\nctx.font = &#039;18px sans-serif&#039;;\n\n\/\/ On rajoute les textes\nctx.fillText(&#039;Hours&#039;, 38, 90);\nctx.fillText(&#039;Minutes&#039;, 173, 90);\nctx.fillText(&#039;Seconds&#039;, 308, 90);\n\n\/\/ Fonction execut\u00e9e toutes les secondes\nsetInterval(function(){\n\tctx.clearRect(0, 0, 410, 75); \/\/ efface seulement nos digits\n\n\tvar now = new Date(); \/\/ on r\u00e9cup\u00e8re la date\n\n\tdrawPart(35, 35, 95, 35, 30, 20, 15, now.getHours()); \/\/ on dessine les heures\n\n\tdrawPart(175, 35, 235, 35, 30, 20, 15, now.getMinutes()); \/\/ on dessine les minutes\n\n\tdrawPart(315, 35, 375, 35, 30, 20, 15, now.getSeconds()); \/\/ on dessine les secondes\n}, 1000);\n\nfunction drawPart(decX, decY, unitX, unitY, outerRadius, innerRadius, singleRadius, partValue) {\n\tvar octValue = partValue.toString(8);\n\n\tvar octUnit = octValue % 10;\n\tvar octDec =  Math.floor(octValue \/ 10);\n\n\tinnerHex(decX, decY, singleRadius, octDec);\n\touterHex(decX, decY, innerRadius, outerRadius, octDec);\n\n\tinnerHex(unitX, unitY, singleRadius, octUnit);\n\touterHex(unitX, unitY, innerRadius, outerRadius, octUnit);\n}\n\nfunction outerHex(cx,cy,r1,r2,value) {\n  var PI2 = Math.PI*2;\n  var rotationAdjustment = -90 * Math.PI\/180;\n  var sidecount = 6;\n  \n  for (var i = 0; i &lt; sidecount; i++) {\n    var startAngle = PI2\/sidecount*i+rotationAdjustment;\n    var endAngle = PI2\/sidecount*(i+1)+rotationAdjustment;\n    \n    var cos0 = Math.cos(startAngle);\n    var sin0 = Math.sin(startAngle);\n    var cos1 = Math.cos(endAngle);\n    var sin1 = Math.sin(endAngle);\n    \n    ctx.beginPath();\n    ctx.moveTo(cx+r1*cos0, cy+r1*sin0);\n    ctx.lineTo(cx+r2*cos0, cy+r2*sin0);\n    ctx.lineTo(cx+r2*cos1, cy+r2*sin1);\n    ctx.lineTo(cx+r1*cos1, cy+r1*sin1);\n    ctx.closePath();\n    \n    if(value &gt;= (i + 1)) {\n    \tctx.fillStyle = &#039;#000&#039;;\n    } else {\n    \tctx.fillStyle = &#039;#d4d4d4&#039;;\n\t}\n    \n    ctx.fill();\n  }\n}\n\nfunction innerHex(cx, cy, radius, value) {\n  var startAngle = -90;\n  var edges = 6;\n  var angle = 360\/edges;\n  \n  ctx.beginPath();\n  \n  for (var i = 0; i &lt;= edges; i++) {\n    var a = ((angle*i)+startAngle)*(Math.PI\/180);\n    var x = cx + radius * Math.cos(a);\n    var y = cy + radius * Math.sin(a);\n    ctx.lineTo(x, y);\n  }\n  \n  if(value == 7) {\n    ctx.fillStyle = &#039;#000&#039;\n  } else {\n    ctx.fillStyle = &#039;#d4d4d4&#039;;\n  }\n\n  ctx.fill();\n}\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Une d\u00e9mo fonctionnelle est disponible <a href=\"https:\/\/geekcommunicant.com\/demos\/horloge-hexagonale.html\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"ici (opens in a new tab)\">ici<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00c0 la suite de mes premi\u00e8res exp\u00e9rimentations avec les canvas (voir mes trois premiers articles \u00e9tiquet\u00e9s #canvas) et de la consultation r\u00e9cente de pages traitant de la cr\u00e9ation d\u2019horloges utilisant cette technologie, j\u2019ai d\u00e9cid\u00e9 d\u2019en cr\u00e9er une \u00e0 ma fa\u00e7on. &hellip; <a href=\"https:\/\/geekcommunicant.com\/blog\/2019\/06\/03\/horloge-hexagonale\/\">Continuer la lecture <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[19],"tags":[20,15,31],"class_list":["post-798","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-canvas","tag-horloge","tag-javascript"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-cS","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":211,"url":"https:\/\/geekcommunicant.com\/blog\/2013\/08\/11\/amusons-nous-avec-les-canvas\/","url_meta":{"origin":798,"position":0},"title":"[JavaScript\/HTML5] Amusons-nous avec les canvas","author":"geekc","date":"11\/08\/2013","format":false,"excerpt":"Aujourd'hui nous allons voir comment ajouter du texte aux nouveaux \u00e9l\u00e9ments <canvas> du HTML5. Comme les plus attentifs d'entre-vous l'auront d\u00e9j\u00e0 remarqu\u00e9, le titre de l'article r\u00e9v\u00e8le d\u00e9j\u00e0 une partie du contenu de l'article ; effectivement, pour utiliser les canvas, il faut obligatoirement passer par JavaScript. Le HTML La d\u00e9claration\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1000,"url":"https:\/\/geekcommunicant.com\/blog\/2022\/12\/16\/amusons-nous-avec-canvas-retour\/","url_meta":{"origin":798,"position":1},"title":"Amusons-nous avec les canvas &#8211; le retour","author":"geekc","date":"16\/12\/2022","format":false,"excerpt":"Il y a quelques ann\u00e9es, j\u2019avais \u00e9crit une s\u00e9rie d\u2019articles expliquant comment cr\u00e9er \u00e0 l\u2019aide du\u00a0 tag <canvas> un texte ombr\u00e9 avec une image en fond utilisant une police Google Fonts. La technique ayant un peu \u00e9volu\u00e9 depuis, et ayant fait de nouveaux essais de mon c\u00f4t\u00e9, je pense qu\u2019il\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/geekcommunicant.com\/blog\/wp-content\/uploads\/image.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1143,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/03\/24\/gloubi-script-horloge-illustree\/","url_meta":{"origin":798,"position":2},"title":"Gloubi script &#8211; une horloge illustr\u00e9e","author":"geekc","date":"24\/03\/2023","format":false,"excerpt":"Aujourd\u2019hui, j\u2019ai d\u00e9cid\u00e9 de m\u2019attaquer \u00e0 la version gloubi d\u2019un script que j\u2019ai \u00e9galement d\u00e9j\u00e0 cr\u00e9\u00e9 de mon c\u00f4t\u00e9\u00a0: l\u2019horloge illustr\u00e9e. La version gloubi est visible ici, tandis que la cr\u00e9ation de ma propre version, faite avec jQuery, est pr\u00e9sent\u00e9e ici. Pr\u00e9sentation de la version gloubi Pour commencer, on cr\u00e9\u00e9\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":253,"url":"https:\/\/geekcommunicant.com\/blog\/2014\/01\/23\/javascripthtml5-tout-est-dans-le-placement\/","url_meta":{"origin":798,"position":3},"title":"[JavaScript\/HTML5] Tout est dans le placement","author":"geekc","date":"23\/01\/2014","format":false,"excerpt":"\u00c0 la fin de l'article pr\u00e9c\u00e9dent j'avais utilis\u00e9 une image comme motif. Comme on ne pouvait pas le deviner l'image utilis\u00e9e \u00e9tait la suivante. Les canvas ne permettent pas de placement pr\u00e9cis des motifs. Mais il existe un moyen: le compositage. Cette m\u00e9thode fonctionne un peu comme les calques et\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/geekcommunicant.com\/blog\/wp-content\/uploads\/summer-girls-13.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1096,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/02\/03\/fenetre-modale-javascript-natif\/","url_meta":{"origin":798,"position":4},"title":"Une fen\u00eatre modale en JavaScript natif","author":"geekc","date":"03\/02\/2023","format":false,"excerpt":"Aujourd\u2019hui, nouveau retour sur un de mes anciens tutoriels qui a rencontr\u00e9 un certain succ\u00e8s, mon tutoriel sur comment faire une fen\u00eatre modale avec jQuery. Depuis maintenant \u00e0 peu pr\u00e8s un an, tous les navigateurs majeurs supportent la balise <dialog> qui permet de cr\u00e9er des fen\u00eatres modales (\u00e7a \u00e7a tombe\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":230,"url":"https:\/\/geekcommunicant.com\/blog\/2013\/08\/22\/et-maintenant-ajoutons-quelques-couleurs\/","url_meta":{"origin":798,"position":5},"title":"[JavaScript\/HTML5] Et maintenant ajoutons quelques couleurs","author":"geekc","date":"22\/08\/2013","format":false,"excerpt":"Dans mon pr\u00e9c\u00e9dent article Amusons-nous avec les canvas, nous \u00e9tions arriv\u00e9s au r\u00e9sultat ci-dessous: Nous avons donc ici un effet que l'on aurait pu obtenir en CSS. Mais gr\u00e2ce aux <canvas> nous pouvons \u00e0 pr\u00e9sent remplir notre texte avec autre chose qu'une unique couleur ; avec les <canvas> on peut\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/798","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/comments?post=798"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/798\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}