Browse Source

README-en.md edited on August 3, 2016 at 9:05am

Jose R Ortiz Ubarri 8 years ago
parent
commit
78b64c0db7
1 changed files with 33 additions and 33 deletions
  1. 33
    33
      README-en.md

+ 33
- 33
README-en.md View File

4
 ![main2.png](images/main2.png)
4
 ![main2.png](images/main2.png)
5
 ![main3.png](images/main3.png)
5
 ![main3.png](images/main3.png)
6
 
6
 
7
-[Verano 2016 - Ive]
7
+[Verano 2016 - Ive - Coralys]
8
 
8
 
9
-Arrays help us to store and work with groups of data of the same type. The data is stored in consecutive memory spaces which can be accessed by using the name of the array and indexes or subscripts that indicate the position where the data is stored. Repetition structures provide us a simple way of accessing the data within an array. In today's laboratory experience you will design and implement simple algorithms for image processing to practice the use of nested loops to manipulate bi-dimensional arrays.
9
+Arrays help us store and work with groups of data of the same type. The data is stored in consecutive memory spaces which can be accessed by using the name of the array with indexes or subscripts that indicate the position where the data is stored. Repetition structures provide us a simple way of accessing the data within an array. In today's laboratory experience, you will design and implement simple algorithms for image processing in order to practice the use of nested loops to manipulate bi-dimensional arrays.
10
 
10
 
11
-##Objectives
11
+## Objectives
12
 
12
 
13
 1. Practice the access and manipulation of data in an array.
13
 1. Practice the access and manipulation of data in an array.
14
 
14
 
19
 4. Access pixels in an image and break them down into their red, blue, and green components.
19
 4. Access pixels in an image and break them down into their red, blue, and green components.
20
 
20
 
21
 
21
 
22
-##Pre-Lab:
22
+## Pre-Lab:
23
 
23
 
24
 Before coming to the laboratory session you should have:
24
 Before coming to the laboratory session you should have:
25
 
25
 
31
 
31
 
32
 4. Studied the concepts and instructions for the laboratory session.
32
 4. Studied the concepts and instructions for the laboratory session.
33
 
33
 
34
-5. Taken the Pre-Lab quiz available in Moodle.
34
+5. Taken the Pre-Lab quiz, available in Moodle.
35
 
35
 
36
 ---
36
 ---
37
 
37
 
38
 ---
38
 ---
39
 
39
 
40
-##Image editing
40
+## Image Editing
41
 
41
 
42
 In this laboratory experience, you will work with various concepts and basic skills of image editing. We have provided a simple graphical user interface that allows the user to load an image and invert it vertically and horizontally. Your task is to create and implement a function to convert the colored image into an image with gray tones, and another function that converts the colored image into a black and white image.
42
 In this laboratory experience, you will work with various concepts and basic skills of image editing. We have provided a simple graphical user interface that allows the user to load an image and invert it vertically and horizontally. Your task is to create and implement a function to convert the colored image into an image with gray tones, and another function that converts the colored image into a black and white image.
43
 
43
 
44
-###Pixels
44
+### Pixels
45
 
45
 
46
-The smallest element in an image is called a *pixel*. This unit consists of a single color. Since each color is a combination of tones for the primary red, green and blue colors, it is coded as an unsigned integer whose bytes represent the tones of red, green and blue of the pixel (Figure 1). This combination is called the color's *RGB* which is an acronym for "Red-Green-Blue". For example, a pure red pixel has an RGB representation of `0x00ff0000`, while a white pixel has an RGB representation of `0x00FFFFFF` (since the color white is a combination of tones of red, green and blue in all of their intensity).
46
+The smallest element in an image is called a *pixel*. This unit consists of a single color. Since each color is a combination of tones for the primary colors red, green and blue, it is coded as an unsigned integer whose bytes represent the tones of red, green and blue of the pixel (Figure 1). This combination is called the color's *RGB* which is an acronym for "Red-Green-Blue". For example, a pure red pixel has an RGB representation of `0x00ff0000`, while a white pixel has an RGB representation of `0x00FFFFFF` (since the color white is a combination of tones of red, green and blue in all of their intensity).
47
 
