ECEN 1200 - Telecommunications 1

Peter Mathys, Fall 2006, 10/06/06


Homework/Computer Lab 6: Bits, Bytes, Codes, Hex Editing of Image Files, Screen Capture and e-mail Attachments


How to Submit Solutions for this Homework/Computer Lab
Due Date: Friday 10-13-06
E-mail To: no-spam e-mail
Subject Line: HWCL 06
1'st Line: Your name and student number

This computer lab is written for Windows 9x/2000/NT/XT based PCs, with a Mozilla/Firefox Browser or an Internet Explorer. Those portions of the lab that are not platform-specific can also be run on a Mac.

Quick Links


Goals of this Lab

The goals of this computer lab are:


Programs to Download

7-Zip Icon 7-Zip is a file archiver with high compression ratio. It supports the 7z, ZIP, GZIP, BZIP2 and TAR formats for both packing and unpacking. Unpacking only is supported for the RAR, CAB, ISO, ARJ, LZH, CHM, Z, CPIO, RPM, DEB, and NSIS formats. The home page of 7-Zip is at http://www.7-zip.org.

Hex Workshop Icon Hex Workshop V2.20 is a set of hexadecimal development tools for Windows 9x/NT/2000/XT, combining advanced binary editing with the ease and flexibility of a word processor. With Hex Workshop you can edit, insert, delete, cut, copy, and paste hex, print high quality customizable hex dumps, and export to RTF or HTML for publishing. Additionally, you can goto, find, replace, compare, and calculate checksums within a file. The home page for Hex Workshop is at http://www.bpsoft.com.
Note: An alternate version of Hex Workshop V2.20, that only needs unpacking, but no installation, is in the archive hw32v22run.7z. This is handy if you work on a computer where you have no administrator privilieges, e.g., in the labs under Windows 2000/XP.

LViewPro Icon LViewPro 1.D/32 is a very compact image viewer, editor, and file format converter. The home page of LViewPro is at http://www.lview.com.


Binary Numbers

Suppose someone has chosen an integer M in the range 0...15 at random and you have to determine M using as few questions with yes/no answers as possible. The following tree diagram shows which questions to ask based on previous answers and the value of M identified in the end. Assuming that all values of M are equally likely, this query tree is optimal and requires exactly 4 questions that can be answered with yes/no.

Binary Tree for 'Guessing' Integer in Range 0...15

The principle behind it is to think of all 16 possible values of M as being lined up on the real axis as shown below. With each question the set of numbers that are not yet excluded is divided in half, from 16 to 8 to 4 to 2 and finally to 1.

Integers in Range 0...15 on the Real Line

For example, if M=9, then the initial interval of 0...15 gets reduced to 8...15 after the first question (M > 7?), to 8..11 after the second question (M > 11?), to 8...9 after the third question (M > 9?), and finally to M = 9 after the fourth question (M > 8?).

To obtain binary representations for integers M in the range 0...15, simply replace the no answer by a 0 and the yes answer by a 1 in the query tree as shown below.

Binary Tree to Make Binary Code for Integer in Range 0...15

The figure below shows the binary number representations for integers in the range 0...15 lined up on the real axis in increasing order (from left to right).

Binary Integers in Range 0...15 on the Real Line

By increasing the depth of the tree to 5, 6, 7, etc, levels, larger and larger ranges of integers can be converted to binary strings. The following table shows the number N of different integers that can be represented if b bits (or levels in the query tree) are used.

Bits b N = 2b Name for b Bit Quantity
1 2 Bit
2 4
3 8
4 16 Nibble
5 32
6 64
7 128
8 256 Byte
9 512
10 1,024
12 4,096
16 65,536 Word
32 4,294,967,296 Double Word
64 18, 446,744,073,709,551,616 Quad Word

You can also ask the question the other way around: How many bits b does it take if there are N different objects (e.g., consecutive integers in the range 0...N-1) to represent uniquely? The answer is

                                       log10(N)
b = next highest integer of  log2(N) = --------
                                       log10(2)

Example: If there are N=250 million people, how many bits are needed for unique social security numbers? Answer:

log10(250,000,000)
------------------ = 27.897  ==>  b = 28 bits needed.
     log10(2)

Decimal, Binary, and Hexadecimal Representations

Decimal Representation of Integer M
Binary Representation of Integer M
Hexadecimal Representation of Integer M

Counting Up in Binary

Counting up in Decimal
Counting up in Binary

Negative Binary Numbers

