html-page

2025-04-09 18:01:33 +08:00
parent 0dcc47519f
commit 4e56d311f1
15 changed files with 8095 additions and 81 deletions
--- a/public/html-page/Spectrogram.html
+++ b/public/html-page/Spectrogram.html
@ -0,0 +1,147 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div id="waterfall" style="width: 100%; height: 100%"></div>
+    <script src="./lib/konva.2.4.2.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
+    <script src="./lib/jquery.resize.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
+    <script src="colormapwidget.js"></script>
+    <script src="waterfallwidget.js"></script>
+    <script>
+      // 定义默认配置对象
+      const payload = {
+        minFreq: 0,
+        maxFreq: 200000000,
+        rtmode: 0,
+        doppler: false,
+        adjShow: true,
+        adjMaxbw: 100000,
+        enableWfBuff: false,
+        unitId: 0,
+        coorFreqType: 0,
+        showFreqLable: true,
+        wfFreqPointLable: true,
+        wfFreqPointLableList: [],
+        showWhitelist: false,
+        waveSplite: 0.5,
+      };
+
+      const wfOption = {
+        wfRulerEnable: true,
+        wfTheme: 'default',
+        wfRulerGravity: true,
+        wfRulerLocation: -100,
+        wfMindB: -120,
+        wfMaxdB: 0,
+        showPeakMarker: true,
+        wfShowAvg: true,
+        wfShowMin: false,
+        wfShowMax: false,
+        wfInfoPos: 0,
+        wfCurLine: true,
+        specColor: '#00ff00',
+        specAvgColor: '#ffff00',
+        specMaxColor: '#ff0000',
+        specMinColor: '#0000ff',
+        afterGlowColor: '#00ffff',
+        wfAdjStepType: 0,
+        wfAdjStep: 1000,
+      };
+
+      // 模拟频谱数据
+      const generateFakeData = (len) => {
+        const data = [];
+        for (let i = 0; i < len; i++) {
+          data.push(-80 - Math.random() * 20);
+        }
+        return data;
+      };
+      const id = 'waterfall';
+
+      // 定义 label_manager
+      const pl = {
+        label_manager: {
+          labels: [
+            // 这里可以添加一些示例标签，或者保持为空
+            // { name: 'FM', id: 'id1', bg_color: '#2bffc6', fore_color: '#000', location: 80000000, bw: 100000 },
+            // { name: 'AM', id: 'id2', bg_color: '#2bffc6', fore_color: '#000', location: 90000000, bw: 10000 },
+            // { name: 'AM', id: 'id2', bg_color: '#ff0000', fore_color: '#ff0000', location: 90000000, bw: 10000 },
+          ],
+          onclick: function (label) {
+            console.log('Label clicked:', label);
+          },
+          load: function (start, end) {
+            // 简单的 load 实现，可以根据需要扩展
+            console.log(`Loading labels for range: ${start} - ${end}`);
+            // return this.labels.filter(label => label.location >= start && label.location <= end);
+            return []; // 返回空数组以避免依赖 this.labels
+          },
+        },
+      };
+
+      // 初始化频谱图组件
+      this.waterWidget = new waterfallwidget(id, {
+        wfOption: wfOption,
+        min_freq: payload.minFreq, //全局最小频率
+        max_freq: payload.maxFreq, //全局最大频率
+        min_band: 500, //最小选择带宽
+        max_band: 100000, //最大选择带宽
+        min_db: wfOption.wfMindB, //全局最小增益
+        max_db: wfOption.wfMaxdB, //全局最大增益
+        showPeakMarker: wfOption.showPeakMarker, //是否显示极值标注
+        showSpectrogramAvg: wfOption.wfShowAvg, //是否显示平均保持
+        showSpectrogramMin: wfOption.wfShowMin, //是否显示最小保持
+        showSpectrogramMax: wfOption.wfShowMax, //是否显示最大保持
+        spec_per: payload.waveSplite, //波形图占比
+        menuEnableHandle: this.getAnalysisRun,
+        menuDisableText: '---',
+        menuDoppler: payload.doppler,
+        allowRunMode: payload.rtmode, //实时选择模式
+        //allowCycleControl: payload.allowCycleControl,
+        info_Position: wfOption.wfInfoPos,
+        showCurLine: wfOption.wfCurLine,
+        adj_maxbw: payload.adjMaxbw,
+        adj_show: payload.adjShow,
+        fucFFTBuff: payload.enableWfBuff ? this.fucFFTBuff.bind(this) : null,
+        unitBuffId: payload.unitId,
+        wave_color: wfOption.specColor,
+        wave_color_avg: wfOption.specAvgColor,
+        wave_color_max: wfOption.specMaxColor,
+        wave_color_min: wfOption.specMinColor,
+        waveAfterglow_color: wfOption.afterGlowColor,
+        adj_step: wfOption.wfAdjStepType == 1 ? 0 : wfOption.wfAdjStep,
+        label_manager: pl.label_manager,
+        coorFreqType: payload.coorFreqType,
+        showFreqLable: payload.showFreqLable, //是否显示高亮频点
+        wfFreqPointLable: payload.wfFreqPointLable, //是否显示频点标注
+        wfFreqPointLableList: payload.wfFreqPointLableList, //频点标注数据
+        showWhitelist: payload.showWhitelist, //黑名单频谱阴影显示
+      });
+      // 监听用户框选范围变更事件
+      this.waterWidget.on('zoom-change', (e) => {
+        console.log('频率范围变更:', e.start, e.end);
+      });
+
+      // 生成模拟数据并更新频谱图
+      const updateData = () => {
+        const data = generateFakeData(100 /* 0 */);
+        console.debug(`data :>> `, data);
+        const time = new Date().toLocaleTimeString();
+        this.waterWidget.addData(data, time);
+      };
+
+      // 首次更新
+      updateData();
+
+      // 定期更新数据
+      setInterval(updateData, 1000);
+    </script>
+  </body>
+</html>