Compare commits

..

4 Commits

  1. 62
      README.md
  2. 1081
      index.html
  3. 28
      submit.html

@ -8,7 +8,69 @@ You can test it live at https://fabien.benetou.fr/pub/home/future_of_text_demo/e
See also the AR version https://video.benetou.fr/w/x7HeEBF9HGfdVyf7vWsKsQ
Note that the master branch is never the most up to date branch. Instead see https://git.benetou.fr/utopiah/text-code-xr-engine/branches for an overview. To explore branches in VR see https://fabien.benetou.fr/pub/home/future_of_text_demo/engine/branches.html
In order to have a better view of the different features accross branches see https://mastodon.pirateparty.be/web/@utopiah and https://twitter.com/utopiah/ which act as a kind of live documentation of the process.
![Manipulation prevew image](https://fabien.benetou.fr/pub/home/future_of_text_demo/content/primitives_manipulation.gif)
![Preview image](https://fabien.benetou.fr/pub/home/future_of_text_demo/content/engine-preview.png)
First communicated on https://twitter.com/utopiah/status/1531188862415929344 as way to work on (WebXR) code during a flight.
## Minimalist example
See for details the [minimalist-template branch](https://git.benetou.fr/utopiah/text-code-xr-engine/src/branch/minimalist-template/index.html) and [deployment issue](https://git.benetou.fr/utopiah/text-code-xr-engine/issues/72).
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>JXR minimalist template</title>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-troika-text/dist/aframe-troika-text.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/kylebakerio/a-console@1.0.2/a-console.js"></script>
<script src="https://fabien.benetou.fr/pub/home/future_of_text_demo/engine/jxr.js"></script>
<!-- use to define targets and left/right pinch interactions, respectively execute code and move targets -->
</head>
<body>
<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://fabien.benetou.fr/pub/home/future_of_text_demo/engine/gitea_logo.svg">
</a>
</div>
<button id="mainbutton" style="display:none; z-index: 1; position: absolute; width:50%; margin: auto; text-align:center; top:45%; left:30%; height:30%;" onclick="startExperience()">Start the experience (hand tracking recommended)</button>
<a-scene>
<a-entity id="rig">
<a-entity id="player"
hud camera look-controls wasd-controls waistattach="target: .movebypinch" position="0 1.6 0"></a-entity>
<a-entity id="rightHand" pinchprimary hand-tracking-controls="hand: right;"></a-entity>
<a-entity id="leftHand" pinchsecondary wristattachsecondary="target: #box" hand-tracking-controls="hand: left;"></a-entity>
</a-entity>
<a-troika-text value="SpaSca : Spatial Scaffolding" anchor="left" outline-width="5%" font="https://fabien.benetou.fr/pub/home/future_of_text_demo/content/ChakraPetch-Regular.ttf" position="-5.26197 6.54224 -1.81284"
scale="4 4 5" rotation="90 0 0" troika-text="outlineWidth: 0.01; strokeColor: #ffffff" material="flatShading: true; blending: additive; emissive: #c061cb"></a-troika-text>
<a-sky hide-on-enter-ar color="black"></a-sky>
<a-entity hide-on-enter-ar="" id="environmentsky" class="hidableenvironment" ></a-entity>
<a-troika-text anchor="left" target value="instructions : \n--right pinch to move\n--left pinch to execute" position="0 0.65 -0.2" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target id="locationreload" value="jxr location.reload()" position="0 1.20 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target id="makeAnchorsVisibleOnTargets" value="jxr makeAnchorsVisibleOnTargets()" position="0 1.05 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
<a-console position="0 1.1 -0.8" rotation="-45 0 0" font-size="34" height="0.5" skip-intro="true"></a-console>
</a-scene>
</body>
</html>
```

File diff suppressed because it is too large Load Diff

@ -18,12 +18,6 @@ Examples, tap to add, optionally modify and send :
<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 :
@ -35,33 +29,13 @@ Documentation as :
<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)
const url = 'https://fabien.benetou.fr/PIMVRdata/FoT?action='
function sendtovr(cabin){
text = document.querySelector("textarea").value
document.querySelector("textarea").value = ''

Loading…
Cancel
Save