Started tool tutorials

This commit is contained in:
Nicola 2022-01-25 00:33:23 +01:00
parent 33f362ef09
commit 2e360dcf51
11 changed files with 125 additions and 20 deletions

View File

@ -21,10 +21,12 @@ function copy_images(){
gulp.src('./images/*.ico').pipe(gulp.dest(BUILDDIR));
// Splash images
gulp.src('./images/Splash images/*.png').pipe(gulp.dest(BUILDDIR));
// Logs images
// Logs gifs
gulp.src('./images/Logs/*.gif').pipe(gulp.dest(BUILDDIR));
// Logs images
// Logs pngs
gulp.src('./images/Logs/*.png').pipe(gulp.dest(BUILDDIR));
// Tool tutorials
gulp.src('./images/ToolTutorials/*.gif').pipe(gulp.dest(BUILDDIR));
}
function copy_logs() {

View File

@ -69,7 +69,7 @@
/*app title*/
/* app title */
.logo {
color: lighten($basecolor, 20%);
@ -83,3 +83,46 @@
#main-menu li.open, #main-menu li button:hover {
background: $basehover;
}
/* Editor info */
li#editor-info {
float:right;
height:100%;
display:flex;
align-items: center;
background-color: $basecolor;
color:$basetext;
ul {
background-color: $basecolor;
display:block;
position:relative;
top:0px;
padding-top:0px;
box-shadow: none;
padding-bottom: 0px;
li {
top:0px;
padding-top:0px;
display:inline;
padding-right:20px;
}
input {
margin-left:10px;
background-color:$basehovertext;
box-shadow:none;
border:none;
vertical-align: middle;
border-radius:5px;
}
input[type=text] {
width:20px;
height:15px;
}
input[type=checkbox] {
width:15px;
height:15px;
}
}
}

View File

@ -3,6 +3,7 @@
#splash {
width:100% !important;
height:100%!important;
position:absolute;
background-color: #232125 !important;
opacity: 1 !important;

View File

@ -108,4 +108,29 @@
#tools-menu li:hover {
background: $basehover;
}
/* Tool tutorial */
#tool-tutorial {
display:inline-block;
position:absolute;
z-index:4000;
margin-left:48px;
margin-top:48px;
background-color: $basehover;
color:$basetext;
font-size:14px;
width:20%;
border-radius:0 5px 5px 5px;
img {
width:100%;
}
}
#tool-tutorial:after {
border-left: 11px solid #222;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
position: relative;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 580 KiB

View File

