Camera

Welcome to another Cell·SDK Tutorial.

Today we meet Parker Petters to show us how to use the camera in Cell·SDK. So welcome Mr. Petters.

Thank you to let me be here today. So we can start by creating a new Cell·SDK proyect. We are going to create a very simple camera app for our mobile with a maximum of three buttons:

- Select Camera button: if our mobile have two cameras back and frontal (primary and secondary) we will make appear a button to let change between them.

- Start/Stop Camera: it will make the camera to start seen what the cameras can see. If we want to change between cameras we must stop the camera, press the select camera button and start the camera.

- Take a photo: it will take a photo when we press it, and create a new label with the image captured.

So, let start coding in this way: Add three Buttons variables to the default screen. It could be a good point to rename MainScreen.cs to CameraScreen.cs if we plan to extend our application. So add the variables:

Button btnStartStop, btnType, btTakePhoto;

To start and stop the camera we need a Boolean to maintain the state so:

bool started;

We will need three variables: a Label to see what the camera is seeing, an Image to use for the initial label, and some way to know what camera we are using, primary or secondary:

Label cameraLabel;
Image cameraImage;
CameraType cType = CameraType.PRIMARY;

You will get an error if you build because we need to add the necessary usings to work with Images, so add the using:

using Syderis.CellSDK.Core.Graphics;

Now we need to add a reference to the camera library located at the Cell·SDK installation folder, depending on the target we need to locate the library: Syderis.CellSDK.WindowsPhone.IO.CameraSystem.dll or Syderis.CellSDK.Android.IO.CameraSystem.dll or Syderis.CellSDK.IOS.IO.CameraSystem.dll

And the using:

using Syderis.CellSDK.IO.CameraSystem;

Now, add the photocamera.png to the proyect and add these lines to the CameraScreen() constructor:

cameraImage = ResourceManager.CreateImage("photocamera");

We are loading an image from our content and then, we will check if there are one or two cameras and if they are connected, so in this way, if we have a secondary camera we will create a button to change between primary and secondary cameras.

if(CameraSystem.Instance.IsConnected(CameraType.PRIMARY))
{
    if (CameraSystem.Instance.IsConnected(CameraType.SECONDARY))
    {
        btnType = new Button("To Secondary Camera");
        btnType.Released -= btnType_Released;
        btnType.Released += btnType_Released;
        
        AddComponent(btnType, Preferences.Width - btnType.Size.X, Preferences.Height-btnType.Size.Y);
    }
    CameraSystem.Instance.SetCallbackImage(cameraImage);
    btTakePhoto = new Button("Take a photo");
    btTakePhoto.Released -= btTakePhoto_Released;
    btTakePhoto.Released += btTakePhoto_Released;
    AddComponent(btTakePhoto, 0, Preferences.Height - btTakePhoto.Size.Y);
}

Take special attention to the method SetCallbackImage() it is the main instruction in the code because we are telling the camera system where it have to draw what the selected camera is seeing.

Another thing we are doing is adding the button btTakePhoto() just to take a ..., how must I say it? … yes, just to take a photo J.

Add this code for a button that starts and stops the process of getting the images from the camera:

btnStartStop = new Button("Start Camera");
btnStartStop.Released -= btnStartStop_Released;
btnStartStop.Released += btnStartStop_Released;                
AddComponent(btnStartStop, Preferences.Width-btnStartStop.Size.X , btnType.Position.Y-btnStartStop.Size.Y);

Ok, now we need to show the image that the camera is giving somewhere, so we will add a new label, and we use the cameraImage variable that we set before with the SetCallbackImage() method:

cameraLabel = new Label(cameraImage);
cameraLabel.Draggable = true;
cameraLabel.Scalable = true;
cameraLabel.Rotable = true;            
AddComponent(cameraLabel, Preferences.Width/2-cameraLabel.Size.X/2, 0);

As we can see, we have set the label as dragabble, scalable and rotable to get a funny effect.

By now, we have a lot of code with buttons with some event handlers, now it is time to define what they do so let see the first: btntype_Released(), so paste this code:

//Change the camera selected
void btnType_Released(Component source)
{
    switch (cType)
    {
        case CameraType.PRIMARY:
            cType = CameraType.SECONDARY;
            btnType.Text = "To Primary Camera";
            break;
        case CameraType.SECONDARY:
            cType = CameraType.PRIMARY;
            btnType.Text = "To Secondary Camera";
            break;
    }
}

As you can see it changes the button text depending on the camera selected.

Now, the btTakePhoto_Released():

void btTakePhoto_Released(Component source)
{
    Texture2D fotoTexture = CameraSystem.Instance.CaptureImage();
    
    Label lbl = new Label(Image.CreateImage(fotoTexture));
    lbl.Rotable = lbl.Draggable = lbl.Scalable = true;
    AddComponent(lbl, 0, 0);           
}

It takes the texture from the camera, creates a new image and a label in the position 0,0. You can play in the way you want with them.

The last the btnStartStop_Released():

//Start to capture images from the camera
void btnStartStop_Released(Component source)
{
    if (!started)
    {
        CameraSystem.Instance.Start(CameraResolution.LOW, cType);
        btnStartStop.Text = "Stop Camera";
        cameraLabel.Size = new Vector2(640,480);
    }
    else
    {
        CameraSystem.Instance.Stop();
        btnStartStop.Text = "Start Camera";
    }
    started = !started;
}

Only two comments about this code; CameraResolution enumerator has three values: LOW, MEDIUM, HIGH. Play a little with them and see the differences; and second is that we set in every start the cameraLabel size at a very typical resolution in mobile cams.

You will get something like this:

CameraScreenShot