Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Excerpt

If you are giving a presentation it can be easier to present CommCare using a tool on your computer than on a mobile device with a live deployment.  This is also sometimes useful for testing your application. There are several ways to do this.

...

The CommCareHQ Emulator: When you go to "deploy" on your application you will see an option for "Preview in Emulator."  You must have Java installed and it will take several minutes to load, but will give a good approximation to how the app will look like on a J2ME/Java/NOKIA-style phone.

...

Android Phone Screen Projection to your Computer - harder to install but better for non-English languages and showing screens in a vertical orientation.

...

Table of Contents
minLevel1
maxLevel6
outlinefalse
stylenone
typelist
printabletrue

Android Phone Screen Projection to your Computer

For CommCare apps on android phones, projecting the phone's screen using a computer can be a useful aid in training. Here are the steps on how to project the screen on Windows and Mac. Linux devices might work with the same process, but it has not been tested for those platforms.

Some trainings can be held using the Bluestacks Emulator as described on https://dimagi.atlassian.net/wiki/x/vyfKfw, but the emulator has poor support for languages other than English. It also forces the app to be in Landscape mode. While setting up android screen projection is a longer process, it yields much better results as users see exactly the same screen as their own phones would show.

Windows

A couple of different options are listed, since individual devices or networks may not work with certain options.

MyMobiler

Vysor has stopped working on most machines because of a WebGL issue in Chrome. MyMobiler is an alternative that does the job pretty well. 

  1. Download the PC version here.

  2. Download the Android version here; alternatively search for 'WiFi Keyboard+Screen Capture' by MyMobiler on the Play Store.

  3. Follow the instructions outlined in this page, and you should be good to go!

Wondershare MirrorGo

Another alternate for mirroring you Android phone is Wondershare MirrorGo.

Some of the benefits of Wondershare MirrorGo over other tools are:

  1. You only need to download it on your PC, no installation needed for the Android device. Installation is pretty straightforward but if you face any issue, check out this video for step by step guide.

  2. Works offline and easy to use. The app detects the Android device pretty soon (compared to other similar tools) after connecting.

  3. It is a freeware that offers some of the useful Vysor Pro features in the package. Some of these features like full screen, screen recording etc. are quite helpful during demos.

    NOTE: Wondershare has a time limit of 30 mins per day for mirroring on the free account. I found a lifetime account for Wondershare online. You may use the following details to log in:  login email: giveawayoftheday@wondershare.cn pass: DB644305174FB5300AE75F609D8D984E

Vysor

  1. Add Vysor as an app on Chrome. It's a quick process. (You may need to install universal drivers,  you can find those here: http://www.koushikdutta.com/post/universal-adb-driver )

  2. Connect mobile device with USB debugging on. (To turn on USB debugging, go under Developer Options in Settings. To enable Developer Options, press Build number 7 times - under "About phone" in Settings)

  3. Allow debugging on the popup that comes on the phone. 

  4. Vysor should then start showing the phone screen. 

  5. Vysor lets the user project the screen and also control the phone from the PC.

  • Note: Vysor is not compatible with some devices, such as certain Samsung tablets/phones

    • Known to work with Vysor: Samsung Tab 4 8" tablets

  • VYSOR DEBUGGING TIPS - If you are having trouble getting your device to connect with Vysor, before giving up, try these things:

    • If you are on an Android 6 device or higher, you will need to switch the connection mode between your device and the computer. You can do this by swiping down from the top of your screen when the device is unlocked and connected to the computer, and then clicking on the notification bar that says "USB for charging", and selecting "File transfers" instead of "Charging".

    • Go to Chrome -> Advanced Settings, and then check Hardware Acceleration

AirDroid

  1. Add Airdroid as an app on Chrome.

  2. Install the Airdroid app on your mobile device from the Google Play store.

  3. Open the app on Chrome and your device.

  4. Click on the QR code icon on the mobile device and then scan the QR code in Chrome.

  5. Click on the Screenshot app on Airdroid in Chrome.

  6. When the message pops up on your device asking for permission to share the screen, choose Start Now.

Macintosh

BBQScreen

  1. Setup the mobile: Download the BBQScreen app from Google Play. Costs $4.49

  2. Setup Mac: Download the BBQScreen desktop application from the BBQScreen website: https://screen.bbqdroid.org/  Unless your phone is rooted, once it is connected, you will need to "Start USB Service" and "Connect via USB" for this to work, as well as have debugging enabled on your phone.

