GitHub/EPD-nRF5
1
0
Fork 0
mirror of https://github.com/tsl0922/EPD-nRF5.git synced 2025-12-06 15:42:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

add 4 level gray support for EPD_4in2

Browse Source
This commit is contained in:
Shuanglei Tao
2024-12-10 09:21:45 +08:00
parent b20a4e8e03
commit 1f707bca2e
3 changed files with 113 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
html/index.html
View File

File diff suppressed because one or more lines are too long

45
html/js/dithering.js
View File

@@ -38,7 +38,10 @@ function dithering(ctx, width, height, threshold, type) {
let newPixel, err;
for (let currentPixel = 0; currentPixel <= imageDataLength; currentPixel+=4) {
if (type ==="none") {
if (type === "gray") {
const factor = 255 / (threshold - 1);
imageData.data[currentPixel] = Math.round(imageData.data[currentPixel] / factor) * factor;
} else if (type ==="none") {
// No dithering
imageData.data[currentPixel] = imageData.data[currentPixel] < threshold ? 0 : 255;
} else if (type ==="bayer") {
@@ -78,6 +81,46 @@ function dithering(ctx, width, height, threshold, type) {
ctx.putImageData(imageData, 0, 0);
}
/****Color display description****
white gray1 gray2 black
0x10| 01 01 00 00
0x13| 01 00 01 00
*********************************/
function canvas2gray(canvas) {
const ctx = canvas.getContext("2d");
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const arr10 = [];
const arr13 = [];
let buffer10 = [];
let buffer13 = [];
for (let y = 0; y < canvas.height; y++) {
for (let x = 0; x < canvas.width; x++) {
const i = (canvas.width * y + x) * 4;
const level = imageData.data[i] / 85;
const bin = level.toString(2).split('').map(bit => parseInt(bit, 2));
if (bin.length > 1) {
buffer10.push(bin[0]);
buffer13.push(bin[1]);
} else {
buffer10.push(0);
buffer13.push(bin[0]);
}
if (buffer10.length === 8) {
arr10.push(parseInt(buffer10.join(''), 2));
buffer10 = [];
}
if (buffer13.length === 8) {
arr13.push(parseInt(buffer13.join(''), 2));
buffer13 = [];
}
}
}
return arr10.concat(arr13);
}
// white: 1, black/red: 0
function canvas2bytes(canvas, type='bw') {
const ctx = canvas.getContext("2d");

97
html/js/main.js
View File

@@ -44,10 +44,10 @@ async function sendcmd(cmdTXT) {
}
async function setDriver() {
const epdDriver = document.getElementById("epddriver").value;
const driver = document.getElementById("epddriver").value;
const pins = document.getElementById("epdpins").value;
await sendcmd("00" + pins);
await sendcmd("01" + epdDriver);
await sendcmd(`00${pins}`);
await sendcmd(`01${driver}`);
}
async function clearscreen() {
@@ -56,36 +56,49 @@ async function clearscreen() {
}
}
async function sendIMGArray(imgArray, type = 'bw'){
const count = Math.round(imgArray.length / chunkSize);
async function sendCmWithData(cmd, data){
const count = Math.round(data.length / chunkSize);
let chunkIdx = 0;
for (let i = 0; i < imgArray.length; i += chunkSize) {
await sendcmd(`03${cmd}`);
for (let i = 0; i < data.length; i += chunkSize) {
let currentTime = (new Date().getTime() - startTime) / 1000.0;
let chunk = imgArray.substring(i, i + chunkSize);
setStatus(`发送${type === 'bwr' ? "红色" : '黑白'}块: ${chunkIdx+1}/${count+1}, 用时: ${currentTime}s`);
addLog(`发送块: ${chunk}`);
await sendCommand(hexToBytes(`04${chunk}`))
let chunk = data.substring(i, i + chunkSize);
setStatus(`命令：0x${cmd}, 数据块: ${chunkIdx+1}/${count+1}, 总用时: ${currentTime}s`);
await sendcmd(`04${chunk}`);
chunkIdx++;
}
}
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
}
async function sendimg(cmdIMG) {
startTime = new Date().getTime();
const epdDriver = document.getElementById("epddriver").value;
const driver = document.getElementById("epddriver").value;
const mode = document.getElementById('dithering').value;
const imgArray = cmdIMG.replace(/(?:\r\n|\r|\n|,|0x| )/g, '');
const bwArrLen = (canvas.width/8) * canvas.height * 2;
if (imgArray.length == bwArrLen * 2) {
await sendcmd("0310");
await sendIMGArray(imgArray.slice(0, bwArrLen - 1));
await sendcmd("0313");
await sendIMGArray(imgArray.slice(bwArrLen), 'bwr');
await sendCmWithData("10", imgArray.slice(0, bwArrLen - 1));
await sendCmWithData("13", imgArray.slice(bwArrLen));
} else {
await sendcmd(epdDriver === "03" ? "0310" : "0313");
await sendIMGArray(imgArray);
await sendCmWithData(driver === "03" ? "10" : "13", imgArray);
}
if (mode === "4gray") {
await send4GrayLut();
await sendcmd("05");
await sendcmd(`01${driver}`);
} else {
await sendcmd("05");
}
await sendcmd("05");
const sendTime = (new Date().getTime() - startTime) / 1000.0;
addLog(`发送完成！耗时: ${sendTime}s`);
@@ -200,34 +213,40 @@ function intToHex(intIn) {
}
function updateImageData(canvas) {
const epdDriver = document.getElementById("epddriver").value;
const dithering = document.getElementById('dithering').value;
document.getElementById('cmdIMAGE').value = bytesToHex(canvas2bytes(canvas, 'bw'));
if (epdDriver === '03') {
if (dithering.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);
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");
let image = new Image();;
const image_file = document.getElementById('image_file');
if (image_file.files.length > 0) {
const file = image_file.files[0];
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const image = new Image();
image.src = URL.createObjectURL(file);
image.onload = function(event) {
URL.revokeObjectURL(this.src);
ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
convert_dithering()
}
} else {
image.src = document.getElementById('demo-img').src;
}
image.onload = function(event) {
URL.revokeObjectURL(this.src);
ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
convert_dithering()
}
}
@@ -245,6 +264,8 @@ function convert_dithering() {
const mode = document.getElementById('dithering').value;
if (mode.startsWith('bwr')) {
ditheringCanvasByPalette(canvas, bwrPalette, mode);
} else if (mode === '4gray') {
dithering(ctx, canvas.width, canvas.height, 4, "gray");
} else {
dithering(ctx, canvas.width, canvas.height, parseInt(document.getElementById('threshold').value), mode);
}
@@ -255,7 +276,7 @@ document.body.onload = () => {
canvas = document.getElementById('canvas');
updateButtonStatus();
bytes2canvas(hexToBytes(document.getElementById('cmdIMAGE').value), canvas);
update_image();
document.getElementById('dithering').value = 'none';
}