forked from microsoft/devicescript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathworkshop.html
More file actions
23 lines (23 loc) · 107 KB
/
Copy pathworkshop.html
File metadata and controls
23 lines (23 loc) · 107 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html lang="en" dir="ltr" class="docs-wrapper docs-doc-page docs-version-current plugin-docs plugin-id-default docs-doc-id-samples/workshop/index">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v2.4.1">
<title data-rh="true">Workshop | DeviceScript</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://microsoft.github.io/devicescript/samples/workshop"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Workshop | DeviceScript"><meta data-rh="true" name="description" content="Leverage your TypeScript skills to program electronics using DeviceScript."><meta data-rh="true" property="og:description" content="Leverage your TypeScript skills to program electronics using DeviceScript."><link data-rh="true" rel="icon" href="/devicescript/img/favicon.svg"><link data-rh="true" rel="canonical" href="https://microsoft.github.io/devicescript/samples/workshop"><link data-rh="true" rel="alternate" href="https://microsoft.github.io/devicescript/samples/workshop" hreflang="en"><link data-rh="true" rel="alternate" href="https://microsoft.github.io/devicescript/samples/workshop" hreflang="x-default"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.24/dist/katex.min.css" integrity="sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM" crossorigin="anonymous"><link rel="stylesheet" href="/devicescript/assets/css/styles.83f5432f.css">
<link rel="preload" href="/devicescript/assets/js/runtime~main.5c9665ef.js" as="script">
<link rel="preload" href="/devicescript/assets/js/main.2ac68606.js" as="script">
</head>
<body class="navigation-with-keyboard">
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}return t}()||function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id="__docusaurus">
<div role="region" aria-label="Skip to main content"><a class="skipToContent_oPtH" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><div class="announcementBar_zJRd" style="background-color:#fafbfc;color:#091E42" role="banner"><div class="announcementBarPlaceholder_NpUd"></div><div class="content_bSb_ announcementBarContent_t7IR">Experimental Project from Microsoft Research - Join the <a href="https://github.com/microsoft/devicescript/discussions">discussions</a> to provide feedback.</div><button type="button" aria-label="Close" class="clean-btn close closeButton_J5rP announcementBarClose_Jjdj"><svg viewBox="0 0 15 15" width="14" height="14"><g stroke="currentColor" stroke-width="3.1"><path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path></g></svg></button></div><nav aria-label="Main" class="navbar navbar--fixed-top navbarHideable_hhpl"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/devicescript/"><div class="navbar__logo"><img src="/devicescript/img/logo.svg" alt="DeviceScript language" class="themedImage_BQGR themedImage--light_HAxW"><img src="/devicescript/img/logo_dark.svg" alt="DeviceScript language" class="themedImage_BQGR themedImage--dark_bGx0"></div><b class="navbar__title text--truncate">DeviceScript</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/devicescript/getting-started">Download</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/devicescript/intro">Docs</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/devicescript/devices">Devices</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/devicescript/api/cli">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/microsoft/devicescript" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link header-github-link" aria-label="GitHub repository"></a><div class="toggle_ki11 colorModeToggle_Hewu"><button class="clean-btn toggleButton_MMFG toggleButtonDisabled_Uw7m" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_lgto"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_U96C"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_WqAV"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_MB5r docsWrapper_ct1J"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_iEvu" type="button"></button><div class="docPage_KLoz"><aside class="theme-doc-sidebar-container docSidebarContainer_y0RQ"><div class="sidebarViewport_EJ1r"><div class="sidebar_CUen sidebarWithHideableNavbar_w4KB"><a tabindex="-1" class="sidebarLogo_CYvI" href="/devicescript/"><img src="/devicescript/img/logo.svg" alt="DeviceScript language" class="themedImage_BQGR themedImage--light_HAxW"><img src="/devicescript/img/logo_dark.svg" alt="DeviceScript language" class="themedImage_BQGR themedImage--dark_bGx0"><b>DeviceScript</b></a><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_jmj1 menuWithAnnouncementBar_YufC"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/devicescript/intro">DeviceScript</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" aria-expanded="false" href="/devicescript/getting-started">Getting Started</a><button aria-label="Toggle the collapsible sidebar category 'Getting Started'" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" aria-expanded="false" href="/devicescript/developer">Developer</a><button aria-label="Toggle the collapsible sidebar category 'Developer'" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" aria-expanded="true" href="/devicescript/samples">Samples</a><button aria-label="Toggle the collapsible sidebar category 'Samples'" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/devicescript/samples/status-light-blinky">Status Light Blinky</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/devicescript/samples/blinky">Blinky</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/devicescript/samples/schedule-blinky">Schedule Blinky</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/devicescript/samples/double-blinky">Double Blinky</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/devicescript/samples/button-led">Button LED</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/devicescript/samples/dimmer">Dimmer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/devicescript/samples/weather-display">Weather Display</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/devicescript/samples/weather-dashboard">Weather Dashboard</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/devicescript/samples/copy-paste-button">Copy Paste Button</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/devicescript/samples/thermostat">Thermostat</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/devicescript/samples/github-build-status">GitHub Build Status</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/devicescript/samples/temperature-mqtt">Temperature + MQTT</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/devicescript/samples/homebridge-humidity">Homebridge + Humidity Sensor</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/devicescript/samples/thermostat-gateway">Thermostat + Gateway</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/devicescript/samples/workshop">Workshop</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" aria-expanded="false" href="/devicescript/language">Language Reference</a><button aria-label="Toggle the collapsible sidebar category 'Language Reference'" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" aria-expanded="false" href="/devicescript/devices">Devices</a><button aria-label="Toggle the collapsible sidebar category 'Devices'" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" aria-expanded="false" href="/devicescript/api/cli">API</a></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/devicescript/changelog">Release Notes</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/devicescript/contributing">Contributing</a></li></ul></nav><button type="button" title="Collapse sidebar" aria-label="Collapse sidebar" class="button button--secondary button--outline collapseSidebarButton_oTwn"><svg width="20" height="20" aria-hidden="true" class="collapseSidebarButtonIcon_pMEX"><g fill="#7a7a7a"><path d="M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"></path><path d="M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"></path></g></svg></button></div></div></aside><main class="docMainContainer_sTIZ"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_Qr34"><div class="docItemContainer_tjFy"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_T5ub" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/devicescript/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_sfvy"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item"><a class="breadcrumbs__link" itemprop="item" href="/devicescript/samples"><span itemprop="name">Samples</span></a><meta itemprop="position" content="1"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">Workshop</span><meta itemprop="position" content="2"></li></ul></nav><div class="tocCollapsible_wXna theme-doc-toc-mobile tocMobile_Ojys"><button type="button" class="clean-btn tocCollapsibleButton_iI2p">On this page</button></div><div class="theme-doc-markdown markdown"><h1>Workshop</h1><p>Leverage your TypeScript skills to program electronics using <a href="https://microsoft.github.io/devicescript/" target="_blank" rel="noopener noreferrer">DeviceScript</a>.</p><h2 class="anchor anchorWithHideOnScrollNavbar_pMLv" id="time-estimate">Time Estimate<a href="#time-estimate" class="hash-link" aria-label="Direct link to Time Estimate" title="Direct link to Time Estimate"></a></h2><p>2.0 hours</p><h2 class="anchor anchorWithHideOnScrollNavbar_pMLv" id="overview">Overview<a href="#overview" class="hash-link" aria-label="Direct link to Overview" title="Direct link to Overview"></a></h2><p>This project will introduce participants to DeviceScript, a TypeScript programming environment for small electronics, including sensing and interacting with the physical environment using a common microcontroller - ESP32-C3.</p><ul><li>Participants will program a microcontroller to retrieve data readings from the sensor and then act upon that data.</li><li>Participants will use <code>fetch</code> to call a Web API (GitHub build status) and update an LED based on the result.</li></ul><h2 class="anchor anchorWithHideOnScrollNavbar_pMLv" id="who-are-you">Who are You?<a href="#who-are-you" class="hash-link" aria-label="Direct link to Who are You?" title="Direct link to Who are You?"></a></h2><p>The ideal participant is someone who is familiar with TypeScript (front-end or back-end). Experience with electronics is <strong>not</strong> required.</p><h2 class="anchor anchorWithHideOnScrollNavbar_pMLv" id="activity-outcome">Activity Outcome<a href="#activity-outcome" class="hash-link" aria-label="Direct link to Activity Outcome" title="Direct link to Activity Outcome"></a></h2><p>Participants should have a device programmed with DeviceScript that can detect moisture levels in their plant soil,
show some light animation on a LED display. Update the LED display based on the build status of their favorite GitHub repository.</p><p>Participants will have learned to:</p><ul><li>Connect sensors to read the phyiscal environment (BME680)</li><li>Control the physical environment by playing sounds on buzzer, animating LEDs</li><li>Deploy DeviceScript scripts to hardware device</li><li>Issue Web HTTP requests</li></ul><h2 class="anchor anchorWithHideOnScrollNavbar_pMLv" id="required-materials">Required Materials<a href="#required-materials" class="hash-link" aria-label="Direct link to Required Materials" title="Direct link to Required Materials"></a></h2><p>These items are required.</p><table><thead><tr><th>Image</th><th>Item</th><th>Url</th></tr></thead><tbody><tr><td><img loading="lazy" src="https://microsoft.github.io/jacdac-docs/images/devices/seeed-studio/xiaoesp32c3withmsr218base218v46.catalog.jpg" alt="Xiao ESP32C3 on custom PCB" class="img_SS3x"></td><td>Xiao ESP32C3 + Breakout broard</td><td><a href="https://microsoft.github.io/devicescript/devices/esp32/seeed-xiao-esp32c3-msr218" target="_blank" rel="noopener noreferrer">https://microsoft.github.io/devicescript/devices/esp32/seeed-xiao-esp32c3-msr218</a></td></tr><tr><td><img loading="lazy" src="https://media-cdn.seeedstudio.com/media/catalog/product/cache/bb49d3ec4ee05b6f018e93f896b8a25d/h/t/httpsstatics3.seeedstudio.comseeedfile2018-08bazaar896611_img_0076a.jpg" alt="BME680 sensor" class="img_SS3x"></td><td>BME680 sensor</td><td><a href="https://www.seeedstudio.com/Grove-Temperature-Humidity-Pressure-and-Gas-Sensor-for-Arduino-BME680.html?queryID=3a720270a67b60e6bdac9638b0b9e5f0&objectID=100&indexName=bazaar_retailer_products" target="_blank" rel="noopener noreferrer">https://www.seeedstudio.com/Grove-Temperature-Humidity-Pressure-and-Gas-Sensor-for-Arduino-BME680.html?queryID=3a720270a67b60e6bdac9638b0b9e5f0&objectID=100&indexName=bazaar_retailer_products</a></td></tr><tr><td><img loading="lazy" src="https://media-cdn.seeedstudio.com/media/catalog/product/cache/bb49d3ec4ee05b6f018e93f896b8a25d/h/t/httpsstatics3.seeedstudio.comseeedfile2018-08bazaar897328_1.jpg" alt="Buzzer grove module" class="img_SS3x"></td><td>Buzzer</td><td><a href="https://www.seeedstudio.com/Grove-Buzzer.html?queryID=fd5ea919ecbc76ef7f1e4210879a99fd&objectID=1805&indexName=bazaar_retailer_products" target="_blank" rel="noopener noreferrer">https://www.seeedstudio.com/Grove-Buzzer.html?queryID=fd5ea919ecbc76ef7f1e4210879a99fd&objectID=1805&indexName=bazaar_retailer_products</a></td></tr><tr><td><img loading="lazy" src="https://media-cdn.seeedstudio.com/media/catalog/product/cache/bb49d3ec4ee05b6f018e93f896b8a25d/h/t/httpsstatics3.seeedstudio.comimagesproduct20cmbk1.jpg" alt="Grove cables" class="img_SS3x"></td><td>Grove cables</td><td><a href="https://www.seeedstudio.com/Grove-Universal-4-Pin-Buckled-20cm-Cable-5-PCs-pack.html?queryID=f4ec2714afc36affeef7955392573644&objectID=1693&indexName=bazaar_retailer_products" target="_blank" rel="noopener noreferrer">https://www.seeedstudio.com/Grove-Universal-4-Pin-Buckled-20cm-Cable-5-PCs-pack.html?queryID=f4ec2714afc36affeef7955392573644&objectID=1693&indexName=bazaar_retailer_products</a></td></tr><tr><td><img loading="lazy" src="https://media-cdn.seeedstudio.com/media/catalog/product/cache/bb49d3ec4ee05b6f018e93f896b8a25d/c/a/cable-1.png" alt="USB-C cable" class="img_SS3x"></td><td>USB-C cables</td><td><a href="https://www.seeedstudio.com/USB-3-1-Type-C-to-A-Cable-1-Meter-3-1A-p-4085.html?queryID=6bd7ee107594c139732c712ddb72eca0&objectID=4085&indexName=bazaar_retailer_products" target="_blank" rel="noopener noreferrer">https://www.seeedstudio.com/USB-3-1-Type-C-to-A-Cable-1-Meter-3-1A-p-4085.html?queryID=6bd7ee107594c139732c712ddb72eca0&objectID=4085&indexName=bazaar_retailer_products</a></td></tr></tbody></table><h2 class="anchor anchorWithHideOnScrollNavbar_pMLv" id="prerequisites">Prerequisites: <a href="#prerequisites" class="hash-link" aria-label="Direct link to Prerequisites: " title="Direct link to Prerequisites: "></a></h2><p>This workshop does not require experience with programming or electronics. However to make the most of the time, experience with TypeScript is helpful.</p><h3 class="anchor anchorWithHideOnScrollNavbar_pMLv" id="setup">Setup<a href="#setup" class="hash-link" aria-label="Direct link to Setup" title="Direct link to Setup"></a></h3><p>DeviceScript is tested on Windows and MacOS. Results may vary in other environment, depending of the support of <a href="https://www.npmjs.com/package/serialport" target="_blank" rel="noopener noreferrer">serialport</a>. The programming can be done from containers (GitHub Codespaces, docker, WSL2) but access to Serial/USB typically requires to run on the host OS.</p><ul><li>Install <a href="https://nodejs.org/en/download/" target="_blank" rel="noopener noreferrer">Node.JS 16+</a> and <a href="https://code.visualstudio.com/" target="_blank" rel="noopener noreferrer">Visual Studio Code</a></li><li>Install <a href="https://marketplace.visualstudio.com/items?itemName=devicescript.devicescript-vscode" target="_blank" rel="noopener noreferrer">DeviceScript extension v2.10.2+</a> (<a href="https://microsoft.github.io/devicescript/getting-started/vscode" target="_blank" rel="noopener noreferrer">more info...</a>). If you have an older installation of the extension, make sure to take the update.</li></ul><h2 class="anchor anchorWithHideOnScrollNavbar_pMLv" id="getting-started">Getting started<a href="#getting-started" class="hash-link" aria-label="Direct link to Getting started" title="Direct link to Getting started"></a></h2><ul><li>Open VS Code</li><li>Make sure that the <a href="https://marketplace.visualstudio.com/items?itemName=devicescript.devicescript-vscode" target="_blank" rel="noopener noreferrer">DeviceScript extension</a> is installed</li><li>Open the command palette and run the <code>DeviceScript: Create new Project...</code> command.</li></ul><p><img loading="lazy" alt="image" src="data:image/png;base64,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" width="435" height="103" class="img_SS3x"></p><ul><li>Once the project is created, reopen the project in VSCode</li></ul><p><img loading="lazy" alt="image" src="/devicescript/assets/images/image-1-30ce3afd44cffb315611a2948f1def98.png" width="279" height="579" class="img_SS3x"></p><h2 class="anchor anchorWithHideOnScrollNavbar_pMLv" id="part-1-programming-with-simulators">Part 1: Programming with simulators<a href="#part-1-programming-with-simulators" class="hash-link" aria-label="Direct link to Part 1: Programming with simulators" title="Direct link to Part 1: Programming with simulators"></a></h2><p>Before we start working wiith hardware, we can start programming and debugging embedded application using simulators, both for the main board and the sensors.</p><ul><li>edit <code>src/main.ts</code> to contain:</li></ul><div class="language-ts codeBlockContainer_mQmQ theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_D5yF"><pre tabindex="0" class="prism-code language-ts codeBlock_RMoD thin-scrollbar"><code class="codeBlockLines_AclH"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#CF222E">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> Buzzer </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">from</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">"@devicescript/core"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> buzzer </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">new</span><span class="token plain"> </span><span class="token class-name" style="color:#116329">Buzzer</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#8250DF">setInterval</span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#CF222E">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// update the frequency, volume and duration to your taste</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">await</span><span class="token plain"> buzzer</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#8250DF">playNote</span><span class="token punctuation" style="color:#393A34">(</span><span class="token number" style="color:#005CC5">440</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">0.5</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">50</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">1000</span><span class="token punctuation" style="color:#393A34">)</span><br></span></code></pre><div class="buttonGroup_aaMX"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_z5j7" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_FoOz"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_L0B6"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><ul><li>click on Play button on the editor menu in the top-right corner
<img loading="lazy" alt="Play button" src="/devicescript/assets/images/play-cd1822c16b71cd6b6678dcaf2821eda2.png" width="1094" height="542" class="img_SS3x"></li><li>in the simulator pane click auto-start to start the buzzer simulator
<img loading="lazy" alt="Auto-start button" src="/devicescript/assets/images/autostart-e89b961cc32b221668cbd3cd9a25024d.png" width="1408" height="704" class="img_SS3x"></li><li>enable sound on the simulator</li><li>enjoy the music!</li></ul><h3 class="anchor anchorWithHideOnScrollNavbar_pMLv" id="more-tutorials">More tutorials<a href="#more-tutorials" class="hash-link" aria-label="Direct link to More tutorials" title="Direct link to More tutorials"></a></h3><ul><li>Follow the <a href="https://microsoft.github.io/devicescript/samples/blinky" target="_blank" rel="noopener noreferrer">Blinky</a> to get used to the DeviceScript interface</li><li>Follow the <a href="https://microsoft.github.io/devicescript/samples/thermostat" target="_blank" rel="noopener noreferrer">Thermostat</a> to get used to handle sensor data</li></ul><h2 class="anchor anchorWithHideOnScrollNavbar_pMLv" id="part-2-configuring-the-hardware">Part 2: Configuring the Hardware<a href="#part-2-configuring-the-hardware" class="hash-link" aria-label="Direct link to Part 2: Configuring the Hardware" title="Direct link to Part 2: Configuring the Hardware"></a></h2><p>Now that we have a simple program working on simulator, it is time to specialize it for the available sensor and test it out on hardware.</p><p>Let's start by making sure the DeviceScript firmware is updated.</p><ul><li>Connect the BME680 sensor to the Qwic connector</li><li>Connect the Buzzer to the Grove connector <strong>A0</strong></li><li>Connect Xiao board to your computer using the USB-C cable</li><li>Make sure the Python extension is installed, along with a Python runtime</li><li>Open the <strong>DeviceScript</strong> view and click on the <strong>plug</strong> to connect to your Xiao.</li></ul><p><img loading="lazy" alt="image" src="/devicescript/assets/images/image-2-1bdce9082d3ea7914efcb76d24c26e8b.png" width="976" height="576" class="img_SS3x"></p><ul><li>Select <strong>Flash Firmware...</strong></li><li>Scroll down and select <strong>Seeed Studio XIAO ESP32C3 with MSR218 base</strong></li></ul><p><img loading="lazy" alt="image" src="/devicescript/assets/images/image-3-7a0c8f8d9db092c71b636da2a349592b.png" width="709" height="70" class="img_SS3x"></p><p>Once the flashing process is over,</p><ul><li>Open the <strong>DeviceScript</strong> view and click on the <strong>plug</strong> to connect to your Xiao.</li><li>Select <strong>Serial</strong></li></ul><p><img loading="lazy" alt="Alt text" src="/devicescript/assets/images/image-4-1bdce9082d3ea7914efcb76d24c26e8b.png" width="976" height="576" class="img_SS3x"></p><ul><li>Your device should be appearing in the device explorer!</li></ul><p><img loading="lazy" alt="Alt text" src="/devicescript/assets/images/image-5-82968f5529c50cd50b7a49d41b227d50.png" width="505" height="374" class="img_SS3x"></p><h2 class="anchor anchorWithHideOnScrollNavbar_pMLv" id="part-4-sensors">Part 4: Sensors<a href="#part-4-sensors" class="hash-link" aria-label="Direct link to Part 4: Sensors" title="Direct link to Part 4: Sensors"></a></h2><ul><li>Open <strong>main.ts</strong> and click on the <strong>magic wand</strong> icon in the file menu.</li></ul><p><img loading="lazy" alt="Alt text" src="/devicescript/assets/images/image-6-f8cd21cfbb4b74d7f156e2a683177492.png" width="505" height="255" class="img_SS3x"></p><p>The wizard will add an import that contains the pin mapping for the Xiao and search for <code>startBME680</code>. Repeat the operation for <code>startBuzzer</code></p><div class="language-ts codeBlockContainer_mQmQ theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_D5yF"><pre tabindex="0" class="prism-code language-ts codeBlock_RMoD thin-scrollbar"><code class="codeBlockLines_AclH"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#CF222E">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> pins</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> board </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">from</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">"@dsboard/seeed_xiao_esp32c3_msr218"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> startBME680 </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">from</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">"@devicescript/drivers"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> startBuzzer </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">from</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">"@devicescript/servers"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> temperature</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> humidity</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> pressure</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> airQualityIndex </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">await</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">startBME680</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> buzzer </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">startBuzzer</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> pin</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> pins</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#005CC5">A0</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><br></span></code></pre><div class="buttonGroup_aaMX"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_z5j7" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_FoOz"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_L0B6"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><h2 class="anchor anchorWithHideOnScrollNavbar_pMLv" id="part-5-funny-humidity-meter">Part 5: Funny humidity meter<a href="#part-5-funny-humidity-meter" class="hash-link" aria-label="Direct link to Part 5: Funny humidity meter" title="Direct link to Part 5: Funny humidity meter"></a></h2><p>Here is a tiny toy example that puts everything together.
It buzzes and turns the LEDs red if the humidity gets too high. In the simulator, drag the slider
or blow on the BME680 sensor to test it out.</p><p>If you want to use simulator, disconnect the hardware and restart.</p><div class="language-ts codeBlockContainer_mQmQ theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_D5yF"><pre tabindex="0" class="prism-code language-ts codeBlock_RMoD thin-scrollbar"><code class="codeBlockLines_AclH"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#CF222E">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> pins</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> board </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">from</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">"@dsboard/seeed_xiao_esp32c3_msr218"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> startBME680 </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">from</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">"@devicescript/drivers"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> startBuzzer </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">from</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">"@devicescript/servers"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> setStatusLight </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">from</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">"@devicescript/runtime"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> temperature</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> humidity</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> pressure</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> airQualityIndex </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">await</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">startBME680</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> buzzer </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">startBuzzer</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> pin</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> pins</span><span class="token punctuation" style="color:#393A34">.</span><span class="token constant" style="color:#005CC5">A0</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#8250DF">setInterval</span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#CF222E">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// read humidity sensor data</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// improvements: what about filtering?</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> h </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">await</span><span class="token plain"> humidity</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">reading</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#8250DF">read</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// if humidity goes above threshold (80%)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> humidityThreshold </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">80</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">h </span><span class="token operator" style="color:#D73A49">></span><span class="token plain"> humidityThreshold</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// buzz and turn the board LED red</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">await</span><span class="token plain"> buzzer</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#8250DF">playNote</span><span class="token punctuation" style="color:#393A34">(</span><span class="token number" style="color:#005CC5">440</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">0.5</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">500</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">await</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">setStatusLight</span><span class="token punctuation" style="color:#393A34">(</span><span class="token number" style="color:#005CC5">0xff0000</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">else</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// otherwise turn the LED off</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">await</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">setStatusLight</span><span class="token punctuation" style="color:#393A34">(</span><span class="token number" style="color:#005CC5">0</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">1000</span><span class="token punctuation" style="color:#393A34">)</span><br></span></code></pre><div class="buttonGroup_aaMX"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_z5j7" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_FoOz"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_L0B6"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><h2 class="anchor anchorWithHideOnScrollNavbar_pMLv" id="part-6-connect-to-wifi">Part 6: Connect to Wifi<a href="#part-6-connect-to-wifi" class="hash-link" aria-label="Direct link to Part 6: Connect to Wifi" title="Direct link to Part 6: Connect to Wifi"></a></h2><p>Enter the Wifi connection information through the explorer,</p><ul><li>expand the wifi node in the device explorer</li><li>hover on the access point and click the <strong>plug</strong> button</li><li>enter the access point password</li></ul><p>DeviceScript should use the Access Point when detected.</p><h3 class="anchor anchorWithHideOnScrollNavbar_pMLv" id="microsoft-campus-device-registration">Microsoft Campus Device Registration<a href="#microsoft-campus-device-registration" class="hash-link" aria-label="Direct link to Microsoft Campus Device Registration" title="Direct link to Microsoft Campus Device Registration"></a></h3><p>You need to register the XIAO MAC address in order for it to connect to the <code>MSFTGUEST</code> network.</p><ul><li>in the <strong>Devices</strong> tree, find the <strong>WiFi MAC</strong> field value and copy it.</li></ul><p><img loading="lazy" alt="Alt text" src="/devicescript/assets/images/image-7-d0ba0fcacc05e161bce54def0bab7436.png" width="477" height="325" class="img_SS3x"></p><ul><li>navigate to <a href="https://aka.ms/getconnected" target="_blank" rel="noopener noreferrer">https://aka.ms/getconnected</a> , click <strong>Quick Registration - Wireless</strong>, <strong>Guest Account (MSFTGUEST)</strong>, and register your device MAC address</li></ul><p><img loading="lazy" alt="Alt text" src="/devicescript/assets/images/image-8-ea42f66d02c3a45e4d7953c7e24ad61c.png" width="438" height="395" class="img_SS3x"></p><ul><li>find <strong>MSFTGUEST</strong> in the list of APs, click the <strong>plug</strong> icon and press Enter to leave the password empty.</li></ul><h2 class="anchor anchorWithHideOnScrollNavbar_pMLv" id="part-7-settings-and-secrets">Part 7: Settings and secrets<a href="#part-7-settings-and-secrets" class="hash-link" aria-label="Direct link to Part 7: Settings and secrets" title="Direct link to Part 7: Settings and secrets"></a></h2><p>In this section, we'll add a GET call to the GitHub repository status API and use it to change the LED color.</p><p>First thing first, we'll add .env files to the project to store the github configuration and <strong>secret</strong> token.</p><ul><li>Click on the <strong>wand</strong> icon on the file menu</li><li>Select <strong>Add Device Settings...</strong></li></ul><p>Update <code>.env.defaults</code> with the public settings (checked in)</p><div class="language-yaml codeBlockContainer_mQmQ theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_D5yF"><pre tabindex="0" class="prism-code language-yaml codeBlock_RMoD thin-scrollbar"><code class="codeBlockLines_AclH"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#6B6B6B;font-style:italic"># .env.defaults = public settings</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">GITHUB_OWNER=microsoft</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">GITHUB_REPO=devicescript</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">GITHUB_REF=main</span><br></span></code></pre><div class="buttonGroup_aaMX"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_z5j7" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_FoOz"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_L0B6"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>Secrets are stored in the <code>./env.local</code> file. This file is not part of the source code and <strong>should not be committed to a repository</strong>.
The GitHub token needs <code>repo:status</code> scope (and no more). You can create a token in the <a href="https://github.com/settings/tokens" target="_blank" rel="noopener noreferrer">GitHub settings</a>.</p><div class="language-yaml codeBlockContainer_mQmQ theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_D5yF"><pre tabindex="0" class="prism-code language-yaml codeBlock_RMoD thin-scrollbar"><code class="codeBlockLines_AclH"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#6B6B6B;font-style:italic"># .env.local = secrets, do not commit</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">GITHUB_TOKEN=</span><span class="token punctuation" style="color:#393A34">...</span><br></span></code></pre><div class="buttonGroup_aaMX"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_z5j7" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_FoOz"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_L0B6"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><div class="language-ts codeBlockContainer_mQmQ theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_D5yF"><pre tabindex="0" class="prism-code language-ts codeBlock_RMoD thin-scrollbar"><code class="codeBlockLines_AclH"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#CF222E">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> readSetting </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">from</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">"@devicescript/settings"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#6B6B6B;font-style:italic">// read configuration from ./env.defaults</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> owner </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">await</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">readSetting</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#C6105F">"GITHUB_OWNER"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> repo </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">await</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">readSetting</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#C6105F">"GITHUB_REPO"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> ref </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">await</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">readSetting</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#C6105F">"GITHUB_REF"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">"main"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#6B6B6B;font-style:italic">// read secret from ./env.local</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> token </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">await</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">readSetting</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#C6105F">"GITHUB_TOKEN"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token builtin">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#8250DF">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> owner</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> repo</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> ref </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><br></span></code></pre><div class="buttonGroup_aaMX"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_z5j7" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_FoOz"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_L0B6"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><h2 class="anchor anchorWithHideOnScrollNavbar_pMLv" id="part-8-fetching-github-build-status">Part 8: Fetching GitHub Build Status<a href="#part-8-fetching-github-build-status" class="hash-link" aria-label="Direct link to Part 8: Fetching GitHub Build Status" title="Direct link to Part 8: Fetching GitHub Build Status"></a></h2><p>DeviceScript provides a <a href="https://microsoft.github.io/devicescript/developer/net" target="_blank" rel="noopener noreferrer">Fetch API</a> similar to the browser <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" target="_blank" rel="noopener noreferrer">fetch</a>. You can use it to issue web requests.</p><p>This snippet makes the query to github and updates the status.
Feel free to remix it to integrate it into your current application</p><div class="language-ts codeBlockContainer_mQmQ theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_D5yF"><pre tabindex="0" class="prism-code language-ts codeBlock_RMoD thin-scrollbar"><code class="codeBlockLines_AclH"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#CF222E">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> readSetting </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">from</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">"@devicescript/settings"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> fetch </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">from</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">"@devicescript/net"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> setStatusLight</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> schedule </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">from</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">"@devicescript/runtime"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#6B6B6B;font-style:italic">// read configuration from ./env.defaults</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> owner </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">await</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">readSetting</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#C6105F">"GITHUB_OWNER"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> repo </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">await</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">readSetting</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#C6105F">"GITHUB_REPO"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#6B6B6B;font-style:italic">// read ref or default to 'main'</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> ref </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">await</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">readSetting</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#C6105F">"GITHUB_REF"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">"main"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#6B6B6B;font-style:italic">// read secret from ./env.local</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> token </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">await</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">readSetting</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#C6105F">"GITHUB_TOKEN"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">""</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token operator" style="color:#D73A49">!</span><span class="token plain">owner </span><span class="token operator" style="color:#D73A49">||</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">!</span><span class="token plain">repo</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">throw</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">new</span><span class="token plain"> </span><span class="token class-name" style="color:#116329">Error</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#C6105F">"missing configuration"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#6B6B6B;font-style:italic">// track state of last fetch</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">let</span><span class="token plain"> state</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">"failure"</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">|</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">"pending"</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">|</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">"success"</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">|</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">"error"</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">|</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">""</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">""</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">let</span><span class="token plain"> blinki </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">0</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#6B6B6B;font-style:italic">// update status light</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#8250DF">setInterval</span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#CF222E">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> blinki</span><span class="token operator" style="color:#D73A49">++</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">let</span><span class="token plain"> c </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">0x000000</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">state </span><span class="token operator" style="color:#D73A49">===</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">"failure"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> c </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> blinki </span><span class="token operator" style="color:#D73A49">%</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">2</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">===</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">0</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">?</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">0x100000</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">0x000000</span><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// blink fast red</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">else</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">state </span><span class="token operator" style="color:#D73A49">===</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">"pending"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> c </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">blinki </span><span class="token operator" style="color:#D73A49">>></span><span class="token plain"> </span><span class="token number" style="color:#005CC5">1</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">%</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">2</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">===</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">0</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">?</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">0x100500</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">0x000000</span><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// blink slow orange</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">else</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">state </span><span class="token operator" style="color:#D73A49">===</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">"success"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> c </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">0x000a00</span><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// solid green</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">else</span><span class="token plain"> c </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">0x000000</span><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// dark if any error</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">await</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">setStatusLight</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">c</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">500</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#6B6B6B;font-style:italic">// query github every 5s</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#8250DF">schedule</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> res </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">await</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">fetch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:#C6105F">`</span><span class="token template-string string" style="color:#C6105F">https://api.github.com/repos/</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation">owner</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#C6105F">/</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation">repo</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#C6105F">/commits/</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation">ref</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#C6105F">/status</span><span class="token template-string template-punctuation string" style="color:#C6105F">`</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> headers</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> Accept</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">"application/vnd.github+json"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> Authorization</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> token </span><span class="token operator" style="color:#D73A49">?</span><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:#C6105F">`</span><span class="token template-string string" style="color:#C6105F">Bearer </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation">token</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string template-punctuation string" style="color:#C6105F">`</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">undefined</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token string-property property" style="color:#005CC5">"X-GitHub-Api-Version"</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">"2022-11-28"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">res</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">status </span><span class="token operator" style="color:#D73A49">===</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">200</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> json </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">await</span><span class="token plain"> res</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#8250DF">json</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> state </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> json</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">state</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token builtin">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#8250DF">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> json</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> state </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">else</span><span class="token plain"> state </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">"error"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> timeout</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">1000</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> interval</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">5000</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">)</span><br></span></code></pre><div class="buttonGroup_aaMX"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_z5j7" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_FoOz"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_L0B6"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>Memory is limited! Be careful about using Web APIs that return huge payloads as you will surely run out of memory...</p></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/devicescript/samples/thermostat-gateway"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Thermostat + Gateway</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/devicescript/language"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">DeviceScript Language</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_XG6w thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#time-estimate" class="table-of-contents__link toc-highlight">Time Estimate</a></li><li><a href="#overview" class="table-of-contents__link toc-highlight">Overview</a></li><li><a href="#who-are-you" class="table-of-contents__link toc-highlight">Who are You?</a></li><li><a href="#activity-outcome" class="table-of-contents__link toc-highlight">Activity Outcome</a></li><li><a href="#required-materials" class="table-of-contents__link toc-highlight">Required Materials</a></li><li><a href="#prerequisites" class="table-of-contents__link toc-highlight">Prerequisites: </a><ul><li><a href="#setup" class="table-of-contents__link toc-highlight">Setup</a></li></ul></li><li><a href="#getting-started" class="table-of-contents__link toc-highlight">Getting started</a></li><li><a href="#part-1-programming-with-simulators" class="table-of-contents__link toc-highlight">Part 1: Programming with simulators</a><ul><li><a href="#more-tutorials" class="table-of-contents__link toc-highlight">More tutorials</a></li></ul></li><li><a href="#part-2-configuring-the-hardware" class="table-of-contents__link toc-highlight">Part 2: Configuring the Hardware</a></li><li><a href="#part-4-sensors" class="table-of-contents__link toc-highlight">Part 4: Sensors</a></li><li><a href="#part-5-funny-humidity-meter" class="table-of-contents__link toc-highlight">Part 5: Funny humidity meter</a></li><li><a href="#part-6-connect-to-wifi" class="table-of-contents__link toc-highlight">Part 6: Connect to Wifi</a><ul><li><a href="#microsoft-campus-device-registration" class="table-of-contents__link toc-highlight">Microsoft Campus Device Registration</a></li></ul></li><li><a href="#part-7-settings-and-secrets" class="table-of-contents__link toc-highlight">Part 7: Settings and secrets</a></li><li><a href="#part-8-fetching-github-build-status" class="table-of-contents__link toc-highlight">Part 8: Fetching GitHub Build Status</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/devicescript/intro">Introduction</a></li><li class="footer__item"><a class="footer__link-item" href="/devicescript/developer">Developer</a></li><li class="footer__item"><a class="footer__link-item" href="/devicescript/language">Language Reference</a></li><li class="footer__item"><a class="footer__link-item" href="/devicescript/api/cli">API</a></li></ul></div><div class="col footer__col"><div class="footer__title">Info</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/microsoft/devicescript/" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPrP"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://github.com/microsoft/devicescript/discussions" target="_blank" rel="noopener noreferrer" class="footer__link-item">Discussions<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPrP"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://go.microsoft.com/fwlink/?linkid=2259814" target="_blank" rel="noopener noreferrer" class="footer__link-item">Consumer Health Privacy<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPrP"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title">Legal</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://go.microsoft.com/fwlink/?LinkId=521839" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy & Cookies<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPrP"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://www.microsoft.com/en-us/legal/intellectualproperty/copyright" target="_blank" rel="noopener noreferrer" class="footer__link-item">Terms of Use<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPrP"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general" target="_blank" rel="noopener noreferrer" class="footer__link-item">Trademarks<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPrP"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2024 Microsoft Corporation.</div></div></div></footer></div>
<script src="/devicescript/assets/js/runtime~main.5c9665ef.js"></script>
<script src="/devicescript/assets/js/main.2ac68606.js"></script>
</body>
</html>