<html> <head> <link rel="stylesheet" href="./assets/css/axist.min.css" /> <link rel="stylesheet" href="./assets/css/style.css" /> </head> <body> <script src="./../dist/xrfragment.js"></script> <script> var DOMReady = function(a,b,c){b=document,c='addEventListener';b[c]?b[c]('DOMContentLoaded',a):window.attachEvent('onload',a)} DOMReady(function () { let XRF = xrfragment; let $ = (e) => document.querySelector(e) log = (str) => { $("#console").innerHTML = JSON.stringify(str, null, 2) $("#console").style.border = "10px solid #"+ ((1 << 24) * Math.random() | 0).toString(16).padStart(6, "0")+"66"; } let update = () => { let result = {} XRF.Parser.parse( $('#fragment').value, $('#value').value, result ); log(result) } $("#fragment").addEventListener("change", (e) => { let opt = e.target.options[ e.target.selectedIndex ] $('#value').value = opt.getAttribute("x") update() }) $('#value').addEventListener("change", update ) $('#value').addEventListener("keyup", update ) addEventListener("hashchange", (e) => log( XRF.URI.parse( document.location.href, true ) ) ); if( document.location.hash.length < 2 ) document.location.hash = "#t=1,100" }) </script> <section id="forms"> <form> <fieldset> <p> <table> <tr> <td width="200"> <label for="fragment">Property in 3D file</label> <br><br> <select id="fragment" class="w-100"> <optgroup label="default / predefined view"> <option x="pos=0,0,1&fov=2">#</option> <option x="">#mypredefinedview</option> </optgroup> <optgroup label="tagging / lazyloading content"> <option x="foo">tag</option> <option x="./2.gtlf">src</option> </optgroup> <optgroup label="href navigation / portals / teleporting"> <option x="1,2,0">pos</option> <option x="1,2,3">rot</option> <option x="3.gltf#q=.kitchen">href</option> </optgroup> <optgroup label="animation"> <option x="1,200">t</option> </optgroup> <optgroup label="device / viewport settings"> <option x="1,100">clip</option> <option x="45">fov</option> </optgroup> <optgroup label="author / metadata"> <option x="XXX">namespace</option> <option x="GPL-3.0-or-later">SPFX</option> <option x="1m">unit</option> <option x="this is an example scene">description</option> </optgroup> <optgroup label="multiparty"> <option x="matrix://matrix.org/#myroom&room.key=123">src_session</option> </optgroup> </select> </td> <td style="text-align:left"> <label for="value">Value</label> <br><br> <input id="value" class="w-100" type="text" value=".summer -.winter cube" placeholder="" > </td> </tr> <tr> <td colspan="2" style="border=bottom:none;" class="small"> <br><br> You can test 👩 NAVIGATOR-enabled fragments (<i>#t=1,200</i> or <i>#fog=2m|FFAABB</i>) by updating the url.<br> For more info see <a href="https://coderofsalvation.github.io/xrfragment/#List%20of%20fragments" target="_blank">the docs</a><br><br> </td> </tr> </table> </p> <p> <label for="console">parser output:</label> <br><br> <textarea id="console" style="width:100%;height:50vh;" placeholder="" class="w-100"></textarea> </p> </fieldset> </form> </section> </body> </html>