194 lines
6.7 KiB
JavaScript
194 lines
6.7 KiB
JavaScript
var actPrio = 0;
|
|
var numBallsPlaced = new Array();
|
|
for (var i = 0; i < 55; i++) {numBallsPlaced[i] = 0;}
|
|
|
|
$( function() {
|
|
// Let the plate items be draggable
|
|
$( "li", "#ballBox" ).draggable({
|
|
revert: "invalid",
|
|
containment: "document",
|
|
helper: "clone",
|
|
cursor: "move"
|
|
});
|
|
|
|
refreshPlate();
|
|
refreshShelf();
|
|
});
|
|
|
|
// Send request for scanning of new balls and writing the data to the database
|
|
function updateBallPos() {
|
|
if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();
|
|
} else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
|
|
xmlhttp.open("GET","updateBallDatabase.php?q=5",true);
|
|
xmlhttp.send();
|
|
|
|
document.getElementById('unclickableCircle').style.visibility = "visible";
|
|
document.getElementById('stareBalls').style.visibility = "visible";
|
|
|
|
setTimeout(function(){
|
|
document.getElementById('stareBalls').style.visibility = "hidden";
|
|
document.getElementById('unclickableCircle').style.visibility = "hidden";
|
|
refreshPlate();
|
|
}, 60000);
|
|
}
|
|
|
|
// Loads all balls from the database and displays them on the plate
|
|
function refreshPlate() {
|
|
var myObj, x, txt = "", offsetX, offsetY, scale;
|
|
|
|
document.getElementById("ballBox").innerHTML = ""; // Clear plate first
|
|
|
|
if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();
|
|
} else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
|
|
xmlhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
myObj = JSON.parse(this.responseText);
|
|
offsetX = 300+51;
|
|
offsetY = 300+51;
|
|
scale = 2.62;
|
|
for (x in myObj) {
|
|
// Calculate ball-position on plate in website
|
|
myObj[x].pos_x = offsetX + myObj[x].pos_x * scale;
|
|
myObj[x].pos_y = offsetY + myObj[x].pos_y * scale;
|
|
$("<div id='" + myObj[x].pos_id + "' class='ball' style='top: " + myObj[x].pos_y + "px; left: " + myObj[x].pos_x +"px; background-color: " + myObj[x].ball_color + ";'></div>")
|
|
.appendTo('#ballBox').attr('ballID', myObj[x].pos_id).draggable({
|
|
revert: "invalid",
|
|
containment: "document",
|
|
});
|
|
document.getElementById(myObj[x].pos_id).style.cursor = "grab";
|
|
}
|
|
}
|
|
};
|
|
xmlhttp.open("GET","updateBallDatabase.php?q=0",true);
|
|
xmlhttp.send();
|
|
}
|
|
|
|
// Loads all balls from the database and displays them in the shelf
|
|
function refreshShelf() {
|
|
var myObj, x;
|
|
var id = 0;
|
|
|
|
document.getElementById("shelfBox").innerHTML = ""; // Clear shelf first
|
|
for (var i = 0; i < 35; i++) {numBallsPlaced[i] = 0;} // Init array on refresh
|
|
for (var i = 10; i < 35; i++) {
|
|
if(i%5 == 0 && i%10 != 0) { // Display 5 traces per shelf
|
|
i = i + 5;
|
|
$('<br>').appendTo('#shelfBox');
|
|
}
|
|
id = i + 1;
|
|
$('<div class="shelf" id="shelf' + id + '" ></div>').data('number', i).attr('section', id).appendTo('#shelfBox').droppable({
|
|
accept: "#ballBox > div",
|
|
classes: { "ui-droppable-active": "ui-state-highlight" },
|
|
drop: handleBallDrop
|
|
});
|
|
}
|
|
|
|
if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();
|
|
} else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
|
|
xmlhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
myObj = JSON.parse(this.responseText);
|
|
for (x in myObj) {
|
|
$("<div id='" + myObj[x].pos_id + "' class='ball' style='position: relative; left: 13px; background-color: " + myObj[x].ball_color + ";'></div>")
|
|
.appendTo('#shelf'+ myObj[x].ball_targetPos + '').attr('ballID', myObj[x].pos_id);
|
|
numBallsPlaced[myObj[x].ball_targetPos]++;
|
|
if(numBallsPlaced[myObj[x].ball_targetPos] >= 5) {
|
|
$("#shelf" + myObj[x].ball_targetPos).droppable({accept: "",}); //Prevent balls from being dropped if shelf is already full
|
|
}
|
|
}
|
|
}
|
|
};
|
|
xmlhttp.open("GET","updateBallDatabase.php?q=3",true);
|
|
xmlhttp.send();
|
|
}
|
|
|
|
// Puts all balls from the shelf back on the plate (in the database)
|
|
function emptyShelf(str) {
|
|
if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();
|
|
} else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
|
|
xmlhttp.open("GET","updateBallDatabase.php?q=2",true);
|
|
xmlhttp.send();
|
|
|
|
var i = 0;
|
|
xmlhttp.onreadystatechange = function() {
|
|
i++;
|
|
if (i == 3) {
|
|
refreshShelf();
|
|
refreshPlate();
|
|
}
|
|
};
|
|
}
|
|
|
|
// If a ball is dropped, it is replaced and that is wirtten to the database
|
|
function handleBallDrop(event, ui) {
|
|
$item = ui.draggable;
|
|
var ballID = $item.attr('ballID');
|
|
var dropID = $(this).attr('section');
|
|
var live = 0;
|
|
|
|
//if (dropID > 10 && dropID < 20) dropID + 20;
|
|
//if (dropID > 30 && dropID < 40) dropID - 20;
|
|
|
|
// Drop ball and change behaviour and style
|
|
$item.appendTo(this).fadeIn();
|
|
ui.draggable.draggable('disable');
|
|
document.getElementById(ballID).style.cursor = "context-menu";
|
|
document.getElementById(ballID).style.position = "relative";
|
|
document.getElementById(ballID).style.top = "0px";
|
|
document.getElementById(ballID).style.left = "13px";
|
|
|
|
numBallsPlaced[dropID] = numBallsPlaced[dropID] + 1;
|
|
|
|
if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();
|
|
} else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
|
|
|
|
if (document.getElementById("myonoffswitch").checked == true) live = 1;
|
|
|
|
xmlhttp.open("GET","updateBallDatabase.php?q=1&ballID=" + ballID + "&shelfID=" + dropID + "&prio=" + actPrio + "&live=" + live,true);
|
|
actPrio++;
|
|
if(numBallsPlaced[dropID] >= 5) {
|
|
$("#shelf" + dropID).droppable({accept: "",}); //Prevent balls from being dropped if shelf is already full
|
|
}
|
|
xmlhttp.send();
|
|
document.getElementById('unclickableCircle').style.visibility = "visible";
|
|
document.getElementById('playBalls').style.visibility = "visible";
|
|
setTimeout(function(){
|
|
document.getElementById('unclickableCircle').style.visibility = "hidden";
|
|
document.getElementById('playBalls').style.visibility = "hidden";
|
|
}, 15000);
|
|
}
|
|
|
|
function autoSort(){
|
|
emptyShelf();
|
|
|
|
setTimeout(function(){
|
|
if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();
|
|
} else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
|
|
xmlhttp.open("GET","updateBallDatabase.php?q=4",true);
|
|
xmlhttp.send();
|
|
|
|
document.getElementById('unclickableCircle').style.visibility = "visible";
|
|
document.getElementById('playBalls').style.visibility = "visible";
|
|
|
|
var i = 0;
|
|
xmlhttp.onreadystatechange = function() {
|
|
i++;
|
|
if (i == 3){
|
|
refreshPlate();
|
|
refreshShelf();
|
|
document.getElementById('unclickableCircle').style.visibility = "hidden";
|
|
document.getElementById('playBalls').style.visibility = "hidden";
|
|
//location.reload();
|
|
//console.log("A");
|
|
}
|
|
};
|
|
}, 1000);
|
|
}
|
|
|
|
function startSorting(){
|
|
if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();
|
|
} else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
|
|
xmlhttp.open("GET","updateBallDatabase.php?q=6",true);
|
|
xmlhttp.send();
|
|
alert("Your data has been sent successfully. The robot will start sorting soon.");
|
|
} |