<html>
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head>
<body>
Send text and commands to the immersive space :
<form>
<textarea rows="5" cols="33">
</textarea>
<br>
<input type=button onclick=replaceWithThisText(this) value=Clear></input>
<input type=button onclick=sendtovr(this) value=Send></input>
</form>
<br>
Examples, tap to add, optionally modify and send :
<ul>
<li><a onclick=replaceWithThisText(this)>jxr qs a-sphere sa color green</a></li>
<li><a onclick=replaceWithThisText(this)>jxr toggleVisibilityEntitiesFromClass('fot')</a></li>
</ul>

Share this URL to the browser using e.g <a id="shareablelink" href="https://hmd.link">hmd.link</a> on the same WiFi network.
<hr>
<iframe width="100%" id="pastcommands"></iframe>
<hr>
Remote preview, if available :<br/>
<img height="400px" id="remotepreview" />
<hr>
<br>
Documentation as :

<ul>
<li><a href=https://fabien.benetou.fr/PIMVRdata/FoT>what has already been added by others</a> in a PIM as a wiki (also editable),</li>
<li><a href=https://fabien.benetou.fr/PIMVRdata/CabinCommands?action=source>example of instructions and commands already positioned</a>,</li>
<li><a href=https://fabien.benetou.fr/pub/home/future_of_text_demo/engine/>live result</a> (ideally in VR) and</li> 
<li>open-source <a href=https://git.benetou.fr/utopiah/text-code-xr-engine/issues>code repository</a> of the code and to make your own suggestions via issues. </li>
<li><a href=qrcode.png>QRcode</a> of this page to share with others also on mobile.</li>
<li><a href=https://fabien.benetou.fr/pub/home/future_of_text_demo/engine/?background=../content/future_of_text_symposium/HORN-2001-FutureOfHumanCognomeCL.png&fontcolor=lightgray>background</a> as URL parameter. Feel free to use your own content.</li>
<li>to create a room to work together in, add or change the ?roomname=<b>YourRoomName</b> in the browser URL
</ul>

<script>
function replaceWithThisText(element){
document.querySelector("textarea").value = element.innerText
}
	
let pagename
const queryString = window.location.search
const urlParams = new URLSearchParams(queryString)
let = forcedPagename = urlParams.get('roomname')
forcedPagename?pagename=forcedPagename:pagename='FoT'

const baseURL = 'https://fabien.benetou.fr/PIMVRdata/'+pagename
const url = baseURL+'?action='

document.getElementById("pastcommands").src = baseURL+'?action=source'
document.getElementById("shareablelink").href = "https://hmd.link/?https://fabien.benetou.fr/pub/home/future_of_text_demo/engine/?roomname="+pagename

function refreshPreview(){
	document.getElementById("remotepreview").src = "https://fabien.benetou.fr/uploads/PIMVRdata/"+pagename+".jpg#"+Date.now()
}

// seems to get cached properly, i.e only transferring when update
setInterval( _ => refreshPreview(), 1000)

function sendtovr(cabin){
text = document.querySelector("textarea").value
document.querySelector("textarea").value = ''

if (text) fetch(url+'source')
          .then( response => { return response.text() } )
          .then( data => {

	  fetch(url+'edit', {
		  method: 'POST',
		  headers: {'Content-Type':'application/x-www-form-urlencoded'},
		  body: "post=1&author=PIMVR&authpw=edit_password&text="+ data+'%0a'+text }).then(res => res).then(res => console.log("saved remotely", res))
	})
else alert("empty text, please write something and try again")
}

</script>
</body>
</html>