Tutorial: Using the Screen of the LEGO™ Robot

Using the Screen of the LEGO™ Robot

In this tutorial, we will discuss how the Screen class can be used to draw shapes or put text on the robot's screen. Specifically, we will cover:

• Properties of the Screen
• Outputting Text onto the Screen
• Drawing Lines and Shapes on the Screen
• Scrolling up the screen

Outputting Text onto the Screen

The Screen class provides actions for three different types of text: normal, large, and inverted. Text is output to one of eight text lines on the screen (referred to as lines 0 through 7, where 0 is the top line) and each line is 16 pixels tall. For example, the code screen:Output("Hello", 3) will print the normal text "Hello" to line 3. Normal text is the basis for all of the other styles, and so the previous code segment does not specify a style in the action name. By contrast, if we want to print the same message in a large font, we would use the code screen:OutputLarge("Hello", 3) instead. Large font takes up two lines of text (the line specified and the one below it) and can fit less information on screen, but it is much easier to see. Inverted text is the same size as normal text, but the difference is that all of the pixels used for the text are inverted, meaning the blank pixels become black and vice versa, making it look like the text has been cut out from a solid black bar. To use the previous example again, inverted text actions will look like screen:OuputInvertedColor("Hello", 3).

Format

For the three types of text, Quorum has a few formatting actions to help position our text on the screen:

• Output(text message, integer line)
• Output(text message, integer line, integer indent)
• OutputCenter(text message, integer line)

We have been using the first action in the previous examples where we would just tell the program the message to display and what line it should be on. This causes the text to start on the left side of the screen, but what if we want the text indented or centered? That is where the other actions can be used. One thing that should be pointed out here is that all letters take up the same amount of space, 8 pixels wide with the normal font, and the indentation parameter is specified in terms of these spaces, meaning an indentation of 1 shifts the text over by one letter's space. Each type of font (normal, inverted, large) has this set of actions for formatting text. For example, to center a large text message on lines 3 and 4, code such as screen:OutputCenterLarge("Hello", 3) will do the trick.

Drawing Lines and Shapes on the Screen

Through Qurourm, we can draw lines, rectangles, circles, and ellipses on the screen. Drawing these will require a point along the x-axis (width of the screen) and a point along the y-axis (height of the screen) to determine the position of the line or shape. For the shapes, there are actions to draw outlines of shapes or full shapes, and actions to erase outlines of shapes or full shapes.

Lines

To draw lines, we use the action DrawLine(integer xStart, integer yStart, integer xEnd, integer yEnd). The xStart and yStart parameters are used to determine the starting point of the line, while the xEnd and yEnd parameters determine the ending point of the line. Thus, to make a diagonal line that goes across theentire screen, we could use the code screen:DrawLine(0, 0, 177, 127).

Rectangles

Rectangles have the following actions:

• DrawRectangleOutline(integer xBottomLeft, integer yBottomLeft, integer width, integer height)
• EraseRectangleOutline(integer xStart, integer yStart, integer width, integer height)
• DrawRectangleFull(integer xStart, integer yStart, integer width, integer height)
• EraseRectangleFull(integer xStart, integer yStart, integer width, integer height)

To draw or erase any rectangle, we need to indicate the starting point for the rectangle, which is the lower-left corner of it, and then specify where it should end, which will be the top-right corner.

Circles

Circles have the following actions:

• DrawCircleOutline(integer x, integer y, integer radius)
• EraseCircleOutline(integer x, integer y, integer radius)
• DrawCircleFull(integer x, integer y, integer radius)
• EraseCircleFull(integer x, integer y, integer radius)

To draw or erase a circle, we need to specify the center pixel of the circle and then tell the program how far out from that point the circle should be in every direction, also known as the radius of the circle.

Ellipses

Ellipses have the following actions:

• DrawEllipseOutline(integer x, integer y, integer width, integer height)
• EraseEllipseOutline(integer x, integer y, integer width, integer height)
• DrawEllipseFull(integer x, integer y, integer width, integer height)
• EraseEllipseFull(integer x, integer y, integer width, integer height)

Drawing an ellipse, or an oval, is similar to a circle in that we need to specify the center of the ellipse, but then we need to tell the program the maximum width of the ellipse and the maximum height for it as well.

Scrolling Up the Screen

For times when we are going to be using more than the 8 text lines available, such as updating information constantly, it may be useful to only push the oldest information off screen first. In this case, we can use the different types of scroll actions to move everything on the screen up. The scroll actions are as follows:

• ScrollUp()
• ScrollUp(text message)
• ScrollUp(integer lines)

The first action, ScrollUp()ScrollUp(text message)ScrollUp(integer lines) moves everything, including text and shapes, on the screen up one text line. If we already know what we want to put on the new line we just made room for, we can use the action to place our text for us after scrolling up. The last action, is used to scroll up more than just line, which can be particularyly useful if we are using large text, since it displays over two text lines.

Additional Information

• To clear everything on the screen, use the Clear() action on a Screen object.

• For documentation on the Screen class, see here.

End of Lesson

You have reached the end of the lesson for LEGO™ Robots. To view more tutorials, press the button below or you can go back to the previous lesson pages.