kitplace/index.html

115 lines
4.9 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='koeri.html'>New [koeri]</a><br><br>
<br><br>
<a href='https://drbaka-de.github.io/rplace/'>drbaka_de made a fancier version of this page</a><br><br>
<hr>
Color Guide:<br>
<img height='400px;' src='KIT_r_Place_Color_guide.png'>
<hr><br>
<a href='https://www.reddit.com/r/place/?cx=802&cy=534&px=53' target='_blank'>Link zu r/place</a><br><br>
<!--
<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 <= cvs.width; i+=10){
ctx.beginPath(); // Start a new path
ctx.moveTo(i, 0); // Move the pen to (30, 50)
ctx.lineTo(i, cvs.height); // Draw a line to (150, 100)
ctx.stroke(); // Render the path
}
for (let i = 0; i <= cvs.height; i+=10){
ctx.beginPath(); // Start a new path
ctx.moveTo(0, i); // Move the pen to (30, 50)
ctx.lineTo(cvs.width, 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) + 760;
var y = parseInt((evt.clientY - rect.top)/10) + 547 - 26;
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,iVBORw0KGgoAAAANSUhEUgAAAEkAAAAbCAYAAAAwNaIgAAABg2lDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV/TSkUqInYQcchQnSyIijhqFYpQIdQKrTqYXPoFTRqSFBdHwbXg4Mdi1cHFWVcHV0EQ/ABxdHJSdJES/5cUWsR4cNyPd/ced+8AoVFhmhUaBzTdNtPJhJjNrYrhV4QQRD/CiMjMMuYkKQXf8XWPAF/v4jzL/9yfo1fNWwwIiMSzzDBt4g3i6U3b4LxPHGUlWSU+Jx4z6YLEj1xXPH7jXHRZ4JlRM5OeJ44Si8UOVjqYlUyNeIo4pmo65QtZj1XOW5y1So217slfGMnrK8tcpzmMJBaxBAkiFNRQRgU24rTqpFhI037Cxz/k+iVyKeQqg5FjAVVokF0/+B/87tYqTE54SZEE0PXiOB8jQHgXaNYd5/vYcZonQPAZuNLb/moDmPkkvd7WYkdA3zZwcd3WlD3gcgcYfDJkU3alIE2hUADez+ibcsDALdCz5vXW2sfpA5ChrlI3wMEhMFqk7HWfd3d39vbvmVZ/P9qhcmrfmRTFAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5gQDEQohQJ5qggAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAANsSURBVFjD7Vk9T9tQFD0vQmKvRJeuEAKx6EBdpEpInZBClkgslRpGJDIZqBRUfkCrRIIkE2wd6qCMXgIS/wCcLCjhS1m7FP5BVbmD+xx/vOfnT2DgSJaTvHf97KNz7r3PIQAMvMAXEwBgGOnwRAjx/DZdUvHq44ow9mLrNXeMXoM3RzQeFNMlFSOtjExa7LMIYuFcmYpE0KMrKRYZagUAYJQPQ8XZybF/9iP3KQiKRRIlJwpY6nmOBGnfZUhaRJJYBBG14lCTYRjch15q3XuISoOg983fga08uL5NTklxFMQjKghB5yvFcexZV6iAfG7KWico8rks8/fQiXvwbjsxOS+17gMraEhUQNEBRXcQFsTaPHvbUfqqcwmdSNLDbsslUeYdaMnmWdGBYjp5iEVUaCXlc9nAavLrv6KU+aWzrmk1SlaMBw+DTJQcFIaoJAii8+lZlJOodegRF5kgBIUhKk5i5ymott90nB8bmaAKSkNRQQii6umenApV+OgkxbGefV7cfaFxJaNaaKO4WkC10IZxJT8PkvwsQ9RKYr1SqIJhlJ/2LUDccp/PZTHANqReQ9gObCw/YFfzXm+klVFb9uac+ulnAEB1R0H9oAUAWMOxaT3OvW0sPwB/j9lFI2TMBQBiOsJpieHNHQA4HpprBxsRw5s7RwwdszeMtf0mdr9s8ZtV1/age3KK6o4yJu2gheJqwby/uVnmNWr7TWuOG2FjpLlZtpJoez7AONfwCPNTFB1z7+P8iJLmZh1VrFpoA9dt23egfiJWOk30YcCLYSqJhSDqomTZFeVWk9EBsCADlzrIJ/+ELbT8vM6OpWskEEPm9eDVLZ/LWpWMV/Z5bwfcmNlTgAUZ0yXVl4CZPcUZw/jMA53jPkeJybAql1/1EpFF1Eq4rUuHPzbSnq6iMe0mKuu8jSvPhkb50GM7Qghb1hGt9+zsZleZnVCesohagdRreBRV/+Ut8zMd1VdRftYTgbYQQcCzW2Kvb6nSaEWkCqJE2edbvU9hXLXMHKVwLTbSysA3ORI5zPXSsFucl3OWFdePHP2I1GvAWOxHsh7pLwLrR1zrDN/eMrv2MHaja6T2l5LUa1iHHdU3W+MtxuWkeSP2G/uzCfzc9LUe6S8Cl5P8OX3FIoUeAEB+fBDGOAj6vwbByz+4QvwDUKrEShoPmh8AAAAASUVORK5CYII="
}
drawImg();
</script>
</body>
</html>