Camera-plus and takePhoto event


#1

Hi,
I’m having problems with this plugin.
Everything works like expected, but i can’t invoke event fired after when photo is made.
Here is XML / Plain JS

<Page class="page" loaded="loaded"
      xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:Cam="@nstudio/nativescript-camera-plus"
      xmlns:header="components/header">
    <AbsoluteLayout width="100%">
        <GridLayout rows="*" columns="40,*,40" class="zindex2" width="100%" height="100" top="30" padding="0 20">
            <Image col="1" src="{{ headerLogo }}" horizontalAlignment="center" class="logo" horizontalAlignment="center"/>
            <Image col="2" src="{{ user }}" horizontalAlignment="right" class="user" verticalAlignment="top"/>
        </GridLayout>
        <FlexboxLayout alignItems="center" justifyContent="center" height="100%">
            <StackLayout class="cam-holder" horizontalAlignment="center" verticalAlignment="middle">
                <Cam:CameraPlus zIndex="-1" id="camPlus"
                                width="{{ fullWidth }}"
                                class="Camera"
                                galleryPickerMode="single"
                                enableVideo="false"
                                confirmVideo="false"
                                defaultCamera="rear"
                                saveToGallery="false"
                                showCaptureIcon="false"
                                showGalleryIcon="false"
                                showToggleIcon="true"
                                showFlashIcon="true"
                                confirmPhotos="true"
                                flashOffIcon="false"
                                autoSquareCrop="true"
                                insetButtons="false"
                                insetButtonsPercent="2"
                                keepAspectRatio="false"
                                photoCapturedEvent=" {{ getEvent }}">
                </Cam:CameraPlus>
            </StackLayout>
        </FlexboxLayout>
        <StackLayout row="2" class="footer white" verticalAlignment="bottom" top="{{ height-50 }}" width="100%" height="100">
            <DockLayout stretchLastChild="false" class="controls" horizontalAlignment="center">
                <Image src="res://icon-flash" stretch="false" marginTop="20" tap="{{ photo }}"></Image>
                <Image  src="{{ controls }}" stretch="none" class="menu" tap="{{ goback }}"/>
            </DockLayout>
        </StackLayout>
    </AbsoluteLayout>
</Page>

GetEvent is just ignored…

var Observable = require("data/observable").Observable;
var platformModule = require("platform");


var CameraPlus = require('@nstudio/nativescript-camera-plus');


exports.loaded = function (args) {


    var page = args.object;
    var model = new Observable();

    var cam = page.getViewById("camPlus",CameraPlus);



    model.photo = function (args) {
        cam.takePicture(function(args) {
            console.log (args)
        })
    };
    model.getEvent = function () {
        var cam = page.getViewById("camPlus");
        cam.on(CameraPlus.photoCapturedEvent, function() {
            alert (1);
        })
    };
    page.bindingContext = model;
};

Thanks for checking.
Cheers.


#2

Get event must be accessible through model.get("getEvent") in order for it to bind with XML. Try adding this line to your code.

model.set("getEvent", model.getEvent);

#3

Hi @manojdcoder,
Thank for this reply.
But i’m bit confused, beacuse i don’t have to do this with my binding technique.
for example, model.photo works perfectly, and i don’t have to do:
model.set("photo", model.photo);

So, i’m not sure what to do here.
I’ve tried this:

model.getEvent = function () {
        var cam = page.getViewById("camPlus");
        cam.on(CameraPlus.photoCapturedEvent, function() {
            goToPage('dashboard');
        })
    };

    model.set("getEvent", model.getEvent);

But this have no effect too…

Thanks, and cheers !