Intel XDK HTML5 + Cordova Adjust Brightness - html

Question

I'm having trouble adjusting the brightness in Intel XDK HTML5 + Cordova. I have imported a phonegap/cordova plugin # https://github.com/fiscal-cliff/phonegap-plugin-brightness but it still will not do anything.
Any advice would be greatly apperciated!
Here is my code:
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="xdk/init-dev.js"></script>
<script type="application/javascript" src="lib/jquery.min.js"></script>
<script type="application/javascript" src="jqm/jquery.mobile-min.js" data-ver="0"></script>
<script type="application/javascript" src="js/app.js"></script>
<script type="application/javascript" src="js/init-app.js"></script>
<link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/colorpicker.js"></script>
<script type="text/javascript" src="js/eye.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/layout.js?ver=1.0.2"></script>
<script type="application/javascript" src="sidebar/js/hammer.js"></script>
<script type="application/javascript" src="sidebar/js/jquery.hammer.js"></script>
<script type="application/javascript" src="sidebar/js/swipe-hammer.js"></script>
<script type="application/javascript" src="sidebar/js/sidebar.js"></script>
<script type="application/javascript" src="js/index_user_scripts.js"></script>
<script type="application/javascript" src="xdk/ad/jqm_subpage.js"></script>
<script type="application/javascript">
document.addEventListener('deviceready', onDeviceReady);
function onDeviceReady() {
window.brightness = cordova.require("cordova.plugin.Brightness.Brightness");
}
function setBrightness(value) {
brightness.setBrightness(value, win, fail);
alert(value);
}
function getBrightness() {
brightness.getBrightness( win, fail);
alert(brightness.getBrightness( win, fail));
}
function win(status) {
alert('Message: ' + status);
}
function fail(status) {
alert('Error: ' + status);
}
getBrightness();
</script>
<div class="upage-outer">
<div class="upage-content" id="page_54_58">
<a class="widget uib_w_4 d-margins settings-button" data-uib="jquery_mobile/button" data-ver="0" data-role="button" data-icon="gear" data-iconpos="notext" id="settings_button">Settings Button</a>
</div>
<div class="inner-element uib_w_3 uib_sidebar leftbar bar-bg thumb-bg bar-gutter" data-uib="layout/left_sidebar" data-ver="1" data-anim="{'style':'overlap', 'v':200, 'side':'left', 'dur':200}">
<div class="sidebar-content content-area vertical-col">
<div class="widget uib_w_1 no_wrap no_swipe-x with-label d-margins brightness" data-uib="jquery_mobile/slider" data-ver="0">
<label class="narrow-control label-inline"><i class="fa fa-adjust font-icons"> </i>
</label>
<div class="wide-control">
<input type="range" value="50" min="0" max="100" step="1" name="brightness" style="display:none;" onchange="setBrightness(this.value)" data-highlight="true">
</div>
</div>
<div class="table-thing with-label widget uib_w_2 d-margins screencolor" data-uib="jquery_mobile/input" data-ver="0">
<label class="narrow-control"><i class="fa fa-eyedropper font-icons"> Screen Color</i>
</label>
<input class="wide-control" type="hidden" name="screencolor" id="screencolor">
<p id="colorpickerHolder"></p>
</div>
</div>
</div>
</div>
</div>
<div class="upage vertical-col left" id="settings" data-role="page">
<div class="upage-outer">
<div class="upage-content content-area vertical-col left" id="page_69_80">
</div>
</div>
</div>

Answer 1

You are calling getBrightness(); before the device ready event fires. At this point the cordova plugins might not be loaded. Also, you are referencing the brightness on the window variable that is set up during the deviceready event.
The quick fix is to move your getBrightness() call up into the onDeviceReady() function.
function onDeviceReady() {
window.brightness = cordova.require("cordova.plugin.Brightness.Brightness");
getBrightness();
}
Now we are calling the method after cordova has setup the plugins. Another approach you could take is wrapping each plugin call in a deviceready handler, or scoping your functions to a function called on device ready.