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
### ~