Mobile Remote Control
This example shows a simple interface (designed to mobile devices) that allows you to turn on and to turn off the 4 digital outputs supported in the VMCU mode.
The following video shows a working implementation of this example
The following picture shows the prototype used to test this example.
(note that the smartphone is connected through the mobile network (3G) so the system can be controlled from any place around the world).
Javascript Code
To try this example download the following file in you mobile device or computer and execute it. Double click onto the downloaded "html" file in order to run it on your default browser.
Download: NearControl_0v2.rar [1] In order to run this example you should edit it (eg. notepad) and replace the following parameters: var device_id = "NB100xxx"; // You NearBus Device ID var user = "****"; // Your NearBus Web user var pass = "****"; // Your NearBus Web password
<!DOCTYPE html>
<!-- ****************************************************************************************************************************** -->
<!-- * NEARBUS JAVASCRIPT EXAMPLE - www.nearbus.net * -->
<!-- * Description: This example shows a simple interface (designed to mobile device) that allows you to turn on and to turn off * -->
<!-- * the 4 digital outputs supported in the VMCU mode. * -->
<!-- * This code is intended to show you how to control a remote MCU from a JavaSript code running on a Browser. * -->
<!-- * Support: info@nearbus.net * -->
<!-- ****************************************************************************************************************************** -->
<!-- * REVISION HISTORY * -->
<!-- * v0.1 - 09-08-13 - Initial Release * -->
<!-- * v0.2 - 31-10-13 - Upgrade to support nearapi_v05.js * -->
<!-- * * -->
<!-- ****************************************************************************************************************************** -->
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="PAGE" ></script>
<script type='text/javascript' src='http://nearbus.net/downloads/js_apps/nearapi_v05.js'></script>
<script>
// +------------------------------------------------------------------------------+
// | WARNING |
// | Be careful to avoid run more than one scripts simultaneously !!! |
// | Don't forget CLOSE the running script before start a new or modified script. |
// | The NearBus system can run multiple scripts but the system output will be |
// | the mix of all running sessions. |
// +------------------------------------------------------------------------------+
// +--------------------------------------------------------------------+
// | To run this example you should replace the following parameters |
// | device_id Your device ID, or.. devices ID :) |
// | user Your NearBus Web user |
// | pass Your NearBus Web password |
// +--------------------------------------------------------------------+
//////////////////////////////////
// MAIN CONFIGURATION
//////////////////////////////////
var device_id = "NB100xxx";
var user = "***"; // Your NearBus Web user
var pass = "***"; // Your NearBus Web password
var LOOP_DELAY = 500; // Main Loop Delay in ms
var WATCH_DOG = 20; // Watch Dog TTL
var state_log = "R E A D Y";
//////////////////////////////////
// Persistent Variables
//////////////////////////////////
var step_pointer = 5;
var ret = 0;
var my_watch_dog = WATCH_DOG;
var channel_id = 0;
var channel_val = 0;
var button_flag = 0;
function dig_out_on_p0(e) {
channel_id = 0;
channel_val = 1;
button_flag = 1;
}
function dig_out_off_p0(e) {
channel_id = 0;
channel_val = 0;
button_flag = 1;
}
function dig_out_on_p1(e) {
channel_id = 1;
channel_val = 1;
button_flag = 1;
}
function dig_out_off_p1(e) {
channel_id = 1;
channel_val = 0;
button_flag = 1;
}
function dig_out_on_p2(e) {
channel_id = 2;
channel_val = 1;
button_flag = 1;
}
function dig_out_off_p2(e) {
channel_id = 2;
channel_val = 0;
button_flag = 1;
}
function dig_out_on_p3(e) {
channel_id = 3;
channel_val = 1;
button_flag = 1;
}
function dig_out_off_p3(e) {
channel_id = 3;
channel_val = 0;
button_flag = 1;
}
function refreshDisplay() {
$('#field_1').text( state_log );
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Function: Main
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
$(document).ready( function ()
{
setInterval( function()
{
//**************************************************
// WATCH DOG CONTROL
//**************************************************
my_watch_dog--;
if ( my_watch_dog <= 0 )
{
my_watch_dog = WATCH_DOG;
ResetNearAPIjs();
step_pointer = 5;
}
//**************************************************
// ERROR CHECK
//**************************************************
if ( ret == "ERROR" )
{
state_log = "E R R O R";
ResetNearAPIjs();
step_pointer = 5;
}
//**************************************************
// DEVICE DOWN
//**************************************************
if ( ret == "DOWN" )
{
state_log = "D O W N";
ResetNearAPIjs();
step_pointer = 5;
}
refreshDisplay();
switch ( step_pointer )
{
/////////////////////////////////////////////////////////////////////
// [STEP 5] - SYSTEM RESET - TURN OFF HEATER
/////////////////////////////////////////////////////////////////////
case 5:
if( button_flag ) {
state_log = "W A I T . . .";
ret = NearAPIjs( "DIG_OUTPUT", device_id, channel_id, channel_val );
if( ret == "DONE" ) {
my_watch_dog = WATCH_DOG;
button_flag = 0;
state_log = "R E A D Y";
}
}
else {
my_watch_dog = WATCH_DOG;
}
break
}
}, LOOP_DELAY );
} );
</script>
</head>
<body>
<!-- ****************************************************************************************************************************** -->
<!-- * HTML CODE * -->
<!-- ****************************************************************************************************************************** -->
</script>
</head>
<body bgcolor="#000">
<br />
<p><div style="text-align:center; font: bold 50px Arial; color:orange;">NEAR CONTROL</div></p>
<p><div id="field_1" style="text-align:center; font: 30px Arial; color:#00FF00;"> </div></p>
<div style="text-align:center; border:1px solid #111;"><button style="width:700px;height:120px; font: bold 60px Arial; color:#F00;" onclick="dig_out_on_p0()">PIN0 = 1</button></div>
<div style="text-align:center; border:1px solid #111;"><button style="width:700px;height:120px; font: bold 60px Arial; color:#000;" onclick="dig_out_off_p0()">PIN0 = 0</button></div>
<div style="text-align:center; border:1px solid #111;"><button style="width:700px;height:120px; font: bold 60px Arial; color:#F00;" onclick="dig_out_on_p1()">PIN1 = 1</button></div>
<div style="text-align:center; border:1px solid #111;"><button style="width:700px;height:120px; font: bold 60px Arial; color:#000;" onclick="dig_out_off_p1()">PIN1 = 0</button></div>
<div style="text-align:center; border:1px solid #111;"><button style="width:700px;height:120px; font: bold 60px Arial; color:#F00;" onclick="dig_out_on_p2()">PIN2 = 1</button></div>
<div style="text-align:center; border:1px solid #111;"><button style="width:700px;height:120px; font: bold 60px Arial; color:#000;" onclick="dig_out_off_p2()">PIN2 = 0</button></div>
<div style="text-align:center; border:1px solid #111;"><button style="width:700px;height:120px; font: bold 60px Arial; color:#F00;" onclick="dig_out_on_p3()">PIN3 = 1</button></div>
<div style="text-align:center; border:1px solid #111;"><button style="width:700px;height:120px; font: bold 60px Arial; color:#000;" onclick="dig_out_off_p3()">PIN3 = 0</button></div>
</body>
</html>
