ieeeColors = ({
navy: "#2C3E50",
teal: "#16A085",
orange: "#E67E22",
gray: "#7F8C8D",
lightGray: "#ECF0F1",
darkGray: "#34495E",
green: "#27AE60",
red: "#E74C3C",
purple: "#9B59B6",
blue: "#3498DB",
yellow: "#F1C40F"
})
// Provisioning Methods with Ratings
provisioningMethods = [
{
id: "ztp",
name: "Zero-Touch Provisioning (ZTP)",
shortName: "ZTP",
complexity: 2,
security: 4,
friction: 1,
scalability: 5,
totalSteps: 8,
secureSteps: 7,
useCases: ["Enterprise deployments", "Large-scale rollouts", "Industrial IoT"],
standards: ["RFC 8572", "SZTP", "Cisco ZTP"]
},
{
id: "qrcode",
name: "QR Code / App-based",
shortName: "QR/App",
complexity: 3,
security: 3,
friction: 3,
scalability: 3,
totalSteps: 8,
secureSteps: 7,
useCases: ["Consumer IoT", "Smart home", "Retail products"],
standards: ["Matter", "HomeKit", "SmartThings"]
},
{
id: "x509",
name: "Certificate-based (X.509)",
shortName: "X.509",
complexity: 4,
security: 5,
friction: 1,
scalability: 5,
totalSteps: 8,
secureSteps: 7,
useCases: ["Critical infrastructure", "Healthcare", "Financial IoT"],
standards: ["X.509", "IEEE 802.1AR", "IDevID"]
},
{
id: "psk",
name: "Token-based (Pre-shared Keys)",
shortName: "PSK",
complexity: 1,
security: 2,
friction: 2,
scalability: 2,
totalSteps: 6,
secureSteps: 4,
useCases: ["Prototypes", "Small deployments", "Cost-sensitive"],
standards: ["TLS-PSK", "DTLS-PSK", "CoAP"]
},
{
id: "manufacturer",
name: "Manufacturer Certificate",
shortName: "Mfr Cert",
complexity: 4,
security: 5,
friction: 1,
scalability: 5,
totalSteps: 8,
secureSteps: 8,
useCases: ["Branded ecosystems", "Vendor-controlled deployments"],
standards: ["AWS IoT", "Azure IoT Hub", "Google Cloud IoT"]
},
{
id: "jitp",
name: "Just-in-Time Provisioning (JITP)",
shortName: "JITP",
complexity: 3,
security: 4,
friction: 1,
scalability: 4,
totalSteps: 8,
secureSteps: 8,
useCases: ["Dynamic fleets", "Multi-tenant platforms", "Flexible deployments"],
standards: ["AWS IoT JITP", "Azure DPS", "Cloud-native IoT"]
}
]
// Method Comparison Results
comparisonResults = {
const ratings = provisioningMethods.map(m => ({
name: m.shortName,
fullName: m.name,
complexity: m.complexity,
security: m.security,
friction: m.friction,
scalability: m.scalability,
totalSteps: m.totalSteps,
secureSteps: m.secureSteps,
useCases: m.useCases
}));
return html`
<div style="
background: white;
border: 1px solid ${ieeeColors.gray};
border-radius: 12px;
padding: 20px;
margin-top: 20px;
">
<h3 style="margin: 0 0 20px 0; color: ${ieeeColors.navy}; font-size: 16px;">
Method Assessment Dashboard
</h3>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;">
${ratings.map(r => html`
<div style="
background: ${ieeeColors.lightGray};
border-radius: 10px;
padding: 15px;
">
<div style="
font-weight: 700;
color: ${ieeeColors.navy};
font-size: 14px;
margin-bottom: 15px;
text-align: center;
">${r.name}</div>
<!-- Complexity Rating -->
<div style="margin-bottom: 12px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
<span style="font-size: 11px; color: ${ieeeColors.darkGray};">Complexity</span>
<span style="font-size: 11px; font-weight: 600; color: ${ieeeColors.navy};">${r.complexity}/5</span>
</div>
<div style="height: 8px; background: #ddd; border-radius: 4px; overflow: hidden;">
<div style="
height: 100%;
width: ${r.complexity * 20}%;
background: ${r.complexity <= 2 ? ieeeColors.green : r.complexity <= 3 ? ieeeColors.orange : ieeeColors.red};
border-radius: 4px;
"></div>
</div>
</div>
<!-- Security Rating -->
<div style="margin-bottom: 12px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
<span style="font-size: 11px; color: ${ieeeColors.darkGray};">Security</span>
<span style="font-size: 11px; font-weight: 600; color: ${ieeeColors.navy};">${r.security}/5</span>
</div>
<div style="height: 8px; background: #ddd; border-radius: 4px; overflow: hidden;">
<div style="
height: 100%;
width: ${r.security * 20}%;
background: ${r.security >= 4 ? ieeeColors.green : r.security >= 3 ? ieeeColors.orange : ieeeColors.red};
border-radius: 4px;
"></div>
</div>
</div>
<!-- User Friction -->
<div style="margin-bottom: 12px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
<span style="font-size: 11px; color: ${ieeeColors.darkGray};">User Friction</span>
<span style="font-size: 11px; font-weight: 600; color: ${ieeeColors.navy};">${r.friction}/5</span>
</div>
<div style="height: 8px; background: #ddd; border-radius: 4px; overflow: hidden;">
<div style="
height: 100%;
width: ${r.friction * 20}%;
background: ${r.friction <= 2 ? ieeeColors.green : r.friction <= 3 ? ieeeColors.orange : ieeeColors.red};
border-radius: 4px;
"></div>
</div>
</div>
<!-- Scalability -->
<div style="margin-bottom: 12px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
<span style="font-size: 11px; color: ${ieeeColors.darkGray};">Scalability</span>
<span style="font-size: 11px; font-weight: 600; color: ${ieeeColors.navy};">${r.scalability}/5</span>
</div>
<div style="height: 8px; background: #ddd; border-radius: 4px; overflow: hidden;">
<div style="
height: 100%;
width: ${r.scalability * 20}%;
background: ${r.scalability >= 4 ? ieeeColors.green : r.scalability >= 3 ? ieeeColors.orange : ieeeColors.red};
border-radius: 4px;
"></div>
</div>
</div>
<!-- Secure Steps Ratio -->
<div style="
margin-top: 15px;
padding-top: 12px;
border-top: 1px solid ${ieeeColors.gray};
">
<div style="font-size: 11px; color: ${ieeeColors.darkGray}; margin-bottom: 5px;">
Secure Channel Steps
</div>
<div style="
font-size: 18px;
font-weight: 700;
color: ${ieeeColors.teal};
">
${r.secureSteps}/${r.totalSteps}
<span style="font-size: 11px; color: ${ieeeColors.gray}; font-weight: 400;">
(${Math.round(r.secureSteps / r.totalSteps * 100)}%)
</span>
</div>
</div>
</div>
`)}
</div>
<!-- Use Case Recommendations -->
<div style="margin-top: 20px;">
<div style="font-weight: 600; color: ${ieeeColors.navy}; margin-bottom: 10px;">
Recommended Use Cases
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;">
${ratings.map(r => html`
<div style="
background: ${ieeeColors.lightGray};
border-radius: 8px;
padding: 12px;
">
<div style="font-weight: 600; font-size: 12px; color: ${ieeeColors.navy}; margin-bottom: 8px;">
${r.name}
</div>
<ul style="margin: 0; padding-left: 18px; font-size: 11px; color: ${ieeeColors.darkGray};">
${r.useCases.map(uc => html`<li style="margin-bottom: 3px;">${uc}</li>`)}
</ul>
</div>
`)}
</div>
</div>
</div>
`;
}
comparisonResults