New draggable settings panel
This commit is contained in:
Kalekki
parent
ff8f4bdb30
commit
2a911e900e
3 changed files with 201 additions and 61 deletions
|
|
@ -45,8 +45,81 @@
|
||||||
grid-template-rows: 1fr;
|
grid-template-rows: 1fr;
|
||||||
grid-column-gap: 5px;
|
grid-column-gap: 5px;
|
||||||
grid-row-gap: 5px;
|
grid-row-gap: 5px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#infoContainer {
|
||||||
|
position: absolute;
|
||||||
|
width: 250px;
|
||||||
|
height: auto;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#DraggableTitleBar {
|
||||||
|
z-index: 999;
|
||||||
|
cursor: move;
|
||||||
|
background-color: rgba(104, 104, 104, 0.75);
|
||||||
|
|
||||||
|
padding-left: 5px;
|
||||||
|
padding-right: 5px;
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
margin-bottom: auto;
|
||||||
|
font-size: 1.5em;
|
||||||
|
color: black;
|
||||||
|
text-align: center;
|
||||||
|
border-top-left-radius: 10px;
|
||||||
|
border-top-right-radius: 10px;
|
||||||
|
border: solid;
|
||||||
|
border-bottom: none;
|
||||||
|
border-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible {
|
||||||
|
background-color: rgb(0, 0, 0);
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100%;
|
||||||
|
border: none;
|
||||||
|
text-align: center;
|
||||||
|
outline: none;
|
||||||
|
font-size: 15px;
|
||||||
|
padding: 5px;
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible:hover {
|
||||||
|
background-color: #777;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
max-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: max-height 0.2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
background-color: rgba(255, 255, 255, 0.5);
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
|
||||||
|
color: black;
|
||||||
|
border: solid;
|
||||||
|
border-top: none;
|
||||||
|
border-color: black;
|
||||||
|
font-size: medium;
|
||||||
|
text-align: left;
|
||||||
|
max-height: fit-content;
|
||||||
|
overflow: auto;
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.canvasHolder {
|
.canvasHolder {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 2560px;
|
width: 2560px;
|
||||||
|
|
|
||||||
144
index.html
144
index.html
|
|
@ -9,58 +9,29 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="mainHSplit" class="mainHSplit">
|
<div id="infoContainer">
|
||||||
<div id="uiWrapper" class="uiWrapper">
|
<div id="DraggableTitleBar">openOutpaint 🐠</div>
|
||||||
<div id="info" class="info" style="min-width:200px;">
|
<div id="info" class="info" style="min-width:200px;">
|
||||||
<div id="coords">
|
|
||||||
<label for="mouseX">mouseX:</label>
|
<label for="host">Host</label>
|
||||||
<span id="mouseX"></span>
|
<input id="host" value="http://127.0.0.1:7860"><br />
|
||||||
<br />
|
|
||||||
<label for="mouseY">mouseY:</label>
|
<!-- Prompts section -->
|
||||||
<span id="mouseY"></span>
|
<button type="button" class="collapsible">Prompts</button>
|
||||||
<br />
|
<div class="content">
|
||||||
<label for="canvasX">canvasX:</label>
|
<label for="prompt">Prompt:</label> <br>
|
||||||
<span id="canvasX"></span>
|
|
||||||
<br />
|
|
||||||
<label for="canvasY">canvasY:</label>
|
|
||||||
<span id="canvasY"></span>
|
|
||||||
<br />
|
|
||||||
<label for="snapX">snapX:</label>
|
|
||||||
<span id="snapX"></span>
|
|
||||||
<br />
|
|
||||||
<label for="snapY">snapY:</label>
|
|
||||||
<span id="snapY"></span>
|
|
||||||
<br />
|
|
||||||
</div>
|
|
||||||
<button onclick="newImage()">new image</button><br />
|
|
||||||
<label for="host">host:</label>
|
|
||||||
<input id="host" value="http://127.0.0.1:7860"><br />
|
|
||||||
<label for="scaleFactor">scale factor:</label>
|
|
||||||
<span id="scaleFactorTxt"></span><br />
|
|
||||||
<input type="range" id="scaleFactor" name="scaleFactor" min="1" max="16" value="8"
|
|
||||||
onchange="changeScaleFactor()" /><br />
|
|
||||||
<label for="prompt">prompt:</label>
|
|
||||||
<textarea id="prompt">oceanographic study, underwater wildlife, award winning</textarea><br />
|
<textarea id="prompt">oceanographic study, underwater wildlife, award winning</textarea><br />
|
||||||
<label for="negPrompt">negative prompt:</label>
|
<label for="negPrompt">Negative prompt:</label> <br>
|
||||||
<textarea
|
<textarea
|
||||||
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 />
|
||||||
<label for="seed">seed (-1 for random):</label>
|
<label for="seed">Seed (-1 for random):</label> <br>
|
||||||
<input type="number" id="seed" onchange="changeSeed()" min="1" max="9999999999" value="-1"
|
<input type="number" id="seed" onchange="changeSeed()" min="1" max="9999999999" value="-1"
|
||||||
step="1" /><br />
|
step="1" /><br />
|
||||||
<label for="cbxSnap">snap to grid?</label>
|
<hr>
|
||||||
<input type="checkbox" id="cbxSnap" onchange="changeSnapMode()" checked="checked"><br />
|
</div>
|
||||||
<label for="cbxPaint">mask mode?</label>
|
<button type="button" class="collapsible">Stable Diffusion settings</button>
|
||||||
<input type="checkbox" id="cbxPaint" onchange="changePaintMode()"><br />
|
<div class="content">
|
||||||
<label for="cbxErase"><s>erase mask?</s></label>
|
<label for="samplerSelect">Sampler:</label>
|
||||||
<input type="checkbox" id="cbxErase" onchange="changeEraseMode()" disabled="disabled"><br />
|
|
||||||
<label for="cbxHRFix">auto txt2img HRfix?</label>
|
|
||||||
<input type="checkbox" id="cbxHRFix" onchange="changeHiResFix()"><br />
|
|
||||||
<label for="cbxOverMask">overmasking?</label>
|
|
||||||
<input type="checkbox" id="cbxOverMask" onchange="changeOverMask()" checked="checked"><br />
|
|
||||||
<label for="overMaskPx">overmask px:</label>
|
|
||||||
<input type="number" id="overMaskPx" onchange="changeOverMaskPx()" min="0" max="128" value="16"
|
|
||||||
step="1" /><br />
|
|
||||||
<label for="samplerSelect">sampler:</label>
|
|
||||||
<select id="samplerSelect" onchange="changeSampler()">
|
<select id="samplerSelect" onchange="changeSampler()">
|
||||||
<option value="DDIM">DDIM</option>
|
<option value="DDIM">DDIM</option>
|
||||||
<option value="Euler a">Euler A</option>
|
<option value="Euler a">Euler A</option>
|
||||||
|
|
@ -79,14 +50,13 @@
|
||||||
<option value="DPM++ 2S a Karras">DPM++2Sa Karras</option>
|
<option value="DPM++ 2S a Karras">DPM++2Sa Karras</option>
|
||||||
<option value="DPM++ 2M Karras">DPM++2M Karras</option>
|
<option value="DPM++ 2M Karras">DPM++2M Karras</option>
|
||||||
</select><br />
|
</select><br />
|
||||||
<label for="steps">steps:</label>
|
<label for="steps">Steps:</label>
|
||||||
<span id="stepsTxt"></span><br />
|
<span id="stepsTxt"></span><br />
|
||||||
<input type="range" id="steps" name="steps" min="1" max="50" value="30"
|
<input type="range" id="steps" name="steps" min="1" max="50" value="30" onchange="changeSteps()" /><br />
|
||||||
onchange="changeSteps()" /><br />
|
|
||||||
<label for="cfgScale">CFG scale:</label>
|
<label for="cfgScale">CFG scale:</label>
|
||||||
<span id="cfgScaleTxt"></span><br />
|
<span id="cfgScaleTxt"></span><br />
|
||||||
<input type="range" id="cfgScale" name="cfgScale" min="-1" max="25" value="7.5" step="0.1"
|
<input type="range" id="cfgScale" name="cfgScale" min="-1" max="25" value="7.5" step="0.1" list="cfgDetents"
|
||||||
list="cfgDetents" onchange="changeCfgScale()" />
|
onchange="changeCfgScale()" />
|
||||||
<datalist id="cfgDetents">
|
<datalist id="cfgDetents">
|
||||||
<option value="-1"></option>
|
<option value="-1"></option>
|
||||||
<option value="0"></option>
|
<option value="0"></option>
|
||||||
|
|
@ -116,22 +86,73 @@
|
||||||
<option value="23"></option>
|
<option value="23"></option>
|
||||||
<option value="24"></option>
|
<option value="24"></option>
|
||||||
</datalist><br />
|
</datalist><br />
|
||||||
<label for="batchSize">batch size:</label>
|
<label for="batchSize">Batch size:</label>
|
||||||
<span id="batchSizeText"></span><br />
|
<span id="batchSizeText"></span><br />
|
||||||
<input type="range" id="batchSize" name="batchSize" min="1" max="8" value="2" step="1"
|
<input type="range" id="batchSize" name="batchSize" min="1" max="8" value="2" step="1"
|
||||||
onchange="changeBatchSize()" /><br />
|
onchange="changeBatchSize()" /><br />
|
||||||
<label for="batchCount">batch count:</label>
|
<label for="batchCount">Batch count:</label>
|
||||||
<span id="batchCountText"></span><br />
|
<span id="batchCountText"></span><br />
|
||||||
<input type="range" id="batchCount" name="batchCount" min="1" max="8" value="2" step="1"
|
<input type="range" id="batchCount" name="batchCount" min="1" max="8" value="2" step="1"
|
||||||
onchange="changeBatchCount()" /><br />
|
onchange="changeBatchCount()" /><br />
|
||||||
<label for="maskBlur">mask blur:</label>
|
<hr>
|
||||||
<span id="maskBlurText"></span><br />
|
|
||||||
<input type="number" id="maskBlur" name="maskBlur" min="0" max="64" value="0" step="1"
|
|
||||||
onchange="changeMaskBlur()" /><br />
|
|
||||||
<label for="preloadImage">load local image:</label>
|
|
||||||
<input type="file" id="preloadImage" onchange="preloadImage()" accept="image/*" /><br />
|
|
||||||
<button onclick="downloadCanvas()">dl canvas</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<label for="scaleFactor">Scale factor:</label>
|
||||||
|
<span id="scaleFactorTxt"></span><br />
|
||||||
|
<input type="range" id="scaleFactor" name="scaleFactor" min="1" max="16" value="8"
|
||||||
|
onchange="changeScaleFactor()" /><br />
|
||||||
|
<label for="cbxSnap">Snap to grid?</label>
|
||||||
|
<input type="checkbox" id="cbxSnap" onchange="changeSnapMode()" checked="checked"><br />
|
||||||
|
<label for="cbxPaint">Mask mode?</label>
|
||||||
|
<input type="checkbox" id="cbxPaint" onchange="changePaintMode()"><br />
|
||||||
|
<label for="cbxErase"><s>Erase mask?</s></label>
|
||||||
|
<input type="checkbox" id="cbxErase" onchange="changeEraseMode()" disabled="disabled"><br />
|
||||||
|
<label for="cbxHRFix">Auto txt2img HRfix?</label>
|
||||||
|
<input type="checkbox" id="cbxHRFix" onchange="changeHiResFix()"><br />
|
||||||
|
<label for="cbxOverMask">Overmasking?</label>
|
||||||
|
<input type="checkbox" id="cbxOverMask" onchange="changeOverMask()" checked="checked"><br />
|
||||||
|
<label for="overMaskPx">Overmask px:</label>
|
||||||
|
<input type="number" id="overMaskPx" onchange="changeOverMaskPx()" min="0" max="128" value="16"
|
||||||
|
step="1" /><br />
|
||||||
|
|
||||||
|
<label for="maskBlur">Mask blur:</label>
|
||||||
|
<span id="maskBlurText"></span><br />
|
||||||
|
<input type="number" id="maskBlur" name="maskBlur" min="0" max="64" value="0" step="1"
|
||||||
|
onchange="changeMaskBlur()" /><br />
|
||||||
|
<button type="button" class="collapsible">Save/Load/New image</button>
|
||||||
|
<div class="content">
|
||||||
|
<label for="preloadImage">Load image:</label>
|
||||||
|
<input type="file" id="preloadImage" onchange="preloadImage()" accept="image/*" /
|
||||||
|
style="width: 200px;"><br />
|
||||||
|
<button onclick="downloadCanvas()">Save canvas</button><br />
|
||||||
|
<button onclick="newImage()">Clear canvas</button>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="collapsible">Debug info</button>
|
||||||
|
<div id="coords" class="content">
|
||||||
|
<label for="mouseX">mouseX:</label>
|
||||||
|
<span id="mouseX"></span>
|
||||||
|
<br />
|
||||||
|
<label for="mouseY">mouseY:</label>
|
||||||
|
<span id="mouseY"></span>
|
||||||
|
<br />
|
||||||
|
<label for="canvasX">canvasX:</label>
|
||||||
|
<span id="canvasX"></span>
|
||||||
|
<br />
|
||||||
|
<label for="canvasY">canvasY:</label>
|
||||||
|
<span id="canvasY"></span>
|
||||||
|
<br />
|
||||||
|
<label for="snapX">snapX:</label>
|
||||||
|
<span id="snapX"></span>
|
||||||
|
<br />
|
||||||
|
<label for="snapY">snapY:</label>
|
||||||
|
<span id="snapY"></span>
|
||||||
|
<br />
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div id="mainHSplit" class="mainHSplit">
|
||||||
|
<div id="uiWrapper" class="uiWrapper">
|
||||||
<div id="canvasHolder" class="canvasHolder" oncontextmenu="return false;">
|
<div id="canvasHolder" class="canvasHolder" oncontextmenu="return false;">
|
||||||
<canvas id="backgroundCanvas" class="mainCanvases backgroundCanvas" width="2560" height="1440"
|
<canvas id="backgroundCanvas" class="mainCanvases backgroundCanvas" width="2560" height="1440"
|
||||||
style="z-index: 0;">
|
style="z-index: 0;">
|
||||||
|
|
@ -184,6 +205,7 @@
|
||||||
|
|
||||||
|
|
||||||
<script src="js/index.js" type="text/javascript"></script>
|
<script src="js/index.js" type="text/javascript"></script>
|
||||||
|
<script src="js/settingsbar.js" type="text/javascript"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
45
js/settingsbar.js
Normal file
45
js/settingsbar.js
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
dragElement(document.getElementById("infoContainer"));
|
||||||
|
|
||||||
|
function dragElement(elmnt) {
|
||||||
|
var p1 = 0,
|
||||||
|
p2 = 0,
|
||||||
|
p3 = 0,
|
||||||
|
p4 = 0;
|
||||||
|
document.getElementById('DraggableTitleBar').onmousedown = dragMouseDown;
|
||||||
|
|
||||||
|
function dragMouseDown(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
p3 = e.clientX;
|
||||||
|
p4 = e.clientY;
|
||||||
|
document.onmouseup = closeDragElement;
|
||||||
|
document.onmousemove = elementDrag;
|
||||||
|
}
|
||||||
|
|
||||||
|
function elementDrag(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
p1 = p3 - e.clientX;
|
||||||
|
p2 = p4 - e.clientY;
|
||||||
|
elmnt.style.top = (elmnt.offsetTop - (p4-e.clientY)) + "px";
|
||||||
|
elmnt.style.left = (elmnt.offsetLeft - (p3-e.clientX)) + "px";
|
||||||
|
p3 = e.clientX;
|
||||||
|
p4 = e.clientY;
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeDragElement() {
|
||||||
|
document.onmouseup = null;
|
||||||
|
document.onmousemove = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var coll = document.getElementsByClassName("collapsible");
|
||||||
|
for (var i = 0; i < coll.length; i++) {
|
||||||
|
coll[i].addEventListener("click", function () {
|
||||||
|
this.classList.toggle("active");
|
||||||
|
var content = this.nextElementSibling;
|
||||||
|
if (content.style.maxHeight) {
|
||||||
|
content.style.maxHeight = null;
|
||||||
|
} else {
|
||||||
|
content.style.maxHeight = content.scrollHeight + "px";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue