Visual Info Processing Programming Guide

Outline windows programming MFC (Microsoft Foundation Classes) Visual studio Basic image loading, operation (sample program) menu creation

Windows Programming Prepare Your Development Environment To write a Windows program in C or C++, you must install the Windows SDK or a development environment that includes the Windows SDK, such as Microsoft Visual C++. 

Windows Coding Conventions If you are new to Windows programming, it can be disconcerting when you first see a Windows program. The code is filled with strange type definitions like DWORD_PTR and LPRECT, and variables have names like hWnd and pwsz (called Hungarian notation). It's worth taking a moment to learn some of the Windows coding conventions.

WinMain: The Application Entry Point Every Windows program includes an entry-point function that is named either WinMain or wWinMain. Here is an empty WinMain function. INT WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, PSTR lpCmdLine, INT nCmdShow) { return 0; }

Windows Hello World Sample http://msdn.microsoft.com/en- us/library/ff485851(v=VS.85).aspx

What is windows? This type of window is called an application window. The area within the frame is the client area.

What is MFC? Microsoft Foundation Classes C++ wrappers to the Windows SDK An application framework A useful set of extensions MFC SDK Windows

Why MFC? Eliminates a lot of the monotony of Windows programming. Written in C++ Code reuse saves time Relatively easy for C++ programmers to pick up Most Windows objects act like C++ objects in MFC Small amount of overhead for a class library You can still access the SDK.

How to use MFC Derive the from classes to add functionality. Override base class members. Add new members.

Microsoft Foundation Class Library Class is a concept in object-oriented programming. In our sample program, we majorly concern 2 classes. MFC represents Windows components (menus, dialogs) as classes. It's recommended to add the event handlers in the CKingImageView class

User Interfaces (UI) The UI is the connection between the user and the computer Command line/console Text based Graphical User Interface (GUI) Visually oriented interface (WYSIWIG) User interacts with graphical objects More intuitive Other UIs: optical, speech-based, etc.

User Interaction Users interact with the GUI via messages When a GUI event occurs the OS sends a message to the program Programming the functions that respond to these messages is called event-driven programming Messages can be generated by user actions, other applications, and the OS

Event-driven programming Structure GUI programs to respond to user events Events are: mouse clicks, mouse moves, keystrokes, etc. in MFC parlance, usually called messages Main control structure is an event loop: while (1) { wait for next event dispatch event to correct GUI component } this code is always the same, so it’s handled by MFC You just write the code to respond to the events. functions to do this are called message handlers in MFC GUI model is: user should be able to give any input at any time  Non-Sequential!

Adding to a message map To have your class do something in response to a message: 1. Add DECLARE_MESSAGE_MAP statement to the class declaration 2. In the implementation file, place macros identifying the messages the class will handle between calls to BEGIN_MESSAGE_MAP and END_MESSAGE_MAP need to tell it the class name and the superclass name Example: BEGIN_MESSAGE_MAP(CHello2View, CView) ON_WM_LBUTTONDOWN() END_MESSAGE_MAP() 3. Add member functions to handle the messages (uses fixed naming scheme). Here’s an example function prototype: afx_msg void OnLButtonDown(UINT nFlags, CPoint point);

Message maps Visual studio can add this code for us.

View object Displays document data and typically allows users to enter and modify data Can have more than one view (as in Excel) May only show part of the data Data may be too large to display May only display a certain type of data Principle graphic user interface Handles most commands especially Paint (draw), Print, Inputs (WM_CHAR) etc.

Bitmap Format File Header: Image Data: Type, size of file, reserved dword, offset to image data, size of header, width, height, color planes, color depth, compress flag, size of image data, horizontal resolution, vertical resolution, number of colors, important colors, RGB palettes. Image Data: The actual image data of the file. From bottom-left. Padding bytes. Use software to convert bitmap images.

Bitmap Pixel storage The bits representing the bitmap pixels are packed in rows. The size of each row is rounded up to a multiple of 4 bytes (a 32-bit DWORD) by padding. The total amount of bytes necessary to store an array of pixels in an n Bits per Pixel (bpp) image, with 2n colors, can be calculated by accounting for the effect of rounding up the size of each row to a multiple of a 4 bytes, as follows

Visual Studio 20XX You can download the sample code from http://www.cs.binghamton.edu/~lijun/CS5 55_Fall2011/2011Fall_CS555.html

Load the project into Visual Studio, all the classes defined are displayed in the left window. Double click a class the contents of its header file or source file will be displayed in the right window. When you compile and run it, you will see an application window and some menu items ready but won’t response yet.

The project navigator shows you the files that make up your project The project navigator shows you the files that make up your project. These files can be grouped into folders to help you organize your project.

After you have read in an image, all the data will be saved in a CKingImageDoc object. As displaying functions are build in CkingimageView class you will need this line to handle the image object in view class.

Next in the view Class by calling int iBitPerPixel = pDoc->_bmp->bitsperpixel; int iWidth = pDoc->_bmp->width; int iHeight = pDoc->_bmp->height; BYTE *pImg = pDoc->_bmp->point;

“iBitPerPixel” has value of 8 or 24 to represent grayscale or 24 bit true color image respectively. To access the value of a pixel at ith row and jth column, use: pImg[i*iWidth+j] = 255; //set the pixel of a grayscale image to white or for a 24 bit color image; pImg[i*iWidth*3+j*3] = 0; //Blue bit pImg[i*iWidth*3+j*3+1] = 0; //Green pImg[i*iWidth*3+j*3+2] = 0; //Red

CKingimageView::OnDraw(CDC CKingimageView::OnDraw(CDC* pDC) is responsible to draw the image on current device context. After you have modified image data, call OnDraw to redraw the screen.

Add new menu

Common bugs So be careful using data type conversion. Always use explicit conversion – casting. double g = grayscale; pImg[i*iWidth+j] = (BYTE) g; Check if the value of the grayscale is between 0 and 255! if (g < 0.0) g = 0.0; else if (g > 255.0) g = 255.0; else {…}

Common bugs Original image overwritten! Define an array to store the image data. double *arr = new double ... ; for (…) { arr[i*iWidth+j] = (double) pImg[i*iWidth+j]; }

Common bugs Mask template. Use 2 arrays, one as input, one as output.

tools msdn sample code and tutoail Youtube Visual Studio Tutorial Google Email me or come to my office hour

Verify your result. Compare your output image with professor’s examples. Use GIMP or Photoshop to verify your results. Use your eyes to verify your results.

demo Sample code Assignment code

Please ask as early as possible. The End Questions? Please ask as early as possible.