From 6f281e66df62c586bab21259d8f82b4002ff717d Mon Sep 17 00:00:00 2001 From: Peli de Halleux Date: Mon, 15 Oct 2018 09:19:34 -0700 Subject: [PATCH] Micro-chat (#1425) * added microchat tutorial * animations --- docs/projects/games.md | 14 +++++-- docs/projects/messenger.md | 66 ------------------------------- docs/projects/micro-chat.md | 77 +++++++++++++++++++++++++++++++++++++ docs/tutorials.md | 8 ++-- 4 files changed, 91 insertions(+), 74 deletions(-) delete mode 100644 docs/projects/messenger.md create mode 100644 docs/projects/micro-chat.md diff --git a/docs/projects/games.md b/docs/projects/games.md index 57f4512d..ca59286c 100644 --- a/docs/projects/games.md +++ b/docs/projects/games.md @@ -13,15 +13,21 @@ Fun games to build with your @boardname@. "description": "Make the Rock-Paper-Scissors game on your micro:bit and challenge your friends.", "imageUrl":"/static/mb/projects/a4-motion.png" }, { - "name": "Magic Button Trick", - "url":"/projects/magic-button-trick", - "description": "Build a magic trick that uses the compass to detect a nearby magnet!", - "imageUrl":"/static/mb/projects/magic-button-trick.png" + "name": "Coin Flipper", + "url":"/projects/coin-flipper", + "description": "Guess the coin toss and see if you're lucky.", + "imageUrl": "/static/mb/projects/coin-flipper.png", + "cardType": "tutorial" }, { "name": "Reaction Time", "url":"/projects/reaction-time", "description": "Make a reaction time experiment that responds to your body's conductivity!", "imageUrl":"/static/mb/projects/reaction.jpg" +}, { + "name": "Magic Button Trick", + "url":"/projects/magic-button-trick", + "description": "Build a magic trick that uses the compass to detect a nearby magnet!", + "imageUrl":"/static/mb/projects/magic-button-trick.png" }, { "name": "Snap the dot", "url": "/projects/snap-the-dot", diff --git a/docs/projects/messenger.md b/docs/projects/messenger.md deleted file mode 100644 index c3284d07..00000000 --- a/docs/projects/messenger.md +++ /dev/null @@ -1,66 +0,0 @@ -# Messenger - -![](/static/mb/projects/a9-radio.png) - -Use the radio in an app that sends "YO" messages. - -## Step 1 - -Use ``||input:on button pressed||`` to send the number `0` over radio. - -```blocks -input.onButtonPressed(Button.A, () => { - radio.sendNumber(0); -}); -``` - -## Step 2 - -Use ``||radio:on data packet received||`` display "YO" when the number ``0`` is received -by radio. - -```blocks -let message = 0; -radio.onDataPacketReceived(({ receivedNumber }) => { - message = receivedNumber; - if (message == 0) { - basic.showString("YO") - } -}) -``` - -Download the program to one @boardname@ and then to another. Press button **A** on one and see if the other gets a message. - -## Step 3 - -Use ``||input:on button pressed||`` to send the number `1` over radio. - -```blocks -input.onButtonPressed(Button.B, () => { - radio.sendNumber(1); -}); -``` - -## Step 4 - -Add blocks in ``||radio:on data packet received||`` to display "BYE" when the number ``1`` is received -by radio. - -```blocks -let message = 0; -radio.onDataPacketReceived(({ receivedNumber }) => { - message = receivedNumber; - if (message == 0) { - basic.showString("YO") - } - if (message == 1) { - basic.showString("BYE") - } -}) -``` - -Download the program to the @boardname@s again and try your messenger! - -```package -radio -``` diff --git a/docs/projects/micro-chat.md b/docs/projects/micro-chat.md new file mode 100644 index 00000000..d30b2ea2 --- /dev/null +++ b/docs/projects/micro-chat.md @@ -0,0 +1,77 @@ +# Micro Chat + +## Introduction @unplugged + +![Two @boardname@ connected via radio](/static/mb/projects/a9-radio.png) + +Use the **radio** to send and receive messages with other @boardname@. + +## Sending a message @fullscreen + +Use ``||input:on button pressed||`` to send a number over radio with ``||radio:send string||``. +All @boardname@ nearby will receive this message. + +You can also add ``||basic:show icon||`` and ``||basic:clear screen||`` blocks to show a little animation when the message is sent. + +```blocks +input.onButtonPressed(Button.A, () => { + radio.sendString("Yo"); + basic.showIcon(IconNames.Chessboard) + basic.clearScreen(); +}); +``` + +## Receiving a message @fullscreen + +Add a ``||radio:on received number||`` block to run when a message is received. + +```blocks +radio.onReceivedString(function (receivedString) { +}) +``` + +## Displaying text @fullscreen + +Add a ``||basic:show string||`` to display the string on the screen. You will find the ``receivedString`` variable +under the **Variables** toolbox. + +```blocks +radio.onReceivedString(function (receivedString) { + basic.showString(receivedString); +}) +``` + +## Testing in the simulator @fullscreen + +Press button **A** on the simulator, you will notice that a second @boardname@ appears (if your screen is too small, this might not happen). Try pressing **A** again and notice that the "Yo" message gets displayed on the other @boardname@ + +```blocks +input.onButtonPressed(Button.A, () => { + radio.sendString("Yo"); + basic.showIcon(IconNames.Chessboard) + basic.clearScreen(); +}); +radio.onReceivedString(function (receivedString) { + basic.showString(receivedString); +}) +``` + +## Try it for real @fullscreen + +If you have @boardname@s, download the program to two @boardname@. Press button **A** on one and see if the other gets a message. + +## Groups @fullscreen + +Use the ``||radio:set group||`` block to assign a **group** number to your program. You will only receive messages from @boardname@ within the same group. Use this to avoid receiving messages from all the other @boardname@. + +```blocks +/** +* Pick a unique group in your classroom! +*/ +radio.setGroup(123) +``` + + +```package +radio +``` diff --git a/docs/tutorials.md b/docs/tutorials.md index 44bdab0a..875342ae 100644 --- a/docs/tutorials.md +++ b/docs/tutorials.md @@ -38,10 +38,10 @@ Here are some cool tutorials to get you started with your @boardname@! "imageUrl":"/static/mb/projects/a3-pins.png", "cardType": "tutorial" }, { - "name": "Coin Flipper", - "url":"/projects/coin-flipper", - "description": "Guess the coin toss and see if you're lucky.", - "imageUrl": "/static/mb/projects/coin-flipper.png", + "name": "Micro Chat", + "url":"/projects/micro-chat", + "description": "Build your own social network made of @boardnames.", + "imageUrl": "/static/mb/projects/a9-radio.png", "cardType": "tutorial" }] ``` \ No newline at end of file