8  Interactive Concept Navigator

8.1 Interactive Concept Navigator

Explore how IoT concepts connect to each other. Click on topics to see related concepts and recommended learning paths.

concepts = [
  // Core Fundamentals
  {id: "sensors", name: "Sensors", category: "Fundamentals", level: 1,
   description: "Devices that detect physical phenomena and convert to electrical signals",
   topics: ["Temperature", "Pressure", "Motion", "Light", "Humidity"]},
  {id: "actuators", name: "Actuators", category: "Fundamentals", level: 1,
   description: "Devices that produce physical action from electrical signals",
   topics: ["Motors", "Relays", "Valves", "LEDs", "Speakers"]},
  {id: "microcontrollers", name: "Microcontrollers", category: "Fundamentals", level: 1,
   description: "Small computers that control IoT devices",
   topics: ["Arduino", "ESP32", "Raspberry Pi", "STM32"]},

  // Connectivity
  {id: "wifi", name: "Wi-Fi", category: "Connectivity", level: 2,
   description: "High-bandwidth wireless for home/office IoT",
   topics: ["802.11", "WPA2/3", "Mesh Networks"]},
  {id: "bluetooth", name: "Bluetooth/BLE", category: "Connectivity", level: 2,
   description: "Short-range low-power wireless",
   topics: ["BLE Advertising", "GATT", "Beacons"]},
  {id: "lorawan", name: "LoRaWAN", category: "Connectivity", level: 2,
   description: "Long-range low-power wide-area network",
   topics: ["Chirp Spread Spectrum", "ADR", "Class A/B/C"]},
  {id: "zigbee", name: "Zigbee", category: "Connectivity", level: 2,
   description: "Mesh networking for smart home",
   topics: ["Mesh Routing", "802.15.4", "Coordinators"]},
  {id: "cellular", name: "Cellular IoT", category: "Connectivity", level: 2,
   description: "NB-IoT and LTE-M for wide-area coverage",
   topics: ["NB-IoT", "LTE-M", "5G mMTC"]},

  // Protocols
  {id: "mqtt", name: "MQTT", category: "Protocols", level: 3,
   description: "Publish-subscribe messaging for IoT",
   topics: ["Topics", "QoS Levels", "Retained Messages"]},
  {id: "coap", name: "CoAP", category: "Protocols", level: 3,
   description: "Constrained application protocol for devices",
   topics: ["RESTful", "UDP", "Observe"]},
  {id: "http", name: "HTTP/REST", category: "Protocols", level: 3,
   description: "Web APIs for cloud integration",
   topics: ["REST API", "JSON", "Webhooks"]},

  // Data & Analytics
  {id: "timeseries", name: "Time-Series Data", category: "Data", level: 3,
   description: "Handling temporal sensor data",
   topics: ["InfluxDB", "TimescaleDB", "Downsampling"]},
  {id: "edge", name: "Edge Computing", category: "Data", level: 3,
   description: "Processing data close to sensors",
   topics: ["Fog Computing", "Edge AI", "Filtering"]},
  {id: "cloud", name: "Cloud Platforms", category: "Data", level: 3,
   description: "Scalable IoT backends",
   topics: ["AWS IoT", "Azure IoT", "Google Cloud IoT"]},
  {id: "analytics", name: "Analytics & ML", category: "Data", level: 4,
   description: "Extracting insights from IoT data",
   topics: ["Anomaly Detection", "Predictive Maintenance", "TinyML"]},

  // Security
  {id: "encryption", name: "Encryption", category: "Security", level: 2,
   description: "Protecting data in transit and at rest",
   topics: ["TLS", "AES", "Key Management"]},
  {id: "authentication", name: "Authentication", category: "Security", level: 2,
   description: "Verifying device and user identity",
   topics: ["X.509 Certificates", "OAuth", "Device Provisioning"]},
  {id: "zerotrust", name: "Zero Trust", category: "Security", level: 4,
   description: "Never trust, always verify security model",
   topics: ["Microsegmentation", "Continuous Verification"]},

  // Applications
  {id: "smarthome", name: "Smart Home", category: "Applications", level: 3,
   description: "Home automation and monitoring",
   topics: ["Lighting", "HVAC", "Security", "Appliances"]},
  {id: "industrial", name: "Industrial IoT", category: "Applications", level: 4,
   description: "Factory automation and monitoring",
   topics: ["SCADA", "OPC-UA", "Digital Twins", "Predictive Maintenance"]},
  {id: "healthcare", name: "Healthcare IoT", category: "Applications", level: 4,
   description: "Medical devices and patient monitoring",
   topics: ["Wearables", "Remote Monitoring", "HIPAA"]},

  // Design
  {id: "power", name: "Power Management", category: "Design", level: 2,
   description: "Battery life and energy harvesting",
   topics: ["Sleep Modes", "Energy Harvesting", "Battery Selection"]},
  {id: "prototyping", name: "Prototyping", category: "Design", level: 1,
   description: "Building and testing IoT devices",
   topics: ["Breadboarding", "PCB Design", "3D Printing"]}
]

