1. Visual Info Processing Programming Guide

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

3. 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++. 

4. 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.

6. 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; }

7. Windows Hello World Sample
us/library/ff485851(v=VS.85).aspx

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

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

10. 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.

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

12. 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

13. 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.

14. 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

15. 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!

16. 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);

17. Message maps
Visual studio can add this code for us.

18. 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.

19. 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.

20. 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

22. Visual Studio 20XX You can download the sample code from
55_Fall2011/2011Fall_CS555.html

23. 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.

24. 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.

25. 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.

26. 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;

27. “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

28. 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.

29. Add new menu

31. 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 {…}

32. 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]; }

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

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

35. 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.

36. demo
Sample code
Assignment code

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