147 lines
5.3 KiB
HTML
147 lines
5.3 KiB
HTML
<!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>频谱图+瀑布图的html页面</title>
|
|
</head>
|
|
<body>
|
|
<div id="waterfall" style="width: 100%; height: 100%"></div>
|
|
<script src="./lib/konva.2.4.2.min.js"></script>
|
|
<script src="./lib/jquery.3.6.0.min.js"></script>
|
|
<script src="./lib/lodash@4.17.21.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>
|