<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Board Generator</title>
</head>
<style>
.viewport {
position: relative;
}
.viewport canvas {
position: absolute;
}
canvas{
background-color: transparent;
border: 1px solid #000000;
}
.input_field {
width: 100%;
padding: 5px;
display: flex
}
.input_field a{
width: 50%;
}
</style>
<body>
<div class="ui padded container" style="width: 90%">
<div class="ui segment" style="margin: 10px">
<h1 id="question" style="text-transform:uppercase; text-align: center;">
<font color="purple">Generate random boards for GOLMI</font>
</h1>
</div>
<div class="ui segment" style="margin: 10px; display: flex">
<div class="ui segment" style="margin: 10px; width: 40%;">
<div class="viewport" style="height: 400px; width: 400px; margin: auto;">
<canvas id="background" width="400px" height="400px"></canvas>
<canvas id="objects" width="400px" height="400px"></canvas>
<canvas id="gripper" width="400px" height="400px"></canvas>
</div>
</div>
<div class="ui segment" style="margin: 10px; width: 40%;">
<div class="viewport" style="height: 400px; width: 400px; margin: auto;">
<canvas id="background_source" width="400px" height="400px"></canvas>
<canvas id="objects_source" width="400px" height="400px"></canvas>
<canvas id="gripper_source" width="400px" height="400px"></canvas>
</div>
</div>
<div class="ui segment" style="margin: 10px; width: 20%;">
<input id="delete" type="submit" class="ui basic fluid red button" value="Delete Object" style="padding: 10px; width: 100%">
<br>
<input id="clear" type="submit" class="ui basic fluid blue button" value="Clear Board" style="padding: 10px; width: 100%">
<br>
<input id="save" type="submit" class="ui basic fluid purple button" value="Save Board" style="padding: 10px; width: 100%">
</div>
</div>
</div>
</div>
<!-- You MUST include jQuery before Fomantic -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.8/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.8/dist/semantic.min.js"></script>
<script type="text/javascript" src="//cdn.socket.io/4.4.1/socket.io.min.js"></script>
<script src="{{ url_for('static', filename='js/view/View.js') }}"></script>
<script src="{{ url_for('static', filename='js/view/COCOLayerView.js') }}"></script>
<script src="{{ url_for('static', filename='js/view/LView.js') }}"></script>
<script>
let golmi_socket = null;
let golmi_source = null;
let sourcelayerView = null;
let layerView = null;
function start_golmi(url, password) {
// expect same as backend e.g. the default "http://127.0.0.1:5000";
// --- create a golmi_socket --- //
// don't connect yet
golmi_socket = io(url, {
auth: { "password": password }
});
// --- view --- //
// Get references to the three canvas layers
let bgLayer = document.getElementById("background");
let objLayer = document.getElementById("objects");
let grLayer = document.getElementById("gripper");
grLayer.onclick = (event) => {
socket.emit("click", {
event: "place_object",
room_id: "{{ room_id }}",
coordinates: {"x": event.offsetX, "y": event.offsetY, "block_size": layerView.blockSize}
});
}
// Set up the view js, this also sets up key listeners
layerView = new document.CocoLayerView(golmi_socket, bgLayer, objLayer, grLayer);
}
function start_golmi_source(url, password) {
// expect same as backend e.g. the default "http://127.0.0.1:5000";
// --- create a golmi_socket --- //
// don't connect yet
golmi_source = io(url, {
auth: { "password": password }
});
// --- view --- //
// Get references to the three canvas layers
let bgLayer = document.getElementById("background_source");
let objLayer = document.getElementById("objects_source");
let grLayer = document.getElementById("gripper_source");
grLayer.onclick = (event) => {
color = $("#color").val()
shape = $("#shape").val()
placing = $("#placing").is(':checked')
socket.emit("click", {
event: "select_object",
room_id: "{{ room_id }}",
coordinates: {"x": event.offsetX, "y": event.offsetY, "block_size": sourcelayerView.blockSize}
});
}
// Set up the view js, this also sets up key listeners
sourcelayerView = new document.CocoLayerView(golmi_source, bgLayer, objLayer, grLayer);
}
$(document).ready(function () {
socket = io.connect();
socket.on("connect", () => {
console.log(socket.id)
})
start_golmi( "{{ golmi_host }}", "{{ golmi_pswd }}")
start_golmi_source( "{{ golmi_host }}", "{{ golmi_pswd }}")
golmi_socket.connect();
golmi_source.connect();
golmi_socket.emit("join", { "room_id": "{{ room_id }}" });
golmi_source.emit("join", { "room_id": "{{ room_id }}" + "_s" });
$("#clear").click( function(e){
socket.emit("clear");
})
$("#save").click( function(e){
$("body").append(`<iframe src="/download_state/{{ room_id }}" style='display: none;' ></iframe>`);
})
$("#delete").click( function(e){
socket.emit("delete");
})
})
</script>
</body>
</html>