2023-08-25 14:44:12 -05:00
|
|
|
<!DOCTYPE html>
|
2022-11-29 20:08:43 -06:00
|
|
|
<html lang="en-US">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<title>openOutpaint 🐠</title>
|
|
|
|
|
<!-- CSS Variables -->
|
2023-01-26 22:43:07 -06:00
|
|
|
<link href="css/colors.css?v=f732f19" rel="stylesheet" />
|
2024-02-21 08:18:28 -06:00
|
|
|
<link href="css/icons.css?v=1640e24" rel="stylesheet" />
|
2022-11-29 20:08:43 -06:00
|
|
|
|
2023-08-31 07:55:12 -05:00
|
|
|
<link href="css/index.css?v=cf6b502" rel="stylesheet" />
|
2023-01-09 22:08:48 -06:00
|
|
|
<link href="css/layers.css?v=92c0352" rel="stylesheet" />
|
2022-11-29 20:54:09 -06:00
|
|
|
|
2024-01-27 07:37:28 -06:00
|
|
|
<link href="css/ui/generic.css?v=ed024fe" rel="stylesheet" />
|
2022-11-29 20:08:43 -06:00
|
|
|
|
2023-02-25 20:24:57 -06:00
|
|
|
<link href="css/ui/notifications.css?v=7b152de" rel="stylesheet" />
|
2023-01-26 22:43:07 -06:00
|
|
|
<link href="css/ui/workspace.css?v=2a9fdf7" rel="stylesheet" />
|
2022-12-28 19:52:14 -06:00
|
|
|
<link href="css/ui/history.css?v=0b03861" rel="stylesheet" />
|
2023-01-18 17:55:04 -06:00
|
|
|
<link href="css/ui/layers.css?v=1d66c2b" rel="stylesheet" />
|
2022-12-28 19:52:14 -06:00
|
|
|
<link href="css/ui/toolbar.css?v=109c78f" rel="stylesheet" />
|
2022-11-29 20:08:43 -06:00
|
|
|
|
|
|
|
|
<!-- Tool Specific CSS -->
|
2022-12-28 19:52:14 -06:00
|
|
|
<link href="css/ui/tool/dream.css?v=2d8a8ac" rel="stylesheet" />
|
|
|
|
|
<link href="css/ui/tool/stamp.css?v=6f5ce15" rel="stylesheet" />
|
|
|
|
|
<link href="css/ui/tool/colorbrush.css?v=57c8be5" rel="stylesheet" />
|
2022-11-29 20:08:43 -06:00
|
|
|
|
|
|
|
|
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<!-- Main Toolbar -->
|
|
|
|
|
<div
|
|
|
|
|
id="infoContainer"
|
|
|
|
|
class="floating-window"
|
|
|
|
|
style="left: 10px; top: 10px">
|
|
|
|
|
<div id="infoTitleBar" class="draggable floating-window-title">
|
|
|
|
|
openOutpaint 🐠
|
2022-12-07 21:26:37 -06:00
|
|
|
<div style="flex: 1"></div>
|
|
|
|
|
<button id="settings-btn" class="ui icon header-button">
|
|
|
|
|
<div class="icon-settings"></div>
|
|
|
|
|
</button>
|
2022-11-29 20:08:43 -06:00
|
|
|
</div>
|
|
|
|
|
<div id="info" class="menu-container" style="min-width: 200px">
|
2023-01-26 22:39:08 -06:00
|
|
|
<div
|
|
|
|
|
id="workspace-select-area"
|
|
|
|
|
style="display: flex; margin-bottom: 5px">
|
|
|
|
|
<div id="workspace-select"></div>
|
|
|
|
|
<div class="buttons" style="display: flex">
|
|
|
|
|
<button
|
|
|
|
|
id="save-workspace-btn"
|
|
|
|
|
class="ui inline-icon icon-save workspace-btn"
|
|
|
|
|
title="Save Workspace"></button>
|
|
|
|
|
<button
|
|
|
|
|
id="rename-workspace-btn"
|
|
|
|
|
class="ui inline-icon icon-pencil workspace-btn"
|
|
|
|
|
title="Rename Workspace"></button>
|
|
|
|
|
<button
|
|
|
|
|
id="more-workspace-btn"
|
|
|
|
|
class="ui inline-icon icon-more-horizontal workspace-btn"
|
|
|
|
|
title="More Options"></button>
|
2022-12-02 12:42:09 -06:00
|
|
|
<div
|
2023-01-26 22:39:08 -06:00
|
|
|
id="more-workspace-menu"
|
|
|
|
|
class="workspace-collapsible collapsed">
|
|
|
|
|
<div>
|
|
|
|
|
<button
|
|
|
|
|
id="export-workspace-btn"
|
|
|
|
|
class="ui inline-icon icon-download workspace-btn"
|
|
|
|
|
title="Export Workspace"></button>
|
|
|
|
|
<button
|
|
|
|
|
id="import-workspace-btn"
|
|
|
|
|
class="ui inline-icon icon-upload workspace-btn"
|
|
|
|
|
title="Import Workspace"></button>
|
|
|
|
|
<button
|
|
|
|
|
id="delete-workspace-btn"
|
|
|
|
|
class="ui inline-icon icon-trash workspace-btn"
|
|
|
|
|
title="Delete Workspace"></button>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="width: 5px; background-color: var(--c-primary)"></div>
|
2022-12-02 11:31:49 -06:00
|
|
|
</div>
|
2023-01-26 22:39:08 -06:00
|
|
|
<div style="width: 5px; background-color: var(--c-primary)"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2023-01-26 18:35:33 -06:00
|
|
|
<div class="host-field-wrapper">
|
|
|
|
|
<div class="host-field">
|
|
|
|
|
<div class="label">Host</div>
|
2022-11-29 20:08:43 -06:00
|
|
|
<input id="host" value="http://127.0.0.1:7860" />
|
|
|
|
|
</div>
|
2023-01-26 18:35:33 -06:00
|
|
|
<div
|
|
|
|
|
id="connection-status-indicator"
|
|
|
|
|
class="connection-status before">
|
|
|
|
|
<span id="connection-status-indicator-text">Waiting</span>
|
2022-11-29 20:08:43 -06:00
|
|
|
</div>
|
2023-01-26 18:35:33 -06:00
|
|
|
</div>
|
2023-01-09 22:02:19 -06:00
|
|
|
|
2022-11-29 20:08:43 -06:00
|
|
|
<!-- Prompts section -->
|
|
|
|
|
<button type="button" class="collapsible">Prompts</button>
|
2022-12-12 15:25:32 -06:00
|
|
|
<div class="content prompt">
|
|
|
|
|
<div class="inputs">
|
|
|
|
|
<div class="prompt-wrapper">
|
|
|
|
|
<div class="prompt-indicator positive" title="Prompt"></div>
|
|
|
|
|
<textarea id="prompt" class="expandable"></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="prompt-wrapper">
|
|
|
|
|
<div
|
|
|
|
|
class="prompt-indicator negative"
|
|
|
|
|
title="Negative Prompt"></div>
|
|
|
|
|
<textarea id="negPrompt" class="expandable"></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="prompt-wrapper">
|
|
|
|
|
<div class="prompt-indicator styles" title="Styles"></div>
|
|
|
|
|
<div id="style-ac-mselect" style="flex-shrink: 1"></div>
|
|
|
|
|
</div>
|
2022-11-29 20:08:43 -06:00
|
|
|
</div>
|
2022-12-12 15:25:32 -06:00
|
|
|
<div class="prompt-history-wrapper">
|
|
|
|
|
<div class="prompt-history-container">
|
2022-12-12 15:27:47 -06:00
|
|
|
<div id="prompt-history"></div>
|
2022-12-12 15:25:32 -06:00
|
|
|
<button
|
|
|
|
|
id="prompt-history-btn"
|
|
|
|
|
class="prompt-history-btn"></button>
|
|
|
|
|
</div>
|
2022-11-29 20:08:43 -06:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- SD section -->
|
|
|
|
|
<button type="button" class="collapsible">
|
|
|
|
|
Stable Diffusion settings
|
|
|
|
|
</button>
|
|
|
|
|
<div class="content">
|
2022-12-08 15:23:17 -06:00
|
|
|
<label>Model:</label>
|
|
|
|
|
<div id="models-ac-select"></div>
|
2023-01-15 10:31:27 -06:00
|
|
|
<button id="refreshModelsBtn" onclick="getModels(true)">
|
|
|
|
|
<img
|
|
|
|
|
class="refreshbutton"
|
2023-01-20 18:04:40 -06:00
|
|
|
src="./res/icons/refresh-cw.svg?v=f627140"
|
2023-01-15 10:31:27 -06:00
|
|
|
alt="refresh models"
|
|
|
|
|
title="refresh models" />
|
|
|
|
|
</button>
|
2022-12-08 15:23:17 -06:00
|
|
|
<label>Sampler:</label>
|
|
|
|
|
<div id="sampler-ac-select"></div>
|
2022-11-29 20:08:43 -06:00
|
|
|
<label for="seed">Seed (-1 for random):</label>
|
|
|
|
|
<br />
|
|
|
|
|
<input
|
|
|
|
|
type="number"
|
|
|
|
|
id="seed"
|
|
|
|
|
onchange="changeSeed()"
|
2023-01-07 06:46:33 -06:00
|
|
|
min="-1"
|
2023-07-08 10:49:56 -05:00
|
|
|
max="99999999999999999999"
|
2022-11-29 20:08:43 -06:00
|
|
|
value="-1"
|
|
|
|
|
step="1" />
|
|
|
|
|
<br />
|
2023-07-08 20:20:55 -05:00
|
|
|
<label>Lora:</label>
|
|
|
|
|
<div id="lora-ac-select"></div>
|
2023-08-25 14:44:12 -05:00
|
|
|
<input
|
|
|
|
|
type="checkbox"
|
|
|
|
|
id="cbxRefiner"
|
|
|
|
|
onchange="changeRefinerEnabled()" />
|
|
|
|
|
<label for="cbxRefiner">Enable Refiner</label>
|
|
|
|
|
<br />
|
|
|
|
|
<label id="refinerModelLabel" class="refiner">Refiner Model</label>
|
|
|
|
|
<div id="refiner-ac-select" class="refiner"></div>
|
|
|
|
|
<!-- <button
|
|
|
|
|
id="refreshRefinersBtn"
|
|
|
|
|
class="refiner"
|
|
|
|
|
onclick="getModels(true)">
|
|
|
|
|
<img
|
|
|
|
|
class="refreshbutton"
|
|
|
|
|
src="./res/icons/refresh-cw.svg?v=f627140"
|
|
|
|
|
alt="refresh refiner models"
|
|
|
|
|
title="refresh refiner models" />
|
|
|
|
|
</button> -->
|
2023-08-26 06:23:47 -05:00
|
|
|
<div id="refinerSwitchAt" class="refiner"></div>
|
2022-12-03 06:53:12 -06:00
|
|
|
<input type="checkbox" id="cbxHRFix" onchange="changeHiResFix()" />
|
2023-01-05 17:42:50 -06:00
|
|
|
<label for="cbxHRFix">Apply Txt2Img HRfix</label>
|
2022-12-12 18:25:02 -06:00
|
|
|
<br />
|
2023-01-04 20:00:51 -06:00
|
|
|
<input
|
2023-01-04 23:27:02 -06:00
|
|
|
type="checkbox"
|
|
|
|
|
id="cbxHRFSquare"
|
|
|
|
|
onchange="changeHiResSquare()"
|
|
|
|
|
class="hrfix" />
|
2023-01-05 17:42:50 -06:00
|
|
|
<label for="cbxHRFSquare" class="hrfix">
|
|
|
|
|
Square Firstpass Aspect
|
|
|
|
|
</label>
|
2023-01-04 23:27:02 -06:00
|
|
|
<br class="hrfix" />
|
2023-01-04 18:00:17 -06:00
|
|
|
<div id="hrFixScale" class="hrfix"></div>
|
|
|
|
|
<div id="hrFixLockPx" class="hrfix"></div>
|
2023-01-04 20:00:51 -06:00
|
|
|
<div id="hrFixSteps" class="hrfix"></div>
|
2023-01-04 18:00:17 -06:00
|
|
|
<label id="hrFixLabel" class="hrfix">Choose HRfix upscaler</label>
|
|
|
|
|
<div id="hrFixUpscaler" class="hrfix"></div>
|
|
|
|
|
<div id="hrDenoising" class="hrfix"></div>
|
2024-02-21 14:40:02 -06:00
|
|
|
<!-- <input
|
2022-12-28 21:37:18 -06:00
|
|
|
type="checkbox"
|
|
|
|
|
id="cbxRestoreFaces"
|
|
|
|
|
onchange="changeRestoreFaces()" />
|
|
|
|
|
<label for="cbxRestoreFaces">Restore Faces</label>
|
2024-02-21 14:40:02 -06:00
|
|
|
<br /> -->
|
2022-12-12 18:25:02 -06:00
|
|
|
<input
|
|
|
|
|
type="checkbox"
|
|
|
|
|
id="cbxSyncCursorSize"
|
|
|
|
|
onchange="changeSyncCursorSize()" />
|
|
|
|
|
<label for="cbxSyncCursorSize">Sync cursor size</label>
|
|
|
|
|
<br />
|
2022-12-03 06:53:12 -06:00
|
|
|
<div id="resolution"></div>
|
2022-11-29 20:08:43 -06:00
|
|
|
<div id="steps"></div>
|
|
|
|
|
<div id="cfgScale"></div>
|
|
|
|
|
<div id="batchSize"></div>
|
|
|
|
|
<div id="batchCount"></div>
|
2023-01-02 13:50:28 -06:00
|
|
|
<label for="maskBlur">Mask blur:</label>
|
|
|
|
|
<span id="maskBlurText"></span>
|
|
|
|
|
<br />
|
|
|
|
|
<input
|
|
|
|
|
type="number"
|
|
|
|
|
id="maskBlur"
|
|
|
|
|
name="maskBlur"
|
|
|
|
|
min="0"
|
|
|
|
|
max="256"
|
|
|
|
|
value="0"
|
|
|
|
|
step="1"
|
|
|
|
|
onchange="changeMaskBlur()" />
|
2022-11-29 20:08:43 -06:00
|
|
|
</div>
|
2023-07-08 10:49:56 -05:00
|
|
|
<!-- Extensions section -->
|
|
|
|
|
<button type="button" class="collapsible">Extensions</button>
|
|
|
|
|
<div class="content">
|
2023-07-08 12:54:17 -05:00
|
|
|
<input
|
2023-07-08 10:49:56 -05:00
|
|
|
type="checkbox"
|
|
|
|
|
id="cbxDynPrompts"
|
|
|
|
|
onchange="changeDynamicPromptsExtension()"
|
|
|
|
|
disabled="disabled" />
|
|
|
|
|
<label for="cbxDynPrompts">Dynamic Prompts</label>
|
2023-07-08 12:54:17 -05:00
|
|
|
<br />
|
2023-07-08 10:49:56 -05:00
|
|
|
<input
|
|
|
|
|
type="checkbox"
|
|
|
|
|
id="cbxControlNet"
|
|
|
|
|
onchange="changeControlNetExtension()"
|
|
|
|
|
disabled="disabled" />
|
|
|
|
|
<label for="cbxControlNet">ControlNet In/Outpainting</label>
|
2023-07-15 12:10:45 -05:00
|
|
|
<br class="controlNetElement" />
|
|
|
|
|
<label id="cnModuleLabel" class="controlNetElement">
|
|
|
|
|
Inpaint Preprocessor
|
2023-07-08 12:54:17 -05:00
|
|
|
</label>
|
2023-07-15 12:10:45 -05:00
|
|
|
<div id="controlNetModule-ac-select" class="controlNetElement"></div>
|
|
|
|
|
<label id="cnModelLabel" class="controlNetElement">Model</label>
|
|
|
|
|
<div id="controlNetModel-ac-select" class="controlNetElement"></div>
|
|
|
|
|
<label id="cnControlLabel" class="controlNetElement">
|
|
|
|
|
Inpaint Mode
|
2023-07-08 10:49:56 -05:00
|
|
|
</label>
|
2023-07-15 12:10:45 -05:00
|
|
|
<select id="controlNetMode-select" class="controlNetElement">
|
2023-07-08 17:45:47 -05:00
|
|
|
<option value="Balanced">balanced</option>
|
|
|
|
|
<option value="My prompt is more important">+prompt</option>
|
|
|
|
|
<option value="ControlNet is more important">+CN</option>
|
|
|
|
|
</select>
|
2023-07-15 12:10:45 -05:00
|
|
|
<br class="controlNetElement" />
|
|
|
|
|
<label id="cnResizeLabel" class="controlNetElement">
|
2023-07-08 17:45:47 -05:00
|
|
|
Resize Mode
|
|
|
|
|
</label>
|
2023-07-15 12:10:45 -05:00
|
|
|
<select id="controlNetResize-select" class="controlNetElement">
|
2023-07-08 17:45:47 -05:00
|
|
|
<option value="Just Resize">resize</option>
|
|
|
|
|
<option value="Crop and Resize">+crop</option>
|
|
|
|
|
<option value="Resize and Fill">+fill</option>
|
2023-07-08 12:54:17 -05:00
|
|
|
</select>
|
2023-07-15 12:10:45 -05:00
|
|
|
<br class="controlNetElement" />
|
|
|
|
|
<input
|
|
|
|
|
type="checkbox"
|
|
|
|
|
id="cbxControlNetReferenceLayer"
|
|
|
|
|
onchange="changeControlNetReference()"
|
|
|
|
|
class="controlNetElement" />
|
|
|
|
|
<label for="cbxControlNetReferenceLayer" class="controlNetElement">
|
|
|
|
|
Reference as 1st CN Unit
|
|
|
|
|
</label>
|
|
|
|
|
<br class="controlNetReferenceElement" />
|
|
|
|
|
<label id="cnReferenceModuleLabel" class="controlNetReferenceElement">
|
|
|
|
|
Reference Preprocessor
|
|
|
|
|
</label>
|
|
|
|
|
<div
|
|
|
|
|
id="controlNetReferenceModule-ac-select"
|
|
|
|
|
class="controlNetReferenceElement"></div>
|
|
|
|
|
<div
|
|
|
|
|
id="controlNetReferenceFidelity"
|
|
|
|
|
class="controlNetReferenceElement"></div>
|
|
|
|
|
<label id="cnResizeLabel" class="controlNetReferenceElement">
|
|
|
|
|
Reference Mode
|
|
|
|
|
</label>
|
|
|
|
|
<select
|
|
|
|
|
id="controlNetReferenceMode-select"
|
|
|
|
|
class="controlNetReferenceElement">
|
|
|
|
|
<option value="Balanced">balanced</option>
|
|
|
|
|
<option value="My prompt is more important">+prompt</option>
|
|
|
|
|
<option value="ControlNet is more important">+CN</option>
|
|
|
|
|
</select>
|
2023-07-08 10:49:56 -05:00
|
|
|
</div>
|
2022-11-29 20:08:43 -06:00
|
|
|
<!-- Save/load image section -->
|
|
|
|
|
<button type="button" class="collapsible">Save/Upscaling</button>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<button onclick="downloadCanvas()">Save canvas</button>
|
|
|
|
|
<br />
|
2022-12-08 15:23:17 -06:00
|
|
|
<label>Choose upscaler</label>
|
|
|
|
|
<div id="upscaler-ac-select"></div>
|
2022-12-06 21:30:00 -06:00
|
|
|
<div id="upscaleX"></div>
|
2024-01-04 07:36:59 -06:00
|
|
|
<button onclick="upscaleAndDownload(true,false)">
|
|
|
|
|
Upscale (and download)
|
|
|
|
|
</button>
|
|
|
|
|
<button onclick="upscaleAndDownload(false,true)">
|
|
|
|
|
Upscale (to resource)
|
2022-11-29 20:08:43 -06:00
|
|
|
</button>
|
|
|
|
|
<br />
|
|
|
|
|
|
|
|
|
|
<button onclick="newImage()">Clear canvas</button>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- Debug info -->
|
|
|
|
|
<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 />
|
|
|
|
|
<label for="heldButton">Mouse button:</label>
|
|
|
|
|
<span id="heldButton"></span>
|
|
|
|
|
<br />
|
2022-12-01 20:31:49 -06:00
|
|
|
<button id="resetToDefaults" onclick="resetToDefaults()">
|
|
|
|
|
Reset to defaults
|
|
|
|
|
</button>
|
2022-12-24 08:56:30 -06:00
|
|
|
<button id="toggleDebugBtn" onclick="global.toggledebug()">
|
|
|
|
|
Toggle Debug
|
|
|
|
|
</button>
|
2022-12-01 20:31:49 -06:00
|
|
|
<br />
|
2022-11-29 20:08:43 -06:00
|
|
|
<span id="version">
|
|
|
|
|
<a href="https://github.com/zero01101/openOutpaint" target="_blank">
|
2024-02-21 08:18:28 -06:00
|
|
|
v202402-03xx.00x TODO CHANGEME
|
2022-11-29 20:08:43 -06:00
|
|
|
</a>
|
2023-01-06 14:16:51 -06:00
|
|
|
<br />
|
|
|
|
|
<a
|
|
|
|
|
href="https://github.com/zero01101/openOutpaint/wiki/Manual"
|
|
|
|
|
target="_blank">
|
|
|
|
|
User Manual
|
|
|
|
|
</a>
|
2022-11-29 20:08:43 -06:00
|
|
|
</span>
|
|
|
|
|
<br />
|
|
|
|
|
<!-- <hr /> -->
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex; align-items: center">
|
|
|
|
|
<div
|
|
|
|
|
style="
|
|
|
|
|
flex: 1;
|
|
|
|
|
border-top: 1px black solid;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
"></div>
|
|
|
|
|
Context Menu
|
|
|
|
|
<div
|
|
|
|
|
style="
|
|
|
|
|
flex: 1;
|
|
|
|
|
border-top: 1px black solid;
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="tool-context" class="context-menu"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- History -->
|
|
|
|
|
<div id="ui-history" class="floating-window" style="right: 10px; top: 10px">
|
2023-01-24 20:37:38 -06:00
|
|
|
<div class="draggable floating-window-title">
|
|
|
|
|
History
|
|
|
|
|
<div style="flex: 1"></div>
|
2023-01-26 18:35:33 -06:00
|
|
|
<button
|
|
|
|
|
id="history-logs-btn"
|
|
|
|
|
class="ui icon header-button"
|
|
|
|
|
title="Generate History Log">
|
2023-01-24 20:37:38 -06:00
|
|
|
<div class="icon-scroll"></div>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
2022-11-29 20:08:43 -06:00
|
|
|
<div class="menu-container" style="min-width: 200px">
|
|
|
|
|
<div id="history" class="history"></div>
|
|
|
|
|
<div class="button-array" style="padding: 10px">
|
|
|
|
|
<button type="button" onclick="commands.undo()" class="button tool">
|
|
|
|
|
undo
|
|
|
|
|
</button>
|
|
|
|
|
<button type="button" onclick="commands.redo()" class="button tool">
|
|
|
|
|
redo
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2022-12-04 05:00:39 -06:00
|
|
|
<!-- Layers -->
|
|
|
|
|
<div
|
|
|
|
|
id="ui-layers"
|
|
|
|
|
class="floating-window"
|
|
|
|
|
style="right: 10px; bottom: 10px">
|
2023-04-05 17:02:28 -05:00
|
|
|
<div class="draggable floating-window-title">
|
|
|
|
|
Layers
|
|
|
|
|
<div style="flex: 1"></div>
|
|
|
|
|
<button
|
|
|
|
|
id="unzoom-btn"
|
|
|
|
|
class="ui icon header-button"
|
|
|
|
|
title="Reset Zoom to 1x"
|
|
|
|
|
onclick="unzoom()">
|
|
|
|
|
<div class="icon-unzoom"></div>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
2022-12-04 05:00:39 -06:00
|
|
|
<div class="menu-container" style="min-width: 200px">
|
2022-12-04 13:22:35 -06:00
|
|
|
<div class="layer-manager">
|
|
|
|
|
<div id="layer-list" class="layer-list"></div>
|
|
|
|
|
<div class="ui separator"></div>
|
|
|
|
|
<div class="layer-list-actions">
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
title="Add Layer"
|
2023-01-23 16:24:50 -06:00
|
|
|
onclick="commands.runCommand('addLayer', 'Added Layer', {})"
|
2022-12-04 13:22:35 -06:00
|
|
|
class="ui icon button">
|
|
|
|
|
<div class="icon-file-plus"></div>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
title="Move Layer Up"
|
2022-12-05 20:22:19 -06:00
|
|
|
onclick="commands.runCommand('moveLayer', 'Moved Layer Up',{delta: 1})"
|
2022-12-04 13:22:35 -06:00
|
|
|
class="ui icon button">
|
|
|
|
|
<div class="icon-chevron-up"></div>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
title="Move Layer Down"
|
2022-12-05 20:22:19 -06:00
|
|
|
onclick="commands.runCommand('moveLayer', 'Moved Layer Down', {delta: -1})"
|
2022-12-04 13:22:35 -06:00
|
|
|
class="ui icon button">
|
|
|
|
|
<div class="icon-chevron-down"></div>
|
|
|
|
|
</button>
|
2022-12-05 20:22:19 -06:00
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
title="Merge Layer Down"
|
|
|
|
|
onclick="commands.runCommand('mergeLayer', 'Merged Layer Down')"
|
|
|
|
|
class="ui icon button">
|
|
|
|
|
<div class="icon-chevron-flat-down"></div>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
2022-12-06 18:05:43 -06:00
|
|
|
title="Delete Layer"
|
2022-12-05 20:22:19 -06:00
|
|
|
onclick="commands.runCommand('deleteLayer', 'Deleted Layer')"
|
|
|
|
|
class="ui icon button">
|
|
|
|
|
<div class="icon-file-x"></div>
|
|
|
|
|
</button>
|
2022-12-04 13:22:35 -06:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2022-12-04 05:00:39 -06:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2023-01-22 13:29:24 -06:00
|
|
|
<!-- Scripts-->
|
2023-01-20 18:53:16 -06:00
|
|
|
<div
|
|
|
|
|
id="ui-script"
|
|
|
|
|
class="floating-window"
|
2023-04-05 17:02:28 -05:00
|
|
|
style="right: 10px; top: 330px; display: none">
|
2023-01-22 13:29:24 -06:00
|
|
|
<div class="draggable floating-window-title">Script</div>
|
2023-01-20 12:27:34 -06:00
|
|
|
<div class="menu-container" style="min-width: 200px">
|
2023-01-22 13:29:24 -06:00
|
|
|
<div id="script-select" class="script-select">
|
|
|
|
|
<select id="script-selector" onchange="changeScript(event)">
|
2023-02-19 09:49:48 -06:00
|
|
|
<!-- <option id="no_selected_script" value="">Select a script...</option>
|
|
|
|
|
<option id="custom" value="custom">Custom</option> -->
|
2023-01-22 13:29:24 -06:00
|
|
|
</select>
|
2023-02-25 07:30:52 -06:00
|
|
|
<!-- <button
|
2023-02-19 09:49:48 -06:00
|
|
|
id="save-custom-script"
|
|
|
|
|
disabled="disabled"
|
|
|
|
|
title="Save custom script"
|
|
|
|
|
onclick="saveCustomScript()">
|
|
|
|
|
<image src="./res/icons/save.svg" width="60%"></image>
|
2023-02-25 07:30:52 -06:00
|
|
|
</button> -->
|
2023-01-22 13:29:24 -06:00
|
|
|
</div>
|
2023-01-20 12:27:34 -06:00
|
|
|
<div id="script-name" class="script-name">
|
2023-03-10 16:15:57 -06:00
|
|
|
<label for="script-name-input">Script Name:</label>
|
2023-01-20 12:27:34 -06:00
|
|
|
<br />
|
2023-02-25 07:30:52 -06:00
|
|
|
<input
|
|
|
|
|
id="script-name-input"
|
|
|
|
|
disabled="disabled"
|
|
|
|
|
onfocusout="storeUserscriptVal(event, 'name')" />
|
2023-01-20 12:27:34 -06:00
|
|
|
<br />
|
|
|
|
|
</div>
|
2023-01-20 18:53:16 -06:00
|
|
|
<div id="script-args" class="script-args">
|
|
|
|
|
<label for="script-args-input">Script Args List:</label>
|
2023-01-20 12:27:34 -06:00
|
|
|
<br />
|
2023-02-25 07:30:52 -06:00
|
|
|
<textarea
|
|
|
|
|
id="script-args-input"
|
|
|
|
|
onfocusout="storeUserscriptVal(event, 'args')"></textarea>
|
2023-01-20 12:27:34 -06:00
|
|
|
<br />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2022-11-29 20:08:43 -06:00
|
|
|
<!-- Toolbar -->
|
|
|
|
|
<div
|
|
|
|
|
id="ui-toolbar"
|
|
|
|
|
class="floating-window toolbar"
|
2022-12-04 05:00:39 -06:00
|
|
|
style="right: 270px; top: 10px">
|
2022-11-29 20:08:43 -06:00
|
|
|
<div class="draggable handle">
|
|
|
|
|
<span class="line"></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="lock-indicator" id="toolbar-lock-indicator"></div>
|
|
|
|
|
<div class="toolbar-section"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Canvases -->
|
2022-11-29 20:54:09 -06:00
|
|
|
<div id="layer-render" class="layer-render-target"></div>
|
2022-11-29 20:08:43 -06:00
|
|
|
|
2022-12-04 13:22:35 -06:00
|
|
|
<!-- Overlay -->
|
2023-01-08 15:21:08 -06:00
|
|
|
<canvas id="layer-overlay" class="overlay-canvas"></canvas>
|
|
|
|
|
<canvas id="layer-debug-overlay" class="overlay-canvas"></canvas>
|
2022-12-04 13:22:35 -06:00
|
|
|
|
2022-12-07 21:26:37 -06:00
|
|
|
<!-- 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>
|
2023-01-02 00:49:02 -06:00
|
|
|
<iframe
|
|
|
|
|
id="page-overlay"
|
2023-01-20 18:04:40 -06:00
|
|
|
src="pages/configuration.html?v=fdbd833"></iframe>
|
2022-12-07 21:26:37 -06:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2022-12-27 15:08:06 -06:00
|
|
|
<!-- Basics -->
|
2023-01-16 21:03:43 -06:00
|
|
|
<script src="js/global.js?v=ac30d16" type="text/javascript"></script>
|
2023-01-07 06:46:33 -06:00
|
|
|
<script src="js/defaults.js?v=5b06818" type="text/javascript"></script>
|
2024-02-21 14:40:02 -06:00
|
|
|
<script src="js/extensions.js?v=5102854" type="text/javascript"></script>
|
2022-12-27 15:05:09 -06:00
|
|
|
|
2022-11-29 20:08:43 -06:00
|
|
|
<!-- Base Libs -->
|
2023-02-18 12:00:10 -06:00
|
|
|
<script src="js/lib/util.js?v=379aef7" type="text/javascript"></script>
|
2023-02-14 21:04:01 -06:00
|
|
|
<script
|
2023-02-25 20:24:57 -06:00
|
|
|
src="js/lib/notifications.js?v=270db88"
|
2023-02-14 21:04:01 -06:00
|
|
|
type="text/javascript"></script>
|
2022-12-28 19:52:14 -06:00
|
|
|
<script src="js/lib/events.js?v=2ab7933" type="text/javascript"></script>
|
2023-01-26 22:43:07 -06:00
|
|
|
<script src="js/lib/db.js?v=434363b" type="text/javascript"></script>
|
2023-01-21 10:06:21 -06:00
|
|
|
<script src="js/lib/input.js?v=769485c" type="text/javascript"></script>
|
2023-02-18 12:56:06 -06:00
|
|
|
<script src="js/lib/layers.js?v=26b7436" type="text/javascript"></script>
|
2023-01-26 22:43:07 -06:00
|
|
|
<script src="js/lib/commands.js?v=ad60afc" type="text/javascript"></script>
|
2022-11-29 20:54:09 -06:00
|
|
|
|
2023-02-19 09:41:46 -06:00
|
|
|
<script src="js/lib/toolbar.js?v=4fcf718" type="text/javascript"></script>
|
2023-01-26 22:43:07 -06:00
|
|
|
<script src="js/lib/ui.js?v=17014b3" type="text/javascript"></script>
|
2022-11-29 20:54:09 -06:00
|
|
|
|
|
|
|
|
<script
|
2023-01-22 06:18:47 -06:00
|
|
|
src="js/initalize/layers.populate.js?v=066dc8e"
|
2022-11-29 20:54:09 -06:00
|
|
|
type="text/javascript"></script>
|
|
|
|
|
|
2022-12-27 15:08:06 -06:00
|
|
|
<!-- Configuration -->
|
2023-02-25 20:24:57 -06:00
|
|
|
<script src="js/config.js?v=9747005" type="text/javascript"></script>
|
2023-01-18 17:55:04 -06:00
|
|
|
<script src="js/theme.js?v=435cc1b" type="text/javascript"></script>
|
2022-12-27 15:08:06 -06:00
|
|
|
|
2022-11-29 20:08:43 -06:00
|
|
|
<!-- Content -->
|
2022-12-28 19:52:14 -06:00
|
|
|
<script src="js/prompt.js?v=7a1c68c" type="text/javascript"></script>
|
2024-02-21 14:40:02 -06:00
|
|
|
<script src="js/index.js?v=206c7df" type="text/javascript"></script>
|
2022-12-12 15:25:32 -06:00
|
|
|
|
2022-12-28 19:56:54 -06:00
|
|
|
<script
|
2023-01-26 22:43:07 -06:00
|
|
|
src="js/ui/floating/history.js?v=4f29db4"
|
2022-12-28 19:56:54 -06:00
|
|
|
type="text/javascript"></script>
|
|
|
|
|
<script
|
2023-04-05 17:02:28 -05:00
|
|
|
src="js/ui/floating/layers.js?v=3f5807f"
|
2022-12-28 19:56:54 -06:00
|
|
|
type="text/javascript"></script>
|
2022-11-29 20:08:43 -06:00
|
|
|
|
|
|
|
|
<!-- Load Tools -->
|
2022-12-28 19:56:54 -06:00
|
|
|
<script
|
2023-01-12 20:41:01 -06:00
|
|
|
src="js/ui/tool/generic.js?v=3e678e0"
|
2022-12-28 19:56:54 -06:00
|
|
|
type="text/javascript"></script>
|
2022-12-15 06:43:26 -06:00
|
|
|
|
2024-02-21 17:19:43 -06:00
|
|
|
<script src="js/ui/tool/dream.js?v=1f6f185" type="text/javascript"></script>
|
2022-12-28 19:56:54 -06:00
|
|
|
<script
|
2023-02-19 09:41:46 -06:00
|
|
|
src="js/ui/tool/maskbrush.js?v=e9bd0eb"
|
2022-12-28 19:56:54 -06:00
|
|
|
type="text/javascript"></script>
|
|
|
|
|
<script
|
2023-02-25 09:06:50 -06:00
|
|
|
src="js/ui/tool/colorbrush.js?v=84ff9fa"
|
2022-12-28 19:56:54 -06:00
|
|
|
type="text/javascript"></script>
|
|
|
|
|
<script
|
2023-12-16 06:28:35 -06:00
|
|
|
src="js/ui/tool/select.js?v=76df58e"
|
2022-12-28 19:56:54 -06:00
|
|
|
type="text/javascript"></script>
|
2024-02-20 07:14:36 -06:00
|
|
|
<script src="js/ui/tool/stamp.js?v=fdca5bc" type="text/javascript"></script>
|
2022-12-28 19:56:54 -06:00
|
|
|
<script
|
2023-02-25 20:24:57 -06:00
|
|
|
src="js/ui/tool/interrogate.js?v=dd45b4a"
|
2022-12-28 19:56:54 -06:00
|
|
|
type="text/javascript"></script>
|
2022-11-29 20:08:43 -06:00
|
|
|
|
2022-11-29 20:54:09 -06:00
|
|
|
<!-- Initialize -->
|
2023-01-26 22:39:08 -06:00
|
|
|
<script
|
2023-07-09 08:37:07 -05:00
|
|
|
src="js/initalize/workspace.populate.js?v=925431d"
|
2023-01-26 22:39:08 -06:00
|
|
|
type="text/javascript"></script>
|
2022-12-01 15:10:30 -06:00
|
|
|
<script
|
2023-08-31 07:55:12 -05:00
|
|
|
src="js/initalize/shortcuts.populate.js?v=98e7502"
|
2022-12-01 15:10:30 -06:00
|
|
|
type="text/javascript"></script>
|
2022-11-29 20:54:09 -06:00
|
|
|
<script
|
2022-12-28 19:52:14 -06:00
|
|
|
src="js/initalize/toolbar.populate.js?v=c1ca438"
|
2022-11-29 20:54:09 -06:00
|
|
|
type="text/javascript"></script>
|
|
|
|
|
<script
|
2023-01-12 20:03:15 -06:00
|
|
|
src="js/initalize/debug.populate.js?v=64ad17f"
|
2022-11-29 20:54:09 -06:00
|
|
|
type="text/javascript"></script>
|
2022-12-28 19:56:54 -06:00
|
|
|
<script
|
|
|
|
|
src="js/initalize/ui.populate.js?v=b59b288"
|
|
|
|
|
type="text/javascript"></script>
|
2022-12-19 06:30:39 -06:00
|
|
|
|
|
|
|
|
<!-- Deals with webui communication -->
|
2023-02-14 21:44:10 -06:00
|
|
|
<script src="js/webui.js?v=ccd423a" type="text/javascript"></script>
|
2022-11-29 20:08:43 -06:00
|
|
|
</body>
|
|
|
|
|
</html>
|
