Reading Spark Variables with Your Own HTML File

Tutorials
63

Hi @Jan_dM

I’m glad the technique worked for you and it sounds great that you can mostly take advantage of the long strings as variables.

There is no rate-limiting mechanism built in to Particle variables that I know of, but I’m not surprised that there are practical limits to how much back to back communication you can do. Don’t forget that every time your HTML reads a Particle variable, it is going from browser to Particle server to device and back. I would think that the last link of that chain, the device itself, is the rate determining step since the cloud will only issue one request at a time, so any work you can do to improve the “loop time” on your device would likely improve things.

Another limiting factor is how long it takes your device to get message to/from the Particle cloud. I did some experiments recording times in the distant past and found that my devices (in the Boston area in the USA) see about 140ms of latency for each message. I did these measurements before the Particle cloud was scaled up to the extent it is now, so the exact number is likely different today, but the idea is that if it takes about 140ms up to the cloud and the same back down, you cannot do back-to-back transactions any faster that about 280ms or about 3.6 per second. I’m sure these numbers are not correct for the today’s cloud, but doing similar measurements at your location might give you confidence in your delay values.

64

Thanks for your reply BKO!
A few additional questions/remarks:

  1. What is likely to happen when you pushing “pulling data” from the device at a too high rate? Will this disturbe somehow the data-processing within the device or within the cloud communication?Will it just stop communicating, or may the data get corrupted (or both). And is there a way that the Device might monitor/signal that?
  2. I observed that Particle console reports something that is called “round-trip time” (in the window Last Vitals), but I couldn’t find a suitable definition of that figure. Would that be the time to execute an entire back-to-back transaction (similar to the 280msec in your reaction)???
    If so: is there a way to monitor that in a Particle Variable? In that case you might use that variable in your HTML page to optimize the “pulling rate” in such a way that this is always a safe rate.

I’d apprecate your comment!

65

One thing to keep in mind is that without SYSTEM_THREAD(ENABLED) only one variable request will be serviced at any iteration of loop. So when you request more frequently than the device can service the requests you’ll potentially overflow the request queue.

1 Like
66

Thanks for the addition ScruffR.

