Capturing an image and placing it directly into an image control?

[jjedrasik]

Hi all,

I'm playing around with phonegap and Alpha, and one of the things I've been trying to do is take a picture on an android tablet and immediately place it into an image control.

I have a button on the UX with an 'Image Capture' action javascript event. As expected, this opens up the camera, I take a picture, and the camera closes, but does nothing.

I have tried the following lines...

$('IMAGE_1').src = e.data;

As well as.../

$('IMAGE_1').src = e.fileSystemURL;

But nothing seems to work. I even tried putting js alerts in there so at least I have something to help me debug, but nothing seems to be working. I made sure to select all plug-ins related to file system and camera in the build, as well as making sure that photos are cordova/phonegap, as opposed to HTML5.

Anyone know what I'm missing?

Thanks in advance

[Davidk]

Re: Capturing an image and placing it directly into an image control?

Do you mean that you're using the "Image Capture - Camera/Photo Library" Action?

If so, then in that Action, at the top of it's dialog, you have a property named "Javascript to execute when image has been capture". Is this where you're running your code?

If so, then you need to access the "element" of your control. You won't have an HTML Id named "IMAGE_1"... but rather a rendered <img> tag with the Id most likely being...

DLG1.V.R1.IMAGE_1

The inline help, in this case, is a bit misleading... or at best... confusing. If you added a Static Text Control, and defined HTML for that control as an <img> tag and set your own Id... then your code would have worked.

However, since you're using an an Image control, you must first get a pointer to that control... then sets its source...

var imgEle = {dialog.Object}.getPointer('IMAGE_1');
imgEle.src = e.data;

[jjedrasik]

Re: Capturing an image and placing it directly into an image control?

Hi David,

So yeah, I put the javascript in that action you mentioned, tried using both pointers to the control, as well as using

document.getElementById('{dialog.ComponentName}.V.R1.IMAGE_1').src = e.data;

The issue is still the same though, the image does not appear on the screen. Perhaps I'm going about this the wrong way?

Thanks again!

[Davidk]

Re: Capturing an image and placing it directly into an image control?

Can you post your UX? What you've posted looks ok. Something else is going on.

What version/build of Alpha are you using?

[jjedrasik]

Re: Capturing an image and placing it directly into an image control?

CameraComponent.a5wcmp

I've attached the component...I'm on version 12.4.5.2, build 5018


It seems to work fine when I do it on web/live preview, but putting it through the phoneGap build seems to kill the functionality.
I added an alert with an inline action to see if any part of that event is firing, and it is, which is nice. I just don't understand why the image doesn't want to appear


Thanks again!

[Davidk]

Re: Capturing an image and placing it directly into an image control?

The problem isn't really in your Javascript code... although you are assigning .src twice and you do not need to. You also don't need the long form of document.getElementById... unless you really want it.

You can do either...

$('{dialog.ComponentName}.V.R1.IMAGE_1').src = e.data;

or

$('{dialog.ComponentName}.V.R1.IMAGE_1').src = e.fileSystemURL;

The problem is most likely in the missing plugins for your PhoneGap Build app. When working with the camera I include these plugins...

Camera
Device
File
File Transfer
Geolocation
Network Information
Notification
ImagePicker
Whitelist

You're probably missing Device... which, if not there, will stop everything. Turning on Debugging in your Device, and then attaching your device to your PC and debugging through Chrome... you'd see the errors in the console.

[jjedrasik]

Re: Capturing an image and placing it directly into an image control?

Yep, I was missing Device. I checked it off and it worked liked I hoped it would've.
Thanks so much!

[CharlesParker]

Re: Capturing an image and placing it directly into an image control?

Attaching your device through the PC and using chrome to debug it - how is that done? Is there any sort of how to on that anywhere? It seems simple enough. I always just put it on an a5w page and debug that way in chrome, how do you see your device? Is it in AS? Or do you mirror the device? Interesting and probably off topic for this thread but it would be pretty cool to know. Can this be done with an iPad as well?
Thanks for pointers on the plugins! Seems like a lot of them are needed. I guess the next question is there any documentation to help us figure out what plugins might be needed?

[Davidk]

Re: Capturing an image and placing it directly into an image control?

Google search for Android debugging... that'll get you the information you need. You can't debug PhoneGap Build using an a5w page. Debugging iOS is certainly possible, but not under Windows... you'll need a Mac.

[CharlesParker]

Re: Capturing an image and placing it directly into an image control?

Ah, the Mac I got. I bought it awhile back for like 60 bucks. It’s an older one but got me the stuff I needed for the provisioning files and stuff you need for an iOS app.
Your right though I have not researched it. I’ll look into it. Thanks for the heads up. I understand I cannot debug a PGB but most of the issues I would create for myself can be found in the UX in chrome as it is mostly dumb stuff like a missing image/bad path or locating and sizing containers. I find it pretty easy to adjust widths and immediately see the changes that way. Then I jump into AS and make the changes I want.
With so many aspects to a successful build it is easy to see why app development can be expensive if you want it done right! Even with all the fast and efficient AS features!

[Davidk]

Re: Capturing an image and placing it directly into an image control?

Jan, be aware that a version beyond 4770 will completely mess you up due to undocumented changes in the way that Alpha renders a Static Image Control.

In 4770 you get an <img> tag with the Id you assigned.

Beyond 4770 (I don't know when it started) your Static Image Control is now wrapped in a <div> and that div is assigned your Id. This means that your code which works in 4770 will fail silently and without console error in a release after 4770. The div will get your src assignment and your Image control will remain empty. This is one of those bugs that consumes all the time Alpha saved you in the first place.

[jjedrasik]

Re: Capturing an image and placing it directly into an image control?

Jan, be aware that a version beyond 4770 will completely mess you up due to undocumented changes in the way that Alpha renders a Static Image Control.

In 4770 you get an <img> tag with the Id you assigned.

Beyond 4770 (I don't know when it started) your Static Image Control is now wrapped in a <div> and that div is assigned your Id. This means that your code which works in 4770 will fail silently and without console error in a release after 4770. The div will get your src assignment and your Image control will remain empty. This is one of those bugs that consumes all the time Alpha saved you in the first place.

Hmm okay, this is good to know, thank you for the help!