iasjkk
/

html_codes

Model card Files Files and versions

xet

Community

iasjkk commited on May 24, 2024

Commit

3fc8d32

verified ·

1 Parent(s): 8dee667

Upload abc.html

Browse files

Files changed (1) hide show

abc.html +168 -0

abc.html ADDED Viewed

	@@ -0,0 +1,168 @@

+<!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>