FPV Rate Profile Comparison Tool

Compare and analyze Betaflight rate profiles side-by-side

\n\n

Visibility Controls

\n Profile A (Solid)\n Profile B (Dashed)\n

\n Roll\n Pitch\n Yaw\n

\n\n

Rate Curves

\n Roll\n Pitch\n Yaw\n |\n Profile A\n Profile B\n

\n\n

Throttle Curves

\n Profile A\n Profile B\n

\n\n

\n ${generateProfileEditor(\"a\", \"A\")}\n ${generateProfileEditor(\"b\", \"B\")}\n

\n\n

Profile History

\n \n \n \n

\n \n

\n\n \n\n`;\n\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html; charset=utf-8\",\n \"Cache-Control\": \"public, max-age=3600\",\n },\n });\n}\n\nfunction generateProfileEditor(id: string, label: string): string {\n return `

Profile ${label}

\n \n \n

\n\n

\n ${\n [\"roll\", \"pitch\", \"yaw\"].map((axis) => `\n

${\n axis.charAt(0).toUpperCase() + axis.slice(1)\n }

\n Center Sensitivity (0-255):\n \n 70\n

\n Max Rate (deg/s):\n \n 670\n

\n Expo (0-100):\n \n 0\n

\n `).join(\"\")\n }\n\n

Throttle

\n Mid Point (0-100):\n \n 50\n

\n Expo (0-100):\n \n 0\n

\n\n

Import from CLI

\n \n \n \n

Export to CLI

\n \n \n \n

`;\n}\n\nfunction generateInlineJavaScript(): string {\n // All JavaScript code inlined here...\n // This is getting very long, so I'll need to continue in the next part\n return `// Rate Calculator Functions\nfunction calculateActualRate(rcCommand, center, maxRate, expo) {\n const rcCommandAbs = Math.abs(rcCommand);\n let expof;\n if (expo > 0) {\n const expoPower = 3;\n expof = (expo / 100.0) * Math.pow(rcCommandAbs, expoPower) + rcCommandAbs * (1 - expo / 100.0);\n } else {\n expof = rcCommandAbs;\n }\n const centerSensitivity = center * 10;\n const rate = rcCommandAbs * centerSensitivity + expof * (maxRate - centerSensitivity);\n return rcCommand >= 0 ? rate : -rate;\n}\n\nfunction calculateThrottle(input, midPoint, expo) {\n const mid = midPoint / 100;\n const expoNorm = expo / 100;\n const expof = input * (1 - expoNorm) + Math.pow(input, 3) * expoNorm;\n let throttle;\n if (expof < 0.5) {\n throttle = expof * 2 * mid;\n } else {\n throttle = mid + (expof - 0.5) * 2 * (1 - mid);\n }\n return throttle;\n}\n\n// CLI Parser Functions\nfunction parseCLI(text) {\n const settings = {};\n const lines = text.split('\\\\n');\n for (const line of lines) {\n const match = line.match(/^\\\\s*(?:set\\\\s+)?([a-z_]+)\\\\s*=\\\\s*(.+?)\\\\s*$/i);\n if (match) {\n const key = match[1].toLowerCase();\n const value = match[2].trim();\n settings[key] = value;\n }\n }\n return settings;\n}\n\nfunction generateCLI(profile) {\n const commands = [\n '# Betaflight Rate Profile Configuration',\n '# Generated by FPV Rate Profile Comparison Tool',\n ''\n ];\n if (profile.name) {\n commands.push(\\`# Profile: \\${profile.name}\\`);\n commands.push('');\n }\n commands.push(\n '# Rate Type',\n 'set rates_type = ACTUAL',\n '',\n '# Roll Rates',\n \\`set roll_rc_rate = \\${profile.rates.roll.center}\\`,\n \\`set roll_rate = \\${profile.rates.roll.maxRate}\\`,\n \\`set roll_expo = \\${profile.rates.roll.expo}\\`,\n '',\n '# Pitch Rates',\n \\`set pitch_rc_rate = \\${profile.rates.pitch.center}\\`,\n \\`set pitch_rate = \\${profile.rates.pitch.maxRate}\\`,\n \\`set pitch_expo = \\${profile.rates.pitch.expo}\\`,\n '',\n '# Yaw Rates',\n \\`set yaw_rc_rate = \\${profile.rates.yaw.center}\\`,\n \\`set yaw_rate = \\${profile.rates.yaw.maxRate}\\`,\n \\`set yaw_expo = \\${profile.rates.yaw.expo}\\`,\n '',\n '# Throttle',\n \\`set thr_mid = \\${profile.throttle.mid}\\`,\n \\`set thr_expo = \\${profile.throttle.expo}\\`,\n '',\n 'save'\n );\n return commands.join('\\\\n');\n}\n\n// Profile Manager Class\nclass ProfileManager {\n constructor(storage = null) {\n this.storage = storage || window.localStorage;\n this.storageKey = 'fpv-rate-profiles';\n this.profiles = this.loadFromStorage();\n }\n\n loadFromStorage() {\n if (!this.storage) return [];\n try {\n const data = this.storage.getItem(this.storageKey);\n return data ? JSON.parse(data) : [];\n } catch (error) {\n console.error('Failed to load profiles:', error);\n return [];\n }\n }\n\n saveToStorage() {\n if (!this.storage) return;\n try {\n this.storage.setItem(this.storageKey, JSON.stringify(this.profiles));\n } catch (error) {\n console.error('Failed to save profiles:', error);\n }\n }\n\n createDefaultProfile(name = 'Default Profile') {\n return {\n name,\n rates: {\n roll: { center: 70, maxRate: 670, expo: 0 },\n pitch: { center: 70, maxRate: 670, expo: 0 },\n yaw: { center: 70, maxRate: 670, expo: 0 }\n },\n throttle: { mid: 50, expo: 0 }\n };\n }\n\n saveProfile(profile) {\n const profileWithTimestamp = { ...profile, timestamp: Date.now() };\n this.profiles.push(profileWithTimestamp);\n this.saveToStorage();\n return profileWithTimestamp;\n }\n\n getProfiles() {\n return [...this.profiles];\n }\n\n getHistory() {\n return this.getProfiles();\n }\n\n deleteProfile(timestamp) {\n this.profiles = this.profiles.filter(p => p.timestamp !== timestamp);\n this.saveToStorage();\n }\n\n exportHistory() {\n return JSON.stringify(this.profiles, null, 2);\n }\n\n importHistory(jsonString, merge = true) {\n try {\n const imported = JSON.parse(jsonString);\n if (!Array.isArray(imported)) {\n throw new Error('Invalid history format');\n }\n if (merge) {\n this.profiles = [...this.profiles, ...imported];\n } else {\n this.profiles = imported;\n }\n this.saveToStorage();\n } catch (error) {\n console.error('Failed to import history:', error);\n throw error;\n }\n }\n\n clearAll() {\n this.profiles = [];\n this.saveToStorage();\n }\n}\n\n// Graph Renderer Class\nclass GraphRenderer {\n constructor(rateCanvas, throttleCanvas) {\n this.rateCanvas = rateCanvas;\n this.throttleCanvas = throttleCanvas;\n this.rateCtx = rateCanvas.getContext('2d');\n this.throttleCtx = throttleCanvas.getContext('2d');\n this.colors = { roll: '#ff3366', pitch: '#33ff66', yaw: '#ffaa00' };\n this.padding = 60;\n this.gridColor = '#333';\n this.axisColor = '#666';\n this.labelColor = '#999';\n this.visibility = { profileA: true, profileB: true, roll: true, pitch: true, yaw: true };\n }\n\n setVisibility(visibility) {\n this.visibility = { ...this.visibility, ...visibility };\n }\n\n clearCanvas(ctx, width, height) {\n ctx.fillStyle = '#1a1a1a';\n ctx.fillRect(0, 0, width, height);\n }\n\n drawGrid(ctx, width, height) {\n ctx.strokeStyle = this.gridColor;\n ctx.lineWidth = 1;\n ctx.setLineDash([5, 5]);\n for (let i = 0; i <= 10; i++) {\n const x = this.padding + (width - 2 * this.padding) * (i / 10);\n ctx.beginPath();\n ctx.moveTo(x, this.padding);\n ctx.lineTo(x, height - this.padding);\n ctx.stroke();\n }\n for (let i = 0; i <= 10; i++) {\n const y = this.padding + (height - 2 * this.padding) * (i / 10);\n ctx.beginPath();\n ctx.moveTo(this.padding, y);\n ctx.lineTo(width - this.padding, y);\n ctx.stroke();\n }\n ctx.setLineDash([]);\n }\n\n drawRateAxes(ctx, width, height, yMax) {\n ctx.strokeStyle = this.axisColor;\n ctx.lineWidth = 2;\n ctx.beginPath();\n ctx.moveTo(this.padding, this.padding);\n ctx.lineTo(this.padding, height - this.padding);\n ctx.stroke();\n ctx.beginPath();\n ctx.moveTo(this.padding, height / 2);\n ctx.lineTo(width - this.padding, height / 2);\n ctx.stroke();\n ctx.fillStyle = this.labelColor;\n ctx.font = '12px monospace';\n ctx.textAlign = 'right';\n for (let i = 0; i <= 4; i++) {\n const value = yMax - (i * yMax / 2);\n const y = this.padding + (height - 2 * this.padding) * (i / 4);\n ctx.fillText(Math.round(value) + '°/s', this.padding - 10, y + 4);\n }\n ctx.textAlign = 'center';\n ctx.fillText('-1.0', this.padding, height - this.padding + 20);\n ctx.fillText('0.0', width / 2, height - this.padding + 20);\n ctx.fillText('1.0', width - this.padding, height - this.padding + 20);\n ctx.fillText('RC Command', width / 2, height - 10);\n }\n\n drawThrottleAxes(ctx, width, height) {\n ctx.strokeStyle = this.axisColor;\n ctx.lineWidth = 2;\n ctx.beginPath();\n ctx.moveTo(this.padding, this.padding);\n ctx.lineTo(this.padding, height - this.padding);\n ctx.lineTo(width - this.padding, height - this.padding);\n ctx.stroke();\n ctx.fillStyle = this.labelColor;\n ctx.font = '12px monospace';\n ctx.textAlign = 'right';\n for (let i = 0; i <= 10; i++) {\n const value = 1.0 - (i / 10);\n const y = this.padding + (height - 2 * this.padding) * (i / 10);\n ctx.fillText(value.toFixed(1), this.padding - 10, y + 4);\n }\n ctx.textAlign = 'center';\n for (let i = 0; i <= 10; i++) {\n const value = i / 10;\n const x = this.padding + (width - 2 * this.padding) * (i / 10);\n ctx.fillText(value.toFixed(1), x, height - this.padding + 20);\n }\n ctx.fillText('Throttle Input', width / 2, height - 10);\n ctx.save();\n ctx.translate(20, height / 2);\n ctx.rotate(-Math.PI / 2);\n ctx.fillText('Throttle Output', 0, 0);\n ctx.restore();\n }\n\n drawRateCurve(ctx, width, height, rates, color, yMax, dashed = false) {\n const steps = 200;\n ctx.strokeStyle = color;\n ctx.lineWidth = 3;\n ctx.setLineDash(dashed ? [10, 5] : []);\n ctx.beginPath();\n for (let i = 0; i <= steps; i++) {\n const rcCommand = -1 + (2 * i / steps);\n const rateValue = calculateActualRate(rcCommand, rates.center, rates.maxRate, rates.expo);\n const x = this.padding + (width - 2 * this.padding) * ((rcCommand + 1) / 2);\n const y = (height / 2) - ((rateValue / yMax) * (height - 2 * this.padding) / 2);\n if (i === 0) ctx.moveTo(x, y);\n else ctx.lineTo(x, y);\n }\n ctx.stroke();\n ctx.setLineDash([]);\n }\n\n drawThrottleCurve(ctx, width, height, throttle, color, dashed = false) {\n const steps = 200;\n ctx.strokeStyle = color;\n ctx.lineWidth = 3;\n ctx.setLineDash(dashed ? [10, 5] : []);\n ctx.beginPath();\n for (let i = 0; i <= steps; i++) {\n const input = i / steps;\n const throttleValue = calculateThrottle(input, throttle.mid, throttle.expo);\n const x = this.padding + (width - 2 * this.padding) * input;\n const y = height - this.padding - (height - 2 * this.padding) * throttleValue;\n if (i === 0) ctx.moveTo(x, y);\n else ctx.lineTo(x, y);\n }\n ctx.stroke();\n ctx.setLineDash([]);\n }\n\n calculateMaxRate(profileA, profileB) {\n const axes = ['roll', 'pitch', 'yaw'];\n let maxRate = 0;\n axes.forEach(axis => {\n if (this.visibility[axis]) {\n if (profileA && this.visibility.profileA) {\n const rate = Math.abs(calculateActualRate(1, profileA.rates[axis].center, profileA.rates[axis].maxRate, profileA.rates[axis].expo));\n maxRate = Math.max(maxRate, rate);\n }\n if (profileB && this.visibility.profileB) {\n const rate = Math.abs(calculateActualRate(1, profileB.rates[axis].center, profileB.rates[axis].maxRate, profileB.rates[axis].expo));\n maxRate = Math.max(maxRate, rate);\n }\n }\n });\n return Math.max(1000, maxRate * 1.1);\n }\n\n renderRates(profileA, profileB) {\n const width = this.rateCanvas.width;\n const height = this.rateCanvas.height;\n const ctx = this.rateCtx;\n this.clearCanvas(ctx, width, height);\n this.drawGrid(ctx, width, height);\n const yMax = this.calculateMaxRate(profileA, profileB);\n const axes = ['roll', 'pitch', 'yaw'];\n axes.forEach(axis => {\n if (!this.visibility[axis]) return;\n if (profileA && this.visibility.profileA) {\n this.drawRateCurve(ctx, width, height, profileA.rates[axis], this.colors[axis], yMax, false);\n }\n if (profileB && this.visibility.profileB) {\n this.drawRateCurve(ctx, width, height, profileB.rates[axis], this.colors[axis], yMax, true);\n }\n });\n this.drawRateAxes(ctx, width, height, yMax);\n }\n\n renderThrottle(profileA, profileB) {\n const width = this.throttleCanvas.width;\n const height = this.throttleCanvas.height;\n const ctx = this.throttleCtx;\n this.clearCanvas(ctx, width, height);\n this.drawGrid(ctx, width, height);\n if (profileA && this.visibility.profileA) {\n this.drawThrottleCurve(ctx, width, height, profileA.throttle, '#00aaff', false);\n }\n if (profileB && this.visibility.profileB) {\n this.drawThrottleCurve(ctx, width, height, profileB.throttle, '#00aaff', true);\n }\n this.drawThrottleAxes(ctx, width, height);\n }\n\n render(profileA, profileB) {\n this.renderRates(profileA, profileB);\n this.renderThrottle(profileA, profileB);\n }\n}\n\n// Main Application\nclass RateProfileComparison {\n constructor() {\n this.profileManager = new ProfileManager();\n this.graphRenderer = new GraphRenderer(\n document.getElementById('rate-canvas'),\n document.getElementById('throttle-canvas')\n );\n this.profileA = this.createDefaultProfile('Profile A');\n this.profileB = this.createDefaultProfile('Profile B');\n this.autoSaveTimer = null;\n this.autoSaveDelay = 2000;\n this.initializeControls();\n this.initializeVisibilityToggles();\n this.initializeImportExport();\n this.initializeProfileActions();\n this.initializeHistory();\n this.updateGraphs();\n this.updateExports();\n this.renderHistory();\n }\n\n createDefaultProfile(name) {\n return {\n name,\n rates: {\n roll: { center: 70, maxRate: 670, expo: 0 },\n pitch: { center: 70, maxRate: 670, expo: 0 },\n yaw: { center: 70, maxRate: 670, expo: 0 }\n },\n throttle: { mid: 50, expo: 0 }\n };\n }\n\n initializeControls() {\n const profiles = ['a', 'b'];\n const axes = ['roll', 'pitch', 'yaw'];\n profiles.forEach(profile => {\n const profileObj = profile === 'a' ? this.profileA : this.profileB;\n axes.forEach(axis => {\n ['center', 'max', 'expo'].forEach(param => {\n const input = document.getElementById(\\`\\${profile}-\\${axis}-\\${param}\\`);\n const valueDisplay = document.getElementById(\\`\\${profile}-\\${axis}-\\${param}-value\\`);\n input.addEventListener('input', (e) => {\n const value = parseInt(e.target.value);\n if (param === 'center') profileObj.rates[axis].center = value;\n else if (param === 'max') profileObj.rates[axis].maxRate = value;\n else profileObj.rates[axis].expo = value;\n valueDisplay.textContent = value;\n this.onProfileChange();\n });\n });\n });\n ['mid', 'expo'].forEach(param => {\n const input = document.getElementById(\\`\\${profile}-throttle-\\${param}\\`);\n const valueDisplay = document.getElementById(\\`\\${profile}-throttle-\\${param}-value\\`);\n input.addEventListener('input', (e) => {\n const value = parseInt(e.target.value);\n if (param === 'mid') profileObj.throttle.mid = value;\n else profileObj.throttle.expo = value;\n valueDisplay.textContent = value;\n this.onProfileChange();\n });\n });\n });\n }\n\n initializeVisibilityToggles() {\n ['profile-a', 'profile-b', 'roll', 'pitch', 'yaw'].forEach(id => {\n document.getElementById(\\`toggle-\\${id}\\`).addEventListener('change', (e) => {\n const key = id.replace('-', '').replace('profile', 'profile');\n const visKey = id === 'profile-a' ? 'profileA' : id === 'profile-b' ? 'profileB' : id;\n this.graphRenderer.setVisibility({ [visKey]: e.target.checked });\n this.updateGraphs();\n });\n });\n }\n\n initializeImportExport() {\n ['a', 'b'].forEach(profile => {\n document.getElementById(\\`import-btn-\\${profile}\\`).addEventListener('click', () => this.importProfile(profile));\n document.getElementById(\\`copy-btn-\\${profile}\\`).addEventListener('click', () => this.copyExport(profile));\n });\n }\n\n initializeProfileActions() {\n ['a', 'b'].forEach(profile => {\n document.getElementById(\\`save-profile-\\${profile}\\`).addEventListener('click', () => this.saveProfile(profile));\n document.getElementById(\\`profile-\\${profile}-name\\`).addEventListener('input', (e) => {\n const profileObj = profile === 'a' ? this.profileA : this.profileB;\n profileObj.name = e.target.value || \\`Profile \\${profile.toUpperCase()}\\`;\n this.updateExports();\n });\n });\n }\n\n initializeHistory() {\n document.getElementById('export-history-btn').addEventListener('click', () => this.exportHistory());\n document.getElementById('import-history-btn').addEventListener('click', () => {\n document.getElementById('history-file-input').click();\n });\n document.getElementById('history-file-input').addEventListener('change', (e) => {\n this.importHistoryFromFile(e.target.files[0]);\n });\n document.getElementById('clear-history-btn').addEventListener('click', () => {\n if (confirm('Clear all history?')) {\n this.profileManager.clearAll();\n this.renderHistory();\n }\n });\n }\n\n onProfileChange() {\n this.updateGraphs();\n this.updateExports();\n clearTimeout(this.autoSaveTimer);\n this.autoSaveTimer = setTimeout(() => {\n if (this.profileA.name && this.profileA.name !== 'Profile A') {\n this.profileManager.saveProfile({ ...this.profileA });\n }\n if (this.profileB.name && this.profileB.name !== 'Profile B') {\n this.profileManager.saveProfile({ ...this.profileB });\n }\n this.renderHistory();\n }, this.autoSaveDelay);\n }\n\n updateGraphs() {\n this.graphRenderer.render(this.profileA, this.profileB);\n }\n\n updateExports() {\n document.getElementById('export-a').value = generateCLI(this.profileA);\n document.getElementById('export-b').value = generateCLI(this.profileB);\n }\n\n importProfile(profile) {\n const textarea = document.getElementById(\\`import-\\${profile}\\`);\n const statusSpan = document.getElementById(\\`import-status-\\${profile}\\`);\n const text = textarea.value;\n if (!text.trim()) {\n this.showStatus(statusSpan, 'Please paste CLI dump', 'error');\n return;\n }\n try {\n const settings = parseCLI(text);\n const profileObj = profile === 'a' ? this.profileA : this.profileB;\n const mapping = {\n roll_rc_rate: (v) => profileObj.rates.roll.center = parseInt(v),\n pitch_rc_rate: (v) => profileObj.rates.pitch.center = parseInt(v),\n yaw_rc_rate: (v) => profileObj.rates.yaw.center = parseInt(v),\n roll_rate: (v) => profileObj.rates.roll.maxRate = parseInt(v),\n pitch_rate: (v) => profileObj.rates.pitch.maxRate = parseInt(v),\n yaw_rate: (v) => profileObj.rates.yaw.maxRate = parseInt(v),\n roll_expo: (v) => profileObj.rates.roll.expo = parseInt(v),\n pitch_expo: (v) => profileObj.rates.pitch.expo = parseInt(v),\n yaw_expo: (v) => profileObj.rates.yaw.expo = parseInt(v),\n thr_mid: (v) => profileObj.throttle.mid = parseInt(v),\n thr_expo: (v) => profileObj.throttle.expo = parseInt(v)\n };\n let count = 0;\n for (const [key, handler] of Object.entries(mapping)) {\n if (settings[key] !== undefined) {\n handler(settings[key]);\n count++;\n }\n }\n this.updateUIFromProfile(profile, profileObj);\n this.updateGraphs();\n this.updateExports();\n this.showStatus(statusSpan, \\`Imported \\${count} settings\\`, 'success');\n textarea.value = '';\n } catch (error) {\n this.showStatus(statusSpan, \\`Import failed: \\${error.message}\\`, 'error');\n }\n }\n\n updateUIFromProfile(profile, profileObj) {\n ['roll', 'pitch', 'yaw'].forEach(axis => {\n document.getElementById(\\`\\${profile}-\\${axis}-center\\`).value = profileObj.rates[axis].center;\n document.getElementById(\\`\\${profile}-\\${axis}-center-value\\`).textContent = profileObj.rates[axis].center;\n document.getElementById(\\`\\${profile}-\\${axis}-max\\`).value = profileObj.rates[axis].maxRate;\n document.getElementById(\\`\\${profile}-\\${axis}-max-value\\`).textContent = profileObj.rates[axis].maxRate;\n document.getElementById(\\`\\${profile}-\\${axis}-expo\\`).value = profileObj.rates[axis].expo;\n document.getElementById(\\`\\${profile}-\\${axis}-expo-value\\`).textContent = profileObj.rates[axis].expo;\n });\n document.getElementById(\\`\\${profile}-throttle-mid\\`).value = profileObj.throttle.mid;\n document.getElementById(\\`\\${profile}-throttle-mid-value\\`).textContent = profileObj.throttle.mid;\n document.getElementById(\\`\\${profile}-throttle-expo\\`).value = profileObj.throttle.expo;\n document.getElementById(\\`\\${profile}-throttle-expo-value\\`).textContent = profileObj.throttle.expo;\n }\n\n async copyExport(profile) {\n const textarea = document.getElementById(\\`export-\\${profile}\\`);\n const statusSpan = document.getElementById(\\`export-status-\\${profile}\\`);\n try {\n await navigator.clipboard.writeText(textarea.value);\n this.showStatus(statusSpan, 'Copied!', 'success');\n } catch (error) {\n textarea.select();\n document.execCommand('copy');\n this.showStatus(statusSpan, 'Copied!', 'success');\n }\n }\n\n saveProfile(profile) {\n const profileObj = profile === 'a' ? this.profileA : this.profileB;\n const nameInput = document.getElementById(\\`profile-\\${profile}-name\\`);\n if (!nameInput.value.trim()) {\n alert('Please enter a profile name');\n nameInput.focus();\n return;\n }\n profileObj.name = nameInput.value;\n this.profileManager.saveProfile({ ...profileObj });\n this.renderHistory();\n const statusSpan = document.getElementById(\\`export-status-\\${profile}\\`);\n this.showStatus(statusSpan, \\`Saved: \\${profileObj.name}\\`, 'success');\n }\n\n renderHistory() {\n const historyList = document.getElementById('history-list');\n const history = this.profileManager.getHistory();\n if (history.length === 0) {\n historyList.innerHTML = '

No saved profiles yet

';\n return;\n }\n historyList.innerHTML = history.map((profile) => \\`\n

\\${this.escapeHtml(profile.name)}

\n \\${new Date(profile.timestamp).toLocaleString()}\n

\n \n \n \n

\n \\`).join('');\n historyList.querySelectorAll('.load-to-a').forEach(btn => {\n btn.addEventListener('click', (e) => {\n const timestamp = parseInt(e.target.dataset.timestamp);\n this.loadProfileTo('a', timestamp);\n });\n });\n historyList.querySelectorAll('.load-to-b').forEach(btn => {\n btn.addEventListener('click', (e) => {\n const timestamp = parseInt(e.target.dataset.timestamp);\n this.loadProfileTo('b', timestamp);\n });\n });\n historyList.querySelectorAll('.delete-profile').forEach(btn => {\n btn.addEventListener('click', (e) => {\n const timestamp = parseInt(e.target.dataset.timestamp);\n if (confirm('Delete this profile?')) {\n this.profileManager.deleteProfile(timestamp);\n this.renderHistory();\n }\n });\n });\n }\n\n loadProfileTo(target, timestamp) {\n const history = this.profileManager.getHistory();\n const profile = history.find(p => p.timestamp === timestamp);\n if (!profile) return;\n if (target === 'a') {\n this.profileA = { ...profile };\n this.updateUIFromProfile('a', this.profileA);\n document.getElementById('profile-a-name').value = profile.name;\n } else {\n this.profileB = { ...profile };\n this.updateUIFromProfile('b', this.profileB);\n document.getElementById('profile-b-name').value = profile.name;\n }\n this.updateGraphs();\n this.updateExports();\n }\n\n exportHistory() {\n const json = this.profileManager.exportHistory();\n const blob = new Blob([json], { type: 'application/json' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = \\`fpv-rate-profiles-\\${Date.now()}.json\\`;\n a.click();\n URL.revokeObjectURL(url);\n }\n\n importHistoryFromFile(file) {\n if (!file) return;\n const reader = new FileReader();\n reader.onload = (e) => {\n try {\n this.profileManager.importHistory(e.target.result);\n this.renderHistory();\n alert('History imported!');\n } catch (error) {\n alert(\\`Import failed: \\${error.message}\\`);\n }\n };\n reader.readAsText(file);\n }\n\n showStatus(element, message, type) {\n element.textContent = message;\n element.className = \\`status-message \\${type}\\`;\n setTimeout(() => {\n element.textContent = '';\n element.className = 'status-message';\n }, 3000);\n }\n\n escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n}\n\n// Initialize\ndocument.addEventListener('DOMContentLoaded', () => {\n new RateProfileComparison();\n});\n`;\n}","deleted","label",[99],"permalink","https://www.val.town/x/raincoder/FPV-Rate-Visualizer/code/main.ts","extension","actionData","errors"]