What is MakeCode

2017-10-04 | By Adafruit Industries

License: See Original Project

Courtesy of Adafruit

Guide by Peli de Halleux

Microsoft MakeCode for Adafruit is a web-based code editor for physical computing. It provides a block editor, similar to Scratch or Code.org, and also a JavaScript editor for more advanced users. Try it now at https://makecode.adafruit.com/!

Some of the key features of MakeCode are:

Web Based Editor: nothing to install
Cross Platform: works in most modern browsers from tiny phone to giant touch screens
Compilation in the Browser: the compiler runs in your browser, it's fast and works offline
Blocks + JavaScript: drag and drop blocks or type JavaScript, MakeCode lets you go back and forth between the two.
Works Offline: once you've loaded the editor, it stays cached in your browser.
Event Based Runtime: easily respond to button clicks, shake gestures and more

MakeCode currently supports the Adafruit Circuit Playground Express.

Editing Blocks

The block editor is the easiest way to get started with MakeCode. You can drag and drop blocks from the category list. Each time you make a change to the blocks, the simulator will automatically restart and run the code. You can test your program in the browser!

Try our getting started tutorial that helps you build a siren program.
Try one of our projects to learn more about the features of the Circuit Playground.
Take a deep dive in the documentation

Blinky!

Let's show how MakeCode works by building a simple program that blinks the 10 awesome NeoPixels.

Creating a blink effect is done by setting all the ring LEDs to red, pause for a little, then turn them off, pause for a little, then repeat forever.

Let's gather the blocks we need to convert the description above into Blocks that the Circuit Playground can understand and run:

Forever runs blocks in a loop with a 20ms pause in between (it is similar to Arduino loop).
Show ring sets the color on the 10 neopixels at once
Pause blocks the current thread for 100ms. If other events or forever loops are running, they have the opporunity to run at this time.

Do you want to select or change colors? The show ring block has a built-in color picker. Select the color from the color wheel to select a color, then click one of the ten Neopixel rings to modify its color.

How do I disable a Neopixel? The grey dot in the middle of the color wheel indicates that the pixel is off. Select the grey from the color wheel and then click the Neopixel ring.

In the next section, we'll load the Blinky code onto the Circuit Playground Express!

Downloading and Flashing

Getting your code into your device is very easy with MakeCode. You do not need to install any software on your machine and the process takes two steps:

Step 1: Connect your board via USB and enter bootloader mode
Step 2: Compile and Download the .uf2 file into your board drive

We are going to go through these two steps in detail.

Step 1: Bootloader mode

Connect your board to your computer via a USB cable. Press the reset button once to put the board in bootloader mode.

When the Circuit Playground Express is in Bootloader mode, all the LEDs will turn red briefly, then green. Verify your status LED is also pulsing red. Your computer should show a new removable drive called "CPLAYBOOT"

If the LEDs are all red: Either the computer is still installing drivers (Please wait a minute, Windows takes some time to install updates.) or you have a bad USB connection. If you keep getting red LEDs - try a new USB cable (you may want to ensure your USB cable is not charge only, it needs to transfer data) or a different USB port.

Once your LEDs are all green, you should see a CPLAYBOOT drive appear in your drive list in your file explorer.

We are now ready to compile our blinky code and download it to our board!

Step 2: Compile and Download

Let's first verify that our code compiles properly in MakeCode.

MakeCode has a built-in simulator that re-loads and re-runs code when restarted. This is an easy way to both ensure that our code compiles and simulate it before moving it onto the board. The refresh button re-loads the simulator with your latest version of block code.

If your board is working in the simulator, it's time to download it to your actual board! Click the "Download" button. It will generate a .uf2 file and download it to your computer (UF2 is a file format designed to flash microcontrollers over USB).

General Steps to copy over your program (not specific to any Operating system)

Ensure your board is in bootloader mode.
Find the .uf2 file generated by MakeCode in your file explorer. Copy it to the "CPLAYBOOT" volume.
The status LED on the board will blink while the file is transferring. Once it's done transferring your file, the board will automatically reset and start running your code (just like in the simulator!)

Windows: Open Windows Explorer (Windows key + E key) and locate the "blinky.uf2" file you generated. It's probably in your Downloads folder!

You can copy/paste the file to your CPLAYBOOT volume or you can drag/drop it like in the picture below.

macOS: Open Finder and locate the "blinky.uf2" file. You can copy/paste this file to the "cplayboot" volume or drag/drop it from the same finder window.

If you want to avoid the copying process: You can download your programs directly to the board. To do this: change the download location in Chrome, Firefox, Safari, or Opera to the main directory of your "CPLAYBOOT" volume.

Saving and Sharing

Want to change the Blinky program to display different colors, or make it play a sound? Editing the program on your Circuit Playground is super easy!

Extracting your code from the Circuit Playground

The .uf2 file (CURRENT.UF2) you created by clicking on the Compile button in MakeCode also contains the source code of your program!

You can open this file in MakeCode by dragging and dropping it into the browser to edit it.

Sharing

You can share your code by clicking on the share button. After confirmation, MakeCode will create a short unique URL for your code. Anyone with that URL will be able to reload the code.

These URLs can also be used to embed the editor your blog or web pages! Just copy paste the URL in your text editor and (if it supports oEmbed) it will automatically load it in your page.

Editing JavaScript

If you already have some experience coding or you feel ready to take the next step, MakeCode features a fully-feature JavaScript editor in the browser!

read the JavaScript docs

Give it a try!

You can also switch between blocks and JavaScript by clicking the button on the top.

Other Good Stuff

This guide is meant as a starter block but it's worth mentioning briefly about other feature of MakeCode...

GitHub packages

Additional blocks or drivers can be packaged in github repo and loaded in the editor via the Add Package dialog. Packages can contain JavaScript, C++ and yes! ASM! https://makecode.adafruit.com/packages

We are Open Source on GitHub

Check out https://makecode.com/about for more info about the various repos.

We have crowd-sourced translations

Whether you want to code in Klingon or your native non-English language, MakeCode supports crowd sourced translations at https://makecode.adafruit.com/translate.

Add all DigiKey Parts to Cart

Have questions or comments? Continue the conversation on TechForum, DigiKey's online community and technical resource.

Visit TechForum

Arduino | 3D Printing | Raspberry Pi

What is MakeCode

2017-10-04 | By Adafruit Industries

信息

帮助

联系我们

关注我们