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

update html

Browse Source
This commit is contained in:
Shuanglei Tao
2025-09-09 21:03:05 +08:00
parent 1467a09407
commit c9dd478bd7
5 changed files with 48 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
html/css/main.css
View File

@@ -257,7 +257,7 @@ code {
margin: 0 auto;
}
.canvas-container.crop #canvas {
.canvas-container.crop-mode #canvas {
border: 2px dashed var(--primary-color);
cursor: grab;
}
@@ -372,19 +372,24 @@ canvas.text-placement-mode {
justify-content: center;
}
.brush-tools,
.text-tools,
.crop-tools {
display: none;
}
.canvas-container.crop .tool-buttons,
.canvas-container.crop .brush-buttons,
.canvas-container.crop .text-tools {
display: none;
.canvas-container.brush-mode .brush-tools,
.canvas-container.text-mode .brush-tools,
.canvas-container.eraser-mode .brush-tools,
.canvas-container.text-mode .text-tools,
.canvas-container.crop-mode .crop-tools {
display: flex;
}
.canvas-container.crop .crop-tools {
display: flex;
.canvas-container.crop-mode .tool-buttons,
.canvas-container.crop-mode .brush-tools,
.canvas-container.crop-mode .text-tools {
display: none;
}
.tool-button {

3
html/index.html
View File

@@ -71,6 +71,9 @@
<option value="3.97_800_480">3.97 (800x480)</option>
<option value="4.2_400_300" selected>4.2 (400x300)</option>
<option value="5.79_792_272">5.79 (792x272)</option>
<option value="5.83_600_448">5.83 (600x448)</option>
<option value="5.83_648_480">5.83 (648x480)</option>
<option value="7.5_640_384">7.5 (640x384)</option>
<option value="7.5_800_480">7.5 (800x480)</option>
<option value="10.2_960_640">10.2 (960x640)</option>
<option value="10.85_1360_480">10.85 (1360x480)</option>

24
html/js/crop.js
View File

@@ -15,29 +15,25 @@ function resetCropStates() {
lastPanY = 0;
}
function removeEventListeners() {
function isCropMode() {
return canvas.parentNode.classList.contains('crop-mode');
}
function exitCropMode() {
canvas.parentNode.classList.remove('crop-mode');
setCanvasTitle("");
canvas.removeEventListener('wheel', handleBackgroundZoom);
canvas.removeEventListener('mousedown', handleBackgroundPanStart);
canvas.removeEventListener('mousemove', handleBackgroundPan);
canvas.removeEventListener('mouseup', handleBackgroundPanEnd);
canvas.removeEventListener('mouseleave', handleBackgroundPanEnd);
canvas.removeEventListener('touchstart', handleTouchStart);
canvas.removeEventListener('touchmove', handleTouchMove);
canvas.removeEventListener('touchend', handleBackgroundPanEnd);
canvas.removeEventListener('touchcancel', handleBackgroundPanEnd);
}
function isCropMode() {
return canvas.parentNode.classList.contains('crop');
}
function exitCropMode() {
removeEventListeners();
canvas.parentNode.classList.remove('crop');
setCanvasTitle("");
}
function initializeCrop() {
const imageFile = document.getElementById('imageFile');
if (imageFile.files.length == 0) {
@@ -45,8 +41,8 @@ function initializeCrop() {
return;
}
exitCropMode();
resetCropStates();
removeEventListeners();
canvas.style.backgroundImage = `url(${URL.createObjectURL(imageFile.files[0])})`;
canvas.style.backgroundSize = '100%';
@@ -70,7 +66,7 @@ function initializeCrop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
setCanvasTitle("裁剪模式: 可用鼠标或触摸缩放移动图片");
canvas.parentNode.classList.add('crop');
canvas.parentNode.classList.add('crop-mode');
}
function finishCrop() {

4
html/js/main.js
View File

@@ -35,6 +35,9 @@ const canvasSizes = [
{ name: '3.97_800_480', width: 800, height: 480 },
{ name: '4.2_400_300', width: 400, height: 300 },
{ name: '5.79_792_272', width: 792, height: 272 },
{ name: '5.83_600_448', width: 600, height: 448 },
{ name: '5.83_648_480', width: 648, height: 480 },
{ name: '7.5_640_384', width: 640, height: 384 },
{ name: '7.5_800_480', width: 800, height: 480 },
{ name: '10.2_960_640', width: 960, height: 640 },
{ name: '10.85_1360_480', width: 1360, height: 480 },
@@ -450,6 +453,7 @@ function updateImage() {
convertDithering();
} else {
addLog("图片宽高比例与画布不匹配，已进入裁剪模式。");
setActiveTool(null, '');
initializeCrop();
}
};

55
html/js/paint.js
View File

@@ -72,42 +72,6 @@ function initPaintTools() {
document.getElementById('text-italic').classList.toggle('primary', textItalic);
});
setupCanvasForPainting();
// Ensure no tool is selected by default
updateToolUI();
}
function setActiveTool(tool, title) {
currentTool = tool;
updateToolUI();
setCanvasTitle(title);
// Cancel any pending text placement
cancelTextPlacement();
}
function updateToolUI() {
// Update UI to reflect active tool or no tool
document.getElementById('brush-mode').classList.toggle('active', currentTool === 'brush');
document.getElementById('eraser-mode').classList.toggle('active', currentTool === 'eraser');
document.getElementById('text-mode').classList.toggle('active', currentTool === 'text');
// Show/hide brush tools
document.querySelectorAll('.brush-tools').forEach(el => {
el.style.display = ['brush', 'eraser', 'text'].includes(currentTool) ? 'flex' : 'none';
});
document.getElementById('brush-color').disabled = currentTool === 'eraser';
document.getElementById('brush-size').disabled = currentTool === 'text';
// Show/hide text tools
document.querySelectorAll('.text-tools').forEach(el => {
el.style.display = currentTool === 'text' ? 'flex' : 'none';
});
}
function setupCanvasForPainting() {
canvas.addEventListener('mousedown', startPaint);
canvas.addEventListener('mousemove', paint);
canvas.addEventListener('mouseup', endPaint);
@@ -120,6 +84,25 @@ function setupCanvasForPainting() {
canvas.addEventListener('touchend', onTouchEnd);
}
function setActiveTool(tool, title) {
setCanvasTitle(title);
currentTool = tool;
canvas.parentNode.classList.toggle('brush-mode', currentTool === 'brush');
canvas.parentNode.classList.toggle('eraser-mode', currentTool === 'eraser');
canvas.parentNode.classList.toggle('text-mode', currentTool === 'text');
document.getElementById('brush-mode').classList.toggle('active', currentTool === 'brush');
document.getElementById('eraser-mode').classList.toggle('active', currentTool === 'eraser');
document.getElementById('text-mode').classList.toggle('active', currentTool === 'text');
document.getElementById('brush-color').disabled = currentTool === 'eraser';
document.getElementById('brush-size').disabled = currentTool === 'text';
// Cancel any pending text placement
cancelTextPlacement();
}
function startPaint(e) {
if (!currentTool) return;