House temperature monitor

With surprisingly few problems, I have been able to set up a mesh network with a node that is monitoring the temperature of my house. AND I figured out a way to show it dynamically on a web page:

Read on to see the workflow

The particle that’s serving up the temperature is a Xenon (which I call technetium – I know, this will get complicated, but a chemist simply must name his particles after elements). It has a TMP36 sensor that is read every 20 seconds and published as an event. One of the biggest problems I had during this process was my attempt to write the code remotely while the particle OS was was updated. This left my Xenon in a safe mode state that I couldn’t get out of until I had physical access to the device.

I then followed the webhooks tutorial in order to create a way to store and visualize the temperature data that technetium is collecting. The tutorial was easy to follow except that when the authors use YOUR_API_KEY they mean the value of the API key provided by the recipient of the webhook (in my case, Thingspeak); however, when they write PARTICLE_EVENT_VALUE they mean you should write PARTICLE_EVENT_VALUE. Clear as mud, I say. Oh and there’s a typo as well; there should only be two sets of curly braces, not three, which everyone would know is simply stupid.

I then got a ThingSpeak channel working properly to receive event information (make note that the event name and the channel name should be the same, and case matters). The last step was figuring out how to take the ThingSpeak graphic, which can be obtained by clicking on the button in the image below, and placing that into an iFrame, even though WordPress doesn’t like IFrames anymore.

That callout button sends you to a URL that can be included in an iframe.

I ended up going with Advanced iFrame to solve this problem, although getting it set up was extremely frustrating for me. Every FAQ or tutorial or “start here” style link sent me to absolutely useless information or videos about the benefits of the PRO version or checks to make sure the URL that you want to embed can actually be embedded. Ugh, what a terrible initial experience but I’m glad I stuck with it.

Now, I can add a WordPress shortcode which looks like {advanced_iframe src="" width="75%" height="250"} (changing the curly braces to square brackets) and voila the chart appears, and it dynamically updates, and it makes me happy.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.