// Define relationships (edges)
relationships = [
  // Fundamentals connections
  {from: "sensors", to: "microcontrollers", label: "connects to"},
  {from: "actuators", to: "microcontrollers", label: "controlled by"},
  {from: "microcontrollers", to: "wifi", label: "communicates via"},
  {from: "microcontrollers", to: "bluetooth", label: "communicates via"},
  {from: "microcontrollers", to: "zigbee", label: "communicates via"},
  {from: "microcontrollers", to: "lorawan", label: "communicates via"},

  // Connectivity to protocols
  {from: "wifi", to: "mqtt", label: "carries"},
  {from: "wifi", to: "http", label: "carries"},
  {from: "wifi", to: "coap", label: "carries"},
  {from: "cellular", to: "mqtt", label: "carries"},
  {from: "cellular", to: "coap", label: "carries"},
  {from: "lorawan", to: "cloud", label: "connects to"},

  // Protocols to data
  {from: "mqtt", to: "cloud", label: "sends to"},
  {from: "mqtt", to: "edge", label: "processed at"},
  {from: "coap", to: "edge", label: "processed at"},
  {from: "http", to: "cloud", label: "sends to"},
  {from: "cloud", to: "timeseries", label: "stores in"},
  {from: "edge", to: "timeseries", label: "buffers in"},
  {from: "timeseries", to: "analytics", label: "feeds"},

  // Security relationships
  {from: "mqtt", to: "encryption", label: "secured by"},
  {from: "cloud", to: "authentication", label: "requires"},
  {from: "authentication", to: "zerotrust", label: "extends to"},
  {from: "encryption", to: "zerotrust", label: "component of"},

  // Applications
  {from: "bluetooth", to: "smarthome", label: "enables"},
  {from: "zigbee", to: "smarthome", label: "enables"},
  {from: "wifi", to: "smarthome", label: "enables"},
  {from: "cellular", to: "industrial", label: "enables"},
  {from: "lorawan", to: "industrial", label: "enables"},
  {from: "analytics", to: "industrial", label: "powers"},
  {from: "bluetooth", to: "healthcare", label: "enables"},
  {from: "analytics", to: "healthcare", label: "powers"},

  // Design
  {from: "sensors", to: "power", label: "constrained by"},
  {from: "microcontrollers", to: "power", label: "constrained by"},
  {from: "prototyping", to: "sensors", label: "uses"},
  {from: "prototyping", to: "microcontrollers", label: "uses"}
]

// Category colors
categoryColors = ({
  "Fundamentals": "#E67E22",
  "Connectivity": "#3498DB",
  "Protocols": "#9B59B6",
  "Data": "#16A085",
  "Security": "#E74C3C",
  "Applications": "#2C3E50",
  "Design": "#F39C12"
})

// Selected concept state
mutable selectedConcept = null

// Category filter
viewof categoryFilter = Inputs.select(
  ["All", ...Object.keys(categoryColors)],
  {label: "Filter by Category:", value: "All"}
)

// Level filter
viewof levelFilter = Inputs.select(
  ["All Levels", "Beginner (1-2)", "Intermediate (3)", "Advanced (4)"],
  {label: "Filter by Level:", value: "All Levels"}
)

