Very crude settings interface

Very crude settings interface with only canvas size for now. Canvas size
only affects canvas on next page load. Dynamic resizing in the horizon,
but will take a while.

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
This commit is contained in:
Victor Seiji Hariki 2022-12-08 00:26:37 -03:00
parent 57a2debe5d
commit ec59cf5538
9 changed files with 258 additions and 5 deletions

View file

@ -37,3 +37,8 @@
mask-image: url("/res/icons/chevron-first.svg"); mask-image: url("/res/icons/chevron-first.svg");
transform: rotate(-90deg); transform: rotate(-90deg);
} }
.ui.icon > .icon-settings {
-webkit-mask-image: url("/res/icons/settings.svg");
mask-image: url("/res/icons/settings.svg");
}

View file

@ -20,6 +20,10 @@ body {
overflow: clip; overflow: clip;
} }
.invisible {
display: none !important;
}
.collapsible { .collapsible {
background-color: rgb(0, 0, 0); background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
@ -68,6 +72,89 @@ body {
cursor: auto; cursor: auto;
} }
#page-overlay-wrapper {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #fff6;
backdrop-filter: blur(5px);
transition-duration: 50ms;
z-index: 1000;
}
.page-overlay-window {
display: flex;
flex-direction: column;
align-items: stretch;
border-radius: 10px;
color: var(--c-text);
overflow: hidden;
position: absolute;
margin: auto;
background-color: var(--c-primary);
}
.page-overlay-window .close {
position: absolute;
cursor: pointer;
top: 0;
right: 0;
margin: 5px;
width: 25px;
height: 25px;
-webkit-mask-image: url("/res/icon/x.svg");
mask-image: url("/res/icons/x.svg");
background-color: var(--c-text);
}
.page-overlay-window .close:hover {
transform: scale(1.1);
}
.page-overlay-window .title {
padding: 10px;
padding-top: 7px;
font-size: large;
font-weight: bold;
margin: auto;
background-color: var(--c-primary);
}
#page-overlay {
border: 0;
max-width: 300px;
max-height: 400px;
width: 100%;
height: 100%;
}
/* Mask colors for mask inversion */ /* Mask colors for mask inversion */
/* Filters are some magic acquired at https://codepen.io/sosuke/pen/Pjoqqp */ /* Filters are some magic acquired at https://codepen.io/sosuke/pen/Pjoqqp */
.mask-canvas { .mask-canvas {
@ -186,6 +273,31 @@ input#host {
box-sizing: border-box; box-sizing: border-box;
} }
/* Settings button */
.ui.icon.header-button {
padding: 0;
border: 0;
cursor: pointer;
background-color: transparent;
}
.ui.icon.header-button > *:first-child {
background-color: black;
-webkit-mask-size: contain;
mask-size: contain;
width: 28px;
height: 28px;
transition-duration: 30ms;
}
.ui.icon.header-button:hover > *:last-child {
transform: scale(1.1);
}
/* Prompt Fields */ /* Prompt Fields */
div.prompt-wrapper { div.prompt-wrapper {

View file

@ -7,15 +7,18 @@
} }
.floating-window-title { .floating-window-title {
display: flex;
align-items: center;
justify-content: center;
cursor: move; cursor: move;
background-color: rgba(104, 104, 104, 0.75); background-color: rgba(104, 104, 104, 0.75);
user-select: none; user-select: none;
padding-left: 5px; padding: 5px;
padding-right: 5px; padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: auto; margin-bottom: auto;
font-size: 1.5em; font-size: 1.5em;
color: black; color: black;

View file

@ -32,6 +32,10 @@
style="left: 10px; top: 10px"> style="left: 10px; top: 10px">
<div id="infoTitleBar" class="draggable floating-window-title"> <div id="infoTitleBar" class="draggable floating-window-title">
openOutpaint 🐠 openOutpaint 🐠
<div style="flex: 1"></div>
<button id="settings-btn" class="ui icon header-button">
<div class="icon-settings"></div>
</button>
</div> </div>
<div id="info" class="menu-container" style="min-width: 200px"> <div id="info" class="menu-container" style="min-width: 200px">
<label> <label>
@ -272,6 +276,18 @@
<!-- Overlay --> <!-- Overlay -->
<canvas id="layer-overlay" class="layer-overlay"></canvas> <canvas id="layer-overlay" class="layer-overlay"></canvas>
<!-- Page Overlay -->
<div id="page-overlay-wrapper" class="page-overlay invisible">
<div class="page-overlay-window">
<div class="title">
Settings
<button id="settings-btn-close" class="close"></button>
</div>
<div class="ui separator"></div>
<iframe id="page-overlay" src="/pages/configuration.html"></iframe>
</div>
</div>
<!-- Base Libs --> <!-- Base Libs -->
<script src="js/lib/util.js" type="text/javascript"></script> <script src="js/lib/util.js" type="text/javascript"></script>
<script src="js/lib/input.js" type="text/javascript"></script> <script src="js/lib/input.js" type="text/javascript"></script>

View file

@ -1,7 +1,14 @@
// Layering // Layering
const imageCollection = layers.registerCollection( const imageCollection = layers.registerCollection(
"image", "image",
{w: 2560, h: 1536}, {
w: parseInt(
(localStorage && localStorage.getItem("settings.canvas-width")) || 2048
),
h: parseInt(
(localStorage && localStorage.getItem("settings.canvas-height")) || 2048
),
},
{ {
name: "Image Layers", name: "Image Layers",
} }

View file

@ -1,3 +1,6 @@
/**
* Floating window setup
*/
document.querySelectorAll(".floating-window").forEach( document.querySelectorAll(".floating-window").forEach(
/** /**
* Runs for each floating window * Runs for each floating window
@ -24,6 +27,9 @@ document.querySelectorAll(".floating-window").forEach(
} }
); );
/**
* Collapsible element setup
*/
var coll = document.getElementsByClassName("collapsible"); var coll = document.getElementsByClassName("collapsible");
for (var i = 0; i < coll.length; i++) { for (var i = 0; i < coll.length; i++) {
let active = false; let active = false;
@ -55,3 +61,14 @@ for (var i = 0; i < coll.length; i++) {
} }
}); });
} }
/**
* Settings overlay setup
*/
document.getElementById("settings-btn").addEventListener("click", () => {
document.getElementById("page-overlay-wrapper").classList.toggle("invisible");
});
document.getElementById("settings-btn-close").addEventListener("click", () => {
document.getElementById("page-overlay-wrapper").classList.toggle("invisible");
});

83
pages/configuration.html Normal file
View file

@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>openOutpaint 🐠</title>
<!-- CSS Variables -->
<link href="/css/colors.css" rel="stylesheet" />
<link href="/css/icons.css" rel="stylesheet" />
<link href="/css/index.css" rel="stylesheet" />
<link href="/css/layers.css" rel="stylesheet" />
<link href="/css/ui/generic.css" rel="stylesheet" />
<link href="/css/ui/history.css" rel="stylesheet" />
<link href="/css/ui/layers.css" rel="stylesheet" />
<link href="/css/ui/toolbar.css" rel="stylesheet" />
<!-- Tool Specific CSS -->
<link href="/css/ui/tool/dream.css" rel="stylesheet" />
<link href="/css/ui/tool/stamp.css" rel="stylesheet" />
<link href="/css/ui/tool/colorbrush.css" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<style>
body {
color: var(--c-text);
margin: 0;
padding: 15px;
}
label {
display: flex;
}
input.canvas-size-input {
-webkit-appearance: textfield;
-moz-appearance: textfield;
width: 50px;
}
</style>
</head>
<body>
<label style="display: flex">
Canvas Size:
<input
id="canvas-width"
class="canvas-size-input"
type="number"
step="1" />
x
<input
id="canvas-height"
class="canvas-size-input"
type="number"
step="1" />
</label>
<script>
const canvasWidth = document.getElementById("canvas-width");
const canvasHeight = document.getElementById("canvas-height");
function writeToLocalStorage() {
localStorage.setItem("settings.canvas-width", canvasWidth.value);
localStorage.setItem("settings.canvas-height", canvasHeight.value);
}
// Loads values from local storage
canvasWidth.value = localStorage.getItem("settings.canvas-width") || 2048;
canvasHeight.value =
localStorage.getItem("settings.canvas-height") || 2048;
writeToLocalStorage();
canvasWidth.onchange = writeToLocalStorage;
canvasHeight.onchange = writeToLocalStorage;
</script>
</body>
</html>

5
res/icons/settings.svg Normal file
View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>

After

Width:  |  Height:  |  Size: 817 B

5
res/icons/x.svg Normal file
View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>

After

Width:  |  Height:  |  Size: 281 B