Home Carbon Ads Turn On Flashlight using Intel XDK

Turn On Flashlight using Intel XDK

This post is a part 35 of Intel XDK Complete Tutorial post series.

Intel XDK and Cordova doesn’t provide any built in API to toggle flashlight on/off. We need to use Flashlight plugin toggle flashlight in Intel XDK.

Installing Flashlight Plugin

Follow these steps to open remote plugin install box Projects → Select your project → Plugins and Permissions → Third-Party plugins → Get plugin from web. Now enter name as “Flashlight”, Plugin ID as “nl.x-services.plugins.flashlight” and Repo URL as “https://github.com/EddyVerbruggen/Flashlight-PhoneGap-Plugin.git”. Then click Import.

1

Now add this script tag to your source code

    <script src="https://cdn.rawgit.com/EddyVerbruggen/Flashlight-PhoneGap-Plugin/4c8bbd22d15b3866eb417d2ad0833abe89ff416a/www/Flashlight.js"></script>

Flashlight API

Here is the code to toggle flashlight

        function switch_on_off_flash()
        {
            window.plugins.flashlight.available(function(isAvailable) {
              if (isAvailable) {
                  window.plugins.flashlight.toggle(function(){
                    alert("Success");
                  }, function(){
                    alert("Failure");
                  });
              } else {
                alert("Flashlight not available on this device");
              }
            });
        }

Testing

Emulator doesn’t support flashlight emulation. APP Preview doesn’t support installation of plugins. Therefore you need to build the app to test it. Third party plugins don’t work in legacy apps therefore you have to build a cordova hybrid app.

Narayan Prusty
Intel's APP Framework TutorialRecord Microphone Audio using Intel XDK
Comments: 3
  1. 4 years ago

    hello,

    happy new year.
    I need to add button?

    did not work.
    I add plugin and put code in html…white screen

    Blank Cordova Mobile App Project Template (Lite)

    <!-- see http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag -->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <style>
    /* following two viewport lines are equivalent to the meta viewport statement above, needed for Windows */
    /* see http://www.quirksmode.org/blog/archives/2014/05/html5_dev_conf.html and http://dev.w3.org/csswg/css-device-adapt/ */
    @-ms-viewport { width: 100vw ; zoom: 100% ; } @viewport { width: 100vw ; zoom: 100% ; }
    @-ms-viewport { user-zoom: fixed ; } @viewport { user-zoom: fixed ; }
    </style>

    <script src="cordova.js"></script> <!-- phantom library, needed for Cordova api calls, added during build -->
    <script src="js/app.js"></script> <!-- recommended location of your JavaScript code relative to other JS files -->
    <script src="xdk/init-dev.js"></script> <!-- normalizes device and document ready events, see README for details -->

    <script src="https://cdn.rawgit.com/EddyVerbruggen/Flashlight-PhoneGap-Plugin/4c8bbd22d15b3866eb417d2ad0833abe89ff416a/www/Flashlight.js"></script>

    <script>
    function switch_on_off_flash()
    {
    window.plugins.flashlight.available(function(isAvailable) {
    if (isAvailable) {
    window.plugins.flashlight.toggle(function(){
    alert("Success");
    }, function(){
    alert("Failure");
    });
    } else {
    alert("Flashlight not available on this device");
    }
    });
    }

    </script>

    ReplyCancel
  2. Luca
    5 years ago

    Hi the script and flashlight API where i write?in which of the document of the app?

    ReplyCancel
  3. Shahab
    5 years ago

    So, given that I have to include that little external javascript on top of my code, does it mean that the user has to be connected to the internet to turn the flashlight on or off?!

    ReplyCancel

Leave a Reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

5 years ago 3 Comments Cordova
Share this
Related Articles