c_meyer/pxt-calliope
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/Microsoft/pxt-microbit

Browse Source
This commit is contained in:
Peli de Halleux 2016-06-17 21:57:51 -07:00
commit 07822c47a3
3 changed files with 82 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
docs/reference/images/create-big-image.md Normal file
View File

@ -0,0 +1,46 @@
# Create Big Image
Make a big [image](/reference/images/image) (picture) for the micro:bit
[LED screen](/device/screen). The big image made of two squares.
Each of the squares is five LEDs on a side, like a regular image.
```blocks
images.createBigImage(`
. . # . . . . # . .
. # # # . . . # . .
# . # . # # . # . #
. . # . . . # # # .
. . # . . . . # . .
`);
```
### Example: Flip-flopping arrow
This program makes a big image with a picture of an arrow pointing up,
and an arrow pointing down. If you press button `A`, the program will
show the arrow pointing up, which starts `0` LEDs from the left in the
big image. If you press button `B`, the program will show the arrow
pointing down, which starts `5` LEDs from the left.
```blocks
let arrows = images.createBigImage(`
. . # . . . . # . .
. # # # . . . # . .
# . # . # # . # . #
. . # . . . # # # .
. . # . . . . # . .
`);
input.onButtonPressed(Button.A, () => {
arrows.showImage(0);
});
input.onButtonPressed(Button.B, () => {
arrows.showImage(5);
});
```
### See also
[Getting Started](/reference/getting-started), [image](/reference/images/image),
[create image](/reference/images/create-image),
[show image](/reference/images/show-image),
[scroll image](/reference/images/scroll-image), [show animation](/reference/basic/show-animation)

9
docs/reference/images/create-image.md
View File

@ -17,7 +17,7 @@ images.createImage(`
If you press button `A`, this program will make a picture of an
arrow and show it on the LED screen. If you press button `B`, the
program will show a picture of the button upside-down.
program will show a picture of the arrow upside-down.
```blocks
input.onButtonPressed(Button.A, () => {
@ -42,5 +42,8 @@ input.onButtonPressed(Button.B, () => {
### See also
[Getting Started](/reference/getting-started), [image](/reference/images/image), [show image](/reference/image/show-image),
[scroll image](/reference/image/scroll-image), [show animation](/reference/basic/show-animation)
[Getting Started](/reference/getting-started), [image](/reference/images/image),
[create big image](/reference/images/create-big-image),
[show image](/reference/images/show-image),
[scroll image](/reference/images/scroll-image), [show animation](/reference/basic/show-animation)

69
docs/reference/images/show-image.md
View File

@ -1,51 +1,42 @@
# Show Image
The show image function.
Show an [Image](/reference/images/image) on the [LED screen](/device/screen), followed by a 400ms pause.
```
export function showImage(_this: micro_bit.Image, xOffset: number)
```
Show an [image](/reference/images/image) (picture) on the
[LED screen](/device/screen). After the micro:bit shows an image, it
will pause for 400 milliseconds (1000 milliseconds is one second).
### Parameters
* x offset - [Number](/reference/types/number); the horizontal starting point of an image; use 0 for the first frame of the image, 5 for the second frame of the image, 10 for the third frame and so on.
* an [image](/reference/images/image) (picture). It is usually a square with five LEDs on a side, but it might be wider.
* a [number](/reference/types/number) that says how many LEDs from the left of the picture the micro:bit should start. `0` means start at the first **frame** of the picture, `5` means start at the second frame, `10` means start at the third, and so on.
### Create image and show image
### Example: Flip-flopping arrow
Use the [image editor](/reference/images/image) to create images using the [create image](/reference/images/create-image) function, and then use `show image` like this:
This program makes a big image with a frame of an arrow pointing up,
and a frame of an arrow pointing down. If you press button `A`, the
program will use ``show image`` to show the arrow pointing up. (It
starts `0` LEDs from the left in the big image.) If you press button
`B`, the program will use ``show image`` to show the arrow pointing
down, which starts `5` LEDs from the left.
```
let img = images.createImage(`
. . # . .
. # . # .
. . # . .
. # . # .
. . # . .
`)
img.showImage(0)
```
### Example: display numbers 1-5
The following example creates an image with 5 frames and then uses a [for loop](/blocks/loops/for) to show each frame on the screen:
```
let img2 = images.createImage(`
. . # . . . # # # # . # # # . . . . # . . # # # .
. # # . . . . . . # . . . # . . . # # . . # . . .
. . # . . . . . # . . . # . . . # # # # . # # # .
. . # . . . . # . . . . . # . . . . # . . . . # .
. . # . . . # # # # . # # # . . . . # . . # # # .
`)
for (let i = 0; i < 5; i++) {
img2.showImage(i * 5)
basic.pause(1000)
}
```blocks
let arrows = images.createBigImage(`
. . # . . . . # . .
. # # # . . . # . .
# . # . # # . # . #
. . # . . . # # # .
. . # . . . . # . .
`);
input.onButtonPressed(Button.A, () => {
arrows.showImage(0);
});
input.onButtonPressed(Button.B, () => {
arrows.showImage(5);
});
```
### See also
[show animation](/reference/basic/show-animation), [image](/reference/images/image), [create image](/reference/images/create-image), [scroll image](/reference/images/scroll-image)
[Getting Started](/reference/getting-started), [image](/reference/images/image),
[create image](/reference/images/create-image),
[create big image](/reference/images/create-big-image),
[scroll image](/reference/images/scroll-image), [show animation](/reference/basic/show-animation)