diff --git a/html/css/main.css b/html/css/main.css index e6e4441..9e3978c 100644 --- a/html/css/main.css +++ b/html/css/main.css @@ -106,6 +106,7 @@ body.debug-mode fieldset legend { font-weight: 400; line-height: 1.5; box-sizing: border-box; + overflow: hidden; } .footer { @@ -214,17 +215,31 @@ code { margin: 0; padding: 5px; background: #DDD; - overflow: auto; + overflow-y: auto; + overflow-x: hidden; font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; box-sizing: border-box; + word-break: break-word; +} + +#log div { + padding: 2px 0; +} + +#log .time, +#log .action { + display: inline-block; + white-space: nowrap; } #log .time { color: #333; + margin-right: 0.5em; } #log .action { color: #666; + margin-right: 0.5em; } #canvas-box { diff --git a/html/index.html b/html/index.html index a37c894..2a11d56 100644 --- a/html/index.html +++ b/html/index.html @@ -4,7 +4,7 @@ 4.2 寸电子墨水屏蓝牙控制器 - + @@ -60,7 +60,7 @@ - + @@ -96,8 +96,8 @@ - - + + \ No newline at end of file diff --git a/html/js/main.js b/html/js/main.js index da00d69..f528d86 100644 --- a/html/js/main.js +++ b/html/js/main.js @@ -41,7 +41,7 @@ async function write(cmd, data, withResponse=true) { if (data instanceof Uint8Array) data = Array.from(data); payload.push(...data) } - addLog(`⇑ ${bytes2hex(payload)}`); + addLog(bytes2hex(payload), '⇑'); try { if (withResponse) await epdCharacteristic.writeValueWithResponse(Uint8Array.from(payload)); @@ -240,8 +240,7 @@ function handleNotify(value, idx) { filterDitheringOptions(); } else { if (textDecoder == null) textDecoder = new TextDecoder(); - const msg = textDecoder.decode(data); - addLog(`⇓ ${msg}`); + addLog(textDecoder.decode(data), '⇓'); } } @@ -251,11 +250,11 @@ async function connect() { try { 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'); } catch (e) { console.error(e); if (e.message) addLog("connect: " + e.message); @@ -293,18 +292,32 @@ function setStatus(statusText) { document.getElementById("status").innerHTML = statusText; } -function addLog(logTXT) { +function addLog(logTXT, action = '') { 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 += '' + time + '' + logTXT + '
'; + + const logEntry = document.createElement('div'); + const timeSpan = document.createElement('span'); + timeSpan.className = 'time'; + timeSpan.textContent = time; + logEntry.appendChild(timeSpan); + + if (action !== '') { + const actionSpan = document.createElement('span'); + actionSpan.className = 'action'; + actionSpan.innerHTML = action; + logEntry.appendChild(actionSpan); + } + logEntry.appendChild(document.createTextNode(logTXT)); + + log.appendChild(logEntry); log.scrollTop = log.scrollHeight; - while ((log.innerHTML.match(/
/g) || []).length > 20) { - var logs_br_position = log.innerHTML.search("
"); - log.innerHTML = log.innerHTML.substring(logs_br_position + 4); - log.scrollTop = log.scrollHeight; + + while (log.childNodes.length > 20) { + log.removeChild(log.firstChild); } } @@ -368,17 +381,21 @@ function convert_dithering() { function filterDitheringOptions() { const driver = document.getElementById('epddriver').value; const dithering = document.getElementById('dithering'); + let currentOptionStillValid = false; + for (let optgroup of dithering.getElementsByTagName('optgroup')) { const drivers = optgroup.getAttribute('data-driver').split('|'); const show = drivers.includes(driver); for (option of optgroup.getElementsByTagName('option')) { - if (show) + if (show) { option.removeAttribute('disabled'); - else + if (option.value == dithering.value) currentOptionStillValid = true; + } else { option.setAttribute('disabled', 'disabled'); + } } } - dithering.value = ''; + if (!currentOptionStillValid) dithering.value = ''; } function checkDebugMode() {