Displaying the Django data

The project to record and view temperature readings from Samsung SmartThings is almost done. In the last post, we saw how to get our data from SmartThings and into a database via Django.

Now we need to read and display it, and it's literally only a few lines of code.

Let's add two more views to our views.py file for the temperature app:
def index(request):

  sensors = Sensor.objects.all()
  return render(request, 
                'tempindex.html', 
                {'sensors': sensors})

def show_temperatures(request, sensor=0):

  temperatures = Reading.objects.filter \
                (sensor_id = sensor).order_by('-time')
  return render(request, 
               'tempreadings.html', 
               {'temperatures': temperatures})
The first is the index page which will just list our sensors, and the second is the page that will show the readings for a sensor based on the id passed in as a parameter. We'll return the readings in reverse order to get the most recent first.

We need to hook these up to URLs in our urls.py file:
urlpatterns = [
  url(r'^temperature/api/record/$', 
          views.record_temperature, 
          name='temperature_record'),
  url(r'^temperature/$', 
          views.index, name='temperature'),
  url(r'^temperature/(?P[0-9]+)/$', 
          views.show_temperatures, 
          name='show_temperatures')
]
The first pattern was the one we created to receive data.

The second is the default - if we request the <servername>/temperature/ url, Django will call views.index to show sensor list.

The last one looks for a number as the last part of the URL, uses that as the "sensor" parameter and passes that to views.temperature -for example, <servername>/temperature/1 will get the readings for the sensor with ID 1.

Finally we need to define the two templates.

tempindex.html just displays the sensors as a list: 
{% extends "tempbase.html" %}
{% block contents %}
<ul>
{% for sensor in sensors %}
<li>
<a href="{% url 'temperature:show_temperatures'sensor.id %}">
{{ sensor.name }}</a>
</li>
{% endfor %}
</ul>
{% endblock %}
tempreadings.html  shows a table of readings for an individual sensor:
{% extends "tempbase.html" %}
{% block contents %}
<table>
<thead>
<tr>
<th>Sensor</th>
<th>Time</th>
<th>Temperature</th>
<tr>
</thead>
<tbody>
<tr>
{% for temperature in temperatures %}
<tr>
<td>{{ temperature.sensor.name }}</td>
<td>{{ temperature.time }}</td>
<td>{{ temperature.value }}</td>
{% endfor %}
</tr>
</tbody>
</table>
{% endblock %}
Both are extending tempbase.html. This is where we'll start and end the page and later on add links to stylesheets. For now, let's keep it minimal:
<html>
<body>
{% block contents %}{% endblock %}
</body>
</html>
All it defines is the contents block that we fill in through our individual page templates above.

So what does that give us when we go to the resulting index page:


If we look at the source for that, we can see that it's built the URLs for the individual sensors: 
<html>  
<body>
<ul>
<li>
<a href="/temperature/2/">Front Door</a>
</li>
<li>
<a href="/temperature/5/">Bedroom</a>
</li>
<li>
<a href="/temperature/6/">Back Door</a>
</li>
<li>
<a href="/temperature/7/">Test</a>
</li>
</ul>
</body>
</html>
If we click on a sensor, we get the readings:


The next steps will be to tidy up our code, add in some error handling and authentication, improve the website display and possibly extend it to handle other types of ST event. We also need to consider pagination for larger data sets and whether we need some archiving in place. It would also be great to show a graph of the temperatures.

We might even want to take this proof of concept and just use the ideas to build something new. This has just been an experiment to show it can be done.

That's going to be my approach. I'm going to work on something a little more comprehensive that will form the dashboard for all of my home automations. The value of this work is that I now know that it's possible!

Labels: , ,