mirror of
https://github.com/tsl0922/EPD-nRF5.git
synced 2025-12-07 15:52:49 +08:00
105 lines
4.6 KiB
HTML
105 lines
4.6 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>4.2 寸电子墨水屏蓝牙控制器</title>
|
||
<link rel="stylesheet" href="css/main.css?v=20250412">
|
||
</head>
|
||
|
||
<body>
|
||
<div class="main">
|
||
<h3>4.2 寸电子墨水屏蓝牙控制器</h3>
|
||
<fieldset>
|
||
<legend>蓝牙连接</legend>
|
||
<div class="flex-container">
|
||
<div class="flex-group">
|
||
<button id="connectbutton" type="button" class="primary" onclick="preConnect()">连接</button>
|
||
<button id="reconnectbutton" type="button" class="secondary" onclick="reConnect()">重连</button>
|
||
<button type="button" class="secondary" onclick="clearLog()">清空日志</button>
|
||
</div>
|
||
<div class="flex-group debug">
|
||
<label for="epddriver">驱动</label>
|
||
<select id="epddriver" onchange="filterDitheringOptions()">
|
||
<option value="01">UC8176（黑白屏）</option>
|
||
<option value="03">UC8176（三色屏）</option>
|
||
<option value="05">UC8276（三色屏）</option>
|
||
<option value="04">SSD1619（黑白屏）</option>
|
||
<option value="02">SSD1619（三色屏）</option>
|
||
<option value="04">SSD1683（黑白屏）</option>
|
||
<option value="02">SSD1683（三色屏）</option>
|
||
</select>
|
||
</div>
|
||
<div class="flex-group debug">
|
||
<label for="epdpins">引脚</label>
|
||
<input id="epdpins" type="text" value="">
|
||
<button id="setDriverbutton" type="button" class="primary" onclick="setDriver()">确认</button>
|
||
</div>
|
||
<div class="flex-group">
|
||
<button id="calendarmodebutton" type="button" class="primary" onclick="syncTime(1)">日历模式</button>
|
||
<button id="clockmodebutton" type="button" class="primary" onclick="syncTime(2)">时钟模式</button>
|
||
<button id="clearscreenbutton" type="button" class="secondary" onclick="clearScreen()">清除屏幕</button>
|
||
</div>
|
||
<div class="flex-group debug">
|
||
<input type="text" id="cmdTXT" value="">
|
||
<button id="sendcmdbutton" type="button" class="primary" onclick="sendcmd()">发送命令</button>
|
||
</div>
|
||
</div>
|
||
<div id="log"></div>
|
||
</fieldset>
|
||
|
||
<fieldset>
|
||
<legend>蓝牙传图</legend>
|
||
<div class="flex-container">
|
||
<input type="file" id="image_file" onchange="update_image()" accept=".png,.jpg,.bmp,.webp,.jpeg">
|
||
</div>
|
||
<div class="flex-container">
|
||
<div class="flex-group">
|
||
<label for="dithering">取模算法</label>
|
||
<select id="dithering" title="取模算法" onchange="update_image()">
|
||
<optgroup data-driver="01|04" label="黑白">
|
||
<option value="none">二值化</option>
|
||
<option value="bayer">bayer</option>
|
||
<option value="floydsteinberg">floydsteinberg</option>
|
||
<option value="Atkinson">Atkinson</option>
|
||
</optgroup>
|
||
<optgroup id="dithering-bwr" data-driver="02|03|05" label="三色">
|
||
<option value="bwr_floydsteinberg">黑白红floydsteinberg</option>
|
||
<option value="bwr_Atkinson">黑白红Atkinson</option>
|
||
</optgroup>
|
||
</select>
|
||
</div>
|
||
<div class="flex-group">
|
||
<label for="threshold">阈值</label>
|
||
<input type="number" max="255" min="0" value="125" id="threshold" onchange="update_image()">
|
||
</div>
|
||
<div class="flex-group debug">
|
||
<label for="mtusize">MTU</label>
|
||
<input type="number" id="mtusize" value="20" min="0" max="255">
|
||
<label for="interleavedcount">确认间隔</label>
|
||
<input type="number" id="interleavedcount" value="50" min="0" max="500">
|
||
</div>
|
||
</div>
|
||
<div class="status-bar"><b>状态：</b><span id="status"></span></div>
|
||
<div class="flex-container">
|
||
<div class="flex-group">
|
||
<button id="clearcanvasbutton" type="button" class="secondary" onclick="clear_canvas()">清除画布</button>
|
||
<button id="sendimgbutton" type="button" class="primary" onclick="sendimg()">发送图片</button>
|
||
</div>
|
||
</div>
|
||
<canvas id="canvas" width="400" height="300"></canvas>
|
||
</fieldset>
|
||
<div class="footer">
|
||
<span class="copy">© 2025 tsl0922.</span>
|
||
<span class="links">
|
||
<a href="https://github.com/tsl0922/EPD-nRF5">Github</a>
|
||
<a href="https://qm.qq.com/q/SckzhfDxuu">交流群</a>
|
||
<a href="?debug=true" id="debug-toggle">开发模式</a>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<script type="text/javascript" src="js/dithering.js?v=20250318"></script>
|
||
<script type="text/javascript" src="js/main.js?v=20250412"></script>
|
||
</body>
|
||
|
||
</html> |