Introduction: How to Make a SuperButton Crypto Light Switch With a MakerBit for Micro:bit and the Elegoo 37 Sensor Kit

Let’s all agree on the obvious. It is simple to run a wire from a power source to a light, through a switch such as a push button. Push = light. Release = dark. No programmable microcontroller necessary.

The fun begins when the button becomes a sensor, rather than a switch. Then it can tell a control program that the user wants something to happen. What actually happens could be anything, limited only by the maker’s imagination. We are going to make a SuperButton Crypto Light Switch using a push button and Roger Wagner's MakerBit by 1010 Technologies.

NOTE: We have edited this Instructable to provide better links to the MakeCode editor, and now make the code listings available from a dedicated directory at github.

This Instructable begins a series demonstrating how to use a micro:bit with the popular 37-Sensor Kit sold by Elegoo, Inc. The Sensor Kit actually targets 5-volt Arduino-style devices. Good news: Roger Wagner’s MakerBit makes it easy to use this very nice Kit with the 3.3-volt micro:bit.

The code in this Instructable also corrects for an issue with the Elegoo device that might prevent the Arduino example sketch supplied by Elegoo from working as expected.

Step 1: Gather the Materials

· Roger Wagner's MakerBit board (Version 5 or later)

· micro:bit controller

· Ribbon cable with 12 wires (supplied with the MakerBit)

· Three jumper wires with female connectors on both ends (supplied with the MakerBit)

· 1 LED

· 1 push button module from the Elegoo 37 Sensor Kit

· External power supply, between 6 and 12 volts, with 3.5mm round pin

· USB cable

· Notice that we do not need a circuit prototyping breadboard – Elegant! However, just for fun, we used a real bread board made of wood as the backdrop for all the photos. (grin)

Step 2: Hook Up the Sensor

Snap the micro:bit into the MakerBit with its built-in LED display on the top side.

Locate the tri-color header on the MakerBit that is labeled for pins P5 through P16. Connect the three jumper wires to the black (ground), red (5v power), and white (signal) posts on the group labeled “P8”.

Hold the push button module so the pins point down and the button is on top, facing you. Notice the pin on the left has a letter “S” beside it. This is the signal pin. Connect it to the jumper wire that goes to the white pin (P8) on the MakerBit. Connect the middle pin to the red (power) pin on the MakerBit. Connect the right-hand pin to the black (ground) pin.

Step 3: Connect the LED

Examine the 12-wire ribbon cable. Hold it so the six, small connectors point up and the brown wire is on the outside, on the left side. This brown wire and the orange one next to it will get connected to pin P16. Push an LED into the small connector for this wire pair. Important: line up the SHORT post on the LED with the small triangle on the connector.

Plug the 12-wire ribbon cable into the black header labeled “LEDs 11-16” on the MakerBit. Careful! There are two of these black headers. The one you want is the middle one, next to the blue header. It will not hurt anything to plug into the other, black header, which is for pins 5-10. It's just that the code expects the LED to be on pin 16, so it needs the cable plugged into the correct header.

Step 4: Power Up!

Connect the external power supply to the MakerBit’s round barrel connector. Connect the USB cable to the micro:bit and to the computer being used to program it.

It is OK to connect both the external power source and the USB cable. The MakerBit uses the USB only for data communication in this configuration, while power for the pins and the motor controller comes from the external supply. This can relieve some of the electrical load on the micro:bit.

The Power of Using MakerBit to Power Your micro:bit Projects

Roger Wagner's MakerBit board by 1010 Technologies makes it easy to connect devices to the BBC micro:bit without the need of a breadboard. What’s really great is, the devices can be of the 5-volt type typically used with Arduinos. MakerBit automatically performs the conversion between 5-volt devices and the 3.3 volt nature of the micro:bit. This opens up a big world for MakerSpacers to explore the new micro:bit controllers.

The MakerBit can act almost like a turbocharger for the micro:bit when the MakerBit is connected to an external power source of 6 to 12 volts. It supplies a full 5 volts of power output to the digital pins. And it can supply the full 6 to 12 volts of external power through the motor controller to drive robotics. Yet, it steps input voltage on the pins down to the 3.3 volt level that the micro:bit requires. In other words, a MakerBit with external power can connect to many of the same 5-volt devices that an Arduino can.

A MakerBit receiving external power also supplies power to the micro:bit. This means the micro:bit can run without needing a computer connection or the funny, little battery plug that comes with the micro:bit. Of course, you could leave it connected via USB if your program needs to send or receive serial data.

Step 5: Upload Code Example #1

Our first example simply uses the button as a dumb switch. It will get more interesting very soon.

There are several, different coding tools available for the micro:bit. We will use the MakeCode resource that runs in a web browser. The following link will open the editor in your browser and load the code for this example:

https://makecode.microbit.org/_Pmu03t10K4gd

