I should have started using git sooner...
This commit is contained in:
commit
66420f7207
BIN
KIT_r_Place_Color_guide.png
Normal file
BIN
KIT_r_Place_Color_guide.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
16
README.md
Normal file
16
README.md
Normal file
@ -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
index.html
Normal file
114
index.html
Normal file
@ -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
koeri.html
Normal file
109
koeri.html
Normal file
@ -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
mexico.html
Normal file
75
mexico.html
Normal file
File diff suppressed because one or more lines are too long
89
tichy.html
Normal file
89
tichy.html
Normal file
File diff suppressed because one or more lines are too long
91
tichy_grid.html
Normal file
91
tichy_grid.html
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user