mobile submission interface and example of live source

2 years ago · b1afc6f2f4
parent 7632ad51e6
commit b1afc6f2f4
2 changed files with 65 additions and 2 deletions
--- a/index.html
+++ b/index.html
@ -41,7 +41,7 @@
  </head>
  <body>

-<div style='position:fixed;z-index:9; top: 0%; left: 0%; border-bottom: 70px solid transparent; border-left: 70px solid #eee; '>
+<div style='position:fixed;z-index:-1; top: 0%; left: 0%; border-bottom: 70px solid transparent; border-left: 70px solid #eee; '>
 	<a href="https://git.benetou.fr/utopiah/text-code-xr-engine/issues/">
 		<img style='position:fixed;left:10px;' title='code repository' src='https://git.benetou.fr/assets/img/logo.svg/'>
 	</a>
@ -788,6 +788,9 @@ AFRAME.registerComponent('pinchprimary', { // currently only 1 hand, the right o
 	var el = this.el
 	this.el.addEventListener('pinchended', function (event) { 
 		// if positioned close enough to a target zone, trigger action
+			// see own trigger-box component. Could use dedicated threejs helpers instead.
+				// https://github.com/Utopiah/aframe-triggerbox-component/blob/master/aframe-triggerbox-component.js#L66
+			// could make trigger zones visible as debug mode
 		// unselect current target if any
 		selectedElement = null;
 		save()
@ -1250,6 +1253,22 @@ AFRAME.registerComponent('glossary', {
 	},
 });

+var added = []
+AFRAME.registerComponent('fot', {
+	init:function(){
+		let generatorName = this.attrName
+		setInterval( _ => fetch("https://fabien.benetou.fr/PIMVRdata/FoT?action=source#" + Date.now()).then(res => res.text() ).then(res => {
+			res.split("\n").slice(0,maxItemsFromSources).map( (n,i) => {
+				found = added.find((str) => str === n)
+				if (typeof found === 'undefined'){
+					added.push(n)
+					addNewNote( n, "-1 "+(1+i/10)+" -2", ".1 .1 .1", null, generatorName ) 
+}
+			})
+		}), 100 )
+	},
+});
+
 AFRAME.registerComponent('issues', {
 	init:function(){
 		let generatorName = this.attrName
@ -1392,7 +1411,7 @@ function remotesave(){
 }

 var generators = "line-link-entities link screenstack dynamic-view selectionboxonpinches keyboard "
-	+ "commands-from-external-json glossary timeline issues web-url background-via-url observableui hidableenvironment"
+	+ "commands-from-external-json glossary timeline issues web-url background-via-url observableui hidableenvironmentfot"
 // could be an array proper completed on each component registration

 // could change model opacity based on hand position, fading out when within a (very small here) safe space
@ -1403,6 +1422,7 @@ var generators = "line-link-entities link screenstack dynamic-view selectionboxo
 </div>
 <a-scene cursor="rayOrigin: mouse" raycaster="objects: [html]; interval:100;"
 	screenstack dynamic-view selectionboxonpinches keyboard commands-from-external-json glossary timeline issues
+fot
 	capturegesture toolbox networked-scene="serverURL: https://naf.benetou.fr/; adapter: easyrtc; audio: true;">
      <a-assets>
 	      <template id="avatar-template"> <a-cylinder scale=".2 1.2 .2" networked-audio-source></a-cylinder> </template>
--- a/submit.html
+++ b/submit.html
@ -0,0 +1,43 @@
+<html>
+Send text and commands to the immersive space :
+<form>
+<textarea rows="5" cols="33">
+</textarea>
+<br>
+<input type=button onclick=sendtovr(this) value=Send></input>
+</form>
+<br>
+<a onclick=replaceWithThisText(this)>jxr toggleVisibilityEntitiesFromClass('fot')</a>
+
+<hr>
+<br>
+Documentation as :
+
+<ul>
+<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> where you can see the code and make your own suggestions via issues. </li>
+</ul>
+<script>
+function replaceWithThisText(element){
+document.querySelector("textarea").value = element.innerText
+}
+	
+const url = 'https://fabien.benetou.fr/PIMVRdata/FoT?action='
+function sendtovr(cabin){
+text = document.querySelector("textarea").value
+document.querySelector("textarea").value = ''
+
+ 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))
+	})
+}
+
+</script>
+</html>