148 lines
4.3 KiB
HTML
148 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
:root {
|
|
--grid-columns: 8;
|
|
--grid-rows: 8;
|
|
}
|
|
|
|
#controls {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--grid-columns), auto);
|
|
gap: 5%;
|
|
}
|
|
|
|
#render {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--grid-columns), 20px);
|
|
grid-template-rows: repeat(var(--grid-rows), 20px);
|
|
border: 1px solid black;
|
|
}
|
|
</style>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
<script>
|
|
function splash(that) {
|
|
//alert(parent.id);
|
|
//alert(parent.getAttribute("data-coord"));
|
|
//alert(that.value);
|
|
that.style.backgroundColor = document.querySelector("#color").value;
|
|
|
|
}
|
|
|
|
function cGen(that) {
|
|
document.getElementById("render").innerHTML = "";
|
|
var parent = that.parentElement;
|
|
// alert("parent");
|
|
var canvasX = Number(document.querySelector("#canvasX").value);
|
|
// alert("x");
|
|
canvasX = Math.floor(canvasX);
|
|
document.querySelector(':root').style.setProperty('--grid-columns', "" + canvasX);
|
|
// alert("grid");
|
|
|
|
var canvasY = Number(document.querySelector("#canvasY").value);
|
|
//alert(document.querySelector("#canvasY").value);
|
|
canvasY = Math.floor(canvasY);
|
|
document.querySelector(':root').style.setProperty('--grid-rows', "" + canvasY);
|
|
//alert(canvasY);
|
|
var nodeRender = "";
|
|
var cloneRender = "";
|
|
var nodeControl = "";
|
|
var cloneControl = "";
|
|
//alert("start loop");
|
|
for (let x = 0; x < canvasX; x++) {
|
|
for (let y = 0; y < canvasY; y++) {
|
|
//alert(" in");
|
|
nodeRender = document.getElementById("rendertemplate");
|
|
//alert(" past template");
|
|
|
|
cloneRender = nodeRender.cloneNode(true);
|
|
cloneRender.style.display = "grid";
|
|
cloneRender.id = "i" + x + "x" + y;
|
|
if (y==0){
|
|
//alert(cloneRender.innerHTML);
|
|
}
|
|
document.getElementById("render").appendChild(cloneRender);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
function setColor(that){
|
|
var color = that.value;
|
|
//alert(typeof color);
|
|
if (color.includes("#")){
|
|
document.querySelector("#color").value = color;
|
|
|
|
} else {
|
|
document.querySelector("#color").value = "#"+color;
|
|
document.querySelector("#picker").value = "#"+color;
|
|
}
|
|
|
|
}
|
|
|
|
function saveAs(uri, filename) {
|
|
var link = document.createElement('a');
|
|
if (typeof link.download === 'string') {
|
|
link.href = uri;
|
|
link.download = filename;
|
|
|
|
//Firefox requires the link to be in the body
|
|
document.body.appendChild(link);
|
|
|
|
//simulate click
|
|
link.click();
|
|
|
|
//remove the link when done
|
|
document.body.removeChild(link);
|
|
} else {
|
|
window.open(uri);
|
|
}
|
|
}
|
|
|
|
function save() {
|
|
var canvas = document.createElement('canvas');
|
|
var canvasX = Number(document.querySelector("#canvasX").value);
|
|
var canvasY = Number(document.querySelector("#canvasY").value);
|
|
canvas.width = canvasX;
|
|
canvas.height = canvasY;
|
|
var ctx = canvas.getContext('2d');
|
|
var x = 0;
|
|
var y = 0;
|
|
for (x = 0; x < canvasX; x++) {
|
|
for (y = 0; y < canvasY; y++) {
|
|
|
|
//alert(document.querySelector("#i" + x + "x" + y).style.backgroundColor);
|
|
//alert("before fill style");
|
|
ctx.fillStyle = document.querySelector("#i" + x + "x" + y).style.backgroundColor;
|
|
//ctx.fillStyle = "#00ff00";
|
|
//alert("after fill style");
|
|
ctx.fillRect(y, x, 1, 1);
|
|
}
|
|
}
|
|
saveAs(canvas.toDataURL('image/png'), " download.png");
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<input type="hidden" id="color" value="#000000">
|
|
Background color:
|
|
<div id="rendertemplate" style="max-width: 20px;min-height:20px;background-color: #000000;" onclick="try{splash(this);}catch(e){alert(e);}"></div>
|
|
<br>
|
|
<div id="controls">
|
|
Color picker: <input type="color" onchange="try{setColor(this);}catch(e){alert(e);}" value="#ffffff" id="picker">
|
|
Hex input: <input type="text" maxlength="6" onchange="try{setColor(this);}catch(e){alert(e);}" value="000000"/>
|
|
</div>
|
|
<br>
|
|
<div id="create">
|
|
X<input type="number" min="8" max="64" placeholder="8" id="canvasX" value="8"/>
|
|
Y<input type="number" min="8" max="64" placeholder="8" id="canvasY" value="8"/>
|
|
<button onclick="try{cGen(this);}catch(e){alert(e);}">Generate workspace</button>
|
|
<button onclick="try{save();}catch(e){alert(e);}">Save</button>
|
|
</div>
|
|
<br>
|
|
<div id="render">
|
|
</div>
|
|
</body>
|
|
</html> |