ws50529
1944 lines
89 KiB
JavaScript
Executable File
1944 lines
89 KiB
JavaScript
Executable File
import StageEditor from './components/StageEditor.vue';
|
|
import { computeStageFixedCoeffs, createCascadeFilterPayload, normalizeCascadeStage } from './cascade-stage.js';
|
|
const DEFAULT_FILTER_TYPE = "Lowpass (低通)";
|
|
const MANUAL_FILTER_TYPE = "(無) 手動自訂";
|
|
const DEFAULT_FS = 100000.0;
|
|
const DEFAULT_B_STR = "0.5, 0.5, 0.0, 0.0";
|
|
const DEFAULT_A_STR = "1.0, 0.0, 0.0, 0.0";
|
|
const DEFAULT_SHIFT_BITS = 14;
|
|
const ZERO_7 = [0, 0, 0, 0, 0, 0, 0];
|
|
const DEFAULT_PARAMS = {
|
|
fc: 1000.0, order: 1,
|
|
bp_f_low: 500.0, bp_f_high: 2000.0, bp_order: 1,
|
|
notch_f0: 120.0, notch_q: 1.0,
|
|
opoz_fz: 15000.0, opoz_fp: 10.0,
|
|
tp1z_fz: 200.0, tp1z_fp1: 10.0, tp1z_fp2: 5000.0,
|
|
tptz_fz1: 200.0, tptz_fz2: 25000.0, tptz_fp1: 10.0, tptz_fp2: 5000.0,
|
|
kp: 0.003, ki: 10.0, kd: 0.000016,
|
|
sogi_f0: 60.0, sogi_k: 1.414,
|
|
};
|
|
|
|
const cloneDefaultParams = () => ({ ...DEFAULT_PARAMS });
|
|
const zero7 = () => [...ZERO_7];
|
|
const createStageId = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`;
|
|
|
|
export default {
|
|
components: {
|
|
StageEditor,
|
|
},
|
|
data() {
|
|
return {
|
|
fs: DEFAULT_FS,
|
|
b_str: DEFAULT_B_STR,
|
|
a_str: DEFAULT_A_STR,
|
|
filterType: DEFAULT_FILTER_TYPE,
|
|
cascadeStages: [],
|
|
activeCascadeStageIndex: 0,
|
|
draggingCascadeStageIndex: null,
|
|
dragOverCascadeStageIndex: null,
|
|
stageDragPointerId: null,
|
|
draggedCascadeStageId: null,
|
|
stageDragStartX: 0,
|
|
stageDragStartY: 0,
|
|
stageDragCurrentX: 0,
|
|
stageDragCurrentY: 0,
|
|
zoomStartIdx: null, zoomEndIdx: null,
|
|
timePlotUnit: null,
|
|
timePlotMultiplier: null,
|
|
isRedrawingTimePlot: false,
|
|
filterOptions: [
|
|
"Lowpass (低通)", "Highpass (高通)", "Bandpass (帶通)",
|
|
"Notch (陷波器)", "1P1Z (一極一零)", "2P1Z (二極一零)", "2P2Z (二極二零)",
|
|
"PID 控制器", "SOGI-Alpha (帶通)", "SOGI-Beta (低通)", "(無) 手動自訂"
|
|
],
|
|
systemGain: 1.0,
|
|
params: cloneDefaultParams(),
|
|
// 模式切換
|
|
isDarkMode: true,
|
|
// 係數倍率微調
|
|
baseB: [0.5, 0.5, 0, 0, 0, 0, 0],
|
|
baseA: [1, 0, 0, 0, 0, 0, 0],
|
|
bSliders: zero7(),
|
|
aSliders: zero7(), // a1~a6 (index 0 unused for display but maps to a[1]~a[6])
|
|
sense_b: '2x', sense_a: '2x',
|
|
|
|
loadingBode: false, bodeTimeout: null, globalError: null,
|
|
csvFile: null, csvFileId: null, csvColumns: [], csvPreview: [], csvInfo: null, csvParseError: null,
|
|
csvUploading: false, presetCsvAvailable: false, presetCsvName: '', usingPresetCsv: false,
|
|
isCsvPreviewExpanded: true,
|
|
selectedColumn: 0, loadingFilter: false, filterDone: false, timePlotData: null,
|
|
mobileTab: 'settings', // 手機版頁籤：'settings' | 'chart'
|
|
shiftBitsB: DEFAULT_SHIFT_BITS,
|
|
shiftBitsA: DEFAULT_SHIFT_BITS,
|
|
useRound: true, // 是否使用 Rounding 取代 Floor
|
|
sense_in: '2x', sense_out: '2x',
|
|
fixedOverrides: { a: {}, b: {} },
|
|
outOfRangeB: [false, false, false, false, false, false, false],
|
|
outOfRangeA: [false, false, false, false, false, false, false],
|
|
aFineStep: 0.01,
|
|
aFineRepeatDelayTimer: null,
|
|
aFineRepeatTimer: null,
|
|
aFineDrag: null,
|
|
shiftBitRepeatDelayTimer: null,
|
|
shiftBitRepeatTimer: null,
|
|
shiftBitDrag: null,
|
|
fixedAFineStep: 1,
|
|
fixedAFineDrag: null,
|
|
fixedAFineRepeatDelayTimer: null,
|
|
fixedAFineRepeatTimer: null,
|
|
shiftBitsIn: 14,
|
|
shiftBitsOut: 14,
|
|
shiftInDrag: null,
|
|
shiftInRepeatDelayTimer: null,
|
|
shiftInRepeatTimer: null,
|
|
shiftOutDrag: null,
|
|
shiftOutRepeatDelayTimer: null,
|
|
shiftOutRepeatTimer: null,
|
|
isTouchInput: false,
|
|
activeCoeffAdjustment: null,
|
|
mcuSerialPort: null,
|
|
mcuConnected: false,
|
|
webSerialSupported: false,
|
|
writingMCU: false,
|
|
mcuStatus: '',
|
|
saveSettingsTimeout: null,
|
|
bodeMagRange: null, // [min, max] for Y-axis
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
maxLogB() {
|
|
if (this.sense_b === '1%') return Math.log10(1.01);
|
|
if (this.sense_b === '2x') return Math.log10(2.0);
|
|
return 1.0;
|
|
},
|
|
maxLogA() {
|
|
if (this.sense_a === '1%') return Math.log10(1.01);
|
|
if (this.sense_a === '2x') return Math.log10(2.0);
|
|
if (this.sense_a === '10x') return Math.log10(10.0);
|
|
return Math.log10(2.0);
|
|
},
|
|
b_int_str: {
|
|
get() {
|
|
return this.fixedPointCoeffs.b.map(item => item.val).join(', ');
|
|
},
|
|
set(val) {
|
|
const cleaned = val.replace(/[^0-9,\-\s]/g, '');
|
|
const nums = this.parseCoeffs(cleaned);
|
|
nums.forEach((n, i) => {
|
|
this.fixedOverrides.b[i] = Math.round(n);
|
|
});
|
|
this.debouncedUpdateBode();
|
|
}
|
|
},
|
|
a_int_str: {
|
|
get() {
|
|
return this.fixedPointCoeffs.a.map(item => item.val).join(', ');
|
|
},
|
|
set(val) {
|
|
const cleaned = val.replace(/[^0-9,\-\s]/g, '');
|
|
const nums = this.parseCoeffs(cleaned);
|
|
nums.forEach((n, i) => {
|
|
this.fixedOverrides.a[i] = Math.round(n);
|
|
});
|
|
this.debouncedUpdateBode();
|
|
}
|
|
},
|
|
fixedPointCoeffs() {
|
|
const scaleB = Math.pow(2, this.shiftBitsB);
|
|
const scaleA = Math.pow(2, this.shiftBitsA);
|
|
const b_raw = this.parseCoeffs(this.b_str);
|
|
const a_raw = this.parseCoeffs(this.a_str);
|
|
|
|
const b = b_raw.map((x, i) => {
|
|
const autoVal = Math.round(x * scaleB);
|
|
const val = (this.fixedOverrides.b[i] !== undefined) ? this.fixedOverrides.b[i] : autoVal;
|
|
return { label: `b${i}`, val, isOverridden: this.fixedOverrides.b[i] !== undefined };
|
|
});
|
|
const a = a_raw.map((x, i) => {
|
|
const autoVal = Math.round(x * scaleA);
|
|
const val = (this.fixedOverrides.a[i] !== undefined) ? this.fixedOverrides.a[i] : autoVal;
|
|
return { label: `a${i}`, val, isOverridden: this.fixedOverrides.a[i] !== undefined };
|
|
});
|
|
|
|
return { b, a };
|
|
},
|
|
floatingCoeffs() {
|
|
const b = this.parseCoeffs(this.b_str).map((x, i) => ({ label: `b${i}`, val: parseFloat(x.toPrecision(6)) }));
|
|
const a = this.parseCoeffs(this.a_str).map((x, i) => ({ label: `a${i}`, val: parseFloat(x.toPrecision(6)) }));
|
|
return { b, a };
|
|
},
|
|
isManualDirty() {
|
|
if (this.bSliders.some(v => v !== 0) || this.aSliders.some(v => v !== 0)) return true;
|
|
const currentB = this.padTo7(this.parseCoeffs(this.b_str));
|
|
const currentA = this.padTo7(this.parseCoeffs(this.a_str));
|
|
const targetB = this.baseB.map(x => x * (this.systemGain || 1.0));
|
|
const targetA = this.baseA;
|
|
|
|
for (let i = 0; i < 7; i++) {
|
|
const bVal = currentB[i] || 0;
|
|
const bTarget = targetB[i] || 0;
|
|
// 使用相對誤差，避免數值較大時 (如 K > 10000) 產生的精確度誤判
|
|
const epsB = Math.max(1e-8, Math.abs(bTarget) * 1e-10);
|
|
if (Math.abs(bVal - bTarget) > epsB) return true;
|
|
|
|
const aVal = currentA[i] || 0;
|
|
const aTarget = targetA[i] || 0;
|
|
const epsA = Math.max(1e-8, Math.abs(aTarget) * 1e-10);
|
|
if (Math.abs(aVal - aTarget) > epsA) return true;
|
|
}
|
|
return false;
|
|
},
|
|
isFixedPointDirty() {
|
|
return this.shiftBitsB !== DEFAULT_SHIFT_BITS
|
|
|| this.shiftBitsA !== DEFAULT_SHIFT_BITS
|
|
|| Object.keys(this.fixedOverrides.b).length > 0
|
|
|| Object.keys(this.fixedOverrides.a).length > 0;
|
|
},
|
|
currentA1() {
|
|
const a = this.parseCoeffs(this.a_str);
|
|
return a[1] || 0;
|
|
},
|
|
currentA2() {
|
|
const a = this.parseCoeffs(this.a_str);
|
|
return a[2] || 0;
|
|
},
|
|
currentDelta() {
|
|
// New Model: a1 = -1 - r, a2 = r + delta
|
|
// => delta = a1 + a2 + 1
|
|
return this.currentA1 + this.currentA2 + 1;
|
|
},
|
|
currentR() {
|
|
// New Model: a1 = -1 - r => r = -1 - a1
|
|
return -1 - this.currentA1;
|
|
},
|
|
currentA1A2Diff() {
|
|
return this.currentA1 - this.currentA2;
|
|
},
|
|
currentA1A2Sum() {
|
|
return this.currentA1 + this.currentA2;
|
|
},
|
|
fixedA0Int() {
|
|
return Math.pow(2, this.shiftBitsA);
|
|
},
|
|
fixedCurrentA1() {
|
|
return this.fixedPointCoeffs.a[1]?.val || 0;
|
|
},
|
|
fixedCurrentA2() {
|
|
return this.fixedPointCoeffs.a[2]?.val || 0;
|
|
},
|
|
fixedCurrentDelta() {
|
|
// New Model: a1 = -a0 - r, a2 = r + delta
|
|
// => delta = a1 + a2 + a0
|
|
return this.fixedCurrentA1 + this.fixedCurrentA2 + this.fixedA0Int;
|
|
},
|
|
fixedCurrentR() {
|
|
// New Model: a1 = -a0 - r => r = -a0 - a1
|
|
return -this.fixedA0Int - this.fixedCurrentA1;
|
|
},
|
|
fixedCurrentA1A2Diff() {
|
|
return this.fixedCurrentA1 - this.fixedCurrentA2;
|
|
},
|
|
fixedCurrentA1A2Sum() {
|
|
return this.fixedCurrentA1 + this.fixedCurrentA2;
|
|
}
|
|
},
|
|
watch: {
|
|
fs: 'debouncedSaveSettings',
|
|
b_str() {
|
|
this.debouncedSaveSettings();
|
|
this.debouncedProcessFilter();
|
|
},
|
|
a_str() {
|
|
this.debouncedSaveSettings();
|
|
this.debouncedProcessFilter();
|
|
},
|
|
filterType: 'debouncedSaveSettings',
|
|
systemGain: 'debouncedSaveSettings',
|
|
params: { handler: 'debouncedSaveSettings', deep: true },
|
|
baseB: { handler: 'debouncedSaveSettings', deep: true },
|
|
baseA: { handler: 'debouncedSaveSettings', deep: true },
|
|
bSliders: { handler: 'debouncedSaveSettings', deep: true },
|
|
aSliders: { handler: 'debouncedSaveSettings', deep: true },
|
|
sense_b: 'debouncedSaveSettings',
|
|
sense_a: 'debouncedSaveSettings',
|
|
shiftBitsB() {
|
|
this.debouncedSaveSettings();
|
|
this.debouncedProcessFilter();
|
|
},
|
|
shiftBitsA() {
|
|
this.debouncedSaveSettings();
|
|
this.debouncedProcessFilter();
|
|
},
|
|
shiftBitsIn() {
|
|
this.debouncedSaveSettings();
|
|
this.debouncedProcessFilter();
|
|
},
|
|
shiftBitsOut() {
|
|
this.debouncedSaveSettings();
|
|
this.debouncedProcessFilter();
|
|
},
|
|
useRound() {
|
|
this.debouncedSaveSettings();
|
|
this.debouncedProcessFilter();
|
|
},
|
|
fixedOverrides: { handler: 'debouncedSaveSettings', deep: true },
|
|
aFineStep: 'debouncedSaveSettings',
|
|
fixedAFineStep: 'debouncedSaveSettings',
|
|
b_int_str() { this.debouncedProcessFilter(); },
|
|
a_int_str() { this.debouncedProcessFilter(); },
|
|
selectedColumn(newVal, oldVal) {
|
|
if (newVal !== oldVal) {
|
|
this.zoomStartIdx = null;
|
|
this.zoomEndIdx = null;
|
|
this.timePlotUnit = null;
|
|
this.timePlotMultiplier = null;
|
|
this.debouncedProcessFilter();
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.isTouchInput = window.matchMedia?.('(pointer: coarse)').matches || false;
|
|
window.addEventListener('pointerdown', this.rememberPointerType);
|
|
|
|
const savedTheme = localStorage.getItem('theme');
|
|
this.isDarkMode = savedTheme ? savedTheme === 'dark' : true;
|
|
if (this.isDarkMode) {
|
|
document.documentElement.classList.add('dark');
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
|
|
this.loadSettings();
|
|
|
|
this.webSerialSupported = ('serial' in navigator);
|
|
if (!this.webSerialSupported) {
|
|
this.mcuStatus = '此瀏覽器不支援 Web Serial（需使用 Chrome 或 Edge，且透過 HTTPS 連線）';
|
|
}
|
|
this.ensureCascadeStages();
|
|
this.updateBodeMagRange();
|
|
this.applyFilterDesign();
|
|
this.loadPresetWaveforms();
|
|
},
|
|
beforeUnmount() {
|
|
window.removeEventListener('pointerdown', this.rememberPointerType);
|
|
this.stopA1A2Repeat();
|
|
this.stopAFineDrag();
|
|
this.stopShiftBitRepeat();
|
|
this.stopShiftBitDrag();
|
|
this.stopFixedA1A2Repeat();
|
|
this.stopFixedAFineDrag();
|
|
this.stopShiftInRepeat();
|
|
this.stopShiftInDrag();
|
|
this.stopShiftOutRepeat();
|
|
this.stopShiftOutDrag();
|
|
},
|
|
methods: {
|
|
stageTitle(index) {
|
|
const stage = this.cascadeStages[index];
|
|
return stage?.filterType || `Stage ${index + 1}`;
|
|
},
|
|
cloneStage(stage) {
|
|
return JSON.parse(JSON.stringify(stage));
|
|
},
|
|
captureCurrentStage() {
|
|
return {
|
|
id: this.cascadeStages[this.activeCascadeStageIndex]?.id || createStageId(),
|
|
isActive: this.cascadeStages[this.activeCascadeStageIndex]?.isActive ?? true,
|
|
isExpanded: this.cascadeStages[this.activeCascadeStageIndex]?.isExpanded ?? true,
|
|
filterType: this.filterType,
|
|
b_str: this.b_str,
|
|
a_str: this.a_str,
|
|
systemGain: this.systemGain,
|
|
params: { ...this.params },
|
|
baseB: [...this.baseB],
|
|
baseA: [...this.baseA],
|
|
bSliders: [...this.bSliders],
|
|
aSliders: [...this.aSliders],
|
|
shiftBitsB: this.shiftBitsB,
|
|
shiftBitsA: this.shiftBitsA,
|
|
fixedOverrides: {
|
|
a: { ...this.fixedOverrides.a },
|
|
b: { ...this.fixedOverrides.b },
|
|
},
|
|
outOfRangeB: [...this.outOfRangeB],
|
|
outOfRangeA: [...this.outOfRangeA],
|
|
aFineStep: this.aFineStep,
|
|
fixedAFineStep: this.fixedAFineStep,
|
|
activeCoeffAdjustment: this.activeCoeffAdjustment,
|
|
};
|
|
},
|
|
applyStageToControls(stage) {
|
|
stage = normalizeCascadeStage(stage);
|
|
this.filterType = stage.filterType;
|
|
this.b_str = stage.b_str;
|
|
this.a_str = stage.a_str;
|
|
this.systemGain = stage.systemGain;
|
|
this.params = { ...stage.params };
|
|
this.baseB = [...stage.baseB];
|
|
this.baseA = [...stage.baseA];
|
|
this.bSliders = [...stage.bSliders];
|
|
this.aSliders = [...stage.aSliders];
|
|
this.shiftBitsB = stage.shiftBitsB;
|
|
this.shiftBitsA = stage.shiftBitsA;
|
|
this.fixedOverrides = {
|
|
a: { ...stage.fixedOverrides.a },
|
|
b: { ...stage.fixedOverrides.b },
|
|
};
|
|
this.outOfRangeB = [...stage.outOfRangeB];
|
|
this.outOfRangeA = [...stage.outOfRangeA];
|
|
this.aFineStep = stage.aFineStep;
|
|
this.fixedAFineStep = stage.fixedAFineStep;
|
|
this.activeCoeffAdjustment = stage.activeCoeffAdjustment;
|
|
},
|
|
ensureCascadeStages() {
|
|
if (!Array.isArray(this.cascadeStages)) this.cascadeStages = [];
|
|
if (this.cascadeStages.length === 0) {
|
|
this.cascadeStages = [this.captureCurrentStage()];
|
|
this.activeCascadeStageIndex = 0;
|
|
}
|
|
this.cascadeStages = this.cascadeStages.map((stage, index) => normalizeCascadeStage(stage, {
|
|
isExpanded: index === this.activeCascadeStageIndex,
|
|
filterType: this.filterType,
|
|
b_str: this.b_str,
|
|
a_str: this.a_str,
|
|
systemGain: this.systemGain,
|
|
params: this.params,
|
|
baseB: this.baseB,
|
|
baseA: this.baseA,
|
|
bSliders: this.bSliders,
|
|
aSliders: this.aSliders,
|
|
shiftBitsB: this.shiftBitsB,
|
|
shiftBitsA: this.shiftBitsA,
|
|
fixedOverrides: this.fixedOverrides,
|
|
outOfRangeB: this.outOfRangeB,
|
|
outOfRangeA: this.outOfRangeA,
|
|
aFineStep: this.aFineStep,
|
|
fixedAFineStep: this.fixedAFineStep,
|
|
activeCoeffAdjustment: this.activeCoeffAdjustment,
|
|
}));
|
|
if (this.activeCascadeStageIndex < 0 || this.activeCascadeStageIndex >= this.cascadeStages.length) {
|
|
this.activeCascadeStageIndex = 0;
|
|
}
|
|
},
|
|
saveActiveCascadeStage() {
|
|
this.ensureCascadeStages();
|
|
this.cascadeStages.splice(this.activeCascadeStageIndex, 1, this.captureCurrentStage());
|
|
},
|
|
selectCascadeStage(index) {
|
|
if (index < 0 || index >= this.cascadeStages.length || index === this.activeCascadeStageIndex) return;
|
|
this.saveActiveCascadeStage();
|
|
this.activeCascadeStageIndex = index;
|
|
this.cascadeStages.forEach((stage, stageIndex) => {
|
|
stage.isExpanded = stageIndex === index;
|
|
});
|
|
this.applyStageToControls(this.cloneStage(this.cascadeStages[index]));
|
|
this.updateBodeMagRange();
|
|
this.updateBodePlot({ switchToChart: false });
|
|
},
|
|
addCascadeStage() {
|
|
this.saveActiveCascadeStage();
|
|
const newStage = this.cloneStage(this.cascadeStages[this.activeCascadeStageIndex]);
|
|
newStage.id = createStageId();
|
|
newStage.isActive = true;
|
|
newStage.isExpanded = true;
|
|
this.cascadeStages.push(newStage);
|
|
this.selectCascadeStage(this.cascadeStages.length - 1);
|
|
},
|
|
removeCascadeStage(index) {
|
|
if (this.cascadeStages.length <= 1) {
|
|
this.globalError = '至少需要保留一個濾波器階段';
|
|
return;
|
|
}
|
|
this.saveActiveCascadeStage();
|
|
this.cascadeStages.splice(index, 1);
|
|
this.activeCascadeStageIndex = Math.min(this.activeCascadeStageIndex, this.cascadeStages.length - 1);
|
|
this.cascadeStages[this.activeCascadeStageIndex].isExpanded = true;
|
|
this.applyStageToControls(this.cloneStage(this.cascadeStages[this.activeCascadeStageIndex]));
|
|
this.updateBodePlot({ switchToChart: false });
|
|
},
|
|
toggleCascadeStage(index) {
|
|
this.saveActiveCascadeStage();
|
|
const stage = this.cascadeStages[index];
|
|
stage.isActive = !stage.isActive;
|
|
this.updateBodePlot({ switchToChart: false });
|
|
this.debouncedProcessFilter();
|
|
},
|
|
toggleCascadeStageExpanded(index) {
|
|
if (index < 0 || index >= this.cascadeStages.length) return;
|
|
if (index !== this.activeCascadeStageIndex) {
|
|
this.selectCascadeStage(index);
|
|
return;
|
|
}
|
|
this.saveActiveCascadeStage();
|
|
this.cascadeStages.forEach((stage, stageIndex) => {
|
|
stage.isExpanded = stageIndex === index ? !stage.isExpanded : false;
|
|
});
|
|
},
|
|
cascadeStageSummary(stage) {
|
|
const bCount = this.parseCoeffs(stage.b_str || '').length;
|
|
const aCount = this.parseCoeffs(stage.a_str || '').length;
|
|
return `${bCount}b / ${aCount}a, Qb${stage.shiftBitsB}, Qa${stage.shiftBitsA}`;
|
|
},
|
|
moveCascadeStageUp(index) {
|
|
this.moveCascadeStage(index, index - 1);
|
|
},
|
|
moveCascadeStageDown(index) {
|
|
this.moveCascadeStage(index, index + 1);
|
|
},
|
|
startCascadeStageDrag(index, event) {
|
|
if (index < 0 || index >= this.cascadeStages.length) return;
|
|
this.saveActiveCascadeStage();
|
|
this.draggingCascadeStageIndex = index;
|
|
this.dragOverCascadeStageIndex = index;
|
|
this.stageDragPointerId = event.pointerId;
|
|
this.draggedCascadeStageId = this.cascadeStages[index]?.id || null;
|
|
this.stageDragStartX = event.clientX;
|
|
this.stageDragStartY = event.clientY;
|
|
this.stageDragCurrentX = event.clientX;
|
|
this.stageDragCurrentY = event.clientY;
|
|
event.currentTarget?.setPointerCapture?.(event.pointerId);
|
|
window.addEventListener('pointermove', this.moveCascadeStageDrag, { passive: false });
|
|
window.addEventListener('pointerup', this.endCascadeStageDrag);
|
|
window.addEventListener('pointercancel', this.cancelCascadeStageDrag);
|
|
},
|
|
cascadeStageDragStyle(index) {
|
|
if (this.draggingCascadeStageIndex !== index) return null;
|
|
const dx = this.stageDragCurrentX - this.stageDragStartX;
|
|
const dy = this.stageDragCurrentY - this.stageDragStartY;
|
|
return {
|
|
transform: `translate3d(${dx}px, ${dy}px, 0) scale(1.015)`,
|
|
};
|
|
},
|
|
moveCascadeStageDrag(event) {
|
|
if (this.draggingCascadeStageIndex === null) return;
|
|
event.preventDefault();
|
|
this.stageDragCurrentX = event.clientX;
|
|
this.stageDragCurrentY = event.clientY;
|
|
const target = document
|
|
.elementsFromPoint(event.clientX, event.clientY)
|
|
.find(element => {
|
|
const stageEl = element.closest?.('[data-cascade-stage-index]');
|
|
return stageEl && Number(stageEl.dataset.cascadeStageIndex) !== this.draggingCascadeStageIndex;
|
|
})
|
|
?.closest?.('[data-cascade-stage-index]');
|
|
if (!target) return;
|
|
const index = Number(target.dataset.cascadeStageIndex);
|
|
if (Number.isInteger(index) && index >= 0 && index < this.cascadeStages.length) {
|
|
this.dragOverCascadeStageIndex = index;
|
|
this.reorderCascadeStageDuringDrag(index);
|
|
}
|
|
},
|
|
reorderCascadeStageDuringDrag(toIndex) {
|
|
const fromIndex = this.draggingCascadeStageIndex;
|
|
if (fromIndex === null || fromIndex === toIndex || !this.draggedCascadeStageId) return;
|
|
const draggedEl = document.querySelector(`[data-cascade-stage-index="${fromIndex}"]`);
|
|
const beforeRect = draggedEl?.getBoundingClientRect();
|
|
const activeStageId = this.cascadeStages[this.activeCascadeStageIndex]?.id;
|
|
const [stage] = this.cascadeStages.splice(fromIndex, 1);
|
|
this.cascadeStages.splice(toIndex, 0, stage);
|
|
this.draggingCascadeStageIndex = toIndex;
|
|
this.dragOverCascadeStageIndex = toIndex;
|
|
this.activeCascadeStageIndex = Math.max(0, this.cascadeStages.findIndex(item => item.id === activeStageId));
|
|
this.$nextTick(() => {
|
|
const nextEl = document.querySelector(`[data-cascade-stage-index="${toIndex}"]`);
|
|
const afterRect = nextEl?.getBoundingClientRect();
|
|
if (!beforeRect || !afterRect) return;
|
|
this.stageDragStartX += afterRect.left - beforeRect.left;
|
|
this.stageDragStartY += afterRect.top - beforeRect.top;
|
|
});
|
|
},
|
|
endCascadeStageDrag() {
|
|
const activeStageId = this.cascadeStages[this.activeCascadeStageIndex]?.id;
|
|
this.clearCascadeStageDrag();
|
|
this.collapseCascadeStages({ skipSave: true });
|
|
this.activeCascadeStageIndex = Math.max(0, this.cascadeStages.findIndex(item => item.id === activeStageId));
|
|
this.applyStageToControls(this.cloneStage(this.cascadeStages[this.activeCascadeStageIndex]));
|
|
this.updateBodePlot({ switchToChart: false });
|
|
this.debouncedProcessFilter();
|
|
},
|
|
cancelCascadeStageDrag() {
|
|
this.clearCascadeStageDrag();
|
|
this.collapseCascadeStages();
|
|
},
|
|
clearCascadeStageDrag() {
|
|
window.removeEventListener('pointermove', this.moveCascadeStageDrag);
|
|
window.removeEventListener('pointerup', this.endCascadeStageDrag);
|
|
window.removeEventListener('pointercancel', this.cancelCascadeStageDrag);
|
|
this.draggingCascadeStageIndex = null;
|
|
this.dragOverCascadeStageIndex = null;
|
|
this.stageDragPointerId = null;
|
|
this.draggedCascadeStageId = null;
|
|
this.stageDragStartX = 0;
|
|
this.stageDragStartY = 0;
|
|
this.stageDragCurrentX = 0;
|
|
this.stageDragCurrentY = 0;
|
|
},
|
|
collapseCascadeStages({ skipSave = false } = {}) {
|
|
if (!skipSave) this.saveActiveCascadeStage();
|
|
this.cascadeStages.forEach(stage => {
|
|
stage.isExpanded = false;
|
|
});
|
|
},
|
|
moveCascadeStage(fromIndex, toIndex, { preserveExpansion = false, collapseAll = false } = {}) {
|
|
if (fromIndex < 0 || fromIndex >= this.cascadeStages.length || toIndex < 0 || toIndex >= this.cascadeStages.length) return;
|
|
this.saveActiveCascadeStage();
|
|
const activeStageId = this.cascadeStages[this.activeCascadeStageIndex]?.id;
|
|
const expansionById = new Map(this.cascadeStages.map(stage => [stage.id, !!stage.isExpanded]));
|
|
const [stage] = this.cascadeStages.splice(fromIndex, 1);
|
|
this.cascadeStages.splice(toIndex, 0, stage);
|
|
this.activeCascadeStageIndex = Math.max(0, this.cascadeStages.findIndex(item => item.id === activeStageId));
|
|
this.cascadeStages.forEach((item, index) => {
|
|
if (collapseAll) {
|
|
item.isExpanded = false;
|
|
} else {
|
|
item.isExpanded = preserveExpansion ? !!expansionById.get(item.id) : index === this.activeCascadeStageIndex;
|
|
}
|
|
});
|
|
this.applyStageToControls(this.cloneStage(this.cascadeStages[this.activeCascadeStageIndex]));
|
|
this.updateBodePlot({ switchToChart: false });
|
|
this.debouncedProcessFilter();
|
|
},
|
|
getStageFixedCoeffs(stage) {
|
|
return computeStageFixedCoeffs(stage, this.parseCoeffs);
|
|
},
|
|
getCascadeStagesSnapshot() {
|
|
this.saveActiveCascadeStage();
|
|
return this.cascadeStages.map(stage => this.cloneStage(stage));
|
|
},
|
|
getCascadeBodePayload() {
|
|
return {
|
|
fs: this.fs,
|
|
stages: this.getCascadeStagesSnapshot().map(stage => {
|
|
const fixed = this.getStageFixedCoeffs(stage);
|
|
const scaleB = Math.pow(2, stage.shiftBitsB);
|
|
const scaleA = Math.pow(2, stage.shiftBitsA);
|
|
return {
|
|
b: this.parseCoeffs(stage.b_str),
|
|
a: this.parseCoeffs(stage.a_str),
|
|
b_fixed: fixed.b.map(v => v / scaleB),
|
|
a_fixed: fixed.a.map(v => v / scaleA),
|
|
isActive: stage.isActive,
|
|
};
|
|
}),
|
|
};
|
|
},
|
|
getCascadeFilterPayload() {
|
|
return createCascadeFilterPayload({
|
|
stages: this.getCascadeStagesSnapshot(),
|
|
fs: this.fs,
|
|
shiftBitsIn: this.shiftBitsIn,
|
|
shiftBitsOut: this.shiftBitsOut,
|
|
useRound: this.useRound,
|
|
parseCoeffs: this.parseCoeffs,
|
|
getStageFixedCoeffs: this.getStageFixedCoeffs,
|
|
});
|
|
},
|
|
loadSettings() {
|
|
try {
|
|
const saved = localStorage.getItem('dea_settings');
|
|
if (saved) {
|
|
const parsed = JSON.parse(saved);
|
|
const keys = [
|
|
'fs', 'b_str', 'a_str', 'filterType', 'systemGain', 'params',
|
|
'baseB', 'baseA', 'bSliders', 'aSliders', 'sense_b', 'sense_a',
|
|
'shiftBitsB', 'shiftBitsA', 'shiftBitsIn', 'shiftBitsOut', 'useRound',
|
|
'fixedOverrides', 'aFineStep', 'fixedAFineStep', 'cascadeStages', 'activeCascadeStageIndex'
|
|
];
|
|
keys.forEach(k => {
|
|
if (parsed[k] !== undefined) {
|
|
this[k] = parsed[k];
|
|
}
|
|
});
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to load settings:', e);
|
|
}
|
|
},
|
|
saveSettings() {
|
|
this.saveActiveCascadeStage();
|
|
const keys = [
|
|
'fs', 'b_str', 'a_str', 'filterType', 'systemGain', 'params',
|
|
'baseB', 'baseA', 'bSliders', 'aSliders', 'sense_b', 'sense_a',
|
|
'shiftBitsB', 'shiftBitsA', 'shiftBitsIn', 'shiftBitsOut', 'useRound',
|
|
'fixedOverrides', 'aFineStep', 'fixedAFineStep', 'cascadeStages', 'activeCascadeStageIndex'
|
|
];
|
|
const settings = {};
|
|
keys.forEach(k => settings[k] = this[k]);
|
|
localStorage.setItem('dea_settings', JSON.stringify(settings));
|
|
},
|
|
debouncedSaveSettings() {
|
|
clearTimeout(this.saveSettingsTimeout);
|
|
this.saveSettingsTimeout = setTimeout(() => this.saveSettings(), 500);
|
|
},
|
|
rememberPointerType(event) {
|
|
if (event.pointerType === 'touch') {
|
|
this.isTouchInput = true;
|
|
} else if (event.pointerType === 'mouse' || event.pointerType === 'pen') {
|
|
this.isTouchInput = false;
|
|
}
|
|
},
|
|
toggleDarkMode() {
|
|
this.isDarkMode = !this.isDarkMode;
|
|
localStorage.setItem('theme', this.isDarkMode ? 'dark' : 'light');
|
|
if (this.isDarkMode) {
|
|
document.documentElement.classList.add('dark');
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
this.updateBodePlot({ switchToChart: false });
|
|
if (this.timePlotData) {
|
|
this.drawTimePlot(this.timePlotData);
|
|
}
|
|
},
|
|
formatK(val) {
|
|
if (val >= 1000000) return `(~${(val / 1000000).toFixed(1).replace('.0', '')}M)`;
|
|
if (val >= 1000) return `(~${(val / 1000).toFixed(1).replace('.0', '')}k)`;
|
|
return "";
|
|
},
|
|
parseCoeffs(str) {
|
|
if (!str) return [];
|
|
// 支援逗號、空格、換行等分隔符號
|
|
return str.split(/[,\s]+/).map(x => parseFloat(x.trim())).filter(x => !isNaN(x));
|
|
},
|
|
padTo7(arr) {
|
|
const r = arr.slice(0, 7);
|
|
while (r.length < 7) r.push(0);
|
|
return r;
|
|
},
|
|
syncBaseFromText() {
|
|
const gain = this.systemGain || 1.0;
|
|
this.baseB = this.padTo7(this.parseCoeffs(this.b_str)).map(x => x / gain);
|
|
this.baseA = this.padTo7(this.parseCoeffs(this.a_str));
|
|
this.baseA[0] = 1.0;
|
|
this.fixedOverrides = { a: {}, b: {} };
|
|
this.bSliders = [0, 0, 0, 0, 0, 0, 0];
|
|
this.aSliders = [0, 0, 0, 0, 0, 0, 0];
|
|
this.outOfRangeB = [false, false, false, false, false, false, false];
|
|
this.outOfRangeA = [false, false, false, false, false, false, false];
|
|
},
|
|
resetSlidersB() {
|
|
this.bSliders = [0, 0, 0, 0, 0, 0, 0];
|
|
this.b_str = this.baseB.map(x => parseFloat(x.toPrecision(10))).join(', ');
|
|
this.debouncedUpdateBode();
|
|
},
|
|
resetSlidersA() {
|
|
this.aSliders = [0, 0, 0, 0, 0, 0];
|
|
this.a_str = this.baseA.map(x => parseFloat(x.toPrecision(10))).join(', ');
|
|
this.debouncedUpdateBode();
|
|
},
|
|
clearManualAdjustments() {
|
|
this.bSliders = [0, 0, 0, 0, 0, 0, 0];
|
|
this.aSliders = [0, 0, 0, 0, 0, 0, 0];
|
|
const gain = this.systemGain || 1.0;
|
|
this.b_str = this.baseB.map(x => parseFloat((x * gain).toPrecision(10))).join(', ');
|
|
this.a_str = this.baseA.map(x => parseFloat(x.toPrecision(10))).join(', ');
|
|
this.activeCoeffAdjustment = null;
|
|
this.calcSlidersFromText();
|
|
this.updateBodePlot({ switchToChart: false });
|
|
},
|
|
updateFromControls({ updateBode = true } = {}) {
|
|
const currentB = this.baseB.map((base, i) => base * (this.systemGain || 1.0) * Math.pow(10, this.bSliders[i] || 0));
|
|
const currentA = [1.0];
|
|
for (let i = 1; i < 7; i++) {
|
|
currentA.push(this.baseA[i] * Math.pow(10, this.aSliders[i] || 0));
|
|
}
|
|
this.b_str = currentB.map(x => parseFloat(x.toPrecision(10))).join(', ');
|
|
this.a_str = currentA.map(x => parseFloat(x.toPrecision(10))).join(', ');
|
|
if (updateBode) this.debouncedUpdateBode();
|
|
},
|
|
stepDecimals(step) {
|
|
const text = String(step);
|
|
if (text.includes('e-')) return Number(text.split('e-')[1]);
|
|
return text.includes('.') ? text.split('.')[1].length : 0;
|
|
},
|
|
roundToStep(value, step = this.aFineStep) {
|
|
const scale = 1 / step;
|
|
return Math.round(value * scale) / scale;
|
|
},
|
|
formatFineCoeff(value) {
|
|
if (!Number.isFinite(value)) return '0';
|
|
return Number(value).toString();
|
|
},
|
|
formatAFineDelta(step = this.aFineStep) {
|
|
return this.roundToStep(step, step).toFixed(this.stepDecimals(step));
|
|
},
|
|
formatFixedFineCoeff(value) {
|
|
if (!Number.isFinite(value)) return '0';
|
|
return Number.isInteger(value) ? String(value) : String(value);
|
|
},
|
|
formatFixedAFineDelta(step = this.fixedAFineStep) {
|
|
return String(step);
|
|
},
|
|
adjustAFineStep(direction) {
|
|
const nextStep = this.aFineStep * (direction > 0 ? 0.1 : 10);
|
|
const clampedStep = Math.min(1, Math.max(1e-9, nextStep));
|
|
this.aFineStep = Number(clampedStep.toPrecision(12));
|
|
},
|
|
adjustFixedAFineStep(direction) {
|
|
const steps = [1, 2, 4, 8, 32, 256, 1024, 4096, 16384, 65536];
|
|
let currentIdx = steps.indexOf(this.fixedAFineStep);
|
|
|
|
// 如果當前值不在數列中，找最接近的一個
|
|
if (currentIdx === -1) {
|
|
currentIdx = steps.reduce((prevIdx, curr, idx) => {
|
|
return Math.abs(curr - this.fixedAFineStep) < Math.abs(steps[prevIdx] - this.fixedAFineStep) ? idx : prevIdx;
|
|
}, 0);
|
|
}
|
|
|
|
if (direction > 0) { // 細 -> 往小調
|
|
currentIdx = Math.max(0, currentIdx - 1);
|
|
} else { // 粗 -> 往大調
|
|
currentIdx = Math.min(steps.length - 1, currentIdx + 1);
|
|
}
|
|
this.fixedAFineStep = steps[currentIdx];
|
|
},
|
|
setDeltaR(delta, r) {
|
|
const nextDelta = Number(delta);
|
|
const nextR = Number(r);
|
|
if (!Number.isFinite(nextDelta) || !Number.isFinite(nextR)) return;
|
|
// New Model: a1 = -1 - r, a2 = r + delta
|
|
this.setA1A2(-1 - nextR, nextR + nextDelta);
|
|
},
|
|
setAFineDirect(target, rawValue) {
|
|
const nextValue = parseFloat(rawValue);
|
|
if (!Number.isFinite(nextValue)) return;
|
|
if (target === 'delta') {
|
|
this.setDeltaR(nextValue, this.currentR);
|
|
} else if (target === 'r') {
|
|
this.setDeltaR(this.currentDelta, nextValue);
|
|
}
|
|
},
|
|
adjustAFineValue(target, steps) {
|
|
const delta = steps * this.aFineStep;
|
|
if (target === 'delta') {
|
|
this.setDeltaR(this.currentDelta + delta, this.currentR);
|
|
} else if (target === 'r') {
|
|
this.setDeltaR(this.currentDelta, this.currentR + delta);
|
|
}
|
|
},
|
|
handleAFineWheel(target, event) {
|
|
if (!event.shiftKey) {
|
|
event.currentTarget?.blur?.();
|
|
return;
|
|
}
|
|
event.preventDefault();
|
|
const direction = event.deltaY < 0 ? 1 : -1;
|
|
const steps = Math.max(1, Math.round(Math.abs(event.deltaY) / 80));
|
|
this.adjustAFineValue(target, direction * steps);
|
|
},
|
|
startAFineDrag(target, event) {
|
|
if (event.pointerType !== 'touch') return;
|
|
event.preventDefault();
|
|
this.aFineDrag = { target, lastY: event.clientY, remainder: 0 };
|
|
window.addEventListener('pointermove', this.moveAFineDrag, { passive: false });
|
|
window.addEventListener('pointerup', this.stopAFineDrag);
|
|
window.addEventListener('pointercancel', this.stopAFineDrag);
|
|
},
|
|
moveAFineDrag(event) {
|
|
if (!this.aFineDrag) return;
|
|
event.preventDefault();
|
|
const delta = this.aFineDrag.lastY - event.clientY;
|
|
this.aFineDrag.lastY = event.clientY;
|
|
this.aFineDrag.remainder += delta;
|
|
const steps = Math.trunc(this.aFineDrag.remainder / 18);
|
|
if (steps === 0) return;
|
|
this.aFineDrag.remainder -= steps * 18;
|
|
this.adjustAFineValue(this.aFineDrag.target, steps);
|
|
},
|
|
stopAFineDrag() {
|
|
this.aFineDrag = null;
|
|
window.removeEventListener('pointermove', this.moveAFineDrag);
|
|
window.removeEventListener('pointerup', this.stopAFineDrag);
|
|
window.removeEventListener('pointercancel', this.stopAFineDrag);
|
|
},
|
|
setFixedDeltaR(delta, r) {
|
|
const nextDelta = Math.round(delta);
|
|
const nextR = Math.round(r);
|
|
const a0 = this.fixedA0Int;
|
|
|
|
// New Model: a1 = -a0 - r, a2 = r + delta
|
|
// If r and delta are integers, a1 and a2 are guaranteed to be integers.
|
|
this.fixedOverrides.a[1] = -a0 - nextR;
|
|
this.fixedOverrides.a[2] = nextR + nextDelta;
|
|
this.debouncedUpdateBode();
|
|
},
|
|
setFixedAFineDirect(target, rawValue) {
|
|
const nextValue = parseFloat(rawValue);
|
|
if (!Number.isFinite(nextValue)) return;
|
|
if (target === 'delta') {
|
|
this.setFixedDeltaR(nextValue, this.fixedCurrentR);
|
|
} else if (target === 'r') {
|
|
this.setFixedDeltaR(this.fixedCurrentDelta, nextValue);
|
|
}
|
|
},
|
|
adjustFixedAFineValue(target, steps) {
|
|
const dVal = Math.round(steps * this.fixedAFineStep);
|
|
if (target === 'delta') {
|
|
this.setFixedDeltaR(this.fixedCurrentDelta + dVal, this.fixedCurrentR);
|
|
} else if (target === 'r') {
|
|
this.setFixedDeltaR(this.fixedCurrentDelta, this.fixedCurrentR + dVal);
|
|
}
|
|
},
|
|
handleFixedAFineWheel(target, event) {
|
|
if (!event.shiftKey) {
|
|
event.currentTarget?.blur?.();
|
|
return;
|
|
}
|
|
event.preventDefault();
|
|
const direction = event.deltaY < 0 ? 1 : -1;
|
|
const steps = Math.max(1, Math.round(Math.abs(event.deltaY) / 80));
|
|
this.adjustFixedAFineValue(target, direction * steps);
|
|
},
|
|
startFixedA1A2Repeat(target, direction) {
|
|
this.stopFixedA1A2Repeat();
|
|
this.adjustFixedAFineValue(target, direction);
|
|
this.fixedAFineRepeatDelayTimer = setTimeout(() => {
|
|
this.fixedAFineRepeatTimer = setInterval(() => {
|
|
this.adjustFixedAFineValue(target, direction);
|
|
}, 80);
|
|
}, 350);
|
|
},
|
|
stopFixedA1A2Repeat() {
|
|
clearTimeout(this.fixedAFineRepeatDelayTimer);
|
|
clearInterval(this.fixedAFineRepeatTimer);
|
|
this.fixedAFineRepeatDelayTimer = null;
|
|
this.fixedAFineRepeatTimer = null;
|
|
},
|
|
startFixedAFineDrag(target, event) {
|
|
if (event.pointerType !== 'touch') return;
|
|
event.preventDefault();
|
|
this.fixedAFineDrag = { target, lastY: event.clientY, remainder: 0 };
|
|
window.addEventListener('pointermove', this.moveFixedAFineDrag, { passive: false });
|
|
window.addEventListener('pointerup', this.stopFixedAFineDrag);
|
|
window.addEventListener('pointercancel', this.stopFixedAFineDrag);
|
|
},
|
|
moveFixedAFineDrag(event) {
|
|
if (!this.fixedAFineDrag) return;
|
|
event.preventDefault();
|
|
const delta = this.fixedAFineDrag.lastY - event.clientY;
|
|
this.fixedAFineDrag.lastY = event.clientY;
|
|
this.fixedAFineDrag.remainder += delta;
|
|
const steps = Math.trunc(this.fixedAFineDrag.remainder / 18);
|
|
if (steps === 0) return;
|
|
this.fixedAFineDrag.remainder -= steps * 18;
|
|
this.adjustFixedAFineValue(this.fixedAFineDrag.target, steps);
|
|
},
|
|
stopFixedAFineDrag() {
|
|
this.fixedAFineDrag = null;
|
|
window.removeEventListener('pointermove', this.moveFixedAFineDrag);
|
|
window.removeEventListener('pointerup', this.stopFixedAFineDrag);
|
|
window.removeEventListener('pointercancel', this.stopFixedAFineDrag);
|
|
},
|
|
normalizeShiftBits(rawValue) {
|
|
const nextValue = parseInt(rawValue, 10);
|
|
if (!Number.isFinite(nextValue)) return 0;
|
|
return Math.max(0, nextValue);
|
|
},
|
|
setUseRound(val) {
|
|
this.useRound = val;
|
|
},
|
|
setShiftBits(type, rawValue) {
|
|
const nextValue = this.normalizeShiftBits(rawValue);
|
|
if (type === 'b') {
|
|
this.shiftBitsB = nextValue;
|
|
} else {
|
|
this.shiftBitsA = nextValue;
|
|
}
|
|
this.clearFixedOverrides(type);
|
|
this.debouncedUpdateBode();
|
|
},
|
|
adjustShiftBits(type, steps) {
|
|
const current = type === 'b' ? this.shiftBitsB : this.shiftBitsA;
|
|
this.setShiftBits(type, current + steps);
|
|
},
|
|
handleShiftBitWheel(type, event) {
|
|
if (!event.shiftKey) {
|
|
event.currentTarget?.blur?.();
|
|
return;
|
|
}
|
|
event.preventDefault();
|
|
const direction = event.deltaY < 0 ? 1 : -1;
|
|
const steps = Math.max(1, Math.round(Math.abs(event.deltaY) / 80));
|
|
this.adjustShiftBits(type, direction * steps);
|
|
},
|
|
startShiftBitRepeat(type, direction) {
|
|
this.stopShiftBitRepeat();
|
|
this.adjustShiftBits(type, direction);
|
|
this.shiftBitRepeatDelayTimer = setTimeout(() => {
|
|
this.shiftBitRepeatTimer = setInterval(() => {
|
|
this.adjustShiftBits(type, direction);
|
|
}, 80);
|
|
}, 350);
|
|
},
|
|
stopShiftBitRepeat() {
|
|
clearTimeout(this.shiftBitRepeatDelayTimer);
|
|
clearInterval(this.shiftBitRepeatTimer);
|
|
this.shiftBitRepeatDelayTimer = null;
|
|
this.shiftBitRepeatTimer = null;
|
|
},
|
|
startShiftBitDrag(type, event) {
|
|
if (event.pointerType !== 'touch') return;
|
|
event.preventDefault();
|
|
this.shiftBitDrag = { type, lastY: event.clientY, remainder: 0 };
|
|
window.addEventListener('pointermove', this.moveShiftBitDrag, { passive: false });
|
|
window.addEventListener('pointerup', this.stopShiftBitDrag);
|
|
window.addEventListener('pointercancel', this.stopShiftBitDrag);
|
|
},
|
|
moveShiftBitDrag(event) {
|
|
if (!this.shiftBitDrag) return;
|
|
event.preventDefault();
|
|
const delta = this.shiftBitDrag.lastY - event.clientY;
|
|
this.shiftBitDrag.lastY = event.clientY;
|
|
this.shiftBitDrag.remainder += delta;
|
|
const steps = Math.trunc(this.shiftBitDrag.remainder / 18);
|
|
if (steps === 0) return;
|
|
this.shiftBitDrag.remainder -= steps * 18;
|
|
this.adjustShiftBits(this.shiftBitDrag.type, steps);
|
|
},
|
|
stopShiftBitDrag() {
|
|
this.shiftBitDrag = null;
|
|
window.removeEventListener('pointermove', this.moveShiftBitDrag);
|
|
window.removeEventListener('pointerup', this.stopShiftBitDrag);
|
|
window.removeEventListener('pointercancel', this.stopShiftBitDrag);
|
|
},
|
|
// 新增：處理輸入輸出位移
|
|
setShiftBitsIn(rawValue) {
|
|
this.shiftBitsIn = this.normalizeShiftBits(rawValue);
|
|
this.debouncedUpdateBode();
|
|
},
|
|
adjustShiftBitsIn(steps) {
|
|
this.setShiftBitsIn(this.shiftBitsIn + steps);
|
|
},
|
|
startShiftInRepeat(direction) {
|
|
this.stopShiftInRepeat();
|
|
this.adjustShiftBitsIn(direction);
|
|
this.shiftInRepeatDelayTimer = setTimeout(() => {
|
|
this.shiftInRepeatTimer = setInterval(() => {
|
|
this.adjustShiftBitsIn(direction);
|
|
}, 80);
|
|
}, 350);
|
|
},
|
|
stopShiftInRepeat() {
|
|
clearTimeout(this.shiftInRepeatDelayTimer);
|
|
clearInterval(this.shiftInRepeatTimer);
|
|
this.shiftInRepeatDelayTimer = null;
|
|
this.shiftInRepeatTimer = null;
|
|
},
|
|
startShiftInDrag(event) {
|
|
if (event.pointerType !== 'touch') return;
|
|
event.preventDefault();
|
|
this.shiftInDrag = { lastY: event.clientY, remainder: 0 };
|
|
window.addEventListener('pointermove', this.moveShiftInDrag, { passive: false });
|
|
window.addEventListener('pointerup', this.stopShiftInDrag);
|
|
window.addEventListener('pointercancel', this.stopShiftInDrag);
|
|
},
|
|
moveShiftInDrag(event) {
|
|
if (!this.shiftInDrag) return;
|
|
event.preventDefault();
|
|
const delta = this.shiftInDrag.lastY - event.clientY;
|
|
this.shiftInDrag.lastY = event.clientY;
|
|
this.shiftInDrag.remainder += delta;
|
|
const steps = Math.trunc(this.shiftInDrag.remainder / 18);
|
|
if (steps === 0) return;
|
|
this.shiftInDrag.remainder -= steps * 18;
|
|
this.adjustShiftBitsIn(steps);
|
|
},
|
|
stopShiftInDrag() {
|
|
this.shiftInDrag = null;
|
|
window.removeEventListener('pointermove', this.moveShiftInDrag);
|
|
window.removeEventListener('pointerup', this.stopShiftInDrag);
|
|
window.removeEventListener('pointercancel', this.stopShiftInDrag);
|
|
},
|
|
setShiftBitsOut(rawValue) {
|
|
this.shiftBitsOut = this.normalizeShiftBits(rawValue);
|
|
this.debouncedUpdateBode();
|
|
},
|
|
adjustShiftBitsOut(steps) {
|
|
this.setShiftBitsOut(this.shiftBitsOut + steps);
|
|
},
|
|
startShiftOutRepeat(direction) {
|
|
this.stopShiftOutRepeat();
|
|
this.adjustShiftBitsOut(direction);
|
|
this.shiftOutRepeatDelayTimer = setTimeout(() => {
|
|
this.shiftOutRepeatTimer = setInterval(() => {
|
|
this.adjustShiftBitsOut(direction);
|
|
}, 80);
|
|
}, 350);
|
|
},
|
|
stopShiftOutRepeat() {
|
|
clearTimeout(this.shiftOutRepeatDelayTimer);
|
|
clearInterval(this.shiftOutRepeatTimer);
|
|
this.shiftOutRepeatDelayTimer = null;
|
|
this.shiftOutRepeatTimer = null;
|
|
},
|
|
startShiftOutDrag(event) {
|
|
if (event.pointerType !== 'touch') return;
|
|
event.preventDefault();
|
|
this.shiftOutDrag = { lastY: event.clientY, remainder: 0 };
|
|
window.addEventListener('pointermove', this.moveShiftOutDrag, { passive: false });
|
|
window.addEventListener('pointerup', this.stopShiftOutDrag);
|
|
window.addEventListener('pointercancel', this.stopShiftOutDrag);
|
|
},
|
|
moveShiftOutDrag(event) {
|
|
if (!this.shiftOutDrag) return;
|
|
event.preventDefault();
|
|
const delta = this.shiftOutDrag.lastY - event.clientY;
|
|
this.shiftOutDrag.lastY = event.clientY;
|
|
this.shiftOutDrag.remainder += delta;
|
|
const steps = Math.trunc(this.shiftOutDrag.remainder / 18);
|
|
if (steps === 0) return;
|
|
this.shiftOutDrag.remainder -= steps * 18;
|
|
this.adjustShiftBitsOut(steps);
|
|
},
|
|
stopShiftOutDrag() {
|
|
this.shiftOutDrag = null;
|
|
window.removeEventListener('pointermove', this.moveShiftOutDrag);
|
|
window.removeEventListener('pointerup', this.stopShiftOutDrag);
|
|
window.removeEventListener('pointercancel', this.stopShiftOutDrag);
|
|
},
|
|
setA1A2(a1, a2) {
|
|
const a = this.padTo7(this.parseCoeffs(this.a_str));
|
|
a[0] = 1.0;
|
|
a[1] = Number(a1);
|
|
a[2] = Number(a2);
|
|
this.a_str = a.map(x => Number.isFinite(x) ? Number(x).toString() : '0').join(', ');
|
|
this.calcSlidersFromText();
|
|
this.debouncedUpdateBode();
|
|
},
|
|
adjustA1A2(mode, direction) {
|
|
const step = this.aFineStep * direction;
|
|
|
|
if (mode === 'delta') {
|
|
this.setDeltaR(this.currentDelta + step, this.currentR);
|
|
} else if (mode === 'r') {
|
|
this.setDeltaR(this.currentDelta, this.currentR + step);
|
|
}
|
|
},
|
|
startA1A2Repeat(mode, direction) {
|
|
this.stopA1A2Repeat();
|
|
this.adjustAFineValue(mode, direction);
|
|
this.aFineRepeatDelayTimer = setTimeout(() => {
|
|
this.aFineRepeatTimer = setInterval(() => {
|
|
this.adjustAFineValue(mode, direction);
|
|
}, 80);
|
|
}, 350);
|
|
},
|
|
stopA1A2Repeat() {
|
|
clearTimeout(this.aFineRepeatDelayTimer);
|
|
clearInterval(this.aFineRepeatTimer);
|
|
this.aFineRepeatDelayTimer = null;
|
|
this.aFineRepeatTimer = null;
|
|
},
|
|
toggleCoeffAdjustment(panel) {
|
|
if (this.activeCoeffAdjustment === panel) {
|
|
this.activeCoeffAdjustment = null;
|
|
return;
|
|
}
|
|
this.activeCoeffAdjustment = panel;
|
|
if (panel === 'a1a2') {
|
|
this.calcSlidersFromText();
|
|
}
|
|
},
|
|
calcSlidersFromText() {
|
|
const gain = this.systemGain || 1.0;
|
|
const currentB = this.parseCoeffs(this.b_str);
|
|
const currentA = this.parseCoeffs(this.a_str);
|
|
|
|
// 計算 b 係數滑桿
|
|
for (let i = 0; i < 7; i++) {
|
|
const val = currentB[i] || 0;
|
|
const base = this.baseB[i] || 0;
|
|
this.outOfRangeB[i] = false;
|
|
if (base !== 0 && val !== 0 && (val / (base * gain)) > 0) {
|
|
let logVal = Math.log10(val / (base * gain));
|
|
if (Math.abs(logVal) < 1e-8) logVal = 0; // 消除浮點數微小誤差
|
|
if (Math.abs(logVal) > this.maxLogB) this.outOfRangeB[i] = true;
|
|
this.bSliders[i] = Math.max(-this.maxLogB, Math.min(this.maxLogB, logVal));
|
|
} else {
|
|
this.bSliders[i] = 0;
|
|
if (val !== 0 && base !== 0) this.outOfRangeB[i] = true; // 符號不同或極端
|
|
}
|
|
}
|
|
// 計算 a 係數滑桿 (a0 恆為 1, 從 a1 開始)
|
|
for (let i = 1; i < 7; i++) {
|
|
const val = currentA[i] || 0;
|
|
const base = this.baseA[i] || 0;
|
|
this.outOfRangeA[i] = false;
|
|
if (base !== 0 && val !== 0 && (val / base) > 0) {
|
|
let logVal = Math.log10(val / base);
|
|
if (Math.abs(logVal) < 1e-8) logVal = 0; // 消除浮點數微小誤差
|
|
if (Math.abs(logVal) > this.maxLogA) this.outOfRangeA[i] = true;
|
|
this.aSliders[i] = Math.max(-this.maxLogA, Math.min(this.maxLogA, logVal));
|
|
} else {
|
|
this.aSliders[i] = 0;
|
|
if (val !== 0 && base !== 0) this.outOfRangeA[i] = true;
|
|
}
|
|
}
|
|
},
|
|
debouncedUpdateFromText(type) {
|
|
if (type === 'b') this.b_str = this.b_str.replace(/[^0-9,.\-\s]/g, '');
|
|
if (type === 'a') this.a_str = this.a_str.replace(/[^0-9,.\-\s]/g, '');
|
|
|
|
// 當文字改變時，反向計算滑桿位置
|
|
this.calcSlidersFromText();
|
|
this.debouncedUpdateBode();
|
|
},
|
|
onlyNumberKey(e, allowDot = true) {
|
|
// 允許的控制鍵
|
|
const allowedKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End'];
|
|
if (allowedKeys.includes(e.key) || e.ctrlKey || e.metaKey) return;
|
|
|
|
// 檢查字元是否合法
|
|
const charRegex = allowDot ? /[0-9,.\-\s]/ : /[0-9,\-\s]/;
|
|
if (!charRegex.test(e.key)) {
|
|
e.preventDefault();
|
|
}
|
|
},
|
|
clearFixedOverrides(type = null) {
|
|
if (type === 'a' || type === 'b') {
|
|
this.fixedOverrides[type] = {};
|
|
return;
|
|
}
|
|
this.fixedOverrides = { a: {}, b: {} };
|
|
},
|
|
resetFixedPointSettings() {
|
|
this.shiftBitsB = DEFAULT_SHIFT_BITS;
|
|
this.shiftBitsA = DEFAULT_SHIFT_BITS;
|
|
this.fixedAFineStep = 1;
|
|
this.clearFixedOverrides();
|
|
this.updateBodePlot({ switchToChart: false });
|
|
},
|
|
debouncedApply() {
|
|
clearTimeout(this.bodeTimeout);
|
|
this.bodeTimeout = setTimeout(() => {
|
|
if (this.filterType !== MANUAL_FILTER_TYPE) this.applyFilterDesign();
|
|
else this.updateBodePlot({ switchToChart: false });
|
|
}, 300);
|
|
},
|
|
debouncedUpdateBode() {
|
|
clearTimeout(this.bodeTimeout);
|
|
this.bodeTimeout = setTimeout(() => this.updateBodePlot({ switchToChart: false }), 150);
|
|
},
|
|
onGainChange() {
|
|
this.updateBodeMagRange();
|
|
this.updateFromControls();
|
|
},
|
|
updateBodeMagRange() {
|
|
const K = parseFloat(this.systemGain) || 1.0;
|
|
const yMax = 20 * Math.log10(Math.abs(K) * 3);
|
|
this.bodeMagRange = [yMax - 70, yMax];
|
|
},
|
|
onFilterTypeChange() {
|
|
this.systemGain = 1.0;
|
|
// 這裡可以選擇是否重設所有設計參數 (fc, Q 等)
|
|
// 根據使用者要求「載入預設值」，我們呼叫重設邏輯
|
|
this.clearFixedOverrides();
|
|
this.bSliders = zero7();
|
|
this.aSliders = zero7();
|
|
this.outOfRangeB = [false, false, false, false, false, false, false];
|
|
this.outOfRangeA = [false, false, false, false, false, false, false];
|
|
this.activeCoeffAdjustment = null;
|
|
if (this.filterType !== MANUAL_FILTER_TYPE) {
|
|
this.params = cloneDefaultParams();
|
|
}
|
|
this.updateBodeMagRange();
|
|
this.applyFilterDesign();
|
|
},
|
|
resetFilterParams() {
|
|
clearTimeout(this.bodeTimeout);
|
|
const isManual = this.filterType === MANUAL_FILTER_TYPE;
|
|
this.fs = DEFAULT_FS;
|
|
this.systemGain = 1.0;
|
|
this.params = cloneDefaultParams();
|
|
if (isManual) {
|
|
this.b_str = DEFAULT_B_STR;
|
|
this.a_str = DEFAULT_A_STR;
|
|
this.baseB = this.padTo7(this.parseCoeffs(DEFAULT_B_STR));
|
|
this.baseA = this.padTo7(this.parseCoeffs(DEFAULT_A_STR));
|
|
}
|
|
this.clearFixedOverrides();
|
|
this.bSliders = zero7();
|
|
this.aSliders = zero7();
|
|
this.outOfRangeB = [false, false, false, false, false, false, false];
|
|
this.outOfRangeA = [false, false, false, false, false, false, false];
|
|
this.sense_b = '2x';
|
|
this.sense_a = '2x';
|
|
this.shiftBitsB = DEFAULT_SHIFT_BITS;
|
|
this.shiftBitsA = DEFAULT_SHIFT_BITS;
|
|
this.aFineStep = 0.01;
|
|
this.fixedAFineStep = 1;
|
|
this.stopA1A2Repeat();
|
|
this.stopAFineDrag();
|
|
this.stopFixedA1A2Repeat();
|
|
this.stopFixedAFineDrag();
|
|
this.stopShiftBitRepeat();
|
|
this.stopShiftBitDrag();
|
|
this.activeCoeffAdjustment = null;
|
|
this.globalError = null;
|
|
this.updateBodeMagRange();
|
|
if (isManual) this.updateBodePlot({ switchToChart: false });
|
|
else this.applyFilterDesign();
|
|
},
|
|
async applyFilterDesign() {
|
|
if (this.filterType === MANUAL_FILTER_TYPE) return;
|
|
this.globalError = null;
|
|
try {
|
|
const payload = {
|
|
filter_type: this.filterType, fs: this.fs,
|
|
lp_fc: this.params.fc, lp_order: this.params.order,
|
|
hp_fc: this.params.fc, hp_order: this.params.order,
|
|
bp_f_low: this.params.bp_f_low, bp_f_high: this.params.bp_f_high, bp_order: this.params.bp_order,
|
|
notch_f0: this.params.notch_f0, notch_q: this.params.notch_q,
|
|
opoz_fz: this.params.opoz_fz, opoz_fp: this.params.opoz_fp,
|
|
tp1z_fz: this.params.tp1z_fz, tp1z_fp1: this.params.tp1z_fp1, tp1z_fp2: this.params.tp1z_fp2,
|
|
tptz_fz1: this.params.tptz_fz1, tptz_fz2: this.params.tptz_fz2,
|
|
tptz_fp1: this.params.tptz_fp1, tptz_fp2: this.params.tptz_fp2,
|
|
pid_kp: this.params.kp, pid_ki: this.params.ki, pid_kd: this.params.kd,
|
|
sogi_f0: this.params.sogi_f0, sogi_k: this.params.sogi_k
|
|
};
|
|
const res = await fetch('/api/design', {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
if (!res.ok) { const err = await res.json(); throw new Error(err.detail || '設計濾波器失敗'); }
|
|
const data = await res.json();
|
|
// 1. 將後端傳回的單位增益係數存入 baseB
|
|
this.baseB = this.padTo7(data.b);
|
|
this.baseA = this.padTo7(data.a);
|
|
this.baseA[0] = 1.0;
|
|
|
|
// 2. 重新計算含增益的文字框顯示與滑桿位置
|
|
this.bSliders = [0, 0, 0, 0, 0, 0, 0];
|
|
this.aSliders = [0, 0, 0, 0, 0, 0, 0];
|
|
this.activeCoeffAdjustment = null;
|
|
this.updateFromControls({ updateBode: false });
|
|
|
|
// 3. 更新圖表
|
|
await this.updateBodePlot({ switchToChart: false });
|
|
} catch (e) { this.globalError = e.message; }
|
|
},
|
|
async updateBodePlot({ switchToChart = true } = {}) {
|
|
this.loadingBode = true;
|
|
this.globalError = null;
|
|
try {
|
|
let b_ideal = this.parseCoeffs(this.b_str);
|
|
let a_ideal = this.parseCoeffs(this.a_str);
|
|
if (b_ideal.length === 0) b_ideal = [1.0];
|
|
if (a_ideal.length === 0) a_ideal = [1.0];
|
|
|
|
const scaleB = Math.pow(2, this.shiftBitsB);
|
|
const scaleA = Math.pow(2, this.shiftBitsA);
|
|
const b_fixed = b_ideal.map((x, i) => {
|
|
const intVal = (this.fixedOverrides.b[i] !== undefined) ? this.fixedOverrides.b[i] : Math.round(x * scaleB);
|
|
return intVal / scaleB;
|
|
});
|
|
const a_fixed = a_ideal.map((x, i) => {
|
|
const intVal = (this.fixedOverrides.a[i] !== undefined) ? this.fixedOverrides.a[i] : Math.round(x * scaleA);
|
|
return intVal / scaleA;
|
|
});
|
|
|
|
const cascadePayload = this.getCascadeBodePayload();
|
|
const res = await fetch('/api/bode/compare_cascade', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(cascadePayload)
|
|
});
|
|
|
|
let data;
|
|
if (res.status === 404) {
|
|
const [resIdeal, resFixed] = await Promise.all([
|
|
fetch('/api/bode', {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ b: b_ideal, a: a_ideal, fs: this.fs })
|
|
}),
|
|
fetch('/api/bode', {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ b: b_fixed, a: a_fixed, fs: this.fs })
|
|
})
|
|
]);
|
|
|
|
if (!resIdeal.ok || !resFixed.ok) throw new Error('無法計算頻率響應');
|
|
const dataIdeal = await resIdeal.json();
|
|
const dataFixed = await resFixed.json();
|
|
data = {
|
|
freq: dataIdeal.freq,
|
|
ideal: { mag: dataIdeal.mag, phase: dataIdeal.phase },
|
|
fixed: { mag: dataFixed.mag, phase: dataFixed.phase }
|
|
};
|
|
} else if (!res.ok) {
|
|
const err = await res.json();
|
|
throw new Error(err.detail || '無法計算頻率響應');
|
|
} else {
|
|
data = await res.json();
|
|
}
|
|
|
|
this.drawBodePlot(data.freq, data.ideal.mag, data.ideal.phase, data.fixed.mag, data.fixed.phase);
|
|
// 手機版：計算完成後自動切換到圖表頁籤
|
|
if (switchToChart && window.innerWidth < 1024) this.mobileTab = 'chart';
|
|
} catch (e) { this.globalError = e.message; }
|
|
finally { this.loadingBode = false; }
|
|
},
|
|
drawBodePlot(freq, magIdeal, phaseIdeal, magFixed, phaseFixed) {
|
|
const fs = this.fs;
|
|
const fMin = freq[0], fMax = freq[freq.length - 1];
|
|
const isDark = this.isDarkMode;
|
|
const isSmallScreen = window.innerWidth < 768;
|
|
|
|
// 產生 1-2-5 刻度
|
|
const xTicks = [], xTexts = [];
|
|
const pStart = Math.floor(Math.log10(fMin));
|
|
const pEnd = Math.ceil(Math.log10(fMax));
|
|
for (let p = pStart; p <= pEnd; p++) {
|
|
for (const m of [1, 2, 5]) {
|
|
const val = m * Math.pow(10, p);
|
|
if (val < fMin || val > fMax) continue;
|
|
xTicks.push(val);
|
|
if (val < 1) xTexts.push(val.toPrecision(3));
|
|
else if (val < 1000) xTexts.push(String(val));
|
|
else if (val < 1000000) xTexts.push((val / 1000) + 'k');
|
|
else xTexts.push((val / 1000000) + 'M');
|
|
}
|
|
}
|
|
|
|
// Nyquist & fs 標線 (shapes)
|
|
const shapes = [];
|
|
const annotations = [];
|
|
const addVLine = (xVal, text, row) => {
|
|
const yref = row === 1 ? 'y' : 'y2';
|
|
shapes.push({
|
|
type: 'line', x0: xVal, x1: xVal, y0: 0, y1: 1,
|
|
xref: row === 1 ? 'x' : 'x2', yref: yref + ' domain',
|
|
line: { color: isDark ? 'rgba(242,184,181,0.72)' : 'rgba(179,38,30,0.68)', width: 1.4, dash: 'dash' }
|
|
});
|
|
if (text) {
|
|
annotations.push({
|
|
x: Math.log10(xVal), y: 1, text: text,
|
|
xref: row === 1 ? 'x' : 'x2', yref: yref + ' domain',
|
|
showarrow: false, font: { color: isDark ? '#f2b8b5' : '#b3261e', size: isSmallScreen ? 10 : 12 },
|
|
yshift: isSmallScreen ? 15 : 12,
|
|
xanchor: 'center',
|
|
yanchor: isSmallScreen ? 'middle' : 'bottom',
|
|
textangle: isSmallScreen ? -90 : 0
|
|
});
|
|
}
|
|
};
|
|
addVLine(fs / 2, 'Nyquist', 1);
|
|
addVLine(fs, 'fs', 1);
|
|
addVLine(fs / 2, null, 2);
|
|
addVLine(fs, null, 2);
|
|
|
|
// 10 的倍數強化線
|
|
for (let p = pStart; p <= pEnd; p++) {
|
|
const v = Math.pow(10, p);
|
|
if (v >= fMin && v <= fMax) {
|
|
const gridColor = isDark ? 'rgba(200,206,224,0.24)' : 'rgba(86,96,117,0.16)';
|
|
shapes.push(
|
|
{ type: 'line', x0: v, x1: v, y0: 0, y1: 1, xref: 'x', yref: 'y domain', line: { color: gridColor, width: 1.5 } },
|
|
{ type: 'line', x0: v, x1: v, y0: 0, y1: 1, xref: 'x2', yref: 'y2 domain', line: { color: gridColor, width: 1.5 } }
|
|
);
|
|
}
|
|
}
|
|
|
|
const gridColor = isDark ? 'rgba(200,206,224,0.14)' : 'rgba(86,96,117,0.09)';
|
|
const zeroLineColor = isDark ? 'rgba(200,206,224,0.24)' : 'rgba(82,86,99,0.20)';
|
|
const textColor = isDark ? '#b4b4bd' : '#525663';
|
|
const titleColor = isDark ? '#f1f1f4' : '#17191f';
|
|
const plotBgColor = isDark ? '#090a0d' : '#ffffff';
|
|
|
|
const xAxisCommon = {
|
|
type: 'log', title: { text: 'Freq (Hz)', font: { size: isSmallScreen ? 12 : 14 } },
|
|
range: [Math.log10(fMin), Math.log10(fMax)],
|
|
tickvals: xTicks, ticktext: xTexts,
|
|
showgrid: true, gridcolor: gridColor,
|
|
tickfont: { color: textColor, size: isSmallScreen ? 11 : 12 },
|
|
nticks: isSmallScreen ? 6 : 10
|
|
};
|
|
|
|
const layout = {
|
|
paper_bgcolor: plotBgColor, plot_bgcolor: plotBgColor,
|
|
uirevision: this.bodeMagRange ? this.bodeMagRange.join(',') : 'true', // 當範圍不變時，保留使用者縮放
|
|
margin: isSmallScreen ? { t: 80, b: 120, l: 55, r: 15 } : { t: 70, b: 120, l: 70, r: 30 },
|
|
showlegend: false,
|
|
grid: { rows: 2, columns: 1, pattern: 'independent', roworder: 'top to bottom', ygap: isSmallScreen ? 0.35 : 0.3 },
|
|
font: { color: textColor, family: 'Google Sans, Roboto, sans-serif' },
|
|
annotations: [
|
|
{ text: 'Magnitude Response (dB)', xref: 'x domain', yref: 'y domain', x: 0.5, y: isSmallScreen ? 1.25 : 1.15, showarrow: false, font: { size: isSmallScreen ? 14 : 16, color: titleColor, weight: 'normal' } },
|
|
{ text: 'Phase Response (Deg)', xref: 'x2 domain', yref: 'y2 domain', x: 0.5, y: isSmallScreen ? 1.25 : 1.15, showarrow: false, font: { size: isSmallScreen ? 14 : 16, color: titleColor, weight: 'normal' } },
|
|
|
|
// 手動 Magnitude 圖例 (位於上方圖表下方)
|
|
{ xref: 'paper', yref: 'paper', x: 0.35, y: isSmallScreen ? 0.52 : 0.54, text: '一一一', font: { color: isDark ? '#c8cee0' : '#566075', size: 10 }, showarrow: false },
|
|
{ xref: 'paper', yref: 'paper', x: 0.42, y: isSmallScreen ? 0.52 : 0.54, text: 'Ideal Cascade (Float)', font: { color: textColor, size: 11 }, showarrow: false, xanchor: 'left' },
|
|
{ xref: 'paper', yref: 'paper', x: 0.58, y: isSmallScreen ? 0.52 : 0.54, text: '· · · ·', font: { color: isDark ? '#b9b2ff' : '#7a6689', size: 14 }, showarrow: false },
|
|
{ xref: 'paper', yref: 'paper', x: 0.63, y: isSmallScreen ? 0.52 : 0.54, text: 'Fixed Cascade (Mimic)', font: { color: textColor, size: 11 }, showarrow: false, xanchor: 'left' },
|
|
|
|
// 手動 Phase 圖例 (位於下方圖表下方)
|
|
{ xref: 'paper', yref: 'paper', x: 0.35, y: -0.15, text: '一一一', font: { color: isDark ? '#64d2ff' : '#2d6f8f', size: 10 }, showarrow: false },
|
|
{ xref: 'paper', yref: 'paper', x: 0.42, y: -0.15, text: 'Ideal Phase', font: { color: textColor, size: 11 }, showarrow: false, xanchor: 'left' },
|
|
{ xref: 'paper', yref: 'paper', x: 0.58, y: -0.15, text: '· · · ·', font: { color: isDark ? '#ff9bd8' : '#96527b', size: 14 }, showarrow: false },
|
|
{ xref: 'paper', yref: 'paper', x: 0.63, y: -0.15, text: 'Fixed Phase', font: { color: textColor, size: 11 }, showarrow: false, xanchor: 'left' },
|
|
|
|
...annotations
|
|
],
|
|
xaxis: { ...xAxisCommon, anchor: 'y' },
|
|
yaxis: {
|
|
title: { text: 'Mag (dB)', font: { size: isSmallScreen ? 12 : 14 } },
|
|
range: this.bodeMagRange || [-70, 0],
|
|
gridcolor: gridColor,
|
|
zerolinecolor: zeroLineColor,
|
|
tickfont: { color: textColor, size: isSmallScreen ? 11 : 12 },
|
|
fixedrange: false // 允許使用者手動縮放或點擊 Auto Scale
|
|
},
|
|
xaxis2: {
|
|
type: 'log',
|
|
title: { text: 'Freq (Hz)', font: { size: isSmallScreen ? 12 : 14 } },
|
|
tickvals: xTicks,
|
|
ticktext: xTexts,
|
|
showgrid: true,
|
|
gridcolor: gridColor,
|
|
tickfont: { color: textColor, size: isSmallScreen ? 11 : 12 },
|
|
nticks: isSmallScreen ? 6 : 10,
|
|
matches: 'x',
|
|
anchor: 'y2'
|
|
},
|
|
yaxis2: {
|
|
title: { text: 'Phase (°)', font: { size: isSmallScreen ? 12 : 14 } },
|
|
range: [-180, 180],
|
|
tickvals: [-180, -90, 0, 90, 180],
|
|
gridcolor: gridColor,
|
|
zerolinecolor: zeroLineColor,
|
|
tickfont: { color: textColor, size: isSmallScreen ? 11 : 12 },
|
|
fixedrange: true // 相位縱軸鎖死，不可縮放
|
|
},
|
|
shapes: shapes
|
|
};
|
|
|
|
const traceMagIdeal = { x: freq, y: magIdeal, name: 'Ideal Cascade (Float)', type: 'scatter', line: { color: isDark ? '#c8cee0' : '#566075', width: 2.8 } };
|
|
const traceMagFixed = { x: freq, y: magFixed, name: 'Fixed Cascade (Mimic)', type: 'scatter', line: { color: isDark ? '#b9b2ff' : '#7a6689', width: 2.4, dash: 'dot' } };
|
|
|
|
const tracePhaseIdeal = { x: freq, y: phaseIdeal, name: 'Ideal Phase', type: 'scatter', line: { color: isDark ? '#64d2ff' : '#2d6f8f', width: 2.8 }, xaxis: 'x2', yaxis: 'y2' };
|
|
const tracePhaseFixed = { x: freq, y: phaseFixed, name: 'Fixed Phase', type: 'scatter', line: { color: isDark ? '#ff9bd8' : '#96527b', width: 2.4, dash: 'dot' }, xaxis: 'x2', yaxis: 'y2' };
|
|
|
|
Plotly.react('bodePlot', [traceMagIdeal, traceMagFixed, tracePhaseIdeal, tracePhaseFixed], layout, { responsive: true });
|
|
},
|
|
|
|
parseCsvText(text, maxRows = Infinity) {
|
|
const rows = [];
|
|
let row = [];
|
|
let field = '';
|
|
let inQuotes = false;
|
|
let totalRows = 0;
|
|
|
|
const finishRow = () => {
|
|
row.push(field);
|
|
if (row.some(value => value.trim() !== '')) {
|
|
totalRows++;
|
|
if (rows.length < maxRows) rows.push(row);
|
|
}
|
|
row = [];
|
|
field = '';
|
|
};
|
|
|
|
for (let i = 0; i < text.length; i++) {
|
|
const char = text[i];
|
|
const next = text[i + 1];
|
|
|
|
if (char === '"') {
|
|
if (inQuotes && next === '"') {
|
|
field += '"';
|
|
i++;
|
|
} else {
|
|
inQuotes = !inQuotes;
|
|
}
|
|
} else if (char === ',' && !inQuotes) {
|
|
row.push(field);
|
|
field = '';
|
|
} else if ((char === '\n' || char === '\r') && !inQuotes) {
|
|
if (char === '\r' && next === '\n') i++;
|
|
finishRow();
|
|
} else {
|
|
field += char;
|
|
}
|
|
}
|
|
|
|
if (inQuotes) throw new Error('CSV 引號未正確結束');
|
|
finishRow();
|
|
return { rows, totalRows };
|
|
},
|
|
|
|
resetCsvState() {
|
|
this.csvFile = null;
|
|
this.csvFileId = null;
|
|
this.csvColumns = [];
|
|
this.csvPreview = [];
|
|
this.csvInfo = null;
|
|
this.csvParseError = null;
|
|
this.csvUploading = false;
|
|
this.usingPresetCsv = false;
|
|
this.isCsvPreviewExpanded = true;
|
|
this.selectedColumn = 0;
|
|
this.filterDone = false;
|
|
this.timePlotData = null;
|
|
this.zoomStartIdx = null;
|
|
this.zoomEndIdx = null;
|
|
this.timePlotUnit = null;
|
|
this.timePlotMultiplier = null;
|
|
},
|
|
|
|
async loadPresetWaveforms() {
|
|
try {
|
|
const res = await fetch('/api/csv/preset');
|
|
if (!res.ok) return;
|
|
const data = await res.json();
|
|
this.presetCsvAvailable = !!data.available;
|
|
if (!data.available) return;
|
|
|
|
this.csvFile = null;
|
|
this.csvFileId = data.file_id;
|
|
this.csvColumns = data.columns || [];
|
|
this.csvPreview = data.preview || [];
|
|
this.csvInfo = {
|
|
rows: data.rows || 0,
|
|
columns: data.columns_count || (data.columns || []).length,
|
|
size: data.size || 0,
|
|
};
|
|
this.csvParseError = null;
|
|
this.csvUploading = false;
|
|
this.presetCsvName = data.name || 'preset_signals.csv';
|
|
this.usingPresetCsv = true;
|
|
this.selectedColumn = Number.isInteger(data.default_col_idx) ? data.default_col_idx : 0;
|
|
this.filterDone = false;
|
|
this.timePlotData = null;
|
|
this.zoomStartIdx = null;
|
|
this.zoomEndIdx = null;
|
|
this.timePlotUnit = null;
|
|
this.timePlotMultiplier = null;
|
|
this.isCsvPreviewExpanded = true;
|
|
this.$nextTick(() => this.processFilter());
|
|
} catch (_) {
|
|
this.presetCsvAvailable = false;
|
|
}
|
|
},
|
|
|
|
restorePresetWaveforms() {
|
|
if (this.$refs.fileInput) this.$refs.fileInput.value = '';
|
|
this.loadPresetWaveforms();
|
|
},
|
|
|
|
handleFileUpload(event) {
|
|
const file = event.target.files[0];
|
|
this.resetCsvState();
|
|
if (!file) return;
|
|
|
|
const maxBytes = 300 * 1024 * 1024;
|
|
const fileName = file.name || '';
|
|
if (!fileName.toLowerCase().endsWith('.csv')) {
|
|
this.csvParseError = '請選擇 .csv 檔案';
|
|
event.target.value = '';
|
|
return;
|
|
}
|
|
if (file.size > maxBytes) {
|
|
this.csvParseError = 'CSV 檔案不可超過 300MB';
|
|
event.target.value = '';
|
|
return;
|
|
}
|
|
|
|
const previewBytes = Math.min(file.size, 1024 * 1024);
|
|
const reader = new FileReader();
|
|
reader.onload = async (e) => {
|
|
try {
|
|
const text = String(e.target.result || '').replace(/^\uFEFF/, '');
|
|
const { rows, totalRows } = this.parseCsvText(text, 6);
|
|
if (totalRows < 2 || rows.length < 2) throw new Error('CSV 需包含標題列與至少一筆資料');
|
|
|
|
const columns = rows[0].map((value, index) => {
|
|
const label = value.trim();
|
|
return label || `Column ${index + 1}`;
|
|
});
|
|
if (columns.length === 0) throw new Error('CSV 標題列不可為空');
|
|
|
|
this.csvFile = file;
|
|
this.csvColumns = columns;
|
|
this.csvPreview = rows.slice(1, 6).map(row => {
|
|
const padded = row.slice(0, columns.length);
|
|
while (padded.length < columns.length) padded.push('');
|
|
return padded.map(value => value.trim());
|
|
});
|
|
this.csvInfo = {
|
|
rows: Math.max(totalRows - 1, 0),
|
|
rowsLabel: file.size > previewBytes ? `預覽 ${Math.max(rows.length - 1, 0)}+` : `${Math.max(totalRows - 1, 0)}`,
|
|
columns: columns.length,
|
|
size: file.size,
|
|
};
|
|
this.selectedColumn = 0;
|
|
if (columns.length > 1) {
|
|
const first = columns[0].toLowerCase();
|
|
if (['time', 't', 'sec', 'x', 'index', 'unnamed'].some(kw => first.includes(kw))) {
|
|
this.selectedColumn = 1;
|
|
}
|
|
}
|
|
|
|
// 背景上傳至暫存區
|
|
this.csvUploading = true;
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
const res = await fetch('/api/csv/upload', { method: 'POST', body: formData });
|
|
if (!res.ok) {
|
|
const errText = await res.text();
|
|
let detail = errText || '背景上傳失敗';
|
|
try {
|
|
detail = JSON.parse(errText).detail || detail;
|
|
} catch (_) {}
|
|
throw new Error(detail);
|
|
}
|
|
const data = await res.json();
|
|
this.csvFileId = data.file_id;
|
|
|
|
} catch (err) {
|
|
this.csvParseError = err.message || 'CSV 解析失敗';
|
|
this.csvColumns = [];
|
|
this.csvPreview = [];
|
|
this.csvInfo = null;
|
|
this.csvFileId = null;
|
|
event.target.value = '';
|
|
} finally {
|
|
this.csvUploading = false;
|
|
}
|
|
};
|
|
reader.onerror = () => {
|
|
this.csvParseError = 'CSV 讀取失敗';
|
|
this.csvUploading = false;
|
|
event.target.value = '';
|
|
};
|
|
reader.readAsText(file.slice(0, previewBytes));
|
|
},
|
|
|
|
debouncedProcessFilter() {
|
|
if (!this.filterDone || !this.csvFileId) return;
|
|
if (this._filterTimeout) clearTimeout(this._filterTimeout);
|
|
this._filterTimeout = setTimeout(() => {
|
|
this.processFilter();
|
|
}, 500);
|
|
},
|
|
|
|
async processFilter() {
|
|
if (this.csvUploading) {
|
|
this.globalError = "CSV 還在上傳中，請稍候...";
|
|
return;
|
|
}
|
|
if (!this.csvFileId) {
|
|
if (this.csvFile) this.globalError = "檔案還在上傳中，請稍候...";
|
|
return;
|
|
}
|
|
if (this.zoomStartIdx === null && this.zoomEndIdx === null) {
|
|
this.timePlotUnit = null;
|
|
this.timePlotMultiplier = null;
|
|
}
|
|
this.loadingFilter = true;
|
|
this.globalError = null;
|
|
const formData = new FormData();
|
|
formData.append('file_id', this.csvFileId);
|
|
formData.append('b', this.b_str);
|
|
formData.append('a', this.a_str);
|
|
formData.append('col_idx', this.selectedColumn);
|
|
formData.append('b_int', this.b_int_str);
|
|
formData.append('a_int', this.a_int_str);
|
|
formData.append('shift_in', this.shiftBitsIn);
|
|
formData.append('shift_out', this.shiftBitsOut);
|
|
formData.append('shift_b', this.shiftBitsB);
|
|
formData.append('shift_a', this.shiftBitsA);
|
|
formData.append('use_round', this.useRound);
|
|
formData.append('stages', JSON.stringify(this.getCascadeFilterPayload()));
|
|
if (this.zoomStartIdx !== null && this.zoomEndIdx !== null) {
|
|
formData.append('start_idx', this.zoomStartIdx);
|
|
formData.append('end_idx', this.zoomEndIdx);
|
|
}
|
|
try {
|
|
const res = await fetch('/api/filter', { method: 'POST', body: formData });
|
|
if (!res.ok) { const err = await res.json(); throw new Error(err.detail || '濾波處理失敗'); }
|
|
const data = await res.json();
|
|
this.timePlotData = data;
|
|
this.filterDone = true;
|
|
this.isCsvPreviewExpanded = false; // 運算成功後自動收合預覽
|
|
// 確保在可見狀態下繪圖，避免 Plotly 計算尺寸錯誤
|
|
this.$nextTick(() => {
|
|
this.drawTimePlot(data);
|
|
});
|
|
} catch (e) { this.globalError = e.message; }
|
|
finally { this.loadingFilter = false; }
|
|
},
|
|
|
|
drawTimePlot(data) {
|
|
const isDark = this.isDarkMode;
|
|
const isSmallScreen = window.innerWidth < 768;
|
|
const gridColor = isDark ? 'rgba(200,206,224,0.14)' : 'rgba(86,96,117,0.09)';
|
|
const zeroLineColor = isDark ? 'rgba(200,206,224,0.24)' : 'rgba(82,86,99,0.20)';
|
|
const textColor = isDark ? '#b4b4bd' : '#525663';
|
|
const plotBgColor = isDark ? '#090a0d' : '#ffffff';
|
|
|
|
if (!this.timePlotUnit) {
|
|
const totalDurationS = (data.total_points || (data.index.length > 0 ? Math.max(...data.index) : 0)) / this.fs;
|
|
if (totalDurationS > 0 && totalDurationS < 1e-3) {
|
|
this.timePlotMultiplier = 1e6;
|
|
this.timePlotUnit = 'μs';
|
|
} else if (totalDurationS > 0 && totalDurationS < 1) {
|
|
this.timePlotMultiplier = 1e3;
|
|
this.timePlotUnit = 'ms';
|
|
} else {
|
|
this.timePlotMultiplier = 1;
|
|
this.timePlotUnit = 's';
|
|
}
|
|
}
|
|
const timeMultiplier = this.timePlotMultiplier || 1;
|
|
const timeUnit = this.timePlotUnit || 's';
|
|
const xData = data.index.map(i => (i / this.fs) * timeMultiplier);
|
|
|
|
const layout = {
|
|
paper_bgcolor: plotBgColor, plot_bgcolor: plotBgColor,
|
|
uirevision: 'time-domain-lod',
|
|
margin: isSmallScreen ? { t: 60, b: 60, l: 45, r: 15 } : { t: 40, b: 55, l: 60, r: 20 },
|
|
font: { color: textColor, family: 'Google Sans, Roboto, sans-serif' },
|
|
xaxis: { title: { text: `Time (${timeUnit})`, font: { size: isSmallScreen ? 10 : 11 } }, gridcolor: gridColor, zerolinecolor: zeroLineColor, tickfont: { color: textColor, size: isSmallScreen ? 9 : 11 } },
|
|
yaxis: { title: { text: 'Amplitude', font: { size: isSmallScreen ? 10 : 11 } }, gridcolor: gridColor, zerolinecolor: zeroLineColor, tickfont: { color: textColor, size: isSmallScreen ? 9 : 11 } },
|
|
legend: { orientation: 'h', y: 1.02, yanchor: 'bottom', x: 1, xanchor: 'right', font: { color: textColor, size: isSmallScreen ? 9 : 10 } }
|
|
};
|
|
this.isRedrawingTimePlot = true;
|
|
Plotly.react('timePlot', [
|
|
{ x: xData, y: data.original, name: '原始輸入 (Input)', type: 'scatter', line: { color: isDark ? '#c8cee0' : '#566075', width: 2.4 }, opacity: 0.5 },
|
|
{ x: xData, y: data.filtered, name: '理想串聯路徑 (Cascade Ideal)', type: 'scatter', line: { color: isDark ? '#64d2ff' : '#2d6f8f', width: 2.8 }, opacity: 0.95 },
|
|
{ x: xData, y: data.filtered_fixed, name: '定點串聯路徑 (Cascade Fixed)', type: 'scatter', line: { color: isDark ? '#ff7c7c' : '#c0392b', width: 2.8, dash: 'dot' }, opacity: 0.95 }
|
|
], layout, { responsive: true });
|
|
this.$nextTick(() => setTimeout(() => { this.isRedrawingTimePlot = false; }, 50));
|
|
const gd = document.getElementById('timePlot');
|
|
if (gd && !gd._hasRelayoutListener) {
|
|
gd.on('plotly_relayout', this.handleTimePlotRelayout);
|
|
gd._hasRelayoutListener = true;
|
|
}
|
|
},
|
|
|
|
handleTimePlotRelayout(eventData) {
|
|
if (this.isRedrawingTimePlot) return;
|
|
if (!this.timePlotData || !this.timePlotData.total_points) return;
|
|
let startIdx = null;
|
|
let endIdx = null;
|
|
if (eventData['xaxis.range[0]'] !== undefined && eventData['xaxis.range[1]'] !== undefined) {
|
|
const timeMultiplier = this.timePlotMultiplier || 1;
|
|
startIdx = Math.max(0, Math.floor((eventData['xaxis.range[0]'] * this.fs) / timeMultiplier));
|
|
endIdx = Math.min(this.timePlotData.total_points, Math.ceil((eventData['xaxis.range[1]'] * this.fs) / timeMultiplier));
|
|
if (endIdx - startIdx <= 10) return;
|
|
} else if (eventData['xaxis.autorange'] === true) {
|
|
startIdx = null;
|
|
endIdx = null;
|
|
} else {
|
|
return;
|
|
}
|
|
this.zoomStartIdx = startIdx;
|
|
this.zoomEndIdx = endIdx;
|
|
if (this._zoomTimeout) clearTimeout(this._zoomTimeout);
|
|
this._zoomTimeout = setTimeout(() => this.processFilter(), 150);
|
|
},
|
|
|
|
async downloadCsv() {
|
|
if (!this.csvFileId) return;
|
|
const formData = new FormData();
|
|
formData.append('file_id', this.csvFileId);
|
|
formData.append('b', this.b_str);
|
|
formData.append('a', this.a_str);
|
|
formData.append('col_idx', this.selectedColumn);
|
|
formData.append('b_int', this.b_int_str);
|
|
formData.append('a_int', this.a_int_str);
|
|
formData.append('shift_in', this.shiftBitsIn);
|
|
formData.append('shift_out', this.shiftBitsOut);
|
|
formData.append('shift_b', this.shiftBitsB);
|
|
formData.append('shift_a', this.shiftBitsA);
|
|
formData.append('use_round', this.useRound);
|
|
formData.append('stages', JSON.stringify(this.getCascadeFilterPayload()));
|
|
formData.append('compact', 'true');
|
|
if (this.zoomStartIdx !== null && this.zoomEndIdx !== null) {
|
|
formData.append('start_idx', this.zoomStartIdx);
|
|
formData.append('end_idx', this.zoomEndIdx);
|
|
}
|
|
try {
|
|
const res = await fetch('/api/filter/download', { method: 'POST', body: formData });
|
|
if (!res.ok) throw new Error('下載失敗');
|
|
const blob = await res.blob();
|
|
const url = window.URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url; a.download = 'cascade_filtered_output.csv';
|
|
document.body.appendChild(a); a.click();
|
|
window.URL.revokeObjectURL(url);
|
|
} catch (e) { this.globalError = e.message; }
|
|
},
|
|
|
|
async connectMCUPort() {
|
|
if (!this.webSerialSupported) return;
|
|
this.mcuStatus = '';
|
|
try {
|
|
const port = await navigator.serial.requestPort();
|
|
await port.open({ baudRate: 115200 });
|
|
this.mcuSerialPort = port;
|
|
this.mcuConnected = true;
|
|
const info = port.getInfo();
|
|
const vid = info.usbVendorId ? `VID:0x${info.usbVendorId.toString(16)}` : '';
|
|
this.mcuStatus = `已連線${vid ? ' (' + vid + ')' : ''}`;
|
|
} catch (e) {
|
|
if (e.name === 'NotFoundError') {
|
|
this.mcuStatus = '未選擇連接埠';
|
|
} else {
|
|
this.mcuStatus = `連線失敗: ${e.message}`;
|
|
}
|
|
}
|
|
},
|
|
|
|
async disconnectMCUPort() {
|
|
if (this.mcuSerialPort) {
|
|
try {
|
|
await this.mcuSerialPort.close();
|
|
} catch { /* ignore close errors */ }
|
|
this.mcuSerialPort = null;
|
|
}
|
|
this.mcuConnected = false;
|
|
this.mcuStatus = '已斷線';
|
|
},
|
|
|
|
mcuCommandFromFixedCoeffs() {
|
|
const bVals = this.fixedPointCoeffs.b.map(item => item.val);
|
|
const aVals = this.fixedPointCoeffs.a.map(item => item.val);
|
|
const b0 = bVals[0] ?? 0;
|
|
const b1 = bVals[1] ?? 0;
|
|
const b2 = bVals[2] ?? 0;
|
|
const a1 = aVals[1] ?? 0;
|
|
const a2 = aVals[2] ?? 0;
|
|
return `bodeplot=${b0},${b1},${b2},${a1},${a2}`;
|
|
},
|
|
|
|
async writeToMCU() {
|
|
const stageNumber = this.activeCascadeStageIndex + 1;
|
|
if (!this.mcuSerialPort || !this.mcuConnected) {
|
|
this.mcuStatus = '請先連線 MCU 連接埠';
|
|
return;
|
|
}
|
|
this.writingMCU = true;
|
|
this.globalError = null;
|
|
this.mcuStatus = '';
|
|
const command = this.mcuCommandFromFixedCoeffs();
|
|
|
|
try {
|
|
const encoder = new TextEncoder();
|
|
const writer = this.mcuSerialPort.writable.getWriter();
|
|
try {
|
|
await writer.write(encoder.encode(command + '\r\n'));
|
|
} finally {
|
|
writer.releaseLock();
|
|
}
|
|
this.mcuStatus = `已送出 Stage ${stageNumber}: ${command}`;
|
|
} catch (e) {
|
|
this.globalError = e.message;
|
|
this.mcuStatus = `Stage ${stageNumber} 寫入失敗: ${e.message}`;
|
|
} finally {
|
|
this.writingMCU = false;
|
|
}
|
|
}
|
|
}
|
|
}
|