Epicpkmn11/nftr-editor
1
Fork 0
mirror of https://github.com/Epicpkmn11/nftr-editor.git synced 2025-06-18 13:55:35 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add setting background color/image for preview

Browse Source 
- Closes #1
- Partial for #2
This commit is contained in:
Pk11 2022-10-04 08:52:24 -05:00
parent ca702e476a
commit 95639581db
3 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/style.css
View File

@ -7,8 +7,8 @@ textarea {
background-color: var(--textarea-bg);
color: var(--textarea-color);
border: 1px solid gray;
width: 302px;
height: 152px;
width: 258px;
height: 194px;
resize: none;
}

8
index.html
View File

@ -46,7 +46,13 @@ show_version: true
<div class="col-sm-6">
<textarea id="input" onkeyup="updateBitmap()" placeholder="Type here"></textarea>
<br>
<canvas id="canvas"></canvas>
<canvas id="canvas" width="256" height="192"></canvas>
<br>
Background color:
<input class="btn btn-outline-secondary" id="bgColor" type="color" value="#FF00FF" onchange="setBg(this.value)">
<br>
Background image:
<input class="form-control" id="bgImage" placeholder="https://example.test/background.png" onchange="setBg(this.value)">
</div>
<div class="col-sm-6">
<h3>Palette colors:</h3>

12
js/nftr.js
View File

@ -1302,3 +1302,15 @@ function updateExtraKerning(event) {
updateBitmap();
}
function setBg(value) {
if(value[0] == "#") {
document.getElementById("canvas").style.backgroundColor = value;
document.getElementById("canvas").style.backgroundImage = "";
document.getElementById("bgColor").style.backgroundColor = value
} else {
document.getElementById("canvas").style.backgroundColor = "";
document.getElementById("canvas").style.backgroundImage = "url(" + value.replace(/[ ()]/g, r => "%" + r.charCodeAt(0).toString(16)) + ")";
document.getElementById("bgColor").style.backgroundColor = ""
}
}