Skip to content

Commit f120f48

Browse files
kalwaltkalwalt
committed
Merge branch 'dev'
2 parents efbed29 + a2afdd4 commit f120f48

6 files changed

+102
-119
lines changed

‎tools/NFT_Marker_Creator/index.html

+11-15
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@ <h2 class="title has-text-centered" id="title" href="#confidenceLevel">NFT Marke
1010
<div class="section">
1111
<input class="input is-hidden" type="file" id="imageLoader" name="imageLoader"/>
1212
<button class="button is-primary is-outlined is-fullwidth" id="uploadBt" onclick="document.getElementById('imageLoader').click();">Upload Image</button>
13-
<button class="button is-fullwidth" id="generateBt" onclick="generate()" disabled>Generate</button>
13+
<button class="button is-fullwidth" id="generateBt" onclick="window.generate()" disabled>Generate</button>
1414
</div>
1515
<div class="tile is-ancestor" id="wrapper">
16-
<canvas class="tile" id="imageCanvas" style="width: auto; height: 120rem"></canvas>
16+
<canvas class="tile" id="imageCanvas" ></canvas>
1717
<div class="spinner-container">
1818
<div class="spinner"></div>
1919
</div>
@@ -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,15 +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>
53-
<button id="confirmBt" class="button" onclick="setValueFromModal()">Confirm</button>
53+
<button id="confirmBt" class="button" onclick="window.setValueFromModal()">Confirm</button>
5454
</div>
5555
</div>
5656

5757
<script src="exif.js"></script>
58-
<script type='text/javascript'>
59-
var artoolkit_wasm_url = './wasm/NftMarkerCreator_wasm.wasm';
60-
</script>
61-
<script async type="text/javascript" src="./wasm/NftMarkerCreator_wasm.js"></script>
62-
<script src="index.js"></script>
58+
<script type="module" src="index.js"></script>

‎tools/NFT_Marker_Creator/index.js

+75-72
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,136 @@
1-
var imageLoader = document.getElementById('imageLoader');
1+
import NftMC from './wasm/NftMarkerCreator_ES6_wasm.js'
2+
3+
const nftMC = await NftMC();
4+
5+
const imageLoader = document.getElementById('imageLoader');
26
imageLoader.addEventListener('change', handleImage, false);
3-
var canvas = document.getElementById('imageCanvas');
4-
var hideCanvas = document.getElementById('hideCanvas');
7+
8+
const canvas = document.getElementById('imageCanvas');
9+
const hideCanvas = document.getElementById('hideCanvas');
510
hideCanvas.style.display = "none";
6-
var ctx = canvas.getContext('2d');
11+
12+
const ctx = canvas.getContext('2d');
713
ctx.fillStyle = "#949494";
814
ctx.fillRect(0, 0, canvas.width, canvas.height);
9-
var ctxHide = hideCanvas.getContext('2d');
1015

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

13-
var name;
14-
var nameWithExt;
20+
let name;
21+
let nameWithExt;
1522

16-
var globalObj = {
23+
const globalObj = {
1724
dpi: 0,
1825
nc: 0,
1926
w: 0,
2027
h: 0,
2128
arr: []
22-
}
29+
};
2330

