Show code
ieeeColors = ({
navy: "#2C3E50",
teal: "#16A085",
orange: "#E67E22",
blue: "#3498DB",
gray: "#7F8C8D",
purple: "#9B59B6",
red: "#E74C3C"
})
// User inputs
viewof deviceCount = Inputs.range([10, 5000], {
value: 200,
step: 10,
label: "Number of Devices"
})
viewof loraGatewayCount = Inputs.range([1, 10], {
value: 2,
step: 1,
label: "LoRaWAN Gateways"
})
viewof loraGatewayCost = Inputs.range([500, 3000], {
value: 1500,
step: 100,
label: "Cost per Gateway ($)"
})
viewof nbiotSubscription = Inputs.range([1, 10], {
value: 2,
step: 0.5,
label: "NB-IoT Fee ($/month)"
})
// Calculate costs
loraInfra = loraGatewayCount * loraGatewayCost
loraPerDevice = 15
loraTotalCost = loraInfra + (deviceCount * loraPerDevice)
nbiotYearlyCost = nbiotSubscription * 12
nbiot5YearCost = nbiotYearlyCost * 5
nbiotTotalCost = deviceCount * nbiot5YearCost
savings = nbiotTotalCost - loraTotalCost
breakEvenDevices = Math.ceil(loraInfra / nbiot5YearCost)
comparisonMax = Math.max(loraTotalCost, nbiotTotalCost)
comparisonCards = [
{
name: "LoRaWAN",
total: loraTotalCost,
accent: ieeeColors.teal,
surface: "#E8F5F1",
detail: `Infrastructure $${loraInfra.toLocaleString()} + devices $${(deviceCount * loraPerDevice).toLocaleString()}`,
note: "One-time gateway spend, then predictable device cost."
},
{
name: "NB-IoT",
total: nbiotTotalCost,
accent: ieeeColors.orange,
surface: "#FEF5E7",
detail: `${deviceCount} devices x $${nbiot5YearCost.toLocaleString()}/device over 5 years`,
note: "Recurring subscriptions dominate as the fleet grows."
}
]
html`<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1.25rem 0 1.5rem;">
${comparisonCards.map((entry) => html`<div style="background: ${entry.surface}; border: 1px solid ${entry.accent}33; border-left: 4px solid ${entry.accent}; border-radius: 10px; padding: 1rem;">
<div style="display: flex; justify-content: space-between; gap: 0.75rem; align-items: flex-start; margin-bottom: 0.5rem;">
<div style="color: #2C3E50; font-weight: 700;">${entry.name}</div>
<div style="color: ${entry.accent}; font-size: 1.5rem; font-weight: 800; line-height: 1;">$${entry.total.toLocaleString()}</div>
</div>
<div style="color: #52606D; font-size: 0.9rem;">${entry.detail}</div>
<div style="margin-top: 0.85rem; background: #FFFFFF; border-radius: 999px; height: 12px; overflow: hidden;">
<div style="width: ${Math.max(12, (entry.total / comparisonMax) * 100)}%; background: ${entry.accent}; height: 100%;"></div>
</div>
<div style="color: #7F8C8D; font-size: 0.8rem; margin-top: 0.4rem;">${entry.note}</div>
</div>`)}
</div>`Show code
md`**Cost Comparison Summary**
- **LoRaWAN Total (5 years)**: $${loraTotalCost.toLocaleString()} (Infrastructure: $${loraInfra.toLocaleString()} + Devices: $${(deviceCount * loraPerDevice).toLocaleString()})
- **NB-IoT Total (5 years)**: $${nbiotTotalCost.toLocaleString()} (${deviceCount} devices × $${nbiot5YearCost}/device)
- **Savings**: ${savings >= 0 ? `LoRaWAN saves $${savings.toLocaleString()}` : `NB-IoT saves $${Math.abs(savings).toLocaleString()}`}
- **Break-even Point**: ${breakEvenDevices} devices
${savings >= 0
? `Recommendation: LoRaWAN is more cost-effective for ${deviceCount} devices`
: `Recommendation: NB-IoT is more cost-effective for ${deviceCount} devices`}
`