andybak/spectator.html

## 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/bootstrap@5.0.1/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>
	<!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/bootstrap@5.0.1/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>
	<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>