Merge pull request #24 from Kalekki/checkerboard
Checkerboard background to signal transparency
This commit is contained in:
commit
064ebe260b
3 changed files with 22 additions and 30 deletions
|
@ -2,6 +2,9 @@
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
}
|
}
|
||||||
|
body{
|
||||||
|
margin:0px;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -11,24 +14,8 @@
|
||||||
background-color: #ccc;
|
background-color: #ccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.maskPaintCanvas {
|
|
||||||
border: 3px dotted #993355c0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlayCanvas {
|
|
||||||
border: 1px solid #f00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tempCanvas {
|
|
||||||
border: 3px dotted #007affc0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.targetCanvas {
|
|
||||||
border: 2px dashed #0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.canvas {
|
.canvas {
|
||||||
border: 2px dotted #00f;
|
border: 1px black solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mainHSplit {
|
.mainHSplit {
|
||||||
|
@ -58,6 +45,12 @@
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
cursor: move;
|
cursor: move;
|
||||||
background-color: rgba(104, 104, 104, 0.75);
|
background-color: rgba(104, 104, 104, 0.75);
|
||||||
|
position: absolute;
|
||||||
|
top: 68px;
|
||||||
|
left: 68px;
|
||||||
|
width: 250px;
|
||||||
|
height: auto;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
|
|
|
@ -27,6 +27,7 @@
|
||||||
id="negPrompt">people, person, humans, human, divers, diver, glitch, error, text, watermark, bad quality, blurry</textarea><br />
|
id="negPrompt">people, person, humans, human, divers, diver, glitch, error, text, watermark, bad quality, blurry</textarea><br />
|
||||||
<hr>
|
<hr>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- SD section -->
|
||||||
<button type="button" class="collapsible">Stable Diffusion settings</button>
|
<button type="button" class="collapsible">Stable Diffusion settings</button>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<label for="seed">Seed (-1 for random):</label> <br>
|
<label for="seed">Seed (-1 for random):</label> <br>
|
||||||
|
@ -62,6 +63,7 @@
|
||||||
<input type="range" id="batchCount" name="batchCount" min="1" max="8" step="1" /><br />
|
<input type="range" id="batchCount" name="batchCount" min="1" max="8" step="1" /><br />
|
||||||
<hr>
|
<hr>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Unsectioned -->
|
||||||
<label for="scaleFactor">Scale factor: <input type="number" id="scaleFactorTxt"></label><br />
|
<label for="scaleFactor">Scale factor: <input type="number" id="scaleFactorTxt"></label><br />
|
||||||
<input type="range" id="scaleFactor" name="scaleFactor" min="1" max="16" /><br />
|
<input type="range" id="scaleFactor" name="scaleFactor" min="1" max="16" /><br />
|
||||||
<label for="cbxSnap">Snap to grid?</label>
|
<label for="cbxSnap">Snap to grid?</label>
|
||||||
|
@ -80,6 +82,7 @@
|
||||||
<span id="maskBlurText"></span><br />
|
<span id="maskBlurText"></span><br />
|
||||||
<input type="number" id="maskBlur" name="maskBlur" min="0" max="256" value="0" step="1"
|
<input type="number" id="maskBlur" name="maskBlur" min="0" max="256" value="0" step="1"
|
||||||
onchange="changeMaskBlur()" /><br />
|
onchange="changeMaskBlur()" /><br />
|
||||||
|
<!-- Save/load image section -->
|
||||||
<button type="button" class="collapsible">Save/Load/New image</button>
|
<button type="button" class="collapsible">Save/Load/New image</button>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<label for="preloadImage">Load image:</label>
|
<label for="preloadImage">Load image:</label>
|
||||||
|
|
20
js/index.js
20
js/index.js
|
@ -429,7 +429,7 @@ function mouseMove(evt) {
|
||||||
ovCtx.drawImage(arbitraryImage, finalX, finalY);
|
ovCtx.drawImage(arbitraryImage, finalX, finalY);
|
||||||
} else if (!paintMode) {
|
} else if (!paintMode) {
|
||||||
// draw targeting square reticle thingy cursor
|
// draw targeting square reticle thingy cursor
|
||||||
ovCtx.strokeStyle = "#00000077";
|
ovCtx.strokeStyle = "#FFFFFF";
|
||||||
snapOffsetX = 0;
|
snapOffsetX = 0;
|
||||||
snapOffsetY = 0;
|
snapOffsetY = 0;
|
||||||
if (snapToGrid) {
|
if (snapToGrid) {
|
||||||
|
@ -817,18 +817,14 @@ function isCanvasBlank(x, y, w, h, specifiedCanvas) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function drawBackground() {
|
function drawBackground() {
|
||||||
bgCtx.lineWidth = 1;
|
// Checkerboard
|
||||||
bgCtx.strokeStyle = "#999";
|
let darkTileColor = "#333";
|
||||||
var gridbox = bgCanvas.getBoundingClientRect();
|
let lightTileColor = "#555";
|
||||||
for (var i = 0; i < gridbox.width; i += 64) {
|
for (var x = 0; x < bgCanvas.width; x += 64) {
|
||||||
bgCtx.moveTo(i, 0);
|
for (var y = 0; y < bgCanvas.height; y += 64) {
|
||||||
bgCtx.lineTo(i, bgCanvas.height);
|
bgCtx.fillStyle = (x + y) % 128 === 0 ? lightTileColor : darkTileColor;
|
||||||
bgCtx.stroke();
|
bgCtx.fillRect(x, y, 64, 64);
|
||||||
}
|
}
|
||||||
for (var i = 0; i < gridbox.height; i += 64) {
|
|
||||||
bgCtx.moveTo(0, i);
|
|
||||||
bgCtx.lineTo(gridbox.width, i);
|
|
||||||
bgCtx.stroke();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue