继续优化7305
This commit is contained in:
@ -27,6 +27,16 @@
|
|||||||
color: {
|
color: {
|
||||||
type: String,
|
type: String,
|
||||||
default: "#000000"
|
default: "#000000"
|
||||||
|
},
|
||||||
|
// 二值化阈值(0~1),越大越细;默认偏清晰
|
||||||
|
threshold: {
|
||||||
|
type: Number,
|
||||||
|
default: 0.45
|
||||||
|
},
|
||||||
|
// 是否启用轻度笔画修复(3x3 膨胀);默认关闭以避免变粗
|
||||||
|
sharpen: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@ -48,6 +58,16 @@
|
|||||||
this.ctx = uni.createCanvasContext('reusableCanvas', this);
|
this.ctx = uni.createCanvasContext('reusableCanvas', this);
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
/**
|
||||||
|
* 外部可调用:复位画布为纯背景并立即提交
|
||||||
|
*/
|
||||||
|
async resetCanvas() {
|
||||||
|
if (!this.ctx) return;
|
||||||
|
this.clearCanvas();
|
||||||
|
await new Promise((resolve) => {
|
||||||
|
this.ctx.draw(true, () => setTimeout(resolve, 30));
|
||||||
|
});
|
||||||
|
},
|
||||||
/**
|
/**
|
||||||
* 估算单行文本所需的Canvas宽度
|
* 估算单行文本所需的Canvas宽度
|
||||||
*/
|
*/
|
||||||
@ -69,6 +89,8 @@
|
|||||||
* 复用单个Canvas处理所有文本行
|
* 复用单个Canvas处理所有文本行
|
||||||
*/
|
*/
|
||||||
async drawAndGetPixels() {
|
async drawAndGetPixels() {
|
||||||
|
// 发送前:确保画布处于干净背景态
|
||||||
|
await this.resetCanvas();
|
||||||
// 超采样比例(提高分辨率再降采样,减少模糊)
|
// 超采样比例(提高分辨率再降采样,减少模糊)
|
||||||
const SCALE = 3;
|
const SCALE = 3;
|
||||||
const PADDING_X = 1 * SCALE; // 左侧预留像素,避免首字裁剪
|
const PADDING_X = 1 * SCALE; // 左侧预留像素,避免首字裁剪
|
||||||
@ -96,21 +118,28 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
let convertCharToMatrix = (drawResult, item) => {
|
let convertCharToMatrix = (drawResult, item) => {
|
||||||
// 设备端使用13x13点阵渲染
|
// 设备端使用13x13点阵渲染(保持输出13列×13行),但只在内部采样12×12,保留右侧与底部1像素缓冲
|
||||||
const charWidth = 13;
|
const charWidth = 13;
|
||||||
const charHeight = 13;
|
const charHeight = 13;
|
||||||
|
const effectiveWidth = 12; // 仅采样前12列
|
||||||
|
const effectiveHeight = 12; // 仅采样前12行
|
||||||
const { pixelData, width, height } = drawResult;
|
const { pixelData, width, height } = drawResult;
|
||||||
// 将高分辨率像素降采样为13x13的布尔矩阵
|
// 将高分辨率像素降采样为13x13的布尔矩阵
|
||||||
const target = new Array(charWidth * charHeight).fill(0);
|
const target = new Array(charWidth * charHeight).fill(0);
|
||||||
const threshold = 0.5; // 每个小块中超过50%亮色(文字)判为1
|
const threshold = Math.max(0.2, Math.min(0.8, this.threshold || 0.45));
|
||||||
|
|
||||||
// 确保采样区域严格对齐,从PADDING_X开始,只采样13列
|
// 确保采样区域严格对齐,从PADDING_X开始,只采样12列(右侧预留1px),12行(底部预留1px)
|
||||||
// 字符实际绘制区域:从PADDING_X开始,宽度为13*SCALE
|
// 字符实际绘制区域:从PADDING_X开始,宽度为12*SCALE
|
||||||
const charStartX = PADDING_X;
|
const charStartX = PADDING_X;
|
||||||
const charEndX = PADDING_X + charWidth * SCALE;
|
const charEndX = PADDING_X + effectiveWidth * SCALE; // 仅采样到第12列
|
||||||
|
|
||||||
for (let y = 0; y < charHeight; y++) {
|
for (let y = 0; y < charHeight; y++) {
|
||||||
for (let x = 0; x < charWidth; x++) {
|
for (let x = 0; x < charWidth; x++) {
|
||||||
|
// 超出有效采样区域(第13列或第13行)直接置0,作为缓冲
|
||||||
|
if (x >= effectiveWidth || y >= effectiveHeight) {
|
||||||
|
target[y * charWidth + x] = 0;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
let onCount = 0;
|
let onCount = 0;
|
||||||
let total = 0;
|
let total = 0;
|
||||||
// 采样区域:字符从PADDING_X开始绘制,每列宽度为SCALE
|
// 采样区域:字符从PADDING_X开始绘制,每列宽度为SCALE
|
||||||
@ -151,6 +180,32 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 轻度笔画修复:可选 3x3 膨胀(启用时阈值更严格,避免变粗)
|
||||||
|
if (this.sharpen) {
|
||||||
|
const dilated = target.slice();
|
||||||
|
for (let y = 0; y < effectiveHeight; y++) {
|
||||||
|
for (let x = 0; x < effectiveWidth; x++) {
|
||||||
|
const idx = y * charWidth + x;
|
||||||
|
if (target[idx] === 1) continue;
|
||||||
|
let neighbors = 0;
|
||||||
|
for (let dy = -1; dy <= 1; dy++) {
|
||||||
|
for (let dx = -1; dx <= 1; dx++) {
|
||||||
|
if (dx === 0 && dy === 0) continue;
|
||||||
|
const nx = x + dx;
|
||||||
|
const ny = y + dy;
|
||||||
|
if (nx < 0 || ny < 0 || nx >= effectiveWidth || ny >= effectiveHeight) continue;
|
||||||
|
if (target[ny * charWidth + nx] === 1) neighbors++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 使用更严格的邻居门限,避免整体变粗
|
||||||
|
if (neighbors >= 5) {
|
||||||
|
dilated[idx] = 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (let i = 0; i < target.length; i++) target[i] = dilated[i];
|
||||||
|
}
|
||||||
|
|
||||||
const lowBytes = new Array(charWidth).fill(0);
|
const lowBytes = new Array(charWidth).fill(0);
|
||||||
const highBytes = new Array(charWidth).fill(0);
|
const highBytes = new Array(charWidth).fill(0);
|
||||||
// 按列打包,每列13行分成上下两字节:低字节0-7行(8行),高字节8-12行(5行)
|
// 按列打包,每列13行分成上下两字节:低字节0-7行(8行),高字节8-12行(5行)
|
||||||
@ -198,31 +253,42 @@
|
|||||||
ctx.fillText(textLine, charX, charY);
|
ctx.fillText(textLine, charX, charY);
|
||||||
|
|
||||||
// 5. 异步绘制并获取像素数据(串行处理避免冲突)
|
// 5. 异步绘制并获取像素数据(串行处理避免冲突)
|
||||||
await new Promise((resolve, reject) => {
|
const grabPixels = () => new Promise((resolve, reject) => {
|
||||||
ctx.draw(false, () => {
|
// 立即绘制并给一点缓冲时间,避免取像素过早
|
||||||
uni.canvasGetImageData({
|
ctx.draw(true, () => {
|
||||||
canvasId: 'reusableCanvas',
|
setTimeout(() => {
|
||||||
x: 0,
|
uni.canvasGetImageData({
|
||||||
y: 0,
|
canvasId: 'reusableCanvas',
|
||||||
width: this.currentCanvasWidth,
|
x: 0,
|
||||||
height: this.currentCanvasHeight,
|
y: 0,
|
||||||
success: res => {
|
|
||||||
result = {
|
|
||||||
line: textLine,
|
|
||||||
pixelData: res.data,
|
|
||||||
width: this.currentCanvasWidth,
|
width: this.currentCanvasWidth,
|
||||||
height: this.currentCanvasHeight
|
height: this.currentCanvasHeight,
|
||||||
};
|
success: res => {
|
||||||
resolve();
|
result = {
|
||||||
},
|
line: textLine,
|
||||||
fail: err => {
|
pixelData: res.data,
|
||||||
// console.error(`处理第${i+1}行失败:`, err);
|
width: this.currentCanvasWidth,
|
||||||
reject(err)
|
height: this.currentCanvasHeight
|
||||||
}
|
};
|
||||||
});
|
resolve();
|
||||||
|
},
|
||||||
|
fail: err => reject(err)
|
||||||
|
});
|
||||||
|
}, 70);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
await grabPixels();
|
||||||
|
// 一次性校验:若像素全黑或明显异常,重绘重取一次
|
||||||
|
let nonZero = false;
|
||||||
|
for (let i = 0; i < result.pixelData.length; i += 4) {
|
||||||
|
if (result.pixelData[i] || result.pixelData[i+1] || result.pixelData[i+2]) { nonZero = true; break; }
|
||||||
|
}
|
||||||
|
if (!nonZero) {
|
||||||
|
await new Promise(r => setTimeout(r, 50));
|
||||||
|
await grabPixels();
|
||||||
|
}
|
||||||
|
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
let arr = [];
|
let arr = [];
|
||||||
@ -239,11 +305,17 @@
|
|||||||
// 调试:打印每个字符的点阵数据
|
// 调试:打印每个字符的点阵数据
|
||||||
console.log(`[点阵生成] 字符"${char}" 点阵数据:`, matrix.map(b => '0x' + b.toString(16).padStart(2, '0')).join(' '));
|
console.log(`[点阵生成] 字符"${char}" 点阵数据:`, matrix.map(b => '0x' + b.toString(16).padStart(2, '0')).join(' '));
|
||||||
linePixls.push(matrix);
|
linePixls.push(matrix);
|
||||||
|
// 在字符间增加轻微延时,避免相邻提取竞争(尤其是末字符)
|
||||||
|
await new Promise(r => setTimeout(r, 20));
|
||||||
}
|
}
|
||||||
// console.log("hexs=", linePixls.join(","));
|
// console.log("hexs=", linePixls.join(","));
|
||||||
arr.push(linePixls);
|
arr.push(linePixls);
|
||||||
|
// 每行结束再等一会,提高末字符稳定性
|
||||||
|
await new Promise(r => setTimeout(r, 40));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 发送后:再次清空画布,避免残留影响下一次
|
||||||
|
await this.resetCanvas();
|
||||||
return arr;
|
return arr;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -192,7 +192,7 @@
|
|||||||
visibleClose: false,
|
visibleClose: false,
|
||||||
okCallback: null
|
okCallback: null
|
||||||
},
|
},
|
||||||
BottomMenu: {
|
BottomMenu: {
|
||||||
show: false,
|
show: false,
|
||||||
showHeader: true,
|
showHeader: true,
|
||||||
menuItems: [{
|
menuItems: [{
|
||||||
@ -226,7 +226,11 @@
|
|||||||
btnTextColor: "#232323de",
|
btnTextColor: "#232323de",
|
||||||
showMask: true,
|
showMask: true,
|
||||||
maskBgColor: '#00000066',
|
maskBgColor: '#00000066',
|
||||||
showClose: false
|
showClose: false
|
||||||
|
},
|
||||||
|
// 发送互斥,防止三屏过程中被其它BLE写入打断
|
||||||
|
Send: {
|
||||||
|
lock: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
formData: {
|
formData: {
|
||||||
@ -953,6 +957,11 @@
|
|||||||
this.closeMenu();
|
this.closeMenu();
|
||||||
},
|
},
|
||||||
setMode(mode, type) {
|
setMode(mode, type) {
|
||||||
|
// 发送互斥:人员信息发送期间禁止模式切换
|
||||||
|
if (this.Status.Send && this.Status.Send.lock) {
|
||||||
|
console.warn('正在发送三屏数据,模式切换已忽略');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
let dataValue = 0;
|
let dataValue = 0;
|
||||||
|
|
||||||
@ -1112,6 +1121,17 @@
|
|||||||
this.Status.Pop.showPop = true;
|
this.Status.Pop.showPop = true;
|
||||||
},
|
},
|
||||||
sendUsr() {
|
sendUsr() {
|
||||||
|
// 互斥:三屏发送期间禁止其它BLE写入插队
|
||||||
|
if (this.Status.Send && this.Status.Send.lock) {
|
||||||
|
this.showPop({
|
||||||
|
message: "正在发送,请稍候完成后再试",
|
||||||
|
iconUrl: "/static/images/6155/DeviceDetail/uploadErr.png",
|
||||||
|
borderColor: "#e034344d",
|
||||||
|
buttonBgColor: "#E03434",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this.Status.Send) this.Status.Send.lock = true;
|
||||||
this.sendSeq++;
|
this.sendSeq++;
|
||||||
const currentSeq = this.sendSeq;
|
const currentSeq = this.sendSeq;
|
||||||
let f = this.getDevice();
|
let f = this.getDevice();
|
||||||
@ -1211,9 +1231,24 @@
|
|||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
if (err.code == '10007') {
|
if (err.code == '10007') {
|
||||||
setTimeout(sendNextChunk, 50);
|
setTimeout(sendNextChunk, 50);
|
||||||
} else {
|
return;
|
||||||
reject(err);
|
|
||||||
}
|
}
|
||||||
|
// 边界情况:设备报告无连接/服务未就绪,等待后重试一次当前块
|
||||||
|
if (err.code == 10004 || err.errCode == 10004 || err.code == 10006) {
|
||||||
|
console.warn('[BLE] 当前块发送失败(10004/10006),延时重试一次');
|
||||||
|
setTimeout(() => {
|
||||||
|
ble.sendData(f.deviceId, chunk, f.writeServiceId, f.wirteCharactId, 100)
|
||||||
|
.then(() => {
|
||||||
|
chunkIndex++;
|
||||||
|
const gap = chunkIndex <= 3 ? 60 : 30;
|
||||||
|
setTimeout(sendNextChunk, gap);
|
||||||
|
})
|
||||||
|
.catch(e2 => reject(e2));
|
||||||
|
}, 150);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
reject(err);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1231,15 +1266,36 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
console.log("11111");
|
console.log("11111");
|
||||||
|
// UI顺序: [单位(0), 部门(1), 姓名(2)]
|
||||||
|
// 设备三屏顺序: [单位, 部门, 姓名]
|
||||||
|
const uiBackupLines = [...this.formData.textLines];
|
||||||
|
// 与UI一致:单位→第一屏,部门→第二屏,姓名→第三屏
|
||||||
|
const deviceOrderLines = [uiBackupLines[0] || '', uiBackupLines[1] || '', uiBackupLines[2] || ''];
|
||||||
|
// 临时切换为设备顺序供画布组件生成(组件为离屏隐藏,不影响UI)
|
||||||
|
this.formData.textLines = deviceOrderLines;
|
||||||
var result = null;
|
var result = null;
|
||||||
try {
|
try {
|
||||||
console.log("this.$refs.textToHex=", this.$refs.textToHex);
|
console.log("this.$refs.textToHex=", this.$refs.textToHex);
|
||||||
|
// 等待一次tick,确保子组件收到prop变更
|
||||||
|
await new Promise(r => setTimeout(r, 50));
|
||||||
|
// 发送前强制清空画布
|
||||||
|
if (this.$refs.textToHex && this.$refs.textToHex.resetCanvas) {
|
||||||
|
await this.$refs.textToHex.resetCanvas();
|
||||||
|
}
|
||||||
result = await this.$refs.textToHex.drawAndGetPixels();
|
result = await this.$refs.textToHex.drawAndGetPixels();
|
||||||
} catch (ex) {
|
} catch (ex) {
|
||||||
console.log("ex=", ex);
|
console.log("ex=", ex);
|
||||||
|
} finally {
|
||||||
|
// 立即恢复UI顺序,避免影响输入框
|
||||||
|
this.formData.textLines = uiBackupLines;
|
||||||
|
// 发送后再次清空画布
|
||||||
|
if (this.$refs.textToHex && this.$refs.textToHex.resetCanvas) {
|
||||||
|
await this.$refs.textToHex.resetCanvas();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
if (!result) {
|
if (!result) {
|
||||||
hideLoading(this);
|
hideLoading(this);
|
||||||
|
if (this.Status.Send) this.Status.Send.lock = false;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
console.log("result=", result);
|
console.log("result=", result);
|
||||||
@ -1251,8 +1307,11 @@
|
|||||||
let pros = [];
|
let pros = [];
|
||||||
let flag = true;
|
let flag = true;
|
||||||
for (var i = 0; i < result.length; i++) {
|
for (var i = 0; i < result.length; i++) {
|
||||||
|
// 屏间稳定等待,避免上一屏残留影响下一屏
|
||||||
|
await new Promise(r => setTimeout(r, 200));
|
||||||
|
|
||||||
let str = this.formData.textLines[i];
|
// 发送的文本与点阵一一对应(设备顺序: 单位, 部门, 姓名)
|
||||||
|
let str = deviceOrderLines[i];
|
||||||
|
|
||||||
if (str.length > 0) {
|
if (str.length > 0) {
|
||||||
|
|
||||||
@ -1260,11 +1319,18 @@
|
|||||||
var rgb = result[i];
|
var rgb = result[i];
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// console.log("1111");
|
// 首屏(单位)类型固定为 0x06,增加首屏稳定策略:预等待+双发送
|
||||||
await sendTxtPackge(rgb, h3dic[i], str, i);
|
console.log(`[7305] 准备发送 屏${i+1} type=0x${h3dic[i].toString(16)} text="${str}"`);
|
||||||
// 每行之间插入小延迟,避免行首解析异常
|
if (i === 0) {
|
||||||
await new Promise(r => setTimeout(r, 120));
|
await new Promise(r => setTimeout(r, 200));
|
||||||
// console.log("222222");
|
await sendTxtPackge(rgb, h3dic[i], str, i);
|
||||||
|
await new Promise(r => setTimeout(r, 150));
|
||||||
|
await sendTxtPackge(rgb, h3dic[i], str, i);
|
||||||
|
} else {
|
||||||
|
await sendTxtPackge(rgb, h3dic[i], str, i);
|
||||||
|
}
|
||||||
|
// 每屏之间插入更长延迟,避免解析竞争
|
||||||
|
await new Promise(r => setTimeout(r, 200));
|
||||||
} catch (ex) {
|
} catch (ex) {
|
||||||
flag = false;
|
flag = false;
|
||||||
console.log("发送数据包出现异常", ex);
|
console.log("发送数据包出现异常", ex);
|
||||||
@ -1304,6 +1370,7 @@
|
|||||||
buttonBgColor: "#E03434",
|
buttonBgColor: "#E03434",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
if (this.Status.Send) this.Status.Send.lock = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
setTimeout(task, 0);
|
setTimeout(task, 0);
|
||||||
@ -1343,6 +1410,11 @@
|
|||||||
}, 100);
|
}, 100);
|
||||||
},
|
},
|
||||||
sendBrightness: function() {
|
sendBrightness: function() {
|
||||||
|
// 发送互斥:人员信息发送期间禁止调亮度
|
||||||
|
if (this.Status.Send && this.Status.Send.lock) {
|
||||||
|
console.warn('正在发送三屏数据,亮度指令已忽略');
|
||||||
|
return;
|
||||||
|
}
|
||||||
const buffer = new ArrayBuffer(6);
|
const buffer = new ArrayBuffer(6);
|
||||||
const dataView = new DataView(buffer);
|
const dataView = new DataView(buffer);
|
||||||
let data = '0x' + parseInt(this.formData.liangDu).toString(16);
|
let data = '0x' + parseInt(this.formData.liangDu).toString(16);
|
||||||
|
|||||||
Reference in New Issue
Block a user