/** * Board Selector - Interactive component * Handles: board pill tab switching + OS card hover to update left preview */ (function () { // ===== Lightbox ===== // Created once at script load; survives SPA re-navigation. var lightbox = null; var lightboxImg = null; function ensureLightbox() { if (lightbox) return; lightbox = document.createElement('div'); lightbox.id = 'board-img-lightbox'; lightboxImg = document.createElement('img'); lightboxImg.alt = ''; lightbox.appendChild(lightboxImg); document.body.appendChild(lightbox); // Close on backdrop click (not on the image itself) lightbox.addEventListener('click', function (e) { if (e.target === lightbox) closeLightbox(); }); // Close on Escape document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeLightbox(); }); } function openLightbox(src, alt) { ensureLightbox(); lightboxImg.src = src; lightboxImg.alt = alt || ''; lightbox.classList.add('open'); } function closeLightbox() { if (lightbox) lightbox.classList.remove('open'); } function init() { const selector = document.getElementById('board-selector'); if (!selector) return; if (selector.hasAttribute('data-initialized')) return; selector.setAttribute('data-initialized', 'true'); const pills = selector.querySelectorAll('.board-pill'); const osItems = selector.querySelectorAll('.os-item'); const previewImg = document.getElementById('board-preview-img'); const previewTitle = document.getElementById('board-preview-title'); const previewSpecs = document.getElementById('board-preview-specs'); // Resolve image URLs from hidden preload elements (handles Mintlify CDN rewriting) var iq9075ImgEl = document.getElementById('board-img-iq9075'); var iq9075DarkImgEl = document.getElementById('board-img-iq9075-dark'); var iq8275ImgEl = document.getElementById('board-img-iq8275'); var iq8275DarkImgEl = document.getElementById('board-img-iq8275-dark'); var rb3gen2ImgEl = document.getElementById('board-img-rb3gen2'); var rb3gen2DarkImgEl = document.getElementById('board-img-rb3gen2-dark'); var iqx7xxxImgEl = document.getElementById('board-img-iqx7xxx'); var iqx7xxxDarkImgEl = document.getElementById('board-img-iqx7xxx-dark'); var iq615ImgEl = document.getElementById('board-img-iq615'); var iq615DarkImgEl = document.getElementById('board-img-iq615-dark'); var iq9075Src = iq9075ImgEl ? iq9075ImgEl.getAttribute('src') : '/images/IQ-9075-light.png'; var iq9075DarkSrc = iq9075DarkImgEl ? iq9075DarkImgEl.getAttribute('src') : '/images/IQ-9075-dark.png'; var iq8275Src = iq8275ImgEl ? iq8275ImgEl.getAttribute('src') : '/images/IQ-8275-light.png'; var iq8275DarkSrc = iq8275DarkImgEl ? iq8275DarkImgEl.getAttribute('src') : '/images/IQ-8275-dark.png'; var rb3gen2Src = rb3gen2ImgEl ? rb3gen2ImgEl.getAttribute('src') : '/images/RB3-Gen2-light.png'; var rb3gen2DarkSrc = rb3gen2DarkImgEl ? rb3gen2DarkImgEl.getAttribute('src') : '/images/RB3-Gen2-dark.png'; var iqx7xxxSrc = iqx7xxxImgEl ? iqx7xxxImgEl.getAttribute('src') : '/images/IQ-X-light.png'; var iqx7xxxDarkSrc = iqx7xxxDarkImgEl ? iqx7xxxDarkImgEl.getAttribute('src') : '/images/IQ-X-dark.png'; var iq615Src = iq615ImgEl ? iq615ImgEl.getAttribute('src') : '/images/IQ-615-light.png'; var iq615DarkSrc = iq615DarkImgEl ? iq615DarkImgEl.getAttribute('src') : '/images/IQ-615-dark.png'; function isDarkMode() { return document.documentElement.classList.contains('dark'); } function boardImg(key) { var dark = isDarkMode(); if (key === 'iq9075') return dark ? iq9075DarkSrc : iq9075Src; if (key === 'iq8275') return dark ? iq8275DarkSrc : iq8275Src; if (key === 'rb3gen2') return dark ? rb3gen2DarkSrc : rb3gen2Src; if (key === 'iqx7xxx') return dark ? iqx7xxxDarkSrc : iqx7xxxSrc; if (key === 'iq615') return dark ? iq615DarkSrc : iq615Src; return ''; } // Board data const boards = { iq9075: { title: 'Dragonwing IQ-9075 EVK', desc: 'Our premier high-performance platform for next-gen GenAI and heavy robotics.', specs: [ '100 dense INT8 TOPS of Edge AI performance', 'Runs 13B-parameter LLM / GenAI models locally', 'Multi-camera pipeline processing up to 16 concurrent feeds', 'High-compute heterogeneous octa-core architecture' ] }, iq8275: { title: 'Dragonwing IQ-8275 EVK', desc: 'A flexible development platform engineered to fast-track industrial AI.', specs: [ '40 dense INT8 TOPS of tailored edge AI processing', 'Extended temperature support (-40°C to +125°C) for rugged environments', 'Integrated real-time MCU subsystem for safety-critical automation', 'Multi-camera pipeline processing for up to 12 concurrent feeds' ] }, rb3gen2: { title: 'RB3 Gen 2 Development Kit', desc: 'Get started with the Dragonwing RB3 Gen 2, available in both the QCS6490 and QCS5430 (RB3 Gen 2 Lite) variants for scalable AI-accelerated performance.', specs: [ 'Support for multiple operating systems, including Qualcomm Linux, Ubuntu, and Windows 11 IoT Enterprise', 'Advanced multi-camera and multimedia pipelines for computer vision and robotics applications', 'Extensible, standards-based form factors for rapid prototyping and easy productization' ] }, iqx7xxx: { title: 'IQ-X7xxx Series EVK', desc: 'A next-generation industrial platform built on the Qualcomm Oryon CPU, engineered for industrial PCs, PLCs, advanced HMIs, and edge controllers operating in harsh environments.', specs: [ 'Hexagon NPU delivering up to 45 TOPS of AI acceleration, up to 3x more power-efficient than competitors', 'Up to 64 GB of LPDDR5X memory, with UFS 4.0 and SD Express storage', '5G and Wi-Fi 7 connectivity with Multi-Link, plus USB4 and PCIe Gen4', ] }, iq615: { title: 'Dragonwing IQ-615 EVK', desc: 'The Qualcomm® Dragonwing™ IQ-615 Evaluation Kit (EVK) enables developers to evaluate the industrial-grade performance of the Qualcomm® Dragonwing IQ-615 processor for cost-optimized IoT solutions.', specs: [ 'Octa-core Kryo™ Gen 4 CPU (2x Cortex-A76 + 6x Cortex-A55) with Adreno™ 612 GPU', 'Hexagon™ V66 DSP for efficient on-device machine learning', 'Up to 4K60 video decode with multi-camera MIPI-CSI support' ] } }; // OS preview data (shown on hover) const osData = { yocto: { title: 'Linux Yocto', img: '/images/placeholder.png', specs: [ 'Custom lightweight builds', 'Hardware-level optimization', 'Long-term stability', 'Minimal footprint' ] }, ubuntu: { title: 'Ubuntu', img: '/images/placeholder.png', specs: [ 'Developer-friendly environment', 'Extensive package support', 'Cloud integration ready', 'AI/ML frameworks included' ] } }; var currentBoard = 'iq9075'; // Map board keys to each OS's device-overview page var boardLinks = { iq9075: { qli: '/Linux/devices/iq9075-evk/device-overview', ubuntu: '/Ubuntu/devices/iq9075-evk/device-overview', windows: '/Windows/devices/iq9075-evk/device-overview' }, iq8275: { qli: '/Linux/devices/iq8275-evk/device-overview', ubuntu: '/Ubuntu/devices/iq8275-evk/device-overview', windows: '/Windows/devices/iq8275-evk/device-overview' }, rb3gen2: { qli: 'https://docs.qualcomm.com/doc/80-80023-253/topic/rb3-qsg-whats-in-box.html?product=1601111740013077&facet=Linux%202.x%20quickstart', ubuntu: 'https://docs.qualcomm.com/doc/80-90441-1/topic/Getting_started_1.html?product=1601111740013077&facet=Ubuntu%20quickstart', windows: 'https://docs.qualcomm.com/doc/80-80015-253/topic/getting-started.html?product=1601111740013077&facet=Windows%20quickstart' }, iqx7xxx: { qli: 'https://docs.qualcomm.com/doc/80-80023-261/topic/iqx-ug-landing-page.html', ubuntu: 'https://docs.qualcomm.com/doc/80-77183-262/topic/ubuntu-qsg-landing-page-1.html', windows: '/Windows/devices/iq8275-evk/device-overview' }, iq615: { qli: 'https://docs.qualcomm.com/doc/80-80022-293/topic/iq615-qsg-landing-page.html', ubuntu: '', windows: '' } }; function updateCardLinks(boardKey) { var links = boardLinks[boardKey]; if (!links) return; // Update "Start with Linux" link (matched by its stable data-link attr) var linuxLink = selector.querySelector('.board-card-link-primary[data-link="qli"]'); if (linuxLink) linuxLink.setAttribute('href', links.qli); // Update "Start with Ubuntu" link var ubuntuLink = selector.querySelector('.board-card-link-primary[data-link="ubuntu"]'); if (ubuntuLink) ubuntuLink.setAttribute('href', links.ubuntu); // Update "Start with Windows" link var windowsLink = selector.querySelector('.board-card-link-primary[data-link="windows"]'); if (windowsLink && links.windows) windowsLink.setAttribute('href', links.windows); } // QC boards (RB3 Gen 2 family) show all 3 cards; IQ boards show only Linux + Ubuntu. var qcBoards = { rb3gen2: true }; // Boards that show a single "Start with" button (no "More info" secondary link). var singleButtonBoards = { rb3gen2: true, iqx7xxx: true, iq615: true }; var cardsContainer = selector.querySelector('.board-cards'); function updateCardLayout(boardKey) { var isQc = !!qcBoards[boardKey]; var singleButton = !!singleButtonBoards[boardKey]; // IQ-615 only offers the Qualcomm Linux card for now; hide Ubuntu (and Windows). var linuxOnly = boardKey === 'iq615'; if (cardsContainer) { // Windows card is hidden for now, so every board shows 2 cards (2-column layout). // To restore 3 columns on QC boards, use: toggle('board-cards-qc', isQc) cardsContainer.classList.remove('board-cards-qc'); cardsContainer.classList.add('board-cards-iq'); // Single Linux card => single-column layout. cardsContainer.classList.toggle('board-cards-single', linuxOnly); } // Qualcomm Linux (QLI) card shown on all boards. var qliCard = selector.querySelector('.board-card[data-card="qli"]'); if (qliCard) qliCard.style.display = ''; // Windows card hidden for now in all tabs (set to `isQc ? '' : 'none'` to restore on QC boards) var windowsCard = selector.querySelector('.board-card[data-card="windows"]'); if (windowsCard) windowsCard.style.display = 'none'; // Ubuntu card hidden on IQ-615 (Linux-only for now). var ubuntuCard = selector.querySelector('.board-card[data-card="ubuntu"]'); if (ubuntuCard) ubuntuCard.style.display = linuxOnly ? 'none' : ''; // Single-button boards hide the secondary "More info" link var secondaryLinks = selector.querySelectorAll('.board-card .board-card-link-secondary'); secondaryLinks.forEach(function (link) { link.style.display = singleButton ? 'none' : ''; }); } const previewDesc = document.getElementById('board-preview-desc'); function updatePreview(title, img, specs, desc) { if (previewTitle) previewTitle.textContent = title; // desc may contain a safe, hard-coded inline link, so render as HTML. if (previewDesc && desc) previewDesc.innerHTML = desc; if (previewImg && img) { previewImg.setAttribute('src', img); // Mintlify adds srcset for responsive images; browser prioritizes srcset over src, // so we must update it too to actually change the displayed image. previewImg.removeAttribute('srcset'); } if (previewSpecs) { previewSpecs.innerHTML = specs.map(function (s) { return '

' + s.replace(/^•\s*/, '') + '

'; }).join(''); } } function setActiveBoard(boardKey) { currentBoard = boardKey; var board = boards[boardKey]; if (board) { updatePreview(board.title, boardImg(boardKey), board.specs, board.desc); } pills.forEach(function (pill) { pill.classList.toggle('active', pill.getAttribute('data-board') === boardKey); }); updateCardLinks(boardKey); updateCardLayout(boardKey); } // Set initial board state setActiveBoard(currentBoard); // Swap to light/dark variant when Mintlify toggles the `dark` class on var themeObserver = new MutationObserver(function () { var board = boards[currentBoard]; if (board && previewImg) { previewImg.setAttribute('src', boardImg(currentBoard)); previewImg.removeAttribute('srcset'); } }); themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] }); // Board pill click pills.forEach(function (pill) { pill.addEventListener('click', function () { setActiveBoard(pill.getAttribute('data-board')); // Bring the clicked pill fully into view when the row is scrollable. pill.scrollIntoView({ behavior: 'smooth', inline: 'nearest', block: 'nearest' }); }); }); // ===== Pills horizontal carousel affordance ===== // Keep the pills on a single scrollable row. When they overflow, show a // fade on the overflowing edge(s) so users can tell there is more to scroll, // and ensure the pill crossing the edge stays ~half visible as a "peek" hint. var pillsRow = selector.querySelector('.board-pills'); function updatePillsOverflow() { if (!pillsRow) return; var maxScroll = pillsRow.scrollWidth - pillsRow.clientWidth; var scrollable = maxScroll > 1; pillsRow.classList.toggle('is-scrollable', scrollable); if (!scrollable) { pillsRow.classList.remove('at-start', 'at-end'); return; } pillsRow.classList.toggle('at-start', pillsRow.scrollLeft <= 1); pillsRow.classList.toggle('at-end', pillsRow.scrollLeft >= maxScroll - 1); } if (pillsRow) { pillsRow.addEventListener('scroll', updatePillsOverflow, { passive: true }); window.addEventListener('resize', updatePillsOverflow); updatePillsOverflow(); } // ===== Drag-to-scroll (click and drag with mouse to pan the pills) ===== if (pillsRow) { var isDragging = false; var didDrag = false; var dragStartX = 0; var dragStartScroll = 0; var DRAG_THRESHOLD = 5; // px before a press becomes a drag (not a click) pillsRow.addEventListener('pointerdown', function (e) { // Only primary button / touch / pen if (e.button && e.button !== 0) return; isDragging = true; didDrag = false; dragStartX = e.clientX; dragStartScroll = pillsRow.scrollLeft; }); pillsRow.addEventListener('pointermove', function (e) { if (!isDragging) return; var delta = e.clientX - dragStartX; if (!didDrag && Math.abs(delta) > DRAG_THRESHOLD) { didDrag = true; pillsRow.classList.add('is-dragging'); // Capture so we keep receiving move/up events outside the element. if (pillsRow.setPointerCapture) { try { pillsRow.setPointerCapture(e.pointerId); } catch (err) {} } } if (didDrag) { pillsRow.scrollLeft = dragStartScroll - delta; e.preventDefault(); } }); function endDrag() { if (!isDragging) return; isDragging = false; pillsRow.classList.remove('is-dragging'); } pillsRow.addEventListener('pointerup', endDrag); pillsRow.addEventListener('pointercancel', endDrag); pillsRow.addEventListener('pointerleave', endDrag); // Swallow the click that fires after a drag so it doesn't switch board. pillsRow.addEventListener('click', function (e) { if (didDrag) { e.stopPropagation(); e.preventDefault(); didDrag = false; } }, true); } // Lightbox: open with the current src at click time if (previewImg) { previewImg.addEventListener('click', function () { var src = previewImg.getAttribute('src'); var alt = previewImg.getAttribute('alt') || ''; if (src) openLightbox(src, alt); }); } // OS item hover - updates left preview osItems.forEach(function (item) { item.addEventListener('mouseenter', function () { var osKey = item.getAttribute('data-os'); var os = osData[osKey]; if (os) { updatePreview(os.title, os.img, os.specs); } osItems.forEach(function (i) { i.classList.remove('active'); }); item.classList.add('active'); }); item.addEventListener('mouseleave', function () { // Restore board preview var board = boards[currentBoard]; if (board) { updatePreview(board.title, boardImg(currentBoard), board.specs); } }); }); } // Run on DOM ready and on navigation (SPA) if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } // Re-init on SPA navigation var observer = new MutationObserver(function () { var el = document.getElementById('board-selector'); if (el && !el.hasAttribute('data-initialized')) { init(); } initOtherKitsCarousel(); }); observer.observe(document.body, { childList: true, subtree: true }); // ===== Other kits carousel ===== function initOtherKitsCarousel() { var section = document.querySelector('.other-kits-section'); if (!section) return; if (section.hasAttribute('data-initialized')) return; section.setAttribute('data-initialized', 'true'); var carousel = section.querySelector('.other-kits-carousel'); var prev = section.querySelector('[data-carousel-prev]'); var next = section.querySelector('[data-carousel-next]'); var cards = carousel ? carousel.querySelectorAll('.other-kit-card') : []; if (!carousel || !prev || !next) return; function maxScroll() { return carousel.scrollWidth - carousel.clientWidth; } function isMobile() { return window.matchMedia('(max-width: 768px)').matches; } function updateControls() { var scrollable = maxScroll() > 1; var hasExtraCards = cards.length > 3; section.classList.toggle('is-scrollable', hasExtraCards || scrollable || isMobile()); prev.disabled = !scrollable || carousel.scrollLeft <= 1; next.disabled = !scrollable || carousel.scrollLeft >= maxScroll() - 1; } function scrollByCard(direction) { var card = carousel.querySelector('.other-kit-card'); if (!card) return; var gap = parseFloat(window.getComputedStyle(carousel).columnGap || '0') || 0; carousel.scrollBy({ left: direction * (card.getBoundingClientRect().width + gap), behavior: 'smooth' }); } prev.addEventListener('click', function () { scrollByCard(-1); }); next.addEventListener('click', function () { scrollByCard(1); }); carousel.addEventListener('scroll', updateControls, { passive: true }); window.addEventListener('resize', updateControls); updateControls(); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initOtherKitsCarousel); } else { initOtherKitsCarousel(); } // ===== Distro Selector ===== function initDistro() { var selector = document.getElementById('distro-selector'); if (!selector) return; var pills = selector.querySelectorAll('.board-pill'); var cards = selector.querySelectorAll('.distro-card'); var bestfor = document.getElementById('distro-bestfor'); var distroDescriptions = { yocto: 'Production-grade hardware, specialized embedded devices, and deep-level system engineering.', ubuntu: 'Rapid prototyping, developer-friendly workflows, and broad ecosystem compatibility.', windows: 'Enterprise IoT solutions, cloud-connected devices, and Windows ecosystem integration.', android: 'Rich multimedia experiences, consumer-facing devices, and mobile-first applications.' }; function setActiveDistro(key) { pills.forEach(function (pill) { pill.classList.toggle('active', pill.getAttribute('data-distro') === key); }); cards.forEach(function (card) { if (card.getAttribute('data-distro') === key) { card.classList.remove('distro-inactive'); } else { card.classList.add('distro-inactive'); } }); if (bestfor && distroDescriptions[key]) { bestfor.innerHTML = 'Best for: ' + distroDescriptions[key]; } } pills.forEach(function (pill) { pill.addEventListener('click', function () { setActiveDistro(pill.getAttribute('data-distro')); }); }); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initDistro); } else { initDistro(); } var distroObserver = new MutationObserver(function () { if (document.getElementById('distro-selector')) { initDistro(); } }); distroObserver.observe(document.body, { childList: true, subtree: true }); })();