Show code
viewof sensor_power_mw = Inputs.range([5, 100], {
step: 5,
value: 20,
label: "Sensor Power Consumption (mW)"
})
viewof duty_cycle_percent = Inputs.range([1, 100], {
step: 1,
value: 10,
label: "Duty Cycle (%)"
})
viewof num_sensors_solar = Inputs.range([10, 200], {
step: 10,
value: 50,
label: "Number of Sensors"
})
viewof sunlight_hours = Inputs.range([2, 8], {
step: 0.5,
value: 4,
label: "Effective Sunlight Hours/Day"
})
viewof battery_autonomy_days = Inputs.range([1, 7], {
step: 1,
value: 3,
label: "Battery Autonomy (days)"
})
// Power calculations
avg_power_per_sensor_mw = sensor_power_mw * (duty_cycle_percent / 100)
daily_energy_per_sensor_wh = (avg_power_per_sensor_mw / 1000) * 24
total_daily_energy_wh = daily_energy_per_sensor_wh * num_sensors_solar
// Solar panel sizing (assume 80% efficiency)
solar_panel_watt = total_daily_energy_wh / (sunlight_hours * 0.8)
// Battery sizing (12V system, 80% depth of discharge)
battery_capacity_ah = (total_daily_energy_wh * battery_autonomy_days) / (12 * 0.8)
html`<div style="background: linear-gradient(135deg, #3498DB 0%, #16A085 100%); padding: 25px; border-radius: 8px; color: white; margin-top: 15px; font-family: Arial, sans-serif;">
<h3 style="margin: 0 0 20px 0; color: white;">☀️ Solar Power System Calculator</h3>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-bottom: 20px;">
<div style="background: rgba(255,255,255,0.15); padding: 15px; border-radius: 6px;">
<div style="font-size: 0.85em; opacity: 0.9;">Daily Energy Need</div>
<div style="font-size: 1.8em; font-weight: bold;">${total_daily_energy_wh.toFixed(1)} Wh</div>
<div style="font-size: 0.75em; margin-top: 3px;">For ${num_sensors_solar} sensors</div>
</div>
<div style="background: rgba(255,255,255,0.15); padding: 15px; border-radius: 6px;">
<div style="font-size: 0.85em; opacity: 0.9;">Solar Panel Size</div>
<div style="font-size: 1.8em; font-weight: bold;">${solar_panel_watt.toFixed(0)} W</div>
<div style="font-size: 0.75em; margin-top: 3px;">With 80% efficiency</div>
</div>
<div style="background: rgba(255,255,255,0.15); padding: 15px; border-radius: 6px;">
<div style="font-size: 0.85em; opacity: 0.9;">Battery Capacity</div>
<div style="font-size: 1.8em; font-weight: bold;">${battery_capacity_ah.toFixed(1)} Ah</div>
<div style="font-size: 0.75em; margin-top: 3px;">12V, ${battery_autonomy_days}-day backup</div>
</div>
</div>
<div style="background: rgba(255,255,255,0.1); padding: 15px; border-radius: 6px; margin-bottom: 15px;">
<div style="font-size: 0.9em; margin-bottom: 10px;">⚡ Per-Sensor Power Profile</div>
<div style="display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 0.85em;">
<div>Peak Power:</div><div style="text-align: right;">${sensor_power_mw} mW</div>
<div>Duty Cycle:</div><div style="text-align: right;">${duty_cycle_percent}%</div>
<div>Average Power:</div><div style="text-align: right; font-weight: bold;">${avg_power_per_sensor_mw.toFixed(2)} mW</div>
<div>Daily Energy:</div><div style="text-align: right; font-weight: bold;">${daily_energy_per_sensor_wh.toFixed(2)} Wh</div>
</div>
</div>
<div style="background: rgba(255,255,255,0.1); padding: 15px; border-radius: 6px;">
<div style="font-size: 0.9em; margin-bottom: 10px;">🔋 System Specifications</div>
<div style="font-size: 0.85em; line-height: 1.6;">
<strong>Solar Array:</strong> ${solar_panel_watt.toFixed(0)}W panel (or ${Math.ceil(solar_panel_watt / 50)} × 50W panels)<br>
<strong>Battery Bank:</strong> ${battery_capacity_ah.toFixed(1)}Ah @ 12V (${(battery_capacity_ah * 12 / 1000).toFixed(2)}kWh storage)<br>
<strong>Daily Harvest:</strong> ${(solar_panel_watt * sunlight_hours * 0.8).toFixed(0)}Wh (${((solar_panel_watt * sunlight_hours * 0.8) / total_daily_energy_wh * 100).toFixed(0)}% of need)
</div>
</div>
<div style="margin-top: 15px; font-size: 0.8em; opacity: 0.85; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.2);">
💡 <strong>Design Note:</strong> Solar panel sized for ${sunlight_hours}h effective sunlight. Battery provides ${battery_autonomy_days}-day autonomy at 80% depth of discharge.
</div>
</div>`