552 lines
17 KiB
HTML
552 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
|
/>
|
|
<title>设置页面</title>
|
|
<link
|
|
rel="apple-touch-icon"
|
|
sizes="180x180"
|
|
href="{{ url_for('static', filename='images/webapp/apple-touch-icon.png') }}"
|
|
/>
|
|
<link
|
|
rel="icon"
|
|
type="image/png"
|
|
sizes="32x32"
|
|
href="{{ url_for('static', filename='images/webapp/favicon-32x32.png') }}"
|
|
/>
|
|
<link
|
|
rel="icon"
|
|
type="image/png"
|
|
sizes="16x16"
|
|
href="{{ url_for('static', filename='images/webapp/favicon-16x16.png') }}"
|
|
/>
|
|
<link
|
|
rel="icon"
|
|
type="image/ico"
|
|
href="{{ url_for('static', filename='images/webapp/favicon.ico') }}"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="{{ url_for('static', filename='css/all.min.css') }}?v={{ time }}"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="{{ url_for('static', filename='css/common.css') }}?v={{ time }}"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="{{ url_for('static', filename='css/volume.css') }}?v={{ time }}"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="{{ url_for('static', filename='css/developer.css') }}?v={{ time }}"
|
|
/>
|
|
<!-- Prism.js CSS -->
|
|
<link
|
|
href="{{ url_for('static', filename='css/prism.min.css') }}"
|
|
rel="stylesheet"
|
|
/>
|
|
<script src="{{ url_for('static', filename='js/socketio/socket.io.min.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/i18n/jquery-3.7.1.min.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/i18n/jquery.i18n.min.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/i18n/setting-lang.js') }}"></script>
|
|
</head>
|
|
<body>
|
|
<div class="top-bar">
|
|
<a href="{{ url_for('home') }}" class="logo">
|
|
<img
|
|
src="{{ url_for('static', filename='images/common/首页.svg') }}"
|
|
alt="首页"
|
|
/>
|
|
</a>
|
|
|
|
<div class="volume-control" id="volume-control">
|
|
<!-- 背景 -->
|
|
<div class="volume-background"></div>
|
|
<!-- 音量值显示 -->
|
|
<div class="volume-value" id="volume-value">0%</div>
|
|
<!-- 可调节的白色底色 -->
|
|
<div class="volume-progress" id="volume-progress"></div>
|
|
<div class="volume-icon-box">
|
|
<img
|
|
id="volume-icon"
|
|
src="/static/images/volume/vol-mute.png"
|
|
alt="音量"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="date-time-container">
|
|
<div class="date-box">
|
|
<div class="weekday"></div>
|
|
<div class="date"></div>
|
|
</div>
|
|
<div class="time"></div>
|
|
</div>
|
|
<div class="right-section">
|
|
<div class="status" onclick="toggleConnection()">
|
|
<img
|
|
src="{{ url_for('static', filename='images/common/disconnected.svg') }}"
|
|
id="status-icon"
|
|
alt="Connection Status"
|
|
/>
|
|
<span id="status-text"></span>
|
|
</div>
|
|
<div class="shutdown" onclick="shutdownSystem()">
|
|
<img
|
|
src="{{ url_for('static', filename='images/common/shutdown.svg') }}"
|
|
id="shutdown-icon"
|
|
alt="Shutdown"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div id="settings-container">
|
|
<!-- 网络设置模块 -->
|
|
<div id="wifi-section" class="setting-section">
|
|
<div class="title">
|
|
<div class="left">配网设置</div>
|
|
<div class="right">
|
|
<div class="btn" id="scan-btn">扫描网络</div>
|
|
</div>
|
|
</div>
|
|
<div class="common-panel">
|
|
<div class="current-version">
|
|
<p>按摩机器人连接WIFI:</p>
|
|
<span id="wifi-txt"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 按摩头设置 -->
|
|
<div id="head-section" class="setting-section">
|
|
<div class="title">按摩头配置</div>
|
|
<div
|
|
class="common-panel"
|
|
style="flex-direction: column; align-items: flex-start"
|
|
>
|
|
<div class="head-selection">
|
|
<div class="head-option">
|
|
<input
|
|
type="checkbox"
|
|
id="head-thermotherapy"
|
|
name="head-option"
|
|
value="thermotherapy"
|
|
/>
|
|
<label for="head-thermotherapy">深部热疗</label>
|
|
</div>
|
|
<div class="head-option">
|
|
<input
|
|
type="checkbox"
|
|
id="head-shockwave"
|
|
name="head-option"
|
|
value="shockwave"
|
|
/>
|
|
<label for="head-shockwave">点阵按摩</label>
|
|
</div>
|
|
<div class="head-option">
|
|
<input
|
|
type="checkbox"
|
|
id="head-ball"
|
|
name="head-option"
|
|
value="ball"
|
|
/>
|
|
<label for="head-ball">全能滚珠</label>
|
|
</div>
|
|
<div class="head-option">
|
|
<input
|
|
type="checkbox"
|
|
id="head-finger"
|
|
name="head-option"
|
|
value="finger"
|
|
/>
|
|
<label for="head-finger">指疗通络</label>
|
|
</div>
|
|
<div class="head-option">
|
|
<input
|
|
type="checkbox"
|
|
id="head-roller"
|
|
name="head-option"
|
|
value="roller"
|
|
/>
|
|
<label for="head-roller">滚滚刺疗</label>
|
|
</div>
|
|
<div class="head-option">
|
|
<input
|
|
type="checkbox"
|
|
id="head-stone"
|
|
name="head-option"
|
|
value="stone"
|
|
/>
|
|
<label for="head-stone">温砭舒揉</label>
|
|
</div>
|
|
<div class="head-option">
|
|
<input
|
|
type="checkbox"
|
|
id="head-ion"
|
|
name="head-option"
|
|
value="ion"
|
|
/>
|
|
<label for="head-ion">离子光灸</label>
|
|
</div>
|
|
<div class="head-option">
|
|
<input
|
|
type="checkbox"
|
|
id="head-heat"
|
|
name="head-option"
|
|
value="heat"
|
|
/>
|
|
<label for="head-heat">能量热疗</label>
|
|
</div>
|
|
<div class="head-option">
|
|
<input
|
|
type="checkbox"
|
|
id="head-spheres"
|
|
name="head-option"
|
|
value="spheres"
|
|
/>
|
|
<label for="head-spheres">天球滚捏</label>
|
|
</div>
|
|
</div>
|
|
<div class="common-panel-btn" id="save-heads-btn">保存设置</div>
|
|
</div>
|
|
</div>
|
|
<!-- 机械臂按摩模式 -->
|
|
<div id="mode-section" class="setting-section">
|
|
<div class="title">机械臂按摩模式</div>
|
|
<div class="common-panel">
|
|
<div class="common-panel-btn" id="jump-toggle-btn">机械臂跳跃模式切换</div>
|
|
<div>跳跃模式：<span id="jump-text"></span></div>
|
|
</div>
|
|
</div>
|
|
<!-- 测试和打包模块 -->
|
|
<div id="develop-section" class="setting-section">
|
|
<div class="title">测试和打包</div>
|
|
<div class="common-panel">
|
|
<div class="common-panel-btn" id="develop-btn">
|
|
虚拟模式开关按钮
|
|
</div>
|
|
<div>虚拟模式：<span id="mode-real-text"></span></div>
|
|
|
|
<div id="change-power">
|
|
<div class="common-panel-btn" id="change-power-btn">
|
|
切换力控方式
|
|
</div>
|
|
<div>力控方式：<span id="change-power-text"></span></div>
|
|
</div>
|
|
</div>
|
|
<div class="common-panel" style="margin-top: 10px">
|
|
<div class="common-panel-btn" id="load-btn">循环模式开关按钮</div>
|
|
<div>循环模式：<span id="load-text"></span></div>
|
|
</div>
|
|
<div class="common-panel" style="margin-top: 10px">
|
|
<div class="common-panel-btn" id="robot-pack-btn">打包模式</div>
|
|
</div>
|
|
</div>
|
|
<!-- 日志查看模块 -->
|
|
<div id="log-section" class="setting-section">
|
|
<div class="title">日志查看</div>
|
|
<div class="common-panel">
|
|
<div class="common-panel-btn" id="massage-log-btn">Massage Log</div>
|
|
<div class="common-panel-btn" id="ui-log-btn">UI Log</div>
|
|
<div class="common-panel-btn" id="language-log-btn">
|
|
Language Log
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="auto-calibration-section" class="setting-section">
|
|
<div class="title">自动标定</div>
|
|
<div class="common-panel">
|
|
<div class="common-panel-btn" id="show-board-btn">显示棋盘</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<img
|
|
id="board-img"
|
|
style="
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
object-fit: contain;
|
|
background: white;
|
|
z-index: 1000;
|
|
"
|
|
src="{{ url_for('static', filename='images/setting/board.svg') }}"
|
|
alt=""
|
|
/>
|
|
<div
|
|
id="calibration-controls"
|
|
style="
|
|
display: none;
|
|
position: fixed;
|
|
right: 20px;
|
|
bottom: 20px;
|
|
z-index: 1001;
|
|
"
|
|
>
|
|
<button
|
|
id="start-calibration-btn"
|
|
class="common-panel-btn"
|
|
style="
|
|
background: rgba(145, 66, 197, 0.8);
|
|
color: white;
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
"
|
|
>
|
|
开始标定
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 标定结果弹窗 -->
|
|
<div
|
|
id="calibration-result-modal"
|
|
style="
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 2000;
|
|
"
|
|
>
|
|
<div
|
|
style="
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
width: 80%;
|
|
max-width: 600px;
|
|
"
|
|
>
|
|
<h3
|
|
style="
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
color: rgba(145, 66, 197, 1);
|
|
"
|
|
>
|
|
标定结果
|
|
</h3>
|
|
<div style="margin-bottom: 20px">
|
|
<h4 style="margin-bottom: 10px">旋转矩阵：</h4>
|
|
<pre
|
|
id="rotation-matrix-result"
|
|
style="
|
|
background: #f5f5f5;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
overflow-x: auto;
|
|
white-space: pre-wrap;
|
|
font-family: monospace;
|
|
"
|
|
></pre>
|
|
</div>
|
|
<div style="margin-bottom: 20px">
|
|
<h4 style="margin-bottom: 10px">平移向量：</h4>
|
|
<pre
|
|
id="translation-vector-result"
|
|
style="
|
|
background: #f5f5f5;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
overflow-x: auto;
|
|
white-space: pre-wrap;
|
|
font-family: monospace;
|
|
"
|
|
></pre>
|
|
</div>
|
|
<div style="margin-bottom: 20px">
|
|
<h4 style="margin-bottom: 10px">相机内参：</h4>
|
|
<pre
|
|
id="intrinsics-result"
|
|
style="
|
|
background: #f5f5f5;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
overflow-x: auto;
|
|
white-space: pre-wrap;
|
|
font-family: monospace;
|
|
"
|
|
></pre>
|
|
</div>
|
|
<div
|
|
style="
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
"
|
|
>
|
|
<button
|
|
onclick="saveCalibrationResult()"
|
|
class="common-panel-btn"
|
|
style="
|
|
background: rgba(145, 66, 197, 0.8);
|
|
color: white;
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
"
|
|
>
|
|
保存
|
|
</button>
|
|
<button
|
|
onclick="cancelCalibrationResult()"
|
|
class="common-panel-btn"
|
|
style="
|
|
background: #666;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
"
|
|
>
|
|
取消
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- wifi弹窗 -->
|
|
<div id="wifi-modal">
|
|
<div id="modal-level" class="modal"></div>
|
|
<div class="wifi-box">
|
|
<div class="wifi-box-header common-wifi-box">
|
|
<div class="img-box">
|
|
<img
|
|
class="wifi-img"
|
|
src="{{ url_for('static', filename='images/setting/wifi.svg') }}"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="wifi-title">WI-FI</div>
|
|
<div class="wifi-desc">为按摩机器人连接WIFI</div>
|
|
<div class="wifi-item my-wifi" id="my-wifi">
|
|
<div class="wifi-is-connected">
|
|
<img
|
|
src="{{ url_for('static', filename='images/setting/right.png') }}"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div id="wifi-name" class="wifi-name"></div>
|
|
<div class="right-content">
|
|
<div class="is-locked">
|
|
<img
|
|
src="{{ url_for('static', filename='images/setting/lock.png') }}"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="wifi-type">
|
|
<img
|
|
src="{{ url_for('static', filename='images/setting/wifi.png') }}"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="wifi-box-subtitle">
|
|
<div class="subtitle-text">其他网络</div>
|
|
<div id="rescan-btn" class="rescan-btn">
|
|
<img
|
|
src="{{ url_for('static', filename='images/setting/rescan.png') }}"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="wifi-box-content common-wifi-box">
|
|
<div id="wifi-list"></div>
|
|
</div>
|
|
<!-- <div class="wifi-box-footer common-wifi-box"></div> -->
|
|
</div>
|
|
</div>
|
|
|
|
<div id="pwd-modal" class="pwd-modal">
|
|
<div class="modal-content">
|
|
<div i18n="popup.title"></div>
|
|
<input id="pwd-input" type="password" />
|
|
<div class="model-btn">
|
|
<button
|
|
id="pwd-confirm-btn"
|
|
onclick="pwdConfirm()"
|
|
i18n="popup.confirm_btn"
|
|
>
|
|
确认
|
|
</button>
|
|
<button
|
|
id="pwd-cancel-btn"
|
|
onclick="pwdCancel()"
|
|
i18n="popup.cancel_btn"
|
|
>
|
|
取消
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Popup Modal -->
|
|
<div id="popup-modal" class="popup-modal">
|
|
<div class="popup-content">
|
|
<p id="popup-message">这里是消息内容</p>
|
|
<div id="popup-buttons">
|
|
<button
|
|
id="confirm-btn"
|
|
onclick="confirmAction()"
|
|
i18n="popup.confirm_btn"
|
|
>
|
|
确认
|
|
</button>
|
|
<button
|
|
id="cancel-btn"
|
|
onclick="cancelAction()"
|
|
i18n="popup.cancel_btn"
|
|
>
|
|
取消
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 日志弹窗 -->
|
|
<div id="log-modal" class="log-modal">
|
|
<div class="log-bg" id="log-bg"></div>
|
|
<div class="log-content">
|
|
<div class="log-operation">
|
|
<input type="text" id="log-input" />
|
|
<button class="log-btn" id="log-search">搜索</button>
|
|
<button class="log-btn" id="log-refresh">刷新</button>
|
|
</div>
|
|
<div class="log-text" id="log-text"></div>
|
|
<!-- 加载指示器 -->
|
|
<div id="loading-indicator" style="display: none">加载中...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../static/js/common.js"></script>
|
|
<script src="{{ url_for('static', filename='js/prism.min.js') }}?v={{ time }}"></script>
|
|
|
|
<script src="{{ url_for('static', filename='js/developer.js') }}?v={{ time }}"></script>
|
|
<script src="{{ url_for('static', filename='js/set_volume.js') }}?v={{ time }}"></script>
|
|
</body>
|
|
</html>
|