Display Button Counter Variable on Maker Screen

Use the ‘Parts List’ image along with the component cards in your box to correctly plug in the electronic hardware to your Maker Board. The colorful dots next to the legs of the components match up to the ports where that leg should go on Maker Board’s ports.

Code

The code in the editor below is ready to run! Plug in the electronic components just like the Parts List card above, connect Maker Board to your computer's USB port with the cable, and hit 'Upload Your Code!'. Tinker with the code and change something! If you get stuck, you can hit the 'Restore' button to make the code go back to the working example.

/*Show a counter variable on the Maker Screen*/ #include "MakerScreenXVI.h" //A code library enables new functions to be used with the screen MakerScreenXVI lcd; //the library name is followed by the 'name' you give the LCD screen. Here it is 'lcd' int counter = 0; //Create a variable called 'counter' that is an integer (whole number) and has a starting value of 0 void setup() { lcd.begin(); //.begin() 'sets up' the screen. You'll always need it when using Maker Screen lcd.backlightOn(); //turn on the screen backlight pinMode(2,INPUT_PULLUP); //button 2 (raises counter value) pinMode(6,INPUT_PULLUP); //button 6 (lowers counter value) } void loop() { lcd.setCursor(0,0); //always write the counter variable from the 0 column, 0 row (top left) of the screen if(digitalRead(2)==LOW){ //if button 2 is pressed... lcd.clear(); //clear off any old value on the screen counter++; //increase counter variable by one lcd.print(counter); //display the value of the counter variable delay(100); //delay 100 milliseconds (0.1 second) } if(digitalRead(6)==LOW){ //if button 6 is pressed... lcd.clear(); //clear off anything written on the screen counter--; //subtract one from the counter variable lcd.print(counter); //display the value of the counter variable delay(100); //delay 100 milliseconds (0.1 second) before starting the loop again } } // (c) 2019 Let's Start Coding. License: www.letsstartcoding.com/bsdlicense

Walkthrough Video

Watch the video for a line-by-line explanation of how the example program works. Then you'll be ready to make some changes of your own!

Challenges

Can you complete the challenges? Change the code in your code editor above. Upload your code to see the effect when you're finished. Complete a challenge? Check it off the list!

Adjust the delays inside the ‘if’ statements. What is a good delay so you’re able to press the button and release it and only change the variable value by 1?

Add in the code lcd.backlightOn(); to the first ‘if’ statement and the code lcd.backlightOff(); to the second ‘if’ statement, so that the backlight is on when you are raising the variable, and the backlight is off when you have lowered the variable.

After the line lcd.setCursor(0,0); , add an ‘if’ statement that prints a special message when counter reaches a certain number. For example:
if(counter ==10){
lcd.print(“double digits!”);
}

Concepts

These are the new code concepts covered in this example program. To become a great coder, read through these concepts to learn new vocabulary.

Quiz

If you're having trouble, try to run an experimental program or look at the example code to help you find the answer.

1. Which syntax ends the entire 'void loop' function?

semicolon ;
parentheses )
closing curly brace }

2. Which syntax ends a single code command?

semicolon ;
closing curly brace }
period .

Back to Projects Grid