47
 
48
 ---
48
 ---
49
 
49
 
53
 
53
 
54
 ---
54
 ---
55
 
55
 
56
-`Qt` uses the `QRgb` type to represent `RGB` values. Using certain functions that are described below we can obtains the red, green and blue components of the `QRgb` value of the pixel and manipulate the images.
56
+`Qt` uses the `QRgb` type to represent `RGB` values. Using certain functions that are described below we can obtain the red, green and blue components of the `QRgb` value of the pixel and manipulate the images.
57
 
57
 
58
-###Library
58
+### Library
59
 
59
 
60
-In today's laboratory experience you will use the `QImage` class. This class permits access to the data in the pixels of an image to manipulate it. The documentation for the `QImage` class can be found in http://doc.qt.io/qt-4.8/qimage.html.
60
+In today's laboratory experience you will use the `QImage` class. This class allows access to the data in the pixels of an image to manipulate it. The documentation for the `QImage` class can be found in http://doc.qt.io/qt-4.8/qimage.html.
61
 
61
 
62
 The code provided in this project contains the following objects of the `QImage` class:
62
 The code provided in this project contains the following objects of the `QImage` class:
63
 
63
 
69
 * `width()`      // returns the integer value for the image's width
69
 * `width()`      // returns the integer value for the image's width
70
 * `height()`      // returns the integer value for the image's height
70
 * `height()`      // returns the integer value for the image's height
71
 * `pixel(i, j)`       // returns the `QRgb` for the pixel in position `(i,j)`
71
 * `pixel(i, j)`       // returns the `QRgb` for the pixel in position `(i,j)`
72
-* `setPixel(i,j, pixel)`   // modifies the value for the pixel in position `(i,j)` to the value of pixel `QRgb`
72
+* `setPixel(i,j, pixel)`   // modifies the value for the pixel in position `(i,j)` to the value `QRgb` of pixel
73
 
73
 
74
 The following functions are useful to work with data of type `QRgb`:
74
 The following functions are useful to work with data of type `QRgb`:
75
 
75
 
89
 
89
 
90
     ![ejemplo.png](images/ejemplo.png)
90
     ![ejemplo.png](images/ejemplo.png)
91
 
91
 
92
-    then `originalImage.pixel(2,1)` returns the  `rgb` value that represents the color blue ( `0x0000ff`).
92
+    then `originalImage.pixel(2,1)` returns the `rgb` value that represents the color blue ( `0x0000ff`).
93
 
93
 
94
 3. The following instruction assigns the color red to the pixel in position `(2,3)` in the edited image:
94
 3. The following instruction assigns the color red to the pixel in position `(2,3)` in the edited image:
95
 
95
 
142
 
142
 
143
 ## Laboratory Session:
143
 ## Laboratory Session:
144
 
144
 
145
-In today's laboratory experience you will design and implement simple image processing algorithms to practice the use of nested loops and the manipulation of bi-dimensional arrays.
145
+In today's laboratory experience, you will design and implement simple image processing algorithms to practice the use of nested loops and the manipulation of bi-dimensional arrays.
146
 
146
 
147
-### Exercise 1 - Understand the provided code
147
+### Exercise 1 - Understand the Provided Code
148
 
148
 
149
-#### Instructions:
149
+#### Instructions
150
 
150
 
151
 1. Load the project  `SimpleImageEditor` into `QtCreator`. There are two ways to do this:
151
 1. Load the project  `SimpleImageEditor` into `QtCreator`. There are two ways to do this:
152
 
152
 
166
 
166
 
167
 3. You will be working with the `filter.cpp` file. Study the `HorizontalFlip` function in the `filter.cpp` file so you understand how it operates.
167
 3. You will be working with the `filter.cpp` file. Study the `HorizontalFlip` function in the `filter.cpp` file so you understand how it operates.
168
 
168
 