2431
function handleImage(e) {
2532
nameWithExt = e.target.files[0].name;
2633
console.log("Image uploaded: " + nameWithExt);
2734

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

30-
let extJpg = nameWithExt.substr(nameWithExt.lastIndexOf('.'));
37+
let extJpg = nameWithExt.substring(nameWithExt.lastIndexOf('.'));
3138

3239
let confidenceEl = document.getElementById("confidenceLevel");
3340
let childEls = confidenceEl.getElementsByClassName("confidenceEl");
3441
for(let i = 0; i < childEls.length; i++){
3542
childEls[i].src = "./icons/star2.svg";
3643
}
3744

38-
if (extJpg == '.jpg' || extJpg == '.jpeg' || extJpg == '.JPG' || extJpg == '.JPEG') {
45+
if (extJpg === '.jpg' || extJpg === '.jpeg' || extJpg === '.JPG' || extJpg === '.JPEG') {
3946
useJpeg(e);
40-
} else if (extJpg == '.png' || extJpg == '.PNG') {
47+
} else if (extJpg === '.png' || extJpg === '.PNG') {
4148
globalObj.dpi = 72;
4249
readImage(e)
4350
} else {
44-
console.log("Invalid image format!");
51+
console.error("Invalid image format!");
4552
}
4653

4754
document.getElementById("generateBt").disabled = false;
4855
}
4956

5057
function generate() {
51-
var imageCanvas = document.querySelector('#imageCanvas');
58+
const imageCanvas = document.querySelector('#imageCanvas');
5259
imageCanvas.style.opacity = 0.25;
5360

54-
var okSign = document.querySelector('.checkmark-cover');
61+
const okSign = document.querySelector('.checkmark-cover');
5562
okSign.style.display = 'none';
5663

57-
var spinner = document.querySelector('.spinner-container');
64+
const spinner = document.querySelector('.spinner-container');
5865
spinner.style.display = 'block';
5966

6067
setTimeout(() => {
6168
let cmdArr = [0, name];
6269

6370
let paramStr = cmdArr.join(' ');
6471
console.log(paramStr)
65-
let StrBuffer = Module._malloc(paramStr.length + 1);
66-
Module.writeStringToMemory(paramStr, StrBuffer);
67-
68-
let heapSpace = Module._malloc(globalObj.arr.length * globalObj.arr.BYTES_PER_ELEMENT); // 1
69-
Module.HEAPU8.set(globalObj.arr, heapSpace); // 2
70-
71-
Module._createImageSet(heapSpace, globalObj.dpi, globalObj.w, globalObj.h, globalObj.nc, StrBuffer);
7272

73-
Module._free(heapSpace);
74-
Module._free(StrBuffer);
73+
nftMC.createNftDataSet(globalObj.arr, globalObj.dpi, globalObj.w, globalObj.h, globalObj.nc, paramStr);
7574

7675
downloadIset();
7776
}, 500);
7877
}
7978

79+
window.generate = generate;
80+
8081
function downloadIset() {
8182
let mime = "application/octet-stream";
8283

83-
let filenameIset = "asa.iset";
84-
let filenameFset = "asa.fset";
85-
let filenameFset3 = "asa.fset3";
84+
let filenameIset = "tempFilename.iset";
85+
let filenameFset = "tempFilename.fset";
86+
let filenameFset3 = "tempFilename.fset3";
8687

8788
let ext = ".iset";
8889
let ext2 = ".fset";
8990
let ext3 = ".fset3";
9091

91-
let content = Module.FS.readFile(filenameIset);
92-
let contentFset = Module.FS.readFile(filenameFset);
93-
let contentFset3 = Module.FS.readFile(filenameFset3);
92+
let content = nftMC.FS.readFile(filenameIset);
93+
let contentFset = nftMC.FS.readFile(filenameFset);
94+
let contentFset3 = nftMC.FS.readFile(filenameFset3);
9495

95-
var a = document.createElement('a');
96-
a.download = name + ext;
97-
a.href = URL.createObjectURL(new Blob([content], { type: mime }));
98-
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';
99100

100-
var b = document.createElement('a');
101-
b.download = name + ext2;
102-
b.href = URL.createObjectURL(new Blob([contentFset], { type: mime }));
103-
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';
104105

105-
var c = document.createElement('a');
106-
c.download = name + ext3;
107-
c.href = URL.createObjectURL(new Blob([contentFset3], { type: mime }));
108-
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';
109110

110-
document.body.appendChild(a);
111-
a.click();
111+
document.body.appendChild(isetFile);
112+
isetFile.click();
112113

113-
document.body.appendChild(b);
114-
b.click();
114+
document.body.appendChild(fsetFile);
115+
fsetFile.click();
115116

116-
document.body.appendChild(c);
117-
c.click();
117+
document.body.appendChild(fset3File);
118+
fset3File.click();
118119

119-
var spinner = document.querySelector('.spinner-container');
120+
const spinner = document.querySelector('.spinner-container');
120121
spinner.style.display = 'none';
121122

122-
var okSign = document.querySelector('.checkmark-cover');
123+
const okSign = document.querySelector('.checkmark-cover');
123124
okSign.style.display = 'block';
124125
}
125126

126127
function getUint8(str) {
127-
let base64 = str.substr(23, str.length);
128-
var raw = atob(base64);
129-
var rawLength = raw.length;
130-
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));
131132

