|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Record Mouse Coordinates</title>
|
|
|
<style>
|
|
|
.required { color: red; }
|
|
|
.hidden { display: none; }
|
|
|
#output_file { border: 1px solid #000; }
|
|
|
.button { width: 90px; margin: 5px; }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
<h2>Input record XY mouse coordinates on an uploaded image:</h2>
|
|
|
<form id="inputForm" method="post" enctype="multipart/form-data">
|
|
|
<table>
|
|
|
<tr>
|
|
|
<td>Upload image <span class="required">*</span>:<br />Max 500 KB.</td>
|
|
|
<td><input type="file" name="inputfile" id="inputfile" size="45" required /></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>Please enter the Access Code as displayed below <span class="required">*</span>:</td>
|
|
|
<td><img src="https://www.mobilefish.com/php/secureimage/createimage.php" alt="Access code" /></td>
|
|
|
<td><input type="text" name="accesscode" id="accesscode" size="7" maxlength="3" required /></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td colspan="2"><span class="required">* = required</span></td>
|
|
|
<td><input type="submit" value="Upload image" /></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>Mouse coordinate:</td>
|
|
|
<td>
|
|
|
X-coord: <input name="cssxXval" id="cssxXval" value="0" size="7" maxlength="4" readonly /> px
|
|
|
Y-coord: <input name="cssxYval" id="cssxYval" value="0" size="7" maxlength="4" readonly /> px
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td colspan="3">
|
|
|
<canvas id="output_file" width="500" height="500"></canvas>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td colspan="2">Image width = <span id="cssxNewImageWidth">0</span> px<br />
|
|
|
Image height = <span id="cssxNewImageHeight">0</span> px<br />
|
|
|
Number of coordinates = <span id="cssxTotalCoordinates">0</span>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>Recorded coordinates:</td>
|
|
|
<td colspan="2">
|
|
|
<select name="cssxCoordinates" id="cssxCoordinates" size="10" style="width: 320px;">
|
|
|
<option value="-1"></option>
|
|
|
</select>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>Change the recorded coordinates:</td>
|
|
|
<td colspan="2">
|
|
|
X-coord: <input name="cssxXvalSelect" id="cssxXvalSelect" size="7" maxlength="4" />
|
|
|
Y-coord: <input name="cssxYvalSelect" id="cssxYvalSelect" size="7" maxlength="4" />
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td colspan="3">
|
|
|
<input type="button" value="Add" class="button" onclick="jsxAdd()" />
|
|
|
<input type="button" value="Change" class="button" onclick="jsxChange()" />
|
|
|
<input type="button" value="Delete" class="button" onclick="jsxDelete()" />
|
|
|
<input type="button" value="Delete all coordinates" class="button" onclick="jsxDeleteAll()" />
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</form>
|
|
|
|
|
|
<script>
|
|
|
const canvas = document.getElementById('output_file');
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
let coordinates = [];
|
|
|
|
|
|
document.getElementById('inputfile').addEventListener('change', loadImage);
|
|
|
|
|
|
function loadImage(event) {
|
|
|
const file = event.target.files[0];
|
|
|
if (file) {
|
|
|
const reader = new FileReader();
|
|
|
reader.onload = function(e) {
|
|
|
const img = new Image();
|
|
|
img.onload = function() {
|
|
|
canvas.width = img.width;
|
|
|
canvas.height = img.height;
|
|
|
ctx.drawImage(img, 0, 0);
|
|
|
document.getElementById('cssxNewImageWidth').textContent = img.width;
|
|
|
document.getElementById('cssxNewImageHeight').textContent = img.height;
|
|
|
};
|
|
|
img.src = e.target.result;
|
|
|
};
|
|
|
reader.readAsDataURL(file);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
canvas.addEventListener('mousemove', function(event) {
|
|
|
const rect = canvas.getBoundingClientRect();
|
|
|
const x = event.clientX - rect.left;
|
|
|
const y = event.clientY - rect.top;
|
|
|
document.getElementById('cssxXval').value = x;
|
|
|
document.getElementById('cssxYval').value = y;
|
|
|
});
|
|
|
|
|
|
canvas.addEventListener('mousedown', function(event) {
|
|
|
const rect = canvas.getBoundingClientRect();
|
|
|
const x = event.clientX - rect.left;
|
|
|
const y = event.clientY - rect.top;
|
|
|
coordinates.push({ x, y });
|
|
|
updateCoordinatesList();
|
|
|
});
|
|
|
|
|
|
function updateCoordinatesList() {
|
|
|
const select = document.getElementById('cssxCoordinates');
|
|
|
select.innerHTML = '';
|
|
|
coordinates.forEach((coord, index) => {
|
|
|
const option = document.createElement('option');
|
|
|
option.value = index;
|
|
|
option.textContent = `(${coord.x}, ${coord.y})`;
|
|
|
select.appendChild(option);
|
|
|
});
|
|
|
document.getElementById('cssxTotalCoordinates').textContent = coordinates.length;
|
|
|
}
|
|
|
|
|
|
function jsxAdd() {
|
|
|
const x = parseInt(document.getElementById('cssxXvalSelect').value);
|
|
|
const y = parseInt(document.getElementById('cssxYvalSelect').value);
|
|
|
if (!isNaN(x) && !isNaN(y)) {
|
|
|
coordinates.push({ x, y });
|
|
|
updateCoordinatesList();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function jsxChange() {
|
|
|
const select = document.getElementById('cssxCoordinates');
|
|
|
const index = select.value;
|
|
|
if (index >= 0) {
|
|
|
const x = parseInt(document.getElementById('cssxXvalSelect').value);
|
|
|
const y = parseInt(document.getElementById('cssxYvalSelect').value);
|
|
|
if (!isNaN(x) && !isNaN(y)) {
|
|
|
coordinates[index] = { x, y };
|
|
|
updateCoordinatesList();
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function jsxDelete() {
|
|
|
const select = document.getElementById('cssxCoordinates');
|
|
|
const index = select.value;
|
|
|
if (index >= 0) {
|
|
|
coordinates.splice(index, 1);
|
|
|
updateCoordinatesList();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function jsxDeleteAll() {
|
|
|
coordinates = [];
|
|
|
updateCoordinatesList();
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html>
|
|
|
|