169
-    In the following exercises you will be mainly using the objects `originalImage` and `editedImage` of the `QImage` class. What do you think is the purpose for the `pixel` variable?
169
+    In the following exercises, you will be mainly using the objects `originalImage` and `editedImage` of the `QImage` class. What do you think is the purpose for the `pixel` variable?
170
 
170
 
171
-4. The provided code already has the the functionality of the buttons in the graphical user interface programmed. You do NOT have to change anything in this code but we provide the following explanations so you can know a little about how the buttons work. In the `mainwindow.cpp` file, the `lblOriginalImage` and `lblEditedImage` objects correspond to the parts of the interface that identify the original image and the processed image. The buttons
171
+4. The provided code already has the functionality of the buttons in the graphical user interface programmed. You do NOT have to change anything in this code, but we provide the following explanations so you can know a little about how the buttons work. In the `mainwindow.cpp` file, the `lblOriginalImage` and `lblEditedImage` objects correspond to the parts of the interface that identify the original image and the processed image. The buttons
172
 
172
 
173
     * `btnLoadImage`
173
     * `btnLoadImage`
174
     * `btnSaveImage`
174
     * `btnSaveImage`
184
 5. Compile and run the program. Test the buttons for `Load New Image` and `Flip Image Horizontally` with the images that you brought so you can validate if the buttons are working.
184
 5. Compile and run the program. Test the buttons for `Load New Image` and `Flip Image Horizontally` with the images that you brought so you can validate if the buttons are working.
185
 
185
 
186
 
186
 
187
-### Exercise 2 - Convert a colored image to an image with gray tones
187
+### Exercise 2 - Convert a Colored Image to an Image with Gray Tones
188
 
188
 
189
 Image grayscale is an operation that is used to convert a colored image to an image with only tones of gray. To make this conversion the following formula is used in each pixel:
189
 Image grayscale is an operation that is used to convert a colored image to an image with only tones of gray. To make this conversion the following formula is used in each pixel:
190
  `gray = (red * 11 + green * 16 + blue * 5)/32 ;` where `red`, `green` and `blue` are the values for the tones of the red, green and blue colors in the pixel of the original colored image, and `gray` will be the assigned color to the red, green, and blue colors in the pixel of the edited image. That is,
190
  `gray = (red * 11 + green * 16 + blue * 5)/32 ;` where `red`, `green` and `blue` are the values for the tones of the red, green and blue colors in the pixel of the original colored image, and `gray` will be the assigned color to the red, green, and blue colors in the pixel of the edited image. That is,
191
 `editedImage.setPixel( i, j, qRgb(gray, gray, gray) )`.
191
 `editedImage.setPixel( i, j, qRgb(gray, gray, gray) )`.
192
 
192
 
193
-#### Instructions:
193
+#### Instructions
194
 
194
 
195
 1. Using pseudocode, express the algorithm to convert a colored image to an image with only gray tones. The appendix in this document contains some advice about good techniques for writing pseudocode.
195
 1. Using pseudocode, express the algorithm to convert a colored image to an image with only gray tones. The appendix in this document contains some advice about good techniques for writing pseudocode.
196
 
196
 
205
 
205
 
206
     ---
206
     ---
207
 
207
 
208
-### Exercise 3 - Convert a colored image to a black and white image ("Thresholding")
208
+### Exercise 3 - Convert a Colored Image to a Black and White Image ("Thresholding")
209
 
209
 
210
-Thresholding es an operation that can be used to convert a colored image to an image in black and white. To make this conversion we must decide which colors of the original image will be converted to white pixels and which to black. One simple way of deciding this is to compute the average of the red, green and blue components of each pixel. If the average is smaller than the threshold value, then we change the pixel to black; if not, it's changed to white.
210
+Thresholding is an operation that can be used to convert a colored image to an image in black and white. To make this conversion we must decide which colors of the original image will be converted to white pixels and which to black. One simple way of deciding this is to compute the average of the red, green and blue components of each pixel. If the average is smaller than the threshold value, then we change the pixel to black; if not, it's changed to white.
211
 