Take the real number line graph for integers M in the range 0...15 (decimal) or 0000...1111 (binary) and bend it into a circle as shown below by connecting the ends together.

4-bit Binary Numbers on a Circle

Now you can start at 0000 and count up in binary to 0001, 0010, 0011, etc, by moving counterclockwise around the circle. But if going counterclockwise from number to number corresponds to adding 1, then going clockwise from number to number must correspond to subtracting 1. Thus, starting at 0000 and going clockwise, you find that 1111 should correspond to -1 (in decimal), 1110 should correspond to -2, etc. In general the rule for the binary representation of signed integers is that if the most significant bit (MSB, the leftmost bit) is 1, then the number is negative and if the MSB is 0, then the number is taken to be positive. The following table shows this for 4-bit representations.

Decimal Signed Binary
+70111
+60110
+50101
+40100
+30011
+20010
+10001
00000
-11111
-21110
-31101
-41100
-51011
-61010
-71001
-81000


Decimal, Binary, and Hexadecimal Conversion

Algorithm for Decimal to Binary Conversion


Example of Decimal to Binary Conversion

Because 24 = 16, conversion between binary and hexadecimal numbers is very easy. In fact, the main use of the hexadecimal number system is to be able to write binary numbers in a more compact form. Any combination of 4 bits can be expressed by a single hexadecimal digit as shown in the following table:

Hex Binary Decimal
0 0000 0
1 0001 1
2 0010 2
3 0011 3
4 0100 4
5 0101 5
6 0110 6
7 0111 7
8 1000 8
9 1001 9
A 1010 10
B 1011 11
C 1100 12
D 1101 13
E 1110 14
F 1111 15

To convert long strings of bits to hexadecimal, start on the right side of the string (with the least significant bit) and move left grouping together sets of 4 consecutive bits per hex symbol. Pad with zeros at the left end if necessary.


The ASCII Code

Text, like anything else, needs to be stored and transmitted in binary form for computers. There are 26 lower case and 26 upper case letters in the alphabet. Add to this the 10 digits for numbers and (at least) 10 punctuation marks (e.g., , . ! ? : ; ( ) - /). This adds up to (at least) 72 distinct characters that need to be uniquely encoded in binary. Since log(72)/log(2) = 6.1699, we need (at least) b=7 bits to encode each character. The most widely used code for text characters is the ASCII (American Standard Code for Information Interchange) code which was developed in 1962. This code is shown in the following table.

  000.. 001.. 010.. 011.. 100.. 101.. 110.. 111..
