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

Describing query #1 in XML

• 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>
						

Displaying query #1 replies in the web page

<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
						

Sending query #1 to the remote networked device

/*
 * 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 )
						

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 );
}
						

Live demo query #2: Get Network Statistic

Describing query #2 in XML

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>
						

Displaying query #2 replies in the web page

<input type="button" id="netstat_update" data-icon="refresh" value="Query Value"/>
						

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 );
    }
}