Friday, 18 March 2016

Summary of February 29th – Codes of open camera

2.29
During my learning of OC online lectures, I tried to develop my own application. Firstly, I tried to write codes in order to opening the camera and take photo. Finally, on 29th of February, I create the code of taking photos.


 

I took several photos but they could not be saved into library.
Logbook noting:
During the period from February 1st and February 17th, I learned Objective-C serially. Firstly I learned Chinese version and then I learned English version: Stanford University Developing iOS7. These online lectures especially the latter one helped me a lot on OC programming.



Comments:
After December 11th, Christmas Holiday began. Following that was the final exams of the first semester. So I almost didn’t have any time to progress my project. Just after the exams, I began to learn Objective-C sequentially. The reason I learned it serially was that I found myself have not sense of the basic programming skills. One piece of paper can’t provide me a whole idea of this project. I have some basic C and C++ knowledge background but it is still very difficult for me to develop a new application. Under this consideration, I decided to learn it from the beginning. Here I want to recommend some fabulous online courses.
1.       Stanford University Developing iOS 7 Apps
This series of video provides the most comment and basic ideas about Apple app development. The teacher in the video uses a lot of demos to show the students how to use the skills in lecture onto a real app.
Through these videos, I learned how every app runs, the usage of protocols, different frameworks library, the usage of button and label. These functions helped me very much in the following steps.


2.     电脑教程手机程序 iOS发快速入门教程 讲老师:李明
This series of videos are specially prepared for Chinese developers. I learned a log from these videos. As a fresh man in Object-C, this is absolutely for me to get in touch with Objective-C.


Summary of December 10th – Get pixel value of a picture

Logbook noting:

How to get pixel data from a UIImage (Cocoa Touch) or CGImage (Core Graphics)?

+ (NSArray*)getRGBAsFromImage:(UIImage*)image atX:(int)x andY:(int)y count:(int)count
{
    NSMutableArray *result = [NSMutableArray arrayWithCapacity:count]; 
    // First get the image into your data buffer
    CGImageRef imageRef = [image CGImage];
    NSUInteger width = CGImageGetWidth(imageRef);
    NSUInteger height = CGImageGetHeight(imageRef);    
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    unsigned char *rawData = (unsigned char*) calloc(height * width * 4, sizeof(unsigned char));
    NSUInteger bytesPerPixel = 4;
    NSUInteger bytesPerRow = bytesPerPixel * width;
    NSUInteger bitsPerComponent = 8;
    CGContextRef context = CGBitmapContextCreate(rawData, width, height,
                    bitsPerComponent, bytesPerRow, colorSpace,
                    kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
    CGColorSpaceRelease(colorSpace);
    CGContextDrawImage(context, CGRectMake(0, 0, width, height), imageRef);
    CGContextRelease(context); 
    // Now your rawData contains the image data in the RGBA8888 pixel format.
    NSUInteger byteIndex = (bytesPerRow * y) + x * bytesPerPixel;
    for (int i = 0 ; i < count ; ++i)
    {
        CGFloat alpha = ((CGFloat) rawData[byteIndex + 3] ) / 255.0f;
        CGFloat red   = ((CGFloat) rawData[byteIndex]     ) / alpha;
        CGFloat green = ((CGFloat) rawData[byteIndex + 1] ) / alpha;
        CGFloat blue  = ((CGFloat) rawData[byteIndex + 2] ) / alpha;
        byteIndex += bytesPerPixel;
        UIColor *acolor = [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
        [result addObject:acolor];
    }
  free(rawData); 
  return result;
}
What is CGImageRef


CGImageRef CGImageCreate ( size_t width, size_t height, size_t bitsPerComponent, size_t bitsPerPixel,size_t bytesPerRow, CGColorSpaceRef space, CGBitmapInfo bitmapInfo, CGDataProviderRef provider, constCGFloat *decode, bool shouldInterpolate, CGColorRenderingIntent intent );


How to use CGContextDrawImage?

I need some help using the CGContextDrawImage. I have the following code which will create a Bitmap context and convert the pixel data to CGImageRef. Now I need to display that image using CGContextDrawImage. I'm not very clear on how I'm supposed to use that. The following is my code:


- (void)drawBufferWidth:(int)width height:(int)height pixels:(unsigned char*)pixels
    {
     const int area = width *height;
     const int componentsPerPixel = 4;
     unsigned char pixelData[area * componentsPerPixel];
     for(int i = 0; i<area; i++)
     {
          const int offset = i * componentsPerPixel;
          pixelData[offset] = pixels[0];
          pixelData[offset+1] = pixels[1];
          pixelData[offset+2] = pixels[2];
          pixelData[offset+3] = pixels[3];
     }
     const size_t BitsPerComponent = 8;
     const size_t BytesPerRow=((BitsPerComponent * width) / 8) * componentsPerPixel;
     CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
     CGContextRef gtx = CGBitmapContextCreate(pixelData, width, height, BitsPerComponent, BytesPerRow, colorSpace, kCGImageAlphaPremultipliedLast);
     CGImageRef myimage = CGBitmapContextCreateImage(gtx);
     //What code should go here to display the image?
     CGContextRelease(gtx);
     CGImageRelease(myimage);
}

Comments:
These two blocks of codes are all from http://stackoverflow.com/. If you are trying to get RGB value of a picture, the second block of codes is very helpful.


The basic idea is to set an array which contains 4 numbers representing Red, Green, Blue and Alpha.  And then display a huge matrix containing thousands of arrays. 

Summary of December 7th – Objective-C learning

Logbook noting:

Now take a quick glance through the code. You’ll notice ViewController.m uses UIImagePickerController to pick images from the album or to take pictures with the camera.

Now, a section-by-section recap:
1.       Section 1: Convert the UIImage to a CGImage object, which is needed for the Core Graphics calls. Also, get the image’s width and height.
2.       Section 2: For the 32-bit RGBA color space you’re working in, you hardcode the parameters bytesPerPixeland bitsPerComponent, then calculate bytesPerRow of the image. Finally, you allocate an array pixels to store the pixel data.
3.       Section 3: Create an RGB CGColorSpace and a CGBitmapContext, passing in the pixels pointer as the buffer to store the pixel data this context holds. You’ll explore Core Graphics in more depth in a section below.
4.       Section 4: Draw the input image into the context. This populates pixels with the pixel data of image in the format you specified when creating context.
5.       Section 5: Cleanup colorSpace and context.

this link is about pixel, RGB, hue

next key word: UIImage 

The UIImagePickerController class manages customizable, system-supplied user interfaces for taking pictures and movies on supported devices, and for choosing saved images and movies for use in your app. An image picker controller manages user interactions and delivers the results of those interactions to a delegate object.
The role and appearance of an image picker controller depend on the source type you assign to it before you present it.
·         A sourceType of UIImagePickerControllerSourceTypeCamera provides a user interface for taking a new picture or movie (on devices that support media capture).


Comments:
From this point, I began to focus on programming affairs. As for image processing, it was not the first time I met with it, in my year two project, I had already got in touch with it. In year two, our group used Matlab mainly (click me to see more information about my Year Two group project). However I had to develop this app using OC.
I have to think about how to take photo first. I watched some videos on how to open a camera and take a photo. Here I want to recommend some useful videos on Youtube.
1.       In this video, the author introduces how to build an application which can open camera and take photo.

2.       In the second video, the author provides a very good example of how to display a preview and take photo. That preview is just like a life video and this is very helpful to my project. After some modifications, it can take several photo only with one click

Also, there was a website which helped me a lot during my developing process:
In this web, you can find answers to almost every question you have during the developing process.


As for representing colours, I chose RGB rather than HSV. Because I think RGB is more basic and easy to get from a picture using Objective-C. 

Thursday, 17 March 2016

Summary of December 4th – Experiment to get pixel width of rear lights in a picture

Logbook noting:

The experiment was divided into three parts mainly. The aim of this experiment was to find the relationship between real distance and pixel with of red lights in a picture. Because the consideration of safety, this experiment couldn’t be finished outdoors. So in the lab, I just use two red papers to represent the rear lights of front car. In the first part, I set the light width to be 2 meters and take photos in the distance of 5, 10, 15, 20, 25, 30 meters. Then recorded the pixel width of red lights at different distance. The second and third part were almost same except changing lights width to be 1.8m and 1.5. The pictures below shows the procedure of that experiment. 

Set lights width to be 2 meters
     




Take pictures at different distances. 
5 meters:

10 meters:





15 meters:

20 meters:






25 meters:

30 meters:


Then set lights width to be 1.8m and 1.5m and did the same measurement. 

Comments:

The similar triangle model is shown in this figure:
Figure 1: Similar triangle illustration 


According to rules of similar triangles, the relationship between real distance and image view is:


Next problem was how to get the pixel width of red lights in a picture. I didn’t have photo tools to calculate the pixel width between two red papers. I chose a very strait way to measure. I opened the album in Mac and use screen shot. I used the scale plate of the system to the total picture length and to find the length between two red papers in that picture. The technical data of iPhone 6 shows that there are 1334 pixels a line and 750 pixels a row. I multiplied the ratio of red papers in that picture to the total length of that picture and total pixels a line. In this way, I got the approximate pixel width of that red papers.

However, in the following days, I found that the normal lights width of a car is around 1.5m to 1.7m. The picture taken in the picture mode is not a whole screen so that I can’t use 1334 as the total pixels. Fortunately, I changed the resolution later on and avoid this huge error successfully. The chart below shows the relationship between real distance to the front car and the pixel width of front car’s rear lights in a picture. 

Figure 2: Relationship between real distance and pixel width of lights in a picture