The editor initially shows the code in "blocks" view. Behind the scenes, the editor uses JavaScript. You can switch to the JavaScript view in the editor. For the sake of completeness, the JavaScript code is also available on github. The code window at the end of this Step lists the program and gives a link to download the source code. You can paste this code into a blank JavaScript window of the MakeCode editor. Then, when you click on the Blocks view, it will turn the JavaScript into blocks that you can view and edit.

Simple Push Button for MakerBit/MakeCode

// ******************************************************
// Push button with pull-up resistor | MakerBit example
//
// To demonstrate using a micro:bit with the push-button
// module in the 37-Sensors kit by Elegoo.
// The module has a built-in pull-up resistor, so
// the signal pin is HIGH when the button is NOT pressed.
// Pressing the button grounds the signal pin to LOW.
//
// Target: MakeCode Javascript editor for micro:bit
//
// David Sparks June 21, 2018
// ***************************************************
//
// Setup
let ButtonState = 0
ButtonState = pins.digitalReadPin(DigitalPin.P8)
pins.digitalWritePin(DigitalPin.P16, 0)
// Loop
basic.forever(() => {
ButtonState = pins.digitalReadPin(DigitalPin.P8)
if (ButtonState > 0) {
pins.digitalWritePin(DigitalPin.P16, 0)
} else {
pins.digitalWritePin(DigitalPin.P16, 1)
}
})
view rawPush_Button_MB hosted with ❤ by GitHub

Step 6: Compile the Code and Upload It to the MakerBit

At the bottom of the browser screen, find the box that says “Untitled” and has a little floppy disk icon. Click the icon, give the program a name, and choose a place to save the file. Click “SAVE” to compile the file.

Check to make sure the micro:bit is connected to the computer with the correct USB cable. Open a file directory window on the computer and locate the MICROBIT device. It looks like a hard drive. Drag the file you just compiled onto the MICROBIT drive (or into the MICROBIT window, if you double-clicked on the device.) A light underneath the micro:bit flashes while the file uploads into the device.

Step 7: Test It

Click the push button. The LED should light up while you press the button down, and it should turn off when you release the button. Like we said: a dumb button.

The reason we start here is to establish that the hardware setup is working. The MakerBit is sensing the button, and is able to turn the light on and off.

Keep going. With the help of MakerBit and a couple of tweaks to the code, we are going to turn this dumb button into a smart button. The first improvement is to make it work like a toggle switch.

Step 8: Transform a Dumb Button Into a Smart Sensor

What can you do with the push button and a MakerBit? Plenty. Other Instructables in this series will show how to incorporate buzzers, motors, and much more with the push button.

All we did here was to turn a light on and off. There is more than one way to do it. Let’s try something different. Let’s program the push button to be a “toggle” switch, where one push turns the light on, and then it stays on until the next push turns it off. Here is a link to open the MakeCode editor (in Blocks view) with the Toggle script already loaded.

Example #2: Toggle

https://makecode.microbit.org/_ee3A5HfgDbgL

The JavaScript code for this example is available on github. You can copy it directly from the code window, below, or use the link at the bottom of the listing. Paste the following code into an empty JavaScript window of a new MakeCode project, compile and upload to the MakerBit.

Now the MakerBit has changed the function of the push button. It acts like a toggle. This change has many applications for starting and later stopping processes at different times.

Toggle Button for MakerBit and MakeCode

// **********************************************************
// Push Button Toggle Switch | MakerBit Example Code
//
// To demonstrate using code to make a simply push button
// function as a toggle switch.
//
// Target: MakeCode Javascript editor for micro:bit
//
// David Sparks June 21, 2018
// **********************************************************
//
// Declare variables
let LEDstate =0
let ButtonState =0
//
// Setup
pins.digitalWritePin(DigitalPin.P16, 0)
ButtonState=pins.digitalReadPin(DigitalPin.P8)
LEDstate=0
//
// Loop
basic.forever(() => {
ButtonState=pins.digitalReadPin(DigitalPin.P8)
// Check the button state. Act only if it is LOW,
// indicating button is being pushed down.
if (ButtonState<=0) {
// The button has been pushed down. Reverse the state
// of the LED and save the state in a variable.
if (LEDstate==0) {
LEDstate=1
pins.digitalWritePin(DigitalPin.P16, 1)
} else {
LEDstate=0
pins.digitalWritePin(DigitalPin.P16, 0)
}
// Wait for button to be released.
while (ButtonState<=0) {
ButtonState=pins.digitalReadPin(DigitalPin.P8)
}
}
})

Step 9: Make the SuperButton Crypto Light Switch

You can buy simple pushbuttons and basic toggle buttons at an electronics store. But it might be very hard to buy a hardware device that implements the SuperButton Crypto Light Switch.

