418 lines
14 KiB
HTML
418 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>5V Boost Converter Analysis</title>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
|
padding: 2rem;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
color: #1e293b;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.subtitle {
|
|
color: #64748b;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.card {
|
|
background: white;
|
|
border-radius: 0.75rem;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.card h2 {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: #334155;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.chart-container {
|
|
position: relative;
|
|
height: 300px;
|
|
}
|
|
|
|
.summary-stats {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.stat-box {
|
|
border-left: 4px solid;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.stat-box.blue {
|
|
border-color: #3b82f6;
|
|
}
|
|
|
|
.stat-box.green {
|
|
border-color: #10b981;
|
|
}
|
|
|
|
.stat-box.red {
|
|
border-color: #ef4444;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.875rem;
|
|
color: #64748b;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 1.875rem;
|
|
font-weight: bold;
|
|
color: #1e293b;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.stat-description {
|
|
font-size: 0.75rem;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>5V Boost Converter Performance Analysis</h1>
|
|
<p class="subtitle">Battery Input Voltage Comparison: 3.0V, 3.7V, 4.2V</p>
|
|
|
|
<div class="grid">
|
|
<!-- Output Voltage Chart -->
|
|
<div class="card">
|
|
<h2>Output Voltage vs Input Load</h2>
|
|
<div class="chart-container">
|
|
<canvas id="voltageChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Efficiency Chart -->
|
|
<div class="card">
|
|
<h2>Efficiency vs Output Load</h2>
|
|
<div class="chart-container">
|
|
<canvas id="efficiencyChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<!-- Noise Chart -->
|
|
<div class="card">
|
|
<h2>Noise vs Input Load</h2>
|
|
<div class="chart-container">
|
|
<canvas id="noiseChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Summary Stats -->
|
|
<div class="card">
|
|
<h2>Performance Summary</h2>
|
|
<div class="summary-stats">
|
|
<div class="stat-box blue">
|
|
<p class="stat-label">Best Voltage Regulation</p>
|
|
<p class="stat-value">4.2V Input</p>
|
|
<p class="stat-description">Most stable output across load range</p>
|
|
</div>
|
|
|
|
<div class="stat-box green">
|
|
<p class="stat-label">Highest Efficiency Range</p>
|
|
<p class="stat-value">3.7V - 4.2V Input</p>
|
|
<p class="stat-description">Peak efficiency 78-83%</p>
|
|
</div>
|
|
|
|
<div class="stat-box red">
|
|
<p class="stat-label">Noise Characteristics</p>
|
|
<p class="stat-value">700 - 1200 mV</p>
|
|
<p class="stat-description">Similar across all input voltages</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Dataset 1: 3.0V input
|
|
const dataset1 = {
|
|
inputV: 3.0,
|
|
inputLoad: [105, 150, 203, 250, 300, 350, 403, 450, 504],
|
|
outputV: [4.93, 4.92, 4.922, 4.92, 4.913, 4.9, 4.888, 4.870, 4.850],
|
|
outputLoad: [47, 73, 103, 130, 157, 184, 211, 236, 262],
|
|
noise: [700, 700, 750, 800, 900, 950, 1000, 1030, 1200]
|
|
};
|
|
|
|
// Dataset 2: 3.7V input
|
|
const dataset2 = {
|
|
inputV: 3.7,
|
|
inputLoad: [100, 150, 200, 251, 306, 352, 401, 455, 509],
|
|
outputV: [4.930, 4.926, 4.922, 4.917, 4.91, 4.9, 4.888, 4.869, 4.850],
|
|
outputLoad: [47, 84, 121, 156, 194, 225, 257, 293, 328],
|
|
noise: [700, 700, 750, 850, 880, 917, 1000, 1100, 1200]
|
|
};
|
|
|
|
// Dataset 3: 4.2V input
|
|
const dataset3 = {
|
|
inputV: 4.2,
|
|
inputLoad: [100, 150, 202, 250, 300, 355, 405, 455, 501],
|
|
outputV: [4.929, 4.922, 4.918, 4.913, 4.906, 4.890, 4.879, 4.860, 4.844],
|
|
outputLoad: [78, 118, 161, 200, 237, 280, 319, 356, 391],
|
|
noise: [700, 767, 800, 850, 850, 950, 1000, 1100, 1200]
|
|
};
|
|
|
|
// Calculate efficiency for each dataset
|
|
const calcEfficiency = (dataset) => {
|
|
return dataset.inputLoad.map((input, i) =>
|
|
(dataset.outputLoad[i] * dataset.outputV[i]) / (input * dataset.inputV) * 100
|
|
);
|
|
};
|
|
|
|
const efficiency1 = calcEfficiency(dataset1);
|
|
const efficiency2 = calcEfficiency(dataset2);
|
|
const efficiency3 = calcEfficiency(dataset3);
|
|
|
|
const commonOptions = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: true,
|
|
position: 'top'
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
grid: {
|
|
color: 'rgba(0, 0, 0, 0.05)'
|
|
}
|
|
},
|
|
y: {
|
|
grid: {
|
|
color: 'rgba(0, 0, 0, 0.05)'
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// Voltage Chart
|
|
new Chart(document.getElementById('voltageChart'), {
|
|
type: 'line',
|
|
data: {
|
|
labels: dataset1.inputLoad,
|
|
datasets: [
|
|
{
|
|
label: '3.0V Input',
|
|
data: dataset1.outputV,
|
|
borderColor: '#3b82f6',
|
|
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
|
borderWidth: 2,
|
|
tension: 0.1,
|
|
pointRadius: 4,
|
|
pointBackgroundColor: '#3b82f6'
|
|
},
|
|
{
|
|
label: '3.7V Input',
|
|
data: dataset2.outputV,
|
|
borderColor: '#10b981',
|
|
backgroundColor: 'rgba(16, 185, 129, 0.1)',
|
|
borderWidth: 2,
|
|
tension: 0.1,
|
|
pointRadius: 4,
|
|
pointBackgroundColor: '#10b981'
|
|
},
|
|
{
|
|
label: '4.2V Input',
|
|
data: dataset3.outputV,
|
|
borderColor: '#f59e0b',
|
|
backgroundColor: 'rgba(245, 158, 11, 0.1)',
|
|
borderWidth: 2,
|
|
tension: 0.1,
|
|
pointRadius: 4,
|
|
pointBackgroundColor: '#f59e0b'
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
...commonOptions,
|
|
scales: {
|
|
...commonOptions.scales,
|
|
x: {
|
|
...commonOptions.scales.x,
|
|
title: {
|
|
display: true,
|
|
text: 'Input Load (mA)'
|
|
}
|
|
},
|
|
y: {
|
|
...commonOptions.scales.y,
|
|
title: {
|
|
display: true,
|
|
text: 'Output Voltage (V)'
|
|
},
|
|
min: 4.8,
|
|
max: 4.95
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Efficiency Chart
|
|
new Chart(document.getElementById('efficiencyChart'), {
|
|
type: 'line',
|
|
data: {
|
|
labels: dataset1.outputLoad,
|
|
datasets: [
|
|
{
|
|
label: '3.0V Input',
|
|
data: efficiency1,
|
|
borderColor: '#3b82f6',
|
|
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
|
borderWidth: 2,
|
|
tension: 0.1,
|
|
pointRadius: 4,
|
|
pointBackgroundColor: '#3b82f6'
|
|
},
|
|
{
|
|
label: '3.7V Input',
|
|
data: efficiency2,
|
|
borderColor: '#10b981',
|
|
backgroundColor: 'rgba(16, 185, 129, 0.1)',
|
|
borderWidth: 2,
|
|
tension: 0.1,
|
|
pointRadius: 4,
|
|
pointBackgroundColor: '#10b981'
|
|
},
|
|
{
|
|
label: '4.2V Input',
|
|
data: efficiency3,
|
|
borderColor: '#f59e0b',
|
|
backgroundColor: 'rgba(245, 158, 11, 0.1)',
|
|
borderWidth: 2,
|
|
tension: 0.1,
|
|
pointRadius: 4,
|
|
pointBackgroundColor: '#f59e0b'
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
...commonOptions,
|
|
scales: {
|
|
...commonOptions.scales,
|
|
x: {
|
|
...commonOptions.scales.x,
|
|
title: {
|
|
display: true,
|
|
text: 'Output Load (mA)'
|
|
}
|
|
},
|
|
y: {
|
|
...commonOptions.scales.y,
|
|
title: {
|
|
display: true,
|
|
text: 'Efficiency (%)'
|
|
},
|
|
min: 40,
|
|
max: 100
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Noise Chart
|
|
new Chart(document.getElementById('noiseChart'), {
|
|
type: 'line',
|
|
data: {
|
|
labels: dataset1.inputLoad,
|
|
datasets: [
|
|
{
|
|
label: '3.0V Input',
|
|
data: dataset1.noise,
|
|
borderColor: '#3b82f6',
|
|
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
|
borderWidth: 2,
|
|
tension: 0.1,
|
|
pointRadius: 4,
|
|
pointBackgroundColor: '#3b82f6'
|
|
},
|
|
{
|
|
label: '3.7V Input',
|
|
data: dataset2.noise,
|
|
borderColor: '#10b981',
|
|
backgroundColor: 'rgba(16, 185, 129, 0.1)',
|
|
borderWidth: 2,
|
|
tension: 0.1,
|
|
pointRadius: 4,
|
|
pointBackgroundColor: '#10b981'
|
|
},
|
|
{
|
|
label: '4.2V Input',
|
|
data: dataset3.noise,
|
|
borderColor: '#f59e0b',
|
|
backgroundColor: 'rgba(245, 158, 11, 0.1)',
|
|
borderWidth: 2,
|
|
tension: 0.1,
|
|
pointRadius: 4,
|
|
pointBackgroundColor: '#f59e0b'
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
...commonOptions,
|
|
scales: {
|
|
...commonOptions.scales,
|
|
x: {
|
|
...commonOptions.scales.x,
|
|
title: {
|
|
display: true,
|
|
text: 'Input Load (mA)'
|
|
}
|
|
},
|
|
y: {
|
|
...commonOptions.scales.y,
|
|
title: {
|
|
display: true,
|
|
text: 'Noise (mV)'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |