797 lines
92 KiB
HTML
797 lines
92 KiB
HTML
<!DOCTYPE html>
|
||
<html data-react-helmet="lang" lang="en"><style>@layer cq-polyfill-3acc16ed { * { --cq-container-type-3acc16ed: cq-normal; --cq-container-name-3acc16ed: cq-none; } }</style><cq-polyfill-3acc16ed style="position: fixed; top: 0px; left: 0px; visibility: hidden; width: 1svw; height: 1svh;"></cq-polyfill-3acc16ed><head>
|
||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" async="" src="Serve%20your%20webpage%20Getting%20started%20with%20your%20Raspberry%20Pi%20Pico%20W%20Python%20Coding%20projects%20for%20kids%20and%20teens_fichiers/linkid.js"></script><script type="text/javascript" charset="UTF-8" async="" src="Serve%20your%20webpage%20Getting%20started%20with%20your%20Raspberry%20Pi%20Pico%20W%20Python%20Coding%20projects%20for%20kids%20and%20teens_fichiers/state.js"></script><script type="text/javascript" async="" src="Serve%20your%20webpage%20Getting%20started%20with%20your%20Raspberry%20Pi%20Pico%20W%20Python%20Coding%20projects%20for%20kids%20and%20teens_fichiers/js"></script><script async="" src="Serve%20your%20webpage%20Getting%20started%20with%20your%20Raspberry%20Pi%20Pico%20W%20Python%20Coding%20projects%20for%20kids%20and%20teens_fichiers/gtm.js"></script><script>window.dataLayer = window.dataLayer || [];</script><script>
|
||
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
||
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||
})(window,document,'script','dataLayer','GTM-PXJKRGC');
|
||
</script><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link href="https://fonts.gstatic.com/" crossorigin="true" rel="preconnect"><link as="style" href="Serve%20your%20webpage%20Getting%20started%20with%20your%20Raspberry%20Pi%20Pico%20W%20Python%20Coding%20projects%20for%20kids%20and%20teens_fichiers/css2.css" rel="preload"><link href="Serve%20your%20webpage%20Getting%20started%20with%20your%20Raspberry%20Pi%20Pico%20W%20Python%20Coding%20projects%20for%20kids%20and%20teens_fichiers/css2.css" media="all" onload='this.media="all"' rel="stylesheet"><link rel="stylesheet" href="Serve%20your%20webpage%20Getting%20started%20with%20your%20Raspberry%20Pi%20Pico%20W%20Python%20Coding%20projects%20for%20kids%20and%20teens_fichiers/css2_002.css"><link rel="stylesheet" href="blob:https://projects.raspberrypi.org/f9b93c78-b69f-460e-978c-14c7cc726af0"><noscript><link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500&family=Roboto+Slab:wght@400;700&family=Space+Mono&display=swap" rel="stylesheet"/></noscript><link rel="shortcut icon" href="https://projects.raspberrypi.org/favicon.ico"><script>addEventListener("error",window.__e=function e(n){(e.q=e.q||[]).push(n)})</script><script src="Serve%20your%20webpage%20Getting%20started%20with%20your%20Raspberry%20Pi%20Pico%20W%20Python%20Coding%20projects%20for%20kids%20and%20teens_fichiers/web-component.js"></script><style type="text/css">:root {--rpf-brand-black:hsla(60, 4%, 11%, 1);--rpf-brand-leaf:hsla(123, 43%, 48%, 1);--rpf-brand-raspberry:hsla(342, 71%, 47%, 1);}:root {--rpf-red-100:hsla(4, 89%, 96%, 1);--rpf-red-200:hsla(1, 87%, 91%, 1);--rpf-red-400:hsla(1, 87%, 82%, 1);--rpf-red-600:hsla(1, 87%, 72%, 1);--rpf-red-800:hsla(1, 87%, 63%, 1);--rpf-red-900:hsla(1, 52%, 50%, 1);--rpf-green-100:hsla(125, 41%, 95%, 1);--rpf-green-200:hsla(122, 39%, 87%, 1);--rpf-green-400:hsla(123, 40%, 74%, 1);--rpf-green-600:hsla(123, 40%, 61%, 1);--rpf-green-800:hsla(123, 43%, 48%, 1);--rpf-green-900:hsla(123, 43%, 36%, 1);--rpf-teal-100:hsla(176, 55%, 94%, 1);--rpf-teal-200:hsla(174, 55%, 85%, 1);--rpf-teal-400:hsla(174, 55%, 70%, 1);--rpf-teal-600:hsla(174, 56%, 56%, 1);--rpf-teal-800:hsla(174, 81%, 41%, 1);--rpf-teal-900:hsla(174, 81%, 29%, 1);--rpf-orange-100:hsla(31, 100%, 95%, 1);--rpf-orange-200:hsla(32, 100%, 88%, 1);--rpf-orange-400:hsla(31, 100%, 77%, 1);--rpf-orange-600:hsla(31, 99%, 65%, 1);--rpf-orange-800:hsla(31, 99%, 54%, 1);--rpf-orange-900:hsla(31, 85%, 37%, 1);--rpf-yellow-100:hsla(51, 100%, 95%, 1);--rpf-yellow-200:hsla(52, 100%, 87%, 1);--rpf-yellow-400:hsla(51, 100%, 75%, 1);--rpf-yellow-600:hsla(52, 100%, 63%, 1);--rpf-yellow-800:hsla(52, 100%, 50%, 1);--rpf-yellow-900:hsla(52, 100%, 26%, 1);--rpf-purple-100:hsla(282, 36%, 95%, 1);--rpf-purple-200:hsla(279, 38%, 87%, 1);--rpf-purple-400:hsla(279, 38%, 73%, 1);--rpf-purple-600:hsla(279, 37%, 60%, 1);--rpf-purple-800:hsla(279, 43%, 47%, 1);--rpf-purple-900:hsla(280, 43%, 37%, 1);--rpf-navy-100:hsla(235, 38%, 94%, 1);--rpf-navy-200:hsla(234, 38%, 84%, 1);--rpf-navy-400:hsla(235, 38%, 69%, 1);--rpf-navy-600:hsla(235, 38%, 53%, 1);--rpf-navy-800:hsla(235, 63%, 37%, 1);--rpf-navy-900:hsla(234, 63%, 30%, 1);--rpf-blue-100:hsla(203, 86%, 95%, 1);--rpf-blue-200:hsla(204, 88%, 87%, 1);--rpf-blue-400:hsla(204, 88%, 74%, 1);--rpf-blue-600:hsla(204, 89%, 60%, 1);--rpf-blue-800:hsla(204, 100%, 47%, 1);--rpf-blue-900:hsla(204, 100%, 38%, 1);}:root {--rpf-white:hsla(0, 0%, 100%, 1);--rpf-off-white:hsla(225, 25%, 97%, 1);--rpf-grey-50:hsla(210, 8%, 95%, 1);--rpf-grey-100:hsla(228, 10%, 90%, 1);--rpf-grey-150:hsla(223, 9%, 85%, 1);--rpf-grey-200:hsla(228, 10%, 80%, 1);--rpf-grey-300:hsla(229, 9%, 75%, 1);--rpf-grey-400:hsla(229, 8%, 61%, 1);--rpf-grey-500:hsla(229, 9%, 42%, 1);--rpf-grey-600:hsla(228, 9%, 32%, 1);--rpf-grey-700:hsla(228, 9%, 22%, 1);--rpf-grey-800:hsla(232, 9%, 18%, 1);--rpf-grey-850:hsla(228, 9%, 15%, 1);--rpf-grey-900:hsla(228, 9%, 10%, 1);--rpf-grey-950:hsla(228, 8%, 5%, 1);--rpf-black:hsla(0, 0%, 0%, 1);}:root {--font-size-0-5:0.5rem;--font-size-0-75:0.75rem;--font-size-1:1rem;--font-size-1-5:1.25rem;--font-size-2:1.5rem;--font-size-3:2rem;--font-size-4:2.5rem;--font-size-5:3rem;--font-size-6:3.5rem;--font-size-7:4rem;--font-size-8:4.5rem;--font-size-9:5rem;}:root {--font-weight-regular:400;--font-weight-bold:700;}:root {--border-radius:var(--space-1);--input-border-width:2px;--alert-border-width:2px;}:root {--space-0-125:0.0625rem;--space-0-25:0.125rem;--space-0-5:0.25rem;--space-1:0.5rem;--space-1-5:0.75rem;--space-2:1rem;--space-3:1.5rem;--space-4:2rem;--space-5:2.5rem;--space-6:3rem;--space-7:3.5rem;--space-8:4rem;--space-9:4.5rem;--space-10:5rem;}:root {--rpf-button-primary-background-color:var(--rpf-navy-800);--rpf-button-primary-background-color-hover:var(--rpf-navy-900);--rpf-button-primary-background-color-active:var(--rpf-navy-600);--rpf-button-primary-background-color-disabled:var(--rpf-grey-600);--rpf-button-primary-text-color:var(--rpf-white);--rpf-button-border-radius:var(--border-radius);--rpf-button-lg-height:48px;--rpf-button-sm-height:32px;--rpf-button-min-target-size:44px;}.rpf-button {all:unset;align-items:center;color:var(--rpf-button-primary-text-color);cursor:pointer;display:flex;font-size:var(--font-size-1-5);font-weight:var(--font-weight-bold);gap:var(--space-1);min-height:calc(var(--rpf-button-lg-height) - var(--space-1) - var(--space-1));padding:var(--space-1) var(--space-2);position:relative;text-align:center;text-decoration:none;transform:scale(1);width:fit-content;}.rpf-button::before {background-color:var(--rpf-button-primary-background-color);border-color:var(--rpf-button-primary-background-color);border-radius:var(--rpf-button-border-radius);border-style:solid;border-width:2px;content:"";display:block;inset:0;position:absolute;z-index:-1;}.rpf-button:hover::before {background-color:var(--rpf-button-primary-background-color-hover);border-color:var(--rpf-button-primary-background-color-hover);}.rpf-button:active::before {background-color:var(--rpf-button-primary-background-color-active);border-color:var(--rpf-button-primary-background-color-active);}.rpf-button:focus-visible::before {outline:3px solid var(--rpf-brand-raspberry);}.rpf-button:disabled, .rpf-button--disabled {cursor:default;}.rpf-button:disabled:hover::before, .rpf-button:disabled::before, .rpf-button--disabled:hover::before, .rpf-button--disabled::before {border-color:var(--rpf-button-primary-background-color-disabled);background-color:var(--rpf-button-primary-background-color-disabled);}.rpf-button--secondary {color:var(--rpf-button-primary-background-color);}.rpf-button--secondary::before {background-color:var(--rpf-button-primary-text-color);}.rpf-button--secondary:hover {color:var(--rpf-button-primary-background-color-hover);}.rpf-button--secondary:hover::before {background-color:var(--rpf-button-primary-text-color);border-color:var(--rpf-button-primary-background-color-hover);}.rpf-button--secondary:active {color:var(--rpf-button-primary-background-color-active);}.rpf-button--secondary:active::before {background-color:var(--rpf-button-primary-text-color);border-color:var(--rpf-button-primary-background-color-active);}.rpf-button--secondary:disabled, .rpf-button--secondary.rpf-button--disabled {color:var(--rpf-button-primary-background-color-disabled);}.rpf-button--secondary:disabled:hover::before, .rpf-button--secondary:disabled:before, .rpf-button--secondary.rpf-button--disabled:hover::before, .rpf-button--secondary.rpf-button--disabled:before {background-color:var(--rpf-button-primary-text-color);border-color:var(--rpf-button-primary-background-color-disabled);}.rpf-button--tertiary {color:var(--rpf-button-primary-background-color);}.rpf-button--tertiary::before {background-color:transparent;border-color:transparent;}.rpf-button--tertiary:hover {color:var(--rpf-button-primary-background-color-hover);}.rpf-button--tertiary:hover::before {background-color:transparent;border-color:transparent;}.rpf-button--tertiary:active {color:var(--rpf-button-primary-background-color-active);}.rpf-button--tertiary:active::before {background-color:transparent;}.rpf-button--tertiary:disabled, .rpf-button--tertiary.rpf-button--disabled {color:var(--rpf-button-primary-background-color-disabled);}.rpf-button--tertiary:disabled:hover::before, .rpf-button--tertiary:disabled::before, .rpf-button--tertiary.rpf-button--disabled:hover::before, .rpf-button--tertiary.rpf-button--disabled::before {background-color:transparent;border-color:transparent;}.rpf-button--icon-only {height:var(--rpf-button-lg-height);line-height:var(--rpf-button-lg-height);padding:0;text-align:center;width:var(--rpf-button-lg-height);}.rpf-button--icon-only .rpf-button__icon {margin:0 auto;}.rpf-button--sm {font-size:var(--font-size-1);min-height:calc(var(--rpf-button-min-target-size) - var(--space-1) - var(--space-1));padding:var(--space-1) var(--space-1);}.rpf-button--sm::before {inset:calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2) 0;}.rpf-button--sm.rpf-button--icon-only {height:var(--rpf-button-min-target-size);line-height:var(--rpf-button-min-target-size);padding:0;width:var(--rpf-button-min-target-size);}.rpf-button--sm.rpf-button--icon-only::before {inset:calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2);}.rpf-button--sm .material-symbols-sharp {font-size:20px;font-variation-settings:"OPSZ" 20;}</style><script data-cookieconsent="statistics">window.addEventListener("CookiebotOnConsentReady",(()=>{var t,e,n,s;window.Cookiebot.consent.statistics&&(t=window,e=document,t.hj=t.hj||function(){(t.hj.q=t.hj.q||[]).push(arguments)},t._hjSettings={hjid:3062209,hjsv:6},n=e.getElementsByTagName("head")[0],(s=e.createElement("script")).async=1,s.src="https://static.hotjar.com/c/hotjar-"+t._hjSettings.hjid+".js?sv="+t._hjSettings.hjsv,n.appendChild(s))}))</script><script async="" src="Serve%20your%20webpage%20Getting%20started%20with%20your%20Raspberry%20Pi%20Pico%20W%20Python%20Coding%20projects%20for%20kids%20and%20teens_fichiers/analytics.js" data-cookieconsent="statistics"></script><script id="Cookiebot" src="Serve%20your%20webpage%20Getting%20started%20with%20your%20Raspberry%20Pi%20Pico%20W%20Python%20Coding%20projects%20for%20kids%20and%20teens_fichiers/uc.js" data-cbid="1e9a6bdd-5870-4d54-8e5f-adcf6b5c5499" type="text/javascript"></script><style type="text/css" id="CookieConsentStateDisplayStyles">.cookieconsent-optin,.cookieconsent-optin-preferences,.cookieconsent-optin-statistics,.cookieconsent-optin-marketing{display:block;display:initial;}.cookieconsent-optout-preferences,.cookieconsent-optout-statistics,.cookieconsent-optout-marketing,.cookieconsent-optout{display:none;}</style><style>#CybotCookiebotDialogPoweredByText,a#CybotCookiebotDialogPoweredbyCybot{display:none !important;}</style><meta name="theme-color" content="#f5f6f9"><link rel="manifest" href="https://projects.raspberrypi.org/manifest.json"><meta name="google-site-verification" content="DbEQRCm57B8ygmlhiOw2FWj31XGVinad0t29v0TyAvY"><meta name="yandex-verification" content="187b0cd22bb82d98"><meta name="msvalidate.01" content="7C9CCDF0A68F98FA2958BF187FB3734F"><script defer="defer" src="Serve%20your%20webpage%20Getting%20started%20with%20your%20Raspberry%20Pi%20Pico%20W%20Python%20Coding%20projects%20for%20kids%20and%20teens_fichiers/main.js"></script><link href="blob:https://projects.raspberrypi.org/d4b144fb-d987-4d7d-b4e6-252af64f4ee7" rel="stylesheet"><style type="text/css">.c-badge {background-color:#fcf67f;border-color:#fcf67f;border-radius:5px;border-style:solid;border-width:0.3rem;color:#\32 22;display:inline;font-size:14px;font-weight:700;margin:0 10px;padding:2px;text-align:center;text-decoration:none;text-transform:uppercase;white-space:nowrap;vertical-align:middle;}.c-badge--secondary {background-color:transparent;border-color:#\39 99;color:#\39 99;}.c-badge--black {background-color:#\30 00;border-color:#\30 00;color:#f5f6f9;}.c-badge--white {background-color:#fff;border-color:#fff;color:#\32 22;}.c-badge--brand-raspberry-pi-red {background-color:#c51d4a;border-color:#c51d4a;color:#f5f6f9;}.c-badge--brand-raspberry-pi-green {background-color:#\36 ac146;border-color:#\36 ac146;color:#\32 22;}.c-badge--primary-yellow {background-color:#ffb12a;border-color:#ffb12a;color:#\32 22;}.c-badge--primary-orange {background-color:#f68e3b;border-color:#f68e3b;color:#\32 22;}.c-badge--primary-red {background-color:#f3524f;border-color:#f3524f;color:#\32 22;}.c-badge--primary-violet {background-color:#a76fba;border-color:#a76fba;color:#\32 22;}.c-badge--primary-navy {background-color:#\30 04881;border-color:#\30 04881;color:#f5f6f9;}.c-badge--primary-blue {background-color:#\34 1a6c4;border-color:#\34 1a6c4;color:#\32 22;}.c-badge--primary-turquoise {background-color:#\31 0aeb0;border-color:#\31 0aeb0;color:#f5f6f9;}.c-badge--primary-green {background-color:#\35 3ce63;border-color:#\35 3ce63;color:#\32 22;}.c-badge--secondary-yellow {background-color:#fddd42;border-color:#fddd42;color:#\32 22;}.c-badge--secondary-orange {background-color:#ffc869;border-color:#ffc869;color:#\32 22;}.c-badge--secondary-red {background-color:#f68583;border-color:#f68583;color:#\32 22;}.c-badge--secondary-violet {background-color:#c29acf;border-color:#c29acf;color:#\32 22;}.c-badge--secondary-navy {background-color:#\34 c7fa7;border-color:#\34 c7fa7;color:#f5f6f9;}.c-badge--secondary-blue {background-color:#\38 7dcf6;border-color:#\38 7dcf6;color:#\32 22;}.c-badge--secondary-turquoise {background-color:#\35 8c7c8;border-color:#\35 8c7c8;color:#\32 22;}.c-badge--secondary-green {background-color:#\38 7dd92;border-color:#\38 7dd92;color:#\32 22;}.c-badge--secondary-pink {background-color:#f68583;border-color:#f68583;color:#\32 22;}.c-badge--secondary-blue-dark {background-color:#\33 74e60;border-color:#\33 74e60;color:#f5f6f9;}.c-badge--ui-black {background-color:#\32 22;border-color:#\32 22;color:#f5f6f9;}.c-badge--ui-grey-dark {background-color:#\34 44;border-color:#\34 44;color:#f5f6f9;}.c-badge--ui-grey-medium {background-color:#\39 99;border-color:#\39 99;color:#\32 22;}.c-badge--ui-grey-light {background-color:#ccc;border-color:#ccc;color:#\32 22;}.c-badge--ui-grey-lightest {background-color:#eee;border-color:#eee;color:#\32 22;}.c-badge--ui-white {background-color:#f5f6f9;border-color:#f5f6f9;color:#\32 22;}.c-badge--ui-yellow {background-color:#fcf67f;border-color:#fcf67f;color:#\32 22;}</style><style type="text/css">.c-button, .c-button:visited {font-size:1.6rem;line-height:35px;appearance:none;background-color:#fcf67f;border-color:#fcf67f;border-radius:5px;border-style:solid;border-width:0.3rem;color:#\32 22;cursor:pointer;display:inline-block;font-weight:500;padding:0 20px;text-align:center;text-decoration:none;transition-duration:100ms;transition-property:background-color, border-color, color;transition-timing-function:ease-in-out;vertical-align:middle;}@media screen and (min-width: 768px) {.c-button, .c-button:visited {font-size:1.8rem;line-height:40px;}}.c-button:hover, .c-button:visited:hover {background-color:#\34 44;border-color:#\34 44;color:#fff;}.c-button--secondary, .c-button--secondary:visited {background-color:transparent;border-color:#\39 99;color:#\39 99;}.c-button--light-on-dark:hover, .c-button--light-on-dark:visited:hover {background-color:#fff;border-color:#fff;color:#\34 44;}.c-button--block {display:block;width:100%;}.c-button--disabled, .c-button--disabled:visited, .c-button[disabled=""], .c-button[disabled=""]:visited, .c-button[disabled="disabled"], .c-button[disabled="disabled"]:visited {background-color:#eee;border-color:#eee;color:#\39 99;pointer-events:none;}.c-button--black, .c-button--black:visited {background-color:#\30 00;border-color:#\30 00;color:#f5f6f9;}.c-button--white, .c-button--white:visited {background-color:#fff;border-color:#fff;color:#\32 22;}.c-button--brand-raspberry-pi-red, .c-button--brand-raspberry-pi-red:visited {background-color:#c51d4a;border-color:#c51d4a;color:#f5f6f9;}.c-button--brand-raspberry-pi-green, .c-button--brand-raspberry-pi-green:visited {background-color:#\36 ac146;border-color:#\36 ac146;color:#\32 22;}.c-button--primary-yellow, .c-button--primary-yellow:visited {background-color:#ffb12a;border-color:#ffb12a;color:#\32 22;}.c-button--primary-orange, .c-button--primary-orange:visited {background-color:#f68e3b;border-color:#f68e3b;color:#\32 22;}.c-button--primary-red, .c-button--primary-red:visited {background-color:#f3524f;border-color:#f3524f;color:#\32 22;}.c-button--primary-violet, .c-button--primary-violet:visited {background-color:#a76fba;border-color:#a76fba;color:#\32 22;}.c-button--primary-navy, .c-button--primary-navy:visited {background-color:#\30 04881;border-color:#\30 04881;color:#f5f6f9;}.c-button--primary-blue, .c-button--primary-blue:visited {background-color:#\34 1a6c4;border-color:#\34 1a6c4;color:#\32 22;}.c-button--primary-turquoise, .c-button--primary-turquoise:visited {background-color:#\31 0aeb0;border-color:#\31 0aeb0;color:#f5f6f9;}.c-button--primary-green, .c-button--primary-green:visited {background-color:#\35 3ce63;border-color:#\35 3ce63;color:#\32 22;}.c-button--secondary-yellow, .c-button--secondary-yellow:visited {background-color:#fddd42;border-color:#fddd42;color:#\32 22;}.c-button--secondary-orange, .c-button--secondary-orange:visited {background-color:#ffc869;border-color:#ffc869;color:#\32 22;}.c-button--secondary-red, .c-button--secondary-red:visited {background-color:#f68583;border-color:#f68583;color:#\32 22;}.c-button--secondary-violet, .c-button--secondary-violet:visited {background-color:#c29acf;border-color:#c29acf;color:#\32 22;}.c-button--secondary-navy, .c-button--secondary-navy:visited {background-color:#\34 c7fa7;border-color:#\34 c7fa7;color:#f5f6f9;}.c-button--secondary-blue, .c-button--secondary-blue:visited {background-color:#\38 7dcf6;border-color:#\38 7dcf6;color:#\32 22;}.c-button--secondary-turquoise, .c-button--secondary-turquoise:visited {background-color:#\35 8c7c8;border-color:#\35 8c7c8;color:#\32 22;}.c-button--secondary-green, .c-button--secondary-green:visited {background-color:#\38 7dd92;border-color:#\38 7dd92;color:#\32 22;}.c-button--secondary-pink, .c-button--secondary-pink:visited {background-color:#f68583;border-color:#f68583;color:#\32 22;}.c-button--secondary-blue-dark, .c-button--secondary-blue-dark:visited {background-color:#\33 74e60;border-color:#\33 74e60;color:#f5f6f9;}.c-button--ui-black, .c-button--ui-black:visited {background-color:#\32 22;border-color:#\32 22;color:#f5f6f9;}.c-button--ui-grey-dark, .c-button--ui-grey-dark:visited {background-color:#\34 44;border-color:#\34 44;color:#f5f6f9;}.c-button--ui-grey-medium, .c-button--ui-grey-medium:visited {background-color:#\39 99;border-color:#\39 99;color:#\32 22;}.c-button--ui-grey-light, .c-button--ui-grey-light:visited {background-color:#ccc;border-color:#ccc;color:#\32 22;}.c-button--ui-grey-lightest, .c-button--ui-grey-lightest:visited {background-color:#eee;border-color:#eee;color:#\32 22;}.c-button--ui-white, .c-button--ui-white:visited {background-color:#f5f6f9;border-color:#f5f6f9;color:#\32 22;}.c-button--ui-yellow, .c-button--ui-yellow:visited {background-color:#fcf67f;border-color:#fcf67f;color:#\32 22;}</style><style type="text/css">.c-link {color:#\30 04881;cursor:pointer;font-weight:500;text-decoration:underline;text-decoration-skip-ink:auto;transition-duration:100ms;transition-property:color;transition-timing-function:ease-in-out;}.c-link:hover, .c-link:hover:visited {color:#\32 22;}.c-link:visited {color:#a76fba;}.c-link--light-on-dark {color:#eee;}.c-link--light-on-dark:hover, .c-link--light-on-dark:hover:visited {color:#fff;}.c-link--light-on-dark:visited {color:#eee;}.c-link--rpi {color:#c51d4a;font-weight:300;}.c-link--rpi:visited {color:#c51d4a;font-weight:300;}</style><style type="text/css">.c-card {background-color:#fff;border-radius:5px;box-shadow:0 0 0.3rem 0 rgba(0, 0, 0, 0.25);display:block;overflow:hidden;transition:box-shadow 100ms ease-in-out;width:100%;}.c-card__image {width:100%;}.c-card__content {padding:20px;}.c-card__heading {font-size:1.6rem;line-height:1.5;font-weight:500;margin-bottom:1em;display:block;margin-bottom:1em;}@media screen and (min-width: 768px) {.c-card__heading {font-size:1.8rem;line-height:1.5;}}.c-card--link, .c-card--link:active, .c-card--link:hover, .c-card--link:link, .c-card--link:visited {color:#\32 22;cursor:pointer;text-decoration:none;}</style><style type="text/css">.c-figure {margin-bottom:1em;text-align:center;}.c-figure__caption {font-size:1.4rem;line-height:1.5;background-color:#\34 44;color:#f5f6f9;display:block;}@media screen and (min-width: 768px) {.c-figure__caption {font-size:1.6rem;line-height:1.5;}}.c-figure__image {display:block;margin:0 auto;max-width:100%;}</style><style type="text/css">.c-hr {background-color:#eee;border-width:0;height:0.2rem;margin:0 0 40px;}</style><style type="text/css">.c-light-on-dark {color:#eee;}</style><style type="text/css">.c-pagination {margin-bottom:20px;text-align:center;}.c-pagination__label {font-size:1.6rem;line-height:40px;color:#\39 99;display:inline-block;font-weight:500;padding:0 15px;vertical-align:top;}@media screen and (min-width: 768px) {.c-pagination__label {font-size:1.8rem;line-height:40px;}}.c-pagination__link {background-color:#f5f6f9;background-position:center center;background-repeat:no-repeat;background-size:15px 15px;border-color:#\39 99;border-radius:100%;border-style:solid;border-width:0.2rem;cursor:pointer;display:inline-block;height:40px;transition-duration:150ms;transition-property:background-color, border-color;transition-timing-function:ease-in-out;vertical-align:top;width:40px;}.c-pagination__link:hover {background-color:#\39 99;}.c-pagination__link--disabled {background-color:#ccc;border-color:#ccc;pointer-events:none;}.c-pagination__link--next {background-image:url("data\:image\/svg\+xml\;base64\,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTdweCIgaGVpZ2h0PSIyN3B4IiB2aWV3Qm94PSIwIDAgMTcgMjciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI\+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ3LjEgKDQ1NDIyKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5JY29ucy9DaGV2cm9uL0dyZXk8L3RpdGxlPgogICAgPGRlc2M\+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M\+CiAgICA8ZGVmcz48L2RlZnM\+CiAgICA8ZyBpZD0iQnV0dG9ucyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI\+CiAgICAgICAgPGcgaWQ9IkJ1dHRvbnMvQ2lyY2xlL1NlY29uZGFyeSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3LjAwMDAwMCwgLTIxLjAwMDAwMCkiIGZpbGw9IiM5OTk5OTkiPgogICAgICAgICAgICA8ZyBpZD0iSWNvbnMvQ2hldnJvbi9MZWZ0L0dyZXktQ29weS0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMC4wMDAwMDAsIDIwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTQuODQ4MDE3OTgsMTkuNDM2MjUzMyBMNC44NDgwMTc5OCw2LjQ5NTA3NjggQzQuODQ4MDE3OTgsNS4xOTU1ODMyNyAzLjc5NDU3MDMzLDQuMTQyMTM1NjIgMi40OTUwNzY4LDQuMTQyMTM1NjIgTDIuNDk1MDc2OCw0LjE0MjEzNTYyIEwyLjQ5NTA3NjgsNC4xNDIxMzU2MiBDMS4xOTU1ODMyNyw0LjE0MjEzNTYyIDAuMTQyMTM1NjI0LDUuMTk1NTgzMjcgMC4xNDIxMzU2MjQsNi40OTUwNzY4IEwwLjE0MjEzNTYyNCw2LjQ5NTA3NjggTDAuMTQyMTM1NjI0LDIxLjc4OTE5NDQgQzAuMTQyMTM1NjI0LDIyLjQzODk0MTIgMC40MDU0OTc1MzYsMjMuMDI3MTc2NSAwLjgzMTI5NjEzOSwyMy40NTI5NzUxIEMxLjI1NzA5NDc0LDIzLjg3ODc3MzcgMS44NDUzMzAwNCwyNC4xNDIxMzU2IDIuNDk1MDc2OCwyNC4xNDIxMzU2IEwxNy43ODkxOTQ0LDI0LjE0MjEzNTYgQzE5LjA4ODY4OCwyNC4xNDIxMzU2IDIwLjE0MjEzNTYsMjMuMDg4Njg4IDIwLjE0MjEzNTYsMjEuNzg5MTk0NCBDMjAuMTQyMTM1NiwyMC40ODk3MDA5IDE5LjA4ODY4OCwxOS40MzYyNTMzIDE3Ljc4OTE5NDQsMTkuNDM2MjUzMyBMNC44NDgwMTc5OCwxOS40MzYyNTMzIFoiIGlkPSJDb21iaW5lZC1TaGFwZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMTQyMTM2LCAxNC4xNDIxMzYpIHNjYWxlKC0xLCAxKSByb3RhdGUoLTMxNS4wMDAwMDApIHRyYW5zbGF0ZSgtMTAuMTQyMTM2LCAtMTQuMTQyMTM2KSAiPjwvcGF0aD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc\+");}.c-pagination__link--next:hover {background-image:url("data\:image\/svg\+xml\;base64\,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTdweCIgaGVpZ2h0PSIyN3B4IiB2aWV3Qm94PSIwIDAgMTcgMjciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI\+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ3LjEgKDQ1NDIyKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5JY29ucy9DaGV2cm9uL0dyZXk8L3RpdGxlPgogICAgPGRlc2M\+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M\+CiAgICA8ZGVmcz48L2RlZnM\+CiAgICA8ZyBpZD0iQnV0dG9ucyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI\+CiAgICAgICAgPGcgaWQ9IkJ1dHRvbnMvQ2lyY2xlL1NlY29uZGFyeS1ob3ZlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3LjAwMDAwMCwgLTIxLjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyBpZD0iSWNvbnMvQ2hldnJvbi9MZWZ0L0xpZ2h0LUNvcHktMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjAuMDAwMDAwLCAyMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik00Ljg0ODAxNzk4LDE5LjQzNjI1MzMgTDQuODQ4MDE3OTgsNi40OTUwNzY4IEM0Ljg0ODAxNzk4LDUuMTk1NTgzMjcgMy43OTQ1NzAzMyw0LjE0MjEzNTYyIDIuNDk1MDc2OCw0LjE0MjEzNTYyIEwyLjQ5NTA3NjgsNC4xNDIxMzU2MiBMMi40OTUwNzY4LDQuMTQyMTM1NjIgQzEuMTk1NTgzMjcsNC4xNDIxMzU2MiAwLjE0MjEzNTYyNCw1LjE5NTU4MzI3IDAuMTQyMTM1NjI0LDYuNDk1MDc2OCBMMC4xNDIxMzU2MjQsNi40OTUwNzY4IEwwLjE0MjEzNTYyNCwyMS43ODkxOTQ0IEMwLjE0MjEzNTYyNCwyMi40Mzg5NDEyIDAuNDA1NDk3NTM2LDIzLjAyNzE3NjUgMC44MzEyOTYxMzksMjMuNDUyOTc1MSBDMS4yNTcwOTQ3NCwyMy44Nzg3NzM3IDEuODQ1MzMwMDQsMjQuMTQyMTM1NiAyLjQ5NTA3NjgsMjQuMTQyMTM1NiBMMTcuNzg5MTk0NCwyNC4xNDIxMzU2IEMxOS4wODg2ODgsMjQuMTQyMTM1NiAyMC4xNDIxMzU2LDIzLjA4ODY4OCAyMC4xNDIxMzU2LDIxLjc4OTE5NDQgQzIwLjE0MjEzNTYsMjAuNDg5NzAwOSAxOS4wODg2ODgsMTkuNDM2MjUzMyAxNy43ODkxOTQ0LDE5LjQzNjI1MzMgTDQuODQ4MDE3OTgsMTkuNDM2MjUzMyBaIiBpZD0iQ29tYmluZWQtU2hhcGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwLjE0MjEzNiwgMTQuMTQyMTM2KSBzY2FsZSgtMSwgMSkgcm90YXRlKC0zMTUuMDAwMDAwKSB0cmFuc2xhdGUoLTEwLjE0MjEzNiwgLTE0LjE0MjEzNikgIj48L3BhdGg\+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c\+CiAgICA8L2c\+Cjwvc3ZnPg\=\=");}.c-pagination__link--next:disabled {background-image:url("data\:image\/svg\+xml\;base64\,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTdweCIgaGVpZ2h0PSIyN3B4IiB2aWV3Qm94PSIwIDAgMTcgMjciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI\+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ3LjEgKDQ1NDIyKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5JY29ucy9DaGV2cm9uL0dyZXk8L3RpdGxlPgogICAgPGRlc2M\+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M\+CiAgICA8ZGVmcz48L2RlZnM\+CiAgICA8ZyBpZD0iQnV0dG9ucyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI\+CiAgICAgICAgPGcgaWQ9IkJ1dHRvbnMvQ2lyY2xlL1RlcnRpYXJ5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjcuMDAwMDAwLCAtMjEuMDAwMDAwKSIgZmlsbD0iI0NDQ0NDQyI\+CiAgICAgICAgICAgIDxnIGlkPSJJY29ucy9DaGV2cm9uL0xlZnQvTGlnaHQtZ3JleS1Db3B5LTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwLjAwMDAwMCwgMjAuMDAwMDAwKSI\+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNC44NDgwMTc5OCwxOS40MzYyNTMzIEw0Ljg0ODAxNzk4LDYuNDk1MDc2OCBDNC44NDgwMTc5OCw1LjE5NTU4MzI3IDMuNzk0NTcwMzMsNC4xNDIxMzU2MiAyLjQ5NTA3NjgsNC4xNDIxMzU2MiBMMi40OTUwNzY4LDQuMTQyMTM1NjIgTDIuNDk1MDc2OCw0LjE0MjEzNTYyIEMxLjE5NTU4MzI3LDQuMTQyMTM1NjIgMC4xNDIxMzU2MjQsNS4xOTU1ODMyNyAwLjE0MjEzNTYyNCw2LjQ5NTA3NjggTDAuMTQyMTM1NjI0LDYuNDk1MDc2OCBMMC4xNDIxMzU2MjQsMjEuNzg5MTk0NCBDMC4xNDIxMzU2MjQsMjIuNDM4OTQxMiAwLjQwNTQ5NzUzNiwyMy4wMjcxNzY1IDAuODMxMjk2MTM5LDIzLjQ1Mjk3NTEgQzEuMjU3MDk0NzQsMjMuODc4NzczNyAxLjg0NTMzMDA0LDI0LjE0MjEzNTYgMi40OTUwNzY4LDI0LjE0MjEzNTYgTDE3Ljc4OTE5NDQsMjQuMTQyMTM1NiBDMTkuMDg4Njg4LDI0LjE0MjEzNTYgMjAuMTQyMTM1NiwyMy4wODg2ODggMjAuMTQyMTM1NiwyMS43ODkxOTQ0IEMyMC4xNDIxMzU2LDIwLjQ4OTcwMDkgMTkuMDg4Njg4LDE5LjQzNjI1MzMgMTcuNzg5MTk0NCwxOS40MzYyNTMzIEw0Ljg0ODAxNzk4LDE5LjQzNjI1MzMgWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMC4xNDIxMzYsIDE0LjE0MjEzNikgc2NhbGUoLTEsIDEpIHJvdGF0ZSgtMzE1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMC4xNDIxMzYsIC0xNC4xNDIxMzYpICI\+PC9wYXRoPgogICAgICAgICAgICA8L2c\+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4\=");}.c-pagination__link--prev {background-image:url("data\:image\/svg\+xml\;base64\,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIyN3B4IiB2aWV3Qm94PSIwIDAgMTYgMjciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI\+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ3LjEgKDQ1NDIyKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5JY29ucy9DaGV2cm9uL0dyZXk8L3RpdGxlPgogICAgPGRlc2M\+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M\+CiAgICA8ZGVmcz48L2RlZnM\+CiAgICA8ZyBpZD0iQnV0dG9ucyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI\+CiAgICAgICAgPGcgaWQ9IkJ1dHRvbnMvQ2lyY2xlL1NlY29uZGFyeSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LjAwMDAwMCwgLTIxLjAwMDAwMCkiIGZpbGw9IiM5OTk5OTkiPgogICAgICAgICAgICA8ZyBpZD0iSWNvbnMvQ2hldnJvbi9MZWZ0L0dyZXkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwLjAwMDAwMCwgMjAuMDAwMDAwKSI\+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTIuODQ4MDE4LDE5LjQzNjI1MzMgTDEyLjg0ODAxOCw2LjQ5NTA3NjggQzEyLjg0ODAxOCw1LjE5NTU4MzI3IDExLjc5NDU3MDMsNC4xNDIxMzU2MiAxMC40OTUwNzY4LDQuMTQyMTM1NjIgTDEwLjQ5NTA3NjgsNC4xNDIxMzU2MiBMMTAuNDk1MDc2OCw0LjE0MjEzNTYyIEM5LjE5NTU4MzI3LDQuMTQyMTM1NjIgOC4xNDIxMzU2Miw1LjE5NTU4MzI3IDguMTQyMTM1NjIsNi40OTUwNzY4IEw4LjE0MjEzNTYyLDYuNDk1MDc2OCBMOC4xNDIxMzU2MiwyMS43ODkxOTQ0IEM4LjE0MjEzNTYyLDIyLjQzODk0MTIgOC40MDU0OTc1NCwyMy4wMjcxNzY1IDguODMxMjk2MTQsMjMuNDUyOTc1MSBDOS4yNTcwOTQ3NCwyMy44Nzg3NzM3IDkuODQ1MzMwMDQsMjQuMTQyMTM1NiAxMC40OTUwNzY4LDI0LjE0MjEzNTYgTDI1Ljc4OTE5NDQsMjQuMTQyMTM1NiBDMjcuMDg4Njg4LDI0LjE0MjEzNTYgMjguMTQyMTM1NiwyMy4wODg2ODggMjguMTQyMTM1NiwyMS43ODkxOTQ0IEMyOC4xNDIxMzU2LDIwLjQ4OTcwMDkgMjcuMDg4Njg4LDE5LjQzNjI1MzMgMjUuNzg5MTk0NCwxOS40MzYyNTMzIEwxMi44NDgwMTgsMTkuNDM2MjUzMyBaIiBpZD0iQ29tYmluZWQtU2hhcGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4LjE0MjEzNiwgMTQuMTQyMTM2KSByb3RhdGUoLTMxNS4wMDAwMDApIHRyYW5zbGF0ZSgtMTguMTQyMTM2LCAtMTQuMTQyMTM2KSAiPjwvcGF0aD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc\+");}.c-pagination__link--prev:hover {background-image:url("data\:image\/svg\+xml\;base64\,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIyN3B4IiB2aWV3Qm94PSIwIDAgMTYgMjciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI\+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ3LjEgKDQ1NDIyKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5JY29ucy9DaGV2cm9uL0dyZXk8L3RpdGxlPgogICAgPGRlc2M\+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M\+CiAgICA8ZGVmcz48L2RlZnM\+CiAgICA8ZyBpZD0iQnV0dG9ucyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI\+CiAgICAgICAgPGcgaWQ9IkJ1dHRvbnMvQ2lyY2xlL1NlY29uZGFyeS1ob3ZlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LjAwMDAwMCwgLTIxLjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyBpZD0iSWNvbnMvQ2hldnJvbi9MZWZ0L0xpZ2h0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMC4wMDAwMDAsIDIwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTEyLjg0ODAxOCwxOS40MzYyNTMzIEwxMi44NDgwMTgsNi40OTUwNzY4IEMxMi44NDgwMTgsNS4xOTU1ODMyNyAxMS43OTQ1NzAzLDQuMTQyMTM1NjIgMTAuNDk1MDc2OCw0LjE0MjEzNTYyIEwxMC40OTUwNzY4LDQuMTQyMTM1NjIgTDEwLjQ5NTA3NjgsNC4xNDIxMzU2MiBDOS4xOTU1ODMyNyw0LjE0MjEzNTYyIDguMTQyMTM1NjIsNS4xOTU1ODMyNyA4LjE0MjEzNTYyLDYuNDk1MDc2OCBMOC4xNDIxMzU2Miw2LjQ5NTA3NjggTDguMTQyMTM1NjIsMjEuNzg5MTk0NCBDOC4xNDIxMzU2MiwyMi40Mzg5NDEyIDguNDA1NDk3NTQsMjMuMDI3MTc2NSA4LjgzMTI5NjE0LDIzLjQ1Mjk3NTEgQzkuMjU3MDk0NzQsMjMuODc4NzczNyA5Ljg0NTMzMDA0LDI0LjE0MjEzNTYgMTAuNDk1MDc2OCwyNC4xNDIxMzU2IEwyNS43ODkxOTQ0LDI0LjE0MjEzNTYgQzI3LjA4ODY4OCwyNC4xNDIxMzU2IDI4LjE0MjEzNTYsMjMuMDg4Njg4IDI4LjE0MjEzNTYsMjEuNzg5MTk0NCBDMjguMTQyMTM1NiwyMC40ODk3MDA5IDI3LjA4ODY4OCwxOS40MzYyNTMzIDI1Ljc4OTE5NDQsMTkuNDM2MjUzMyBMMTIuODQ4MDE4LDE5LjQzNjI1MzMgWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOC4xNDIxMzYsIDE0LjE0MjEzNikgcm90YXRlKC0zMTUuMDAwMDAwKSB0cmFuc2xhdGUoLTE4LjE0MjEzNiwgLTE0LjE0MjEzNikgIj48L3BhdGg\+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c\+CiAgICA8L2c\+Cjwvc3ZnPg\=\=");}.c-pagination__link--prev:disabled {background-image:url("data\:image\/svg\+xml\;base64\,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIyN3B4IiB2aWV3Qm94PSIwIDAgMTYgMjciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI\+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ3LjEgKDQ1NDIyKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5JY29ucy9DaGV2cm9uL0dyZXk8L3RpdGxlPgogICAgPGRlc2M\+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M\+CiAgICA8ZGVmcz48L2RlZnM\+CiAgICA8ZyBpZD0iQnV0dG9ucyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI\+CiAgICAgICAgPGcgaWQ9IkJ1dHRvbnMvQ2lyY2xlL1RlcnRpYXJ5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUuMDAwMDAwLCAtMjEuMDAwMDAwKSIgZmlsbD0iI0NDQ0NDQyI\+CiAgICAgICAgICAgIDxnIGlkPSJJY29ucy9DaGV2cm9uL0xlZnQvTGlnaHQtZ3JleSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjAuMDAwMDAwLCAyMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMi44NDgwMTgsMTkuNDM2MjUzMyBMMTIuODQ4MDE4LDYuNDk1MDc2OCBDMTIuODQ4MDE4LDUuMTk1NTgzMjcgMTEuNzk0NTcwMyw0LjE0MjEzNTYyIDEwLjQ5NTA3NjgsNC4xNDIxMzU2MiBMMTAuNDk1MDc2OCw0LjE0MjEzNTYyIEwxMC40OTUwNzY4LDQuMTQyMTM1NjIgQzkuMTk1NTgzMjcsNC4xNDIxMzU2MiA4LjE0MjEzNTYyLDUuMTk1NTgzMjcgOC4xNDIxMzU2Miw2LjQ5NTA3NjggTDguMTQyMTM1NjIsNi40OTUwNzY4IEw4LjE0MjEzNTYyLDIxLjc4OTE5NDQgQzguMTQyMTM1NjIsMjIuNDM4OTQxMiA4LjQwNTQ5NzU0LDIzLjAyNzE3NjUgOC44MzEyOTYxNCwyMy40NTI5NzUxIEM5LjI1NzA5NDc0LDIzLjg3ODc3MzcgOS44NDUzMzAwNCwyNC4xNDIxMzU2IDEwLjQ5NTA3NjgsMjQuMTQyMTM1NiBMMjUuNzg5MTk0NCwyNC4xNDIxMzU2IEMyNy4wODg2ODgsMjQuMTQyMTM1NiAyOC4xNDIxMzU2LDIzLjA4ODY4OCAyOC4xNDIxMzU2LDIxLjc4OTE5NDQgQzI4LjE0MjEzNTYsMjAuNDg5NzAwOSAyNy4wODg2ODgsMTkuNDM2MjUzMyAyNS43ODkxOTQ0LDE5LjQzNjI1MzMgTDEyLjg0ODAxOCwxOS40MzYyNTMzIFoiIGlkPSJDb21iaW5lZC1TaGFwZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTguMTQyMTM2LCAxNC4xNDIxMzYpIHJvdGF0ZSgtMzE1LjAwMDAwMCkgdHJhbnNsYXRlKC0xOC4xNDIxMzYsIC0xNC4xNDIxMzYpICI\+PC9wYXRoPgogICAgICAgICAgICA8L2c\+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4\=");}</style><style type="text/css">.c-panel {background-color:#fff;border-radius:5px;box-shadow:0 0 0.3rem 0 rgba(0, 0, 0, 0.25);padding:10px;}</style><style type="text/css">.c-slice {background-attachment:scroll;background-color:#f5f6f9;background-position:center center;background-repeat:no-repeat;padding:25px 0;}@media screen and (min-width: 768px) {.c-slice {padding:50px 0;}}.c-slice--white {background-color:#fff;border-color:#ccc;border-style:solid;border-width:0.1rem 0 0;box-shadow:0 0.1rem 0.3rem -0.1rem rgba(0, 0, 0, 0.25);}</style><style type="text/css">.c-type-base {font-size:1.6rem;line-height:1.5;font-weight:300;margin-bottom:1em;}@media screen and (min-width: 768px) {.c-type-base {font-size:1.8rem;line-height:1.5;}}</style><style type="text/css">.c-type-caption {font-size:1.4rem;line-height:1.5;font-weight:300;margin-bottom:1em;}@media screen and (min-width: 768px) {.c-type-caption {font-size:1.6rem;line-height:1.5;}}</style><style type="text/css">.c-type-display {font-size:2rem;line-height:1.5;font-weight:500;margin-bottom:1em;}@media screen and (min-width: 768px) {.c-type-display {font-size:2.8rem;line-height:1.5;}}</style><style type="text/css">.c-type-display-large {font-size:2.4rem;line-height:1.5;font-weight:700;margin-bottom:1em;}@media screen and (min-width: 768px) {.c-type-display-large {font-size:3.6rem;line-height:1.5;}}</style><style type="text/css">.c-type-heading {font-size:2rem;line-height:1.5;font-weight:500;margin-bottom:1em;}@media screen and (min-width: 768px) {.c-type-heading {font-size:2.2rem;line-height:1.5;}}</style><style type="text/css">.c-type-sub-heading {font-size:1.6rem;line-height:1.5;font-weight:500;margin-bottom:1em;}@media screen and (min-width: 768px) {.c-type-sub-heading {font-size:1.8rem;line-height:1.5;}}</style><style type="text/css">.c-wysiwyg a {color:#\30 04881;cursor:pointer;font-weight:500;text-decoration:underline;text-decoration-skip-ink:auto;transition-duration:100ms;transition-property:color;transition-timing-function:ease-in-out;}.c-wysiwyg a:hover, .c-wysiwyg a:hover:visited {color:#\32 22;}.c-wysiwyg a:visited {color:#a76fba;}.c-wysiwyg h1 {font-size:2.4rem;line-height:1.5;font-weight:700;margin-bottom:1em;}@media screen and (min-width: 768px) {.c-wysiwyg h1 {font-size:3.6rem;line-height:1.5;}}.c-wysiwyg h2 {font-size:2rem;line-height:1.5;font-weight:500;margin-bottom:1em;}@media screen and (min-width: 768px) {.c-wysiwyg h2 {font-size:2.8rem;line-height:1.5;}}.c-wysiwyg h3 {font-size:2rem;line-height:1.5;font-weight:500;margin-bottom:1em;}@media screen and (min-width: 768px) {.c-wysiwyg h3 {font-size:2.2rem;line-height:1.5;}}.c-wysiwyg h4 {font-size:1.6rem;line-height:1.5;font-weight:500;margin-bottom:1em;}@media screen and (min-width: 768px) {.c-wysiwyg h4 {font-size:1.8rem;line-height:1.5;}}.c-wysiwyg p {font-size:1.6rem;line-height:1.5;font-weight:300;margin-bottom:1em;}@media screen and (min-width: 768px) {.c-wysiwyg p {font-size:1.8rem;line-height:1.5;}}.c-wysiwyg ul {font-size:1.6rem;line-height:1.5;font-weight:300;margin-bottom:1em;margin-left:20px;}@media screen and (min-width: 768px) {.c-wysiwyg ul {font-size:1.8rem;line-height:1.5;}}.c-wysiwyg ol {font-size:1.6rem;line-height:1.5;font-weight:300;margin-bottom:1em;margin-left:20px;}@media screen and (min-width: 768px) {.c-wysiwyg ol {font-size:1.8rem;line-height:1.5;}}.c-wysiwyg blockquote {font-size:1.6rem;line-height:1.5;font-weight:300;margin-bottom:1em;border-left-color:#ccc;border-style:solid;border-width:0 0 0 2px;margin-bottom:2rem;padding:2rem 2rem 2rem 3rem;}@media screen and (min-width: 768px) {.c-wysiwyg blockquote {font-size:1.8rem;line-height:1.5;}}.c-wysiwyg--rpi a {color:#c51d4a;font-weight:300;}.c-wysiwyg--rpi a:visited {color:#c51d4a;font-weight:300;}.c-wysiwyg--light-on-dark a {color:#eee;}.c-wysiwyg--light-on-dark a:hover, .c-wysiwyg--light-on-dark a:hover:visited {color:#fff;}.c-wysiwyg--light-on-dark a:visited {color:#eee;}</style><link rel="stylesheet" type="text/css" href="blob:https://projects.raspberrypi.org/c9b946e6-e73f-4346-8fae-eade9743b090"><link rel="stylesheet" type="text/css" href="blob:https://projects.raspberrypi.org/eb700824-cf16-47a1-b675-639b5728f0e1"><link rel="stylesheet" type="text/css" href="blob:https://projects.raspberrypi.org/1891c905-f500-4b61-b213-20b53865b70e"><style><![CDATA[
|
||
.sb-label {
|
||
font-family: Lucida Grande, Verdana, Arial, DejaVu Sans, sans-serif;
|
||
font-weight: bold;
|
||
fill: #fff;
|
||
font-size: 10px;
|
||
word-spacing: +1px;
|
||
}
|
||
|
||
.sb-obsolete {
|
||
fill: #d42828;
|
||
}
|
||
.sb-motion {
|
||
fill: #4a6cd4;
|
||
}
|
||
.sb-looks {
|
||
fill: #8a55d7;
|
||
}
|
||
.sb-sound {
|
||
fill: #bb42c3;
|
||
}
|
||
.sb-pen {
|
||
fill: #0e9a6c;
|
||
}
|
||
.sb-events {
|
||
fill: #c88330;
|
||
}
|
||
.sb-control {
|
||
fill: #e1a91a;
|
||
}
|
||
.sb-sensing {
|
||
fill: #2ca5e2;
|
||
}
|
||
.sb-operators {
|
||
fill: #5cb712;
|
||
}
|
||
.sb-variables {
|
||
fill: #ee7d16;
|
||
}
|
||
.sb-list {
|
||
fill: #cc5b22;
|
||
}
|
||
.sb-custom {
|
||
fill: #632d99;
|
||
}
|
||
.sb-custom-arg {
|
||
fill: #5947b1;
|
||
}
|
||
.sb-extension {
|
||
fill: #4b4a60;
|
||
}
|
||
.sb-grey {
|
||
fill: #969696;
|
||
}
|
||
|
||
.sb-bevel {
|
||
filter: url(#bevelFilter);
|
||
}
|
||
|
||
.sb-input {
|
||
filter: url(#inputBevelFilter);
|
||
}
|
||
.sb-input-number,
|
||
.sb-input-string,
|
||
.sb-input-number-dropdown {
|
||
fill: #fff;
|
||
}
|
||
.sb-literal-number,
|
||
.sb-literal-string,
|
||
.sb-literal-number-dropdown,
|
||
.sb-literal-dropdown {
|
||
font-weight: normal;
|
||
font-size: 9px;
|
||
word-spacing: 0;
|
||
}
|
||
.sb-literal-number,
|
||
.sb-literal-string,
|
||
.sb-literal-number-dropdown {
|
||
fill: #000;
|
||
}
|
||
|
||
.sb-darker {
|
||
filter: url(#inputDarkFilter);
|
||
}
|
||
|
||
.sb-outline {
|
||
stroke: #fff;
|
||
stroke-opacity: 0.2;
|
||
stroke-width: 2;
|
||
fill: none;
|
||
}
|
||
|
||
.sb-define-hat-cap {
|
||
stroke: #632d99;
|
||
stroke-width: 1;
|
||
fill: #8e2ec2;
|
||
}
|
||
|
||
.sb-comment {
|
||
fill: #ffffa5;
|
||
stroke: #d0d1d2;
|
||
stroke-width: 1;
|
||
}
|
||
.sb-comment-line {
|
||
fill: #ffff80;
|
||
}
|
||
.sb-comment-label {
|
||
font-family: Helvetica, Arial, DejaVu Sans, sans-serif;
|
||
font-weight: bold;
|
||
fill: #5c5d5f;
|
||
word-spacing: 0;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.sb-diff {
|
||
fill: none;
|
||
stroke: #000;
|
||
}
|
||
.sb-diff-ins {
|
||
stroke-width: 2px;
|
||
}
|
||
.sb-diff-del {
|
||
stroke-width: 3px;
|
||
}
|
||
]]></style><style><![CDATA[
|
||
.sb3-label {
|
||
font: 500 12pt Helvetica Neue, Helvetica, sans-serif;
|
||
word-spacing: +1pt;
|
||
}
|
||
|
||
.sb3-literal-number,
|
||
.sb3-literal-string,
|
||
.sb3-literal-number-dropdown,
|
||
.sb3-literal-dropdown {
|
||
word-spacing: 0;
|
||
}
|
||
|
||
/* Note: comment colors are different from Scratch. */
|
||
|
||
.sb3-comment {
|
||
fill: #ffffa5;
|
||
stroke: #d0d1d2;
|
||
stroke-width: 1;
|
||
}
|
||
.sb3-comment-line {
|
||
fill: #ffff80;
|
||
}
|
||
.sb3-comment-label {
|
||
font: 400 12pt Helvetica Neue, Helvetica, sans-serif;
|
||
fill: #000;
|
||
word-spacing: 0;
|
||
}
|
||
|
||
.sb3-diff {
|
||
fill: none;
|
||
stroke: #000;
|
||
}
|
||
.sb3-diff-ins {
|
||
stroke-width: 2px;
|
||
}
|
||
.sb3-diff-del {
|
||
stroke-width: 3px;
|
||
}
|
||
|
||
|
||
svg .sb3-motion {
|
||
fill: #4c97ff;
|
||
stroke: #3373cc;
|
||
}
|
||
svg .sb3-motion-alt {
|
||
fill: #4280d7;
|
||
}
|
||
svg .sb3-motion-dark {
|
||
fill: #3373cc;
|
||
}
|
||
|
||
|
||
svg .sb3-looks {
|
||
fill: #9966ff;
|
||
stroke: #774dcb;
|
||
}
|
||
svg .sb3-looks-alt {
|
||
fill: #855cd6;
|
||
}
|
||
svg .sb3-looks-dark {
|
||
fill: #774dcb;
|
||
}
|
||
|
||
|
||
svg .sb3-sound {
|
||
fill: #cf63cf;
|
||
stroke: #bd42bd;
|
||
}
|
||
svg .sb3-sound-alt {
|
||
fill: #c94fc9;
|
||
}
|
||
svg .sb3-sound-dark {
|
||
fill: #bd42bd;
|
||
}
|
||
|
||
|
||
svg .sb3-control {
|
||
fill: #ffab19;
|
||
stroke: #cf8b17;
|
||
}
|
||
svg .sb3-control-alt {
|
||
fill: #ec9c13;
|
||
}
|
||
svg .sb3-control-dark {
|
||
fill: #cf8b17;
|
||
}
|
||
|
||
|
||
svg .sb3-events {
|
||
fill: #ffbf00;
|
||
stroke: #cc9900;
|
||
}
|
||
svg .sb3-events-alt {
|
||
fill: #e6ac00;
|
||
}
|
||
svg .sb3-events-dark {
|
||
fill: #cc9900;
|
||
}
|
||
|
||
|
||
svg .sb3-sensing {
|
||
fill: #5cb1d6;
|
||
stroke: #2e8eb8;
|
||
}
|
||
svg .sb3-sensing-alt {
|
||
fill: #47a8d1;
|
||
}
|
||
svg .sb3-sensing-dark {
|
||
fill: #2e8eb8;
|
||
}
|
||
|
||
|
||
svg .sb3-operators {
|
||
fill: #59c059;
|
||
stroke: #389438;
|
||
}
|
||
svg .sb3-operators-alt {
|
||
fill: #46b946;
|
||
}
|
||
svg .sb3-operators-dark {
|
||
fill: #389438;
|
||
}
|
||
|
||
|
||
svg .sb3-variables {
|
||
fill: #ff8c1a;
|
||
stroke: #db6e00;
|
||
}
|
||
svg .sb3-variables-alt {
|
||
fill: #ff8000;
|
||
}
|
||
svg .sb3-variables-dark {
|
||
fill: #db6e00;
|
||
}
|
||
|
||
|
||
svg .sb3-list {
|
||
fill: #ff661a;
|
||
stroke: #e64d00;
|
||
}
|
||
svg .sb3-list-alt {
|
||
fill: #ff5500;
|
||
}
|
||
svg .sb3-list-dark {
|
||
fill: #e64d00;
|
||
}
|
||
|
||
|
||
svg .sb3-custom {
|
||
fill: #ff6680;
|
||
stroke: #ff3355;
|
||
}
|
||
svg .sb3-custom-alt {
|
||
fill: #ff4d6a;
|
||
}
|
||
svg .sb3-custom-dark {
|
||
fill: #ff3355;
|
||
}
|
||
|
||
|
||
svg .sb3-extension {
|
||
fill: #0fbd8c;
|
||
stroke: #0b8e69;
|
||
}
|
||
svg .sb3-extension-alt {
|
||
fill: #0da57a;
|
||
}
|
||
svg .sb3-extension-dark {
|
||
fill: #0b8e69;
|
||
}
|
||
|
||
|
||
svg .sb3-obsolete {
|
||
fill: #ed4242;
|
||
stroke: #ca2b2b;
|
||
}
|
||
svg .sb3-obsolete-alt {
|
||
fill: #db3333;
|
||
}
|
||
svg .sb3-obsolete-dark {
|
||
fill: #ca2b2b;
|
||
}
|
||
|
||
|
||
svg .sb3-grey {
|
||
fill: #bfbfbf;
|
||
stroke: #909090;
|
||
}
|
||
svg .sb3-grey-alt {
|
||
fill: #b2b2b2;
|
||
}
|
||
svg .sb3-grey-dark {
|
||
fill: #909090;
|
||
}
|
||
|
||
|
||
svg .sb3-label {
|
||
fill: #fff;
|
||
}
|
||
|
||
svg .sb3-input-color {
|
||
stroke: #fff;
|
||
}
|
||
|
||
svg .sb3-input-number,
|
||
svg .sb3-input-string {
|
||
fill: #fff;
|
||
}
|
||
svg .sb3-literal-number,
|
||
svg .sb3-literal-string {
|
||
fill: #575e75;
|
||
}
|
||
|
||
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-motion {
|
||
fill: #80b5ff;
|
||
stroke: #3373cc;
|
||
}
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-motion-alt {
|
||
fill: #b3d2ff;
|
||
}
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-motion-dark {
|
||
fill: #3373cc;
|
||
}
|
||
|
||
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-looks {
|
||
fill: #ccb3ff;
|
||
stroke: #774dcb;
|
||
}
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-looks-alt {
|
||
fill: #ddccff;
|
||
}
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-looks-dark {
|
||
fill: #774dcb;
|
||
}
|
||
|
||
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-sound {
|
||
fill: #e19de1;
|
||
stroke: #bd42bd;
|
||
}
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-sound-alt {
|
||
fill: #ffb3ff;
|
||
}
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-sound-dark {
|
||
fill: #bd42bd;
|
||
}
|
||
|
||
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-control {
|
||
fill: #ffbe4c;
|
||
stroke: #cf8b17;
|
||
}
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-control-alt {
|
||
fill: #ffda99;
|
||
}
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-control-dark {
|
||
fill: #cf8b17;
|
||
}
|
||
|
||
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-events {
|
||
fill: #ffd966;
|
||
stroke: #cc9900;
|
||
}
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-events-alt {
|
||
fill: #ffecb3;
|
||
}
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-events-dark {
|
||
fill: #cc9900;
|
||
}
|
||
|
||
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-sensing {
|
||
fill: #85c4e0;
|
||
stroke: #2e8eb8;
|
||
}
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-sensing-alt {
|
||
fill: #aed8ea;
|
||
}
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-sensing-dark {
|
||
fill: #2e8eb8;
|
||
}
|
||
|
||
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-operators {
|
||
fill: #7ece7e;
|
||
stroke: #389438;
|
||
}
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-operators-alt {
|
||
fill: #b5e3b5;
|
||
}
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-operators-dark {
|
||
fill: #389438;
|
||
}
|
||
|
||
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-variables {
|
||
fill: #ffa54c;
|
||
stroke: #db6e00;
|
||
}
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-variables-alt {
|
||
fill: #ffcc99;
|
||
}
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-variables-dark {
|
||
fill: #db6e00;
|
||
}
|
||
|
||
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-list {
|
||
fill: #ff9966;
|
||
stroke: #e64d00;
|
||
}
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-list-alt {
|
||
fill: #ffcab0;
|
||
}
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-list-dark {
|
||
fill: #e64d00;
|
||
}
|
||
|
||
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-custom {
|
||
fill: #ff99aa;
|
||
stroke: #e64d00;
|
||
}
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-custom-alt {
|
||
fill: #ffccd5;
|
||
}
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-custom-dark {
|
||
fill: #e64d00;
|
||
}
|
||
|
||
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-extension {
|
||
fill: #13ecaf;
|
||
stroke: #0b8e69;
|
||
}
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-extension-alt {
|
||
fill: #75f0cd;
|
||
}
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-extension-dark {
|
||
fill: #0b8e69;
|
||
}
|
||
|
||
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-obsolete {
|
||
fill: #fc6666;
|
||
stroke: #d32121;
|
||
}
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-obsolete-alt {
|
||
fill: #fcb0b0;
|
||
}
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-obsolete-dark {
|
||
fill: #d32121;
|
||
}
|
||
|
||
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-grey {
|
||
fill: #bfbfbf;
|
||
stroke: #959595;
|
||
}
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-grey-alt {
|
||
fill: #b2b2b2;
|
||
}
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-grey-dark {
|
||
fill: #959595;
|
||
}
|
||
|
||
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-label {
|
||
fill: #000;
|
||
}
|
||
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-input-color {
|
||
stroke: #fff;
|
||
}
|
||
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-input-number,
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-input-string {
|
||
fill: #fff;
|
||
}
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-literal-number,
|
||
svg.scratchblocks-style-scratch3-high-contrast .sb3-literal-string {
|
||
fill: #000;
|
||
}
|
||
]]></style><title>Serve your webpage | Getting started with your Raspberry Pi Pico W | Python | Coding projects for kids and teens</title><link rel="canonical" href="https://projects.raspberrypi.org/en/projects/get-started-pico-w/5" data-react-helmet="true"><meta property="og:url" content="https://projects.raspberrypi.org/en/projects/get-started-pico-w/5" data-react-helmet="true"><meta name="description" content="Get started with your Raspberry Pi Pico W" data-react-helmet="true"><meta property="og:title" content="Serve your webpage | Getting started with your Raspberry Pi Pico W | Python | Coding projects for kids and teens" data-react-helmet="true"><meta property="og:description" content="Get started with your Raspberry Pi Pico W" data-react-helmet="true"><meta property="og:image" content="https://projects-static.raspberrypi.org/projects/get-started-pico-w/210d64b534d55b1563d25b116d876d67b28911b6/en/images/banner.png" data-react-helmet="true"><script data-react-helmet="true">
|
||
window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
|
||
window.hj(
|
||
'identify',
|
||
null,
|
||
{
|
||
'Logged In': false
|
||
}
|
||
)
|
||
</script><script async="" src="Serve%20your%20webpage%20Getting%20started%20with%20your%20Raspberry%20Pi%20Pico%20W%20Python%20Coding%20projects%20for%20kids%20and%20teens_fichiers/hotjar-3062209.js"></script><script async="" src="Serve%20your%20webpage%20Getting%20started%20with%20your%20Raspberry%20Pi%20Pico%20W%20Python%20Coding%20projects%20for%20kids%20and%20teens_fichiers/modules.js" charset="utf-8"></script></head><body data-sauce-theme="projects-ui"><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PXJKRGC" height="0" width="0" style="display:none;visibility:hidden" id="tag-manager"></iframe></noscript><noscript>We're sorry, but this site requires JavaScript to operate.</noscript><div id="root"><div class="c-i18n-root" dir="ltr"><div><header class="c-site-header" id="c-site-header" role="banner" data-nav-open="false"><a class="c-site-header__skiptocontent-link" href="#skiptocontent">Skip to main content</a><div class="c-site-header__container"><div class="c-site-header__home-link"><a class="c-site-header__rpf-link" href="https://raspberrypi.org/"><img alt="Raspberry Pi Foundation" class="c-site-header__rpf-logomark" src="Serve%20your%20webpage%20Getting%20started%20with%20your%20Raspberry%20Pi%20Pico%20W%20Python%20Coding%20projects%20for%20kids%20and%20teens_fichiers/rpf.svg" aria-label="Raspberry Pi Foundation home page"></a></div><div class="c-site-header__toggle"><button aria-label="Open Navigation" aria-pressed="false" class="c-site-header__toggle-button" type="button"></button></div><div class="site-header__nav"><nav aria-label="Navigation" class="site-header-nav" data-js="nav" data-active-panel=""><ul class="c-site-header-nav__list"><li class="c-site-header-nav__item" data-js="nav-item" data-section="home-item"><a class="c-site-header__nav-link" href="https://projects.raspberrypi.org/en/">Home</a></li><li class="c-site-header-nav__item" data-js="nav-item" data-section="pathways-item"><a class="c-site-header__nav-link" href="https://projects.raspberrypi.org/en/paths">Paths</a></li><li class="c-site-header-nav__item" data-js="nav-item" data-section="projects-item"><a class="c-site-header__nav-link" href="https://projects.raspberrypi.org/en/projects">Projects</a></li><li class="c-site-header-nav__item" data-js="nav-item" data-section="login-item"><a class="c-site-header__nav-link" href="https://projects.raspberrypi.org/en/projects/get-started-pico-w/login">Log In</a></li></ul></nav></div><div class="c-site-header__language-selector"><span class="c-site-header__language-selector--language">Language</span><select aria-label="Choose language" class="c-dropdown" name="locale"><option>-- Choose language --</option><option value="en" selected="selected">English</option><option value="ar-SA">اللغة العربية</option><option value="ca-ES">Català</option><option value="cs-CZ">Čeština</option><option value="me-ME">Crnogorski</option><option value="cy-GB">Cymraeg</option><option value="da-DK">Dansk</option><option value="de-DE">Deutsch</option><option value="el-GR">Ελληνικά</option><option value="et-EE">Eesti</option><option value="es-ES">Español</option><option value="es-LA">Español (Latinoamericano)</option><option value="fr-FR">Français</option><option value="gu-IN">ગુજરાતી</option><option value="he-IL">עברית</option><option value="hi-IN">हिन्दी</option><option value="hr-HR">Hrvatski</option><option value="it-IT">Italiano</option><option value="ja-JP">日本語</option><option value="kn-IN">ಕನ್ನಡ</option><option value="ko-KR">한국어</option><option value="mr-IN">मराठी</option><option value="hu-HU">Magyar</option><option value="nl-NL">Nederlands</option><option value="no-NO">Norsk</option><option value="pl-PL">Polski</option><option value="pt-BR">Português do Brasil</option><option value="pt-PT">Português</option><option value="ro-RO">Română</option><option value="ru-RU">Pусский</option><option value="sk-SK">Slovenčina</option><option value="sl-SI">Slovenščina</option><option value="fi-FI">Suomi</option><option value="sv-SE">Svenska</option><option value="vls-BE">Vlaams</option><option value="sr-SP">Српски</option><option value="tr-TR">Türkçe</option><option value="uk-UA">Українська</option><option value="xh-ZA">IsiXhosa</option><option value="zh-CN">简体中文</option><option value="zh-TW">繁體中文</option></select></div></div></header><div class="c-project theme-green"><header class="c-project__header"><div class="c-project-header-wrapper"><div class="c-project-header "><div class="c-project-header__info"><h1 class="c-project-header__title">Getting started with your Raspberry Pi Pico W</h1><ul class="sc-pr-tags"><li><a class="c-project-header__tag-link" href="https://projects.raspberrypi.org/en/projects?hardware[]=pico">Raspberry Pi Pico</a></li><li><a class="c-project-header__tag-link" href="https://projects.raspberrypi.org/en/projects?software[]=python">Python</a></li></ul></div><figure class="c-project-header__illustration"><img alt="" class="c-project-header__image" src="Serve%20your%20webpage%20Getting%20started%20with%20your%20Raspberry%20Pi%20Pico%20W%20Python%20Coding%20projects%20for%20kids%20and%20teens_fichiers/banner.png"></figure></div></div></header><main class="c-project__layout u-clearfix" id="c-project__layout"><div><menu class="c-sidebar"><div class="c-project-navigation"><input class="c-project-navigation__toggle-checkbox" id="c-project-navigation__toggle-checkbox" type="checkbox"><label class="c-project-navigation__toggle-label" for="c-project-navigation__toggle-checkbox">Project steps<span class="c-project-navigation__toggle-icon"></span></label><ul class="c-project-navigation__list"><li class="c-project-navigation__item"><a class="c-project-navigation__link c-project-navigation__link--is-first c-project-navigation__link--is-done" data-on="click" data-event-category="Getting started with your Raspberry Pi Pico W" data-event-action="Clicked Navigation Link" role="link" tabindex="0" href="https://projects.raspberrypi.org/en/projects/get-started-pico-w/0">Introduction</a></li><li class="c-project-navigation__item"><a class="c-project-navigation__link c-project-navigation__link--is-done" data-on="click" data-event-category="Getting started with your Raspberry Pi Pico W" data-event-action="Clicked Navigation Link" role="link" tabindex="0" href="https://projects.raspberrypi.org/en/projects/get-started-pico-w/1">Set up your Raspberry Pi Pico W</a></li><li class="c-project-navigation__item"><a class="c-project-navigation__link c-project-navigation__link--is-done" data-on="click" data-event-category="Getting started with your Raspberry Pi Pico W" data-event-action="Clicked Navigation Link" role="link" tabindex="0" href="https://projects.raspberrypi.org/en/projects/get-started-pico-w/2">Connect your Raspberry Pi Pico to a WLAN</a></li><li class="c-project-navigation__item"><a class="c-project-navigation__link c-project-navigation__link--is-done" data-on="click" data-event-category="Getting started with your Raspberry Pi Pico W" data-event-action="Clicked Navigation Link" role="link" tabindex="0" href="https://projects.raspberrypi.org/en/projects/get-started-pico-w/3">Open a socket</a></li><li class="c-project-navigation__item"><a class="c-project-navigation__link c-project-navigation__link--is-done" data-on="click" data-event-category="Getting started with your Raspberry Pi Pico W" data-event-action="Clicked Navigation Link" role="link" tabindex="0" href="https://projects.raspberrypi.org/en/projects/get-started-pico-w/4">Create a webpage</a></li><li class="c-project-navigation__item"><a class="c-project-navigation__link c-project-navigation__link--is-current" data-on="click" data-event-category="Getting started with your Raspberry Pi Pico W" data-event-action="Clicked Navigation Link" role="link" tabindex="0" href="https://projects.raspberrypi.org/en/projects/get-started-pico-w/5">Serve your webpage</a></li><li class="c-project-navigation__item"><a class="c-project-navigation__link c-project-navigation__link--is-last" data-on="click" data-event-category="Getting started with your Raspberry Pi Pico W" data-event-action="Clicked Navigation Link" role="link" tabindex="0" href="https://projects.raspberrypi.org/en/projects/get-started-pico-w/6">What next?</a></li></ul></div><a class="button button--secondary" aria-label="" href="https://projects.raspberrypi.org/en/projects/get-started-pico-w/print"><span class="content"><div class="icon icon_with_text"><svg class="" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 8V5H8V8H6V3H18V8H16ZM18 12.5C18.2833 12.5 18.5207 12.404 18.712 12.212C18.904 12.0207 19 11.7833 19 11.5C19 11.2167 18.904 10.979 18.712 10.787C18.5207 10.5957 18.2833 10.5 18 10.5C17.7167 10.5 17.4793 10.5957 17.288 10.787C17.096 10.979 17 11.2167 17 11.5C17 11.7833 17.096 12.0207 17.288 12.212C17.4793 12.404 17.7167 12.5 18 12.5ZM16 19V15H8V19H16ZM18 21H6V17H2V8H22V17H18V21ZM20 15V10H4V15H6V13H18V15H20ZM4 10H20H6H4Z" fill="#212121"></path></svg></div><span class="text">Print this project</span></span></a><div class="c-account" style="--cq-cqi-3acc16ed: var(--cq-cqw-3acc16ed); --cq-cqb-3acc16ed: var(--cq-cqh-3acc16ed); --cq-cqw-3acc16ed: 2.947px; --cq-cqh-3acc16ed: 9.55px;"><div class="sc-pr-account rpf-shadow-centre"><h4 class="c-account__title">Save your progress & collect badges!</h4><div class="c-account__badges"></div><div class="c-account__cta"><button class="c-button c-account__button c-log-in-cta__link" data-on="click" data-event-action="Clicked CTA Navigation">Log in or sign up</button></div><div class="c-account__badges c-account__badges_reversed"></div></div></div></menu><section class="c-project__content"><div class="c-project-steps"><div><div><div class="c-project-steps__wrapper" id="skiptocontent"><div class="c-wysiwyg"><div class="c-project-steps__content"><h2 id="serve-your-webpage">Serve your webpage</h2>
|
||
|
||
<div style="display: flex; flex-wrap: wrap">
|
||
<div style="flex-basis: 200px; flex-grow: 1; margin-right: 15px;">
|
||
<p>In this step, you will start up your web server so that a client
|
||
can connect to it, and control your LED and read the temperature.</p>
|
||
</div>
|
||
<div>
|
||
<p><img src="Serve%20your%20webpage%20Getting%20started%20with%20your%20Raspberry%20Pi%20Pico%20W%20Python%20Coding%20projects%20for%20kids%20and%20teens_fichiers/web_light_on.png" alt="Screenshot from Chrome showing a webpage with two buttons for turning an LED on and off."></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="c-project-task">
|
||
<input class="c-project-task__checkbox" type="checkbox" aria-label="Mark this task as complete" data-task-index="0" data-on-change-event-listener-added="true">
|
||
<div class="c-project-task__body">
|
||
<p>Create a function that will start your web server, using the <code>connection</code> object you saved as a parameter. The <code>state</code> and <code>temperature</code> variables need to be set for your HTML data. The state is going to start as being set to <code>'OFF'</code>, and the temperature to <code>0</code>, which means you should also ensure that the LED is off when the server starts.</p>
|
||
|
||
<div class="c-code-filename">
|
||
web_server.py
|
||
</div>
|
||
<pre dir="ltr" class="line-numbers language-python" data-start="66" tabindex="0" style="counter-reset: linenumber 65;"><code class="language-python syntax-highlighted" dir="ltr"><span class="token keyword">def</span> <span class="token function">serve</span><span class="token punctuation">(</span>connection<span class="token punctuation">)</span><span class="token punctuation">:</span>
|
||
<span class="token comment">#Start a web server</span>
|
||
state <span class="token operator">=</span> <span class="token string">'OFF'</span>
|
||
pico_led<span class="token punctuation">.</span>off<span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
temperature <span class="token operator">=</span> <span class="token number">0</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<p>When your web browser asks for a connection to your Raspberry Pi Pico
|
||
W, the connection needs to be accepted. After that, the data that is
|
||
sent from your web browser must be done in specific chunks (in this
|
||
case, 1024 bytes). You also need to know what request your web browser
|
||
is making — is it asking for just a simple page? Is it asking for a page
|
||
that doesn’t exist?</p>
|
||
|
||
<div class="c-project-task">
|
||
<input class="c-project-task__checkbox" type="checkbox" aria-label="Mark this task as complete" data-task-index="1" data-on-change-event-listener-added="true">
|
||
<div class="c-project-task__body">
|
||
<p>You want to keep the web server up and listening all the time, so
|
||
that any client can connect to it. You can do this by adding a <code>while True:</code> loop. Add these five lines of code so that you can accept a request, and <code>print()</code> to see what the request was. Add a call to your <code>serve</code> function in your calls at the bottom of your code.</p>
|
||
|
||
<div class="c-code-filename">
|
||
web_server.py
|
||
</div>
|
||
<pre dir="ltr" class="line-numbers language-python" data-start="66" data-line-offset="66" data-line="71-76, 81" tabindex="0" style="counter-reset: linenumber 65;"><code class="language-python syntax-highlighted" dir="ltr"><span class="token keyword">def</span> <span class="token function">serve</span><span class="token punctuation">(</span>connection<span class="token punctuation">)</span><span class="token punctuation">:</span>
|
||
<span class="token comment">#Start a web server</span>
|
||
state <span class="token operator">=</span> <span class="token string">'OFF'</span>
|
||
pico_led<span class="token punctuation">.</span>off<span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
temperature <span class="token operator">=</span> <span class="token number">0</span>
|
||
<span class="token keyword">while</span> <span class="token boolean">True</span><span class="token punctuation">:</span>
|
||
client <span class="token operator">=</span> connection<span class="token punctuation">.</span>accept<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
|
||
request <span class="token operator">=</span> client<span class="token punctuation">.</span>recv<span class="token punctuation">(</span><span class="token number">1024</span><span class="token punctuation">)</span>
|
||
request <span class="token operator">=</span> <span class="token builtin">str</span><span class="token punctuation">(</span>request<span class="token punctuation">)</span>
|
||
<span class="token keyword">print</span><span class="token punctuation">(</span>request<span class="token punctuation">)</span>
|
||
client<span class="token punctuation">.</span>close<span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
|
||
|
||
ip <span class="token operator">=</span> connect<span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
connection <span class="token operator">=</span> open_socket<span class="token punctuation">(</span>ip<span class="token punctuation">)</span>
|
||
serve<span class="token punctuation">(</span>connection<span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code><div aria-hidden="true" data-range="71-76" class=" line-highlight" style="top: 138px; height: 162px; width: 703px;"></div><div aria-hidden="true" data-range="81" class=" line-highlight" style="top: 408px; height: 27px; width: 704px;"></div></pre>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<p><strong>Test:</strong> Run your program and then type in the IP address into a web browser’s address bar on your computer.</p>
|
||
|
||
<p><img src="Serve%20your%20webpage%20Getting%20started%20with%20your%20Raspberry%20Pi%20Pico%20W%20Python%20Coding%20projects%20for%20kids%20and%20teens_fichiers/browser_ip.png" alt="A browser address bar with the IP of the Pico typed in."></p>
|
||
|
||
<p>You should see something like this in the shell output in Thonny.</p>
|
||
|
||
<pre class="language-python" tabindex="0"><code class="language-python syntax-highlighted"><span class="token operator">>></span><span class="token operator">></span> <span class="token operator">%</span>Run <span class="token operator">-</span>c $EDITOR_CONTENT
|
||
Waiting <span class="token keyword">for</span> connection<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
|
||
Waiting <span class="token keyword">for</span> connection<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
|
||
Waiting <span class="token keyword">for</span> connection<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
|
||
Connected on <span class="token number">192.168</span><span class="token number">.1</span><span class="token number">.143</span>
|
||
<span class="token string">b'GET / HTTP/1.1\r\nHost: 192.168.1.143\r\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:101.0) Gecko/20100101 Firefox/101.0\r\nAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8\r\nAccept-Language: en-GB,en;q=0.5\r\nAccept-Encoding: gzip, deflate\r\nConnection: keep-alive\r\nUpgrade-Insecure-Requests: 1\r\n\r\n'</span>
|
||
<span class="token string">b'GET /favicon.ico HTTP/1.1\r\nHost: 192.168.1.143\r\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:101.0) Gecko/20100101 Firefox/101.0\r\nAccept: image/avif,image/webp,*/*\r\nAccept-Language: en-GB,en;q=0.5\r\nAccept-Encoding: gzip, deflate\r\nConnection: keep-alive\r\nReferer: https://192.168.1.143/\r\n\r\n'</span></code></pre>
|
||
|
||
<div class="c-project-task">
|
||
<input class="c-project-task__checkbox" type="checkbox" aria-label="Mark this task as complete" data-task-index="2" data-on-change-event-listener-added="true">
|
||
<div class="c-project-task__body">
|
||
<p>Next, you need to send the HTML code you have written to the client web browser.</p>
|
||
|
||
<div class="c-code-filename">
|
||
web_server.py
|
||
</div>
|
||
<pre dir="ltr" class="line-numbers language-python" data-start="66" data-line-offset="66" data-line="76, 77" tabindex="0" style="counter-reset: linenumber 65;"><code class="language-python syntax-highlighted" dir="ltr"><span class="token keyword">def</span> <span class="token function">serve</span><span class="token punctuation">(</span>connection<span class="token punctuation">)</span><span class="token punctuation">:</span>
|
||
<span class="token comment">#Start a web server</span>
|
||
state <span class="token operator">=</span> <span class="token string">'ON'</span>
|
||
pico_led<span class="token punctuation">.</span>on<span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
temperature <span class="token operator">=</span> <span class="token number">0</span>
|
||
<span class="token keyword">while</span> <span class="token boolean">True</span><span class="token punctuation">:</span>
|
||
client <span class="token operator">=</span> connection<span class="token punctuation">.</span>accept<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
|
||
request <span class="token operator">=</span> client<span class="token punctuation">.</span>recv<span class="token punctuation">(</span><span class="token number">1024</span><span class="token punctuation">)</span>
|
||
request <span class="token operator">=</span> <span class="token builtin">str</span><span class="token punctuation">(</span>request<span class="token punctuation">)</span>
|
||
<span class="token keyword">print</span><span class="token punctuation">(</span>request<span class="token punctuation">)</span>
|
||
html <span class="token operator">=</span> webpage<span class="token punctuation">(</span>temperature<span class="token punctuation">,</span> state<span class="token punctuation">)</span>
|
||
client<span class="token punctuation">.</span>send<span class="token punctuation">(</span>html<span class="token punctuation">)</span>
|
||
client<span class="token punctuation">.</span>close<span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
|
||
|
||
ip <span class="token operator">=</span> connect<span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
connection <span class="token operator">=</span> open_socket<span class="token punctuation">(</span>ip<span class="token punctuation">)</span>
|
||
serve<span class="token punctuation">(</span>connection<span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code><div aria-hidden="true" data-range="76" class=" line-highlight" style="top: 273px; height: 27px; width: 705px;"></div><div aria-hidden="true" data-range="77" class=" line-highlight" style="top: 300px; height: 27px; width: 706px;"></div></pre>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="c-project-task">
|
||
<input class="c-project-task__checkbox" type="checkbox" aria-label="Mark this task as complete" data-task-index="3" data-on-change-event-listener-added="true">
|
||
<div class="c-project-task__body">
|
||
<p>Refresh your page when you’ve run the code again. Click on the
|
||
buttons that are displayed. In Thonny, you should then see that there
|
||
are two different outputs from your shell.</p>
|
||
|
||
<pre class="language-python" tabindex="0"><code class="language-python syntax-highlighted"><span class="token string">b'GET /lighton? HTTP/1.1\r\nHost: 192.168.1.143\r\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:101.0) Gecko/20100101 Firefox/101.0\r\nAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8\r\nAccept-Language: en-GB,en;q=0.5\r\nAccept-Encoding: gzip, deflate\r\nConnection: keep-alive\r\nReferer: https://192.168.1.143/\r\nUpgrade-Insecure-Requests: 1\r\n\r\n'</span></code></pre>
|
||
|
||
<p>and</p>
|
||
|
||
<pre class="language-python" tabindex="0"><code class="language-python syntax-highlighted"><span class="token string">b'GET /lightoff? HTTP/1.1\r\nHost: 192.168.1.143\r\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:101.0) Gecko/20100101 Firefox/101.0\r\nAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8\r\nAccept-Language: en-GB,en;q=0.5\r\nAccept-Encoding: gzip, deflate\r\nConnection: keep-alive\r\nReferer: https://192.168.1.143/lighton?\r\nUpgrade-Insecure-Requests: 1\r\n\r\n'</span></code></pre>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<p>Notice that you have <code>/lighton?</code>, <code>lightoff?</code>, and <code>close?</code> in the requests. These can be used to control the onboard LED of your Raspberry Pi Pico W and close your server.</p>
|
||
|
||
<div class="c-project-task">
|
||
<input class="c-project-task__checkbox" type="checkbox" aria-label="Mark this task as complete" data-task-index="4" data-on-change-event-listener-added="true">
|
||
<div class="c-project-task__body">
|
||
<p>Split the request string and then fetch the first item in the
|
||
list. Sometimes the request string might not be able to be split, so
|
||
it’s best to handle this in a <code>try</code>/<code>except</code>.</p>
|
||
|
||
<p>If the first item in the split is <code>lighton?</code> then you can switch the LED on. If it is <code>lightoff?</code> then you can switch the LED off. If it is <code>close?</code> you can perform a <code>sys.exit()</code></p>
|
||
|
||
<div class="c-code-filename">
|
||
web_server.py
|
||
</div>
|
||
<pre dir="ltr" class="line-numbers language-python" data-start="66" data-line-offset="66" data-line="75-85" tabindex="0" style="counter-reset: linenumber 65;"><code class="language-python syntax-highlighted" dir="ltr"><span class="token keyword">def</span> <span class="token function">serve</span><span class="token punctuation">(</span>connection<span class="token punctuation">)</span><span class="token punctuation">:</span>
|
||
<span class="token comment">#Start a web server</span>
|
||
state <span class="token operator">=</span> <span class="token string">'ON'</span>
|
||
pico_led<span class="token punctuation">.</span>on<span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
temperature <span class="token operator">=</span> <span class="token number">0</span>
|
||
<span class="token keyword">while</span> <span class="token boolean">True</span><span class="token punctuation">:</span>
|
||
client <span class="token operator">=</span> connection<span class="token punctuation">.</span>accept<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
|
||
request <span class="token operator">=</span> client<span class="token punctuation">.</span>recv<span class="token punctuation">(</span><span class="token number">1024</span><span class="token punctuation">)</span>
|
||
request <span class="token operator">=</span> <span class="token builtin">str</span><span class="token punctuation">(</span>request<span class="token punctuation">)</span>
|
||
<span class="token keyword">try</span><span class="token punctuation">:</span>
|
||
request <span class="token operator">=</span> request<span class="token punctuation">.</span>split<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span>
|
||
<span class="token keyword">except</span> IndexError<span class="token punctuation">:</span>
|
||
<span class="token keyword">pass</span>
|
||
<span class="token keyword">if</span> request <span class="token operator">==</span> <span class="token string">'/lighton?'</span><span class="token punctuation">:</span>
|
||
pico_led<span class="token punctuation">.</span>on<span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
<span class="token keyword">elif</span> request <span class="token operator">==</span><span class="token string">'/lightoff?'</span><span class="token punctuation">:</span>
|
||
pico_led<span class="token punctuation">.</span>off<span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
<span class="token keyword">elif</span> request <span class="token operator">==</span> <span class="token string">'/close?'</span><span class="token punctuation">:</span>
|
||
sys<span class="token punctuation">.</span>exit<span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
html <span class="token operator">=</span> webpage<span class="token punctuation">(</span>temperature<span class="token punctuation">,</span> state<span class="token punctuation">)</span>
|
||
client<span class="token punctuation">.</span>send<span class="token punctuation">(</span>html<span class="token punctuation">)</span>
|
||
client<span class="token punctuation">.</span>close<span class="token punctuation">(</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code><div aria-hidden="true" data-range="75-85" class=" line-highlight" style="top: 246px; height: 297px; width: 705px;"></div></pre>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="c-project-task">
|
||
<input class="c-project-task__checkbox" type="checkbox" aria-label="Mark this task as complete" data-task-index="5" data-on-change-event-listener-added="true">
|
||
<div class="c-project-task__body">
|
||
<p>Run your code again. This time, when you refresh your browser
|
||
window and click on the buttons, the onboard LED should turn on and off.
|
||
If you click on the <strong>Stop Server</strong> button, your server should shutdown.</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="c-project-task">
|
||
<input class="c-project-task__checkbox" type="checkbox" aria-label="Mark this task as complete" data-task-index="6" data-on-change-event-listener-added="true">
|
||
<div class="c-project-task__body">
|
||
<p>You can also tell the user of the webpage what the state of the LED is.</p>
|
||
|
||
<div class="c-code-filename">
|
||
web_server.py
|
||
</div>
|
||
<pre dir="ltr" class="line-numbers language-python" data-start="66" data-line-offset="66" data-line="81, 84" tabindex="0" style="counter-reset: linenumber 65;"><code class="language-python syntax-highlighted" dir="ltr"><span class="token keyword">def</span> <span class="token function">serve</span><span class="token punctuation">(</span>connection<span class="token punctuation">)</span><span class="token punctuation">:</span>
|
||
<span class="token comment">#Start a web server</span>
|
||
state <span class="token operator">=</span> <span class="token string">'ON'</span>
|
||
pico_led<span class="token punctuation">.</span>on<span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
temperature <span class="token operator">=</span> <span class="token number">0</span>
|
||
<span class="token keyword">while</span> <span class="token boolean">True</span><span class="token punctuation">:</span>
|
||
client <span class="token operator">=</span> connection<span class="token punctuation">.</span>accept<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
|
||
request <span class="token operator">=</span> client<span class="token punctuation">.</span>recv<span class="token punctuation">(</span><span class="token number">1024</span><span class="token punctuation">)</span>
|
||
request <span class="token operator">=</span> <span class="token builtin">str</span><span class="token punctuation">(</span>request<span class="token punctuation">)</span>
|
||
<span class="token keyword">try</span><span class="token punctuation">:</span>
|
||
request <span class="token operator">=</span> request<span class="token punctuation">.</span>split<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span>
|
||
<span class="token keyword">except</span> IndexError<span class="token punctuation">:</span>
|
||
<span class="token keyword">pass</span>
|
||
<span class="token keyword">if</span> request <span class="token operator">==</span> <span class="token string">'/lighton?'</span><span class="token punctuation">:</span>
|
||
pico_led<span class="token punctuation">.</span>on<span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
state <span class="token operator">=</span> <span class="token string">'ON'</span>
|
||
<span class="token keyword">elif</span> request <span class="token operator">==</span><span class="token string">'/lightoff?'</span><span class="token punctuation">:</span>
|
||
pico_led<span class="token punctuation">.</span>off<span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
state <span class="token operator">=</span> <span class="token string">'OFF'</span>
|
||
<span class="token keyword">elif</span> request <span class="token operator">==</span> <span class="token string">'/close?'</span><span class="token punctuation">:</span>
|
||
sys<span class="token punctuation">.</span>exit<span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
html <span class="token operator">=</span> webpage<span class="token punctuation">(</span>temperature<span class="token punctuation">,</span> state<span class="token punctuation">)</span>
|
||
client<span class="token punctuation">.</span>send<span class="token punctuation">(</span>html<span class="token punctuation">)</span>
|
||
client<span class="token punctuation">.</span>close<span class="token punctuation">(</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code><div aria-hidden="true" data-range="81" class=" line-highlight" style="top: 408px; height: 27px; width: 709px;"></div><div aria-hidden="true" data-range="84" class=" line-highlight" style="top: 489px; height: 27px; width: 710px;"></div></pre>
|
||
|
||
<p>Now when you run the code, the text for the state of the LED should also change on the refreshed webpage.</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="c-project-task">
|
||
<input class="c-project-task__checkbox" type="checkbox" aria-label="Mark this task as complete" data-task-index="7" data-on-change-event-listener-added="true">
|
||
<div class="c-project-task__body">
|
||
<p>Lastly, you can use the onboard temperature sensor to get an
|
||
approximate reading of the CPU temperature, and display that on your
|
||
webpage as well.</p>
|
||
|
||
<div class="c-code-filename">
|
||
web_server.py
|
||
</div>
|
||
<pre dir="ltr" class="line-numbers language-python" data-start="66" data-line-offset="66" data-line="87" tabindex="0" style="counter-reset: linenumber 65;"><code class="language-python syntax-highlighted" dir="ltr"><span class="token keyword">def</span> <span class="token function">serve</span><span class="token punctuation">(</span>connection<span class="token punctuation">)</span><span class="token punctuation">:</span>
|
||
<span class="token comment">#Start a web server</span>
|
||
state <span class="token operator">=</span> <span class="token string">'ON'</span>
|
||
pico_led<span class="token punctuation">.</span>on<span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
temperature <span class="token operator">=</span> <span class="token number">0</span>
|
||
<span class="token keyword">while</span> <span class="token boolean">True</span><span class="token punctuation">:</span>
|
||
client <span class="token operator">=</span> connection<span class="token punctuation">.</span>accept<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
|
||
request <span class="token operator">=</span> client<span class="token punctuation">.</span>recv<span class="token punctuation">(</span><span class="token number">1024</span><span class="token punctuation">)</span>
|
||
request <span class="token operator">=</span> <span class="token builtin">str</span><span class="token punctuation">(</span>request<span class="token punctuation">)</span>
|
||
<span class="token keyword">try</span><span class="token punctuation">:</span>
|
||
request <span class="token operator">=</span> request<span class="token punctuation">.</span>split<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span>
|
||
<span class="token keyword">except</span> IndexError<span class="token punctuation">:</span>
|
||
<span class="token keyword">pass</span>
|
||
<span class="token keyword">if</span> request <span class="token operator">==</span> <span class="token string">'/lighton?'</span><span class="token punctuation">:</span>
|
||
pico_led<span class="token punctuation">.</span>on<span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
state <span class="token operator">=</span> <span class="token string">'ON'</span>
|
||
<span class="token keyword">elif</span> request <span class="token operator">==</span><span class="token string">'/lightoff?'</span><span class="token punctuation">:</span>
|
||
pico_led<span class="token punctuation">.</span>off<span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
state <span class="token operator">=</span> <span class="token string">'OFF'</span>
|
||
<span class="token keyword">elif</span> request <span class="token operator">==</span> <span class="token string">'/close?'</span><span class="token punctuation">:</span>
|
||
sys<span class="token punctuation">.</span>exit<span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
temperature <span class="token operator">=</span> pico_temp_sensor<span class="token punctuation">.</span>temp
|
||
html <span class="token operator">=</span> webpage<span class="token punctuation">(</span>temperature<span class="token punctuation">,</span> state<span class="token punctuation">)</span>
|
||
client<span class="token punctuation">.</span>send<span class="token punctuation">(</span>html<span class="token punctuation">)</span>
|
||
client<span class="token punctuation">.</span>close<span class="token punctuation">(</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code><div aria-hidden="true" data-range="87" class=" line-highlight" style="top: 570px; height: 27px; width: 707px;"></div></pre>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="c-project-task">
|
||
<input class="c-project-task__checkbox" type="checkbox" aria-label="Mark this task as complete" data-task-index="8" data-on-change-event-listener-added="true">
|
||
<div class="c-project-task__body">
|
||
<p><strong>Test:</strong> You can hold your hand over your Raspberry
|
||
Pi Pico W to increase its temperature, then refresh the webpage on your
|
||
computer to see the new value that is displayed.</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div></div><nav class="c-project-step-navigation"><a class="c-button c-button--secondary c-project-step-navigation__link c-project-step-navigation__link--previous" aria-label="Create a webpage" data-on="click" data-event-category="Getting started with your Raspberry Pi Pico W" data-event-action="Clicked Step Navigation" href="https://projects.raspberrypi.org/en/projects/get-started-pico-w/4"></a><a class="c-button c-project-step-navigation__link--next" data-on="click" data-event-category="Getting started with your Raspberry Pi Pico W" data-event-action="Clicked Step Navigation" href="https://projects.raspberrypi.org/en/projects/get-started-pico-w/6">What next?</a></nav></div></div></div></div></section></div></main><footer class="c-project-footer"><p>Spotted a mistake? Enjoying the project? Any opinions on the website? Let us know!</p><button class="c-project-footer__feedback-prompt">Send feedback </button><form class="c-project-footer__feedback-form c-project-footer__feedback-form--hidden"><textarea class="c-project-footer__feedback-textarea" aria-labelledby="textarea-label" cols="40" placeholder="Leave your feedback" rows="6"></textarea><p id="textarea-label">Your feedback helps us improve our website and projects.</p><button class="c-project-footer__feedback-submit" disabled="disabled" type="submit">Send feedback</button></form><div class="c-project-footer__feedback-thanks c-project-footer__feedback-thanks--hidden">Thank you!</div><p>Published by <a class="c-project-footer__link c-project-footer__link--rpi" href="https://www.raspberrypi.org/">Raspberry Pi Foundation</a> under a <a class="c-project-footer__link c-project-footer__link--creative-commons" href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons license</a>.<br><a class="c-project-footer__link c-project-footer__link--github" href="https://github.com/RaspberryPiLearning/get-started-pico-w">View project & license on GitHub</a></p><div class="c-project-footer-policy"><p><a class="c-project-footer__link" href="https://www.raspberrypi.org/accessibility/">Accessibility</a></p><p><a class="c-project-footer__link" href="https://www.raspberrypi.org/cookies/">Cookies Policy</a></p><p><a class="c-project-footer__link" href="https://www.raspberrypi.org/privacy/">Privacy Policy</a></p><p><a class="c-project-footer__link" href="https://projects.raspberrypi.org/en/projects/translating-for-raspberry-pi">Translate for us</a></p></div></footer></div></div></div></div><script src="Serve%20your%20webpage%20Getting%20started%20with%20your%20Raspberry%20Pi%20Pico%20W%20Python%20Coding%20projects%20for%20kids%20and%20teens_fichiers/prism.js"></script><script defer="defer" src="Serve%20your%20webpage%20Getting%20started%20with%20your%20Raspberry%20Pi%20Pico%20W%20Python%20Coding%20projects%20for%20kids%20and%20teens_fichiers/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon="{"rayId":"8f40d9598be40205","serverTiming":{"name":{"cfExtPri":true,"cfL4":true,"cfSpeedBrain":true,"cfCacheStatus":true}},"version":"2024.10.5","token":"8994bf9bd4594416aabbb2ed99462604"}" crossorigin="anonymous"></script>
|
||
<img id="CookiebotSessionPixel" src="Serve%20your%20webpage%20Getting%20started%20with%20your%20Raspberry%20Pi%20Pico%20W%20Python%20Coding%20projects%20for%20kids%20and%20teens_fichiers/1.gif" alt="Cookiebot session tracker icon loaded" data-cookieconsent="ignore" style="display: none;"><iframe style="display: none; position: absolute; width: 1px; height: 1px; top: -9999px;" name="__uspapiLocator" tabindex="-1" role="presentation" aria-hidden="true" title="Blank"></iframe><iframe style="position: absolute; width: 1px; height: 1px; top: -9999px;" tabindex="-1" role="presentation" aria-hidden="true" title="Blank" src="Serve%20your%20webpage%20Getting%20started%20with%20your%20Raspberry%20Pi%20Pico%20W%20Python%20Coding%20projects%20for%20kids%20and%20teens_fichiers/bc-v4.htm"></iframe><iframe id="_hjSafeContext_56968696" title="_hjSafeContext" tabindex="-1" aria-hidden="true" src="Serve%20your%20webpage%20Getting%20started%20with%20your%20Raspberry%20Pi%20Pico%20W%20Python%20Coding%20projects%20for%20kids%20and%20teens_fichiers/a_002.htm" style="display: none !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important;"></iframe></body></html> |