2023-04-20 22:30:04 +02:00
< html >
< head >
2023-05-22 14:10:44 +02:00
< link rel = "stylesheet" href = "./assets/css/axist.min.css" / >
< link rel = "stylesheet" href = "./assets/css/style.css" / >
2023-04-20 22:30:04 +02:00
< / 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 = "asset loading / linking" >
< option x = "1" > prio< / option >
< option x = "pos=0,0,1&fov=2" > #< / option >
< option x = "foo" > class< / option >
< option x = "./2.gtlf" > src< / option >
< / optgroup >
< optgroup label = "href navigation / portals / teleporting" >
< option x = "1,2,0" > pos< / option >
< option x = "3.gltf#q=.kitchen" > href< / option >
< / optgroup >
< optgroup label = "query selector / object manipulation" >
< option x = ".summer -.winter cube" selected = "selected" default > q< / option >
< option x = "2" > scale< / option >
< option x = "1,2,3" > rot< / option >
< option x = "1,1,1" > translate< / option >
< option x = "1" > visible< / option >
< / optgroup >
< optgroup label = "animation" >
< option x = "1,200" > t< / option >
< option x = "0,-9.8,0" > gravity< / option >
< option x = "0.2,1" > physics< / option >
< option x = #scroll=1,0|2s" > scroll< / option >
< / optgroup >
< optgroup label = "device / viewport settings" >
< option x = "90" > fov< / option >
< option x = "1,100" > clip< / option >
< option x = "5m|FFAACC" > fog< / 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 >
2023-04-21 12:37:23 +02:00
< td colspan = "2" style = "border=bottom:none;" class = "small" >
2023-04-20 22:30:04 +02:00
< br > < br >
2023-05-05 13:26:17 +02:00
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 >
2023-04-20 22:30:04 +02:00
< / 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 >