Tools for projecting the phone screen (use any one)

1.  Droid@Screen software

  1. Droid@Screen is a tool that will show the screen of your phone, once all previous steps have been completed (i.e. drivers installed, usb debugging enabled, etc).

  2. Download latest version of Droid@Screen, file size is around than 1.9 MB. http://droid-at-screen.org/download.html

  3. Open the downloaded file and set ADB path. On the test sytem, the path looked like this: AppData\Local\Android\android-sdk\platform-tools\adb.exe. 
    You can search for platform-tools folder using the file explorer (accessed when you hit the "..." button) and use that path e.g. C:\Users\Stella\AppData\Local\Android\android-sdk\platform-tools\adb.exe

  4. Whenever you want to project the device, start Droid@Screen (using the same downloaded file) and plug in your device. Droid@Screen will automatically start showing the screen. 

  5. Your computer screen can then be projected on a bigger screen using a projector.

2. AndroidScreenCast software 

Warning: AndroidScreenCast needs internet connectivity to start because it downloads the latest application from Google code base every time it starts. If you don't have internet connectivity, you will get an error saying 'Unable to Launch Application'.  If you want an application that works in offline setting, try the 'Android-Screen-Monitor-(ASM)' application mentioned further below.

  1. If Droid@Screen doesn't work, which can happen in some cases, another tool called AndroidScreenCast can be used. Both tools do the same job.

  2. Download AndroidScreenCast (.jnlp file) from: http://androidscreencast.googlecode.com/svn/trunk/AndroidScreencast/dist/androidscreencast.jnlp

  3. Change Java security settings on your computer (one time process)

    1. Click on Start -> type 'configure java' in the search box.

    2. 'Configure Java' should show up in results, click on that.

    3. Click on Security tab -> reduce Security Level to Medium.

    4. Save the settings by hitting 'Ok'.

  4. Connect your phone to computer using usb cable (also double check that USB debugging is enabled on the phone, as mentioned in previous steps).

  5. You need to first run the 'adb devices' (needs to be done every time you connect your phone via usb). 

    1. Open command prompt

    2. Navigate to the folder containing adb.exe and type 'adb devices' then enter. Typing the full path to adb file also works, you don't need to explicitly navigate to adb folder in that case. eg "C:\Program Files (x86)\Android\android-sdk\platform-tools\adb.exe" devices

    3. The command lists all the devices attached to your computer. Make sure your phone is listed in the results. It should show some id of your phone as status as 'device'. Below is a sample screen shot.

  6. Start AndroidScreenCast by double clicking on the 'androidscreencast.jnlp' file. Ignore any security warnings given by Java. You should see the screen of your phone!

  7. You can then connect your laptop to a projector for doing a demo or training or whatever.

3. Android-Screen-Monitor-(ASM)

  1. Download from: http://dmzilla.com/files/display-android-on-windows-pc/%5bDMZilla%5d-Android-Screen-Monitor-(ASM).jar

  2. Follow instructions here (especially Step 5): http://dmzilla.com/2014/07/21/how-to-display-or-mirror-an-android-device-screen-on-pc-no-root/

Demo CommCare for Android on your Computer

Projecting to a computer from an Android mobile device (phone or tablet) can be useful when demonstrating CommCare applications or training others. The following tools can be downloaded on multiple devices and support several operating systems. Note: Installation may vary with device versions. 

Bluestacks Emulator

...

Bluestacks is an emulator for Windows.  

To install BlueStacks on a computer: 

  1. Open a browser 

  2. Navigate to www.bluestacks.com  

  3. Click the Download BlueStacks for Windows button  

📖 Learn more about demonstrating CommCare apps on BlueStacks  

 Note: CommCare applications will default to landscape mode as it projects the phone's display to a computer. 

...

 

Status
titleUnknown Attachment

MirrorGo Andoid Recorder is built for gamers but ideal for projection with an option for recording and display in HD.  

 To install MirrorGo Android Recorder on a computer:  

  1. Open a browser 

  2. Navigate to https://drfone.wondershare.com/android-mirror.html  

  3. Click Try it Free to download the trial version or Buy Now 

Note: Projection is limited to thirty minutes per day when using a free account.  

To install MirrorGo on a mobile device: 

  1. Access the Google Play store on an Android device 

  2. Search for MirrorGo 

  3. Click Install 

