Skip to content

Instantly share code, notes, and snippets.

@andybak

andybak/spectator.html

Last active November 11, 2021 20:06
Show Gist options
  • Save andybak/2bf4f8f77b581264da82c111addb1dd0 to your computer and use it in GitHub Desktop.
Save andybak/2bf4f8f77b581264da82c111addb1dd0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
spectator.html
<!doctype html>
<html lang="en">
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
div.container {line-height: 1.6; padding-bottom: 20px;}
textarea, input, select {margin: 4px;}
input:not([type=checkbox]) {width: 100px;}
</style>
</head>
<body>
<div class="container">
<form onsubmit="return false;">
<h4>Environment:</h4>
<Label>Environment type: <select id="environment.type" name="environment.type"></select></Label>
<button onclick='setEnv()'>Set</button>
<br><br>
<h4>Brush:</h4>
<Label>Brush type: <select id="brush.type" name="brush.type"></select></Label>
<label>Brush size: <input id="brush.size" value=".0001"></label>
<label>Brush color: <input id="brush.color" value="#FF5533" type="color"></label>
<button onclick='setBrush()'>Set</button>
<br><br>
<h4>Spectator Camera:</h4>
<label>Status: <button onclick="spectatorOn()">On</button><button onclick="spectatorOff()">Off</button></label><br>
<label>Mode:
<button onclick="sendCommand('spectator.mode=stationary');">Stationary</button>
<button onclick="sendCommand('spectator.mode=slowfollow');">Follow</button>
<button onclick="sendCommand('spectator.mode=circular');">Circular</button>
<button onclick="sendCommand('spectator.mode=wobble');">Wobble</button>
</label><br><br>
<h4>Show/Hide</h4>
Main Canvas: <button onclick="sendCommand('spectator.show=strokes');">On</button><button onclick="sendCommand('spectator.hide=strokes');">Off</button>
Selection Canvas: <button onclick="sendCommand('spectator.show=selection');">On</button><button onclick="sendCommand('spectator.hide=selection');">Off</button>
UI: <button onclick="sendCommand('spectator.show=ui');">On</button><button onclick="sendCommand('spectator.hide=ui');">Off</button>
Headset: <button onclick="sendCommand('spectator.show=headset');">On</button><button onclick="sendCommand('spectator.hide=headset');">Off</button>
Panels: <button onclick="sendCommand('spectator.show=panels');">On</button><button onclick="sendCommand('spectator.hide=panels');">Off</button>
Widgets: <button onclick="sendCommand('spectator.show=widgets');">On</button><button onclick="sendCommand('spectator.hide=widgets');">Off</button>
User Tools: <button onclick="sendCommand('spectator.show=usertools');">On</button><button onclick="sendCommand('spectator.hide=usertools');">Off</button>
</label><br><br>
<label>Position: <input id="campos.x" value="0">,<input id="campos.y" value="11">,<input id="campos.z" value="0"></label><br>
<label>Target: <input id="camtarget.x" value="0">,<input id="camtarget.y" value="11">,<input id="camtarget.z" value="-3"></label><br>
<button onclick='setCam();'>Set</button><br><br>
<label>Look:
<button type="button" id='lookLeft'>←</button>
<button type="button" id='lookUp'>↑</button>
<button type="button" id='lookDown'>↓</button>
<button type="button" id='lookRight'>→</button>
</label>&nbsp;
<label>Move:
<button type="button" id='moveForward'>↑↑</button>
<button type="button" id='moveLeft'>←</button>
<button type="button" id='moveUp'>↑</button>
<button type="button" id='moveDown'>↓</button>
<button type="button" id='moveRight'>→</button>
<button type="button" id='moveBack'>↓↓</button>
</label>
<br><br>
<h4>Actions:</h4>
<button onclick="sendCommand('save');">Save Current Scene</button>
<button onclick="sendCommand('export');">Export Current Scene</button>
<button onclick="sendCommand('showfolder.exports');">Show Exports Folder</button>
<br><br>
<button onclick="sendCommand('new');">Clear Current Scene</button>
<button onclick="sendCommand('brush.move.to=0,11,3'); sendCommand('draw.path=[-1,0,0],[1,0,0],[0,1,0],[-1,0,0]');">Test</button>
</form>
</div>
<script>
var brushes = {{brushesJson}};
var menu = document.getElementById("brush.type");
for (var brush of brushes) {
var option = document.createElement("option");
option.text = brush;
option.name = brush;
if (option.name === "Light") {option.selected = true}
menu.add(option);
}
var envs = {{environmentsJson}};
var menu = document.getElementById("environment.type");
for (var env of envs) {
var option = document.createElement("option");
option.text = env;
option.name = env;
if (option.name === "Standard") {option.selected = true}
menu.add(option);
}
function sendCommand(command) {
var xmlHttp = new XMLHttpRequest();
var url = '/api/v1?' + command;
xmlHttp.open('GET', url, false);
xmlHttp.send(null);
}
function setBrush() {
sendCommand('color.set.html=' + document.getElementById("brush.color").value.replace("#", ""));
sendCommand('brush.size.set=' + document.getElementById("brush.size").value);
sendCommand('brush.type=' + document.getElementById("brush.type").value);
}
function setEnv() {
sendCommand('environment.type=' + document.getElementById("environment.type").value);
}
function setCam() {
var position = `${document.getElementById("campos.x").value},${document.getElementById("campos.y").value},${document.getElementById("campos.z").value}`
var target = `${document.getElementById("camtarget.x").value},${document.getElementById("camtarget.y").value},${document.getElementById("camtarget.z").value}`
sendCommand('spectator.move.to=' + position);
sendCommand('spectator.look.at=' + target);
}
var spectatorOn = function(e) {
sendCommand("spectator.on");
setCam();
};
var spectatorOff = function(e) {
sendCommand("spectator.off");
};
var turnCamera = function(e) {
if (e.target.id==="lookUp") {
sendCommand("spectator.turn.x=15");
} else if (e.target.id==="lookDown") {
sendCommand("spectator.turn.x=-15");
} else if (e.target.id==="lookLeft") {
sendCommand("spectator.turn.y=-15");
} else if (e.target.id==="lookRight") {
sendCommand("spectator.turn.y=15");
}
}
var moveCamera = function(e) {
if (e.target.id==="moveUp") {
sendCommand("spectator.move.by=0,1,0");
} else if (e.target.id==="moveDown") {
sendCommand("spectator.move.by=0,-1,0");
} else if (e.target.id==="moveLeft") {
sendCommand("spectator.move.by=-1,0,0");
} else if (e.target.id==="moveRight") {
sendCommand("spectator.move.by=1,0,0");
} else if (e.target.id==="moveForward") {
sendCommand("spectator.move.by=0,0,1");
} else if (e.target.id==="moveBack") {
sendCommand("spectator.move.by=0,0,-1");
}
}
document.getElementById("lookUp").addEventListener('click', turnCamera);
document.getElementById("lookDown").addEventListener('click', turnCamera);
document.getElementById("lookLeft").addEventListener('click', turnCamera);
document.getElementById("lookRight").addEventListener('click', turnCamera);
document.getElementById("moveUp").addEventListener('click', moveCamera);
document.getElementById("moveDown").addEventListener('click', moveCamera);
document.getElementById("moveLeft").addEventListener('click', moveCamera);
document.getElementById("moveRight").addEventListener('click', moveCamera);
document.getElementById("moveForward").addEventListener('click', moveCamera);
document.getElementById("moveBack").addEventListener('click', moveCamera);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment