☰
Navigation :

Camera

Camera

This sample was made by Greg Pugh, owner of www.GPAnimations.com. It will show us how to use your device’s camera to replace an image in your Kwik project!

The finished project will be similar to this:

https://youtu.be/WR1s0LGGh9w

Please Note: This is an example to demonstrate how you can use the camera on a 3rd Generation iPad to replace an image in your Kwik app. Other devices may require different scaling depending on the camera’s resolution. You will need to add and alter the external coding used in this example if you would like to add abilities to edit the photos or to use them across multiple pages.

.psd file is 768 x 1024. You can create a new Kwik project with iPad mini.

Create a group

With the Layers panel open, select both the head and body layers by holding down Shift and clicking on each layer. Then in the Kwik 2 panel, navigate to Project and Pages > Create Groups.

Name: guy Members: head, body

Linear Animation

Now in the Kwik 2 panel, navigate to Animations > Linear Animation.

Name the Linear Animation guyMove and apply to Group – guy. Feel free to move the guy group wherever you’d like and for whatever duration you desire. The important part is that you apply the animation to the guy group. This is to demonstrate how you can replace an image that is already part of a group in Kwik.

Button for insert a picture from photo galley

In the Layers panel, select the btn layer. Then in the Kwik 2 panel, navigate to Interactions > Add button.

Name the button action myBtn and in Interactions, navigate to Code > External Code.

create the new button actions.

build.settings

On iOS, in order to use the camera, you must include the following keys/descriptions in the plist table of build.settings. When the system prompts the user to allow access, the associated description is displayed as part of the alert.

settings =
{
    iphone =
    {
        plist =
        {
            NSPhotoLibraryUsageDescription = "This app would like to access the photo library.",
        },
    },
}

https://docs.coronalabs.com/api/library/media/selectPhoto.html

preventing from overwriting build.settings

Everytime you publish, build.settings will be updated and it will loose the changes you manually added to it. If you keep build4/build.settings not to be updated, please check this property from settings.

Or you can modify tmplt/build.settings to include the plist change.

that’s all

ipad3camera.lua

Now is a good time to save your project and I’ll discuss the external code you just imported. If you find the ipad3camera.lua file and open it in your preferred text editor, you’ll see:

local onComplete = function(event)
    -- Create local variable named photo
    local photo = event.target
    -- Place photo over the body
    photo.x = 745;
    photo.y = 380;
    -- Scale down the photo to match the body scale
    -- Note that 0.07 scale is ideal for iPad 3rd Generation camera
    -- Other cameras may need different scaling
    photo.xScale = 0.07;
    photo.yScale = 0.07;
    -- Remove the head image placeholder from the group named “guy”
    guy:remove(head);
    -- Insert the newly taken picture in place of the head
    guy:insert(photo);
end

    -- If a camera exists on the device, start camera function
if media.hasSource(media.PhotoLibrary) then
	 media.selectPhoto( { mediaSource=media.PhotoLibrary, listener=onComplete } )
else
    -- If camera doens’t exist, show alert popup
    native.showAlert( “Corona”, “This device does not have a camera.”, { “OK” } )
end

there are the optional parameters of origin and permittedArrowDirections to specify the location and direction of the popup used to select the photo. these parameters are only for iPad.

 media.selectPhoto( { mediaSource=media.PhotoLibrary, 
        origin = button.contentBounds, 
        permittedArrowDirections = { "right" },
        listener=onComplete } )

All this code is doing is checking if the device has a camera. If it doesn’t, a popup box will appear notifying the user that a camera doesn’t exist. If a camera does exist, then the camera screen will appear, allowing the user to photograph an image that will replace the “?” on top of our guy’s body.

The important lines are:

photo.xScale = 0.07;
photo.yScale = 0.07;

“0.07” is the scale that I found works best in this instance using a 3rd Generation iPad’s camera. However, when testing in the Simulator, setting the scale numbers to “1” is better. You will have to adjust the scaling number as needed by your app and the device(s) you plan to support.

If you need to change the scale, simply change the number and save the ipad3camera.lua file. When you publish your Kwik project, it will automatically import the updated code from ipad3camera.lua.

To better understand this, click Publish in the Kwik panel to export your project. Open the main.lua in the Simulator. You should see your guy moving around the screen and when you click on the button it will bring up a camera option. If you’re on a Macintosh with a webcam, you’ll see a window similar to the one below.

You can choose a default image or take a new picture using the webcam. However, when you choose one, you’ll see the image is very small.

This is because the scale is set to 0.07 as it was made to be exported for a 3rd Generation iPad, not for a Mac computer. When the app is built for iOS and tested on an iPad 3rd Generation, the result is the video shown in the beginning of this tutorial.

If you’d like to see the image the correct size in the Simulator, simply open ipad3camera.lua and change:

photo.xScale = 0.07;
photo.yScale = 0.07;

to

photo.xScale = 1;
photo.yScale = 1;

Then save the changes to ipad3camera.lua and republish your Kwik project.

This is only a very basic example of how to implement a camera into your Kwik project. If you need to crop/edit the image, have it stored to be used on multiple pages, etc. you will need to create more extensive external code functions, but this is a great place to get started using a camera in your apps!