Skip to content

Commit 4a1cc47

Browse files
kalwaltkalwalt
committed
improves in the javascript code and html
1 parent 32fe5e4 commit 4a1cc47

2 files changed

Lines changed: 65 additions & 64 deletions

File tree

‎tools/NFT_Marker_Creator/index.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,17 @@ <h2 class="title has-text-centered" id="title" href="#confidenceLevel">NFT Marke
2626
<div id="confidenceLevel" class="section columns">
2727
<p class="subtitle column is-3">Confidence: </p>
2828
<div class="content column is-4">
29-
<img class="icon is-small confidenceEl" src="./icons/star2.svg"></img>
30-
<img class="icon is-small confidenceEl" src="./icons/star2.svg"></img>
31-
<img class="icon is-small confidenceEl" src="./icons/star2.svg"></img>
32-
<img class="icon is-small confidenceEl" src="./icons/star2.svg"></img>
33-
<img class="icon is-small confidenceEl" src="./icons/star2.svg"></img>
29+
<img class="icon is-small confidenceEl" src="./icons/star2.svg" alt="">
30+
<img class="icon is-small confidenceEl" src="./icons/star2.svg" alt="">
31+
<img class="icon is-small confidenceEl" src="./icons/star2.svg" alt="">
32+
<img class="icon is-small confidenceEl" src="./icons/star2.svg" alt="">
33+
<img class="icon is-small confidenceEl" src="./icons/star2.svg" alt="">
3434
</div>
3535
</div>
3636
<p id="warning"><span style="color: red">Warning:</span>
3737
Images with width and/or height above 1000px might take 20min+ to generate.<br>
3838
For a more efficient Marker generator, please use the Node script version:
39-
<a href="https://github.com/webarkit/NFT-Marker-Creator">https://github.com/webarkit/NFT-Marker-Creator</a><br>
39+
<a href="https://github.com/webarkit/Nft-Marker-Creator-App">https://github.com/webarkit/Nft-Marker-Creator-App</a><br>
4040
</p>
4141

4242
</div>
@@ -48,11 +48,11 @@ <h2 class="title has-text-centered" id="title" href="#confidenceLevel">NFT Marke
4848
<div id="modalBody">
4949
<p id="modalTitle">No "Number of Channels" found!</p>
5050
<p id="modalTxt">Inform the number of channels(nc):<br>(black and white images have NC=1, colored images have NC=3)</p>
51-
<input id="modalInput" type="number" value="3">
51+
<label for="modalInput">Number of Channels:</label><input id="modalInput" type="number" value="3">
5252
<button id="cancelBt" class="button" onclick="closeModal()">Cancel</button>
5353
<button id="confirmBt" class="button" onclick="window.setValueFromModal()">Confirm</button>
5454
</div>
5555
</div>
5656

5757
<script src="exif.js"></script>
58-
<script type="module" src="index.js"></script>
58+
<script type="module" src="index.js"></script>

‎tools/NFT_Marker_Creator/index.js‎

Lines changed: 57 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -2,63 +2,66 @@ import NftMC from './wasm/NftMarkerCreator_ES6_wasm.js'
22

33
const nftMC = await NftMC();
44

5-
var imageLoader = document.getElementById('imageLoader');
5+
const imageLoader = document.getElementById('imageLoader');
66
imageLoader.addEventListener('change', handleImage, false);
7-
var canvas = document.getElementById('imageCanvas');
8-
var hideCanvas = document.getElementById('hideCanvas');
7+
8+
const canvas = document.getElementById('imageCanvas');
9+
const hideCanvas = document.getElementById('hideCanvas');
910
hideCanvas.style.display = "none";
10-
var ctx = canvas.getContext('2d');
11+
12+
const ctx = canvas.getContext('2d');
1113
ctx.fillStyle = "#949494";
1214
ctx.fillRect(0, 0, canvas.width, canvas.height);
13-
var ctxHide = hideCanvas.getContext('2d');
1415

15-
var reader = new FileReader();
16+
const ctxHide = hideCanvas.getContext('2d');
17+
18+
const reader = new FileReader();
1619

17-
var name;
18-
var nameWithExt;
20+
let name;
21+
let nameWithExt;
1922

