Chapter 14. the EV3 lights, buttons, and displayThe EV3 has five buttons and a display screen that you can use to interact with your programs, much like you use a keyboard to interact with a computer. The buttons are illuminated with colored lights, and in this chapter, you’ll learn how to control them using the Brick Status Light block. You’ll also learn about some new features of the Display block that give you more control over the EV3 screen.

the EV3 buttons

You can use the five large buttons on the front of the EV3 (shown in Figure   14-1 ) to control your program. For example, you can make the program wait for you to press a button or choose an action based on which button you press. Like with the Touch Sensor, your programs can detect when a button is pressed, released, or bumped (pressed and released). The Back button can’t be used by a program; pressing it while your program is running will end the program.

The Wait, Switch, and Loop blocks each have Brick Buttons modes (see Figure   14-2 ), or you can work with the buttons using the Brick Button block, which is similar to the other Sensor blocks. Each button has three modes: Compare, Measure, and Change.

Compare mode lets you test whether one or more buttons is in a particular state (pressed, released, or bumped). Figure   14-3  shows the button selection menu, which has a list of numbers to identify each button. These numbers are known as Button IDs. If you select more than one button, the test succeeds when either button is in the desired state. When the Brick Button block is in Compare mode (Figure   14-3 ), it generates two Output values: a Logic value to tell you whether one of the selected buttons is in the selected state and a Number value to tell you the Button ID of the matching button.

Figure 14-1. The EV3 buttons

Figure 14-2. Selecting a Brick Buttons mode

Figure 14-3. Selecting the buttons for Compare mode

Measure mode lets you determine which button is currently pressed. Change mode is only supported by the Wait block, which waits for the state of any of the buttons to change.

NOTE

If more than one button is pressed at the same time, one button might override the other so that only one button press is sensed.

the powerSetting program

In Chapter   11 , I mentioned that you could improve the Wall-Follower program by using a variable to control the Power parameter used by all seven Move Steering blocks. This makes it easier to change the value because you only need to change it in one place. You can control the parameter with Brick buttons to make it even more convenient to test out different values. In this section, I’ll describe the PowerSetting program in order to show you how to do this. With just a few simple changes, you can use this code anytime you want to set a value with Brick buttons at the beginning of a program.

The PowerSetting program uses a variable called Power to store the current value and display it on the EV3 screen. Pressing the Right button increases the value by one, and pressing the Left button decreases the value by one. Pressing the Center button accepts the current value. Example   14-1  shows the pseudocode for the program.

Example 14-1. The PowerSetting programset Power to 50begin loop display the current value if the Right button is bumped then Power = Power + 1 end if if the Left button is bumped then Power = Power - 1 end ifloop until the Center button is bumped

Some of these lines of pseudocode require a few programming blocks to accomplish. For example, the line Power = Power + 1 is a short way of saying, “Take the current value of the Power variable, add one to it, and store the result in the Power variable,” which requires three programming blocks.

THE INITIAL VALUE AND THE LOOP

The first thing the program does is use a Variable block to set the Power variable’s initial value, followed by a Loop block that holds the rest of the program (as shown in Figure   14-4 ). I’ll set the initial Power value to 50 because that’s in the middle of the Power range of 0 to 100. The Loop block uses Brick Buttons - Compare mode to keep repeating until the Center button is bumped.

Figure 14-4.  Initializing the Power variable and configuring the loop

Making the loop wait for the button to be bumped, rather than just pressed, is often a better choice because it waits for the button to be pressed and released before moving to the next part of the program. This way, the buttons will be back to their normal state (released) and a problem is less likely to occur if the next part of your program also uses the buttons.

DISPLAYING THE CURRENT VALUE

Each time the loop repeats, the program reads and displays the current value using a Variable block and a DisplayNumber My Block (created in Chapter   12 ), as shown in Figure   14-5 . I’ve set the Row parameter of the DisplayNumber block to 6 so that the value is displayed closer to the center of the EV3 screen. The Label parameter is set to “Power: ”.

Figure 14-5. Displaying the labeled value

Figure 14-6. Adding one to Power if the Right button has been bumped

Figure 14-7. The full PowerSetting program

ADJUSTING THE POWER VALUE

When the current Power value is displayed, you can use the EV3’s Left and Right buttons to adjust it. The code shown in Figure   14-6  deals with the Right button. When the Right button is bumped, it triggers the true case on the Switch block, which adds one to the Power variable using the Math and Variable blocks. There are no blocks on the false case because you don’t need the program to do anything when the button isn’t bumped.

The code for dealing with the Left button is almost identical, except that it subtracts one from the Power value when the button is pushed. Figure   14-7  shows the entire program with the new blocks added.

TESTING THE PROGRAM

When you run this program, it should first display “Power: 50”. Press the Right and Left buttons to change this value. Press the Center button to end the program.

When the program ends, the Power variable is set to the value you selected. You can use the blocks in this program at the beginning of a larger program to set a variable. Once you place more blocks after the Loop block, pressing the Center button starts the rest of the program (instead of exiting).

CHANGING THE VALUE FASTER

This PowerSetting program only changes a setting by one each time you press and release the button, so it can take awhile if you want to change a value by a lot. How can you speed this up?

Right now, the two Switch blocks in the loop are set to Bumped, which means you need to press and release the button to change the value. The program responds more quickly if you just check for the button being pressed instead of waiting for it to be pressed and released. What happens if you change the State parameter of both Switch blocks to Pressed, as shown in Figure   14-8 ?

The value certainly changes faster, but now it changes too fast because the loop repeats several times even if you just press the button for a moment. To make the program usable, you need to slow the loop down a little by adding a Wait Time block (Figure   14-9 ) at the end of the loop body. I’ve found that a setting of 0.2 seconds provides a good balance between changing the value quickly and being able to stop at the value I want. Experiment with different values to see what works best for you.

Figure 14-8. Change the State from bumped to pressedCHALLENGE 14-1

To make large changes even easier, enhance the Power-Setting program by using the Up button to add 10 to the value and the Down button to subtract 10 from the value. Does it make more sense to use Bumped or Pressed when checking these two buttons?

When you have the PowerSetting program working to your satisfaction, you can put the code to work in the WallFollower program. To make the code easier to reuse, you could start by creating a My Block from the entire PowerSetting program. Then add the new block to the beginning of the WallFollower program and use the Power variable to control the Move Steering blocks.

the brick status light

The Brick Status Light illuminates the area around the EV3 buttons. When your EV3 is on, the light is solid green, and when a program is running, it flashes a blinking green pattern unless your program changes it. The Brick Status Light block, found on the Action palette, lets you control the light in your programs (Figure   14-10 ).

Figure 14-9. Adding the Wait Time block to the end of the loop body

Figure 14-10. The Brick Status Light block

The Brick Status Light block has three modes: Off, On, and Reset. Off mode turns the light off. On mode turns the light on and lets you select the color (green, orange, or red) and whether the light should be solid or pulse. Reset mode returns the light to the default blinking green state (which has a slightly different pattern than pulse).

One way to use the light is for debugging. For example, you can use the light to give a visual indication of how a program is doing—perhaps green if everything is going well and red if there’s a problem. You can also set it to indicate which part of a program is executing or whether a condition is met, without impacting the normal operation of your program.

the ColorCopy program

The ColorCopy program makes the Brick Status Light show the color that the Color Sensor detects. If you hold a red object in front of the Color Sensor, the light turns red; if the sensor detects green, the light turns green; and if it detects yellow, the light turns orange (the Color Sensor doesn’t detect orange, so yellow is the closest match). If the Color Sensor reading is anything else, the light turns off.

Figure   14-11  shows the completed program. The Switch block uses Color Sensor - Measure - Color mode to determine which color is detected. The first three cases match red, green, and yellow and turn the light on with the appropriate color. The Pulse parameter is turned off so that the light stays on as long as the sensor detects the same color. The bottom case is the default case that is used if the sensor reads anything other than red, green, or yellow, and turns the light off.

Run the program. The light should match the color of an object held in front of the Color Sensor. When no object is in front of the sensor, or if the object is not red, green, or yellow, the light should turn off.

Figure 14-11. The ColorCopy programCHALLENGE 14-2

Write the ProximityAlarm program, which sets the Brick Status Light depending on how close the robot is to an object. Use either the Infrared or Ultrasonic Sensor to determine the distance and show a blinking red light if the robot is closer than the threshold you chose, and a solid green light otherwise.

the display block

The Display block has four main modes: Text, Shapes, Image, and Reset Screen. You’re already familiar with the Text mode. The Reset Screen mode simply returns the display to the normal information shown when a program is running. The Image and Shapes modes require a little more explanation.

DISPLAYING AN IMAGE

Image mode lets you display a picture on the EV3 screen. The EV3 software includes a wide variety of images to choose from, including several faces, arrows, dials, and other objects. You can also use the EV3 Image Editor to create your own image files (select Tools▸Image Editor from the menu).

Figure   14-12  shows how the Display block looks using Image mode. Click the File Name box to select an image. Click the Display Preview button to show or hide the preview window, which lets you see how the image will look on the EV3 screen (Figure   14-13 ).

Figure 14-12. The display block in Image mode

Figure 14-13. The preview window

The X and Y parameters set the location of the top-left corner of the image. The EV3 screen is made up of a grid of dots called pixels. (Pixel is short for picture element.) The screen is 178 pixels wide and 128 pixels high, and the location of each pixel is indicated by an X and Y value. The X value tells you the left-to-right location, with the values going from 0 to 177. The Y value tells you the top-to-bottom location, with 0 at the top of the screen and 127 at the bottom (see Figure   14-14 ).

Figure 14-14. X and Y values for the EV3 screen

Set the X and Y values to change where the image is shown on the EV3 screen. For example, Figure   14- 15 shows the Big smile image (also used in Figure   14-14 ) moved up to the top of the screen by setting the Y parameter to -41 (which moves the image up 41 pixels). Depending on the values you choose for X and Y, part of the image might be cut off.

Figure 14-15. The Big smile image at the top of the display

the Eyes program

Showing an image on the display is an easy way to give a robot more personality. The Eyes program is a simple example that uses the Random block and six images like the one shown in Figure   14-16  to make the EV3 look a little bored, as if it’s waiting for the user to do something. The only difference between the six images is the direction in which the eyes are looking.

Figure 14-16. The Bottom left image

Figure 14-17. The Eyes program

The program is shown in Figure   14-17 . The Random block generates a number between one and six and passes it to the Switch block. Each of the six cases of the Switch block contains a Display block showing a different image. The image files for each case are shown in Table   14-1 . The Wait block gives a little pause between each image change.

Table 14-1.  image files for the eyes programCase Filename

1 Bottom left

2 Bottom right

3 Middle left

4 Middle right

5 Up

6 Down

Run the program and you should see the eyes randomly looking in different directions.

drawing on the EV3 screen

The Display block’s Shape mode lets you draw points (single dots), circles, rectangles, and lines. Figure   14- 18 shows the Display block in Shape - Point mode. Set the location of the point by entering the X and Y

parameters. The Color parameter, indicated by the black box icon, determines whether the point is drawn in black (turning the pixel on) or white (turning the pixel off). If you ever want to clear a screen without drawing anything new, you can simply draw a single white pixel to the screen with the Clear Screen parameter set to true. (The pixel you draw won’t show up because all the other pixels are white, too.)

Figure 14-18. Drawing a point

Figure   14-19  shows the Display block with the Shape - Circle mode selected. In this case, the X and Y parameters control the center of the circle, and the Radius parameter lets you control the size of the circle. The Fill parameter (indicated by the paint can icon) controls whether the inside of the circle is filled in or if only the outline is drawn. The preview window shows how the circle will be drawn.

Figure 14-19. Drawing a circle

Figure   14-20  shows the Display block with the Shape - Rectangle mode selected. The X and Y parameters mark the upper-left corner of the rectangle, and the size of the rectangle is defined by the Width and Height parameters.

In Shape-Line mode, the Display block appears as in Figure   14-21 . To draw a line, you need one point for each end of the line. The X1 and Y1 parameters set the location of one end of the line, and the X2 and Y2 parameters set the location of the other end.

Figure 14-20. Drawing a rectangle

Figure 14-21. Drawing a line

the EV3Sketch program

In this section, you’ll create the EV3Sketch program, which uses the line-drawing feature of the Display block to turn the TriBot into a sketchpad using the TriBot’s two wheels to control where the line is drawn. The basic idea of the program is fairly simple: It repeatedly draws a line from the previous point to the location defined by the current value of the two Rotation Sensors.

The program uses two variables, X and Y, to store the last location used. At the beginning of the program, the EV3 screen is cleared, the variables are initialized to 0, and the Rotation Sensors are reset. The program then enters a loop, which first reads the Rotation Sensors to set a new location (the B motor sets the new X value and the C motor sets the Y value). Then a line is drawn from the old location to the new location, and the values for the new location are stored in the X and Y variables to be used the next time through the loop.

In addition to drawing the line, there should be a way to clear the EV3 screen to start a new drawing. You can do this by setting the Clear option of the Display block if the Center button is bumped. Example   14-2  shows the pseudocode for this program.

Example 14-2. The EV3Sketch program

clear the EV3 screenset X to 0set Y to 0reset the Rotation Sensors for motors B and Cbegin loop read the Rotation Sensor for motor B read the Rotation Sensor for motor C draw a line from X,Y to the point defined by the motor B and C positions; if the Center button is bumped then set the Clear option set X to the motor B position set Y to the motor C positionloop forever

The first section of the program is shown in Figure   14-22 . This clears the EV3 screen, initializes the variables, and resets the Rotation Sensors.

Figure   14-23  shows the main part of the program where the Display block draws a line. To draw a line, you need to give the Display block two points: a starting point defined by the values of the X and Y variables, and an end point defined by the values read from the Rotation Sensors for the B and C motors. All of these values are passed to the Display block using data wires.

The Brick Buttons block checks to see whether the Center button has been bumped and outputs true or false accordingly. That value is passed to the Display block and used to control the Clear Screen parameter so that when you press (and release) the button, the Display block clears the EV3 screen before drawing the line.

The final two blocks store the values from the Rotation Sensors in the X and Y variables so that they can be used the next time the loop repeats.

Five blocks supply the settings for the Display block, and because the order of these blocks doesn’t matter, I was able to place them so that the data wires don’t cross much. (I recommend doing that when possible to make the program easier to read.)

When you run the program, it should start by clearing the EV3 screen. Create a drawing by turning the B wheel to move the virtual pen left to right and the C wheel to move top to bottom. Press the Center button to erase the screen.

The initial drawing starts from the upper-left corner of the EV3 screen. To start a drawing from some other point, move the virtual pen to where you want to start and then press the Center button to clear the screen. You can start a new drawing from there.

Figure 14-22.  Initializing the screen, variables, and sensors

Figure 14-23. Reading the sensors, drawing the line, and saving the new location

further exploration

Here are two more activities to try that use the ideas explored in this chapter:

1. The PowerSetting program has a flaw that can be a bit annoying: It doesn’t limit the value to the 0–100 range of possible Power values. Modify the program so that the value never becomes less than 0 or more than 100 (in other words, ignore any change that would put the value out of range). To alert users to an invalid value, blink the Brick Status Light red for one second if they try to go below 0 or over 100.

2. Adapt the CountDown program from Chapter   13  to show a series of images as the time counts down. You can use one of the groups of images included in the EV3 software to display a dial, progress bar, or timer, or use the Image Editor tool to create your own sequence of images.

conclusion

The EV3 buttons give you a very convenient way to interact with your program. The Brick Status Light block lets you control how the buttons are illuminated, giving you another way to convey information to a user and make your programs more interesting.

The PowerSetting program demonstrates how to use the Left and Right buttons to set the value for a variable. The other programs in this chapter show you how to use the Display block to do more than just print text. Using this block, you can display images and create drawings on the screen. Your programs can use these features to take full advantage of the EV3 screen.