211
 
212
-#### Instructions:
212
+#### Instructions
213
 
213
 
214
 1. Using pseudocode, express the thresholding algorithm. Assume that you will use the slider's value as the threshold.
214
 1. Using pseudocode, express the thresholding algorithm. Assume that you will use the slider's value as the threshold.
215
 
215
 
216
 2. In the program, if the `chkboxThreshold` box is marked, the `applyThresholdFilter` function is invoked. The `applyThresholdFilter` function is also invoked each time that the value of the slider is changed.
216
 2. In the program, if the `chkboxThreshold` box is marked, the `applyThresholdFilter` function is invoked. The `applyThresholdFilter` function is also invoked each time that the value of the slider is changed.
217
 
217
 
218
-3. Complete the `ThresholdFilter` function so it implements the threshold algorithm in the colored image using the slider's value as the threshold. If the implementation is correct, the image on the right should be the original image but in black and white. The threshold value is a parameter of the `ThresholdFilter` function. The code provided in `mainwindow.h` has the constants `BLACK` and `WHITE` defined with their hexadecimal values; you can take advantage of this and use them in your code.
218
+3. Complete the `ThresholdFilter` function so it implements the threshold algorithm in the colored image using the slider's value as the threshold. If the implementation is correct, the image on the right should be the original image, but in black and white. The threshold value is a parameter of the `ThresholdFilter` function. The code provided in `mainwindow.h` has the constants `BLACK` and `WHITE` defined with their hexadecimal values; you can take advantage of this and use them in your code.
219
 
219
 
220
 4. The boolean parameter `invertColor` will be `true` if the option to invert the colors has been selected. Write the code so that the white and black colors are inverted if `invertColor` is `true`.
220
 4. The boolean parameter `invertColor` will be `true` if the option to invert the colors has been selected. Write the code so that the white and black colors are inverted if `invertColor` is `true`.
221
 
221
 
234
 
234
 
235
  ---
235
  ---
236
 
236
 
237
-##Deliverables
237
+## Deliverables
238
 
238
 
239
-Use "Deliverable" in Moodle to upload the `filter.cpp` file that contains the `GreyScale` and `Threshold` functions. Remember to use good programming techniques, include the names of the programmers involved, and to document your program.
239
+Use "Deliverable" in Moodle to upload the `filter.cpp` file that contains the `GreyScale` and `Threshold` functions. Remember to use good programming techniques, include the names of the programmers involved, and document your program.
240
 
240
 
241
 ---
241
 ---
242
 
242
 
243
 ---
243
 ---
244
 
244
 
245
-##Appendix: Good techniques for writing pseudocode
245
+## Appendix: Good Techniques for Writing Pseudocode
246
 
246
 
247
-1. Provide a description of the input and output data
248
-2. Enumerate the steps
249
-3. Use common repetition and decision structures: `if, else, for, while`
250
-4. Indent the blocks of steps that are inside of a decision or repetition structure, "Python-style"
251
-5. You do not need to declare the types of variables but you should initialize them. This is especially important for counters and accumulators
247
+1. Provide a description of the input and output data.
248
+2. Enumerate the steps.
249
+3. Use common repetition and decision structures: `if, else, for, while`.
250
+4. Indent the blocks of steps that are inside of a decision or repetition structure, "Python-style".
251
+5. You do not need to declare the types of variables, but you should initialize them. This is especially important for counters and accumulators.
252
 6. Remember that the purpose of pseudocode is so a human can understand it.
252
 6. Remember that the purpose of pseudocode is so a human can understand it.
253
 
253
 
254
 **Example:**
254
 **Example:**
267
 
267
 
268
 ---
268
 ---
269
 
269
 
270
-##References
270
+## References
271
 
271
 
272
 [1] http://www.willamette.edu/~gorr/classes/GeneralGraphics/imageFormats/24bits.gif
272
 [1] http://www.willamette.edu/~gorr/classes/GeneralGraphics/imageFormats/24bits.gif
273
 
273