// Scenarios Tab
scenariosPanel = {
if (analysisTab !== "Scenarios") return html``;
const scenarios = [
{
name: "Outdoor Environmental Sensor",
icon: "🌿",
description: "Solar-powered sensor monitoring air quality, temperature, and humidity in a park or agricultural setting.",
config: {
sources: { solar: true, vibration: false, thermal: false, rf: false },
solar: { type: "outdoor", panelArea: 50, efficiency: 18, lightLevel: 50000, availableHours: 8 },
device: { sleepCurrent: 2, activeCurrent: 12, voltage: 3.3, dutyCycle: 0.5, peakPower: 80, peakDuration: 100, wakeupInterval: 300, requiredAutonomy: 5 },
storage: { type: "hybrid", supercapSize: 2, batteryCapacity: 1000, batteryVoltage: 3.7, maxVoltage: 4.2, minVoltage: 2.8 }
}
},
{
name: "Industrial Vibration Monitor",
icon: "🏭",
description: "Piezoelectric-powered sensor on rotating machinery, monitoring vibration patterns for predictive maintenance.",
config: {
sources: { solar: false, vibration: true, thermal: true, rf: false },
vibration: { type: "piezo", frequency: 120, acceleration: 0.8, harvesterSize: "medium", availableHours: 16 },
thermal: { deltaT: 15, tegArea: 16, tegEfficiency: 5, availableHours: 16 },
device: { sleepCurrent: 5, activeCurrent: 20, voltage: 3.3, dutyCycle: 2, peakPower: 150, peakDuration: 200, wakeupInterval: 60, requiredAutonomy: 2 },
storage: { type: "supercap", supercapSize: 5, batteryCapacity: 500, batteryVoltage: 3.7, maxVoltage: 5.0, minVoltage: 2.5 }
}
},
{
name: "Wearable Health Tracker",
icon: "⌚",
description: "Multi-source harvesting wearable using body heat and motion for continuous health monitoring.",
config: {
sources: { solar: true, vibration: true, thermal: true, rf: false },
solar: { type: "indoor_bright", panelArea: 4, efficiency: 15, lightLevel: 500, availableHours: 10 },
vibration: { type: "electromagnetic", frequency: 5, acceleration: 0.3, harvesterSize: "small", availableHours: 14 },
thermal: { deltaT: 5, tegArea: 4, tegEfficiency: 3, availableHours: 16 },
device: { sleepCurrent: 3, activeCurrent: 8, voltage: 3.0, dutyCycle: 5, peakPower: 50, peakDuration: 50, wakeupInterval: 30, requiredAutonomy: 1 },
storage: { type: "battery", supercapSize: 0.5, batteryCapacity: 100, batteryVoltage: 3.7, maxVoltage: 4.2, minVoltage: 3.0 }
}
},
{
name: "Building HVAC Sensor",
icon: "🏢",
description: "Thermoelectric-powered sensor on HVAC ducts monitoring airflow and temperature for building automation.",
config: {
sources: { solar: false, vibration: false, thermal: true, rf: true },
thermal: { deltaT: 20, tegArea: 25, tegEfficiency: 6, availableHours: 20 },
rf: { frequency: 2400, powerDensity: 0.5, antennaGain: 3, antennaArea: 16, availableHours: 24 },
device: { sleepCurrent: 1, activeCurrent: 5, voltage: 3.3, dutyCycle: 0.2, peakPower: 40, peakDuration: 30, wakeupInterval: 600, requiredAutonomy: 3 },
storage: { type: "supercap", supercapSize: 1, batteryCapacity: 200, batteryVoltage: 3.7, maxVoltage: 5.5, minVoltage: 2.5 }
}
}
];
function loadScenario(scenario) {
const newState = JSON.parse(JSON.stringify(harvesterState));
Object.assign(newState.sources, scenario.config.sources);
if (scenario.config.solar) Object.assign(newState.solar, scenario.config.solar);
if (scenario.config.vibration) Object.assign(newState.vibration, scenario.config.vibration);
if (scenario.config.thermal) Object.assign(newState.thermal, scenario.config.thermal);
if (scenario.config.rf) Object.assign(newState.rf, scenario.config.rf);
Object.assign(newState.device, scenario.config.device);
Object.assign(newState.storage, scenario.config.storage);
mutable harvesterState = newState;
}
return html`
<div style="padding: 20px; font-family: system-ui, sans-serif;">
<h3 style="color: ${ieeeColors.navy}; margin-bottom: 10px;">
Pre-configured Scenarios
</h3>
<p style="color: ${ieeeColors.gray}; margin-bottom: 25px;">
Click a scenario card to load its configuration into the calculator.
</p>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
${scenarios.map(scenario => html`
<div onclick=${() => loadScenario(scenario)}
style="border: 2px solid ${ieeeColors.lightGray}; border-radius: 12px; padding: 20px;
cursor: pointer; transition: all 0.2s; background: white;"
onmouseover=${(e) => {
e.currentTarget.style.borderColor = ieeeColors.teal;
e.currentTarget.style.transform = 'translateY(-2px)';
e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.1)';
}}
onmouseout=${(e) => {
e.currentTarget.style.borderColor = ieeeColors.lightGray;
e.currentTarget.style.transform = 'translateY(0)';
e.currentTarget.style.boxShadow = 'none';
}}>
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;">
<span style="font-size: 32px;">${scenario.icon}</span>
<h4 style="margin: 0; color: ${ieeeColors.navy};">${scenario.name}</h4>
</div>
<p style="color: ${ieeeColors.gray}; font-size: 14px; margin: 0 0 15px 0;">
${scenario.description}
</p>
<div style="display: flex; flex-wrap: wrap; gap: 8px;">
${scenario.config.sources.solar ? html`<span style="background: ${ieeeColors.yellow}22; color: ${ieeeColors.darkGray};
padding: 4px 8px; border-radius: 4px; font-size: 11px;">☀️ Solar</span>` : ''}
${scenario.config.sources.vibration ? html`<span style="background: ${ieeeColors.purple}22; color: ${ieeeColors.darkGray};
padding: 4px 8px; border-radius: 4px; font-size: 11px;">📳 Vibration</span>` : ''}
${scenario.config.sources.thermal ? html`<span style="background: ${ieeeColors.red}22; color: ${ieeeColors.darkGray};
padding: 4px 8px; border-radius: 4px; font-size: 11px;">🌡️ Thermal</span>` : ''}
${scenario.config.sources.rf ? html`<span style="background: ${ieeeColors.teal}22; color: ${ieeeColors.darkGray};
padding: 4px 8px; border-radius: 4px; font-size: 11px;">📡 RF</span>` : ''}
</div>
<div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid ${ieeeColors.lightGray}; font-size: 12px; color: ${ieeeColors.gray};">
<strong>Key specs:</strong> ${scenario.config.device.dutyCycle}% duty cycle,
${scenario.config.device.requiredAutonomy}-day autonomy,
${scenario.config.storage.type} storage
</div>
</div>
`)}
</div>
</div>
`;
}