107 lines
3.8 KiB
HTML
107 lines
3.8 KiB
HTML
<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>
|