I should have started using git sooner...
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
@@ -0,0 +1,16 @@
|
|||||||
|
# Project kitplace
|
||||||
|
#### Avaible at https://rkaitplace.netlify.app/
|
||||||
|
|
||||||
|
## How to use this
|
||||||
|
Just head over to https://rkaitplace.netlify.app/
|
||||||
|
drbaka_de made a way fancier version of this tool. (So you probably want to use that instead)
|
||||||
|
You can find it on https://drbaka-de.github.io/rplace/ (Source Code on https://github.com/drbaka-de/rplace)
|
||||||
|
|
||||||
|
## Origin Story
|
||||||
|
On April 1st 16:15 reddit user u/No_Oven2938 postet the idea to put the KIT-Logo on r/place. (https://www.reddit.com/r/KaIT/comments/ttrr39/rkaitplace/)
|
||||||
|
While I wanted to contribute, I found it very annoying to have to count pixels to get the correct coordinates. This is why I decided to hack together a small tool to do that for me. Building the original version took me ~5min (which I hope justifies the level of shittiness of the code...)
|
||||||
|
The reason the images are embeded as base64, is because I don't wanted to deal with CORS :P
|
||||||
|
Gauging by the comments on the reddit post, I was not the only person having issues counting pixels, so I decided to make this tool public. (I just googled for 'free static html hosting' and so I ended up using netlify)
|
||||||
|
I later expanded the page to add more functionality (tichy / koeri) but the code shittiness remained.
|
||||||
|
|
||||||
|
Thanks to everyone who contributed on building / maintaining the logo, it turned out amazing!
|
||||||
+114
@@ -0,0 +1,114 @@
|
|||||||
|
<!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>
|
||||||
+109
@@ -0,0 +1,109 @@
|
|||||||
|
<!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>
|
||||||
|
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<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>
|
||||||
+75
File diff suppressed because one or more lines are too long
+89
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user