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> Listing 1: XML code that describes query #1

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 Listing 2: An extract of the HTML page showing the <span> tag

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

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> Listing 5: XML code that describes query #2

Displaying query #2 replies in the web page

<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