Launching the camera application in android mobile prototyping

Hello Axure,

I am a newbie to axure so please domn’t mind any rookie questions from me.

I was trying to build a mobile prototype for android. I wanted to know how can I open the camera application by using the On-click event on any widget.

Another question,
Is there any place i can get a tutoria regarding the Cases and functions so that i can increase the count of the push notification bubble (on a widget inside the application) with on click function on different hotspots?

Please help.

Thanks

Hi sheet5013,

You are able to launch the camera of an Android or iOS device using a “File” type Text Field. Add a Text Field widget, and then select “File” from the “Type” droplist in the “Widget Properties” Pane (right side, middle pane of UI). You won’t be able to open the camera using the OnClick of a widget. You’ll need to use the Text Field and it will automatically render a “Choose File” button. But with some clever design, you may be able to hide this button. Make the Text Field’s background transparent and lay it over another shape. You can then add another rectangle to cover the rendered HTML button. Give it a shot!

See it live! (You may want to load this on your mobile)

As for creating a counter for notifications, you may want to get familiar with variables:

Variables | Axure

And setting the text on widgets:

Set Widget Values | Axure

Let me know if you need further assistance!

Oh and :welcome: to the forum!

4 Likes

Hi Tuomas,

thanks for sharing. I did a little experiement with JavaScript.

  1. Accessing Camera without dialog
  2. Using returned value

Enjoy
androidCam.rp (68.7 KB)

2 Likes

In a similar vein… :slight_smile:

How about mechanisms for sending an SMS message from within a mobile prototype?

I got as far as looking at a free / trial SMS service which had a wizard for generating some HTML - and them adding this to a DP in Axure via a plug-in?

It didn’t work but that’s probably me getting the detail wrong. Conceptually - would that work?

Any insight welcomed.

MG

Hi Gregor,

I really like your fix for using a camera; I want to incorporate into my demo, but for some reason when I press ‘Apply’ after having taken/uploaded an image, the image template goes blank instead of showing the photo. This only happens when I put the fix inside a dynamic panel. Any idea why this is and how to fix it?

Thanks!

no idea, accessing the image is a hack to axure and as a hack it is fragile.

Dear Tuomas and Gregor,

The ‘file’ type text file works perfectly when I view my prototype in the browser. But when I use it on Axshare nothing happens? Can’t find anything related to this on the forum. Any solutions?

Kind regards,

Joey

no. neither html nor javascript gives full access over the system functions.
to get full access you need something like a native app providing an interface to the system functions (like phonegap).

Dear Tuomas,

Thanks for your help.
I am also building a prototype in which I would like to launch the camera.
If I use Axure share to the prototype feature on my phone and then clikc the “Choose file” button, nothing happens.
But when I open the link via internet (so the one you posted here), it does work. Do you know a solution?
Or could you post your RP file?

Hope you can help me.

Kind regards,

Alex

:bow::bow: :bow::bow: :bow::bow:
:bow::bow: :bow::bow: :bow::bow:
:bow::bow: :bow::bow: :bow::bow:
:bow::bow: :bow::bow: :bow::bow:

Is there anyway you can upload your rp file for this? I like your example of it asking for permissions instead of the “Choose File” button. I would really appreciate it.

Hi aserd,

Here’s the original RP file of the example Tuomas posted:

FileUpLoad.rp (69.7 KB)

With that said, we noticed that you also mentioned something about the example asking for permissions–could you clarify a bit more about what you mean by this? There doesn’t seem to be anything specific in the file that’s asking for permissions, but we may be able to help you out with what you’re looking to do!

Hey Gregor,

I am trying to work on your androidCam.rp file and I’m trying to get the Choose File button to Say "Open Camera’. I have seen your file in the this posting: Triggering a file upload from an image widget rather than a text box. What I’m trying to do is combine the two together and I am coming up on dead ends. Attached is my file that references what I am trying to accomplish.

Thanks in advance for any thoughts or help!

RP File androidCam_aserd.rp (62.5 KB)

Hi aserd,

Is this something similar to what you’re looking to do?

androidCam_aserd_edited.rp (62.6 KB)

In the file, I added Gregor’s original JS code into the “androidCam_Allie” page’s “OnPageLoad” event, except I replaced the “g” in the code with “cam”. I then renamed the rectangle widget to “cam” and then placed it on top of the text field widget, which I renamed to “text field 1”. This allows the “cam” rectangle widget to cover the text field’s file button while the JS passes any clicks through the rectangle to the text field below.

I hope this helps!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.