You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
195 lines
5.9 KiB
195 lines
5.9 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<script src="https://fabien.benetou.fr/pub/home/future_of_text_demo/engine/dependencies/webdav.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Feedback on XR for academic authoring demo</h1>
|
|
|
|
<div>Please feel the form freely. You can add comment per demo, all optionals, and at the end global feedback and your email. Every word is appreciated. Write as much or as little as you like. Press send at the bottom to save.</div>
|
|
|
|
<div id=content></div>
|
|
|
|
<script>
|
|
// insert screenshots (could probably do the same way, i.e. filereader then webdav upload
|
|
const webdavURL = "https://webdav.benetou.fr";
|
|
const subdirWebDAV = "/fotsave/fot_sloan_companion_public/"
|
|
var webdavClient = window.WebDAV.createClient(webdavURL)
|
|
const hmdURL = "https://hmd.link/?https://companion.benetou.fr"
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
let filename = urlParams.get('filename');
|
|
if (!filename) filename = 'demo_q1.json'
|
|
|
|
function save(){
|
|
let newContent = {}
|
|
let saveFilename = "demos_feedback_"+Date.now()+".json"
|
|
newContent.filename = filename
|
|
Array.from( document.querySelectorAll('.tosave')).map( e => {
|
|
if ( e.value )
|
|
newContent[e.id] = e.value
|
|
})
|
|
saveJSONToWebDAV( saveFilename, newContent )
|
|
console.log( saveFilename, newContent )
|
|
let url = "https://companion.benetou.fr/demos_feedback_viewer_example.html?filename="+saveFilename
|
|
// let url = webdavURL+subdirWebDAV+filename
|
|
setTimeout( _ => window.open(url, '_blank'), 1000 )
|
|
}
|
|
|
|
function saveJSONToWebDAV(filename, content){
|
|
async function w(path = "/file.txt"){ return await webdavClient.putFileContents(path, JSON.stringify(content)) }
|
|
written = w(subdirWebDAV+filename)
|
|
}
|
|
|
|
async function getContent(){
|
|
let rootEl = document.getElementById("content")
|
|
const contents = await webdavClient.getDirectoryContents(subdirWebDAV);
|
|
// consider instead search https://github.com/perry-mitchell/webdav-client#search
|
|
contents.filter(f => f.basename.endsWith( filename ))
|
|
.map(a => {
|
|
fetch(a.basename).then( r => r.json() ).then( r => {
|
|
r.content.filter( c => c.name ).map( c => {
|
|
let h2 = document.createElement("h2")
|
|
h2.innerText = c.name
|
|
rootEl.appendChild(h2)
|
|
if ( c.screenshot ){
|
|
let img = document.createElement("img")
|
|
img.src = c.screenshot
|
|
img.style.height = "200px"
|
|
rootEl.appendChild(img)
|
|
}
|
|
if ( c.description ){
|
|
let h3 = document.createElement("h3")
|
|
//h3.innerText = c.description //.replace()
|
|
h3.innerHTML = c.description.replace(/(.*) (http.*)/,'$1 <a href="$2">$2</a>').replaceAll('\n','<br>')
|
|
// could be innerHTML instead
|
|
// should make link clickable
|
|
rootEl.appendChild(h3)
|
|
let textarea = document.createElement("textarea")
|
|
textarea.cols = 40
|
|
if ( window.screen.width > 1000 ) {
|
|
textarea.style = "float:right;margin-top:-100px"
|
|
textarea.cols = 80
|
|
}
|
|
textarea.rows = 5
|
|
textarea.id = c.name.replaceAll(' ','_')
|
|
textarea.classList.add('tosave')
|
|
rootEl.appendChild(textarea)
|
|
}
|
|
if ( c.video ){
|
|
let ul = document.createElement("ul")
|
|
rootEl.appendChild(ul)
|
|
let li = document.createElement("li")
|
|
let link = document.createElement("a")
|
|
link.href = c.video
|
|
link.innerText = "video extract"
|
|
ul.appendChild(li)
|
|
link.target = "_blank"
|
|
li.appendChild(link)
|
|
}
|
|
if (c.usernames) {
|
|
let ul = document.createElement("ul")
|
|
rootEl.appendChild(ul)
|
|
|
|
c.usernames.map( h => {
|
|
let li = document.createElement("li")
|
|
let link = document.createElement("a")
|
|
link.href = "/index.html?username="+h
|
|
link.innerText = "link"
|
|
li.appendChild(link)
|
|
let spanEl = document.createElement("span")
|
|
spanEl.innerText = " "
|
|
li.appendChild(spanEl)
|
|
let linkHMD = document.createElement("a")
|
|
linkHMD.href = hmdURL + "/index.html?username="+h
|
|
linkHMD.target = "_blank"
|
|
linkHMD.innerText = "(open on other device)"
|
|
li.appendChild(linkHMD)
|
|
ul.appendChild(li)
|
|
})
|
|
}
|
|
if (c.code) {
|
|
let h3 = document.createElement("h4")
|
|
h3.innerHTML = "code:"
|
|
rootEl.appendChild(h3)
|
|
let ul = document.createElement("ul")
|
|
rootEl.appendChild(ul)
|
|
c.code.map( h => {
|
|
let li = document.createElement("li")
|
|
let link = document.createElement("a")
|
|
link.href = h
|
|
link.innerText = h.replace(/.*\//,'')
|
|
li.appendChild(link)
|
|
ul.appendChild(li)
|
|
})
|
|
}
|
|
|
|
let hr = document.createElement("hr")
|
|
rootEl.appendChild(hr)
|
|
})
|
|
})
|
|
})
|
|
setTimeout( _ => {
|
|
let h3 = document.createElement("h4")
|
|
h3.innerHTML = "global feedback, any idea or suggestion, what hardware was used, context for the demo, etc, anything goes :"
|
|
rootEl.appendChild(h3)
|
|
let textarea = document.createElement("textarea")
|
|
//textarea.style = "float:right;margin-top:-100px"
|
|
textarea.cols = 80
|
|
textarea.rows = 5
|
|
textarea.id = 'freeform_feedback'
|
|
textarea.classList.add('tosave')
|
|
rootEl.appendChild(textarea)
|
|
let br = document.createElement("br")
|
|
rootEl.appendChild(br)
|
|
let span = document.createElement("span")
|
|
span.innerText = 'email:'
|
|
rootEl.appendChild(span)
|
|
let input = document.createElement("input")
|
|
input.classList.add('tosave')
|
|
input.id = "email"
|
|
rootEl.appendChild(input)
|
|
rootEl.appendChild(br.cloneNode())
|
|
let button = document.createElement("button")
|
|
button.innerText = 'send feedback'
|
|
button.onclick = save
|
|
rootEl.appendChild(button)
|
|
}, 1000)
|
|
}
|
|
|
|
getContent()
|
|
</script>
|
|
|
|
<div id=comments>
|
|
|
|
<br>
|
|
<br>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<h3>
|
|
ideas :
|
|
</h3>
|
|
|
|
<ul>
|
|
<li>save on local storage (if so, provide a clear all fields button)
|
|
<li>accept audio feedback
|
|
<li>ntfy on feedback received
|
|
</ul>
|
|
|
|
<h3>
|
|
done :
|
|
</h3>
|
|
|
|
<ul>
|
|
<li>responsive-ish design
|
|
<li>save, including which JSON source file was used (now that experiment list and order can be modified)
|
|
<li>principle
|
|
</ul>
|
|
|
|
</body>
|
|
</html>
|
|
|