This demo builds further on the code explained in the Particle Photon RGB Cloud Remote Control article. So it might be a good idea to read that first.
The idea is to run a small webserver on the Photon. Unfortunately there isn’t yet an HTTP server available in the Particle API. Maybe it will come a the near future, because WICED (the Broadcom SDK for the microchip on the Particle Photon) implements a HTTP server (Adafruit implemented this HTTP-API for their WICED feather WiFi). For the SoftAP configuration page this is already used, but that only works in Listen mode.
Luckily there is the Webduino library. It makes use of the existing TCPServer and TCPClient functions on the Photon and adds the HTTP layer on top of that. I’ve forked and updated the library ported by Matthew McGowan, because I noticed that in the previous version communication was slowed-down because of some kind of bug in the Particle Core. To my surprise it took 300 milliseconds to send a message on my local network almost the same time as it took when communicating over the Particle Cloud. My expectation was that it should be way faster. I’ve found the cause the code, an added delay which was added to solve a bug on the Particle Core. I’ve removed the added delay and the communication speed changed to 15-20 milliseconds for one message.
In my experience the Webduino library is not always stable. It doesn’t manage client/server connections. Rickkas7 has some code that does this better, with some modifications this might be a better and more stable alternative.
Use Case
The idea is to be able to directly control Photon by sending data over the local network. There are some implementations that serve a complete webpage from the Photon. The problem is that serving HTML, CSS and JavaScript (I’m not even talking about images) eats up a lot of memory space on your Photon.
What I like is that anyone can control the Photon. So you also don’t need to put your credentials. I’m designing a light product, and I want that people within the local network are able to change the color. I don’t even what that people need to download an app (if you opt for that, I’d advice to look into UDP). With the mDNS library you can publish your device with an address in your network, like myphoton.local. This doesn’t seem to work out-of-the-box on Windows (if you have tested this, please share some info), however installing iTunes (Bonjour protocol of Apple is mDNS) seems to help. AJ ONeal did a good explanation on mDNS of you’d like to know more. Another way to reach your device is to go to the ip-address in your browser like http://192.168.0.106/.
Design choices
My code builds on the idea of the Hackster article of Garret Bartley. He serves a webpage on the Photon with an iFrame. The iFrame points to an online webpage, served from a hosting provider. I tried installing this on my HTTPS server and ran into some security errors. Most browsers prevent making connections to insecure (HTTP) servers to a HTTPS server.
There are some ways to deal with that, however I’ve decided to take another road. Incase you decide to dive in here are some terms linked to some interesting articles:
In the shared Particle Photon code I’ve implemented a version that redirects you to my hosted remote control application and a version that seems to run on the Photon (like the iFrame idea of Garret Bartley) by storing html code in a JavaScript.
You can try the methods below out directly by installing this Particle build project on your Particle Photon.
Redirect to online application
The first is that if you surf to myphoton.local, the Photon will redirect you to an index.html file on my web server and passes both the ip-address and the mDNS address. From that website we call then the address myphoton.local/sethsb/ and post a comma separated string. The server returns a JSON formatted string. Check the Particle Photon Cloud Remote Control article in which I explain my design choices.
It’s important to know that I redirect the user to my insecure (http) part of the website. Because doing a call from my secure (HTTPS) part to the Particle Photon server won’t work, because the server only supports http. You can try it yourself by opening the control application over HTTPS (check the console for the error messages).
Of course the user will see that they get redirected to another page (the iFrame version of Garret made it appear that everything was running on the Photon), which might be something you won’t like. However there are benefits. You can easily bookmark the page and it will be reachable even if your Particle device is offline. In that way you can give a friendly error message (like I did by opening “Is your Particle device online?” ‘snack bar’ dialog).
Serve a webpage on the Photon
I also wanted to explore the idea of serving the webpage from the Photon. In that way I liked the idea of Garret that used the iFrame to load the HTML, CSS and JavaScript externally, so you would save memory on the Photon.
I did some research and importing HTML is much more difficult than importing JavaScript (like including a library hosted on the Google CDN) or images from an external host. A solution might be using a technique like webcomponents which at the time of writing are only supported in Google Chrome, although there is a polyfill (some script that works around this on older browsers) available.
I decided to try what Eric Bidelman would file under Crazy Hacks to import HTML. I’ve stored the HTML body code in a JavaScript file and use the innerhtml property to place that content in the HTML body. The code below is the index page served by the Photon, you see that all the scripts, and styling are hosted externally. Between the HTML body-tags there is no code.
const unsigned char index_html[] = "DOCTYPE html> " "Particle Photon RGB LOCAL Remote" "" "" "" "" "" "" " ";
The HTML body is stored in the index_content.js file. To make this work I’ve added slashes and I’ve “compressed” it. So I store it in a JavaScript file (check the whole file here).
That’s it. The HTML and CSS for the remote control app is exactly the same used for the Photon Cloud remote code. The index.js file is mainly different in the part where we communicate with the device.
