Real time embedded FreeRTOS RSS feed 
Real time embedded FreeRTOS mailing list 
Homepage FreeRTOS+ Products FreeRTOS Labs Integration Services Contact / Enquiries

Creating FreeRTOS+Nabto User Interfaces
Part 2: Worked Examples


<<< Previous: Creating User Interfaces Part 1 - The web content files

Part 1 of the FreeRTOS+Nabto user interface guide described the XML, Javascript and web content files that together make up a web based FreeRTOS+Nabto user interface, and describe the queries that are understood by the remote FreeRTOS+Nabto device. This page provides an XML and Javascript implementation for two of the queries used in the live demo.


Live demo query #1: Get RTOS tick count

In the live demo query ID #1 is used to obtain the RTOS tick count.

Query ID #1: Get RTOS tick count
Request Parameters:  None 
Response Parameters:  The RTOS tick count value, transmitted as a 32-bit unsigned integer 


Describing query #1 in XML

The very short and simple XML code that describes query #1 is shown in Listing 1. Notes:
  • Each query type is described between <query></query> tags.

    • The query's id="1" setting states that the query described in listing 1 is the query with unique id #1.

    • The query's name="rtos_tick.json" setting assigns the name rtos_tick.json to the query. The name is used to reference the query from Javascript code.

  • Any request parameters are described between the <request></request> tags. In this case there are no request parameters, so the section is empty.

  • Any response parameters are described between the <response></response> tags. Listing #1 describes a single response parameter.

  • Each parameter is described by a <parameter> tag.

    • The parameter's name="tick_value" setting asignes the name tick_value to the parameter. The name is used to reference the parameter from Javascript code.

    • The parameter's type="uint32" setting describes the data type as being uint32, meaning the parameter is an unsigned 32-bit integer. The full XML schema is available online.



<!-- The bullet points directly above describe this XML code -->
<query name="rtos_tick.json" description="Get RTOS Tick Count" id="1">
  <request>
  </request>
  <response format="json">
    <parameter name="tick_value" type="uint32"/>
  </response>
</query>
						
Listing 1: XML code that describes query #1


Displaying query #1 replies in the web page

The user interface for the live demo displays the received RTOS tick count in standard a HTML <span> tag. The <span> tag is assigned the id tick_count_span. The id is used to reference the contents of the <span> from Javascript code.



<h3>
    1: Live data
</h3>
This incrementing number <b><span id="tick_count_span"> 0 </span></b> is the FreeRTOS
tick count.  It equals the number of RTOS ticks that have passed
						
Listing 2: An extract of the HTML page showing the <span> tag


Sending query #1 to the remote networked device

The Javascript helper function queryDevice() is provided to handle the AJAX calls.



/*
 * Parameters:
 * request  The query name, and the value of any request parameters. Request
 *          parameters are passed using standard URL notation (in name=value
 *          pairs following a ?).
 * action   A function to execute when a response to the query has been received.
 */
function queryDevice( request, action )
						
Listing 3: The Javascript queryDevice() prototype



It can be seen from Listing 1, listing 2 and listing 3 that the tick count value can be updated by calling queryDevice() with:

  1. The first parameter set to "rtos_tick.json?". As described in the comments in listing 3, query parameters follow a '?' in standard URL format. In this case there are no query parameters, so nothing follows the '?'.

  2. The second parameter set to a function that updates the text in the tick_count_span <span> tag with the value of the received tick_value response parameter.

Listing 4 is a worked example.



/* Writes the value received in the tick_value response parameter into the span
with id tick_count_span. */
function handleTickReply( response )
{
    if( response[ "tick_value" ] != null )
    {
        $( "#tick_count_span" ).text( response[ "tick_value" ] );
    }
}

/* The RTOS tick count is updated when queryTick() is called. */
function queryTick()
{
    /* Send the rtos_tick.json query, and call handleTickReply() when the response
    is received. */
    queryDevice( "rtos_tick.json?", handleTickReply );
}
						
Listing 4: Javascript to update the RTOS tick count in the user interface



Live demo query #2: Get Network Statistic

In the live demo query ID #2 is used to obtain one of three different network statistics.

Query ID #2: Get network statistic
Request Parameters:  The ID of the statistic being queried, received as a 32-bit unsigned integer 
Response Parameters:  The value of the network statistic that corresponds to the ID received as the request parameter, transmitted as a 32-bit unsigned integer 


Describing query #2 in XML

The very short and simple XML code that describes query #2 is shown in Listing 5. The bullet point notes above listing 1 are also relevant to listing 5. The main difference between the two listings is the inclusion of a query parameter in listing #5.

From listing 5 it can be seen that:

  • The query name is network_stat.json.

  • The XML is describing the query that has unique id #2.

  • The name of the request parameter is stat_id.

  • The name of the response parameter is stat_value.



<!-- See the bullet point notes above. -->
<query name="network_stats.json" description="Get network statistic" id="2">
  <request>
    <parameter name="stat_id" type="uint32"/>
  </request>
  <response format="json">
    <parameter name="stat_value" type="uint32"/>
  </response>
</query>
						
Listing 5: XML code that describes query #2


Displaying query #2 replies in the web page

The user interface for the live demo displays the received network statistic as text on a standard HTML input button. The button is assigned the id netstat_update. The id is used to reference the button from Javascript code.



<input type="button" id="netstat_update" data-icon="refresh" value="Query Value"/>
						
Listing 6: An extract of the HTML page showing the button definition



It can be seen from Listing 3, listing 5 and listing 6 that the network statistic specified by the selected radio button can be updated by calling queryDevice() with:

  1. The first parameter set to "network_stats.json?stat_id=x", where 'x' is the ID of the selected radio button (0, 1 or 2).

  2. The second parameter set to a function that updates the text on the netstat_update input button with the value of the received stat_value response parameter.

Listing 7 is a worked example.



/* Writes the value received in the stat_value response parameter onto the
input button that has id netstat_update. */
function handleNetStatReply( response )
{
    if( response[ "stat_value" ] != null ) 
    {
        /* Write "Stat value is: nnn" to the button. */
        $("#netstat_update").val( "Stat value is: " + response[ "stat_value" ] );
        $("#netstat_update").button( "refresh" );
    }
}

/* The function to call to send the Get Network Statistic query, and handle the
query's response. */
function queryNetstat(input) 
{
var stat_id;

    /* Get the ID of the selected radio button. */
    stat_id = getSelectedRadioButton();

    if( stat_id >= 0 )
    {
        /* Add the id of the selected radio button to the query, so the query
        is passed in the form "network_stats.json?stat_id=n", where n is the
        value of stat_id. */
        queryDevice( "network_stats.json?stat_id=" + stat_id, handleNetStatReply );
    }
}
						
Listing 7: Javascript to update the text on the input button with the value of the queried network statistic











[ Back to the top ]    [ About FreeRTOS ]    [ FreeRTOS+ Sitemap ]    [ Main FreeRTOS Sitemap ]    [ ]


Copyright (C) 2004-2010 Richard Barry. Copyright (C) 2010-2016 Real Time Engineers Ltd.
Any and all data, files, source code, html content and documentation included in the FreeRTOSTM distribution or available on this site are the exclusive property of Real Time Engineers Ltd.. See the files license.txt (included in the distribution) and this copyright notice for more information. FreeRTOSTM and FreeRTOS.orgTM are trade marks of Real Time Engineers Ltd.