|
|
|
|
140
|
---
|
140
|
---
|
141
|
|
141
|
|
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 Qt project called `SimpleImageEditor` by double-clicking on the `SimpleImageEditor.pro` file in the `Documents/eip/Arrays-SimpleImageEditor` folder of your computer. You may also go to `http://bitbucket.org/eip-uprrp/arrays-simpleimageeditor` to download the `Arrays-SimpleImageEditor` folder to your computer.
|
151
|
1. Load the Qt project called `SimpleImageEditor` by double-clicking on the `SimpleImageEditor.pro` file in the `Documents/eip/Arrays-SimpleImageEditor` folder of your computer. You may also go to `http://bitbucket.org/eip-uprrp/arrays-simpleimageeditor` to download the `Arrays-SimpleImageEditor` folder to your computer.
|
152
|
|
152
|
|
|
|
|
|
162
|
|
162
|
|
163
|
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.
|
163
|
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.
|
164
|
|
164
|
|
165
|
-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?
|
|
|
|
|
165
|
+ 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?
|
166
|
|
166
|
|
167
|
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
|
167
|
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
|
168
|
|
168
|
|
|
|
|
|
174
|
* `btnGreyScaleFilter`
|
174
|
* `btnGreyScaleFilter`
|
175
|
* `btnRevertImage`
|
175
|
* `btnRevertImage`
|
176
|
|
176
|
|
177
|
-are connected to functions so when a button in the interface is pressed, a certain task is carried out. For example, when you press the `LoadImage` button, a window will appear for you to select the file with the image you want to edit, which when read, the image is assigned to `originalImage`. The slider `thresholdSlider` can assume values between 0 and 255.
|
|
|
|
|
177
|
+ are connected to functions so when a button in the interface is pressed, a certain task is carried out. For example, when you press the `LoadImage` button, a window will appear for you to select the file with the image you want to edit, which when read, the image is assigned to `originalImage`. The slider `thresholdSlider` can assume values between 0 and 255.
|
178
|
|
178
|
|
179
|
|
179
|
|
180
|
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.
|
180
|
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.
|
181
|
|
181
|
|
182
|
-###Exercise 2: Convert a colored image to an image with gray tones
|
|
|
|
|
182
|
+
|
|
|
183
|
+### Exercise 2 - Convert a colored image to an image with gray tones
|
183
|
|
184
|
|
184
|
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:
|
185
|
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:
|
185
|
|
186
|
|
|
|
|
|
189
|
|
190
|
|
190
|
`editedImage.setPixel( i, j, qRgb(gray, gray, gray) )`.
|
191
|
`editedImage.setPixel( i, j, qRgb(gray, gray, gray) )`.
|
191
|
|
192
|
|
192
|
-####Instructions
|
|
|
|
|
193
|
+#### Instructions:
|
193
|
|
194
|
|
194
|
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.
|
195
|
|
196
|
|
|
|
|
|
204
|
|
205
|
|
205
|
---
|
206
|
---
|
206
|
|
207
|
|
207
|
-###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")
|
208
|
|
209
|
|
209
|
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 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
|
|
211
|
|
211
|
-####Instructions
|
|
|
|
|
212
|
+#### Instructions:
|
212
|
|
213
|
|
213
|
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.
|
214
|
|
215
|
|