Skip to content

Commit

Permalink
update html
Browse files Browse the repository at this point in the history
  • Loading branch information
@tsl0922
tsl0922 committed Dec 16, 2024
1 parent d3b28d0 commit 3d7db30
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 147 deletions.
136 changes: 76 additions & 60 deletions html/index.html
View file

Large diffs are not rendered by default.

43 changes: 0 additions & 43 deletions html/js/dithering.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,49 +147,6 @@ function canvas2bytes(canvas, type='bw') {
return arr;
}

function bytes2canvas(bytes, canvas) {
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(canvas.width, canvas.height);

let buffer = [];
for (let byte of bytes) {
const binaryString = byte.toString(2).padStart(8, '0');
buffer.push(...binaryString.split('').map(bit => parseInt(bit, 10)));
}
let len = buffer.length;

// bw
for (let y = 0; y < canvas.height; y++) {
for (let x = 0; x < canvas.width; x++) {
const i = (canvas.width * y + x) * 4;
const bit = buffer.shift();
const value = bit === 0 ? 0 : 255;
imageData.data[i] = value; // R
imageData.data[i + 1] = value; // G
imageData.data[i + 2] = value; // B
imageData.data[i + 3] = 255; // A
}
}

// red
if (buffer.length * 2 == len) {
for (let y = 0; y < canvas.height; y++) {
for (let x = 0; x < canvas.width; x++) {
const i = (canvas.width * y + x) * 4;
const bit = buffer.shift();
if (bit === 0) {
imageData.data[i] = 255; // R
imageData.data[i + 1] = 0; // G
imageData.data[i + 2] = 0; // B
imageData.data[i + 3] = 255; // A
}
}
}
}

ctx.putImageData(imageData, 0, 0);
}

