278 lines
12 KiB
HTML
278 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
|
|
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
|
|
Remove this if you use the .htaccess -->
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
|
<title>editor</title>
|
|
<meta name="description" content="">
|
|
<meta name="author" content="Adrian">
|
|
|
|
<meta name="viewport" content="width=device-width; initial-scale=1.0">
|
|
|
|
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
|
|
<link rel="stylesheet" href="/css/normalize.css">
|
|
<link rel="stylesheet" href="/css/x3dom.css">
|
|
<style type="text/css">
|
|
table {
|
|
border: #000000 1px solid;
|
|
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QsYBDot53bB4AAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAJklEQVQY02OcOXMmAxJIS0tD5jIx4AU0lWb8//8/Mn/WrFmDxWkAVcgH23xaitUAAAAASUVORK5CYII=");
|
|
}
|
|
td {
|
|
border: #000000 1px solid;
|
|
width: 10px;
|
|
height: 10px;
|
|
|
|
}
|
|
</style>
|
|
<link rel="shortcut icon" href="/favicon.ico">
|
|
<script type="text/javascript" src="/js/x3dom.js"></script>
|
|
<script type="text/javascript" src="/js/ajax.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
function getSkin(page) {
|
|
|
|
xhr.request("getskins.php", page, gotSkin);
|
|
}
|
|
|
|
var string = location.hash;
|
|
if (string.indexOf('#!') != -1) {
|
|
cmd = string.split('!');
|
|
getSkin("page=1&filtertype=Id&filter=" + cmd[1]);
|
|
} else {
|
|
var id = prompt("Please enter the id of Skin you want to load from Skin DB", "1");
|
|
location.hash = "#!" + id;
|
|
getSkin("page=1&filtertype=Id&filter=" + id);
|
|
}
|
|
function gotSkin(http) {
|
|
if (http.status == 200) {
|
|
|
|
if (JSON.parse(http.responseText)) {
|
|
var answer = JSON.parse(http.responseText);
|
|
if (answer.success) {
|
|
if (answer.data.length < 1) {
|
|
alert("noting found matching your filter!");
|
|
} else {
|
|
useTexture("data:" + answer.data[0].type + ";base64," + answer.data[0].img);
|
|
}
|
|
} else {
|
|
TINY.box.show({
|
|
html : '<h1>oops :/</h1> <h2>an error happend! </h2><u><b>Errmsg:</b></u><pre>' + answer.status_msg + '</pre><br><b>you may can try it again,but if you still get this mesage than you should report the bug at the <a href="https://project.king-arthur.eu/projects/minetest-skin-db" >project page</a> or at the <a href="https://forum.minetest.net/viewtopic.php?id=4497">minetest forum thread</a>',
|
|
animate : false,
|
|
close : true,
|
|
boxid : 'error'
|
|
});
|
|
}
|
|
|
|
} else {
|
|
alert("Something is wrong: the status of http is: " + http.getResponseText());
|
|
}
|
|
|
|
} else {
|
|
alert("Something is wrong: the answer of the server is " + http.status + " " + http.statusText);
|
|
}
|
|
|
|
}
|
|
|
|
function useTexture(src) {
|
|
var canvas = document.getElementById('myCanvas');
|
|
var img = new Image();
|
|
img.onload = function() {
|
|
if (canvas.getContext) {
|
|
var context = canvas.getContext('2d');
|
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
|
context.drawImage(img, 0, 0, canvas.width, canvas.height);
|
|
canvas.parentNode._x3domNode.invalidateGLObject();
|
|
fillCanvas();
|
|
tableCreate(imageData.height, imageData.width);
|
|
}
|
|
};
|
|
img.src = src;
|
|
|
|
}
|
|
|
|
function setPixel(imageData, x, y, r, g, b, a) {
|
|
index = (x + y * imageData.width) * 4;
|
|
imageData.data[index + 0] = r;
|
|
imageData.data[index + 1] = g;
|
|
imageData.data[index + 2] = b;
|
|
imageData.data[index + 3] = a;
|
|
}
|
|
|
|
function getPixel(imageData, x, y) {
|
|
index = (x + y * imageData.width) * 4;
|
|
var r = imageData.data[index + 0];
|
|
var g = imageData.data[index + 1];
|
|
var b = imageData.data[index + 2];
|
|
var a = imageData.data[index + 3];
|
|
return {
|
|
'r' : r,
|
|
'g' : g,
|
|
'b' : b,
|
|
'a' : a
|
|
};
|
|
}
|
|
|
|
function getRGBA(imageData, x, y) {
|
|
index = (x + y * imageData.width) * 4;
|
|
var r = imageData.data[index + 0];
|
|
var g = imageData.data[index + 1];
|
|
var b = imageData.data[index + 2];
|
|
var a = imageData.data[index + 3];
|
|
return "rgba(" + r + "," + g + "," + b + "," + a + ")";
|
|
}
|
|
|
|
function displayBG(event) {
|
|
var data = event.target.dataset;
|
|
var y = parseInt(data.y);
|
|
var x = parseInt(data.x);
|
|
document.getElementById("posx").value = x;
|
|
document.getElementById("posy").value = y;
|
|
if (mousedown) {
|
|
event.target.style.backgroundColor = "red";
|
|
data = event.target.dataset;
|
|
setPixel(imageData, y, x, 255, 0, 0, 255);
|
|
|
|
} else {
|
|
var elem = document.getElementById('color');
|
|
elem.style.backgroundColor = event.target.style.backgroundColor;
|
|
}
|
|
}
|
|
|
|
|
|
function cleardisplayBG(event) {
|
|
var elem = document.getElementById('color');
|
|
elem.style.backgroundColor = "";
|
|
//mousedown=false;
|
|
}
|
|
|
|
mousedown = false;
|
|
function setmousedown(event) {
|
|
mousedown = true;
|
|
}
|
|
|
|
function setmouseup(event) {
|
|
mousedown = false;
|
|
c.putImageData(imageData, 0, 0);
|
|
document.getElementById("myCanvas").parentNode._x3domNode.invalidateGLObject();
|
|
}
|
|
|
|
function tableCreate(row, col) {
|
|
var body = document.body, tbl = document.createElement('table');
|
|
//tbl.style.width='100%';
|
|
tbl.style.border = "1px solid black;";
|
|
|
|
for (var x = 0; x < row; x++) {
|
|
var tr = tbl.insertRow();
|
|
for (var y = 0; y < col; y++) {
|
|
|
|
var td = tr.insertCell();
|
|
//td.appendChild(document.createTextNode('\u0020'));
|
|
var color = getRGBA(imageData, y, x);
|
|
td.style.backgroundColor = color;
|
|
td.dataset.x = x;
|
|
td.dataset.y = y;
|
|
|
|
}
|
|
}
|
|
tbl.addEventListener("mousemove", displayBG, true);
|
|
//tbl.addEventListener("mousemove", getPos, true);
|
|
tbl.addEventListener("mouseout", cleardisplayBG, true);
|
|
tbl.addEventListener("mousedown", setmousedown, true);
|
|
tbl.addEventListener("mouseup", setmouseup, true);
|
|
document.getElementById("main").appendChild(tbl);
|
|
|
|
}
|
|
|
|
function fillCanvas() {
|
|
element = document.getElementById("myCanvas");
|
|
c = element.getContext("2d");
|
|
|
|
// read the width and height of the canvas
|
|
width = element.width;
|
|
height = element.height;
|
|
|
|
// create a new pixel array
|
|
|
|
imageData = c.getImageData(0, 0, width, height);
|
|
|
|
pos = 0;
|
|
// index position into imagedata array
|
|
|
|
xoff = width / 3;
|
|
// offsets to "center"
|
|
yoff = height / 3;
|
|
|
|
// copy the image data back onto the canvas
|
|
c.putImageData(imageData, 0, 0);
|
|
// at coords 0,0
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div>
|
|
<header>
|
|
<h1>editor</h1>
|
|
</header>
|
|
<nav>
|
|
<p>
|
|
<a href="/">Back to Skin DB</a>
|
|
</p>
|
|
</nav>
|
|
|
|
<div id="main">
|
|
<div id="color">
|
|
Move the mouse over the image to display the color
|
|
</div>
|
|
|
|
<x3d id='3dprev' showStat='false' showLog='false' x='0px' y='0px' width='350px' height='512px'>
|
|
<scene>
|
|
<navigationInfo avatarSize='0.25 1.75 0.75' headlight='true' type='"EXAMINE" "ANY"'></navigationInfo>
|
|
<!--<background DEF='WO_World' groundColor='0.051 0.051 0.051' skyColor='0.051 0.051 0.051'></background>-->
|
|
|
|
<transform DEF='Armature_TRANSFORM' rotation='0 0.707107 0.707107 3.14159' translation='0 -10 0'>
|
|
|
|
<shape>
|
|
<appearance>
|
|
<!--<material DEF='MA_Character' ambientIntensity='0.333' shininess='0.098' specularColor='0.001 0.001 0.001'></material>-->
|
|
<texture DEF='IM_character_png' hideChildren="true" scale="false">
|
|
<canvas width='64' height='32' id='myCanvas' class="pixelated" ></canvas>
|
|
<TextureProperties boundaryModeS='CLAMP_TO_EDGE' boundaryModeT='CLAMP_TO_EDGE'
|
|
magnificationFilter='NEAREST' minificationFilter='NEAREST'
|
|
generateMipMaps='false' id='texProps' ></TextureProperties>
|
|
</texture>
|
|
|
|
</appearance>
|
|
<indexedFaceSet texCoordIndex='0 1 2 3 -1 4 5 6 7 -1 8 9 10 11 -1 12 13 14 15 -1 16 17 18 19 -1 20 21 22 23 -1 24 25 26 27 -1 28 29 30 31 -1 32 33 34 35 -1 36 37 38 39 -1 40 41 42 43 -1 44 45 46 47 -1 48 49 50 51 -1 52 53 54 55 -1 56 57 58 59 -1 60 61 62 63 -1 64 65 66 67 -1 68 69 70 71 -1 72 73 74 75 -1 76 77 78 79 -1 80 81 82 83 -1 84 85 86 87 -1 88 89 90 91 -1 92 93 94 95 -1 96 97 98 99 -1 100 101 102 103 -1 104 105 106 107 -1 108 109 110 111 -1 112 113 114 115 -1 116 117 118 119 -1 120 121 122 123 -1 124 125 126 127 -1 128 129 130 131 -1 132 133 134 135 -1 136 137 138 139 -1 140 141 142 143 -1 144 145 146 147 -1 148 149 150 151 -1 152 153 154 155 -1 156 157 158 159 -1 160 161 162 163 -1 164 165 166 167 -1' coordIndex='0 21 23 2 -1 1 0 2 3 -1 3 22 20 1 -1 0 1 20 21 -1 3 2 23 22 -1 47 44 45 46 -1 6 5 9 10 -1 7 6 10 11 -1 32 33 12 13 -1 14 15 13 12 -1 39 18 16 37 -1 18 19 17 16 -1 19 38 36 17 -1 36 37 16 17 -1 19 18 39 38 -1 34 14 12 33 -1 40 42 44 47 -1 15 35 32 13 -1 24 27 26 25 -1 31 28 29 30 -1 46 45 43 41 -1 35 34 33 32 -1 41 43 42 40 -1 23 21 20 22 -1 39 37 36 38 -1 15 14 34 35 -1 4 7 11 8 -1 5 4 8 9 -1 30 26 27 31 -1 4 5 6 7 -1 31 27 24 28 -1 44 42 43 45 -1 28 24 25 29 -1 11 10 9 8 -1 29 25 26 30 -1 40 47 46 41 -1 55 50 48 53 -1 50 51 49 48 -1 51 54 52 49 -1 52 53 48 49 -1 51 50 55 54 -1 55 53 52 54 -1'>
|
|
<coordinate DEF='coords_ME_Player' point='-2 -0.999999 6.75 -2 1 6.75 -2 -0.999999 13.5 -2 1 13.5 -4 1 13.5 -4 -1 13.5 -2 -1 13.5 -2 1 13.5 -4 1 6.75 -4 -1 6.75 -2 -1 6.75 -2 1 6.75 -2 -1 0 -2 1 0 -2 -1 6.75 -2 1 6.75 -2 -2 13.5 -2 2 13.5 -2 -2 17.5 -2 2 17.5 2 1 6.75 2 -1 6.75 2 1 13.5 2 -1 13.5 2 1 6.75 2 -1 6.75 4 -1 6.75 4 1 6.75 2 1 13.5 2 -1 13.5 4 -1 13.5 4 1 13.5 0 1 0 -0 -1 0 0 -1 6.75 0 1 6.75 2 2 13.5 2 -2 13.5 2 2 17.5 2 -2 17.5 2 1 6.75 2 -1 6.75 2 1 0 2 -1 0 0 1 0 0 -1 0 0 -1 6.75 0 1 6.75 -2.2 -2.2 13.3 -2.2 2.2 13.3 -2.2 -2.2 17.7 -2.2 2.2 17.7 2.2 2.2 13.3 2.2 -2.2 13.3 2.2 2.2 17.7 2.2 -2.2 17.7'></coordinate>
|
|
<textureCoordinate point='0.5 0 0.625 0 0.625 0.375 0.5 0.375 0.4375 0 0.5 0 0.5 0.375 0.4375 0.375 0.4375 0.375 0.3125 0.375 0.3125 0 0.4375 0 0.4375 0.5 0.4375 0.375 0.5625 0.375 0.5625 0.5 0.4375 0.375 0.4375 0.5 0.3125 0.5 0.3125 0.375 0.1875 0.375 0.1875 0 0.125 0 0.125 0.375 0.8125 0.375 0.875 0.375 0.875 0 0.8125 0 0.75 0.375 0.8125 0.375 0.8125 0 0.75 0 0.1875 0.375 0.1875 0.5 0.125 0.5 0.125 0.375 0 0.375 0.0625 0.375 0.0625 0 0 0 0.5 0.75 0.375 0.75 0.375 0.5 0.5 0.5 0.375 0.75 0.25 0.75 0.25 0.5 0.375 0.5 0.25 0.75 0.125 0.75 0.125 0.5 0.25 0.5 0.375 0.75 0.375 1 0.25 1 0.25 0.75 0.25 0.75 0.25 1 0.125 1 0.125 0.75 0.25 0.375 0.1875 0.375 0.1875 0 0.25 0 0.125 0.375 0.125 0 0.0625 0 0.0625 0.375 0.125 0.375 0.0625 0.375 0.0625 0 0.125 0 0.75 0.375 0.8125 0.375 0.8125 0.5 0.75 0.5 0.6875 0.375 0.75 0.375 0.75 0.5 0.6875 0.5 0.25 0.375 0.25 0 0.1875 0 0.1875 0.375 0.1875 0.375 0.125 0.375 0.125 0 0.1875 0 0 0.375 0 0 0.0625 0 0.0625 0.375 0.25 0.375 0.25 0 0.3125 0 0.3125 0.375 0 0.75 0 0.5 0.125 0.5 0.125 0.75 0.125 0.375 0.125 0.5 0.0625 0.5 0.0625 0.375 0.6875 0.375 0.75 0.375 0.75 0 0.6875 0 0.6875 0.375 0.625 0.375 0.625 0 0.6875 0 0.6875 0.375 0.6875 0 0.625 0 0.625 0.375 0.6875 0.375 0.6875 0.5 0.75 0.5 0.75 0.375 0.6875 0.375 0.6875 0 0.75 0 0.75 0.375 0.1875 0.375 0.125 0.375 0.125 0.5 0.1875 0.5 0.75 0.375 0.75 0 0.8125 0 0.8125 0.375 0.75 0.375 0.75 0.5 0.8125 0.5 0.8125 0.375 0.8125 0.375 0.8125 0 0.875 0 0.875 0.375 0.125 0.375 0.0625 0.375 0.0625 0.5 0.125 0.5 1 0.75 0.875 0.75 0.875 0.5 1 0.5 0.875 0.75 0.75 0.75 0.75 0.5 0.875 0.5 0.75 0.75 0.625 0.75 0.625 0.5 0.75 0.5 0.875 0.75 0.875 1 0.75 1 0.75 0.75 0.75 0.75 0.75 1 0.625 1 0.625 0.75 0.5 0.75 0.5 0.5 0.625 0.5 0.625 0.75'></textureCoordinate>
|
|
</indexedFaceSet>
|
|
</shape>
|
|
|
|
</transform>
|
|
|
|
<viewpoint DEF='CA_Camera' position='0 -1 40' fieldOfView='0.5'></viewpoint>
|
|
|
|
</scene>
|
|
</x3d>
|
|
<!--<div class="toolbar"><select height="5">
|
|
<option>pencil</option>
|
|
<option>picker</option>
|
|
<option>bucket</option>
|
|
<option>rubber</option>
|
|
</select>--> Position X:<output id="posx"></output> position Y:<output id="posy"></output> name of region: <output id="regionname"></output> be some tools</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>
|
|
© Copyright by Adrian
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|