examples

2 files changed, 39 insertions, 4 deletions

diff --git a/web/index.html b/web/index.html
index fbbbf1c..59e3aeb 100644
--- a/web/index.html
+++ b/web/index.html
@@ -81,25 +81,43 @@ Device history older than two years will automatically be deleted.
 </p>
 
 <p>
-Homie data is written to the database with each [node] as one [field].
+Homie data is written to the database with each node corresponding to one field.
 All of the additional information that is represented within the homie hierarchy is stored as tags.
 </p>
 
 <p>
-EXAMPLE CURL
+The following example will return all of the recorded "temperature" measurements within the last one day using curl.
 </p>
 
+<pre><code>
+curl -G 'mosquitto.chem.wisc.edu:8086/query?pretty=true' --data-urlencode "db=homie" --data-urlencode "q=SELECT \"value\" FROM \"temperature\" WHERE time > now() - 1d"
+
+</code></pre>
+
 <p>
-EXAMPLE PYTHON
+The following example will return all of the recorded "temperature" measurements within the last one day using Python. You will need the <a href="https://influxdb-client.readthedocs.io/">influxdb Python package</a>.
 </p>
 
+<pre><code>
+import influxdb
+
+client = influxdb.InfluxDBClient(host="mosquitto.chem.wisc.edu",
+                                 database="homie")
+
+result = c.query("SELECT value FROM temperature WHERE time > now() - 1d")
+
+</code></pre>
+
 <p>
-RECOMMEND GRAFANA
+We have also set-up a <a href="https://grafana.com/">grafana</a> appliance with this database as a source.
+Check it out at <a href="grafana.chem.wisc.edu">grafana.chem.wisc.edu</a>.
 </p>
 
 <hr>
 
 <p>
+<a href="https://git.chem.wisc.edu/shop/mqtt">source</a>
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
 <a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a>: no copyright
 </p>
 
diff --git a/web/style.css b/web/style.css
index 4e33ceb..d109581 100644
--- a/web/style.css
+++ b/web/style.css
@@ -16,3 +16,20 @@ body {
   text-align: left;
   overflow-y: scroll;
 }
+
+pre {
+  width: 80ch;
+  padding: 15px;
+  margin-left: auto;
+  margin-right: auto;
+  overflow: auto;
+  overflow-y: hidden;
+  font-size: 15.3px;
+  background: #ffffff;
+  border: 1px solid #c5c8c6;
+}
+
+code {
+  background: #ffffff;
+  color: #c82829
+}