132-
for (i = 0; i < rawLength; i++) {
133+
for (let i = 0; i < rawLength; i++) {
133134
array[i] = raw.charCodeAt(i);
134135
}
135136

@@ -152,6 +153,7 @@ function setValueFromModal() {
152153
globalObj.nc = parseInt(input);
153154
closeModal();
154155
}
156+
window.setValueFromModal = setValueFromModal;
155157

156158
function detectColorSpace(arr) {
157159
let target = parseInt(arr.length / 4);
@@ -163,12 +165,12 @@ function detectColorSpace(arr) {
163165
let g = arr[j + 1];
164166
let b = arr[j + 2];
165167

166-
if (r == g && r == b) {
168+
if (r === g && r === b) {
167169
counter++;
168170
}
169171
}
170172

171-
if (target == counter) {
173+
if (target === counter) {
172174
return 1;
173175
} else {
174176
return 3;
@@ -185,10 +187,10 @@ function useJpeg(e) {
185187
globalObj.dpi = dpi1;
186188
}
187189

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

190192
if (isNaN(nc1) || nc1 == null) {
191-
var nc2 = parseFloat(EXIF.getTag(this, "SamplesPerPixel"));
193+
const nc2 = parseFloat(EXIF.getTag(this, "SamplesPerPixel"));
192194
if (isNaN(nc2) || nc2 == null) {
193195
// openModal();
194196
} else {
@@ -206,11 +208,14 @@ function useJpeg(e) {
206208
function readImage(e) {
207209
reader.onload = function (event) {
208210

209-
var img = new Image();
211+
const img = new Image();
210212
img.onload = function () {
211-
var canvasEl = document.querySelector('#imageCanvas');
212-
canvas.width = canvasEl.clientWidth;
213-
canvas.height = canvasEl.clientHeight;
213+
canvas.width = img.width;
214+
canvas.height = img.height;
215+
216+
canvas.style.width = img.width > 1200 ? '1200px' : img.width + 'px';
217+
canvas.style.height = img.height > 1200 ? '1200px' : img.height + 'px';
218+
214219

215220
hideCanvas.width = img.width;
216221
hideCanvas.height = img.height;
@@ -223,17 +228,17 @@ function readImage(e) {
223228
ctx.drawImage(img, 0, 0, img.width, img.height, // source rectangle
224229
0, 0, canvas.width, canvas.height); // destination rectangle
225230

226-
var imgData = ctxHide.getImageData(0, 0, hideCanvas.width, hideCanvas.height);
231+
const imgData = ctxHide.getImageData(0, 0, hideCanvas.width, hideCanvas.height);
227232

228233
let newArr = [];
229234

230235
let verifyColorSpace = detectColorSpace(imgData.data);
231236

232-
if (verifyColorSpace == 1) {
237+
if (verifyColorSpace === 1) {
233238
for (let j = 0; j < imgData.data.length; j += 4) {
234239
newArr.push(imgData.data[j]);
235240
}
236-
} else if (verifyColorSpace == 3) {
241+
} else if (verifyColorSpace === 3) {
237242
for (let j = 0; j < imgData.data.length; j += 4) {
238243
newArr.push(imgData.data[j]);
239244
newArr.push(imgData.data[j + 1]);
@@ -243,9 +248,7 @@ function readImage(e) {
243248

244249
globalObj.nc = verifyColorSpace;
245250

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

250253
let confidence = calculateQuality();
251254
let confidenceEl = document.getElementById("confidenceLevel");

0 commit comments

Comments
 (0)