优化控制面板，声音设置改为进度条

xiaomusic/httpserver.py

@@ -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")

xiaomusic/static/app.js

@@ -1,69 +1,55 @@
 $(function(){
-  // 拉取所有可操作的命令
+  $container=$("#cmds");
-  $.get("/allcmds", function(data, status) {
+  append_op_button_name("下一首");
-    console.log(data, status);
+  append_op_button_name("全部循环");
+  append_op_button_name("关机");
+  append_op_button_name("单曲循环");
+  append_op_button_name("播放歌曲");
+  append_op_button_name("随机播放");
 
-    $container=$("#cmds");
+  $container.append($("<hr>"));
-    // 遍历数据
-    for (const [key, value] of Object.entries(data)) {
-      if (key != "分钟后关机"
-        && key != "放歌曲"
-        && key != "停止播放"
-        && !key.includes("#")) {
-        append_op_button_name(key);
-      }
-    }
 
-    $container.append($("<hr>"));
+  append_op_button_name("10分钟后关机");
-    append_op_button_name("10分钟后关机");
+  append_op_button_name("30分钟后关机");
-    append_op_button_name("30分钟后关机");
+  append_op_button_name("60分钟后关机");
-    append_op_button_name("60分钟后关机");
 
-    $container.append($("<hr>"));
+  // 拉取声音
-    append_op_button_volume("声音设为5", 5);
+  $.get("/getvolume", function(data, status) {
-    append_op_button_volume("声音设为10", 10);
+    console.log(data, status, data["volume"]);
-    append_op_button_volume("声音设为30", 30);
+    $("#volume").val(data.volume);
-    append_op_button_volume("声音设为50", 50);
-    append_op_button_volume("声音设为80", 80);
-    append_op_button_volume("声音设为100", 100);
   });
 
-  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>");
+    const $button = $("<button>");
-      $button.text(name);
+    $button.text(name);
-      $button.attr("type", "button");
+    $button.attr("type", "button");
 
-      // 设置按钮点击事件
+    // 设置按钮点击事件
-      $button.on("click", () => {
+    $button.on("click", () => {
-        // 发起post请求
+      sendcmd(cmd);
-        $.ajax({
+    });
-          type: "POST",
-          url: "/cmd",
-          contentType: "application/json",
-          data: JSON.stringify({"cmd": cmd}),
-          success: () => {
-            // 请求成功时执行的操作
-          },
-          error: () => {
-            // 请求失败时执行的操作
-          }
-        });
-      });
 
-      // 添加按钮到容器
+    // 添加按钮到容器
-      $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(){
         // 请求失败时执行的操作
       }
     });
-  });
+  }
 });

xiaomusic/static/index.html

@@ -10,13 +10,18 @@
           margin: 10px;
           width: 100px;
           height: 50px;
-          border: none; /* 无边框 */
+          border: none;
-          color: white; /* 白色文字 */
+          color: white;
-          text-align: center; /* 文字居中 */
+          text-align: center;
-          text-decoration: none; /* 无下划线 */
+          text-decoration: none;
-          display: inline-block; /* 行内块元素 */
+          display: inline-block;
-          border-radius: 10px; /* 圆角 */
+          border-radius: 10px;
-          background-color: #008CBA; /* 蓝色 */
+          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>

xiaomusic/xiaomusic.py

@@ -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