Show mood tutorial prototype (#414)

* Show mood tutorial prototype

* Missed block styling
This commit is contained in:
Galen Nickel 2018-04-03 15:45:11 -07:00 committed by Peli de Halleux
parent b8a3fa345f
commit 60bf3df1d8
8 changed files with 71 additions and 0 deletions

BIN
docs/static/tutorials/wake-up.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 234 KiB

15
docs/tutorials.md Normal file
View File

@ -0,0 +1,15 @@
# Tutorials
## Tutorials
Step by step guide to coding your @boardname@.
```codecard
[{
"name": "Wake Up Mindstorms",
"description": "Show different moods on your LEGO Mindstorms Brick. Is it tired, sleepy, or awake?",
"cardType": "tutorial",
"url":"/tutorials/wake-up",
"imageUrl":"/static/tutorials/wake-up.png"
}]
```

View File

@ -0,0 +1 @@
# Brick Screen

54
docs/tutorials/wake-up.md Normal file
View File

@ -0,0 +1,54 @@
# Wake Up Mindstorms
## Introduction @fullscreen
Show different moods on your LEGO Mindstorms Brick.
![Show mood on the screen](/static/tutorials/wake-up/show-mood.gif)
## Step 1
Open the ``||brick:Brick||`` Toolbox drawer. Drag out a ``||brick:show mood||`` block onto the Workspace, and place it into the ``||loops:on start||`` block. You should hear and see the block click into place.
```block
brick.showMood(moods.sleeping)
```
## Step 2
Notice your brick is snoring with eyes closed in the simulator! Lets wake her up. Open the ``||brick:Brick||`` Toolbox drawer again. Drag out 2 more ``||brick:show mood||`` blocks onto the Workspace, and drop them into the ``||brick:on start||`` block also.
```block
brick.showMood(moods.sleeping)
brick.showMood(moods.sleeping)
brick.showMood(moods.sleeping)
```
## Step 3
In the second ``||brick:show mood||`` block, click on the drop-down menu to select the tired mood.
![Show mood dropdown selections](/static/tutorials/wake-up/show-mood-dropdown-1.png)
```block
brick.showMood(moods.sleeping)
brick.showMood(moods.tired)
brick.showMood(moods.sleeping)
```
## Step 4
In the third ``||brick:show mood||`` block, click on the drop-down menu to select the love mood.
![Show mood dropdown selections](/static/tutorials/wake-up/show-mood-dropdown-2.png)
```block
brick.showMood(moods.sleeping)
brick.showMood(moods.tired)
brick.showMood(moods.love)
```
## Step 5
Now, lets download our program to the brick. Plug your EV3 brick into the computer with the USB cable, and click the blue **Download** button in the bottom left of your screen. Follow the directions to save your program to the brick.

View File

@ -9,6 +9,7 @@
}, },
"galleries": { "galleries": {
"Getting Started": "getting-started", "Getting Started": "getting-started",
"Tutorials": "tutorials",
"Design Engineering": "design-engineering", "Design Engineering": "design-engineering",
"Coding": "coding", "Coding": "coding",
"Maker": "maker" "Maker": "maker"