Photon softAP usage?

[mashandburn]

@jeiden

I know there are plans to implement SoftAP from the browser

Great info. Can you please provide the timeframe of when you expect to provide the ability to configure the SoftAP from the browser (i.e. discover networks/RSSI, send credentials, etc)? Will it include all of the fancy js that prevents a user's browser from trying to reload a page from the internet connection (which is the photon) when the user presses the back button? This is really cool stuff that they did for the echo, so we'd like to know what is the bounds of what you expect to be delivered and the expected date.

Thanks!

[anthonywebb]

This sounds pretty close to what I need, curious what the onboarding process for a customer looks like… At any rate, I have requested an invite, please see what you can do to get me in. I have 100 photons sitting here on my shelf awaiting shipment to customers, but I need to get this sorted out before I can send them out. Thanks!

[mterrill]

sounds great, have sent a beta program request as well.

the javascript API is what I’m really chasing to include in my hybrid app as that will mean a single pane of glass and enable wifi config from the app.

[nexxy]

@mashandburn,

Hey! It sounds like the firmware is ready to support browser-compatible SoftAP, so I will be working on adding it to our JS library here: https://github.com/spark/softap-setup-js

Provided there are no unseen issues, this should be available for you to use within the next 2 weeks. I’m also happy to help if you have any questions once you start working with it.

thanks!
— nexxy

[nexxy]

@mterrill,

I believe this is what you will be after as well: https://github.com/spark/softap-setup-js
HTTP SoftAP support should be available by the end of the month!

— nexxy

[mashandburn]

@nexxy Yes, this is a great resource for getting started with the softAP js methods. I’ve run through it and can confirm it works quite well within the scope of returning some results from the photon.

I was hoping to know what all you plan to develop and share. There seems to be a lot more to this effort than just these methods to make this work really well from a usability perspective. Since each of these methods require the web app to store values to the cache (or otherwise?) and then do other cool user-centric things in the browser that make it really usable. Are you working toward an example usage? What all is in scope for the 2 week timeframe?

If you could show how this can be used effectively, like in the case of the echo or chromecast, that would be really awesome!

[nexxy]

@mashandburn,

For sure! The general plan is to first make the client library operate both with TCP (current implementation) and HTTP. Once that is done, I will implement a very basic example app. This should be a good starting point for you if you’re looking for a reference implementation for browser-based setup of the Photon.

— nexxy

[mrabie]

Can’t wait!! Thanks for the great work you guys are doing @ Particle!

[rpiswag]

What do you mean by your Photons passed testing and how can I test my Photon?

@anthonywebb

Hi @nexxy

Got my photons in the mail and they have passed testing, we are ready to get a bulk of photons on the way. The one sticking point here is getting the customers wifi credentials onto the device. How is the javascript configuration option coming?

Thanks!

[mebrunet]

Very pumped on the HTTP API you released. I got it up and running on my Photon and I have been doing some open-source development with it. See this repository.

However there is still a major flaw - the API does not allows CORS. To elaborate further… As far as I’m concerned (speaking from the standpoint of a someone developing an IoT product for end users) there are two ways to really leverage the HTTP Soft AP API you guys wrote:

1- Serve a web app (that runs in the browser) from our servers. Instruct the user to connect to the Photon generated Wifi AP, then have the web app make AJAX calls to the Photon, to get it connected to the WiFi and associated with a user (or any other model in our business logic).

e.g. using jQuery/AJAX

$.ajax({
url: “http://192.168.0.1/device-id”,
method: “get”,
dataType: “json”,
success: function(response) {
console.log("It worked! Response: ");
console.log(response);
},
error : function (error, response) {
console.log(“Damn… no good…”);
}
});

However, since the web app was served from an origin other than 192.168.0.1 (i.e. it wasn’t served by the Photon), and the Photon’s web server doesn’t stamp its responses with the header "Access-Control-Allow-Origin: * ", this will not work. The response is blocked by the browser. You can easily verify that.

2- Serve a separate (static) web page from the Photon specifically to connect to the WiFi (avoiding the CORS restrictions). This is what I’m currently working on and will share with the community (repo mentioned above). However, this puts a greater burden on the user, as they must somehow transcribe the device-id from the Photon, and send it to our severs via another form/process.

A third alternative is to use a native application (whether desktop or mobile) or Cordova pluggins (if building something hybrid) to make the HTTP calls to the Photon. However, at that point I could just use your existing SDKs or TCP protocols… so there’s no reason to use HTTP.

