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 25, 2024
1 parent 023331b commit 4e2b10c
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 61 deletions.
17 changes: 9 additions & 8 deletions html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
#canvas-box { margin-top: 10px; }

button { padding: 0.375rem 0.75rem; border: 1px solid #0d6efd; border-radius: 0.375rem; }
button:disabled { opacity: 0.65; }
button.primary { color: #fff; background-color: #0d6efd; }
button.primary:hover { color: #fff; border-color: #0b5ed7; background-color: #0b5ed7; }
button.secondary { color: #fff; background-color: #6c757d; }
Expand All @@ -38,8 +39,8 @@ <h3>4.2 寸电子墨水屏蓝牙控制器（nRF51）</h3>
<legend>蓝牙</legend>
<div style="display: flex; justify-content: space-between;">
<div>
<button id="connectbutton" type="button" class="primary" onclick="preConnect();">连接</button>
<button id="reconnectbutton" type="button" class="secondary" onclick="reConnect();">重连</button>
<button id="connectbutton" type="button" class="primary" onclick="preConnect()">连接</button>
<button id="reconnectbutton" type="button" class="secondary" onclick="reConnect()">重连</button>
</div>
<div>
<label for="epddriver">驱动</label>
Expand All @@ -50,7 +51,7 @@ <h3>4.2 寸电子墨水屏蓝牙控制器（nRF51）</h3>
</select>
<label for="epdpins">引脚</label>
<input id="epdpins" type="text" value="">
<button id="setDriverbutton" type="button" class="primary" onclick="setDriver();">确认</button>
<button id="setDriverbutton" type="button" class="primary" onclick="setDriver()">确认</button>
</div>
</div>
</fieldset>
Expand All @@ -59,13 +60,13 @@ <h3>4.2 寸电子墨水屏蓝牙控制器（nRF51）</h3>
<legend>传图</legend>
<div style="margin-bottom: 10px; display: flex; justify-content: space-between;">
<div>
<button id="clearcanvasbutton" type="button" class="secondary" onclick="clear_canvas();">清除画布</button>
<button id="sendimgbutton" type="button" class="primary" class="primary" onclick="sendimg();">发送图片</button>
<button id="clearcanvasbutton" type="button" class="secondary" onclick="clear_canvas()">清除画布</button>
<button id="sendimgbutton" type="button" class="primary" onclick="sendimg()">发送图片</button>
</div>
<div>
<button id="clearscreenbutton" type="button" class="secondary" onclick="clearscreen();">清除屏幕</button>
<button id="clearscreenbutton" type="button" class="secondary" onclick="clearscreen()">清除屏幕</button>
<input type="text" id="cmdTXT" value="">
<button id="sendcmdbutton" type="button" class="primary" onclick="sendcmd(document.getElementById(&quot;cmdTXT&quot;).value);">发送命令</button>
<button id="sendcmdbutton" type="button" class="primary" onclick="sendcmd()">发送命令</button>
</div>
</div>
<div style="font-size: 85%; color: #666; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #AAA;"><b>状态：</b><span id="status"></span></div>
Expand Down Expand Up @@ -93,7 +94,7 @@ <h3>4.2 寸电子墨水屏蓝牙控制器（nRF51）</h3>
<label for="threshold">阈值</label>
<input type="number" max="255" min="0" value="125" id="threshold" onchange="update_image()">
</div>
<button type="button" class="secondary" onclick="document.getElementById('log').innerHTML = '';">清空日志</button>
<button type="button" class="secondary" onclick="clearLog()">清空日志</button>
</div>
<div style="display: flex; justify-content: space-between;">
<canvas id="canvas" width="400" height="300" style="border: black solid 1px;"></canvas>
Expand Down
129 changes: 76 additions & 53 deletions html/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,22 @@ let reconnectTrys = 0;

let canvas;
let startTime;
let chunkSize = 38;

const chunkSize = 19; // 20-1
const EpdCmd = {
SET_PINS: 0x00,
INIT: 0x01,
CLEAR: 0x02,
SEND_CMD: 0x03,
SEND_DATA: 0x04,
DISPLAY: 0x05,
SLEEP: 0x06,

SET_CONFIG: 0x90,
SYS_RESET: 0x91,
SYS_SLEEP: 0x92,
CFG_ERASE: 0x99,
};

function resetVariables() {
gattServer = null;
Expand All @@ -30,66 +45,72 @@ async function handleError(error) {
}
}

async function sendCommand(cmd) {
if (epdCharacteristic) {
await epdCharacteristic.writeValue(cmd);
} else {
async function write(cmd, data) {
if (!epdCharacteristic) {
addLog("服务不可用，请检查蓝牙连接");
return;
}
let payload = [cmd];
if (data) {
if (typeof data == 'string') data = hex2bytes(data);
if (data instanceof Uint8Array) data = Array.from(data);
payload.push(...data)
};
addLog(`<span class="action">⇑</span> ${bytes2hex(payload)}`);
await epdCharacteristic.writeValue(Uint8Array.from(payload));
}

async function sendcmd(cmdTXT) {
addLog(`<span class="action">⇑</span> ${cmdTXT}`);
await sendCommand(hexToBytes(cmdTXT));
async function epdWrite(cmd, data) {
const count = Math.round(data.length / chunkSize);
let chunkIdx = 0;

await write(EpdCmd.SEND_CMD, [cmd]);
for (let i = 0; i < data.length; i += chunkSize) {
let currentTime = (new Date().getTime() - startTime) / 1000.0;
setStatus(`命令：0x${cmd.toString(16)}, 数据块: ${chunkIdx+1}/${count+1}, 总用时: ${currentTime}s`);
await write(EpdCmd.SEND_DATA, data.slice(i, i + chunkSize));
chunkIdx++;
}
}

async function setDriver() {
const driver = document.getElementById("epddriver").value;
const pins = document.getElementById("epdpins").value;
await sendcmd(`00${pins}`);
await sendcmd(`01${driver}`);
await write(EpdCmd.SET_PINS, document.getElementById("epdpins").value);
await write(EpdCmd.INIT, document.getElementById("epddriver").value);
}

async function clearscreen() {
if(confirm('确认清除屏幕内容?')) {
await sendcmd("02");
await write(EpdCmd.CLEAR);
}
}

async function sendCmWithData(cmd, data){
const count = Math.round(data.length / chunkSize);
let chunkIdx = 0;

await sendcmd(`03${cmd}`);
for (let i = 0; i < data.length; i += chunkSize) {
let currentTime = (new Date().getTime() - startTime) / 1000.0;
let chunk = data.substring(i, i + chunkSize);
setStatus(`命令：0x${cmd}, 数据块: ${chunkIdx+1}/${count+1}, 总用时: ${currentTime}s`);
await sendcmd(`04${chunk}`);
chunkIdx++;
}
async function sendcmd() {
const cmdTXT = document.getElementById('cmdTXT').value;
if (cmdTXT == '') return;
const bytes = hex2bytes(cmdTXT);
await write(bytes[0], bytes.length > 1 ? bytes.slice(1) : null);
}

async function send4GrayLut() {
await sendCmWithData("20", "000A0000000160141400000100140000000100130A010001000000000000000000000000000000000000"); // vcom
await sendCmWithData("21", "400A0000000190141400000110140A000001A01301000001000000000000000000000000000000000000"); // red not use
await sendCmWithData("22", "400A0000000190141400000100140A000001990C01030401000000000000000000000000000000000000"); // bw r
await sendCmWithData("23", "400A0000000190141400000100140A000001990B04040101000000000000000000000000000000000000"); // wb w
await sendCmWithData("24", "800A0000000190141400000120140A000001501301000001000000000000000000000000000000000000"); // bb b
await sendCmWithData("25", "400A0000000190141400000110140A000001A01301000001000000000000000000000000000000000000"); // vcom
await epdWrite(0x20, "000A0000000160141400000100140000000100130A010001000000000000000000000000000000000000"); // vcom
await epdWrite(0x21, "400A0000000190141400000110140A000001A01301000001000000000000000000000000000000000000"); // red not use
await epdWrite(0x22, "400A0000000190141400000100140A000001990C01030401000000000000000000000000000000000000"); // bw r
await epdWrite(0x23, "400A0000000190141400000100140A000001990B04040101000000000000000000000000000000000000"); // wb w
await epdWrite(0x24, "800A0000000190141400000120140A000001501301000001000000000000000000000000000000000000"); // bb b
await epdWrite(0x25, "400A0000000190141400000110140A000001A01301000001000000000000000000000000000000000000"); // vcom
}

function getImageData(canvas, driver, mode) {
if (mode === '4gray') {
return bytesToHex(canvas2gray(canvas));
return canvas2gray(canvas);
} else {
let data = bytesToHex(canvas2bytes(canvas, 'bw'));
let data = canvas2bytes(canvas, 'bw');
if (driver === '03') {
if (mode.startsWith('bwr')) {
data += bytesToHex(canvas2bytes(canvas, 'red'));
data.push(...canvas2bytes(canvas, 'red'));
} else {
const count = data.length;
data += 'F'.repeat(count);
const data1= 'F'.repeat(data.length);
data.push(...data1);
}
}
return data;
Expand All @@ -102,24 +123,22 @@ async function sendimg() {
const driver = document.getElementById("epddriver").value;
const mode = document.getElementById('dithering').value;
const imgArray = getImageData(canvas, driver, mode);
const bwArrLen = (canvas.width/8) * canvas.height * 2;
const bwArrLen = canvas.width * canvas.height / 8;

if (imgArray.length == bwArrLen * 2) {
await sendCmWithData("10", imgArray.slice(0, bwArrLen - 1));
await sendCmWithData("13", imgArray.slice(bwArrLen));
await epdWrite(0x10, imgArray.slice(0, bwArrLen));
await epdWrite(0x13, imgArray.slice(bwArrLen));
} else {
await sendCmWithData(driver === "03" ? "10" : "13", imgArray);
await epdWrite(driver === "03" ? 0x10 : 0x13, imgArray);
}

if (mode === "4gray") {
await sendcmd("0300");
await sendcmd("043F"); // Load LUT from register
await epdWrite(0x00, [0x3F]); // Load LUT from register
await send4GrayLut();
await sendcmd("05");
await sendcmd("0300");
await sendcmd("041F"); // Load LUT from OTP
await write(EpdCmd.DISPLAY);
await epdWrite(0x00, [0x1F]); // Load LUT from OTP
} else {
await sendcmd("05");
await write(EpdCmd.DISPLAY);
}

const sendTime = (new Date().getTime() - startTime) / 1000.0;
Expand Down Expand Up @@ -147,7 +166,7 @@ function disconnect() {
async function preConnect() {
if (gattServer != null && gattServer.connected) {
if (bleDevice != null && bleDevice.gatt.connected) {
await sendcmd("06");
await write(EpdCmd.SLEEP);
bleDevice.gatt.disconnect();
}
}
Expand Down Expand Up @@ -196,12 +215,12 @@ async function connect() {

await epdCharacteristic.startNotifications();
epdCharacteristic.addEventListener('characteristicvaluechanged', (event) => {
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));
addLog(`<span class="action">⇓</span> ${bytes2hex(event.target.value.buffer)}`);
document.getElementById("epdpins").value = bytes2hex(event.target.value.buffer.slice(0, 7));
document.getElementById("epddriver").value = bytes2hex(event.target.value.buffer.slice(7, 8));
});

await sendcmd("01");
await write(EpdCmd.INIT);

document.getElementById("connectbutton").innerHTML = '断开';
updateButtonStatus();
Expand All @@ -227,13 +246,17 @@ function addLog(logTXT) {
}
}

function hexToBytes(hex) {
function clearLog() {
document.getElementById("log").innerHTML = '';
}

function hex2bytes(hex) {
for (var bytes = [], c = 0; c < hex.length; c += 2)
bytes.push(parseInt(hex.substr(c, 2), 16));
return new Uint8Array(bytes);
}

function bytesToHex(data) {
function bytes2hex(data) {
return new Uint8Array(data).reduce(
function (memo, i) {
return memo + ("0" + i.toString(16)).slice(-2);
Expand Down

0 comments on commit 4e2b10c

Please sign in to comment.