Hi everyone,
I’ve been working on an entirely browser based method of setting up the Photons via SoftAP, but I’ve recently extended this boilerplate web app to be (super) easily deployed to an .exe, .app, or Linux executable that can be run right on the user’s computer, with a fully automated WiFi management flow ala the Particle Android app:
http://photonsoftap.meteor.com
Problems
There’s been a lot of work in the community to make the SoftAP process smoother. In broad strokes, there seem to be two main approaches:
- Host the SoftAP interface as a web page inside the Photon itself
- Host the SoftAP interface from a remote server, and have the user manually change to the Photon’s AP during setup
Now, for someone like me who needs to make a setup procedure that integrates into the rest of our product (web and mobile apps), #2 is the best option.
But I hate the fact that the user has to mess with their WiFi. In addition:
- This method can cause problems where parts of your web app are unreachable or produce errors while the user’s browser is no longer connected to the internet: fonts loading as squares, scripts or stylesheets that don’t resolve, etc.
- SoftAP coverage seems spotty across various browsers (Safari, I’m looking at you.)
So I set out to make several tools that would make this whole procedure a lot easier. By combining these tools with Particle’s SoftAP JS library, as made browserifiable by @brewnerd, we can make a very robust cross-platform native app that behaves just like the Particle setup experience does on mobile.
Solutions
- I made an NPM module called wifi-control that can scan & (dis)connect your computer’s WiFi programmatically, to automate the setup procedure just as Particle’s Android app does. It allows us to, e.g. scan for WiFi networks automatically, and then filter for those that contain “Photon-”, so that users can “magically” see a list of their nearby Photons right inside the app. No hunting through SSID lists from their settings. It can be used to automatically connect the user’s computer to the Photon, and back again.
- Next, I wrapped that module into a Meteor smart package by the same name, so that the server-side wifi-control functions can be invoked from the client in the browser.
- Finally, I included the arboleya:electrify package in my app. What this does is take the server and the client that constitute the Meteor app, and then bundle them together with a tiny version of Chromium (which is already compatible with the SoftAP JS library) – and then delivers it all as an executable for any architecture you want. This is all for free thanks to Electron. Can we all agree to stop naming our products after elementary particles. Thank you.
All you need to do to try out the fully automated local version is to install Meteor, and then:
git clone https://github.com/msolters/softap-setup-meteor.git
cd ./softap-setup-meteor
meteor
Meteor will download the dependencies, host the app locally at localhost:3000, as well as launch a copy of the native Electron executable.
Bug warning: I don’t have a copy of Windows so YMMV until I really get some solid testing in with it. If you run into snags see the readme.
Run with It
One immediate upshot of this app is that it is trivially compilable to every major operating system, and yet only requires modifying the HTML and CSS to completely change it to a product-specific setup tool. Fork it, replace “Photon” with “Widget”, and there you go.
Of course, everyone has a different favourite web framework, and most people will have a need to incorporate this kind of logic into something that already exists. This is why I broke down these tools to the NPM level, so that, like softap-setup, you can just invoke an npm dependency and then roll your web app however you like.
There’s plenty of reasons to not use Meteor: When “electrified”, it still comes with a small copy of MongoDB for example. That’s unnecessary and unused in this app. Personally, I’d like to see a pure Electron app without any of the bloat, that just takes care of finding Photons and hopping APs with wifi-control and negotiating the Photon setup with softap-setup. You can use these tools for an Ionic app or an Angular app or a whatever!
Let me know your thoughts, concerns or suggestions.
Mark