My point being, if you really want the HTTP API to be useful, you need to modify it on the Photon to allow CORS.

[bko]

Hi @mebrunet

I don’t think it would be hard to add the CORS header but I am confused somewhat by your use-case:

Aren’t you assuming in Case 1 above that your customer can be connected to the Internet proper to use the web page on your server and simultaneously be connected to the Photon soft-AP? I have some computers that could do that, but on the vast majority of computers it would be one-or-the-other but not both connections simultaneously.

Am I understanding you correctly or when you say web-app in a browser is something that requires an internet connection or you mean something more offline using installed local software?

[mebrunet]

Hi @bko

Good question. The process would be as follows:

1- User visits our web site and creates an account or logs in (requires internet connection).
2- User clicks a link that says Add Device, we serve a javascript app. (requires internet connection).
3- Javascript app instructs user to put their device into listening mode, and connect to it’s AP (doesn’t require internet)
4- Javascript app uses your HTTP API to connect the device to the WiFi and stores its device ID locally (doesn’t require internet)
5- Javascript app instructs the user to reconnect to their WiFi, which should happen automatically when the Photon’s AP disappears (doesn’t require internet)
6- Javascript app makes a call to our servers, associating the device ID with their account, and verifying the device has come online (requires internet).
7 - Navigate away from “Add device” (requires internet).

This in my mind is the ideal use case of the HTTP API.

In as far as adding the CORS headers easily. This is where I need your expertise. I spent 6 hours pouring over Broadcom’s WICED SDK and couldn’t see an easy fix… I think we need to switch the route types in in “softap_ip.c” from WICED_DYNAMIC_URL_CONTENT to WICED_RAW_DYNAMIC_URL_CONTENT then write all the headers ourselves with new methods in “softapp.cpp”. I didn’t see a way to just add a header.

[anthonywebb]

To connect to the photons AP from your phones setting page (step 3 above) will mean you leave the browser. When you come back to the browser it will attempt to reload the page from your publicly hosted address which it won’t be able to load because you are no longer connected to the internet, you are connected to the photon.

The only real option I see that is very viable is to manage the wifi password on a page served up by the photon. Then once connected to the internet the app on your photon can phone home and tell you a new device has connected.

[mebrunet]

Also - to comment on your simultaneous connections issue, there are two ways I’ve been handling that for development purposes. (i.e. I would never expect the user to do this, but it’s helpful in development).

1. Connect your machine via ethernet to you local network, and connect your WiFi to the Photon’s app.

2. If you don’t have an ethernet port, use an Android Phone’s USB tethering instead. i.e. connect your Android phone to the local WiFi, then connect it via usb to your laptop, then in the Hotspot menu select “usb tether” and it simulates an ethernet conection with your machine over usb.

In both cases you now have access to both the Photon and the Internet.

[mebrunet]

@anthonywebb

I disagree.

1. From a laptop and most phones you don’t need to navigate anywhere you can just use the menu bar to change your WiFi.
2. Even if you open a settings window on a mobile phone, using the back button, or tabs will bring you back to the browser with everything cached/stored locally. i.e. it will not automatically try and reload.

That only happens if the user actually closes their browser app, which we can instruct them not to do.

Either way I’m developing a page to be served by the photon now. Pretty easy to do… and in fact now that I think of it, that page could just pass the device id to our servers after internet connection is reestablished.

[anthonywebb]

You may be correct with android, but I am pretty sure that iOS requires you to leave the page to connect to a new AP, and coming back will try to refresh the content of the page. Either way it sounds like you are making progress which is great. I really feel like managing the wifi password via an http page on the photon is something that should be baked into every photon by default.

[Rockvole]

@anthonywebb I think another advantage of having it baked into the Photon by default means you don’t need to provide a physical button on the device to put it into listening mode.

[bitwisekaizen]

@nexxy Are you any closer to making the changes for HTTP SoftAP generally available? Your last update mentioned the end of July. We’re anxiously awaiting your updates! Thanks!

[hine]

Really excited for this too! Been checking all the time

[mebrunet]

@nexxy I tweaked your JS library to use Node’s HTTP library. See the code here.

It’s connecting my Photon (running firmware branch photon_043) to the WiFi but is still broken in the following ways:

1. The Photon does not respond to the connect-ap request. It simply begins going through the connection process, and lets the request time out.
2. The LED turns red and blinks a few times after receiving the connect-ap command. The Photon then restarts and goes through it’s usual connection process.

I’d love to get another set of eyes on it…