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

# Buttons, Display & Sound
### @description micro:bit guitar: using buttons with display and sound

### ~avatar avatar
Use Button Events to control LED Display and play Sound  
* **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)
```

## Step 1: Make a Smiley 
Open [codethemicrobit.com](https://codethemicrobit.com) in your web browser   
```blocks
    basic.showLeds(`
        . # . # .
        . . . . .
        . # # # .
        . # . # .
        . # # # .
        `);
```
From **Basics**, drag a **show LEDs** block into the coding area  
  * Create a face with LEDs  

![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.  

## Step 2: Add Smiley LED Button Events 
```blocks
input.onButtonPressed(Button.A, () => {
    basic.showLeds(`
        . # . # .
        . . . . .
        . # # # .
        . # . # .
        . # # # .
        `)
})
input.onButtonPressed(Button.B, () => {
    basic.showLeds(`
        . # . # .
        . . . . .
        . . . . .
        # . . . #
        . # # # .
        `)
})
```

From **Input**, drag an **on button 'A' pressed** block into the coding area  

* Snap the LED face into the block  

* Create a 'B' button block with a different LED face   

* Download the code to your micro:bit and try the A & B buttons  


## Step 3: Add Headphone Speakers using Crocodile clips

![crocodile clips attached to pins 0 and GND](/static/mb/projects/guitar/crocclipintoboard.jpg)  

![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)  

Connect **pin 0** to the **tip of the headphone jack** with a crocodile clip  

*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    
  
### ~hint
## The micro:bit can play music

The **play tone** block allows a range letter note tones from **C** to **B5**.   
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))
})
```  
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  
   
**Repeat** for **Button B** event  
  
**Download the code** to the micro:bit  

**Try the A & B buttons** with headphones and power connected
  
## Congratulations on completing the basic guitar!   
**Challenge:** Create Samples of longer music to play for each button instead of the single tone
  * *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
### ~