2.1.28, initiation update to PXT v5.28.24 (#54)
@@ -1,5 +0,0 @@
|
||||

|
||||
|
||||
# About
|
||||
|
||||
Read more at https://calliope.cc .
|
||||
@@ -1,3 +1,3 @@
|
||||
{
|
||||
"appref": "v"
|
||||
"appref": "v2"
|
||||
}
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
# Blocks language
|
||||
|
||||
### @description Langugage constructs for the Block editor.
|
||||
|
||||
```namespaces
|
||||
for (let i = 0;i<5;++i) {}
|
||||
if (true){}
|
||||
let x = 0;
|
||||
Math.random(5);
|
||||
```
|
||||
|
||||
## See Also
|
||||
|
||||
[logic](/blocks/logic), [loops](/blocks/loops), [math](/blocks/math), [variables](/blocks/variables)
|
||||
@@ -1,9 +0,0 @@
|
||||
# Logic
|
||||
|
||||
```cards
|
||||
if(true) {}
|
||||
true;
|
||||
true && false;
|
||||
!true;
|
||||
1 != 0;
|
||||
```
|
||||
@@ -1,102 +0,0 @@
|
||||
# Boolean
|
||||
|
||||
true or false.
|
||||
|
||||
A Boolean has one of two possible values: `true`; `false`. Boolean (logical) operators (*and*, *or*, *not*) take Boolean inputs and yields a Boolean value. Comparison operators on other types ([numbers](/reference/types/number), [strings](/reference/types/string) yields a Boolean value.
|
||||
|
||||
The following blocks represent the true and false Boolean values, which can be plugged in anywhere a Boolean value is expected:
|
||||
|
||||
```blocks
|
||||
true;
|
||||
false;
|
||||
```
|
||||
|
||||
The next three blocks represent the three Boolean (logic) operators:
|
||||
|
||||
```blocks
|
||||
true && false;
|
||||
true || false;
|
||||
!true;
|
||||
```
|
||||
|
||||
The next six blocks represent comparison operators that yield a Boolean value. Most comparisons you will do involve [numbers](/reference/types/number):
|
||||
|
||||
```blocks
|
||||
42 == 0;
|
||||
42 != 0;
|
||||
42 < 0;
|
||||
42 > 0;
|
||||
42 <= 0;
|
||||
42 >= 0;
|
||||
```
|
||||
|
||||
Boolean values and operators are often used with an [if](/blocks/logic/if) or [while](/blocks/loops/while) statement to determine which code will execute next. For example:
|
||||
|
||||
### Functions that return a Boolean
|
||||
|
||||
Some functions return a Boolean value, which you can store in a Boolean variable. For example, the following code gets the on/off state of `point (1, 2)` and stores this in the Boolean variable named `on`. Then the code clears the screen if `on` is `true`:
|
||||
|
||||
### Boolean operators
|
||||
|
||||
Boolean operators take Boolean inputs and evaluate to a Boolean output:
|
||||
|
||||
### Conjunction: `A and B`
|
||||
|
||||
`A and B` evaluates to `true` if-and-only-if both A and B are true:
|
||||
|
||||
```blocks
|
||||
false && false == false;
|
||||
false && true == false;
|
||||
true && false == false;
|
||||
true && true == true;
|
||||
```
|
||||
|
||||
### Disjunction: `A or B`
|
||||
|
||||
`A or B` evaluates to `true` if-and-only-if either A is true or B is true:
|
||||
|
||||
```blocks
|
||||
false || false == false;
|
||||
false || true == true;
|
||||
true || false == true;
|
||||
true || true == true;
|
||||
```
|
||||
|
||||
### Negation: `not A`
|
||||
|
||||
`not A` evaluates to the opposite (negation) of A:
|
||||
|
||||
```blocks
|
||||
!false == true;
|
||||
!true == false;
|
||||
```
|
||||
|
||||
### Example
|
||||
|
||||
This example turns on LED `3 , 3`, if LEDs `1 , 1` and `2 , 2` are both on:
|
||||
|
||||
```blocks
|
||||
if (led.point(1,1) && led.point(2,2)) {
|
||||
led.plot(3,3)
|
||||
}
|
||||
```
|
||||
|
||||
### Comparisons of numbers and strings
|
||||
|
||||
When you compare two Numbers, you get a Boolean value, such as the comparison `x < 5` in the code below:
|
||||
|
||||
```blocks
|
||||
let x = Math.random(5)
|
||||
if(x < 5) {
|
||||
basic.showString("low");
|
||||
} else {
|
||||
basic.showString("high");
|
||||
}
|
||||
```
|
||||
|
||||
See the documentation on [Numbers](/reference/types/number) for more information on comparing two Numbers. You can also [compare strings](/reference/types/string-functions) using the `equals` function.
|
||||
|
||||
### See also
|
||||
|
||||
[if](/blocks/logic/if), [while](/blocks/loops/while), [number](/reference/types/number)
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
# If
|
||||
|
||||
### @parent blocks/language
|
||||
|
||||
|
||||
Conditionally run code depending on whether a [Boolean](/blocks/logic/boolean) condition is true or false.
|
||||
|
||||
```blocks
|
||||
if(true) {
|
||||
}
|
||||
```
|
||||
|
||||
Click on the dark blue gear icon (see above) to add an *else* or *if* to the current block.
|
||||
|
||||
### Example: adjusting screen brightness
|
||||
|
||||
```blocks
|
||||
if(input.lightLevel()<100){
|
||||
led.setBrightness(255);
|
||||
}
|
||||
```
|
||||
|
||||
If the [light level](/reference/input/light-level) is `< 100`, this code sets the brightness to `255`:
|
||||
|
||||
### See also
|
||||
|
||||
[while loop](/blocks/loops/while), [for](/blocks/loops/for), [boolean](/blocks/logic/boolean)
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
# Loops
|
||||
|
||||
```cards
|
||||
for(let i = 0;i<5;i++) {}
|
||||
while(true) {}
|
||||
basic.forever(() => {});
|
||||
```
|
||||
@@ -1,20 +0,0 @@
|
||||
# For
|
||||
|
||||
### @parent blocks/language
|
||||
|
||||
Run part of the program the number of times you say.
|
||||
|
||||
### Example: Count to 4
|
||||
|
||||
This program will show the numbers 0, 1, 2, 3, and 4 one after another on the LED screen.
|
||||
|
||||
```blocks
|
||||
for(let i = 0; i < 5; ++i) {
|
||||
basic.showNumber(i)
|
||||
}
|
||||
```
|
||||
|
||||
### See also
|
||||
|
||||
[repeat](/blocks/loops/repeat), [while](/blocks/loops/while), [if](/blocks/logic/if), [show number](/reference/basic/show-number)
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
# Repeat
|
||||
|
||||
Run part of the program the number of times you say.
|
||||
|
||||
### Block Editor
|
||||
|
||||

|
||||
|
||||
### See also
|
||||
|
||||
[for](/blocks/loops/for), [while](/blocks/loops/while), [if](/blocks/logic/if), [show number](/reference/basic/show-number)
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
# While
|
||||
|
||||
Repeat code while a [Boolean](/blocks/logic/boolean) `condition` is true.
|
||||
|
||||
```blocks
|
||||
while(true) {
|
||||
}
|
||||
```
|
||||
|
||||
The while loop has a *condition* that evaluates to a [Boolean](/blocks/logic/boolean) value. After the `do` keyword, add the code that you want to run while the `condition` is `true`. The while loop concludes with `end while`.
|
||||
|
||||
The condition is tested before any code runs. Which means that if the condition is false, the code inside the loop doesn't execute.
|
||||
|
||||
### Example: diagonal line
|
||||
|
||||
The following example uses a while loop to make a diagonal line on the LED screen (points `0, 0`, `1, 1`, `2, 2`, `3, 3`, `4, 4`).
|
||||
|
||||
```blocks
|
||||
let index = 4;
|
||||
while(index >= 0) {
|
||||
led.plot(index, index);
|
||||
index--;
|
||||
}
|
||||
```
|
||||
|
||||
### See also
|
||||
|
||||
[on button pressed](/reference/input/on-button-pressed), [for](/blocks/loops/for), [if](/blocks/logic/if), [forever](/reference/basic/forever)
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
# Math
|
||||
|
||||
### [Numeric](/reference/types/number) values: 0, 1, 2, ...
|
||||
|
||||
```block
|
||||
0;
|
||||
1;
|
||||
2;
|
||||
```
|
||||
|
||||
### Arithmetic binary operation (+, -, *, /)
|
||||
|
||||
```block
|
||||
0+1;
|
||||
0-1;
|
||||
1*2;
|
||||
3/4;
|
||||
```
|
||||
|
||||
### Absolute value
|
||||
|
||||
```block
|
||||
Math.abs(-5);
|
||||
```
|
||||
|
||||
### Minimum/maximum of two values
|
||||
|
||||
```block
|
||||
Math.min(0, 1);
|
||||
```
|
||||
|
||||
### Random value
|
||||
|
||||
```block
|
||||
Math.random(5);
|
||||
```
|
||||
@@ -1,21 +0,0 @@
|
||||
# Variables
|
||||
|
||||
[Assign](/blocks/variables/assign) (set) a variable's value
|
||||
|
||||
```blocks
|
||||
let x = 0;
|
||||
```
|
||||
|
||||
Get a variable's value
|
||||
|
||||
```blocks
|
||||
let x = 0;
|
||||
x;
|
||||
```
|
||||
|
||||
[Change](/blocks/variables/change-var) a variable's value
|
||||
|
||||
```blocks
|
||||
let x = 0;
|
||||
x+=1;
|
||||
```
|
||||
@@ -1,36 +0,0 @@
|
||||
# Assignment Operator
|
||||
|
||||
Use an equals sign to make a [variable](/blocks/variables/var) store the [number](/reference/types/number)
|
||||
or [string](/reference/types/string) you say.
|
||||
|
||||
When you use the equals sign to store something in a variable, the equals sign is called
|
||||
an *assignment operator*, and what you store is called a *value*.
|
||||
|
||||
### Storing numbers in variables
|
||||
|
||||
This program makes the variable `item` equal `5` and then shows it on the [LED screen](/device/screen).
|
||||
|
||||
````blocks
|
||||
let item = 5
|
||||
basic.showNumber(item)
|
||||
````
|
||||
|
||||
### Storing strings in variables
|
||||
|
||||
This program makes the variable `name` equal `Joe` and then shows it on the [LED screen](/device/screen).
|
||||
|
||||
````blocks
|
||||
let name = "Joe"
|
||||
basic.showString(name);
|
||||
````
|
||||
|
||||
### Notes
|
||||
|
||||
You can use the assignment operator with variables of
|
||||
every [type](/reference/types). A *type* is which kind of thing
|
||||
a variable can store, like a number or string.
|
||||
|
||||
### See also
|
||||
|
||||
[variable](/blocks/variables/var), [types](/reference/types)
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
# Change Value
|
||||
|
||||
Set the value for local and global variables.
|
||||
|
||||
### @parent blocks/change-value
|
||||
|
||||
Change the value of a variable
|
||||
|
||||
```blocks
|
||||
let x = 0
|
||||
x += 1
|
||||
```
|
||||
|
||||
### Declare a variable
|
||||
|
||||
Use the assignment operator to set the value of a [variable](/blocks/variables/var). Change the value of a variable from 0 to 1 using the change item block. Like this:
|
||||
|
||||
```blocks
|
||||
let x = 0
|
||||
x += 1
|
||||
```
|
||||
|
||||
### Example
|
||||
|
||||
Use the assignment operator to set the value of a [variable](/blocks/variables/var). Change the value of a variable from 0 to 1 using the change item block. Then display the new value of the variable on the LED screen. Like this:
|
||||
|
||||
```blocks
|
||||
let x = 0;
|
||||
x += 1;
|
||||
basic.showNumber(x);
|
||||
```
|
||||
|
||||
### Notes
|
||||
|
||||
* You can use the assignment operator with variables of each of the supported [types](/reference/types).
|
||||
|
||||
### See also
|
||||
|
||||
[variable](/blocks/variables/var), [types](/reference/types)
|
||||
|
||||
@@ -1,87 +0,0 @@
|
||||
# Local Variables
|
||||
|
||||
How to define and use local variables.
|
||||
|
||||
### @parent language
|
||||
|
||||
A variable is a place where you can store and retrieve data. Variables have a name, a [type](/reference/types), and value:
|
||||
|
||||
* *name* is how you'll refer to the variable
|
||||
* *type* refers to the kind of data a variable can store
|
||||
* *value* refers to what's stored in the variable
|
||||
|
||||
### Var statement
|
||||
|
||||
Use the Block Editor variable statement to create a variable
|
||||
and the [assignment operator](/blocks/variables/assign)
|
||||
to store something in the variable.
|
||||
|
||||
For example, this code stores the number `2` in the `x` variable:
|
||||
|
||||
```blocks
|
||||
let x = 2;
|
||||
```
|
||||
Here's how to define a variable in the Block Editor:
|
||||
|
||||
1. Click `variables`.
|
||||
|
||||
2. Change the default variable name if you like.
|
||||
|
||||
3. Drag a block type on the right-side of the [assignment operator](/blocks/variables/assign) and click the down arrow to change the variable name.
|
||||
|
||||
A variable is created for the number returned by the [brightness](/reference/led/brightness) function.
|
||||
|
||||
```blocks
|
||||
let b = led.brightness();
|
||||
```
|
||||
|
||||
### Using variables
|
||||
|
||||
Once you've defined a variable, just use the variable's name whenever you need what's stored in the variable. For example, the following code shows the value stored in `counter` on the LED screen:
|
||||
|
||||
```blocks
|
||||
let counter = 1;
|
||||
basic.showNumber(counter);
|
||||
```
|
||||
|
||||
To change the contents of a variable use the assignment operator. The following code sets `counter` to 1 and then increments `counter` by 10:
|
||||
|
||||
```blocks
|
||||
let counter = 1;
|
||||
counter = counter + 10;
|
||||
basic.showNumber(counter);
|
||||
```
|
||||
|
||||
### Why use variables?
|
||||
|
||||
If you want to remember and modify data, you'll need a variable.
|
||||
A counter is a great example:
|
||||
|
||||
```blocks
|
||||
let counter = 0;
|
||||
input.onButtonPressed(Button.A, () => {
|
||||
counter = counter + 1;
|
||||
basic.showNumber(counter);
|
||||
});
|
||||
```
|
||||
|
||||
### Local variables
|
||||
|
||||
Local variables exist only within the function or block of code where they're defined. For example:
|
||||
|
||||
```blocks
|
||||
// x does NOT exist here.
|
||||
if (led.brightness() > 128) {
|
||||
// x exists here
|
||||
let x = 0;
|
||||
}
|
||||
```
|
||||
|
||||
#### Notes
|
||||
|
||||
* You can use the default variable names if you'd like, however, it's best to use descriptive variable names. To change a variable name in the editor, select the down arrow next to the variable and then click "new variable".
|
||||
|
||||
### See also
|
||||
|
||||
[types](/reference/types), [assignment operator](/blocks/variables/assign)
|
||||
|
||||
@@ -1,103 +0,0 @@
|
||||
# Unsupported configuration
|
||||
|
||||
Your browser is currently not supported. The following configurations are supported:
|
||||
|
||||
## Windows
|
||||
|
||||
You need one of these browsers running on Windows 7, Windows 8, Windows 8.1, or
|
||||
Windows 10:
|
||||
|
||||
* Internet Explorer 11
|
||||
* Microsoft Edge
|
||||
* Google Chrome
|
||||
* Mozilla Firefox
|
||||
|
||||
## Mac
|
||||
|
||||
You need one of these browsers running on OS X 10.9 Mavericks, OS X 10.10
|
||||
Yosemite, OS X 10.11 El Capitan, or macOS 10.12 Sierra:
|
||||
|
||||
* Safari
|
||||
* Google Chrome
|
||||
* Mozilla Firefox
|
||||
|
||||
## Linux
|
||||
|
||||
If you're using a Raspberry Pi, please see [the documentation
|
||||
here](/raspberry-pi).
|
||||
|
||||
You need to be running a Linux distribution recent enough to run the most recent
|
||||
version of one of the following:
|
||||
|
||||
* Google Chrome, or Chromium
|
||||
* Mozilla Firefox, Iceweasel, or Seamonkey
|
||||
|
||||
## How to check your OS or browser
|
||||
|
||||
### Windows
|
||||
|
||||
* Click on the Start menu
|
||||
* Type 'System'
|
||||
* Click on the app called 'System'
|
||||
* The version of Windows you are using will be displayed:
|
||||
|
||||

|
||||
|
||||
### Mac
|
||||
|
||||
* Click on the Apple icon in the top left
|
||||
* Click on 'About this Mac'
|
||||
* This window will be displayed:
|
||||
|
||||

|
||||
|
||||
### Internet Explorer
|
||||
|
||||
* Click on the Settings icon in the top right
|
||||
* Click 'About Internet Explorer'
|
||||
* This window will be displayed:
|
||||
|
||||

|
||||
|
||||
### Edge
|
||||
|
||||
Edge automatically updates, so you should always be using the latest version
|
||||
|
||||
* Click on the menu icon in the top right (three dots)
|
||||
* Scroll to the bottom
|
||||
* Information similar to the following will be displayed:
|
||||
|
||||

|
||||
|
||||
### Google Chrome
|
||||
|
||||
Google Chrome automatically updates, so you should always be using the latest version
|
||||
|
||||
* Click on the menu icon in the top right (three dots)
|
||||
* Click Help, and About Google Chrome
|
||||
* Information similar to the following will be displayed:
|
||||
|
||||

|
||||
|
||||
### Firefox
|
||||
|
||||
Firefox automatically updates, so you should always be using the latest version
|
||||
|
||||
* Click on the menu icon in the top right (three horizontal lines)
|
||||
* Click the question mark icon (help button)
|
||||
* Click 'About Firefox'
|
||||
|
||||

|
||||
|
||||
### Safari
|
||||
|
||||
Safari updates when your operating system updates, so if you are using the
|
||||
latest version of OS X then you'll be using the latest version of Safari.
|
||||
|
||||
* Click on the Safari menu in the top left
|
||||
* Click 'About Safari'
|
||||
|
||||

|
||||
|
||||
IT administrators should check which browser versions are supported
|
||||
[here](/browsers/technical).
|
||||
@@ -1,16 +0,0 @@
|
||||
# Recommended browser for Linux
|
||||
|
||||
As you are using Linux, it is recommended that you use [Mozilla
|
||||
Firefox][firefox] or [Google Chrome][chrome].
|
||||
|
||||
Please see [here][technical] for technical information on which browsers are
|
||||
supported, or [here][versions] to check which version you are using.
|
||||
|
||||
[edge]: https://www.microsoft.com/en-us/windows/microsoft-edge
|
||||
[ie]: https://www.microsoft.com/en-us/download/internet-explorer.aspx
|
||||
[firefox]: https://www.mozilla.org/en-US/firefox/new/
|
||||
[chrome]: https://www.google.com/chrome/
|
||||
[opera]: https://www.opera.com
|
||||
[safari]: http://www.apple.com/safari/
|
||||
[technical]: /browsers/technical
|
||||
[versions]: /browsers
|
||||
@@ -1,16 +0,0 @@
|
||||
# Recommended browser for Mac
|
||||
|
||||
As you are using a Mac, it is recommended that you use [Safari][]. Alternatively,
|
||||
[Google Chrome][chrome] and [Mozilla Firefox][firefox] are also supported.
|
||||
|
||||
Please see [here][technical] for technical information on which browsers are
|
||||
supported, or [here][versions] to check which version you are using.
|
||||
|
||||
[edge]: https://www.microsoft.com/en-us/windows/microsoft-edge
|
||||
[ie]: https://www.microsoft.com/en-us/download/internet-explorer.aspx
|
||||
[firefox]: https://www.mozilla.org/en-US/firefox/new/
|
||||
[chrome]: https://www.google.com/chrome/
|
||||
[opera]: https://www.opera.com
|
||||
[safari]: http://www.apple.com/safari/
|
||||
[technical]: /browsers/technical
|
||||
[versions]: /browsers
|
||||
@@ -1,36 +0,0 @@
|
||||
# Technical information about browser support
|
||||
|
||||
[pxt.microbit.org][] requires that you use a recent version of a modern
|
||||
browser, such as Microsoft Edge, Google Chrome, Mozilla Firefox, Safari, Opera,
|
||||
or IE11. This is because the editor uses modern web technologies such as [web
|
||||
workers][] to enable compiling [TypeScript][] in the browser, or the using the
|
||||
same [Monaco][] editor that powers [Visual Studio Code][].
|
||||
|
||||
[pxt.microbit.org]: https://pxt.microbit.org
|
||||
[web workers]: http://www.w3.org/TR/workers/
|
||||
[typescript]: http://www.typescriptlang.org
|
||||
[monaco]: https://microsoft.github.io/monaco-editor/
|
||||
[visual studio code]: http://code.visualstudio.com
|
||||
|
||||
Most modern browsers automatically update themselves, but in some environments
|
||||
such as schools these automatic updates are disabled for security. **We
|
||||
strongly recommend that you use the most recent version of any of these
|
||||
browsers**, but if you can't then you must use at least:
|
||||
|
||||
| Browser | Minimum version | Release date | Windows | Mac |
|
||||
| ----------------- | --------------- | -------------- | ----------- | ---------- |
|
||||
| Edge | 12 | March 2015 | Windows 10+ | N/A |
|
||||
| Internet Explorer | 11 | October 2013 | Windows 7+ | N/A |
|
||||
| Mozilla Firefox | 31 ESR | July 2014 | Windows XP+ | OS X 10.6+ |
|
||||
| Google Chrome | 38 | October 2014 | Windows XP+ | OS X 10.6+ |
|
||||
| Safari | 9 | September 2015 | N/A | OS X 10.9+ |
|
||||
| Opera | 21 | May 2014 | Windows 7+ | OS X 10.9+ |
|
||||
|
||||
|
||||
Please see our information for which browsers are recommended for [Windows][],
|
||||
[Mac][], [Linux][], or [Raspberry Pi][].
|
||||
|
||||
[Windows]: /browsers/windows
|
||||
[Mac]: /browsers/mac
|
||||
[Linux]: /browsers/linux
|
||||
[Raspberry Pi]: /raspberry-pi
|
||||
@@ -1,18 +0,0 @@
|
||||
# Recommended browser for Windows
|
||||
|
||||
We recommend [Microsoft Edge][edge] if you are running Windows 10, but users on
|
||||
Windows 7 or higher can use [Internet Explorer 11][ie] or recent versions of
|
||||
[Mozilla Firefox][firefox], [Google Chrome][chrome], or [Opera][opera].
|
||||
|
||||
|
||||
Please see [here][technical] for technical information on which browsers are
|
||||
supported, or [here][versions] to check which version you are using.
|
||||
|
||||
[edge]: https://www.microsoft.com/en-us/windows/microsoft-edge
|
||||
[ie]: https://www.microsoft.com/en-us/download/internet-explorer.aspx
|
||||
[firefox]: https://www.mozilla.org/en-US/firefox/new/
|
||||
[chrome]: https://www.google.com/chrome/
|
||||
[opera]: https://www.opera.com
|
||||
[safari]: http://www.apple.com/safari/
|
||||
[technical]: /browsers/technical
|
||||
[versions]: /browsers
|
||||
@@ -0,0 +1,17 @@
|
||||
# Projects
|
||||
|
||||
Here are some cool tutorials to get you started with your @boardname@!
|
||||
|
||||
## Basic
|
||||
|
||||
```codecard
|
||||
[
|
||||
{
|
||||
"name": "Radio Bridge",
|
||||
"description": "Send radio messages to editor",
|
||||
"url": "/projects/radio-bridge",
|
||||
"imageUrl": "/static/mb/projects/radio-bridge.png",
|
||||
"cardType": "example"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 51 KiB |
@@ -0,0 +1,110 @@
|
||||
# Projects
|
||||
|
||||
Here are some cool tutorials to get you started with your @boardname@!
|
||||
|
||||
## Basic
|
||||
|
||||
```codecard
|
||||
[
|
||||
{
|
||||
"name": "Get Ready",
|
||||
"url":"/calliope/firststeps/firstSteps",
|
||||
"description": "Find out how to start working with the Calliope mini",
|
||||
"imageUrl": "/docs/calliope/firststeps/connecting.jpg",
|
||||
"largeImageUrl": "/docs/calliope/firststeps/firstSteps.jpg",
|
||||
"cardType": "tutorial",
|
||||
"label": "Never seen a mini? Start Here!",
|
||||
"labelClass": "green small ribbon"
|
||||
},
|
||||
{
|
||||
"name": "The 5x5 LED matrix",
|
||||
"url":"/calliope/firststeps/5x5LED",
|
||||
"description": "Learn how to create and show images, numbers or letters on the LED matrix",
|
||||
"imageUrl": "/docs/calliope/firststeps/5x5LED.jpg",
|
||||
"largeImageUrl": "/docs/calliope/firststeps/5x5LED_L.jpg",
|
||||
"cardType": "tutorial",
|
||||
"label": "New? Start Here!",
|
||||
"labelClass": "yellow small ribbon"
|
||||
},
|
||||
{
|
||||
"name": "Radio",
|
||||
"url":"/calliope/firststeps/Radio",
|
||||
"description": "Find out how to use the radion function and how to send messages from one Calliope mini to another one",
|
||||
"imageUrl": "/docs/calliope/firststeps/Radio.jpg",
|
||||
"largeImageUrl": "/docs/calliope/firststeps/Radio_L.jpg",
|
||||
"cardType": "tutorial",
|
||||
"label": "",
|
||||
"labelClass": "orange small ribbon"
|
||||
},
|
||||
{
|
||||
"name": "Loops",
|
||||
"url":"/calliope/firststeps/Loops",
|
||||
"description": "Loops are important to be able to execute program instructions multiple times",
|
||||
"imageUrl": "/docs/calliope/firststeps/Loops.jpg",
|
||||
"largeImageUrl": "/docs/calliope/firststeps/Loops_L.jpg",
|
||||
"cardType": "tutorial",
|
||||
"label": "",
|
||||
"labelClass": "green small ribbon"
|
||||
},
|
||||
{
|
||||
"name": "Mathematics",
|
||||
"url":"/calliope/firststeps/Mathematics",
|
||||
"description": "The Calliope mini can become your little math helper",
|
||||
"imageUrl": "/docs/calliope/firststeps/Mathematics.jpg",
|
||||
"largeImageUrl": "/docs/calliope/firststeps/Mathematics_L.jpg",
|
||||
"cardType": "tutorial",
|
||||
"label": "",
|
||||
"labelClass": "green small ribbon"
|
||||
},
|
||||
{
|
||||
"name": "Inputs",
|
||||
"url":"/calliope/firststeps/Inputs",
|
||||
"description": "Use conditions for different actions",
|
||||
"imageUrl": "/docs/calliope/firststeps/Inputs.jpg",
|
||||
"largeImageUrl": "/docs/calliope/firststeps/Inputs_L.jpg",
|
||||
"cardType": "tutorial",
|
||||
"label": "",
|
||||
"labelClass": "green small ribbon"
|
||||
},
|
||||
{
|
||||
"name": "Sensors",
|
||||
"url":"/calliope/firststeps/Sensors",
|
||||
"description": "Measure temperature, light and orientation",
|
||||
"imageUrl": "/docs/calliope/firststeps/Sensors.jpg",
|
||||
"largeImageUrl": "/docs/calliope/firststeps/Sensors_L.jpg",
|
||||
"cardType": "tutorial",
|
||||
"label": "",
|
||||
"labelClass": "green small ribbon"
|
||||
},
|
||||
{
|
||||
"name": "Output",
|
||||
"url":"/calliope/firststeps/Output",
|
||||
"description": "Audio, light and motion",
|
||||
"imageUrl": "/docs/calliope/firststeps/Output.jpg",
|
||||
"largeImageUrl": "/docs/calliope/firststeps/Output_L.jpg",
|
||||
"cardType": "tutorial",
|
||||
"label": "",
|
||||
"labelClass": "green small ribbon"
|
||||
},
|
||||
{
|
||||
"name": "Decisions",
|
||||
"url":"/calliope/firststeps/Decisions",
|
||||
"description": "If..., then it happens... or it happens...",
|
||||
"imageUrl": "/docs/calliope/firststeps/Decisions.jpg",
|
||||
"largeImageUrl": "/docs/calliope/firststeps/Decisions_L.jpg",
|
||||
"cardType": "tutorial",
|
||||
"label": "",
|
||||
"labelClass": "green small ribbon"
|
||||
},
|
||||
{
|
||||
"name": "Variables",
|
||||
"url":"/calliope/firststeps/Variables",
|
||||
"description": "A variable is not a static value, it’s what you determine it to be.",
|
||||
"imageUrl": "/docs/calliope/firststeps/Variables.jpg",
|
||||
"largeImageUrl": "/docs/calliope/firststeps/Variables_L.jpg",
|
||||
"cardType": "tutorial",
|
||||
"label": "",
|
||||
"labelClass": "green small ribbon"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
After Width: | Height: | Size: 12 KiB |
@@ -0,0 +1,58 @@
|
||||
# ERSTE SCHRITTE: The 5X5 LED MATRIX
|
||||
|
||||
## Introduction @unplugged
|
||||
|
||||
Amongst other things, the Calliope mini comes with 25 red LEDs that can be turned on and off individually. If, for example, you wanted to display your name, you could program individual LEDs to light up in sequence so as to display the letters of your name one after the other. As this would be rather complex, you can also enter the character string into a text field and the Calliope Mini will light up the necessary LEDs in the correct order for you.
|
||||
|
||||
## Step 1 @fullscreen
|
||||
|
||||
|
||||
### DISPLAYING A CHARACTER STRING
|
||||
To show your chosen sting of characters on the LED matrix, select the show string block from the Basic menu. Next, drag and attach this block to the Start block in the main screen. The text contained within the inverted commas will now be displayed on the Calliope mini when the program is started.
|
||||
|
||||
```blocks
|
||||
basic.showString("hi!")
|
||||
```
|
||||
|
||||
## Step 2 @fullscreen
|
||||
|
||||
### DISPLAYING NUMBERS
|
||||
If you’d prefer to show a number instead of text, replace the text block in the main screen with the show number block from the Basic menu.
|
||||
|
||||
```blocks
|
||||
basic.showNumber(0)
|
||||
```
|
||||
|
||||
## Step 3 @fullscreen
|
||||
|
||||
### DISPLAYING IMAGES
|
||||
To display a heart, a smiley or even a duck on your Calliope mini, Choose the show iconn block from the Basic menu and select any number of different images by simply clicking on the picture in the block.
|
||||
|
||||
```blocks
|
||||
basic.showIcon(IconNames.Heart)
|
||||
```
|
||||
|
||||
## Step 4 @fullscreen
|
||||
|
||||
You can also create your very own images:
|
||||
Just select this block from the Basic menu and click in the boxes to create your very own image.
|
||||
|
||||
```blocks
|
||||
basic.showLeds(`
|
||||
. . . . .
|
||||
. . . . .
|
||||
. . . . .
|
||||
. . . . .
|
||||
. . . . .
|
||||
`)
|
||||
```
|
||||
|
||||
## Step 4 @fullscreen
|
||||
|
||||
Wenn du keine Pause zwischen 2 Bildern festlegst, zeigt der Calliope mini das erste Bild null Sekunden lang, also gar nicht. Den Warte ms Block findest du im Menü Kontrolle.
|
||||
|
||||
```blocks
|
||||
basic.showIcon(IconNames.Heart)
|
||||
basic.pause(100)
|
||||
basic.showIcon(IconNames.Yes)
|
||||
```
|
||||
|
After Width: | Height: | Size: 60 KiB |
|
After Width: | Height: | Size: 14 KiB |
@@ -0,0 +1,23 @@
|
||||
# ERSTE SCHRITTE: DAS 5X5 LED RASTER
|
||||
|
||||
## Introduction @unplugged
|
||||
|
||||
Options within a program can be made dependent not only on inputs, but also on other conditions. For example, you can create an oracle that randomly shows a sad or a happy smiley:
|
||||
|
||||
## Step 1 @fullscreen
|
||||
|
||||
### If – then do relationship
|
||||
The actions below the "then“ are only executed if the condition before is fulfilled.
|
||||
In this case, the heart will not be visible on the LED grid, as the decision variable is not equal to 1. You can find the if…then block in the Logic section.
|
||||
|
||||
## Step 2 @fullscreen
|
||||
|
||||
### And on we go
|
||||
After the if…then block the program continues in any case, no matter whether the condition was fulfilled before or not.
|
||||
|
||||
## Step 3 @fullscreen
|
||||
|
||||
### If – then – else
|
||||
If you expand the if…then block, the first if condition is checked first, if it is not fulfilled the second if condition is checked. Only those actions are triggered for which the associated condition is fulfilled.
|
||||
|
||||
Click on the + on the bottom of the block to unfold the if…then block. The probability to display either a happy or a sad smiley on the LED grid is 50/50.
|
||||
|
After Width: | Height: | Size: 133 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
@@ -0,0 +1,32 @@
|
||||
# FIRST STEPS: INPUTS
|
||||
|
||||
## Introduction @unplugged
|
||||
|
||||
So far all the programmed text, numbers and images have been displayed on the LED matrix immediately after being loaded onto the Calliope mini. However, if you would prefer to have an event take place after a specific input, you need to use the one of the main blocks from the Input section. In this case we are using the "on button A pressed“ block. By using this block, the Calliope mini will wait until your chosen condition is met before anything is displaying.
|
||||
|
||||
## Step 1 @fullscreen
|
||||
|
||||
### Buttons
|
||||
The Calliope mini has two input buttons: Button A (in red) and Button B (in blue). When one of the buttons is pressed, the circuit is completed.
|
||||
By using the "on button A pressed“ block from Input, you can display your output as soon as button A has been pressed.
|
||||
|
||||
## Step 2 @fullscreen
|
||||
|
||||
### Shake
|
||||
You can request the position and movement of the Calliope mini and run an action once a change of the values has been detected.
|
||||
Use the "on shake“ block from the Input section. Add an "show string Hi!" block from the Basic section and change the content of the string.Your text will be displayed when you shake the Calliope mini. The gesture can be changed by using the dropdown menu to choose the condition.
|
||||
|
||||
## Step 3 @fullscreen
|
||||
|
||||
### Pins
|
||||
The Calliope mini has five rounded corners: -, +, 0 , 1, 2, and 3. If you place one finger on the – corner and another finger on one of the numbered corners, a small electrical current will flow through your body and back to the Calliope mini, thus closing the electrical circuit.
|
||||
|
||||
Use the „on pin Pin0 pressed" block from Input. Use the "show string Hi!" block from the basic section.
|
||||
Your text will be displayed when pin – and pin 0 are both pressed at the same time.
|
||||
|
||||
## Step 4 @fullscreen
|
||||
|
||||
### Various input
|
||||
You can program the Calliope mini to respond to more than one input. There are two possible ways of doing this:
|
||||
You can use indiviual events separated from each other with different actions to run after that condition is met.
|
||||
Nevertheless, you can also use an "if" or "while" condition (from the Logic and Loops sections) and wait for your inputs to be met.
|
||||
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 12 KiB |
@@ -0,0 +1,18 @@
|
||||
# FIRST STEPS: LOOPS
|
||||
|
||||
## Introduction @unplugged
|
||||
|
||||
As you may have noticed in previous exercises, your program was executed only once by Calliope mini. To change this, you can use loops. Use an infinite loop so that the text runs over the LED grid of your Calliope mini infinitely often.
|
||||
|
||||
## Step 1 @fullscreen
|
||||
|
||||
### Infinite loop
|
||||
The simplest way is to use a foverever block, from the basic section.
|
||||
Everything inside will be repeated forever.
|
||||
|
||||
## Step 2 @fullscreen
|
||||
|
||||
Of course, you can also specify how often something should be repeated:
|
||||
|
||||
### Repeat block
|
||||
Use the „on start“ block or any other block that usually initiates a one time cycle. Take the "Repeat 4 times" block from the Loops section and enter the desired number in the number field. Whatever task is within this block will be executed for the number of times you entered within the “Repeat …“ number.
|
||||
|
After Width: | Height: | Size: 94 KiB |
|
After Width: | Height: | Size: 12 KiB |
@@ -0,0 +1,17 @@
|
||||
# FIRST STEPS: MATHEMATICS
|
||||
|
||||
## Introduction @unplugged
|
||||
|
||||
Calliope mini offers you the possibility to use different mathematical operations. You can calculate numbers, create random numbers and save your results in variables.
|
||||
|
||||
## Step 1 @fullscreen
|
||||
|
||||
### Calculation of numbers
|
||||
The Calliope mini is able to perform the 4 basic arithmetic operations addition, subtraction, multiplication and division out of the box:
|
||||
|
||||
You can find the required block in the menu Math. From the block's drop-down list you can choose between the four basic arithmetic operations and the exponentiation. To see the result of your calculation, you have to put the block inside a „show number" block from the Basic section. The Calliope mini displays the result of your calculation on the LED grid.
|
||||
|
||||
## Step 2 @fullscreen
|
||||
|
||||
### Random numbers
|
||||
You can have Calliope mini create a random number: You can find the corresponding block in the menu Math ("pick random 0 to 10"). By changing the two numbers within the block, you determine how small or how large the random number is allowed to become.
|
||||
|
After Width: | Height: | Size: 107 KiB |
|
After Width: | Height: | Size: 12 KiB |
@@ -0,0 +1,23 @@
|
||||
# ERSTE SCHRITTE: DAS 5X5 LED RASTER
|
||||
|
||||
## Introduction @unplugged
|
||||
|
||||
As well as the red LED matrix the Calliope mini also has a built-in loudspeaker (or piezo speaker to be more precise) that allows you to play different tones and an LED with which you can display a huge variety of different colours.
|
||||
|
||||
## Step 1 @fullscreen
|
||||
|
||||
### The RGB-LED
|
||||
The white square under the LED matrix is the RGB-LED. Itworks in exactly the same way as watercolours do. Within this LED there are three smaller LEDs: one red, one green and one blue. When you select a colour in your programming environment, the Calliope mini will automatically display this colour by mixing the three base colours together,
|
||||
|
||||
Within the Basic section you select the "set led to red“ block and
|
||||
|
||||
## Step 2 @fullscreen
|
||||
|
||||
### Light sensor
|
||||
The light is measured by the LED matrix. You can select the light sensor by dragging the block from the Input section into the number block. With this block you can change the colour you want to display. Simply click on the red tap and choose another colour from the menu.
|
||||
To turn the LED off, you can use the "turn build-in led off“ block or put the value "0“ on the name of the color.
|
||||
|
||||
## Step 3 @fullscreen
|
||||
|
||||
### The speaker
|
||||
You can play individual notes or music pieces. Simply open the Music section and drag the "play tone 262 Hz for 1 beat“ and chance the value of the tone to see how you can adjust the height of the note.
|
||||
|
After Width: | Height: | Size: 99 KiB |
|
After Width: | Height: | Size: 15 KiB |
@@ -0,0 +1,25 @@
|
||||
# FIRST STEPS: RADIO
|
||||
|
||||
## Introduction @unplugged
|
||||
|
||||
There is a Radio module built into the Calliope Mini. This allows for several Calliope mini to communicate with each other and transmit information. To try this out yourself, you will need at least two Calliope mini.
|
||||
|
||||
|
||||
## Step 1 @fullscreen
|
||||
|
||||
### Allocating a channel
|
||||
Firstly you must decide on a channel to use. Only those Calliope mini that are using the same channel will be able to exchange messages with each other. A Calliope mini will not be able to transmit or receive over several channels at the same time. To be able to send information, you must open the radio block and use the radio set group block.
|
||||
Please ensure that the channel number you select is between 0 and 255.
|
||||
|
||||
## Step 2 @fullscreen
|
||||
|
||||
### Sending a message
|
||||
To send a message you should select the "radio send string“ block. Now you can enter the string that will be sent on the channel.
|
||||
|
||||
## Step 3 @fullscreen
|
||||
|
||||
###Receive a message
|
||||
Set the same channel as on the sending Calliope mini one.
|
||||
Use the "on radio received receivedString“ block to look for data.
|
||||
Include the "show string receivedString“ inside.
|
||||
Let’s try with two (or more) Calliope mini!
|
||||
|
After Width: | Height: | Size: 133 KiB |
|
After Width: | Height: | Size: 13 KiB |
@@ -0,0 +1,30 @@
|
||||
# ERSTE SCHRITTE: DAS 5X5 LED RASTER
|
||||
|
||||
## Introduction @unplugged
|
||||
|
||||
The Calliope mini is equipped with a number of sensors: It has a temperature sensor, a light sensor, a compass as well as a microphone.
|
||||
|
||||
## Step 1 @fullscreen
|
||||
|
||||
### Displaying sensor data
|
||||
In order to display data from your sensors on the Calliope mini’s LED matrix, you need to select a sensor (value). To do so go to the Basic section and select the "show number 0“ block. Within the number you can now change the "0“ to the value of a sensor.
|
||||
|
||||
## Step 2 @fullscreen
|
||||
|
||||
### Acceleration sensor
|
||||
You can select the acceleration values by dragging the block from the Input section and place it on top of the "0“ (which will disappear).
|
||||
|
||||
## Step 3 @fullscreen
|
||||
|
||||
### Light sensor
|
||||
The light is measured by the LED matrix. You can select the light sensor by dragging the block from the Input section into the number block.
|
||||
|
||||
## Step 4 @fullscreen
|
||||
|
||||
### Compass
|
||||
The built in magnetometer allows the Calliope mini to tell in which direction it is facing. This sensor will provide a value between 0 and 360 degrees. The compass will need to be calibrated before use. Follow the instructions on the Calliope mini and tilt it in a circular fashion to display a complete circle. You can start using it by dragging the block from the Input section into the number block.
|
||||
|
||||
## Step 4 @fullscreen
|
||||
|
||||
### Temperature sensor
|
||||
You can select the temperature sensor by dragging the block from the Input section into the number block.
|
||||
|
After Width: | Height: | Size: 116 KiB |
|
After Width: | Height: | Size: 9.6 KiB |
@@ -0,0 +1,20 @@
|
||||
# ERSTE SCHRITTE: DAS 5X5 LED RASTER
|
||||
|
||||
## Introduction @unplugged
|
||||
|
||||
As in a football match, where the number of goals scored during the match can change, the value of a variable can also change during a running program.
|
||||
|
||||
By clicking on the Variables section and then on the "Make a variable…“ button within this section you will generate a new variable. Now you can determine the name.
|
||||
|
||||
## Step 1 @fullscreen
|
||||
|
||||
By clicking on the Variables section and then on the "Make a variable…“ button within this section you will generate a new variable. Now you can determine the name.
|
||||
|
||||
## Step 2 @fullscreen
|
||||
|
||||
You can find a separate block for each variable, which you can use to display its value on the LED grid of Calliope mini by selecting the "show number 0“ block and use the "set variable to 0“ block from the Variables section and add this on a line before. if you change this number, the number on the grid will change accordingly.
|
||||
|
||||
## Step 3 @fullscreen
|
||||
|
||||
### Count your score
|
||||
By combining what you have learned so far, you can program a simple score counter: When button A is pressed, the number of goals variable is increased by one numerical value and then displayed. Have a try!
|
||||
|
After Width: | Height: | Size: 81 KiB |
|
After Width: | Height: | Size: 122 KiB |
|
After Width: | Height: | Size: 123 KiB |
@@ -0,0 +1,61 @@
|
||||
# First Steps
|
||||
|
||||
## Introduction @unplugged
|
||||
|
||||
### 1) Connecting
|
||||
|
||||
Connect your mini to your computer via a micro USB cable or Bluetooth. Macs, PCs, Chromebooks, Linux systems, Smartphones and Tablets are supported.
|
||||
|
||||
Your Calliope mini will show up on your computer as a drive called 'MINI'.
|
||||
|
||||
Open your favourite browser and head to our website and select Editor in the main navigation.
|
||||
|
||||
For example drag and drop some blocks and try your program on the Simulator within the editor.
|
||||
|
||||
Click the Download button in the editor. This will download a 'hex' file, which is a compact format of your program that your mini can read. Once the file has been downloaded, just copy it to your Calliope mini just like copying a file to a USB stick.
|
||||
|
||||

|
||||
|
||||
|
||||
## Introduction @unplugged
|
||||
|
||||
### 2) Power it Up
|
||||
|
||||
The Calliope mini requires a power source to work. You can either connect your Calliope mini directly to a computer using a Micro USB cable or you can power it using a battery pack.
|
||||
Here are the instructions on how to connect the battery pack to your Calliope mini:
|
||||
|
||||
The supplied battery pack requires two AAA batteries.
|
||||
|
||||
Carefully insert the small white plastic connector from the battery pack into the board’s battery socket.
|
||||
|
||||
Be careful to insure that the ridge on the plug is facing upwards.
|
||||
|
||||
If the plug slides easily into the socket then you are attaching it correctly. Otherwise, turn the plug round and re-insert it into the socket. Slide it to "on“ and your Calliope mini is powered by the batteries.
|
||||
|
||||

|
||||
|
||||
|
||||
## Introduction @unplugged
|
||||
|
||||
### 3) Play!
|
||||
|
||||
You can now play arround or try some of our other guided first-steps tutorials...
|
||||
|
||||
[Learn how to write your name on the LED-Matrix](#tutorial:/calliope/firststeps/5x5LED)
|
||||
|
||||
[Play with colors and sound](#tutorial:/calliope/firststeps/Output)
|
||||
|
||||
[See how to Controll your mini with the buttons and pins](#tutorial:/calliope/firststeps/Inputs)
|
||||
|
||||
|
||||
## Step 1
|
||||
|
||||
Play!
|
||||
|
||||
You can now play arround or try some of our other guided first-steps tutorials...
|
||||
|
||||
[Learn how to write your name on the LED-Matrix](#tutorial:/calliope/firststeps/5x5LED)
|
||||
|
||||
[Play with colors and sound](#tutorial:/calliope/firststeps/Output)
|
||||
|
||||
[See how to Controll your mini with the buttons and pins](#tutorial:/calliope/firststeps/Inputs)
|
||||
|
After Width: | Height: | Size: 249 KiB |
@@ -0,0 +1,47 @@
|
||||
# Projects
|
||||
|
||||
Here are some cool tutorials to get you started with your @boardname@!
|
||||
|
||||
## Basic
|
||||
|
||||
```codecard
|
||||
[
|
||||
{
|
||||
"name": "Shop",
|
||||
"url":"https://shop.calliope.cc",
|
||||
"description": "You can get the mini at the official calliope store.",
|
||||
"imageUrl": "/docs/calliope/links/thumbnail_shop.gif",
|
||||
"largeImageUrl": "",
|
||||
"label": "",
|
||||
"buttonLabel": "Open Calliope Shop",
|
||||
"labelClass": "green small ribbon"
|
||||
}, {
|
||||
"name": "Projects",
|
||||
"url":"https://calliope.cc/en/projekte",
|
||||
"description": "A collection of calliope mini projects",
|
||||
"imageUrl": "/docs/calliope/links/thumbnail_projects.gif",
|
||||
"largeImageUrl": "",
|
||||
"label": "",
|
||||
"buttonLabel": "View Projects",
|
||||
"labelClass": "green small ribbon"
|
||||
}, {
|
||||
"name": "Teaching materials",
|
||||
"url":"https://calliope.cc/schulen/schulmaterial",
|
||||
"description": "",
|
||||
"imageUrl": "/docs/calliope/links/thumbnail_didactic_material.gif",
|
||||
"largeImageUrl": "",
|
||||
"label": "",
|
||||
"buttonLabel": "View",
|
||||
"labelClass": "green small ribbon"
|
||||
}, {
|
||||
"name": "Forum",
|
||||
"url":"https://forum.calliope.cc",
|
||||
"description": "Be a part of our comunity",
|
||||
"imageUrl": "/docs/calliope/links/thumbnail_community.gif",
|
||||
"largeImageUrl": "",
|
||||
"label": "",
|
||||
"buttonLabel": "Open Forum",
|
||||
"labelClass": "green small ribbon"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 40 KiB |
@@ -0,0 +1,74 @@
|
||||
# Projects
|
||||
|
||||
Here are some cool tutorials to get you started with your @boardname@!
|
||||
|
||||
## Basic
|
||||
|
||||
```codecard
|
||||
[{
|
||||
"name": "Flashing Heart",
|
||||
"url":"/projects/flashing-heart",
|
||||
"description": "Make an animated flashing heart.",
|
||||
"imageUrl": "/docs/calliope/tutorials/01_flashing_heart.gif",
|
||||
"largeImageUrl": "",
|
||||
"cardType": "tutorial",
|
||||
"label": "",
|
||||
"labelClass": "purple ribbon large"
|
||||
}, {
|
||||
"name": "Name Tag",
|
||||
"description": "Scroll your name on the screen",
|
||||
"imageUrl": "/docs/calliope/tutorials/02_nametag.gif",
|
||||
"url": "/projects/name-tag",
|
||||
"cardType": "tutorial"
|
||||
}, {
|
||||
"name": "Smiley Buttons",
|
||||
"url":"/projects/smiley-buttons",
|
||||
"description": "Show different smiley images by pressing the buttons.",
|
||||
"imageUrl": "/docs/calliope/tutorials/03_smiley_button.gif",
|
||||
"largeImageUrl": "",
|
||||
"cardType": "tutorial"
|
||||
}, {
|
||||
"name": "Dice",
|
||||
"url":"/projects/dice",
|
||||
"description": "Shake the dice and see what number comes up!",
|
||||
"imageUrl": "/docs/calliope/tutorials/04_dice.gif",
|
||||
"cardType": "tutorial"
|
||||
}, {
|
||||
"name": "Love Meter",
|
||||
"url":"/projects/love-meter",
|
||||
"description": "The @boardname@ is feeling the love, see how much!",
|
||||
"imageUrl":"/docs/calliope/tutorials/05_love_meter.gif",
|
||||
"cardType": "tutorial"
|
||||
}, {
|
||||
"name": "Mini Chat",
|
||||
"url":"/projects/mini-chat",
|
||||
"description": "Build your own social network made of minis.",
|
||||
"imageUrl": "/docs/calliope/tutorials/06_mini_chat.gif",
|
||||
"cardType": "tutorial"
|
||||
}, {
|
||||
"name": "Rock Paper Scissors",
|
||||
"url":"/projects/rock-paper-scissors",
|
||||
"description": "Make the Rock-Paper-Scissors game on your @boardname@ and challenge your friends.",
|
||||
"imageUrl":"/docs/calliope/tutorials/07_stone_paper_scissors.gif",
|
||||
"cardType": "tutorial"
|
||||
}, {
|
||||
"name": "Coin Flipper",
|
||||
"url":"/projects/coin-flipper",
|
||||
"description": "Guess the coin toss and see if you're lucky.",
|
||||
"imageUrl": "/docs/calliope/tutorials/08_coin_flipper.gif",
|
||||
"cardType": "tutorial"
|
||||
}, {
|
||||
"name": "Snap the dot",
|
||||
"url": "/projects/snap-the-dot",
|
||||
"description": "Use the game blocks to create a skill game",
|
||||
"imageUrl": "/docs/calliope/tutorials/09_snap_the_dot.gif",
|
||||
"cardType": "tutorial"
|
||||
}, {
|
||||
"name": "Multi Dice",
|
||||
"url": "/projects/multi-dice",
|
||||
"description": "Compete with multiple dices",
|
||||
"imageUrl": "/docs/calliope/tutorials/10_multi_dice.gif",
|
||||
"cardType": "tutorial"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 144 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 143 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 144 KiB |
|
After Width: | Height: | Size: 209 KiB |
@@ -0,0 +1,60 @@
|
||||
## Basic
|
||||
|
||||
```codecard
|
||||
[ {
|
||||
"name": "LEDs",
|
||||
"description": "See how these amazing little devices create light in this fun and illuminating video.",
|
||||
"youTubeId": "qqBmvHD5bCw",
|
||||
"embedYouTube": "true",
|
||||
"imageUrl": "/static/mb/behindhardware/leds.jpg"
|
||||
},
|
||||
{
|
||||
"name": "Buttons",
|
||||
"description": "Buttons let your fingers talk to the hardware, see how they work in this video.",
|
||||
"youTubeId": "t_Qujjd_38o",
|
||||
"imageUrl": "/static/mb/behindhardware/buttons.jpg"
|
||||
},
|
||||
{
|
||||
"name": "Accelerometer",
|
||||
"description": "Find out how the accelerometer detects motion in this fun video.",
|
||||
"youTubeId": "byngcwjO51U",
|
||||
"imageUrl": "/static/mb/behindhardware/accelerometer.jpg"
|
||||
},
|
||||
{
|
||||
"name": "Light Sensor",
|
||||
"description": "Your micro:bit can see the light, how does it do that?",
|
||||
"youTubeId": "TKhCr-dQMBY",
|
||||
"imageUrl": "/static/mb/behindhardware/light-sensor.jpg"
|
||||
},
|
||||
{
|
||||
"name": "Temperature Sensor",
|
||||
"description": "One of the cool features on your board is the temperature sensor, how does it feel the heat?",
|
||||
"youTubeId": "_T4N8O9xsMA",
|
||||
"imageUrl": "/static/mb/behindhardware/temperature-sensor.jpg"
|
||||
},
|
||||
{
|
||||
"name": "Pin Pressed",
|
||||
"description": "Touching the pins works like a button, is that magic or what?",
|
||||
"youTubeId": "GEpZrvbsO7o",
|
||||
"imageUrl": "/static/mb/behindhardware/pin-pressed.jpg"
|
||||
},
|
||||
{
|
||||
"name": "Radio",
|
||||
"description": "Your board can communticate by radio, how does it do that?",
|
||||
"youTubeId": "Re3H2ISfQE8",
|
||||
"imageUrl": "/static/mb/behindhardware/radio.jpg"
|
||||
},
|
||||
{
|
||||
"name": "Servo Motor",
|
||||
"description": "See how motors work and how you can use the @boardname@ to run servos.",
|
||||
"youTubeId": "okxooamdAP4",
|
||||
"imageUrl": "/static/mb/behindhardware/servo.jpg"
|
||||
},
|
||||
{
|
||||
"name": "Speakers",
|
||||
"description": "Find out how speakers make sound and how you can connect them to your board.",
|
||||
"youTubeId": "cxfPNc4Wefo",
|
||||
"imageUrl": "/static/mb/behindhardware/speakers.jpg"
|
||||
}
|
||||
]
|
||||
```
|
||||
@@ -1,7 +0,0 @@
|
||||
# Documentation
|
||||
|
||||
### @description Links to the documentation, reference and projects.
|
||||
|
||||
* [The @boardname@ APIs](/reference)
|
||||
* [Blocks language](/blocks)
|
||||
* [JavaScript language](/javascript)
|
||||
@@ -0,0 +1,14 @@
|
||||
# Eddystone Beacon
|
||||
|
||||
```blocks
|
||||
led.enable(false)
|
||||
bluetooth.advertiseUrl(
|
||||
"https://calliope.cc",
|
||||
7,
|
||||
false
|
||||
)
|
||||
```
|
||||
|
||||
```package
|
||||
device
|
||||
```
|
||||
@@ -0,0 +1,31 @@
|
||||
# Egg and Spoon race
|
||||
|
||||
The [Egg and Spoon](https://en.wikipedia.org/wiki/Egg-and-spoon_race) race is a game where a player carries an object (like an egg) across some distance without it falling out of a holder. In the case of the Egg and Spoon, the player must carefully walk with an egg held in a spoon. The egg must remain in the spoon until the player crosses the finish line. The egg can easily roll out of the spoon so the player needs skill and patience to balance the egg until finishing the race.
|
||||
|
||||
You can program your @boardname@ to be an egg and let your hand be the spoon. If you walk too fast or waver in holding the @boardname@, you might "drop the egg!". Try to keep the balance point in the center of the screen.
|
||||
|
||||
```blocks
|
||||
let accY = 0
|
||||
let accX = 0
|
||||
let y = 0
|
||||
let x = 0
|
||||
basic.forever(() => {
|
||||
led.plot(x, y)
|
||||
accX = input.acceleration(Dimension.X)
|
||||
accY = input.acceleration(Dimension.Y)
|
||||
if (accX < -150 && x > 0) {
|
||||
x += -1
|
||||
} else if (accX > 150 && x < 4) {
|
||||
x += 1
|
||||
}
|
||||
if (accY < -150 && y > 0) {
|
||||
y += -1
|
||||
} else if (accY > 150 && y < 4) {
|
||||
y += 1
|
||||
}
|
||||
basic.pause(500)
|
||||
basic.clearScreen()
|
||||
})
|
||||
x = 2
|
||||
y = 2
|
||||
```
|
||||
@@ -0,0 +1,142 @@
|
||||
# Game of Life
|
||||
|
||||
The [Game of Life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life) simulates life in a grid world (a two-dimensional block of cells). The cells in the grid have a state of "alive" or "dead". The game starts with a population of cells placed in a certain pattern on the grid. A simulation is run, and based on some simple rules for life and death, cells continue to live, die off, or reproduce.
|
||||
|
||||
## Rules for Life
|
||||
|
||||
The rules for life in the grid are:
|
||||
|
||||
1. A living cell with less than two live cells next to it will die. This is underpopulation, no social support.
|
||||
2. A living cell with two or three live cells next to it continues to live. This is a healthy population.
|
||||
3. A living cell with more than three live cells next to it will die. This is over overpopulation, scarce resources.
|
||||
4. A dead cell with three live cells next to it turns into a living cell. This is reproduction.
|
||||
|
||||
Depending on the pattern of living cells at the start of the game, some population simulations may survive longer than others.
|
||||
|
||||
## Game of Life simulation in LEDs
|
||||
|
||||
Here's a program that simulates cell life in the LED matrix. Use button ``A`` for the next stage of life and button ``B`` to reset.
|
||||
|
||||
```typescript
|
||||
//https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life
|
||||
let lifeChart: Image = null
|
||||
|
||||
//Use button A for the next iteration of game of life
|
||||
input.onButtonPressed(Button.A, () => {
|
||||
gameOfLife();
|
||||
show();
|
||||
})
|
||||
|
||||
//Use button B for reseting to random initial seed state
|
||||
input.onButtonPressed(Button.B, () => {
|
||||
reset();
|
||||
show();
|
||||
})
|
||||
|
||||
lifeChart = images.createImage(`
|
||||
. . . . .
|
||||
. . . . .
|
||||
. . . . .
|
||||
. . . . .
|
||||
. . . . .
|
||||
`)
|
||||
|
||||
//State holds the information about pixel is live or dead
|
||||
//false means dead, true means live.
|
||||
let state = [false, false, false, false, false,
|
||||
false, false, false, false, false,
|
||||
false, false, false, false, false,
|
||||
false, false, false, false, false,
|
||||
false, false, false, false, false]
|
||||
|
||||
//get & set on any array
|
||||
function getState(arr: boolean[], x: number, y: number): boolean {
|
||||
return arr[x * 5 + y];
|
||||
}
|
||||
function setState(arr: boolean[], x: number, y: number, value: boolean): void {
|
||||
arr[x * 5 + y] = value;
|
||||
}
|
||||
|
||||
//Generate random initial state.
|
||||
function reset() {
|
||||
for (let x = 0; x < 5; x++) {
|
||||
for (let y = 0; y < 5; y++) {
|
||||
setState(state, x, y, Math.randomBoolean());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Show the lifeChart based on the state
|
||||
function show() {
|
||||
for (let x = 0; x < 5; x++) {
|
||||
for (let y = 0; y < 5; y++) {
|
||||
lifeChart.setPixel(x, y, getState(state, x, y));
|
||||
}
|
||||
}
|
||||
lifeChart.plotImage(0);
|
||||
}
|
||||
|
||||
//Core function
|
||||
function gameOfLife() {
|
||||
let result: boolean[] = [];
|
||||
let count = 0;
|
||||
|
||||
for (let x = 0; x < 5; x++) {
|
||||
for (let y = 0; y < 5; y++) {
|
||||
count = 0;
|
||||
|
||||
//Count the live cells in the next row
|
||||
if ((x + 1) < 5) {
|
||||
if (getState(state, x + 1, y)) {
|
||||
count++;
|
||||
}
|
||||
if ((y + 1 < 5) && getState(state, x + 1, y + 1)) {
|
||||
count++;
|
||||
}
|
||||
if ((y - 1 >= 0) && getState(state, x + 1, y - 1)) {
|
||||
count++;
|
||||
}
|
||||
}
|
||||
|
||||
//Count the live cells in the previous row
|
||||
if ((x - 1) >= 0) {
|
||||
if (getState(state, x - 1, y)) {
|
||||
count++;
|
||||
}
|
||||
if ((y + 1 < 5) && getState(state, x - 1, y + 1)) {
|
||||
count++;
|
||||
}
|
||||
if ((y - 1 >= 0) && getState(state, x - 1, y - 1)) {
|
||||
count++;
|
||||
}
|
||||
}
|
||||
|
||||
//Count the live cells in the current row exlcuding the current position.
|
||||
if ((y - 1 >= 0) && getState(state, x, y - 1)) {
|
||||
count++;
|
||||
}
|
||||
if ((y + 1 < 5) && getState(state, x, y + 1)) {
|
||||
count++;
|
||||
}
|
||||
|
||||
// Toggle live / dead cells based on the neighbour count.
|
||||
// Any live cell with fewer than two live neighbours dies, as if caused by underpopulation.
|
||||
// Any live cell with two or three live neighbours lives on to the next generation.
|
||||
// Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.
|
||||
// Any live cell with more than three live neighbours dies, as if by overpopulation.
|
||||
switch (count) {
|
||||
case 0: setState(result, x, y, false); break;
|
||||
case 1: setState(result, x, y, false); break;
|
||||
case 2: setState(result, x, y, getState(state, x, y)); break;
|
||||
case 3: setState(result, x, y, true); break;
|
||||
default: setState(result, x, y, false); break;
|
||||
}
|
||||
}
|
||||
}
|
||||
//Update the state
|
||||
state = result;
|
||||
}
|
||||
//Initial reset & show
|
||||
reset();
|
||||
show();
|
||||
```
|
||||
@@ -0,0 +1,104 @@
|
||||
# Pi Monte Carlo
|
||||
|
||||
Approximate the value of **pi** using your @boardname@!
|
||||
|
||||
## Thinking about it...
|
||||
|
||||
Ok, let's pretend that a circle fits inside a square where the edge of the circle touches the sides of the square. If we say that the radius, called ``r``, of circle is `1` then the length of each side of the square is `2`, or ``2 * r``. The area of the circle is ``pi * (r ** 2)`` and the area of the square then is ``(r * 2) ** 2``. We don't know what ``pi`` is so we can arrange a relationship between the area of the circle and the area of the square to solve for the value of ``pi``.
|
||||
|
||||
### Circle and square
|
||||
|
||||
An interesting relationship between the circle and the square is that the area of the circle divided by the area of the square is:
|
||||
|
||||
``area ratio = (pi * (r ** 2)) / ((r * 2) ** 2) = pi / 4``
|
||||
|
||||
Well, we can see that if we knew the area of both the circle and the square we could find out what the value of ``pi`` is! It's simply this:
|
||||
|
||||
```
|
||||
pi = (area of circle) / (area of square) * 4
|
||||
```
|
||||
|
||||
so then...
|
||||
|
||||
```
|
||||
area ratio = (area of circle) / (area of square)
|
||||
pi = (area ratio) * 4
|
||||
```
|
||||
|
||||
One problem though. We know the area of the square, sure enough it's `4`, but what's the area of the circle?
|
||||
|
||||
That's the dilemma! We need to know the area of the circle to find out what ``pi`` is and we need the value of ``pi`` the find the area of the circle!
|
||||
|
||||
### Dots, lots of dots
|
||||
|
||||
What if we had a lot of really small dots that we could fill into the circle and into the parts of the square that the circle didn't cover. We'll try to cover the area of both shapes with as many dots as possible.
|
||||
|
||||
If we count the number of dots placed in both the circle and the square, we could find the ``area ratio`` between the two shapes. And, in the equation shown above, we can discover ``pi`` if we have this ratio. The ``area ratio`` is:
|
||||
|
||||
``area ratio = (dots in circle) / ((dots in circle) + (dots only in square))``
|
||||
|
||||
Of course, we can't completely fill the area of both shapes with dots but we could get enough of them in there to give a useful ratio between the circle and the square.
|
||||
|
||||
### Making and counting dots
|
||||
|
||||
To make the "dots" we can randomly make a value and see if it would fit as a coordinate within the shape we're trying to fill. If it fits, increase the count of dots and try to make more for some amount of time. The more dots created, the better the accuracy of our value for ``area ratio``.
|
||||
|
||||
### Monte Carlo method
|
||||
|
||||
This method of filling coordinate points, counting them, and using the difference or ratio of the counts is called the _Monte Carlo_ method or approximation.
|
||||
|
||||
## Monte Carlo approximation of _pi_
|
||||
|
||||
```blocks
|
||||
let pir = 0
|
||||
let pid = 0
|
||||
let y = 0
|
||||
let pin = 0
|
||||
let x = 0
|
||||
let r2 = 0
|
||||
let r = 0
|
||||
let inside = 0
|
||||
let n = 0
|
||||
|
||||
// A simple Monte-Carlo simulation to approximate Pi.
|
||||
//
|
||||
// number of points
|
||||
n = 1000000
|
||||
//
|
||||
// radius of the circle
|
||||
r = 4000
|
||||
//
|
||||
// radius square
|
||||
r2 = r * r
|
||||
//
|
||||
basic.forever(() => {
|
||||
inside = 0
|
||||
for (let i = 0; i < n; i++) {
|
||||
// generate a point within the square
|
||||
x = Math.randomRange(0, r + 1)
|
||||
y = Math.randomRange(0, r + 1)
|
||||
// test if the point is within the circle
|
||||
// sqrt(x**2 + y**2) < r ==> x**2 + y**2 < r**2
|
||||
if (x * x + y * y < r2) {
|
||||
inside += 1
|
||||
}
|
||||
}
|
||||
// surface of a square: 4 * r * r surface of a circle:
|
||||
// r * r * pi => inside / n ~= (r*r*pi) / (4*r*r) ~=
|
||||
// pi / 4 pi = inside / n * 4
|
||||
//
|
||||
pin = inside * 4
|
||||
// only integer arithmetic here...
|
||||
pid = pin / n
|
||||
pir = pin % n
|
||||
// show results
|
||||
basic.showLeds(`
|
||||
# # # # #
|
||||
. # . # .
|
||||
. # . # .
|
||||
. # . # .
|
||||
. # . . #
|
||||
`)
|
||||
basic.showString(" " + pid + "." + pir)
|
||||
})
|
||||
```
|
||||
@@ -0,0 +1,12 @@
|
||||
# Plot Acceleration
|
||||
|
||||
Plot acceleration in the ``x`` dimension on the LEDs.
|
||||
|
||||
```blocks
|
||||
basic.forever(() => {
|
||||
led.plotBarGraph(
|
||||
input.acceleration(Dimension.X),
|
||||
1023
|
||||
)
|
||||
})
|
||||
```
|
||||
@@ -0,0 +1,12 @@
|
||||
# Plot Light level
|
||||
|
||||
Show the current light level as a bar graph.
|
||||
|
||||
```blocks
|
||||
basic.forever(() => {
|
||||
led.plotBarGraph(
|
||||
input.lightLevel(),
|
||||
255
|
||||
)
|
||||
})
|
||||
```
|
||||
@@ -0,0 +1,90 @@
|
||||
# Radio Dashboard
|
||||
|
||||
```typescript
|
||||
/**
|
||||
* Radio monitoring dashboard
|
||||
*
|
||||
* Each radio client is represented by a dot on the screen.
|
||||
* Once a client is registered, it will stay at the same pixel location
|
||||
* forever.
|
||||
*
|
||||
* Radio clients can simply send a number (between 0..255) on group 4.
|
||||
* They must transmit the serial number using ``radio.setTransmitSerialNumber(true)``
|
||||
*
|
||||
* The received number is used to set the LED brightness for that client.
|
||||
*
|
||||
* If the radio packet is not received for 10sec, the LED starts blinking.
|
||||
*/
|
||||
const deadPing = 20000;
|
||||
const lostPing = 10000;
|
||||
|
||||
interface Client {
|
||||
// client serial id
|
||||
id: number;
|
||||
// sprite on screen
|
||||
sprite: game.LedSprite;
|
||||
// last ping received
|
||||
ping: number;
|
||||
}
|
||||
|
||||
const clients: Client[] = [];
|
||||
|
||||
/* lazy allocate sprite */
|
||||
function getClient(id: number): Client {
|
||||
// needs an id to track radio client's identity
|
||||
if (!id)
|
||||
return undefined;
|
||||
|
||||
// look for cached clients
|
||||
for (const client of clients)
|
||||
if (client.id == id)
|
||||
return client;
|
||||
const n = clients.length;
|
||||
if (n == 24) // out of pixels
|
||||
return undefined;
|
||||
const client: Client = {
|
||||
id: id,
|
||||
sprite: game.createSprite(n % 5, n / 5),
|
||||
ping: input.runningTime()
|
||||
}
|
||||
clients.push(client);
|
||||
return client;
|
||||
}
|
||||
|
||||
// store data received by clients
|
||||
radio.onReceivedNumber(function (receivedNumber) {
|
||||
const serialNumber = radio.receivedPacket(RadioPacketProperty.SerialNumber)
|
||||
const client = getClient(serialNumber);
|
||||
if (!client)
|
||||
return;
|
||||
|
||||
client.ping = input.runningTime()
|
||||
client.sprite.setBrightness(Math.max(1, receivedNumber & 0xff));
|
||||
})
|
||||
|
||||
// monitor the sprites and start blinking when no packet is received
|
||||
basic.forever(() => {
|
||||
const now = input.runningTime()
|
||||
for (const client of clients) {
|
||||
// lost signal starts blinking
|
||||
const lastPing = now - client.ping;
|
||||
if (lastPing > deadPing) {
|
||||
client.sprite.setBlink(0)
|
||||
client.sprite.setBrightness(0)
|
||||
}
|
||||
else if (lastPing > lostPing)
|
||||
client.sprite.setBlink(500);
|
||||
else
|
||||
client.sprite.setBlink(0);
|
||||
}
|
||||
basic.pause(500)
|
||||
})
|
||||
|
||||
// setup the radio and start!
|
||||
radio.setGroup(4)
|
||||
game.addScore(1)
|
||||
```
|
||||
|
||||
```package
|
||||
radio
|
||||
```
|
||||
@@ -0,0 +1,9 @@
|
||||
# Rando
|
||||
|
||||
Generate a random coordinate and display it on the LED screen.
|
||||
|
||||
```blocks
|
||||
basic.forever(() => {
|
||||
led.toggle(Math.randomRange(0, 5), Math.randomRange(0, 5))
|
||||
})
|
||||
```
|
||||
@@ -1,3 +1,3 @@
|
||||
{
|
||||
"appref": "v1.0.25"
|
||||
"appref": "v2.0.10"
|
||||
}
|
||||
|
||||
@@ -1,42 +0,0 @@
|
||||
# JavaScript
|
||||
|
||||
Visit the cards below to starting programming JavaScript
|
||||
with the @boardname@:
|
||||
|
||||
```codecard
|
||||
[{
|
||||
"name": "Calling",
|
||||
"url": "/js/call"
|
||||
},{
|
||||
"name": "Sequencing",
|
||||
"url": "/js/sequence"
|
||||
},{
|
||||
"name": "Variables",
|
||||
"url": "/js/variables"
|
||||
},{
|
||||
"name": "Operators",
|
||||
"url": "/js/operators"
|
||||
},{
|
||||
"name": "Statements",
|
||||
"url": "/js/statements"
|
||||
},{
|
||||
"name": "Functions",
|
||||
"url": "/js/functions"
|
||||
},{
|
||||
"name": "Types",
|
||||
"url": "/js/types"
|
||||
},{
|
||||
"name": "Classes",
|
||||
"url": "/js/classes"
|
||||
},{
|
||||
"name": "FAQ",
|
||||
"url": "/js/faq"
|
||||
}
|
||||
]
|
||||
|
||||
```
|
||||
|
||||
### See Also
|
||||
|
||||
[calling](/js/call), [sequencing](/js/sequence), [variables](/js/variables), [operators](/js/operators), [statements](/js/statements), [functions](/js/functions),
|
||||
[types](/js/types), [classes](/js/classes), [FAQ](/js/faq)
|
||||
@@ -1,58 +0,0 @@
|
||||
# Call a function
|
||||
|
||||
The simplest way to get started in JavaScript with your @boardname@ is to
|
||||
call one of the @boardname@'s built-in JavaScript functions. Just like Blocks
|
||||
are organized into categories/drawers, the @boardname@ functions are organized by
|
||||
namespaces, with names corresponding to the drawer names. The `basic` namespace
|
||||
contains a number of helpful functions, such as:
|
||||
|
||||
```typescript
|
||||
basic.showString("Hello!")
|
||||
```
|
||||
|
||||
If you want to see all functions available in the `basic` namespace, simply type `basic`
|
||||
followed by `.` and a list of all the functions will appear.
|
||||
|
||||

|
||||
|
||||
This feature is known as "Intellisense". Continue typing to select one of the functions,
|
||||
or click on one of the functions to select. You also narrow down the set of functions by typing, as below:
|
||||
|
||||

|
||||
|
||||
You can type anything to see what Intellisense will find for you. Here's an example
|
||||
of what happens when you type the word `for`:
|
||||

|
||||
|
||||
## Function parameter values
|
||||
|
||||
You might have noticed that the call `showString` above takes one parameter value,
|
||||
the string to be scrolled on the LED screen. There is a second (optional)
|
||||
parameter that controls the speed of the scroll. Try this:
|
||||
|
||||
```typescript
|
||||
basic.showString("Hello!",50)
|
||||
```
|
||||
|
||||
Intellisense shows all the available parameters for a function.
|
||||
|
||||
## Left and right parentheses, please!
|
||||
|
||||
Whenever you want to call a function, you give the name of the function
|
||||
followed by `(` and ending with `)`. Inbetween the left and right
|
||||
parentheses go the function arguments. If a function has zero arguments, you still
|
||||
need the parentheses in order to call the function. For example
|
||||
|
||||
```typescript
|
||||
basic.clearScreen()
|
||||
```
|
||||
|
||||
It's a syntax error to have a left parenthesis without the "closing" right parenthesis:
|
||||
|
||||
```
|
||||
basic.clearScreen(
|
||||
```
|
||||
|
||||
### ~button /js/sequence
|
||||
NEXT: Sequencing Commands
|
||||
### ~
|
||||
@@ -1,268 +0,0 @@
|
||||
# Classes
|
||||
|
||||
Traditional JavaScript focuses on functions and prototype-based inheritance as the basic means of building up reusable components,
|
||||
but this may feel a bit awkward to programmers more comfortable with an object-oriented approach, where classes inherit functionality
|
||||
and objects are built from these classes.
|
||||
|
||||
Starting with ECMAScript 2015, also known as ECMAScript 6, JavaScript programmers will be able to build their applications using
|
||||
this object-oriented class-based approach. TypeScript, allows you to use these techniques now, compiling them
|
||||
down to JavaScript that works across all major browsers and platforms, without having to wait for the next version of JavaScript.
|
||||
|
||||
Let's take a look at a simple class-based example:
|
||||
|
||||
```ts
|
||||
class Greeter {
|
||||
greeting: string;
|
||||
constructor(message: string) {
|
||||
this.greeting = message;
|
||||
}
|
||||
greet() {
|
||||
return "Hello, " + this.greeting;
|
||||
}
|
||||
}
|
||||
|
||||
let greeter = new Greeter("world");
|
||||
```
|
||||
|
||||
We declare a new class `Greeter`. This class has three members: a property called `greeting`, a constructor, and a method `greet`.
|
||||
|
||||
You'll notice that in the class when we refer to one of the members of the class we prepend `this.`.
|
||||
This denotes that it's a member access.
|
||||
|
||||
In the last line we construct an instance of the `Greeter` class using `new`.
|
||||
This calls into the constructor we defined earlier, creating a new object with the `Greeter` shape, and running the constructor to initialize it.
|
||||
|
||||
# Inheritance
|
||||
|
||||
### ~hint
|
||||
### Inheritance is not supported yet for the @boardname@. Coming soon...
|
||||
### ~
|
||||
|
||||
In TypeScript, we can use common object-oriented patterns.
|
||||
Of course, one of the most fundamental patterns in class-based programming is being able to extend existing classes to create new ones using inheritance.
|
||||
|
||||
Let's take a look at an example:
|
||||
|
||||
```ts-ignore
|
||||
class Animal {
|
||||
name: string;
|
||||
constructor(theName: string) { this.name = theName; }
|
||||
move(distanceInMeters: number = 0) {
|
||||
console.log(`${this.name} moved ${distanceInMeters}m.`);
|
||||
}
|
||||
}
|
||||
|
||||
class Snake extends Animal {
|
||||
constructor(name: string) { super(name); }
|
||||
move(distanceInMeters = 5) {
|
||||
console.log("Slithering...");
|
||||
super.move(distanceInMeters);
|
||||
}
|
||||
}
|
||||
|
||||
class Horse extends Animal {
|
||||
constructor(name: string) { super(name); }
|
||||
move(distanceInMeters = 45) {
|
||||
console.log("Galloping...");
|
||||
super.move(distanceInMeters);
|
||||
}
|
||||
}
|
||||
|
||||
let sam = new Snake("Sammy the Python");
|
||||
let tom: Animal = new Horse("Tommy the Palomino");
|
||||
|
||||
sam.move();
|
||||
tom.move(34);
|
||||
```
|
||||
|
||||
This example covers quite a few of the inheritance features in TypeScript that are common to other languages.
|
||||
Here we see the `extends` keywords used to create a subclass.
|
||||
You can see this where `Horse` and `Snake` subclass the base class `Animal` and gain access to its features.
|
||||
|
||||
Derived classes that contain constructor functions must call `super()` which will execute the constructor function on the base class.
|
||||
|
||||
The example also shows how to override methods in the base class with methods that are specialized for the subclass.
|
||||
Here both `Snake` and `Horse` create a `move` method that overrides the `move` from `Animal`, giving it functionality specific to each class.
|
||||
Note that even though `tom` is declared as an `Animal`, since its value is a `Horse`, when `tom.move(34)` calls the overriding method in `Horse`:
|
||||
|
||||
```Text
|
||||
Slithering...
|
||||
Sammy the Python moved 5m.
|
||||
Galloping...
|
||||
Tommy the Palomino moved 34m.
|
||||
```
|
||||
|
||||
# Public, private, and protected modifiers
|
||||
|
||||
## Public by default
|
||||
|
||||
In our examples, we've been able to freely access the members that we declared throughout our programs.
|
||||
If you're familiar with classes in other languages, you may have noticed in the above examples
|
||||
we haven't had to use the word `public` to accomplish this; for instance,
|
||||
C# requires that each member be explicitly labeled `public` to be visible.
|
||||
In TypeScript, each member is `public` by default.
|
||||
|
||||
You may still mark a member `public` explicitly.
|
||||
We could have written the `Animal` class from the previous section in the following way:
|
||||
|
||||
```ts-ignore
|
||||
class Animal {
|
||||
public name: string;
|
||||
public constructor(theName: string) { this.name = theName; }
|
||||
public move(distanceInMeters: number) {
|
||||
console.log(`${this.name} moved ${distanceInMeters}m.`);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Understanding `private`
|
||||
|
||||
When a member is marked `private`, it cannot be accessed from outside of its containing class. For example:
|
||||
|
||||
```ts-ignore
|
||||
class Animal {
|
||||
private name: string;
|
||||
constructor(theName: string) { this.name = theName; }
|
||||
}
|
||||
|
||||
new Animal("Cat").name; // Error: 'name' is private;
|
||||
```
|
||||
|
||||
TypeScript is a structural type system.
|
||||
When we compare two different types, regardless of where they came from, if the types of all members are compatible, then we say the types themselves are compatible.
|
||||
|
||||
However, when comparing types that have `private` and `protected` members, we treat these types differently.
|
||||
For two types to be considered compatible, if one of them has a `private` member,
|
||||
then the other must have a `private` member that originated in the same declaration.
|
||||
The same applies to `protected` members.
|
||||
|
||||
Let's look at an example to better see how this plays out in practice:
|
||||
|
||||
```ts-ignore
|
||||
class Animal {
|
||||
private name: string;
|
||||
constructor(theName: string) { this.name = theName; }
|
||||
}
|
||||
|
||||
class Rhino extends Animal {
|
||||
constructor() { super("Rhino"); }
|
||||
}
|
||||
|
||||
class Employee {
|
||||
private name: string;
|
||||
constructor(theName: string) { this.name = theName; }
|
||||
}
|
||||
|
||||
let animal = new Animal("Goat");
|
||||
let rhino = new Rhino();
|
||||
let employee = new Employee("Bob");
|
||||
|
||||
animal = rhino;
|
||||
animal = employee; // Error: 'Animal' and 'Employee' are not compatible
|
||||
```
|
||||
|
||||
In this example, we have an `Animal` and a `Rhino`, with `Rhino` being a subclass of `Animal`.
|
||||
We also have a new class `Employee` that looks identical to `Animal` in terms of shape.
|
||||
We create some instances of these classes and then try to assign them to each other to see what will happen.
|
||||
Because `Animal` and `Rhino` share the `private` side of their shape from the same declaration of
|
||||
`private name: string` in `Animal`, they are compatible. However, this is not the case for `Employee`.
|
||||
When we try to assign from an `Employee` to `Animal` we get an error that these types are not compatible.
|
||||
Even though `Employee` also has a `private` member called `name`, it's not the one we declared in `Animal`.
|
||||
|
||||
## Understanding `protected`
|
||||
|
||||
The `protected` modifier acts much like the `private` modifier with the exception that members
|
||||
declared `protected` can also be accessed by instances of deriving classes. For example,
|
||||
|
||||
```ts-ignore
|
||||
class Person {
|
||||
protected name: string;
|
||||
constructor(name: string) { this.name = name; }
|
||||
}
|
||||
|
||||
class Employee extends Person {
|
||||
private department: string;
|
||||
|
||||
constructor(name: string, department: string) {
|
||||
super(name);
|
||||
this.department = department;
|
||||
}
|
||||
|
||||
public getElevatorPitch() {
|
||||
return `Hello, my name is ${this.name} and I work in ${this.department}.`;
|
||||
}
|
||||
}
|
||||
|
||||
let howard = new Employee("Howard", "Sales");
|
||||
console.log(howard.getElevatorPitch());
|
||||
console.log(howard.name); // error
|
||||
```
|
||||
|
||||
Notice that while we can't use `name` from outside of `Person`,
|
||||
we can still use it from within an instance method of `Employee` because `Employee` derives from `Person`.
|
||||
|
||||
A constructor may also be marked `protected`.
|
||||
This means that the class cannot be instantiated outside of its containing class, but can be extended. For example,
|
||||
|
||||
```ts-ignore
|
||||
class Person {
|
||||
protected name: string;
|
||||
protected constructor(theName: string) { this.name = theName; }
|
||||
}
|
||||
|
||||
// Employee can extend Person
|
||||
class Employee extends Person {
|
||||
private department: string;
|
||||
|
||||
constructor(name: string, department: string) {
|
||||
super(name);
|
||||
this.department = department;
|
||||
}
|
||||
|
||||
public getElevatorPitch() {
|
||||
return `Hello, my name is ${this.name} and I work in ${this.department}.`;
|
||||
}
|
||||
}
|
||||
|
||||
let howard = new Employee("Howard", "Sales");
|
||||
let john = new Person("John"); // Error: The 'Person' constructor is protected
|
||||
```
|
||||
|
||||
# Readonly modifier
|
||||
|
||||
You can make properties readonly by using the `readonly` keyword.
|
||||
Readonly properties must be initialized at their declaration or in the constructor.
|
||||
|
||||
```ts-ignore
|
||||
class Octopus {
|
||||
readonly name: string;
|
||||
readonly numberOfLegs: number = 8;
|
||||
constructor (theName: string) {
|
||||
this.name = theName;
|
||||
}
|
||||
}
|
||||
let dad = new Octopus("Man with the 8 strong legs");
|
||||
dad.name = "Man with the 3-piece suit"; // error! name is readonly.
|
||||
```
|
||||
|
||||
## Parameter properties
|
||||
|
||||
In our last example, we had to declare a readonly member `name` and a constructor parameter `theName` in the `Octopus` class, and we then immediately set `name` to `theName`.
|
||||
This turns out to be a very common practice.
|
||||
*Parameter properties* let you create and initialize a member in one place.
|
||||
Here's a further revision of the previous `Octopus` class using a parameter property:
|
||||
|
||||
```ts-ignore
|
||||
class Octopus {
|
||||
readonly numberOfLegs: number = 8;
|
||||
constructor(readonly name: string) {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Notice how we dropped `theName` altogether and just use the shortened `readonly name: string` parameter on the constructor to create and initialize the `name` member.
|
||||
We've consolidated the declarations and assignment into one location.
|
||||
|
||||
Parameter properties are declared by prefixing a constructor parameter with an accessibility modifier or `readonly`, or both.
|
||||
Using `private` for a parameter property declares and initializes a private member; likewise, the same is done for `public`, `protected`, and `readonly`.
|
||||
|
||||
@@ -1,58 +0,0 @@
|
||||
# Frequently asked questions
|
||||
|
||||
# What is the language supported for the @boardname@?
|
||||
|
||||
For the @boardname@, we support a "static" subset of TypeScript (itself a superset of JavaScript):
|
||||
|
||||
## Supported language features
|
||||
|
||||
* variables with `let`, `const`, and `var`
|
||||
* functions with lexical scoping and recursion
|
||||
* top-level code in the file; hello world really is `console.log("Hello world")`
|
||||
* `if ... else if ... else` statements
|
||||
* `while` and `do ... while` loops
|
||||
* `for(;;)` loops (see below about `for ... in/of`)
|
||||
* `break/continue`; also with labeled loops
|
||||
* `switch` statement (on numbers only)
|
||||
* `debugger` statement for breakpoints
|
||||
* conditional operator `? :`; lazy boolean operators
|
||||
* namespaces (a form of modules)
|
||||
* all arithmetic operators (including bitwise operators); note that in microcontroller targets
|
||||
all arithmetic is performed on integers, also when simulating in the browser
|
||||
* strings (with a few common methods)
|
||||
* [string templates](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) (`` `x is ${x}` ``)
|
||||
* arrow functions `() => ...`
|
||||
* classes with fields, methods and constructors; `new` keyword
|
||||
* array literals `[1, 2, 3]`
|
||||
* enums
|
||||
|
||||
## Unsupported language features
|
||||
|
||||
We generally stay away from the more dynamic parts of JavaScript.
|
||||
Things you may miss and we may implement:
|
||||
|
||||
* exceptions (`throw`, `try ... catch`, `try ... finally`)
|
||||
* `for ... of` statements
|
||||
* object literals `{ foo: 1, bar: "two" }`
|
||||
* method-like properties (get/set accessors)
|
||||
* class inheritance
|
||||
|
||||
For JS-only targets we may implement the following:
|
||||
|
||||
* regular expressions
|
||||
* classes implementing interfaces
|
||||
|
||||
Things that we are not very likely to implement:
|
||||
|
||||
* file-based modules (`import * from ...`, `module.exports` etc); we do support namespaces
|
||||
* spread operator
|
||||
* `yield` expression and ``function*``
|
||||
* `await` expression and `async function`
|
||||
* `typeof` expression
|
||||
* tagged templates ``tag `text ${expression} more text` ``; regular templates are supported
|
||||
* binding with arrays or objects: `let [a, b] = ...; let { x, y } = ...`
|
||||
* `with` statement
|
||||
* `eval`
|
||||
* `delete` statement
|
||||
* `for ... in` statements
|
||||
* JSX (HTML as part of JavaScript)
|
||||
@@ -1,161 +0,0 @@
|
||||
# Functions
|
||||
|
||||
Functions are the fundamental building block of programs. Here is the simplest
|
||||
way to make a function that adds two numbers:
|
||||
|
||||
```ts
|
||||
// Named function
|
||||
function add(x : number, y : number) {
|
||||
return x + y;
|
||||
}
|
||||
|
||||
basic.showNumber(add(1, 2))
|
||||
```
|
||||
|
||||
### ~ hint
|
||||
For the @boardname@, you must specify a [type](/js/types) for each function parameter.
|
||||
### ~
|
||||
|
||||
Functions can refer to variables outside of the function body.
|
||||
When they do so, they're said to `capture` these variables.
|
||||
|
||||
```ts
|
||||
let z = 100;
|
||||
|
||||
function addToZ(x: number, y: number) {
|
||||
return x + y + z;
|
||||
}
|
||||
|
||||
basic.showNumber(addToZ(1, 2))
|
||||
```
|
||||
|
||||
## Typing the function
|
||||
|
||||
Let's add a return type to our add function:
|
||||
|
||||
```ts
|
||||
function add(x: number, y: number): number {
|
||||
return x + y;
|
||||
}
|
||||
```
|
||||
|
||||
TypeScript can figure the return type out by looking at the return statements, so you can optionally leave this off in many cases.
|
||||
|
||||
# Optional and Default Parameters
|
||||
|
||||
In TypeScript, the number of arguments given to a function has to match the number of parameters the function expects.
|
||||
|
||||
```ts-ignore
|
||||
function buildName(firstName: string, lastName: string) {
|
||||
return firstName + " " + lastName;
|
||||
}
|
||||
|
||||
let result1 = buildName("Bob"); // error, too few parameters
|
||||
let result2 = buildName("Bob", "Adams", "Sr."); // error, too many parameters
|
||||
let result3 = buildName("Bob", "Adams"); // ah, just right
|
||||
```
|
||||
|
||||
In JavaScript, every parameter is optional, and users may leave them off as they see fit.
|
||||
When they do, their value is `undefined`.
|
||||
We can get this functionality in TypeScript by adding a `?` to the end of parameters we want to be optional.
|
||||
For example, let's say we want the last name parameter from above to be optional:
|
||||
|
||||
```ts-ignore
|
||||
function buildName(firstName: string, lastName?: string) {
|
||||
if (lastName)
|
||||
return firstName + " " + lastName;
|
||||
else
|
||||
return firstName;
|
||||
}
|
||||
|
||||
let result1 = buildName("Bob"); // works correctly now
|
||||
let result2 = buildName("Bob", "Adams", "Sr."); // error, too many parameters
|
||||
let result3 = buildName("Bob", "Adams"); // ah, just right
|
||||
```
|
||||
|
||||
Any optional parameters must follow required parameters.
|
||||
Had we wanted to make the first name optional rather than the last name, we would need to change the order of parameters in the function, putting the first name last in the list.
|
||||
|
||||
In TypeScript, we can also set a value that a parameter will be assigned if the user does not provide one, or if the user passes `undefined` in its place.
|
||||
These are called default-initialized parameters.
|
||||
Let's take the previous example and default the last name to `"Smith"`.
|
||||
|
||||
```ts-ignore
|
||||
function buildName(firstName: string, lastName = "Smith") {
|
||||
return firstName + " " + lastName;
|
||||
}
|
||||
|
||||
let result1 = buildName("Bob"); // works correctly now, returns "Bob Smith"
|
||||
let result2 = buildName("Bob", undefined); // still works, also returns "Bob Smith"
|
||||
let result3 = buildName("Bob", "Adams", "Sr."); // error, too many parameters
|
||||
let result4 = buildName("Bob", "Adams"); // ah, just right
|
||||
```
|
||||
|
||||
Default-initialized parameters that come after all required parameters are treated as optional, and just like optional parameters, can be omitted when calling their respective function.
|
||||
This means optional parameters and trailing default parameters will share commonality in their types, so both
|
||||
|
||||
```ts
|
||||
function buildName(firstName: string, lastName?: string) {
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
and
|
||||
|
||||
```ts
|
||||
function buildName(firstName: string, lastName = "Smith") {
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
share the same type `(firstName: string, lastName?: string) => string`.
|
||||
The default value of `lastName` disappears in the type, only leaving behind the fact that the parameter is optional.
|
||||
|
||||
Unlike plain optional parameters, default-initialized parameters don't *need* to occur after required parameters.
|
||||
If a default-initialized parameter comes before a required parameter, users need to explicitly pass `undefined` to get the default initialized value.
|
||||
For example, we could write our last example with only a default initializer on `firstName`:
|
||||
|
||||
```ts-ignore
|
||||
function buildName(firstName = "Will", lastName: string) {
|
||||
return firstName + " " + lastName;
|
||||
}
|
||||
|
||||
let result1 = buildName("Bob"); // error, too few parameters
|
||||
let result2 = buildName("Bob", "Adams", "Sr."); // error, too many parameters
|
||||
let result3 = buildName("Bob", "Adams"); // okay and returns "Bob Adams"
|
||||
let result4 = buildName(undefined, "Adams"); // okay and returns "Will Adams"
|
||||
```
|
||||
|
||||
# Rest Parameters
|
||||
|
||||
Required, optional, and default parameters all have one thing in common: they talk about one parameter at a time.
|
||||
Sometimes, you want to work with multiple parameters as a group, or you may not know how many parameters a function will ultimately take.
|
||||
In JavaScript, you can work with the arguments directly using the `arguments` variable that is visible inside every function body.
|
||||
|
||||
In TypeScript, you can gather these arguments together into a variable:
|
||||
|
||||
```ts-ignore
|
||||
function buildName(firstName: string, ...restOfName: string[]) {
|
||||
return firstName + " " + restOfName.join(" ");
|
||||
}
|
||||
|
||||
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
|
||||
```
|
||||
|
||||
*Rest parameters* are treated as a boundless number of optional parameters.
|
||||
When passing arguments for a rest parameter, you can use as many as you want; you can even pass none.
|
||||
The compiler will build an array of the arguments passed in with the name given after the ellipsis (`...`), allowing you to use it in your function.
|
||||
|
||||
The ellipsis is also used in the type of the function with rest parameters:
|
||||
|
||||
```ts-ignore
|
||||
function buildName(firstName: string, ...restOfName: string[]) {
|
||||
return firstName + " " + restOfName.join(" ");
|
||||
}
|
||||
|
||||
let buildNameFun: (fname: string, ...rest: string[]) => string = buildName;
|
||||
```
|
||||
|
||||
### ~button /js/types
|
||||
NEXT: Types
|
||||
### ~
|
||||
@@ -1,30 +0,0 @@
|
||||
## Operators
|
||||
|
||||
The following JavaScript operators are supported for the @boardname@.
|
||||
|
||||
### ~hint
|
||||
Note that for the @boardname@ all arithmetic is performed on integers, rather than floating point.
|
||||
This also is true when simulating in the browser.
|
||||
### ~
|
||||
|
||||
# Assignment, arithmetic and bitwise
|
||||
|
||||
* assignment operators - [read more](http://devdocs.io/javascript/operators/assignment_operators)
|
||||
* arithmetic operators - [read more](http://devdocs.io/javascript/operators/arithmetic_operators)
|
||||
* bitwise operators - [read more](http://devdocs.io/javascript/operators/bitwise_operators)
|
||||
|
||||
# Comparision and conditional
|
||||
|
||||
* comparison operators - [read more](http://devdocs.io/javascript/operators/comparison_operators)
|
||||
* conditional operator - [read more](http://devdocs.io/javascript/operators/conditional_operator)
|
||||
|
||||
## More
|
||||
|
||||
* lambda functions `() => { ... }`
|
||||
* array literals `[1, 2, 3]`
|
||||
* strings, with a few common methods
|
||||
* [string templates](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) (`` `x is ${x}` ``)
|
||||
|
||||
### ~button /js/statements
|
||||
NEXT: Statements
|
||||
### ~
|
||||