114 lines
3.7 KiB
HTML
114 lines
3.7 KiB
HTML
<!DOCTYPE HTML>
|
|
<!-- Display image, show mouse position and pixel values
|
|
Author: Dominik Roth
|
|
But I stole most of it from this guy:
|
|
Author: Changjiang Yang
|
|
Date: 08/14/2016
|
|
TODO: Add drag and drop
|
|
-->
|
|
<html>
|
|
<head>
|
|
<style>
|
|
div.footer {
|
|
left: 0;
|
|
margin: 0 auto;
|
|
background: #0072BB;
|
|
color:#fff;
|
|
}
|
|
|
|
canvas {
|
|
image-rendering: -moz-crisp-edges;
|
|
image-rendering: -webkit-crisp-edges;
|
|
image-rendering: pixelated;
|
|
image-rendering: crisp-edges;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="footer" id="results">Move mouse over image to show coordinates on r/place</div>
|
|
<canvas id="canvas" style="margin:12px;"></canvas>
|
|
|
|
<br>
|
|
|
|
<a href='#' onclick='drawGrid()'>Activate Grid</a>
|
|
<a href='#' onclick='drawImg()'>Deactivate Grid</a>
|
|
|
|
<br><br>
|
|
|
|
<a href='index.html'>Original KIT Logo</a>
|
|
|
|
<br><br>
|
|
|
|
<a href='https://drbaka-de.github.io/rplace/'>The drbaka_de overlay should also contain [koeri]</a><br><br>
|
|
|
|
<hr><br>
|
|
|
|
<a href='https://www.reddit.com/r/place/?cx=1444&cy=1179&px=25' target='_blank'>Link zu r/place</a><br><br>
|
|
|
|
<hr>
|
|
|
|
<h5>Source Code can be found <a href='https://gitea.dominik.roth.ml/dodox/kitplace'>here</a></h5>
|
|
|
|
|
|
<!--
|
|
<h3>The Template shown here might become oudated. The Discord-Channel always contains the newest information on the current plan.</h3>
|
|
<h4>Current Imgur-Link: <a href='https://i.imgur.com/04s98N5.png'>https://i.imgur.com/04s98N5.png</a></h4>
|
|
<h4>Previous Imgur-Link: <a href='https://i.imgur.com/fyE1WmW.png'>https://i.imgur.com/fyE1WmW.png</a></h4>
|
|
-->
|
|
<script>
|
|
var URL = window.URL;
|
|
var cvs = document.getElementById('canvas');
|
|
var ctx = cvs.getContext('2d');
|
|
var res = document.getElementById('results');
|
|
|
|
cvs.addEventListener('mousemove', mousePos, false);
|
|
|
|
function drawGrid() {
|
|
var cvs = document.getElementById('canvas');
|
|
var ctx = cvs.getContext('2d');
|
|
for (let i = 0; i<= 64*10; i+=10){
|
|
ctx.beginPath(); // Start a new path
|
|
ctx.moveTo(i, 0); // Move the pen to (30, 50)
|
|
ctx.lineTo(i, 64*10); // Draw a line to (150, 100)
|
|
ctx.stroke(); // Render the path
|
|
}
|
|
|
|
for (let i = 0; i<= 64*10; i+=10){
|
|
ctx.beginPath(); // Start a new path
|
|
ctx.moveTo(0, i); // Move the pen to (30, 50)
|
|
ctx.lineTo(64*10, i); // Draw a line to (150, 100)
|
|
ctx.stroke(); // Render the path
|
|
}
|
|
}
|
|
|
|
function mousePos(evt) {
|
|
var rect = cvs.getBoundingClientRect();
|
|
var x = parseInt((evt.clientX - rect.left)/10) + 1419;
|
|
var y = parseInt((evt.clientY - rect.top)/10) + 1172;
|
|
var p = ctx.getImageData(x, y, 1, 1).data;
|
|
results.innerHTML = '<table style="width:100%;table-layout:fixed"><td>X: '
|
|
+ x + '</td><td>Y: ' + y + '</td></table>';
|
|
return {x, y};
|
|
}
|
|
|
|
function drawImg() {
|
|
var img = new Image();
|
|
img.onload = function() {
|
|
cvs.width = img.width*10;
|
|
cvs.height = img.height*10;
|
|
ctx.imageSmoothingEnabled = false;
|
|
ctx.drawImage(img, 0, 0, cvs.width, cvs.height);
|
|
}
|
|
|
|
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAQBAMAAACigOGCAAAAMFBMVEUAAAAAAAEAAQABAAD+VyL+wQf+6zv/ViL/VyL/VyP/wAf/wQb/wQf/6jv/6zr/6zvTEjFNAAABcklEQVQY0xWRT0sCURTFr7oLxMAvoN9AWgbh8j2GEbcRRB+h7Xu0aDPju08MN5PMQrCls2ojQ4s2QZYz/RnbBSO6SWmngdZQo/YGLpcDv3s4cC6kAdL5FEBRidJuSk06o3QR9p89anNqcGEzYSHaDE1W719BbhZq94wYklrJRovRwDv5HkJ26lU/JVWHlhQGEkSqHA8LKEe8+cmJwTRDajbifUMB2hlCbomVZSPGs9P46XTq6KvXgdtNQHapHM0fe+wH48Pae30eEtcRrS/IRfwi3hAzFJcjYsVa3NWCLqmpjA9ZmY9JO0Rzsp396SuuBQPRGqpwWZ1vH80RMWO/7ynQSMACDiLZjM5/zBFthwSdeiwxyVhANmLVZePXmhy5G78fKgd1Hey8QXk1aH7Il0GwXl2v554+ZSRwNFeB2aje47ot/Rvu3yLtcXHJjrcL2Ol3CXLVHTVQIBdJY1y/vYOkYUiVoFACgExhL6O+AHt5+AdsMc4DG1gtEwAAAABJRU5ErkJggg==";
|
|
}
|
|
|
|
drawImg();
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|