function getColorDistance(rgba1, rgba2) {
const [r1, b1, g1] = rgba1;
const [r2, b2, g2] = rgba2;
Expand Down
98 changes: 54 additions & 44 deletions html/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ async function sendCommand(cmd) {
}

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

Expand Down Expand Up @@ -71,9 +71,6 @@ async function sendCmWithData(cmd, data){
}

async function send4GrayLut() {
await sendcmd("0300");
await sendcmd("043F"); // Load LUT from register

await sendCmWithData("20", "000A0000000160141400000100140000000100130A010001000000000000000000000000000000000000"); // vcom
await sendCmWithData("21", "400A0000000190141400000110140A000001A01301000001000000000000000000000000000000000000"); // red not use
await sendCmWithData("22", "400A0000000190141400000100140A000001990C01030401000000000000000000000000000000000000"); // bw r
Expand All @@ -82,11 +79,29 @@ async function send4GrayLut() {
await sendCmWithData("25", "400A0000000190141400000110140A000001A01301000001000000000000000000000000000000000000"); // vcom
}

async function sendimg(cmdIMG) {
function getImageData(canvas, driver, mode) {
if (mode === '4gray') {
return bytesToHex(canvas2gray(canvas));
} else {
let data = bytesToHex(canvas2bytes(canvas, 'bw'));
if (driver === '03') {
if (mode.startsWith('bwr')) {
data += bytesToHex(canvas2bytes(canvas, 'red'));
} else {
const count = data.length;
data += 'F'.repeat(count);
}
}
return data;
}
}

async function sendimg() {
startTime = new Date().getTime();
const canvas = document.getElementById("canvas");
const driver = document.getElementById("epddriver").value;
const mode = document.getElementById('dithering').value;
const imgArray = cmdIMG.replace(/(?:\r\n|\r|\n|,|0x| )/g, '');
const imgArray = getImageData(canvas, driver, mode);
const bwArrLen = (canvas.width/8) * canvas.height * 2;

if (imgArray.length == bwArrLen * 2) {
Expand All @@ -95,10 +110,14 @@ async function sendimg(cmdIMG) {
} else {
await sendCmWithData(driver === "03" ? "10" : "13", imgArray);
}

if (mode === "4gray") {
await sendcmd("0300");
await sendcmd("043F"); // Load LUT from register
await send4GrayLut();
await sendcmd("05");
await sendcmd(`01${driver}`); // restore lut
await sendcmd("0300");
await sendcmd("041F"); // Load LUT from OTP
} else {
await sendcmd("05");
}
Expand All @@ -111,17 +130,18 @@ async function sendimg(cmdIMG) {
function updateButtonStatus() {
const connected = gattServer != null && gattServer.connected;
const status = connected ? null : 'disabled';
document.getElementById("reconnectbutton").disabled = (gattServer == null || gattServer.connected) ? 'disabled' : null;
document.getElementById("sendcmdbutton").disabled = status;
document.getElementById("clearscreenbutton").disabled = status;
document.getElementById("sendimgbutton").disabled = status;
document.getElementById("setDriverbutton").disabled = status;
}

function disconnect() {
updateButtonStatus();
resetVariables();
addLog('已断开连接.');
document.getElementById("connectbutton").innerHTML = '连接';
updateButtonStatus();
}

async function preConnect() {
Expand All @@ -133,10 +153,16 @@ async function preConnect() {
}
else {
connectTrys = 0;
bleDevice = await navigator.bluetooth.requestDevice({
optionalServices: ['62750001-d828-918d-fb46-b6c11c675aec'],
acceptAllDevices: true
});
try {
bleDevice = await navigator.bluetooth.requestDevice({
optionalServices: ['62750001-d828-918d-fb46-b6c11c675aec'],
acceptAllDevices: true
});
} catch (e) {
if (e.message) addLog(e.message);
return;
}

await bleDevice.addEventListener('gattserverdisconnected', disconnect);
try {
await connect();
Expand All @@ -156,21 +182,21 @@ async function reConnect() {
}

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

gattServer = await bleDevice.gatt.connect();
addLog('> 找到 GATT Server');
addLog(' 找到 GATT Server');

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

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

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

function addLog(logTXT) {
const today = new Date();
const time = ("0" + today.getHours()).slice(-2) + ":" + ("0" + today.getMinutes()).slice(-2) + ":" + ("0" + today.getSeconds()).slice(-2) + " : ";
document.getElementById("log").innerHTML += time + logTXT + '<br>';
console.log(time + logTXT);
while ((document.getElementById("log").innerHTML.match(/<br>/g) || []).length > 10) {
var logs_br_position = document.getElementById("log").innerHTML.search("<br>");
document.getElementById("log").innerHTML = document.getElementById("log").innerHTML.substring(logs_br_position + 4);
const log = document.getElementById("log");
const now = new Date();
const time = String(now.getHours()).padStart(2, '0') + ":" +
String(now.getMinutes()).padStart(2, '0') + ":" +
String(now.getSeconds()).padStart(2, '0') + " ";
log.innerHTML += '<span class="time">' + time + '</span>' + logTXT + '<br>';
log.scrollTop = log.scrollHeight;
while ((log.innerHTML.match(/<br>/g) || []).length > 20) {
var logs_br_position = log.innerHTML.search("<br>");
log.innerHTML = log.innerHTML.substring(logs_br_position + 4);
log.scrollTop = log.scrollHeight;
}
}

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

function updateImageData(canvas) {
const driver = document.getElementById("epddriver").value;
const mode = document.getElementById('dithering').value;
if (mode === '4gray') {
document.getElementById('cmdIMAGE').value = bytesToHex(canvas2gray(canvas));
} else {
document.getElementById('cmdIMAGE').value = bytesToHex(canvas2bytes(canvas, 'bw'));
if (driver === '03') {
if (mode.startsWith('bwr')) {
document.getElementById('cmdIMAGE').value += bytesToHex(canvas2bytes(canvas, 'red'));
} else {
const count = document.getElementById('cmdIMAGE').value.length;
document.getElementById('cmdIMAGE').value += 'F'.repeat(count);
}
}
}
}

async function update_image () {
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
Expand All @@ -258,7 +270,6 @@ function clear_canvas() {
const ctx = canvas.getContext("2d");
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
document.getElementById('cmdIMAGE').value = '';
}
}

Expand All @@ -272,7 +283,6 @@ function convert_dithering() {
} else {
dithering(ctx, canvas.width, canvas.height, parseInt(document.getElementById('threshold').value), mode);
}
updateImageData(canvas);
}

document.body.onload = () => {
Expand Down

0 comments on commit 3d7db30

Please sign in to comment.