You may work with one partner on this lab. Include both of your names in the myimagebox.cpp file. The submit system is a bit clunky right now, so please email me your partner's name (and cc your partner) so I can configure the git repos.

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

Updating with git

Pull any updates from the master branch and merge them into your working branch.

cd ~/cs40/code
git checkout master

if there are any complaints about unsaved changes, use git add and git commit to save changes in the working branch, or git checkout -- [file] to discard changes. You may also want to read about git stash

git pull
git checkout working
git merge master
git push

To practice creating branches and to get over the fear of branching, create a new project1 branch, push it to your private remote, and track it.

$ git checkout -b project1
Switched to a new branch 'project1'
$ git push -u private project1
To gitrepos:cs40_username
 * [new branch]      project1 -> project1
Branch project1 set up to track remote branch project1 from private.

If you are sharing code with a partner, or just confused about git in general, I have updated the Git Documentation on the CS40 wiki.

Updating CMake

We switched the default C++ compiler from g++ to clang on Monday morning. As a result, CMake might be slightly confused. To help it out, cd into your build directory and rebuild the CMake cache. You shouldn't have to do this often

cd ~/cs40/code/build
make clean; rm CMakeCache.txt
cmake ..
make -j8

Note, if you have a separate build folder for QT, you may want to cd into that directory and run the make clean and rm CMakeCache.txt there too. Alternatively, the nuclear option is just to remove your build directory entirely and rebuilding, e.g.,

cd ~/cs40/code
rm -rf build
mkdir build
cd build
cmake ..
make -j8

Copy RGB code

Let's move towards some actual coding. We want to copy the RGB classes from the w01-intro/pngtest folder to the projects/01

cd ~/cs40/code/projects/01
cp ../../w01-intro/pngtest/png* ./
cp ../../w01-intro/pngtest/rgb* ./

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 w01-into/pngtest/CMakeLists.txt

include_directories(PNG_INCLUDE_DIRS)
set(RGBHDRS rgbColor.h rgbImage.h png_reader.h png_writer.h)
set(RGBSRC rgbImage.cpp png_reader.cpp png_writer.cpp)
add_library(proj1_rgb ${RGBHDRS} ${RGBSRC})

Note: in the last line above, I changed the library name from rgb 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 colorTest targets to compile and link against the PNG and RGB libraries

ADD_EXECUTABLE(colorTest ${SRC} ${MYQTFILES} ${RGBSRC})

TARGET_LINK_LIBRARIES(colorTest proj1_rgb ${PNG_LIBRARIES} ${EXT_LIBS} )

Go into your build directory and run make. 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 colorTest
[100%] Built target colorTest

Making an inital commit(tment)

Whew, that was a lot of file manipulation. Commit your changes in git. Use git status first to view your changes.

$ git status
# On branch project1
# Changes not staged for commit:
#   (use "git add ..." to update what will be committed)
#   (use "git checkout -- ..." to discard changes in working directory)
#
#	modified:   CMakeLists.txt
#
# Untracked files:
#   (use "git add ..." to include in what will be committed)
#
#	../../CMakeLists.txt.user
#	png_reader.cpp
#	png_reader.h
#	png_writer.cpp
#	png_writer.h
#	rgbColor.h
#	rgbImage.cpp
#	rgbImage.h

Add the png* and rgb* files to version control, and commit

git add png_* rgb* CMakeLists.txt
git commit -a -m "Added rgb library"
git push

The -m option on git commit allows you to type the log message directly only the command line. If you leave it off, git will open an editor for you to type the message. 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 to the project1 branch and then run git push while in the project1 branch. See the wiki for details related to sharing and merge conflicts.

Home Page

Last updated: Tuesday, September 22, 2020 at 01:07:43 PM