整了个自动生成波形的小东西（测试）

README.md

@@ -19,6 +19,7 @@
 > 本项目**不会**向服务端传递`access_key_id`和`access_key_secret`，请自行修改服务端代码（可参考[服务端本地搭建指南](https://github.com/klxf/BLive_Coyote/issues/1)）。
 
 - [BLive Coyote Demo](https://blive-coyote.babyfang.cn/)
+- [波形助手](https://blive-coyote.babyfang.cn/waveHelper.html)
 
 ## 目录结构
 ```

src/App.vue

@@ -4,7 +4,14 @@
 import { ref } from "vue"
 import axios from "axios"
 import { createSocket, destroySocket } from "./socket/index"
-import { createCoyoteSocket, closeCoyoteSocket, qrcodeSrc, qrcodeShow } from "./socket/coyote"
+import {
+  createCoyoteSocket,
+  closeCoyoteSocket,
+  sendWaveData,
+  qrcodeSrc,
+  qrcodeShow,
+  addOrIncrease
+} from "./socket/coyote"
 import { Notyf } from 'notyf'
 
 const notyf = new Notyf({ duration: 3000 })
@@ -151,12 +158,17 @@ const handleDestroySocket = () => {
  * 测试按钮
  */
 const test = () => {
-  let map = {
-    "123": "AAWWWWW",
-    "123456": "aaaaaaaa",
+  const waveData = {
+    "test": `["0A0A0A0A00000000","0A0A0A0A00000000","0A0A0A0A00000000","0A0A0A0A00000000","0A0A0A0A00000000","0A0A0A0A00000000","0A0A0A0A00000000","0A0A0A0A00000000","0A0A0A0A01010101","0A0A0A0A01010101","0A0A0A0A22222222","0A0A0A0A22222222","0A0A0A0A43434343","0A0A0A0A43434343","0A0A0A0A64646464","0A0A0A0A64646464"]`
+  }
+  try {
+    sendWaveData(5, 5, waveData["test"], waveData["test"])
+    notyf.success("波形发送成功")
+  }
+  catch (e) {
+    console.log(e)
+    notyf.error("操作失败！")
   }
-  notyf.success({ message: '测试吐司', duration: 3000, ripple: true })
-  notyf.success({ message: map[123], duration: 3000, ripple: true })
 }
 
 /**

src/assets/dataMap.ts

@@ -4,7 +4,7 @@
 const waveData = {
     "31037": `["0A0A0A0A00000000","0A0A0A0A0A0A0A0A","0A0A0A0A14141414","0A0A0A0A1E1E1E1E","0A0A0A0A28282828","0A0A0A0A32323232","0A0A0A0A3C3C3C3C","0A0A0A0A46464646","0A0A0A0A50505050","0A0A0A0A5A5A5A5A","0A0A0A0A64646464"]`,
     "31164": `["0A0A0A0A00000000","0D0D0D0D0F0F0F0F","101010101E1E1E1E","1313131332323232","1616161641414141","1A1A1A1A50505050","1D1D1D1D64646464","202020205A5A5A5A","2323232350505050","262626264B4B4B4B","2A2A2A2A41414141"]`,
-    "32609": `["4A4A4A4A64646464","4545454564646464","4040404064646464","3B3B3B3B64646464","3636363664646464","3232323264646464","2D2D2D2D64646464","2828282864646464","2323232364646464","1E1E1E1E64646464","1A1A1A1A64646464"]`
+    "32609": `["4A4A4A4A64646464","4545454564646464","4040404064646464","3B3B3B3B64646464","3636363664646464","3232323264646464","2D2D2D2D64646464","2828282864646464","2323232364646464","1E1E1E1E64646464","1A1A1A1A64646464"]`,
 }
 
 // 礼物id和礼物名的对应关系

src/socket/coyote.ts

@@ -1,6 +1,5 @@
 import {ref} from "vue";
 import { Notyf } from 'notyf'
-import { waveData } from "../assets/dataMap";
 import QRCode from 'qrcode'
 
 const notyf = new Notyf({ duration: 4000 })
@@ -140,8 +139,11 @@ function sendWaveData(timeA, timeB, waveA, waveB) {
         return
     }
 
-    const msg1 = `A:${waveData[waveA]}`
-    const msg2 = `B:${waveData[waveB]}`
+    /*const msg1 = `A:${waveData[waveA]}`
+    const msg2 = `B:${waveData[waveB]}`*/
+
+    const msg1 = `A:${waveA}`
+    const msg2 = `B:${waveB}`
     const data = {
         type: "clientMsg", message: msg1, message2: msg2, time1: timeA, time2: timeB
     }

src/socket/index.ts

@@ -1,6 +1,7 @@
 import DanmakuWebSocket from "../assets/danmaku-websocket.min.js"
 import { Notyf } from 'notyf'
 import { closeCoyoteSocket, addOrIncrease, sendWaveData } from "./coyote"
+import { waveData } from "../assets/dataMap";
 
 let ws: DanmakuWebSocket
 const notyf = new Notyf({ duration: 4000 })
@@ -55,7 +56,7 @@ function createSocket(authBody: string, wssLinks: string[]) {
                 } else {
                     // 其他礼物，发送波形数据
                     try {
-                        sendWaveData(5, 5, res.data.gift_id, res.data.gift_id)
+                        sendWaveData(5, 5, waveData[res.data.gift_id], waveData[res.data.gift_id])
                         notyf.success("收到礼物" + res.data.gift_name)
                     }
                     catch (e) {

src/waveHelper.ts

@@ -0,0 +1,5 @@
+import { createApp } from "vue"
+import App from "./waveHelper.vue"
+
+createApp(App).mount("#app")
+

src/waveHelper.vue

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import {watch, reactive, ref, Ref} from "vue"
+import { Notyf } from 'notyf'
+
+type SliderGroup = {
+  sliders: number[];
+  autoStrength: boolean;
+};
+
+const notyf = new Notyf({ duration: 3000 })
+
+const sliderGroups: Ref<SliderGroup[]> = ref([
+  reactive({ sliders: [50, 50, 50, 50], autoStrength: true }),
+]);
+
+const inputFrequency = ref(0)
+
+const waveData = ref()
+
+// 监听默认的滑块组
+const defaultGroup = sliderGroups.value[0]
+watch([() => defaultGroup.sliders[0], () => defaultGroup.sliders[3]], ([first, last]) => {
+  // 计算中间两个滑块的值
+  if (defaultGroup.autoStrength) {
+    defaultGroup.sliders[1] = Math.floor(first + (last - first) / 3)
+    defaultGroup.sliders[2] = Math.floor(last - (last - first) / 3)
+  }
+})
+
+/**
+ * 处理频率数据
+ */
+function frequency() {
+  let frequency: number;
+  if (inputFrequency.value >= 10 && inputFrequency.value < 100) {
+    frequency = inputFrequency.value
+  } else if (inputFrequency.value >= 101 && inputFrequency.value < 600) {
+    frequency = (inputFrequency.value - 100)/5 + 100
+  } else if (inputFrequency.value >= 601 && inputFrequency.value <= 1000) {
+    frequency = (inputFrequency.value - 600)/10 + 200
+  } else {
+    frequency = 10
+  }
+
+  return Math.floor(frequency)
+}
+
+/**
+ * 处理强度数据
+ */
+function strength() {
+  // 获取两个 group
+  const groups = document.querySelectorAll('.group')
+  const strength: number[][] = []
+  groups.forEach(group => {
+    const sliders = group.querySelectorAll('.slider')
+    const groupStrength: number[] = []
+    sliders.forEach(slider => {
+      groupStrength.push(Number((slider as HTMLInputElement).value))
+    })
+    strength.push(groupStrength)
+  })
+  console.log(strength)
+  return strength
+}
+
+/**
+ * 处理强度数据
+ */
+function convertStrength(input) {
+  return input.map(value => {
+    const hexValue = parseInt(value).toString(16).padStart(2, "0").toUpperCase();
+    return hexValue.repeat(4);
+  }).reduce((acc, val) => acc.concat([val, val]), []);
+}
+
+/**
+ * 组合数据
+ */
+function combineData() {
+  const frequencyValues = frequency()
+  const strengthValues = strength()
+
+  // 将 frequencyValues 转为两位十六进制
+  const frequencyHEX = frequencyValues.toString(16).padStart(2, "0").repeat(4).toUpperCase()
+
+  // 将 strengthValues 转为两位十六进制
+  // const strengthHEX = strengthValues.map(group => {
+  //   return group.map(value => {
+  //     return parseInt(value).toString(16).padStart(2, "0").toUpperCase()
+  //   }).join('')
+  // })
+  const strengthHEX = strengthValues.map(group => {
+    return convertStrength(group)
+  }).flat()
+
+  waveData.value = strengthHEX.map(group => {
+    return (frequencyHEX + group)
+  })
+
+  console.log(waveData.value)
+}
+
+/**
+ * 新建滑块分组
+ */
+function newGroup() {
+  const newGroup = reactive({ sliders: [50, 50, 50, 50], autoStrength: true })
+  sliderGroups.value.push(newGroup)
+
+  // 监听第一个和最后一个滑块的值
+  watch([() => newGroup.sliders[0], () => newGroup.sliders[3]], ([first, last]) => {
+    if (newGroup.autoStrength) {
+      // 计算中间两个滑块的值
+      newGroup.sliders[1] = Math.floor(first + (last - first) / 3)
+      newGroup.sliders[2] = Math.floor(last - (last - first) / 3)
+    }
+  })
+}
+
+/**
+ * 删除滑块分组
+ */
+function deleteGroup(index: number) {
+  sliderGroups.value.splice(index, 1)
+}
+
+</script>
+
+<template>
+  <div>
+    <h2>波形助手</h2>
+    <div>
+      <h3>频率</h3>
+      <!-- 两个滑块的滑轨 -->
+      <input type="range" min="10" max="1000" step="1" v-model="inputFrequency"/>
+
+      <input type="number" placeholder="填写频率" v-model="inputFrequency"/>
+      <h3>强度</h3>
+      <div id="sliders">
+        <div class="group" v-for="(group, index) in sliderGroups" :key="index">
+          <button @click="deleteGroup(index)" style="position: absolute; padding: revert;">X</button>
+          <span style="position: absolute; margin-left: 32px;"><input type="checkbox" v-model="group.autoStrength">Auto</span>
+          <input type="range" min="0" max="100" v-model.number="group.sliders[0]" class="slider">
+          <input type="range" min="0" max="100" v-model.number="group.sliders[1]" class="slider" :disabled="group.autoStrength">
+          <input type="range" min="0" max="100" v-model.number="group.sliders[2]" class="slider" :disabled="group.autoStrength">
+          <input type="range" min="0" max="100" v-model.number="group.sliders[3]" class="slider">
+        </div>
+      </div>
+    </div>
+    <button @click="combineData">获取波形数据</button>
+    <button @click="newGroup">新建分组</button>
+    <div v-if="waveData">
+      <h3>波形数据</h3>
+      <div style="overflow-x: scroll;">{{ JSON.stringify(waveData) }}</div>
+    </div>
+  </div>
+</template>
+
+<style>
+#app {
+  color: #fff;
+  margin: 60px 50px;
+}
+#sliders {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.slider {
+  writing-mode: bt-lr; /* IE */
+  -webkit-appearance: slider-vertical; /* WebKit */
+  margin-top: 26px;
+  width: 8px;
+  height: 200px;
+  padding: 0 5px;
+}
+
+</style>

waveHelper.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="stylesheet" href="/css/style.css">
+    <link rel="stylesheet" href="/css/notyf.min.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>waveHelper</title>
+</head>
+<body>
+<div id="app"></div>
+
+<script type="module" src="/src/waveHelper.ts"></script>
+
+</body>
+</html>