优化控制面板，声音设置改为进度条
This commit is contained in:
涵曦
parent
13336cd02c
commit
24b46729e3
@ -22,6 +22,13 @@ def allcmds():
|
||||
return KEY_WORD_DICT
|
||||
|
||||
|
||||
@app.route("/getvolume")
|
||||
def getvolume():
|
||||
return {
|
||||
"volume": xiaomusic.get_volume(),
|
||||
}
|
||||
|
||||
|
||||
@app.route("/", methods=["GET"])
|
||||
def redirect_to_index():
|
||||
return send_from_directory("static", "index.html")
|
||||
|
||||
@ -1,69 +1,55 @@
|
||||
$(function(){
|
||||
// 拉取所有可操作的命令
|
||||
$.get("/allcmds", function(data, status) {
|
||||
console.log(data, status);
|
||||
$container=$("#cmds");
|
||||
append_op_button_name("下一首");
|
||||
append_op_button_name("全部循环");
|
||||
append_op_button_name("关机");
|
||||
append_op_button_name("单曲循环");
|
||||
append_op_button_name("播放歌曲");
|
||||
append_op_button_name("随机播放");
|
||||
|
||||
$container=$("#cmds");
|
||||
// 遍历数据
|
||||
for (const [key, value] of Object.entries(data)) {
|
||||
if (key != "分钟后关机"
|
||||
&& key != "放歌曲"
|
||||
&& key != "停止播放"
|
||||
&& !key.includes("#")) {
|
||||
append_op_button_name(key);
|
||||
}
|
||||
}
|
||||
$container.append($("<hr>"));
|
||||
|
||||
$container.append($("<hr>"));
|
||||
append_op_button_name("10分钟后关机");
|
||||
append_op_button_name("30分钟后关机");
|
||||
append_op_button_name("60分钟后关机");
|
||||
append_op_button_name("10分钟后关机");
|
||||
append_op_button_name("30分钟后关机");
|
||||
append_op_button_name("60分钟后关机");
|
||||
|
||||
$container.append($("<hr>"));
|
||||
append_op_button_volume("声音设为5", 5);
|
||||
append_op_button_volume("声音设为10", 10);
|
||||
append_op_button_volume("声音设为30", 30);
|
||||
append_op_button_volume("声音设为50", 50);
|
||||
append_op_button_volume("声音设为80", 80);
|
||||
append_op_button_volume("声音设为100", 100);
|
||||
// 拉取声音
|
||||
$.get("/getvolume", function(data, status) {
|
||||
console.log(data, status, data["volume"]);
|
||||
$("#volume").val(data.volume);
|
||||
});
|
||||
|
||||
function append_op_button_volume(name, value) {
|
||||
append_op_button(name, "set_volume#"+value);
|
||||
}
|
||||
function append_op_button_name(name) {
|
||||
append_op_button(name, name);
|
||||
}
|
||||
|
||||
function append_op_button(name, cmd) {
|
||||
// 创建按钮
|
||||
const $button = $("<button>");
|
||||
$button.text(name);
|
||||
$button.attr("type", "button");
|
||||
// 创建按钮
|
||||
const $button = $("<button>");
|
||||
$button.text(name);
|
||||
$button.attr("type", "button");
|
||||
|
||||
// 设置按钮点击事件
|
||||
$button.on("click", () => {
|
||||
// 发起post请求
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/cmd",
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify({"cmd": cmd}),
|
||||
success: () => {
|
||||
// 请求成功时执行的操作
|
||||
},
|
||||
error: () => {
|
||||
// 请求失败时执行的操作
|
||||
}
|
||||
});
|
||||
});
|
||||
// 设置按钮点击事件
|
||||
$button.on("click", () => {
|
||||
sendcmd(cmd);
|
||||
});
|
||||
|
||||
// 添加按钮到容器
|
||||
$container.append($button);
|
||||
// 添加按钮到容器
|
||||
$container.append($button);
|
||||
}
|
||||
|
||||
$("#play").on("click", () => {
|
||||
name = $("#music-name").val();
|
||||
let cmd = "播放歌曲"+name;
|
||||
sendcmd(cmd);
|
||||
});
|
||||
|
||||
$("#volume").on('input', function () {
|
||||
var value = $(this).val();
|
||||
sendcmd("set_volume#"+value);
|
||||
});
|
||||
|
||||
function sendcmd(cmd) {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/cmd",
|
||||
@ -76,5 +62,5 @@ $(function(){
|
||||
// 请求失败时执行的操作
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@ -10,13 +10,18 @@
|
||||
margin: 10px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
border: none; /* 无边框 */
|
||||
color: white; /* 白色文字 */
|
||||
text-align: center; /* 文字居中 */
|
||||
text-decoration: none; /* 无下划线 */
|
||||
display: inline-block; /* 行内块元素 */
|
||||
border-radius: 10px; /* 圆角 */
|
||||
background-color: #008CBA; /* 蓝色 */
|
||||
border: none;
|
||||
color: white;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
border-radius: 10px;
|
||||
background-color: #008CBA;
|
||||
}
|
||||
button:active {
|
||||
font-weight:bold;
|
||||
background-color: #007CBA;
|
||||
transform: translateY(2px);
|
||||
}
|
||||
input {
|
||||
margin: 10px;
|
||||
@ -31,6 +36,13 @@
|
||||
<div id="cmds">
|
||||
</div>
|
||||
<hr>
|
||||
<div style="margin-left: 20px;">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#8e43e7" style="height: 48px; width: 48px;"><path d="M550.826667 154.666667a47.786667 47.786667 0 0 0-19.84 4.48L298.666667 298.666667H186.453333A80 80 0 0 0 106.666667 378.453333v267.093334A80 80 0 0 0 186.453333 725.333333H298.666667l232.32 139.52a47.786667 47.786667 0 0 0 19.84 4.48A46.506667 46.506667 0 0 0 597.333333 822.826667V201.173333a46.506667 46.506667 0 0 0-46.506666-46.506666zM554.666667 822.826667c0 3.413333-3.84 3.84-3.84 3.84L320 688.853333l-9.6-6.186666H186.453333A37.12 37.12 0 0 1 149.333333 645.546667V378.453333A37.12 37.12 0 0 1 186.453333 341.333333h123.946667l10.24-6.186666 229.546667-137.6s3.84 0 3.84 3.84zM667.52 346.026667a21.333333 21.333333 0 0 0 0 30.293333 192 192 0 0 1 0 271.36 21.333333 21.333333 0 0 0 0 30.293333 21.333333 21.333333 0 0 0 30.293333 0 234.666667 234.666667 0 0 0 0-331.946666 21.333333 21.333333 0 0 0-30.293333 0z"></path><path d="M804.48 219.52a21.333333 21.333333 0 0 0-30.293333 30.293333 370.986667 370.986667 0 0 1 0 524.373334 21.333333 21.333333 0 0 0 0 30.293333 21.333333 21.333333 0 0 0 30.293333 0 414.08 414.08 0 0 0 0-584.96z"></path></svg>
|
||||
<input id="volume" type="range"></input>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<input id="music-name" type="text" placeholder="请输入歌曲名称"></input>
|
||||
<button id="play">播放</button>
|
||||
|
||||
@ -65,6 +65,7 @@ class XiaoMusic:
|
||||
self.cur_music = ""
|
||||
self._next_timer = None
|
||||
self._timeout = 0
|
||||
self._volume = 50
|
||||
|
||||
# 关机定时器
|
||||
self._stop_timer = None
|
||||
@ -516,4 +517,8 @@ class XiaoMusic:
|
||||
async def set_volume(self, **kwargs):
|
||||
value = kwargs["arg1"]
|
||||
await self.do_set_volume(value)
|
||||
self._volume = int(value)
|
||||
self.log.info(f"声音设置为{value}")
|
||||
|
||||
def get_volume(self):
|
||||
return self._volume
|
||||
|
||||
Loading…
Reference in New Issue
Block a user