..0000 NUL DLE SP 0 @ P ` p
..0001 SOH DC1 ! 1 A Q a q
..0010 STX DC2 " 2 B R b r
..0011 ETX DC3 # 3 C S c s
..0100 EOT DC4 $ 4 D T d t
..0101 ENQ NAK % 5 E U e u
..0110 ACK SYN & 6 F V f v
..0111 BEL ETB ' 7 G W g w
..1000 BS CAN ( 8 H X h x
..1001 HT EM ) 9 I Y i y
..1010 LF SUB * : J Z j z
..1011 VT ESC + ; K [ k {
..1100 FF FS , < L \ l |
..1101 CR GS - = M ] m }
..1110 SO RS . > N ^ n ~
..1111 SI US / ? O _ o DEL

To find the binary code of a character, say C, you locate the desired character in the table and then you concatenate the binary string directly above (100.. for C) with the binary string to the left (..0011 for C). For C the resulting binary code is thus 1000011. To make each ASCII code a byte, the 7-bit codes are usually preceded by a 0 on the left. Thus, C would become the byte 01000011, that can also be expressed as 43 in hexadecimal.


HEX Editor for Binary Files

Most text editors and wordprocessors can only handle files that contain text in ASCII code or some other (often wordprocessor-specific) character-oriented code. When you want to look at the binary data, say, in an image file, you need a binary or hex editor.

Computers process and store all information in binary form. A bit can only take on values 0 or 1 (or "no" and "yes", or "false" and "true"). A two-bit number can take on values 00, 01, 10, 11, a total of 4 distinct values. Similarly, a three-bit number can take on values 000, 001, 010, 011, 100, 101, 110, 111, i.e., 8 distinct values. Every time an additional bit is added to a binary number, the number of distinct values it can take on is doubled. In general b bits can take on 2b distinct values. Since long strings of bits are cumbersome to handle for human beings, they are usually broken up into blocks of 4 bits, and each 4-bit quantity is represented as a single hexadecimal or hex, for short, number as shown in the table above.

To represent 8-bit or lager quantities, two or more hex digits are concatenated, e.g., B9 represents the binary string 10111001. If the length of a binary string is not a multiple of 4, then it is preceded by as many zeros (or padded with zeros on the left) as necessary, e.g., 1000110 would become 01000110 (with the 0 used for padding shown in red) and then be represented in hex as 46.

Most of the time you will not want to look at and/or edit all the contents of a binary file, but rather just look at the header at the beginning of a file to determine certain parameters of the file and its contents. In this computer lab we will use a binary editor called Hex Workshop (V2.20). If you have not already done so, download Hex Workshop now. If necessary, download and install 7-Zip again. Look at the description in Homework/Computer Lab 5 if you need more information. Use 7-Zip to unpack the file hw32v22.zip into a directory of your choice and then click on setup.exe to install Hex Workshop on your computer.

Note: If you see a screen similar to the one below, then you may not be able to install Hex Workshop in the usual way.

Install Program as Other User Screen

In this case download the file hw32v22run.7z, unzip it into a directory of your choice, and then run the program Hworks32.exe, either by double clicking on it in Windows Explorer, or by using "Start", "Run" and then "Browse" to find and execute Hworks32.exe.


BMP Image Files in HEX

Download the blue.bmp (right-click on the link and select "Save Link Target As..."). Start the hex editor and load the file blue.bmp. This is an uncompressed Windows bitmap file of a 32x16 pixel image (32 columns and 16 rows) with 4 bits per pixel. In blue.bmp all pixels are set to blue, which happens to be represented by the hexadecimal number C (= 12 in decimal). You should see a screen similar to the following.

Hex Workshop with blue.bmp Loaded (1)

A BMP image file consists of a header (inside the red rectangle in the above example, from offset 000000 to 00009F) and the actual image data (starting at offset 0000A0 in the above example, ending at offset 00019F, and consisting only of hexadecimal CC). The header contains vital image data such as image width, image height, number of bits per pixel and palette colors. If you change the data in the header, then the image may not display properly anymore. For this computer lab the BMP files have been made such that the ASCII portion in the Hex Editor shows you a line and the text NO CHANGE ABOVE THIS LINE. In this way you know which part you can change without making the image completely unreadable. Similarly, there is another line (starting at offset 0001A0) with the text BELOW THIS LINE: NO CHANGE!, as shown in the following screeen capture. This tells you from where on changes in the BMP file will have no effect on the image.

Hex Workshop with blue.bmp Loaded (2)

Go ahead now and open the Microsoft "Paint" program (click on "Start", then on "Programs", and "Accessories" in the Windows Program Manager). In "Paint" open blue.bmp and you should see a tiny little blue area in the upper left corner as shown in the following screen shot.

Microsoft Paint with blue.bmp Loaded

Click on "View", "Zoom", "Custom...", and "800%" to enlarge the image by a factor of 8. The blue.bmp image is 32 pixels wide, 16 pixels high, and uses 4 bits per pixel. Thus, each line in the Hex Editor corresponds to one line in the image.

Your first task in this section of the computer lab is to find out to which image location the first pixel value (at offset 0000A0) belongs. Go ahead and change the value of this pixel now in the Hex Editor, say from CC to FC. The hex value F corresponds to white and if you save your image as myblue.bmp in the Hex Editor and then load it in the "Paint" program, you should see one pixel changed to white (all others should remain blue). Write down the location of this pixel (e.g., upper left corner, upper right corner, etc.), you will have to send that in as part of your solution for this lab.

Your second task in this section of the computer lab is to determine which hex value in the range 0...F (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) corresponds to which color on the screen. Go ahead and enter appropriate values in the Hex Editor (i.e., in the file blue.bmp or myblue.bmp, change one or more of the pixels with a hex value of C to some other value in the range 0...F). Observe the outcomes in the Microsoft "Paint" program. The table below shows you the 16 possible colors, together with their names, their R, G, B (red, green, blue) values and the corresponding attribute value that you would use in an HTML document. For each of the possible values 0...F that you can use for a pixel in the .bmp files that we use here, you have to write down the corresponding color name and send that in with your solution for this homework/computer lab.

Color Color Name Red Green Blue HTML Attribute Value
*** Black 0 0 0 "#000000"
*** Gray 128 128 128 "#808080"
*** Silver 192 192 192 "#C0C0C0"
*** White 255 255 255 "#FFFFFF"
*** Maroon 128 0 0 "#800000"
*** Red 255 0 0 "#FF0000"
*** Purple 128 0 128 "#800080"
*** Fuchsia (or Magenta) 255 0 255 "#FF00FF"
*** Green 0 128 0 "#008000"
*** Lime 0 255 0 "#00FF00"
*** Olive 128 128 0 "#808000"
*** Yellow 255 255 0 "#FFFF00"
*** Navy 0 0 128 "#000080"
*** Blue 0 0 255 "#0000FF"
*** Teal 0 128 128 "#008080"
*** Aqua (or Cyan) 0 255 255 "#00FFFF"


Make a Logo BMP File

Your task in this section is to use the Hex Workshop editor to make a logo (with 32x16 pixels and 4 bits per pixel) of your choice which must contain at least one character. Use one of the BMP images (blue.bmp, green.bmp, red.bmp, white.bmp), from the anonymous FTP server schof.colorado.edu in the folder pub/ecen1200/bmp as your starting point. An example of such a logo is the following (enlarged by a factor of 8):

Video Logo PM_logo2

Another example is the logo shown in the next section.


Screen Capture with LViewPro

LViewPro is a remarkably compact, yet powerful image editor and screen capture program. If you have not already done so, download LViewPro and unzip the file lviewp1d.zip. LViewPro does not need any installation, you can directly double-click on the file lviewpro.exe to run the program.

Often, the easiest way to obtain an image and convert it to a GIF or JPEG file is to take a screen capture with LViewPro and then use the "Save As..." command to store the image in the desired format. It is best to use a new copy of LViewPro for each new capture (in this way LViewPro adjusts itself automatically to the size of the image).

The goal in this section is to take a screen shot of your logo in the Microsoft "Paint" program. Start "Paint" and load your logo file. Enlarge it by a factor of 8 (i.e., zoom in to 800%). When you are ready to take the screen shot, start LViewPro and then choose "Edit", "Capture", and "Window" as shown in the image below.

Screen Capture with LViewPro

When LViewPro disappears, select "Paint" as your active program and wait until LViewPro captures it. After the capture you should see a screen similar to the one below.

Paint Program with PM_logo1

Now save the image as a GIF file (either GIF 87a or GIF 89a will do for our current purposes). Then you are ready for the next section where you will attach this file to the e-mail message with the solution for this computer lab.


Attach (Binary) Files to e-mail

If you are using WebMail, then the process of attaching a file to an e-mail message is quite simple and straightforward. If you need additional help, go to http://www.colorado.edu/its/docs/webmail and select "Attachments/Sending"


Your Task

To obtain credit for this homework/computer lab you need to answer the questions stated below. Send your solution to no-spam e-mail.

Rules for the Submission of Homework/Computerlab Solutions

Format: E-mail your solution as a plain text (ASCII) file. Do not use word processor files like Microsoft Word or "rich-text" HTML files.

Corrections: If you need to make corrections after you submitted your solution, resubmit all your answers (not only the ones that changed) since only your last submission of each homework/computer lab will be graded.

Teamwork: Teamwork is fine for the homework/computer labs, but the solutions must be turned in individually. In particular, copy and paste of entire solutions from other students is not acceptable.

Questions:

    1. There are 109 million U.S. households, each with an average of 1.9 cars or trucks. How many bits are needed to identify each car uniquely with a binary number? Show your computation.
    2. List the binary represenatations of all integers in the range 0...31 in increasing order.
    3. Convert the binary number 111101110001111111 to hexadecimal. Use the Hex table given above if necessary.
    4. Convert the binary number 11000001 to decimal. Show your computations!
    5. Convert the decimal number 89 to binary. Show your computations!
    6. The following string of hexadecimal symbols is an ASCII encoded text: 4F75746C616E6469736821. Each pair of hex symbols corresponds to one ASCII encoded character. What is the text encoded in this string? Hint: Use the ASCII table and/or the Hex editor to find out.
  1. The web page Serial Transmission of Bitmapped Image shows an animation of the binary transmission of a (small) bitmap image, using red and green lights to transmit individual bits. Use the code given to reconstruct the image. What is the size (in pixels horizontal and vertical) of the image? Briefly describe the content of the image.
    1. To which image location (e.g., top left, top right, bottom left, etc.) belongs the first pixel value at offset 0000A0 in Hex Workshop (see first task in the section BMP Image Files in HEX)?
    2. Which hexvalue in the range 0...F (i.e., 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) corresponds to which color in the BMP image (see second task in the section BMP Image Files in HEX)?
    3. Attach the screen snapshot, converted to a GIF file! (no .bmp files will be accepted), which you took in the section Screen Capture with LViewPro) of the logo which you made.