pxt-calliope/docs/projects/smiley-buttons.md

smiley buttons

~avatar

Use buttons to show a smiley face!

~

Step 1

Use show leds to make a smiley face:

basic.showLeds(`
    # # . # #
    # # . # #
    . . . . .
    # . . . #
    . # # # .`
    );

Step 2

Add an input block for when button A is pressed, and move the smiley face inside it:

input.onButtonPressed(Button.A, () => { 
    basic.showLeds(`
        # # . # #
        # # . # #
        . . . . .
        # . . . #
        . # # # .`
        );
});

Try pressing button A!

Step 3

Add blocks so that when button B is pressed, a frowney appears:

input.onButtonPressed(Button.A, () => { 
    basic.showLeds(`
        # # . # #
        # # . # #
        . . . . .
        # . . . #
        . # # # .`
        );
});
input.onButtonPressed(Button.B, () => { 
    basic.showLeds(`
        # # . # #
        # # . # #
        . . . . .
        . # # # .
        # . . . #`
        );
});

Try pressing A or B!

Step 4

You can also have a secret mode where A and B are pressed together. In that case, add multiple ||basic:show leds|| blocks to create an animation...

input.onButtonPressed(Button.AB, () => {
    basic.showLeds(`
        . . . . .
        . # . # .
        . . . . .
        # . . . #
        . # # # .
        `)
    basic.showLeds(`
        . . . . .
        . # . # .
        . . . . .
        # # # # #
        . . . . .
        `)
    basic.showLeds(`
        . . . . .
        . # . # .
        . . . . .
        . # # # .
        # . . . #
        `)
    basic.showLeds(`
        . . . . .
        . # . # .
        . . . . .
        # # # # #
        . . . # #
        `)
    basic.showLeds(`
        . . . . .
        # . # . .
        . . . . .
        # . . . #
        . # # # .
        `)
    basic.showLeds(`
        . . . . .
        . . # . #
        . . . . .
        # . . . #
        . # # # .
        `)    
})

Send your smileys over radio

Do you have a second @boardname@ at hand? You could use radio and send your smileys or frownies to other @boardname@.

Since radio can send numbers, we decide that 0 is the code for displaying a smiley and 1 is the code for a frowney.

Change your code as follows:

• radio send number sends a number to any other @boardname@ in range
• radio on data packet received runs code when data is received over radio

input.onButtonPressed(Button.A, () => {
    radio.sendNumber(0)
})
input.onButtonPressed(Button.B, () => {
    radio.sendNumber(1)
})
radio.onDataPacketReceived(({receivedNumber}) => {
    if (receivedNumber == 0) {
        basic.showLeds(`
            # # . # #
            # # . # #
            . . . . .
            # . . . #
            . # # # .
            `)
    } else {
        basic.showLeds(`
            # # . # #
            # # . # #
            . . . . .
            . # # # .
            # . . . #
            `)
    }
})

radio