The final stage of the Internet of Things subtask involves utilizing the works completed in the two previous tasks which involved gathering and then storing temperature data. The third part involves finding a method of displaying the data in a meaningful manner. Now that the data has been processed properly and is being inserted into a database in JSON format, we are able to manipulate this however we wish. It is suggested that jQuery Mobile is investigated for this section. jQuery Mobile is a front-end mobile first framework written in JavaScript by the jQuery development team. jQuery Mobile is good because it allows the developer to develop single applications which are likely to port very well to all screen sizes. As with most frameworks, jQuery Mobile is a mobile-first framework which means that it is optimised to work on mobile but also works on wider resolution screens too. Having minimal experience with jQuery mobile is not a problem if developers are at least slightly familiar with jQuery, it makes building applications intuitive and the documentation available online is very informative. Implementing jQuery onto a website is as easy as including the jQuery CND hosted files into the head of a document.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
Some of the attractive aspects of jQuery mobile include its cross-platform compatibility, jQuery works on all major systems and works especially well on mobile devices, as per the name. jQuery includes the optional integration of an Ajax navigation system which brings with it many interesting features such as transitions, and touch events.
In order to get the last ten temperature readings, an SQL query was devised which would select the last ten items in the table as shown below:
SELECT * FROM electircimp ORDER BY readingID DESC LIMIT 10
From here the returned data was placed into an array which can then be used later for displaying the data in a table format. With jQuery Mobile all content must be within the following div:<div role="main" class="ui-content">. Within this section, the data will be displayed in an appropriate manner. Using jQuery Mobile and php the table can be created in the following manner:
<?php for ($i = 0; $i <= sizeof($rows); $i++) { $decoded = json_decode($rows[$i]['data']); echo "<tr>"; print_r('<th scope="row">'.$rows[$i]['readingID'].'</th>'); print_r("<td>".$decoded->device."</td>"); print_r("<td>".$decoded->internal."</td>"); print_r("<td>".$decoded->external."</td>"); print_r("<td>".$rows[$i]['readingTime']."</td>"); echo "</tr>"; } ?>
This will ensure that all 10 of the selected values are accounted for in the table. Attributes can be appended to this table to ensure that the table remains responsive and has the ability to “reflow” in any given environment. This is important because web applications should be accessible on both mobile and desktop systems. This is specified in the table tag:
<table data-role="table" id="temperature-table" data-mode="reflow" class="ui-responsive">
word count: 405