Abstract
In this tutorial you will get some examples on how to send data from a website to the Connectino. We already explained how to get your webside onto the Connectino and how to communicate with the Connectino. So the following is an “expansion” to the HTML-Scripts from before.
Requirements
For this tutorial we assume the following:
- You got a Connectino set up as described in our Initial Setup Guide .
- You know how to perform a Connectino Software Update.
- You know how to bring your webside onto the Connectino.
- You know how to basically communicate with the Connectino over the web.
The Script
The following script contains all basic HTML-form-elements and javascript examples on how to send and receive data.
<!DOCTYPE html>
<html>
<head>
<title>Connectino - Custom - Web</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- external style sheet ========================================= -->
<link href="css/index.css" rel="stylesheet" type="text/css">
<link href="css/semantic.min.css" rel="stylesheet" type="text/css">
<!-- external scripts ========================================= -->
<script src="script/jquery.min.js" type="text/Javascript"></script>
<script src="script/semantic.min.js" type="text/Javascript"></script>
<!-- local styles ========================================== -->
<style type="text/css">
</style>
<!-- local scripts ==========================================-->
<script type="text/Javascript">
// Filepath
var _szFileRequest = "/ajax/cfgpars.json?rauth=0x00";
/**********************************************************************
* jquery document ready function
*/
/** \brief Standard jquery function for start of website
* \details -
* \param -
* \retval -
***********************************************************************/
$( document ).ready(function() {
console.log( "ready!" );
/*Call semantic ui elements to be initialized*/
$('.ui.checkbox').checkbox();
$('.ui.dropdown').dropdown();
});
/**********************************************************************
* Set_Button_Value
*/
/** \brief Test function for a set-request on a button
* \details Send a fixed value with a button click to the host
* \param -
* \retval -
***********************************************************************/
function Set_Button_Value()
{
/*Data string which is sent via http to the embedded device*/
var reqData;
/*Get Example parameters*/
/*Command must be get*/
var COMMAND = "send";
/*The module can be variable but in this case we need to send the data
to the binuart module*/
var MODUL = "binuart";
/*In this example we will send a fixed value 'b' for button to the
host-controller */
var DATA = "b";
/*Build the string which is sent*/
/*The JSON.stringify() method converts a value to JSON string */
/*The structure of the request:*/
/* CmdArr: [] -> Is an array which containts the
requested parameters */
reqData = JSON.stringify({CmdArr: [[COMMAND, MODUL, DATA]]});
/*Standard jquery function*/
/*jquery.ajax(url [,settings] )*/
jQuery.ajax('' + _szFileRequest,
{
data: reqData,
dataType: 'json',
contentType: "application/json",
type: 'POST',
success: function(data, textStatus, jqXHR)
{
/*This function is called if the request was successful*/
console.log("Send successful");
},
error: function(jqXHR, textStatus, errorThrown)
{
/*This function is called if an error occurred*/
console.warn("Send error");
}
});
}
/**********************************************************************
* Set_Input_Value
*/
/** \brief Test function for a set-request with a value from a input field
* \details Send a variable string/value from a input field to the host
* \param -
* \retval -
***********************************************************************/
function Set_Input_Value()
{
/*Data string which is sent via http to the embedded device*/
var reqData;
/*Get Example parameters*/
/*Command must be get*/
var COMMAND = "send";
/*The module can be variable but in this case we need to send the data
to the binuart module*/
var MODUL = "binuart";
/*In this example we will send a value form a input field to the
host-controller */
var DATA = $('.myinput').val();
/*Build the string which is sent*/
/*The JSON.stringify() method converts a value to JSON string */
/*The structure of the request:*/
/* CmdArr: [] -> Is an array which containts the requested
parameters
*/
reqData = JSON.stringify({CmdArr: [[COMMAND, MODUL, DATA]]});
/*Standard jquery function*/
/*jquery.ajax(url [,settings] )*/
jQuery.ajax('' + _szFileRequest,
{
data: reqData,
dataType: 'json',
contentType: "application/json",
type: 'POST',
success: function(data, textStatus, jqXHR)
{
/*This function is called if the request was successful*/
console.log("Send successful");
},
error: function(jqXHR, textStatus, errorThrown)
{
/*This function is called if an error occurred*/
console.warn("Send error");
}
});
}
/**********************************************************************
* Set_Checkbox_Value
*/
/** \brief Test function for a set-request with a checkbox
* \details Send a checkbox value with a button click to the host
* \param -
* \retval -
***********************************************************************/
function Set_Checkbox_Value()
{
/*Data string which is sent via http to the embedded device*/
var reqData;
/*Get Example parameters*/
/*Command must be get*/
var COMMAND = "send";
/*The module can be variable but in this case we need to send the data
to the binuart module*/
var MODUL = "binuart";
/*In this example we will send a value form a input field to the
host-controller */
/*A checkbox will be send 'on' or 'off'*/
var DATA = $('.mycheckbox').val();
/*Build the string which is sent*/
/*The JSON.stringify() method converts a value to JSON string */
/*The structure of the request:*/
/* CmdArr: [] -> Is an array which containts the requested
parameters
*/
reqData = JSON.stringify({CmdArr: [[COMMAND, MODUL, DATA]]});
/*Standard jquery function*/
/*jquery.ajax(url [,settings] )*/
jQuery.ajax('' + _szFileRequest,
{
data: reqData,
dataType: 'json',
contentType: "application/json",
type: 'POST',
success: function(data, textStatus, jqXHR)
{
/*This function is called if the request was successful*/
console.log("Send successful");
},
error: function(jqXHR, textStatus, errorThrown)
{
/*This function is called if an error occurred*/
console.warn("Send error");
}
});
}
/**********************************************************************
* Set_Dropdown_Value
*/
/** \brief Test function for a set-request with a checkbox
* \details Send a checkbox value with a button click to the host
* \param -
* \retval -
***********************************************************************/
function Set_Dropdown_Value()
{
/*Data string which is sent via http to the embedded device*/
var reqData;
/*Get Example parameters*/
/*Command must be get*/
var COMMAND = "send";
/*The module can be variable but in this case we need to send the data
to the binuart module*/
var MODUL = "binuart";
/*In this example we will send a value form a input field to the
host-controller */
/*A dropdown will always send the selected value*/
var DATA = $( '.mydropdown' ).val();
/*Build the string which is sent*/
/*The JSON.stringify() method converts a value to JSON string */
/*The structure of the request:*/
/* CmdArr: [] -> Is an array which containts the requested
parameters
*/
reqData = JSON.stringify({CmdArr: [[COMMAND, MODUL, DATA]]});
/*Standard jquery function*/
/*jquery.ajax(url [,settings] )*/
jQuery.ajax('' + _szFileRequest,
{
data: reqData,
dataType: 'json',
contentType: "application/json",
type: 'POST',
success: function(data, textStatus, jqXHR)
{
/*This function is called if the request was successful*/
console.log("Send successful");
},
error: function(jqXHR, textStatus, errorThrown)
{
/*This function is called if an error occurred*/
console.warn("Send error");
}
});
}
/**********************************************************************
* Get_Value
*/
/** \brief Test function to get a value from the host-controller
* \details Send a query to the host controller an request a value
* \param -
* \retval -
***********************************************************************/
function Get_Value()
{
/*Data string which is sent via http to the embedded device*/
var reqData;
/*Get Example parameters*/
/*Command must be get*/
var COMMAND = "query";
/*The module can be variable but in this case we need to send the data
to the binuart module*/
var MODUL = "binuart";
/*In this example we will send a value form a input field to the
host-controller */
/*Query a value by sending a query will a parameter request, ? stands
for a requested parameter*/
var DATA = "?";
/*Build the string which is sent*/
/*The JSON.stringify() method converts a value to JSON string */
/*The structure of the request:*/
/* CmdArr: [] -> Is an array which containts the requested
parameters
*/
reqData = JSON.stringify({CmdArr: [[COMMAND, MODUL, DATA]]});
/*Standard jquery function*/
/*jquery.ajax(url [,settings] )*/
jQuery.ajax('' + _szFileRequest,
{
data: reqData,
dataType: 'json',
contentType: "application/json",
type: 'POST',
success: function(data, textStatus, jqXHR)
{
/*This function is called if the request was successful*/
console.log("Send successful");
/*Parse the answer of the request and print it to the
'myreadvalue' element*/
/*Get the important content from the request
The CmdArr containts the data at position 4, so we have to copy
the data into our variable*/
$( '.myreadvalue').text(data.CmdArr[0][4]);
},
error: function(jqXHR, textStatus, errorThrown)
{
/*This function is called if an error occurred*/
console.warn("Send error");
}
});
}
</script>
</head>
<body class="page">
<div id="header" class="clheader">
<h1 class="ui dividing header">Connectino - Elements - Example</h1>
</div>
<div id="main">
<div class="element_area">
<h3 class="first">Sending a fixed value</h3>
<button class="ui button" onclick=Set_Button_Value()>Send Value</button>
</div>
<div class="ui divider"></div>
<div class="element_area">
<h3 class="first">Sending a value from a input field</h3>
<div class="ui input">
<input class="myinput" type="text" placeholder="Enter value">
</div>
<button class="ui button" onclick=Set_Input_Value()>Send Input Value</button>
</div>
<div class="ui divider"></div>
<div class="element_area">
<h3 class="first">Sending the value of a checkbox</h3>
<div class="ui checkbox">
<input class="mycheckbox" type="checkbox" name="example"
onchange=Set_Checkbox_Value()>
<label>Click me</label>
</div>
</div>
<div class="ui divider"></div>
<div class="element_area">
<h3 class="first">Sending the value of a checkbox</h3>
<div class="ui selection dropdown">
<input class="mydropdown" type="hidden" name="gender"
onchange=Set_Dropdown_Value()>
<i class="dropdown icon"></i>
<div class="default text">Value 1</div>
<div class="menu" >
<div class="item" data-value="1">Value 1</div>
<div class="item" data-value="0">Value 0</div>
</div>
</div>
</div>
<div class="ui divider"></div>
<div class="ui divider"></div>
<div class="element_area">
<h3 class="first">Reading a value</h3>
<span>Result: </span><span class="myreadvalue"></span>
<br>
<br>
<button class="ui button" onclick=Get_Value()>Read Value</button>
</div>
</div>
</body>
</html>
Seperate snippets of this script can be used individually. The essential parts are commented inline, so if you want to know how single parts work just search for the terms in the code.
You can also download this script from our website.
TUTORIALS