20-
var globalObj = {
23+
const globalObj = {
2124
dpi: 0,
2225
nc: 0,
2326
w: 0,
2427
h: 0,
2528
arr: []
26-
}
29+
};
2730

2831
function handleImage(e) {
2932
nameWithExt = e.target.files[0].name;
3033
console.log("Image uploaded: " + nameWithExt);
3134

32-
name = nameWithExt.substr(0, nameWithExt.lastIndexOf('.'));
35+
name = nameWithExt.substring(0, nameWithExt.lastIndexOf('.'));
3336

34-
let extJpg = nameWithExt.substr(nameWithExt.lastIndexOf('.'));
37+
let extJpg = nameWithExt.substring(nameWithExt.lastIndexOf('.'));
3538

3639
let confidenceEl = document.getElementById("confidenceLevel");
3740
let childEls = confidenceEl.getElementsByClassName("confidenceEl");
3841
for(let i = 0; i < childEls.length; i++){
3942
childEls[i].src = "./icons/star2.svg";
4043
}
4144

42-
if (extJpg == '.jpg' || extJpg == '.jpeg' || extJpg == '.JPG' || extJpg == '.JPEG') {
45+
if (extJpg === '.jpg' || extJpg === '.jpeg' || extJpg === '.JPG' || extJpg === '.JPEG') {
4346
useJpeg(e);
44-
} else if (extJpg == '.png' || extJpg == '.PNG') {
47+
} else if (extJpg === '.png' || extJpg === '.PNG') {
4548
globalObj.dpi = 72;
4649
readImage(e)
4750
} else {
48-
console.log("Invalid image format!");
51+
console.error("Invalid image format!");
4952
}
5053

5154
document.getElementById("generateBt").disabled = false;
5255
}
5356

5457
function generate() {
55-
var imageCanvas = document.querySelector('#imageCanvas');
58+
const imageCanvas = document.querySelector('#imageCanvas');
5659
imageCanvas.style.opacity = 0.25;
5760

58-
var okSign = document.querySelector('.checkmark-cover');
61+
const okSign = document.querySelector('.checkmark-cover');
5962
okSign.style.display = 'none';
6063

61-
var spinner = document.querySelector('.spinner-container');
64+
const spinner = document.querySelector('.spinner-container');
6265
spinner.style.display = 'block';
6366

6467
setTimeout(() => {
@@ -86,48 +89,48 @@ function downloadIset() {
8689
let ext2 = ".fset";
8790
let ext3 = ".fset3";
8891

89-
let content = nftMC.FS.readFile(filenameIset, {flags: 'r+'});
90-
let contentFset = nftMC.FS.readFile(filenameFset, {flags: 'r+'});
91-
let contentFset3 = nftMC.FS.readFile(filenameFset3, {flags: 'r+'});
92+
let content = nftMC.FS.readFile(filenameIset);
93+
let contentFset = nftMC.FS.readFile(filenameFset);
94+
let contentFset3 = nftMC.FS.readFile(filenameFset3);
9295

93-
var a = document.createElement('a');
94-
a.download = name + ext;
95-
a.href = URL.createObjectURL(new Blob([content], { type: mime }));
96-
a.style.display = 'none';
96+
const isetFile = document.createElement('a');
97+
isetFile.download = name + ext;
98+
isetFile.href = URL.createObjectURL(new Blob([content], { type: mime }));
99+
isetFile.style.display = 'none';
97100

98-
var b = document.createElement('a');
99-
b.download = name + ext2;
100-
b.href = URL.createObjectURL(new Blob([contentFset], { type: mime }));
101-
b.style.display = 'none';
101+
const fsetFile = document.createElement('a');
102+
fsetFile.download = name + ext2;
103+
fsetFile.href = URL.createObjectURL(new Blob([contentFset], { type: mime }));
104+
fsetFile.style.display = 'none';
102105

103-
var c = document.createElement('a');
104-
c.download = name + ext3;
105-
c.href = URL.createObjectURL(new Blob([contentFset3], { type: mime }));
106-
c.style.display = 'none';
106+
const fset3File = document.createElement('a');
107+
fset3File.download = name + ext3;
108+
fset3File.href = URL.createObjectURL(new Blob([contentFset3], { type: mime }));
109+
fset3File.style.display = 'none';
107110

108-
document.body.appendChild(a);
109-
a.click();
111+
document.body.appendChild(isetFile);
112+
isetFile.click();
110113

111-
document.body.appendChild(b);
112-
b.click();
114+
document.body.appendChild(fsetFile);
115+
fsetFile.click();
113116

114-
document.body.appendChild(c);
115-
c.click();
117+
document.body.appendChild(fset3File);
118+
fset3File.click();
116119

117-
var spinner = document.querySelector('.spinner-container');
120+
const spinner = document.querySelector('.spinner-container');
118121
spinner.style.display = 'none';
119122

120-
var okSign = document.querySelector('.checkmark-cover');
123+
const okSign = document.querySelector('.checkmark-cover');
121124
okSign.style.display = 'block';
122125
}
123126

124127
function getUint8(str) {
125-
let base64 = str.substr(23, str.length);
126-
var raw = atob(base64);
127-
var rawLength = raw.length;
128-
var array = new Uint8Array(new ArrayBuffer(rawLength));
128+
const base64 = str.substring(23);
129+
const raw = atob(base64);
130+
const rawLength = raw.length;
131+
const array = new Uint8Array(new ArrayBuffer(rawLength));
129132

130-
for (i = 0; i < rawLength; i++) {
133+
for (let i = 0; i < rawLength; i++) {
131134
array[i] = raw.charCodeAt(i);
132135
}
133136

@@ -162,12 +165,12 @@ function detectColorSpace(arr) {
162165
let g = arr[j + 1];
163166
let b = arr[j + 2];
164167

165-
if (r == g && r == b) {
168+
if (r === g && r === b) {
166169
counter++;
167170
}
168171
}
169172

170-
if (target == counter) {
173+
if (target === counter) {
171174
return 1;
172175
} else {
173176
return 3;
@@ -184,10 +187,10 @@ function useJpeg(e) {
184187
globalObj.dpi = dpi1;
185188
}
186189

187-
var nc1 = EXIF.getTag(this, "ComponentsConfiguration")
190+
const nc1 = EXIF.getTag(this, "ComponentsConfiguration");
188191

189192
if (isNaN(nc1) || nc1 == null) {
190-
var nc2 = parseFloat(EXIF.getTag(this, "SamplesPerPixel"));
193+
const nc2 = parseFloat(EXIF.getTag(this, "SamplesPerPixel"));
191194
if (isNaN(nc2) || nc2 == null) {
192195
// openModal();
193196
} else {
@@ -222,17 +225,17 @@ function readImage(e) {
222225
ctx.drawImage(img, 0, 0, img.width, img.height, // source rectangle
223226
0, 0, canvas.width, canvas.height); // destination rectangle
224227

225-
var imgData = ctxHide.getImageData(0, 0, hideCanvas.width, hideCanvas.height);
228+
const imgData = ctxHide.getImageData(0, 0, hideCanvas.width, hideCanvas.height);
226229

227230
let newArr = [];
228231

229232
let verifyColorSpace = detectColorSpace(imgData.data);
230233

231-
if (verifyColorSpace == 1) {
234+
if (verifyColorSpace === 1) {
232235
for (let j = 0; j < imgData.data.length; j += 4) {
233236
newArr.push(imgData.data[j]);
234237
}
235-
} else if (verifyColorSpace == 3) {
238+
} else if (verifyColorSpace === 3) {
236239
for (let j = 0; j < imgData.data.length; j += 4) {
237240
newArr.push(imgData.data[j]);
238241
newArr.push(imgData.data[j + 1]);
@@ -242,9 +245,7 @@ function readImage(e) {
242245

243246
globalObj.nc = verifyColorSpace;
244247

245-
let uint = new Uint8Array(newArr);
246-
247-
globalObj.arr = uint;
248+
globalObj.arr = new Uint8Array(newArr);
248249

249250
let confidence = calculateQuality();
250251
let confidenceEl = document.getElementById("confidenceLevel");

0 commit comments

Comments
 (0)