8.1.1 Concept Map

filteredConcepts = concepts.filter(c => {
  const catMatch = categoryFilter === "All" || c.category === categoryFilter;
  let levelMatch = true;
  if (levelFilter === "Beginner (1-2)") levelMatch = c.level <= 2;
  if (levelFilter === "Intermediate (3)") levelMatch = c.level === 3;
  if (levelFilter === "Advanced (4)") levelMatch = c.level >= 4;
  return catMatch && levelMatch;
})

// Create visual grid of concepts
html`<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 20px 0;">
  ${filteredConcepts.map(concept => {
    const isSelected = selectedConcept === concept.id;
    const relatedIds = relationships
      .filter(r => r.from === concept.id || r.to === concept.id)
      .map(r => r.from === concept.id ? r.to : r.from);
    const isRelated = selectedConcept && relatedIds.includes(selectedConcept);

    return html`<button
      onclick=${() => mutable selectedConcept = isSelected ? null : concept.id}
      style="
        background: ${categoryColors[concept.category]};
        opacity: ${!selectedConcept || isSelected || isRelated ? 1 : 0.4};
        color: white;
        border: ${isSelected ? '3px solid #fff' : '2px solid transparent'};
        box-shadow: ${isSelected ? '0 0 0 3px ' + categoryColors[concept.category] : 'none'};
        padding: 15px 10px;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.2s;
        text-align: center;
      "
    >
      <div style="font-weight: bold; font-size: 14px; margin-bottom: 5px;">${concept.name}</div>
      <div style="font-size: 10px; opacity: 0.8;">Level ${concept.level}</div>
    </button>`;
  })}
</div>`

html`<div style="display: flex; flex-wrap: wrap; gap: 10px; margin: 15px 0; font-size: 12px;">
  ${Object.entries(categoryColors).map(([cat, color]) => html`
    <span style="display: flex; align-items: center; gap: 5px;">
      <span style="width: 12px; height: 12px; background: ${color}; border-radius: 3px;"></span>
      ${cat}
    </span>
  `)}
</div>`

8.1.2 Concept Details

selectedDetails = concepts.find(c => c.id === selectedConcept)

// Get related concepts
relatedConcepts = selectedConcept ? relationships
  .filter(r => r.from === selectedConcept || r.to === selectedConcept)
  .map(r => ({
    concept: concepts.find(c => c.id === (r.from === selectedConcept ? r.to : r.from)),
    relationship: r.label,
    direction: r.from === selectedConcept ? "outgoing" : "incoming"
  }))
  .filter(r => r.concept)
  : []

html`${selectedDetails ? html`
  <div style="background: #f8f9fa; padding: 25px; border-radius: 12px; margin: 20px 0; border-left: 5px solid ${categoryColors[selectedDetails.category]};">
    <h3 style="margin: 0 0 10px 0; color: ${categoryColors[selectedDetails.category]};">
      ${selectedDetails.name}
    </h3>
    <p style="margin: 0 0 15px 0;">${selectedDetails.description}</p>

    <div style="margin-bottom: 15px;">
      <strong>Key Topics:</strong>
      <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;">
        ${selectedDetails.topics.map(t => html`
          <span style="background: ${categoryColors[selectedDetails.category]}20; color: ${categoryColors[selectedDetails.category]}; padding: 4px 10px; border-radius: 12px; font-size: 12px;">
            ${t}
          </span>
        `)}
      </div>
    </div>

    <div style="margin-bottom: 15px;">
      <strong>Level:</strong>
      <span style="margin-left: 10px;">
        ${selectedDetails.level === 1 ? "Beginner - Start here!" :
          selectedDetails.level === 2 ? "Beginner-Intermediate" :
          selectedDetails.level === 3 ? "Intermediate" : "Advanced"}
      </span>
    </div>

    ${relatedConcepts.length > 0 ? html`
      <div>
        <strong>Related Concepts:</strong>
        <div style="display: grid; gap: 8px; margin-top: 10px;">
          ${relatedConcepts.map(r => html`
            <div style="display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: white; border-radius: 6px;">
              <span style="color: ${r.direction === 'outgoing' ? '#27AE60' : '#3498DB'};">
                ${r.direction === 'outgoing' ? '→' : '←'}
              </span>
              <span style="font-weight: bold;">${r.concept.name}</span>
              <span style="color: #7F8C8D; font-size: 12px;">${r.relationship}</span>
              <span style="margin-left: auto; background: ${categoryColors[r.concept.category]}; color: white; padding: 2px 8px; border-radius: 10px; font-size: 10px;">
                ${r.concept.category}
              </span>
            </div>
          `)}
        </div>
      </div>
    ` : ''}
  </div>
