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.
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/.
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:
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
const unsigned char index_html =
"<!--<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->DOCTYPE html> "
"Particle Photon RGB LOCAL Remote<script src="\"https://storage.googleapis.com/code.getmdl.io/1.3.0/material.min.js\""></script>" "" "" "" "<script src="\"https://dev.kasperkamperman.com/localremote/js/rangetouch.js\""></script>" "<script src="\"https://dev.kasperkamperman.com/localremote/js/index_content.js\""></script>" "<script src="\"https://dev.kasperkamperman.com/localremote/js/index.js\""></script>" " ";
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.