Welcome to this unit in which we'll discuss how to handle textual output. Now, computers have at least two modes of handling the screen. First of all, your program can think about the screen in graphics mode. And what I mean by this, is that the program thinks that the screen consists of a grid of 256 rows by 512 pixels each, black and white, on the Hack platform, and using the various obstructions which are supplied by the screen class, we can draw all sorts of nice pictures and do some nice outputs, graphics oriented outputs. However, in many situations we also have to develop textural applications. And these applications have to draw letters and numbers and so on. In order to do this we provide another mode of operation which we call textural. And when we work in this mode you can think about the screen as a grid of 23 rows by 64 characters each, black and white, once again. And in order to use the screen in this fashion we don't use the screen class. We use a completely different class called output. So these two classes, the screen and the output classes provide, two different ways to think about and operate the screen. Now, notice that just like the screen class implements such obstructions is circle and a rectangle drawing, well in a very similar fashion, the output class implements such obstructions as drawing the letters, K, Q, 1, 7, and so on. The letter K or the image K is just an obstruction. And someone has to work hard in order to actually draw this images on the screen and that is what this unit is all about. So we are dealing with the operating system and we are focusing on the output class, and the first thing that we have to determine is what kind of characters are we expected to draw? Well, our Hack Jack platform is characterized by many different specifications, and one of them is this character set. So the computer supports and recognizes all these characters. Some of which are printable, and others are non-printable, so all the printable characters must have some bitmap image that displays them on the screen. And the non-printable characters convey some very important information, but they don't have visual side effects. Well, except for Newline and Backspace that do have visual side effects, but they don't display. Any particular character on the screen. And what we see here in these tables are the ASCII code or the unit code, it's the same thing in this subset of the character and on the left-hand side we see the name of the character or the way we'll see this character on the screen. So with that, here's a typical textual output. We see that the screen is characterized by a grid that runs from 0 to 63 on the x-axis and 0 to 22 on the y-axis. And yet we have to remember that the actual physical screen is still 256 by 512 pixels which is represented in our computer memory using a block of 8k, 16 bit words. And so, we are facing the low level challenge of using a 256 by 512 pixels grid to realize a 23 by 64 characters grid designed for textual applications. Because at the end you have to understand, we're going to draw pictures. And all the letters, A-N-N, which together, constitute the name, Ann. Well, these are three different bitmap figures that we have to draw using pixels. How should we do it? Well, let's take a closer look at this part of the output. And let's take even a closer look, and now let's get real close. And we see that, what we have here, is what is called a font. And the Hack font, by design, occupies a fixed area of 11-pixels high and 8-pixels wide to represent every character in the character set. We call this area frame. And if you look frames, you'll see that the frame includes 2 empty columns in the right. For character spacing and one row at the bottom for row spacing. Now, it may look to you that we have two empty rows at the bottom, but in fact remember that we have letters like G and, capital Q that have some tails going down. So we have to use one more row to handle these characters. And these four characters don't happen to have any of these tails, so you don't see it here. But we will see this later. So this is the Hack font, and we worked quite hard to design it, because we had to draw these bit maps to decide you know, which images to use for each character in our bit map. The font is not incredibly beautiful, but it is definitely serviceable. And we could work harder and create some nicer and in fact the more you define fonts the closer you get to something like a fancier word processor. So each font is in fact a whole set of images that determines how to draw every character set on the screen, alright now, how should we implement the this font? Well, the bad news once again, is that it's a lot of work and the good news is that we did it for you. And we don't expect you to do it yourself, because it's wrote work and we don't want you to do wrote work. So we implement this font using the output class that we are going to explore next. So here is this output class, and as you see, we begin by defining a static array called character maps. This array will hold all the bitmaps of every one of our every member in our character set, altogether 127 characters. And notice that it must be static. It must be static because we want every method in this class to use this font, for various purposes. So we put it up at the class level, and in this way everyone can use it. Now, we wrote a private function. And by the way, when I say private function, we don't have the designation of private and public in Jack. So for me a private function is a function that I don't tell the world about. So the world doesn't even know that this function exist and that I need it and I need it in order to create this bitmaps once and for all. So I begin by defining the array, character maps, and then I use a method get another private function called, create. That actually determines the numbers that I have to write in everyone of, for everyone of these characters. So take a look at a, a is the first row in this, first statement in this last chunk of code and you will notice that the create function has a first parameter 97 which happens to be the ASCII code of lower case a, and then we have 11 numbers. And these numbers determine which numbers we have to draw in every row of the bitmap. So if you look at the a image you will see that the first, the top three rows are empty. And indeed it begins with three zeroes. And the next row, the roof of the a letter It looks like 0111 and then come a few more of these 0s. Now, we have to invert it, so actually, what we have here is 1110. And 1110, I think is 14 and indeed, we have 14 as the next parameter and so on and so forth. So that's how we define the bitmap of a. Then we define the bitmap of b, c, all the other letters in the alphabet. Then we do the digits. Then we do all the special characters. And that's it. If you look at the code, which is available to you if you downloaded the Nand to Tetris software suite, you will see that we actually worked hard to create this font. And what remains to be described is this create function that we use here and here it is, this is the create function, it takes 12 parameters the first parameter is the index of the array and then come the, and the index of the array by the way also happens to be the ASCII code and then come the 11 numbers. And so, this function here defines yet another array called map. This is the array of the actual letter. The previous array was the array that holds all the bitmaps. This is one specific bitmap. So we define an array called map and create it with 11 entries, one for every number in the character frame. And then, we set charMaps' index to map. So essentially we are implementing a two dimensional array. Now, charMaps is the static array that holds all the bitmaps. And then, we populate out little map array with the actual numbers, a, b, c, d, and so on and so forth and return. And we do this 127 times for every character indicator set. And the good news is that we do it only once. We don't do it every time we have to draw a character. But when we turn on the computer, when we reset, we are going to also reset the operating system. And when the operating system will be reset, it will also reset this output class, and the output class will run an init method that will create this fond. And once this font is created we can start using it using a few more methods that I haven't shown you, which are very well documented In your course materials. Now, one more thing that we have to worry about when we deal with text is, what is known as the cursor. So if you look at this example here, the cursor is where this red rectangle shows. I mean, we don't actually see a red rectangle when you see this output on the screen. I just use it in the slide here to show you what I'm talking about. So the cursor is this frame 11 pixels deep and 8 pixels wide that shows where the next character will be written if and when [COUGH] I'm sorry, if and when we'll be asked to write a next character. In this notion of a cursor has both logical and physical manifestations if you will. First of all, the logical notions is such that I really have to know where is the cursor. The person who develops the output class here, because if I will be asked to write the character, I have to know where to put it on the screen. So I have to do some internal accounting to just remember where the cursor is, and obviously the location of the cursor will be affected each time I draw a new character. But also, I may want to be nice and show the user where the cursor is on the screen, so that she or he, will know what happens when she touches the keyboard. When she touches the keyboard, she wants to know where on the screen she's going to see the next letter or key that he or she is touching. So I may want to create some blinking effect, or I may just want to put an underline, or a little arrow, it's a designed decision which is completely independent of the notion of the logical state of the cursor. And I think that in our Jack Hack platform we decided not to show a cursor at all. So the user is expected to figure out himself or herself where the cursor is. But I may be wrong I don't remember the exact details here, it's not terribly important. So how should we manage the cursor? Well, if we are, and I'm talking now about the logical cursor. If we ask the display new line, well in that case we have to move the cursor to the next line on the output. If we're asked to display backspace we have to move the cursor one column to the left and if we're asked to display any other character then we have to display the character, and move the cursor one column to the right. So these are the rules of the game. So with all that in mind, we are now in a position to take a close look at the output class. And we'll do it only in the API level. So first of all we have init method, and the init method is the method or the function that is going to call. The functions that they saw earlier, they create the font, and this will be done only once. And then, we have several functions which will serve us every time we want to use the text, not every time but in some textual situations. So we have a moveCursor function that can put the cursor anywhere on the screen. And when I say i, j here, I mean the location where the cursor is going to end up with. Then we have a printChar method that knows how to display a single character, and move the character accordingly. We had a print string that can string, print a string of any reasonable length. We have a print int, which is very similar to print string, but it knows how to print numbers, integer numbers. Legibly and we also have a print line that basically moves the cursor to the next line and we have a backspace that I described before. So these are the functions of the output class and Implementing them is not terribly complicated, given all the information that I gave you and given that we have already implemented the head font for you, so you don't have to mess up with that. And therefore the implementation is certainly something that you can figure out on your own. So to recap, we are working on the operating system. We described the math, memory, screen, and output classes. And the next class that we are going to explore called keyboard is going to describe how we manage inputs.
