You may work with one partner on this lab. Include both of your names in the myimagebox.cpp file. You are the beta testers for the new submission system, so if there are problems, I'll try to fix them as fast as possible, which may be within 24 hours.

In this lab you will practice working with QT, RGB colors, and png images using the RGBImage class.

Initializing git repos

Use the setup40 script to set up the appropriate git repos with the right permissions set for partners and instructors. Suppose users molly and tejas which to work together. Molly can start by running

[~]$ setup40 projects/01 tejas

Once the script finishes, Tejas should run

[~]$ setup40 projects/01 molly

Please note that the script tries its best to ease the initial creation and cloning of git repos and it tries to be smart and check that each partner agrees that they are partners. That said, there are some race conditions and if there are uncooperative formations of partners, the script and the instructor will get confused. If you play nice with the script, it will play nice with you.

If all goes well, Tejas and Molly should each have a local clone of a common git repo in their own ~cs40/projects/01 directory. You can use git status to confirm this.

If you wish to work by yourself (not recommended), use the syntax

[~]$ setup40 projects/01 none

Copying starter code

Both partners should add the default CMakeLists.txt and cmake_modules files/folders to their projects directory. In our example, both Molly and Tejas should run the following commands

[~]$ cd ~/cs40/projects
[projects]$ cp -r ~adanner/public/cs40/projects/CMakeLists.txt ./
[projects]$ cp -r ~adanner/public/cs40/projects/cmake_modules/ ./

This files are not under version control. Only files in the projects/01 directory will be managed by git.

For the next step only one partner should copy over the starting code

[~]$ cd ~/cs40/projects
[projects]$ cp -r ~adanner/public/cs40/projects/01/* 01/

Now push the changes to your partner

[projects]$ cd 01
[01]$ git add m* CMakeLists.txt
[01]$ git commit -m "project1 start"
[01]$ git push

Even if your are working by yourself, you must run git push or I can't see/grade your work. If you are working with a partner, your partner can now pull the changes. In this case if Tejas wishes to get files Molly pushed, he would run

[~]$ cd ~/cs40/projects/01
[01]$ git pull

Making and building code

Make a build directory in your projects directory and run cmake, and make. You can also do this in QtCreator by selecting new project and opening the file ~/cs40/projects/CMakeLists.txt

[01]$ cd ~/cs40/projects/
[projects]$ mkdir build
[projects]$ cd build
[build]$ cmake ..
[build]$ make -j8

Copy RGB code

Let's move towards some actual coding. We want to copy the RGB classes from the examples/common folder to the projects/01 folder. If you are working with a partner, you could switch roles and the person who copied the original started code can take a break while the other partner copies and pushes. When all the heavy work is done, reap the benefits with a git pull in your projects/01 folder

[~]$ cd ~/cs40/projects/01
[01]$ cp ../../examples/common/png* ./
[01]$ cp ../../examples/common/rgb* ./
[01]$ git add png_* rgb*
[01]$ git commit -m "copy png/rgb files"

Next, modify your CMakeLists.txt in your projects/01 folder to add the RGB sources to the build, and create the rgb library. You can do this mostly by copying relevant sections from examples/common/CMakeLists.txt

set(CLRHDRS png_reader.h png_writer.h
  rgbColor.h rgbImage.h)
set(CLRSRC png_reader.cpp png_writer.cpp rgbImage.cpp)
add_library(proj1_rgb ${CLRHDRS} ${CLRSRC})

Note: in the last line of the code above, I changed the library name from commonrgb to proj1_rgb. CMake gets grumpy if there are multiple libraries or executable targets with the same name, so verify that the first argument in any add_library or add_executable has a unique name. The four lines above can go anywhere in the CMakeLists.txt file before the add_executable command for colorTest. Finally, modify the project1 target to compile and link against the PNG and RGB libraries

ADD_EXECUTABLE(project1 ${SRC} ${MYQTFILES} ${CLRSRC})
TARGET_LINK_LIBRARIES(project1 proj1_rgb ${PNG_LIBRARIES} ${EXT_LIBS})

add, commit, and push your changes to the git repo

[01]$ git add CMakeLists.txt
[01]$ git commit -m "add rgb library"
[01]$ git push

Your partner can now get your modification by running git pull Go into your build directory and run make -j8. If all went well, CMake should compile and link your library. You should see lines like the following

Scanning dependencies of target proj1_rgb
Building...
Linking CXX static library libproj1_rgb.a
Generating...
Scanning dependencies of target colorTest
Building...
Linking CXX executable project1
[100%] Built target project1

OK, you and your partner are now ready to modify the code to complete the lab. Your primary goal is to write code to split a PNG image into four sub-images showing the red, green, blue, and grey components separately. The grey component is computed by taking the average of the r,g,b components for a given pixel. An example is shown below
img found here.
Nothing too tricky here, but note that each sub-image is 1/4 the size of the original. You can decide how to sample pixels in the original image to create the sub-image. One possibility is to take the upper left pixel of each 2x2 block of four pixels in the original image. Implement your functionality as a QT application. Start with the code in projects/01, and design at least the UI part in qtcreator. The project should build in either qtcreator or standard CMake

• Add a button to the UI called Split
• Create an event that connects the clicked signal on the Split button to a split() slot in the MyImageBox widget
• Add the split() method to the MyImageBox header
• Add #include "rgbImage.h" to the top of the MyImageBox source
• Implement your split() method by using the RGBImage class. The App should display the split image after clicking the button
• If no image is loaded when the split button is clicked, display an informational QMessageBox.
• Repeat the process above for another button and another effect of your choosing

Hints and Tips

• Start early, proceed incrementally
• Commit and push when something new is working
• You may want to make a QString imgName private member variable to remember the name of the last opened image.
• QT uses QString,RGBImage used C++ std::string. The QString class has a toStdString() method.
• You can save your split image to a temporary file name, e.g., "splitimg.png"
• Load the new Pixmap from the temp saved image. QT can't load directly from RGBImage types.
• Use the QT Documentation. Remember, some method might be defined in a base class.
• The only source files you really need to change are myimagebox.*
• Aside from QString, all other QT classes you need are used at least once in myimagebox.cpp
• You can use the command line tool convert to make png files from other formats, e.g., convert ponies.jpg ponies.png

These extensions are entirely optional and should not be attempted until the required components are complete.

• Add more image effects for manipulating RGBImages. Examples might include blur or posterize.

To submit your code, simply commit your changes locally using git add and git commit. Then run git push while in the projects/01 directory. Only one partner needs to run the final push, but make sure both partners have pulled and merged each others changes. Professor Newhall has put together a nice git page with some documentation on using git. Note that the initial setup and cloning is done by the setup40 script, so you can ignore most of that discussion. See the section on Using a shared repo. Don't worry about init, clone, or branching. I'll try to avoid those features in this course.

Home Page

Last updated: Tuesday, September 22, 2020 at 09:07:42 AM