My main concern is: is there a way to:
-either prevent the request queue from getting overflown (for instance by monitoring the back-to-back transition time and adaptng the request rate to that (with a safe margin) In that respect: what is “round-trip time” and is there a way to read that figure as another Particle Variable?

-or reduce the “damage” whenever an overflow occurs anyhow (will data be corrupted or will the connection breakdown and then somehow restore autonomously, or something?)

67

Hi @Jan_dM

My experience is that when you try to “pull” variables at too high a rate, you mostly miss data. You can also overflow the request queue in the device, weird things can happen since the queue is a circular buffer in memory and I have seen older data partially replayed once or twice. The connection either self-heals or the device reboots in my experience.

I don’t know what “round-trip time” is but it sounds like a the metric that I measured. I don’t know any more about it than you do. It was such a long enough ago that I’m not sure how I measured this time, but at that time I did have Wireshark setup on a separate laptop to listen in on packets from my devices, so I think that’s how I got that number and that would be a good way to measure it today. It will differ for everyone depending on the number of intermediate routing steps to and from the cloud.

@ScruffR s point about loop iterations and using system threads is exactly what I was trying say about optimizing your “loop time” only said clearer.

1 Like
68

Hi bko,
For your information: I’ve found the Particle definition of Round-Trip time; see: Introducing expanded Remote Diagnostics with Fleet Health and Enhanced Vitals
So:

  • Round-Trip time : the amount of time it takes for a device to successfully respond to a message sent by the Particle Device Cloud.
1 Like
69

Hi BKO,
I followed your suggestion to put the HTML file on Dropbox. That works perfect as long as I open the file from the Dropbox folder on my computer.
However, when trying to open the file from the Dropbox app on my iPhone, I can open it, but it doesn’t show the data at all. I only see the html page layout.
Do you have any idea what I’ve missed?

70

I just tried a few of the HTML files from Dropbox on my iPhone and they work for me. I do name them xxx.html, not sure if the exact file extension matters.

One other thing that has tripped some people up is that the jQuery library I linked to has gotten very stale in the intervening almost-seven years, so don’t use 1.3.2 and use the newest one instead.

71

Hi,
I have a lot of HTML files to control my things and all was perfect as long as I run IOS 12... on my iPhone. I just save HTML as Note on my iPhone and run them by just "click" That was super easy and personally bether than any app. But things changed for some reason I decided to update the software on my iPhone to the newest one IOS 14..., My bad, either Apple changed again some of their policy either they scr...up something as HTML files do not work any more from Notes as you mentioned:

That's sad but I found some work around, namely HTML viewer from AppStore is for free and has ability to open HTML which are saved on iPhone and also from Google Drive, iCloud Drive etc. The app has even console option :slight_smile:

72

I have switched all of the things I used to do with Particle cloud on my phone using Notes or Dropbox etc. to iOS Shortcuts. You can make GET and POST requests easily and have results on screen or spoken and even invoke the shortcut with Siri if you want. There’s a good thread here in the forum on how to set it up, but is it pretty easy.

73

Thank you that was very helpfull.
There are others doing more or less the same (a.o. WiFiHD), but HTML viewer is less cumbersome, especially when saving the files to OneDrive: just select your OneDrive and the relevant folder, that’s all!
For DropBox and GoogleDrive you have to put things in Public folder + authorisation etc, which is less straight forward.

74

I’m glad that I could help :slight_smile: but the static HTML is nothing comparing to Siri shortcuts as mentioned by @bko I’m not sure where I was :see_no_evil: since shortcuts are in place for a long time but I completly neglected this huge possibility here is a quick toturial how simple shortcust are but you can achieve a lot more ! belong with scriptable app (almost pure JS) wchich can be used Siri you can in les than a hour start talking to Siri to do the things for you.
for example: I modyfy a little the orginal scriptable script from the Tutorial above and I get my temp and huminidty as displayed text and Siri is reading the valuse for me ! My JSON from var looks like this:

{"MQ2":3.24,"humidity":49.91,"pressure_hPa":1007.89,"temperature_c":17.51,"altitude_ft":3848.65,"altitude_m":1173.06}

and i distinguish just temp and huminidty (whit scriptable app) like this:

let url = "https://api.particle.io/v1/devices/YOUR_DEVICE_ID/YOUR_VAR_NAME?access_token=YOUR_ACCESS_TOKEN"
let req = new Request(url)
let json = await req.loadJSON()
let Temperature = JSON.parse(json.result).temperature_c
let humidity = JSON.parse(json.result).humidity
let OutputTxt = "The temperature is " + Temperature + "°C" + " and humidity is " + humidity + "%"
QuickLook.present(OutputTxt)
Speech.speak(OutputTxt)
1 Like
75

I have another question related to this topic of reading Particle Variables into an HTML file.
With applying BKO’s tutorial this all goes well until so far, but now I wanted to add a proxy and I cannot get it done.
I am not very familiar with php and JSON, but with the help of other documents in this comunity I managed to develop a proxy script that seems to work fine (see below), but somehow I cannot get the data into my HTML file.

Can somebody help me please?

Here is what I did:
I have a Photon application in which I have a Particle.variable called “Status”.
My HTML page is rather basic and this works fine:

Waiting for data...
<script> 
    setInterval(function() 
    {      
    getStatus();
    }, 300); 
</script>

Next I wrote a proxy, called that proxyWF.php and I uploaded that to my server.
I thought that all I had to do was to replace the URL in the above HTML code by a new URL = ‘https://www.mypersonalserver.nl/proxyWF.php’ and that would be it…
But: not!

You would expect that I might have made mistakes in writing the proxy.
So tested it in this way:
When I read the URL https://www.mypersonalserver.nl/proxyWF.php in a browser, I received the fllowing response: {“cmd”:“VarReturn”,“name”:“Status”,“result”:“5,K,7,+,-,H,D,P”,“coreInfo”:{“last_heard”:“2021-02-02T11:11:04.616Z”,“connected”:true,“last_handshake_at”:“2021-02-02T11:05:45.995Z”,“deviceID”:“xxxxx”,“product_id”:6}}

This is exact the same response that I got when I read the other URL into the browser (https://api.particle.io/v1/devices/’+ deviceID + ‘/Status/?access_token=’ + accessToken)
So my conclusion was that there is nothing wrong with that proxy as both URLs give exactly the same response.
Nevertheless: in the HTML page I do get the right response when applying the last URL (https://api.particle.io/v1… etc,) and when applying the other URL (https://www.mypersonalserver.nl/proxyWF.php) the HTML page only shows “Waiting for data…”

What did I do wrong?

Anyone’s help is appreciated!