Skip to content

Commit 3d7db30

Browse files
tsl0922tsl0922
committed
update html
1 parent d3b28d0 commit 3d7db30

File tree

3 files changed

+130
-147
lines changed

3 files changed

+130
-147
lines changed

‎html/index.html

+76-60
Large diffs are not rendered by default.

‎html/js/dithering.js

-43
Original file line numberDiff line numberDiff line change
@@ -147,49 +147,6 @@ function canvas2bytes(canvas, type='bw') {
147147
return arr;
148148
}
149149

150-
function bytes2canvas(bytes, canvas) {
151-
const ctx = canvas.getContext("2d");
152-
const imageData = ctx.createImageData(canvas.width, canvas.height);
153-
154-
let buffer = [];
155-
for (let byte of bytes) {
156-
const binaryString = byte.toString(2).padStart(8, '0');
157-
buffer.push(...binaryString.split('').map(bit => parseInt(bit, 10)));
158-
}
159-
let len = buffer.length;
160-
161-
// bw
162-
for (let y = 0; y < canvas.height; y++) {
163-
for (let x = 0; x < canvas.width; x++) {
164-
const i = (canvas.width * y + x) * 4;
165-
const bit = buffer.shift();
166-
const value = bit === 0 ? 0 : 255;
167-
imageData.data[i] = value; // R
168-
imageData.data[i + 1] = value; // G
169-
imageData.data[i + 2] = value; // B
170-
imageData.data[i + 3] = 255; // A
171-
}
172-
}
173-
174-
// red
175-
if (buffer.length * 2 == len) {
176-
for (let y = 0; y < canvas.height; y++) {
177-
for (let x = 0; x < canvas.width; x++) {
178-
const i = (canvas.width * y + x) * 4;
179-
const bit = buffer.shift();
180-
if (bit === 0) {
181-
imageData.data[i] = 255; // R
182-
imageData.data[i + 1] = 0; // G
183-
imageData.data[i + 2] = 0; // B
184-
imageData.data[i + 3] = 255; // A
185-
}
186-
}
187-
}
188-
}
189-
190-
ctx.putImageData(imageData, 0, 0);
191-
}
192-
193150
function getColorDistance(rgba1, rgba2) {
194151
const [r1, b1, g1] = rgba1;
195152
const [r2, b2, g2] = rgba2;

‎html/js/main.js

+54-44
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ async function sendCommand(cmd) {
3939
}
4040

4141
async function sendcmd(cmdTXT) {
42-
addLog(`发送命令: ${cmdTXT}`);
42+
addLog(`<span class="action">⇑</span> ${cmdTXT}`);
4343
await sendCommand(hexToBytes(cmdTXT));
4444
}
4545

@@ -71,9 +71,6 @@ async function sendCmWithData(cmd, data){
7171
}
7272

7373
async function send4GrayLut() {
74-
await sendcmd("0300");
75-
await sendcmd("043F"); // Load LUT from register
76-
7774
await sendCmWithData("20", "000A0000000160141400000100140000000100130A010001000000000000000000000000000000000000"); // vcom
7875
await sendCmWithData("21", "400A0000000190141400000110140A000001A01301000001000000000000000000000000000000000000"); // red not use
7976
await sendCmWithData("22", "400A0000000190141400000100140A000001990C01030401000000000000000000000000000000000000"); // bw r
@@ -82,11 +79,29 @@ async function send4GrayLut() {
8279
await sendCmWithData("25", "400A0000000190141400000110140A000001A01301000001000000000000000000000000000000000000"); // vcom
8380
}
8481

85-
async function sendimg(cmdIMG) {
82+
function getImageData(canvas, driver, mode) {
83+
if (mode === '4gray') {
84+
return bytesToHex(canvas2gray(canvas));
85+
} else {
86+
let data = bytesToHex(canvas2bytes(canvas, 'bw'));
87+
if (driver === '03') {
88+
if (mode.startsWith('bwr')) {
89+
data += bytesToHex(canvas2bytes(canvas, 'red'));
90+
} else {
91+
const count = data.length;
92+
data += 'F'.repeat(count);
93+
}
94+
}
95+
return data;
96+
}
97+
}
98+
99+
async function sendimg() {
86100
startTime = new Date().getTime();
101+
const canvas = document.getElementById("canvas");
87102
const driver = document.getElementById("epddriver").value;
88103
const mode = document.getElementById('dithering').value;
89-
const imgArray = cmdIMG.replace(/(?:\r\n|\r|\n|,|0x| )/g, '');
104+
const imgArray = getImageData(canvas, driver, mode);
90105
const bwArrLen = (canvas.width/8) * canvas.height * 2;
91106

92107
if (imgArray.length == bwArrLen * 2) {
@@ -95,10 +110,14 @@ async function sendimg(cmdIMG) {
95110
} else {
96111
await sendCmWithData(driver === "03" ? "10" : "13", imgArray);
97112
}
113+
98114
if (mode === "4gray") {
115+
await sendcmd("0300");
116+
await sendcmd("043F"); // Load LUT from register
99117
await send4GrayLut();
100118
await sendcmd("05");
101-
await sendcmd(`01${driver}`); // restore lut
119+
await sendcmd("0300");
120+
await sendcmd("041F"); // Load LUT from OTP
102121
} else {
103122
await sendcmd("05");
104123
}
@@ -111,17 +130,18 @@ async function sendimg(cmdIMG) {
111130
function updateButtonStatus() {
112131
const connected = gattServer != null && gattServer.connected;
113132
const status = connected ? null : 'disabled';
133+
document.getElementById("reconnectbutton").disabled = (gattServer == null || gattServer.connected) ? 'disabled' : null;
114134
document.getElementById("sendcmdbutton").disabled = status;
115135
document.getElementById("clearscreenbutton").disabled = status;
116136
document.getElementById("sendimgbutton").disabled = status;
117137
document.getElementById("setDriverbutton").disabled = status;
118138
}
119139

120140
function disconnect() {
141+
updateButtonStatus();
121142
resetVariables();
122143
addLog('已断开连接.');
123144
document.getElementById("connectbutton").innerHTML = '连接';
124-
updateButtonStatus();
125145
}
126146

127147
async function preConnect() {
@@ -133,10 +153,16 @@ async function preConnect() {
133153
}
134154
else {
135155
connectTrys = 0;
136-
bleDevice = await navigator.bluetooth.requestDevice({
137-
optionalServices: ['62750001-d828-918d-fb46-b6c11c675aec'],
138-
acceptAllDevices: true
139-
});
156+
try {
157+
bleDevice = await navigator.bluetooth.requestDevice({
158+
optionalServices: ['62750001-d828-918d-fb46-b6c11c675aec'],
159+
acceptAllDevices: true
160+
});
161+
} catch (e) {
162+
if (e.message) addLog(e.message);
163+
return;
164+
}
165+
140166
await bleDevice.addEventListener('gattserverdisconnected', disconnect);
141167
try {
142168
await connect();
@@ -156,21 +182,21 @@ async function reConnect() {
156182
}
157183

158184
async function connect() {
159-
if (epdCharacteristic == null) {
185+
if (epdCharacteristic == null && bleDevice != null) {
160186
addLog("正在连接: " + bleDevice.name);
161187

162188
gattServer = await bleDevice.gatt.connect();
163-
addLog('> 找到 GATT Server');
189+
addLog(' 找到 GATT Server');
164190

165191
epdService = await gattServer.getPrimaryService('62750001-d828-918d-fb46-b6c11c675aec');
166-
addLog('> 找到 EPD Service');
192+
addLog(' 找到 EPD Service');
167193

168194
epdCharacteristic = await epdService.getCharacteristic('62750002-d828-918d-fb46-b6c11c675aec');
169-
addLog('> 找到 Characteristic');
195+
addLog(' 找到 Characteristic');
170196

171197
await epdCharacteristic.startNotifications();
172198
epdCharacteristic.addEventListener('characteristicvaluechanged', (event) => {
173-
addLog(`> 收到配置：${bytesToHex(event.target.value.buffer)}`);
199+
addLog(`<span class="action">⇓</span> ${bytesToHex(event.target.value.buffer)}`);
174200
document.getElementById("epdpins").value = bytesToHex(event.target.value.buffer.slice(0, 7));
175201
document.getElementById("epddriver").value = bytesToHex(event.target.value.buffer.slice(7, 8));
176202
});
@@ -187,13 +213,17 @@ function setStatus(statusText) {
187213
}
188214

189215
function addLog(logTXT) {
190-
const today = new Date();
191-
const time = ("0" + today.getHours()).slice(-2) + ":" + ("0" + today.getMinutes()).slice(-2) + ":" + ("0" + today.getSeconds()).slice(-2) + " : ";
192-
document.getElementById("log").innerHTML += time + logTXT + '<br>';
193-
console.log(time + logTXT);
194-
while ((document.getElementById("log").innerHTML.match(/<br>/g) || []).length > 10) {
195-
var logs_br_position = document.getElementById("log").innerHTML.search("<br>");
196-
document.getElementById("log").innerHTML = document.getElementById("log").innerHTML.substring(logs_br_position + 4);
216+
const log = document.getElementById("log");
217+
const now = new Date();
218+
const time = String(now.getHours()).padStart(2, '0') + ":" +
219+
String(now.getMinutes()).padStart(2, '0') + ":" +
220+
String(now.getSeconds()).padStart(2, '0') + " ";
221+
log.innerHTML += '<span class="time">' + time + '</span>' + logTXT + '<br>';
222+
log.scrollTop = log.scrollHeight;
223+
while ((log.innerHTML.match(/<br>/g) || []).length > 20) {
224+
var logs_br_position = log.innerHTML.search("<br>");
225+
log.innerHTML = log.innerHTML.substring(logs_br_position + 4);
226+
log.scrollTop = log.scrollHeight;
197227
}
198228
}
199229

@@ -215,24 +245,6 @@ function intToHex(intIn) {
215245
return stringOut.substring(2, 4) + stringOut.substring(0, 2);
216246
}
217247

218-
function updateImageData(canvas) {
219-
const driver = document.getElementById("epddriver").value;
220-
const mode = document.getElementById('dithering').value;
221-
if (mode === '4gray') {
222-
document.getElementById('cmdIMAGE').value = bytesToHex(canvas2gray(canvas));
223-
} else {
224-
document.getElementById('cmdIMAGE').value = bytesToHex(canvas2bytes(canvas, 'bw'));
225-
if (driver === '03') {
226-
if (mode.startsWith('bwr')) {
227-
document.getElementById('cmdIMAGE').value += bytesToHex(canvas2bytes(canvas, 'red'));
228-
} else {
229-
const count = document.getElementById('cmdIMAGE').value.length;
230-
document.getElementById('cmdIMAGE').value += 'F'.repeat(count);
231-
}
232-
}
233-
}
234-
}
235-
236248
async function update_image () {
237249
const canvas = document.getElementById("canvas");
238250
const ctx = canvas.getContext("2d");
@@ -258,7 +270,6 @@ function clear_canvas() {
258270
const ctx = canvas.getContext("2d");
259271
ctx.fillStyle = 'white';
260272
ctx.fillRect(0, 0, canvas.width, canvas.height);
261-
document.getElementById('cmdIMAGE').value = '';
262273
}
263274
}
264275

@@ -272,7 +283,6 @@ function convert_dithering() {
272283
} else {
273284
dithering(ctx, canvas.width, canvas.height, parseInt(document.getElementById('threshold').value), mode);
274285
}
275-
updateImageData(canvas);
276286
}
277287

278288
document.body.onload = () => {

0 commit comments

Comments
 (0)