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
Properties of the Screen
The screen makes up the top portion of the brick and is used to display text or shapes. The screen is composed of pixels, which is just a fancy way of saying the screen is made up of tiny squares that can change color, and in the screen's case they can only be black or blank. The width of the screen has 178 pixels (ranging from 0 to 177) and these pixels all lie along the x-axis. The height of the screen is 128 pixels tall (ranging from 0 to 127) and these pixels all lie on the y-axis. Although all screen actions work by drawing or removing color from one or more pixels, it is more the focus when drawing shapes, so we will go into more detail about the pixels later.
Outputting Text onto the ScreenThe 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
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)
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.
LinesTo draw lines, we use the action
DrawLine(integer xStart, integer yStart, integer xEnd, integer yEnd). The
yStartparameters are used to determine the starting point of the line, while the
yEndparameters 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 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 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 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()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
ScrollUp(text message)action to place our text for us after scrolling up. The last action,
ScrollUp(integer lines)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.
- To clear everything on the screen, use the
Clear()action on a Screen object.
For documentation on the Screen class, see here.
In the next tutorial, we will discuss Introduction to Playing Sounds In Quorum, which describes how to play audio files Quorum.