@ -24,6 +24,7 @@ class Tool {
biggerButton = undefined;
smallerButton = undefined;
brushPreview = document.getElementById("brush-preview");
toolTutorial = document.getElementById("tool-tutorial");
constructor (name, options) {
this.name = name;
@ -34,6 +35,22 @@ class Tool {
this.smallerButton = document.getElementById(name + "-smaller-button");
}
resetTutorial() {
this.toolTutorial.innerHTML = "<ul></ul>";
}
addTutorialKey(key, text) {
this.toolTutorial.children[0].append(
'<li><span class="keyboard-key">' + key + '</span> ' + text + '</li>');
}
addTutorialText(key, text) {
this.toolTutorial.children[0].append(
'<li>' + key + ': ' + text + '</li>');
}
addTutorialImg(imgPath) {
this.toolTutorial.children[0].append(
'<img src="' + imgPath + '"/>');
}
onSelect() {
if (this.mainButton != undefined)
this.mainButton.parentElement.classList.add("selected");

View File

@ -5,8 +5,9 @@ const TopMenuModule = (() => {
initMenu();
function initMenu() {
//for each button in main menu (starting at 1 to avoid logo)
for (let i = 1; i < mainMenuItems.length; i++) {
// for each button in main menu (starting at 1 to avoid logo), ending at length-1 to avoid
// editor info
for (let i = 1; i < mainMenuItems.length-1; i++) {
//get the button that's in the list item
const menuItem = mainMenuItems[i];

View File

@ -19,7 +19,7 @@ class MagicWandTool extends SelectionTool {
getSelection() {
let coords = [Math.floor(this.endMousePos[0]), Math.floor(this.endMousePos[1])];
let data = currFile.currentLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]).data;
let index = (coords[1] * currFile.canvasSize[1] + coords[0]) * 4;
let index = (coords[1] * currFile.canvasSize[0] + coords[0]) * 4;
let color = [data[index], data[index+1], data[index+2], data[index+3]];
let selectedData = new ImageData(currFile.canvasSize[0], currFile.canvasSize[1]);
@ -28,7 +28,7 @@ class MagicWandTool extends SelectionTool {
for (const pixel in this.currSelection) {
let coords = [parseInt(pixel.split(",")[0]), parseInt(pixel.split(",")[1])];
let index = (currFile.canvasSize[1] * coords[1] + coords[0]) * 4;
let index = (currFile.canvasSize[0] * coords[1] + coords[0]) * 4;
selectedData[index] = color[0];
selectedData[index+1] = color[1];

View File

@ -94,7 +94,7 @@ class SelectionTool extends Tool {
for (const key in this.currSelection) {
let x = parseInt(key.split(",")[0]);
let y = parseInt(key.split(",")[1]);
let index = (y * currFile.canvasSize[1] + x) * 4;
let index = (y * currFile.canvasSize[0] + x) * 4;
for (let i=0; i<4; i++) {
// Save the pixel

View File

@ -65,4 +65,11 @@
<li><button>Changelog</button></li>
</ul>
</li>
<li id="editor-info">
<ul>
<li><label><span>Tool size: </span><input type="text" width="10px"/></label></li>
<li><label><span>Continuous: </span><input type="checkbox"/></label></li>
</ul>
</li>
</ul>

View File

@ -1,6 +1,6 @@
<ul id="tools-menu">
<li class="selected expanded">
<button title="Brush Tool (B)" id="brush-button">{{svg "pencil.svg" width="24" height="24"}}</button>
<button id="brush-button">{{svg "pencil.svg" width="24" height="24"}}</button>
<ul class="size-buttons">
<button title="Increase Brush Size" id="brush-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
<button title="Decrease Brush Size" id="brush-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
@ -8,7 +8,7 @@
</li>
<li class = "expanded">
<button title="Eraser tool (R)" id="eraser-button">{{svg "eraser.svg" width="24" height="24"}}</button>
<button id="eraser-button">{{svg "eraser.svg" width="24" height="24"}}</button>
<ul class="size-buttons">
<button title="Increase Eraser Size" id="eraser-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
<button title="Decrease Eraser Size" id="eraser-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
@ -16,7 +16,7 @@
</li>
<li class="expanded">
<button title="Rectangle Tool (U)" id="rectangle-button">{{svg "rectangle.svg" width="24" height="24" id = "rectangle-empty-button-svg"}}
<button id="rectangle-button">{{svg "rectangle.svg" width="24" height="24" id = "rectangle-empty-button-svg"}}
{{svg "fullrect.svg" width="24" height="24" id = "rectangle-full-button-svg" display = "none"}}</button>
<ul class="size-buttons">
<button title="Increase Rectangle Size" id="rectangle-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
@ -25,7 +25,7 @@
</li>
<li class="expanded">
<button title="Ellipse Tool (S)" id="ellipse-button">
<button id="ellipse-button">
{{svg "ellipse.svg" width="24" height="24" id = "ellipse-empty-button-svg"}}
{{svg "filledellipse.svg" width="24" height="24" id = "ellipse-full-button-svg" display = "none"}}
</button>
@ -36,23 +36,32 @@
</li>
<li class="expanded">
<button title="Line Tool (L)" id="line-button">{{svg "line.svg" width="24" height="24"}}</button>
<button id="line-button">{{svg "line.svg" width="24" height="24"}}</button>
<ul class="size-buttons">
<button title="Increase Line Size" id="line-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
<button title="Decrease Line Size" id="line-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
</ul>
</li>
<li><button title="Fill Tool (F)" id="fill-button">{{svg "fill.svg" width="24" height="24"}}</button></li>
<li><button id="fill-button">{{svg "fill.svg" width="24" height="24"}}</button></li>
<li><button title = "Rectangular Selection Tool (M)" id = "rectselect-button">{{svg "rectselect.svg" width = "24" height = "24"}}</button><li>
<li><button id = "rectselect-button">{{svg "rectselect.svg" width = "24" height = "24"}}</button><li>
<li><button title = "Lasso Selection Tool (Q)" id = "lassoselect-button">{{svg "lasso.svg" width = "26" height = "26"}}</button></li>
<li><button id = "lassoselect-button">{{svg "lasso.svg" width = "26" height = "26"}}</button></li>
<li><button title = "Magic Wand Tool (W)" id = "magicwand-button">{{svg "magicwand.svg" width = "26" height = "26"}}</button></li>
<li><button id = "magicwand-button">{{svg "magicwand.svg" width = "26" height = "26"}}</button></li>
<li><button title="Eyedropper Tool (E)" id="eyedropper-button">{{svg "eyedropper.svg" width="24" height="24"}}</button></li>
<li><button id="eyedropper-button">{{svg "eyedropper.svg" width="24" height="24"}}</button></li>
<li><button title="Pan Tool (P)" id="pan-button">{{svg "pan.svg" width="24" height="24"}}</button></li>
<li><button id="pan-button">{{svg "pan.svg" width="24" height="24"}}</button></li>
</ul>
</ul>
<div id="tool-tutorial">
<ul>
<li><span class="keyboard-key">B</span> to select the tool</li>
<li><span class="keyboard-key">Left drag</span> to use the tool</li>
<li><span class="keyboard-key">Right drag</span> to change tool size</li>
<li><span class="keyboard-key">+</span> or <span class="keyboard-key">-</span> to change tool size</li>
</ul>
<img src="brush-tutorial.gif"/>
</div>"