Yet, the wiring does not change from the previous examples. All we have to do is change the programming. This where the button truly becomes a sensor. And the MakerBit really starts to make your Maker halo glow.

The code in this step detects user actions – button pushes – and starts a process. Could be any process. It decides what action to take based on rules written in the program. The rules require the user to know a secret. That’s the Crypto part.

Rule 1: if the light is off, then the user must push the button exactly two times within one second to turn it on. The light turns on at the end of the one-second interval, but only if the user clicks twice.

Rule 2: if the light is on, then the user must push the button exactly one time then wait a full second -- with no more clicks -- in order to turn it off.

The code for this step also takes the programming concepts to the next level. It features user-defined functions to help keep the code more compact and readable. The following link will open the online editor with the Crypto Button code already loaded in blocks view.

Example #3 Crypto Button

https://makecode.microbit.org/_3kD9Dw7e3HRj

You can also paste the code from the listing below directly into a blank JavaScript window of the editor, compile, and upload it into your MakerBit. The LED might be illuminated while the code uploads. Wait for it to turn off before you start pushing the button.

Crypto Push Button for MakerBit

// *************************************************************
// Crypto Push Button | MakerBit Example Code
//
// Demonstrates coding to make a simple push button
// require a user code to activate a switch.
// The code counts the number of button presses in a short time.
//
// Target: MakeCode Javascript editor for micro:bit
//
// David Sparks June 21, 2018
// *************************************************************
//
// Declare variables
let theInterval =0
let LED_on_off =0
let theCount =0
let endTime =0
let pin8_Status =0
let startTime =0
let clickDetected =0
//
// Define function to detect button presses
function detectClick() {
clickDetected=0
pin8_Status=pins.digitalReadPin(DigitalPin.P8)
while (pin8_Status<=0) {
clickDetected=1
pin8_Status=pins.digitalReadPin(DigitalPin.P8)
}
}
//
// Define function to count button presses
function countClicks() {
startTime=input.runningTime()
endTime=startTime+theInterval
theCount=0
while (input.runningTime() <endTime) {
detectClick()
if (input.runningTime() <endTime) {
if (clickDetected==1) {
theCount=theCount+1
}
}
}
}
//
// Setup
pin8_Status=pins.digitalReadPin(DigitalPin.P8)
pins.digitalWritePin(DigitalPin.P16, 0)
//
// Loop
basic.forever(() => {
if (LED_on_off==0) {
detectClick()
if (clickDetected>0) {
theInterval=1000
countClicks()
if (theCount==1) {
pins.digitalWritePin(DigitalPin.P16, 1)
LED_on_off=1
}
}
}
if (LED_on_off==1) {
detectClick()
if (clickDetected>0) {
theInterval=1000
countClicks()
if (theCount==0) {
pins.digitalWritePin(DigitalPin.P16, 0)
LED_on_off=0
}
}
}
})

Step 10: Understand What Is Going on in the Crypto Code

The “LET” statements in the code declare all the variables.

The “detectClick” function sets the “clickDetected” variable to 1 after the button has been pushed down and released. Otherwise, it sets “clickDetected” to the default value of 0.

The “countClicks” function sets the variable named “theCount” to 0, then repeatedly calls the “detectClick” function until the time indicated in the variable named “theInterval” runs out. The variable “theCount” gets increased by one for each click detected during the time interval. Note that an Interval of 1000 milliseconds is equal to one whole second.

The main loop has two, major If statements. Each If statement has a couple of interior If statements that enforce the relevant rule.

The first major If statement runs only if the LED is off. It checks for a click. If a click is detected, then it sets a 1000-millisecond interval and calls the countClicks function. The interior If statements in this code segment turn the LED on if EXACTLY one more click happens during the Interval.

The second major If statement in the main loop runs only if the LED is on. It works the same as the first If statement, with one difference. It turns the light off only if there are NO MORE clicks during the interval.

For both major IF statements, the light turns on or off after the full one-second interval elapses.

Step 11: What About That Issue With the Elegoo Example Code?

The push button module by Elegoo has a “pull-up” resistor connecting the power and signal pins. It is there to help "de-bounce" the push button. This is a very nice feature that helps to eliminate the need for a breadboard.

The pull-up resistor will hold the button in a “HIGH” voltage state when the button is not being pressed. Pressing the button short-circuits the power to the ground, which also pulls the signal on the button down to “LOW” voltage.

The code examples in this Instructable make use of this behavior. An action starts when the signal on Pin 8 goes “LOW”, indicating the button is being pushed. The action stops when the signal goes “HIGH”, indicating the button has been released.

At the time of writing, this was the opposite logic compared to the example code provided by Elegoo on its official web site for use with Arduino. Either approach can serve the purpose. The programmer just has to determine which state, HIGH or LOW, corresponds to the action the program should take.

Step 12: