Choose the Display Mode

Mode Selector

Block Text Field

Inputs

Display Preview button

Select the type of text or graphics you want to display using the Mode Selector. After you have selected the mode, you can choose values for the inputs. The inputs available will change depending on the mode. The modes and inputs are described below.

You can click the Display Preview button to see a preview of what the Display block will show on the EV3 Display. You can keep the preview open while you are choosing the input values for the block.

Modes: Text – Pixels, Text – Grid, Shapes – Line, Shapes – Circle, Shapes – Rectangle, Shapes – Point, Image, Reset Screen

Display Coordinates

Many of the Display block modes use X and Y coordinates to specify where to draw an item. The coordinates specify a pixel position on the EV3 Brick display. The position (0, 0) is at the upper left corner of the display, as shown in the image below.

The display is 178 pixels wide and 128 pixels high. X coordinate values range from 0 at the left of the display to 177 at the right. Y coordinate values range from 0 at the top to 127 at the bottom.

Tips and Tricks

You can use the Display Preview button in the top left corner of the Display block to help you find the right display coordinates.

Text – Pixels

The Text – Pixels mode can display text at any location on the EV3 Brick display.

If Clear Screen is True, the display will be cleared before the text is drawn.

The Text input is at the top of the block. It contains the text string to display. Choose “Wired” to show a Text input that can accept a Data Wire. The text can include any characters in the Supported Text character set.

The X and Y inputs specify the Display Coordinates of the starting point of the text, which is the upper-left corner of the displayed text.

Use the Color Input to choose the color of the text. If you choose Black, the text will display in black on a white background. If you choose White, the text will display in white on a black background.

You can use the Font input to choose from three different typefaces: Normal, Bold, and Large.

Inputs used: Clear Screen, Text, X, Y, Color, Font

Example

This program displays “Hello!” in the center of the display using the Large font.

Text – Grid

The Text – Grid mode displays text aligned to a grid of rows and columns. This makes it easy to display and align multiple lines of text. The height of a row is enough space to display a line of text in the Normal or Bold fonts, and each character in these fonts is one column wide.

If Clear Screen is True, the display will be cleared before the text is drawn.

The Text input is at the top of the block. It contains the text string to display. Choose “Wired” to show a Text input that can accept a data wire. The text can include any characters in the Supported Text character set.

The Column input specifies the starting column (horizontal position) for the text. Each column is 8 pixels wide. The columns are numbered from 0 at the left to 21 at the right.

The Row input specifies the row or “line number” (vertical position) for the text. Each row is 10 pixels high. Row 0 is at the top of the display, and row 11 is near the bottom of the display.

Inputs used: Clear Screen, Text, Column, Row, Color, Font

Tips and Tricks

The width of a column is the same as the width of a character in the Normal and Bold fonts, so adding 1 to Column will start the text one character to the right when using these fonts. Characters in the Large font are twice as wide and twice as tall as the Normal font, so each character occupies two columns and two rows.

Use the Color input to choose the color of the text. If you choose Black, the text will display in black on a white background. If you choose White, the text will display in white on a black background.

You can use the Font input to choose from three different typefaces: Normal, Bold, and Large.

Inputs used: Clear Screen, Text, Column, Row, Color, Font

Example

This program displays two lines of text. The second Display Block uses False for the Clear Screen input to add the second line without erasing the first line.

Tips and Tricks

When displaying multiple lines of text in the Large font, add 2 to the Row input between each line to keep the lines from overlapping.

Shapes – Line

The Shapes – Line mode draws a straight line between any two points on the display.

If Clear Screen is True, the display will be cleared before the line is drawn.

The X1 and Y1 inputs specify the Display Coordinates of the first point in the line.

The X2 and Y2 inputs specify the coordinates of the second point.

You can use the Color input to choose either a black or white line. A white line will only be visible if Clear Screen is False and the line draws over an area where a previous Display Block displayed something black.

Inputs used: Clear Screen, X1, Y1, X2, Y2, Color

Example

This program will draw a diagonal line across the EV3 Brick display.

Shapes – Circle

The Shapes – Circle mode draws a circle on the display.
If Clear Screen is True, the display will be cleared before the circle is drawn.

The X and Y inputs specify the Display Coordinates of the center of the circle. The Radius input specifies the radius of the circle in pixels.

If Fill is True, the interior of the circle will be filled. If Fill is False, only the outline of the circle is drawn.

You can use the Color input to choose either a black or white circle. A white circle will only be visible if Clear Screen is False and the circle draws over an area where a previous Display block displayed something black.

Inputs used: Clear Screen, X, Y, Radius, Fill, Color

Example

This program continuously displays a filled circle whose radius is the Ambient Light Intensity value from the Color Sensor. The display is updated every tenth of a second.

Shapes – Rectangle

The Shapes – Rectangle mode draws a rectangle on the display.

If Clear Screen is True, the display will be cleared before the rectangle is drawn.

The X and Y inputs specify the Display Coordinates of the upper left corner of the rectangle. The Width and Height inputs specify the size of the rectangle in pixels.

If Fill is True, the interior of the rectangle will be filled. If Fill is False, only the outline of the rectangle is drawn.

You can use the Color input to choose either a black or white rectangle. A white rectangle will only be visible if Clear Screen is False and a previous Display Block displayed something black in the same area of the display.

Inputs used: Clear Screen, X, Y, Width, Height, Fill, Color

Example

This program fills the entire display with black by using a large filled rectangle. It then draws a smaller, outlined white rectangle on top of it.

Tips and Tricks

You can use a filled white rectangle to clear part of the display without affecting other parts of the display.

Shapes – Point

The Shapes – Point mode draws a single pixel on the display.
If Clear Screen is True, the display will be cleared before the pixel is drawn.

The X and Y inputs specify the Display Coordinates of the pixel to draw.

You can use the Color input to choose to draw the pixel in either black or white. Drawing in white can be used to clear black pixels drawn by previous Display blocks.

Inputs used: Clear Screen, X, Y, Color

Image

The Image mode draws a graphic image file.

The File Name input is at the top of the block. It lets you choose from a list of image files. The images in the “LEGO Images” category are the image files that are included with the EV3 Software. The images listed in the “Project Images” category are the images that have already been used in your project. This makes it easy to use the same image multiple times in a program or project.

If Clear Screen is True, the display will be cleared before the image is drawn.

The X and Y inputs specify the Display Coordinates for the upper left corner of the image. The image will be drawn below and to the right of this point, using as much space as necessary to draw the entire image. For image files that are sized to fill the entire display, use X = 0 and Y = 0.

Inputs used: Clear Screen, File Name, X, Y

Reset Screen

The Reset Screen mode returns the EV3 Brick display to the normal screen of information shown when a program is running. This screen shows the name of the program and other feedback. When you run a program on the EV3 Brick, this screen is shown until the first Display block in the program executes.

Keeping Displayed Items Visible

When an EV3 program ends, the display on the EV3 Brick is cleared and returned to the EV3 Brick menu display. This will erase any text or graphics that were displayed by the program. If, for example, your program contains a single Display block with nothing after it, the display will be cleared so quickly when the program ends that you will not get a chance to see the results of your Display block.

If you want to keep a display showing at the end of the program, you will need to add a block to the end of the program to keep the program from ending right away, as shown in the following examples.

Example 1

This program uses a Wait block to put a 3-second delay at the end of the program. This will keep the circle displayed for 3 seconds before the display is cleared at the end of the program.

Example 2

This program uses a Loop at the end of the program to keep the program running forever. This will keep the circle displayed until you stop the program by pressing the Back button on the EV3 Brick.

Displaying Multiple Items

If you want to display multiple text or graphic items on the display at the same time, it is important to not clear the EV3 Brick display between items. Every Display block mode has a Clear Screen input. If Clear Screen is True, the entire display will be cleared before the item is displayed. This means that to display multiple items you must set Clear Screen to False for every Display block except the first one.

See the programming examples in the Text – Grid and Shapes – Rectangle modes.

Displaying Numbers

You can display the value of a number in your program by connecting a Data Wire to the Text input of a Display Text block. A Numeric data wire will be automatically converted to Text by a Data Wire type conversion (see Data Wires for more information).

Tips and Tricks

Choose “Wired” from the Text input at the top of the block to show the Text input that can accept a data wire.

Example

This program continuously displays the Reflected Light Intensity value from the Color Sensor on the display, updating the display every quarter of a second.

Inputs

The inputs of the Display block specify the text or graphics to display and how it is displayed. You can enter the input values directly into the block. Alternatively, the values can be supplied by Data Wires from the outputs of other Programming Blocks.

Input	Type	Allowed Values	Notes
Clear Screen	Logic	True/False	If True, the display is cleared before the item is drawn.
File Name	Text	Name of an existing Image file	See the Image Editor for details. Choose “Wired” from the File Name input on the top of the block to show the File Name input for a data wire.
Text	Text	Characters from the Supported Text character set.	Text to display. Choose “Wired” from the Text input on the top of the block to show the Text input for a data wire.
Column	Numeric	0 to 21	Horizontal starting column. Columns are 8 pixels wide. Column 0 is at the left of the display.
Row	Numeric	0 to 11	Vertical text row or “line number” Rows are 10 pixels high. Line 0 is at the top of the display.
X	Numeric	0 to 177	X coordinate 0 is at the left of the display.
Y	Numeric	0 to 127	Y coordinate 0 is at the bottom of the display.
X1	Numeric	0 to 177	X coordinate of the first point in a line
Y1	Numeric	0 to 127	Y coordinate of the first point in a line
X2	Numeric	0 to 177	X coordinate of the second point in a line
Y2	Numeric	0 to 127	Y coordinate of the second point in a line
Radius	Numeric	≥ 0	Radius of a circle in pixels
Width	Numeric	≥ 0	Width of a rectangle in pixels
Height	Numeric	≥ 0	Height of a rectangle in pixels
Fill	Logic	True/False	If True, the interior of a shape is filled
Color	Logic	False = Black True = White	Drawing text in White puts a black background around the characters. Drawing shapes in White clears black pixels on the display.
Font	Numeric	0 = Normal 1 = Bold 2 = Large	Normal font is 9 pixels high by 8 wide. Bold font is 8 pixels high by 8 wide. Large font is 16 pixels high by 16 wide.