Vysor

...

Vysor has all the capabilities of a typical projection application along with the ability to share a screen with others to receive remote assistance. Vysor Pro is available for download with a subscription fee. 

Note: This application contains ads. Installation of universal drivers (see carrier support page) and USB Debugging is required. 

To enable USB debugging on a mobile device: 

  1. Navigate to the Settings menu 

  2. Select About phone or tablet 

  3. Tap the Build number option seven times features. 

    Note: Vysor Pro is also available for purchase of subscription and includes more advanced 

  4. Select Developer Options

  5. Click the checkbox or slide the selector for USB debugging 

To install Vysor on a computer: 

  1. Open a browser 

  2. Navigate to http://www.vysor.io/   

  3. Click the Download button 

    Note: Vysor Pro is also available for purchase of subscription and includes more advanced features. 

To install Vysor on a mobile device: 

  1. Access the Google Play store on an Android device 

  2. Search for Vysor 

  3. Click Install 

 

AirDroid

...

AirDroid is supported on multiple operating systems and mobile devices.  

To install AirDroid on a computer: 

  1. Navigate to www.airdroid.com  

  2. Scroll to the Get AirDroid section of the site 

  3. Click the icon for the operating system you are using 

  4. Install from the store of your choosing 

To install AirDroid on a mobile device: 

  1. Access the Google Play store on your Android device 

  2. Search for AirDroid 

  3. Click Install 

    Note: AirDroid directs users to navigate to a web address on a computer after the application is launched. This will require a WIFI connection to function properly. 

BBQ Screen

...

BBQScreen allows Android devices to project a screen along with playing audio. It is available for download after purchase and is ideal for rooted devices and can be run on unrooted devices with more advanced installation.

📖 Review the Getting Started guide (rooted and unrooted) and FAQs prior to installation.

To enable USB debugging:

  1. Navigate to the Settings menu

  2. Select About phone or tablet

  3. Tap the Build number option seven times
    Note: A notification will display that Developer Options are enabled.

  4. Select Developer Options

  5. Click the check box or slide the selector for USB debugging

📖 Learn more about USB Debugging.

To install BBQScreen on a mobile device:

  1. Access the Google Play store on your Android device

  2. Search for BBQScreen

  3. Click Install

Note: A USB connection is required for unrooted devices.

Droid@Screen

...

Droid@Screen also projects Android devices via a USB connection. USB Debugging and universal driver installation (see carrier web page) is required.

To enable USB debugging:

...

Navigate to the Settings menu

...

Select About phone or tablet

...

Select Developer Options

...

Click the check box or slide the selector for USB debugging

To install Droid@Screen on a computer:

  1. Navigate to http://droid-at-screen.org/
    📖 Review complete installation instructions.

  2. Click the Download button anywhere on the site

  3. Click the Download/1.2 Beta link to install

Android SDK Tools

*Developer option

Downloading SDK tools provides access to an emulator for screen projection.
Note: A strong internet connection is required for download. Ensure that all prompts are followed for proper installation.

To download SDK tools on a computer:

  1. Open a web browser

  2. Navigate to https://developer.android.com/studio/index.html#download

  3. Scroll to the Get Just the Command Line Tools section at the bottom of the site

  4. Click on the tools package link to begin download for your operating system

  5. Follow system prompts to complete the install

...

The easiest way to do this is using the App Preview on CommCareHQ

Using the CommCare App Preview

From the form builder on CommCareHQ, you can access the App Preview, which emulates how your CommCare application would appear on a typical Android device, by clicking on the far right side panel. Once opened, you can toggle between “phone” and “tablet” displays by clicking the ‘device’ icon located on the bottom right.

...

Click the “refresh” button on the bottom center to ensure that the App Preview reflects all of the changes that have been made to the application in the form builder.

In the App Preview, you can “Log In As” different mobile users to demonstrate how the form access and user experience might differ depending on which of your users is accessing the app (see Mobile Worker management).

...

In the “Settings” of the App Preview, you can change the application language (if the application has multiple languages) and the format in which the questions are displayed (one question per screen, or the full form per screen).

...

The App Preview can be navigated just like a CommCare application, including case management. Data collected in the App Preview will be saved as [Web User] data and will not appear as Project Data when preparing exports or reports. 

For CommCareHQ Users with Web Apps enabled (available on Advanced subscriptions), applications can also be demoed and tested there.

...