1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
let g_viewOffset = 100
let g_data = new Uint8Array()
let g_viewWidth = 4
let g_viewHeight = 24
function toHexString(value) {
let hex = value.toString(16)
while (hex.length < 8) {
hex = "0" + hex;
}
return hex
}
function updateTextureView(textureView, data, viewOffset) {
if (viewOffset == undefined) {
viewOffset = 0
}
viewSize = g_viewWidth * g_viewHeight
endOffset = viewOffset + viewSize
textureView.textContent = '' // Clear
let textureViewBody = document.createElement('tbody')
textureView.appendChild(textureViewBody)
for (let offset = viewOffset; offset < endOffset; offset += g_viewWidth) {
let tr = document.createElement('tr')
let tdOffset = document.createElement('td')
let offsetText = document.createTextNode(toHexString(offset))
tdOffset.appendChild(offsetText)
tr.appendChild(tdOffset)
for (let i = 0; i < g_viewWidth; i++) {
if (offset + i >= data.length) {
break;
}
const value = data[offset + i]
const color1 = ((value & 0xf0) >> 4)
const color2 = ((value & 0x0f))
let td1 = document.createElement('td')
td1.classList.add('c1' + color1.toString(16))
td1.appendChild(document.createTextNode(color1.toString(16) + '.'))
tr.appendChild(td1)
let td2 = document.createElement('td')
td2.classList.add('c1' + color2.toString(16))
td2.appendChild(document.createTextNode(color2.toString(16) + '.'))
tr.appendChild(td2)
}
textureViewBody.appendChild(tr)
}
}
function viewMoveDown(step) {
g_viewOffset = Math.max(0, Math.min(g_data.length, g_viewOffset + step))
updateTextureView(document.querySelector('table#texture-view'), g_data, g_viewOffset)
}
function viewGoToOffset() {
g_viewOffset = parseInt(document.querySelector('input#offset').value, 16)
updateTextureView(document.querySelector('table#texture-view'), g_data, g_viewOffset)
}
document.querySelector('button#down').addEventListener('click', (event) => {
viewMoveDown(g_viewWidth)
})
document.querySelector('button#up').addEventListener('click', (event) => {
viewMoveDown(-g_viewWidth)
})
document.querySelector('button#go').addEventListener('click', (event) => {
viewGoToOffset()
})
document.querySelector('input#offset').addEventListener('change', (event) => {
viewGoToOffset()
})
addEventListener("keypress", (event) => {
if (event.altKey || event.ctrlKey) {
return
}
switch (event.code) {
case 'KeyJ':
viewMoveDown(g_viewWidth * (event.shiftKey ? g_viewHeight : 1))
break
case 'KeyK':
viewMoveDown(g_viewWidth * -(event.shiftKey ? g_viewHeight : 1))
break
case 'KeyL':
viewMoveDown((event.shiftKey ? g_viewWidth : 1))
break
case 'KeyH':
viewMoveDown(-(event.shiftKey ? g_viewWidth : 1))
break
}
});
document.querySelector('input#file').addEventListener('change', (event) => {
let files = event.target.files
if (files.length == 0) {
return
}
const file = files[0]
let reader = new FileReader()
reader.onload = (e) => {
let arrayBuffer = e.target.result
g_data = new Uint8Array(arrayBuffer)
updateTextureView(document.querySelector('table#texture-view'), g_data, g_viewOffset)
}
reader.onerror = (e) => alert(e.target.error.name)
reader.readAsArrayBuffer(file)
})
|
