pxt-calliope/docs/projects/guitar/displaybuttons.md

179 lines
4.8 KiB
Markdown
Raw Normal View History

2016-09-27 06:55:39 +02:00
# Buttons, Display & Sound
### @description micro:bit guitar: using buttons with display and sound
### ~avatar avatar
2016-10-04 01:37:13 +02:00
Use Button Events to control LED Display and play Sound
2016-09-27 06:55:39 +02:00
* **Concepts:**
* Events
* Tone/Note
* Sequence
### ~
## Duration: 30 - 45 minutes
## Materials
A micro:bit, battery pack and 2 x AAA batteries
![battery pack and micro:bit](/static/mb/projects/guitar/microbit.jpg)
2 to 4 crocodile clips
![crocodile clips](/static/mb/projects/guitar/crocclips.jpg)
Headphones
![earbud headphones](/static/mb/projects/guitar/headphones.jpg)
## Blocks
```cards
basic.showLeds(`
. # . # .
. . . . .
. # # # .
. # . # .
. # # # .
`);
input.onButtonPressed(Button.A, () => {});
music.playTone(Note.C, music.beat(BeatFraction.Quarter))
music.rest(music.beat(BeatFraction.Whole))
music.beat(BeatFraction.Quarter)
```
2016-10-04 01:37:13 +02:00
## Step 1: Make a Smiley
Open [codethemicrobit.com](https://codethemicrobit.com) in your web browser
2016-09-27 06:55:39 +02:00
```blocks
basic.showLeds(`
. # . # .
. . . . .
. # # # .
. # . # .
. # # # .
`);
```
2016-10-04 01:37:13 +02:00
From **Basics**, drag a **show LEDs** block into the coding area
* Create a face with LEDs
2016-09-27 06:55:39 +02:00
2016-10-04 01:37:13 +02:00
![micro:bit USB connection](/static/mb/projects/guitar/connectmicrobit.jpg)
Connect your micro:bit to your computer via USB and click **`Download`**.
Follow the instructions to move the code to your micro:bit.
2016-09-27 06:55:39 +02:00
2016-10-04 01:37:13 +02:00
## Step 2: Add Smiley LED Button Events
2016-09-27 06:55:39 +02:00
```blocks
input.onButtonPressed(Button.A, () => {
basic.showLeds(`
. # . # .
. . . . .
. # # # .
. # . # .
. # # # .
`)
})
input.onButtonPressed(Button.B, () => {
basic.showLeds(`
. # . # .
. . . . .
. . . . .
# . . . #
. # # # .
`)
})
```
2016-10-04 01:37:13 +02:00
From **Input**, drag an **on button 'A' pressed** block into the coding area
2016-09-27 06:55:39 +02:00
2016-10-04 01:37:13 +02:00
* Snap the LED face into the block
2016-09-27 06:55:39 +02:00
2016-10-04 01:37:13 +02:00
* Create a 'B' button block with a different LED face
2016-09-27 06:55:39 +02:00
2016-10-04 01:37:13 +02:00
* Download the code to your micro:bit and try the A & B buttons
2016-09-27 06:55:39 +02:00
## Step 3: Add Headphone Speakers using Crocodile clips
2016-10-04 01:37:13 +02:00
![crocodile clips attached to pins 0 and GND](/static/mb/projects/guitar/crocclipintoboard.jpg)
2016-09-27 06:55:39 +02:00
2016-10-04 01:37:13 +02:00
![crocodile clips attached to headphone jack](/static/mb/projects/guitar/jacktocrocs.jpg)
Connect **GND** to the **base of the headphone jack** using a second crocodile clip (usually black)
2016-09-27 06:55:39 +02:00
2016-10-04 01:37:13 +02:00
Connect **pin 0** to the **tip of the headphone jack** with a crocodile clip
2016-09-27 06:55:39 +02:00
2016-10-04 01:37:13 +02:00
*attaching batteries and micro:bit*
https://youtu.be/zwRTmpKIaVU
Attach the micro:bit & battery-pack to the guitar body
*connecting headphone speaker*
https://youtu.be/ewyEW_U5G9M
Connect the headphones with crocodile clips
2016-09-27 06:55:39 +02:00
### ~hint
## The micro:bit can play music
2016-10-04 01:37:13 +02:00
The **play tone** block allows a range letter note tones from **C** to **B5**.
2016-09-27 06:55:39 +02:00
Songs are played using sequences notes. Like the beginning of a birthday song (C, C, D, C, F, E).
```blocks
input.onButtonPressed(Button.A, () => {
music.playTone(Note.C, music.beat(BeatFraction.Quarter))
music.rest(music.beat(BeatFraction.Whole))
music.playTone(Note.C, music.beat(BeatFraction.Quarter))
music.rest(music.beat(BeatFraction.Whole))
music.playTone(Note.D, music.beat(BeatFraction.Quarter))
music.rest(music.beat(BeatFraction.Whole))
music.playTone(Note.C, music.beat(BeatFraction.Quarter))
music.rest(music.beat(BeatFraction.Whole))
music.rest(music.beat(BeatFraction.Whole))
music.playTone(Note.F, music.beat(BeatFraction.Half))
music.rest(music.beat(BeatFraction.Whole))
music.playTone(Note.E, music.beat(BeatFraction.Whole))
})
```
### ~
## Step 4: Add Tone Playing Events for Buttons A & B
```blocks
input.onButtonPressed(Button.A, () => {
basic.showLeds(`
. # . # .
. . . . .
. # # # .
. # . # .
. # # # .
`)
music.playTone(Note.A, music.beat(BeatFraction.Whole))
})
input.onButtonPressed(Button.B, () => {
basic.showLeds(`
. # . # .
. . . . .
. . . . .
# . . . #
. # # # .
`)
music.playTone(Note.G, music.beat(BeatFraction.Whole))
})
2016-10-04 01:37:13 +02:00
```
From **Music**, drag **play tone *C* for *1* beat** block under the **show leds** in **Button A Pressed**
* modify **tone** by choosing a note (*letter*) and experiment with high and low pitches
* set **beat** to 1
2016-09-27 06:55:39 +02:00
2016-10-04 01:37:13 +02:00
**Repeat** for **Button B** event
**Download the code** to the micro:bit
2016-09-27 06:55:39 +02:00
**Try the A & B buttons** with headphones and power connected
2016-10-04 01:37:13 +02:00
## Congratulations on completing the basic guitar!
**Challenge:** Create samples of longer music to play for each button instead of the single tone
2016-09-27 06:55:39 +02:00
* *Tip*: Search for "ABC music notation" or "Easy Music Notes" + the name of a song
## Extra
* [Smiley Buttons tutorial](/projects/smiley-buttons)
* [Hack your headphones](/projects/hack-your-headphones)
### ~button /projects/guitar/lightsensor
NEXT: Light Sensor Tone Control
### ~