` : html`
  <div style="background: #f8f9fa; padding: 40px; border-radius: 12px; text-align: center; color: #7F8C8D;">
    <div style="font-size: 40px; margin-bottom: 15px;">🔍</div>
    <p style="margin: 0;">Click on any concept above to explore its details and relationships.</p>
  </div>
`}`

8.1.3 Learning Paths

learningPaths = [
  {
    name: "Smart Home Developer",
    icon: "🏠",
    steps: ["sensors", "microcontrollers", "wifi", "mqtt", "smarthome"],
    description: "Build connected home automation systems"
  },
  {
    name: "Industrial IoT Engineer",
    icon: "🏭",
    steps: ["sensors", "microcontrollers", "cellular", "mqtt", "edge", "industrial"],
    description: "Design factory monitoring and automation"
  },
  {
    name: "IoT Security Specialist",
    icon: "🔒",
    steps: ["microcontrollers", "wifi", "encryption", "authentication", "zerotrust"],
    description: "Secure IoT systems from threats"
  },
  {
    name: "Data & Analytics",
    icon: "📊",
    steps: ["sensors", "mqtt", "cloud", "timeseries", "analytics"],
    description: "Extract insights from IoT data streams"
  },
  {
    name: "Low-Power Designer",
    icon: "🔋",
    steps: ["sensors", "microcontrollers", "power", "lorawan", "edge"],
    description: "Design battery-powered remote devices"
  }
]

html`<div style="margin: 30px 0;">
  <h4>Recommended Learning Paths</h4>
  <div style="display: grid; gap: 15px;">
    ${learningPaths.map(path => html`
      <div style="background: white; border: 1px solid #E0E0E0; border-radius: 10px; padding: 15px;">
        <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
          <span style="font-size: 24px;">${path.icon}</span>
          <div>
            <strong>${path.name}</strong><br/>
            <span style="font-size: 12px; color: #7F8C8D;">${path.description}</span>
          </div>
        </div>
        <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;">
          ${path.steps.map((step, i) => {
            const concept = concepts.find(c => c.id === step);
            return html`
              <span style="display: flex; align-items: center; gap: 5px;">
                <span
                  onclick=${() => mutable selectedConcept = step}
                  style="background: ${categoryColors[concept.category]}; color: white; padding: 4px 10px; border-radius: 15px; font-size: 12px; cursor: pointer;">
                  ${concept.name}
                </span>
                ${i < path.steps.length - 1 ? html`<span style="color: #BDC3C7;">→</span>` : ''}
              </span>
            `;
          })}
        </div>
      </div>
    `)}
  </div>
</div>`

---

8.2 How to Use This Navigator

1. Explore by Category: Use the filter to focus on specific areas (Connectivity, Security, etc.)
2. Explore by Level: Filter by difficulty to find appropriate starting points
3. Discover Relationships: Click any concept to see what it connects to
4. Follow Learning Paths: Use the predefined paths or create your own journey

---

8.3 Quick Reference

Level	Description	Example Concepts
1	Beginner - Start here	Sensors, Actuators, Prototyping
2	Beginner-Intermediate	Wi-Fi, Bluetooth, Power Management
3	Intermediate	MQTT, Cloud, Smart Home
4	Advanced	Zero Trust, Industrial IoT, Analytics

---

8.4 Related Resources

• Learning Path Generator - Personalized course planning
• Protocol Selector Wizard - Choose the right protocol
• Architecture Planner - Design your IoT system