duoji

index.html

@@ -241,8 +241,8 @@
         <div class="mod-tab">
           <div class="header">
             <button class="tab_top active button1">基本控制</button>
-            <button class="tab_top button2">电机控制</button>
-            <button class="tab_top button3">舵机控制</button>
+            <button class="tab_top button2">舵机控制</button>
+            <button class="tab_top button3">电机控制</button>
           </div>
           <div class="content">
             <div class="panel active">
@@ -343,83 +343,148 @@
               >
                 <div class="single">
                   <p>ID</p>
-                  <input type="text" class="input" />
+                  <input type="text" class="input" id="duoji_id" />
                 </div>
                 <div
                   class="single"
                   style="margin-left: 10px; margin-right: 5px"
                 >
                   <p>BASE</p>
-                  <input type="text" class="input" />
+                  <input type="text" class="input" id="duoji_base" />
                 </div>
                 <div
                   class="single"
                   style="margin-left: 5px; margin-right: 10px"
                 >
                   <p>OFFSET</p>
-                  <input type="text" class="input" />
+                  <input type="text" class="input" id="duoji_offset" />
                 </div>
               </div>
               <div class="card_container">
                 <h3 class="title">状态</h3>
                 <div class="form">
                   <p class="label">异常</p>
-                  <input type="text" class="input" />
-                  <button class="btn">读</button>
+                  <input type="text" class="input" id="duoji_exception" />
+                  <button
+                    class="btn"
+                    onclick="readValue('#duoji_exception', 'read')"
+                  >
+                    读
+                  </button>
                 </div>
                 <div class="form">
                   <p class="label">状态</p>
-                  <input type="text" class="input" />
-                  <button class="btn">读</button>
+                  <input type="text" class="input" id="duoji_status" />
+                  <button
+                    class="btn"
+                    onclick="readValue('#duoji_status', 'read')"
+                  >
+                    读
+                  </button>
                 </div>
                 <div class="form">
                   <p class="label">位置</p>
-                  <input type="text" class="input" />
-                  <button class="btn">读</button>
+                  <input type="text" class="input" id="duoji_position" />
+                  <button
+                    class="btn"
+                    onclick="readValue('#duoji_position', 'read')"
+                  >
+                    读
+                  </button>
                 </div>
               </div>
               <div class="card_container">
                 <h3 class="title">配置</h3>
                 <div class="form">
                   <p class="label">反复运动启始位置</p>
-                  <input type="text" class="input_config" />
-                  <button class="btn">读</button>
-                  <button class="btn">写</button>
+                  <input type="text" id="duoji_config_1" class="input_config" />
+                  <button
+                    class="btn"
+                    onclick="readValue('#duoji_config_1', 'read')"
+                  >
+                    读
+                  </button>
+                  <button
+                    class="btn"
+                    onclick="readValue('#duoji_config_1', 'write')"
+                  >
+                    写
+                  </button>
                 </div>
                 <div class="form">
                   <p class="label">反复运动终止位置</p>
-                  <input type="text" class="input_config" />
-                  <button class="btn">读</button>
-                  <button class="btn">写</button>
+                  <input type="text" class="input_config" id="duoji_config_2" />
+                  <button
+                    class="btn"
+                    onclick="readValue('#duoji_config_2', 'read')"
+                  >
+                    读
+                  </button>
+                  <button
+                    class="btn"
+                    onclick="readValue('#duoji_config_2', 'write')"
+                  >
+                    写
+                  </button>
                 </div>
                 <div class="form">
                   <p class="label">运行时速度配置</p>
-                  <input type="text" class="input_config" />
-                  <button class="btn">读</button>
-                  <button class="btn">写</button>
+                  <input type="text" class="input_config" id="duoji_config_3" />
+                  <button
+                    class="btn"
+                    onclick="readValue('#duoji_config_3', 'read')"
+                  >
+                    读
+                  </button>
+                  <button
+                    class="btn"
+                    onclick="readValue('#duoji_config_3', 'write')"
+                  >
+                    写
+                  </button>
                 </div>
               </div>
               <div class="card_container">
                 <h3 class="title">动作</h3>
                 <div class="form">
                   <p class="label">舵机移动到角度</p>
-                  <input type="text" class="input" />
-                  <button class="btn">写</button>
+                  <input type="text" class="input" id="duoji_move_1" />
+                  <button
+                    class="btn"
+                    onclick="readValue('#duoji_move_1', 'write')"
+                  >
+                    写
+                  </button>
                 </div>
                 <div class="form">
                   <p class="label">舵机停止</p>
-                  <input type="text" class="input" />
-                  <button class="btn">写</button>
+                  <input type="text" class="input" id="duoji_move_2" />
+                  <button
+                    class="btn"
+                    onclick="readValue('#duoji_move_2', 'write')"
+                  >
+                    写
+                  </button>
                 </div>
                 <div class="form">
                   <p class="label">清除异常</p>
-                  <input type="text" class="input" />
-                  <button class="btn">写</button>
+                  <input type="text" class="input" id="duoji_move_3" />
+                  <button
+                    class="btn"
+                    onclick="readValue('#duoji_move_3', 'write')"
+                  >
+                    写
+                  </button>
                 </div>
                 <div class="form">
                   <p class="label">反复运动</p>
-                  <input type="text" class="input" />
-                  <button class="btn">写</button>
+                  <input type="text" class="input" id="duoji_move_4" />
+                  <button
+                    class="btn"
+                    onclick="readValue('#duoji_move_4', 'write')"
+                  >
+                    写
+                  </button>
                 </div>
               </div>
             </div>
@@ -824,4 +889,28 @@
       });
     });
   </script>
+  <script>
+    // 舵机封装读写方法
+    const readValue = (id, type) => {
+      const duoId = document.querySelector("#duoji_id");
+      const duoBase = document.querySelector("#duoji_base");
+      const duoOff = document.querySelector("#duoji_offset");
+      const ele = document.querySelector(id);
+      const { protocol, message } = commonMessage;
+      const msg = JSON.stringify({
+        protocol,
+        message: {
+          ...message,
+          targetId: parseInt(duoId.value),
+          ctrlPointAddr: parseInt(duoBase.value) + parseInt(duoOff.value),
+          ctrlPointVal: parseInt(ele.value),
+          type,
+        },
+      });
+      sendOrder(msg);
+    };
+  </script>
+  <script>
+    // 电机js
+  </script>
 </html>