Photon softAP usage?

@mebrunet @msolters Hey I’m just diving into figuring out how to give my customers a easy way to setup their Wifi & Password info when they receive our product for the first time, or any time for that matter.

I found this setup and it looks nice and clean. Do you guys actually have this hosted on the Photon? http://photonsoftap.meteor.com/

Is it all working just fine now to get the SSID and Password entered into a Photon? If so GREAT!

I’m needing to figure out how to get this feature integrated into my product that contains a Photon so they are super easy to setup and get going.

Any advice is greatly appericated :spark:

@RWB Yes, http://photonsoftap.meteor.com can be used to setup the WiFi SSID & PW. Probably the single most important thing you need to know is make sure your devices are running 0.4.7.

http://photonsoftap.meteor.com is hosted on a remote web server, not the Photon itself. For an option where the setup page is hosted from the Photon itself, please refer to @mebrunet – specifically, what he has written just above. He links to his source code & instructions for that approach.

The Meteor app has a usage flow like this:

  1. Go to the web page
  2. When it’s loaded, change your computer/smartphone WiFi to connect to the Photon’s SoftAP
  3. Continue following the steps on the screen!

@mebrunet’s approach is simpler in that (1) and (2) are essentially switched, so the user must connect to the Photon’s SoftAP before seeing the setup page – of course, they must know to do that, which usually means they’re already on some web page. So there’s a tradeoff there as far as UX.

Far more importantly, @mebrunet’s code is much simpler in terms of getting to understand how to implement the SoftAP process as a developer. The Meteor app, while also open source, may be more difficult if you’re not already familiar with Meteor because then there’s two new things you’re trying to chew on.

But if you just want a tool, yes, your users can just go to that Meteor website. It ain’t pretty but it works.

1 Like

I created an iOS app in React Native (I’m new to the framework but it’s amazing so far) from @mebrunet’s code that I thought might be useful for anyone who wants to code their mobile apps in javascript. So happy this all came together, thanks everyone.

Thanks for sharing your example code @mebrunet, you’re a legend! Thanks also to everyone else that has contributed here. It’s incredibly helpful!

Hey guys this is an awesome thread. I’m trying to build a web app for my product and the examples shared here will save me tons of time!! Thank you!

Does anybody have an example of a web app that does the setup but also lets you interact with the Photon? e.g. setup your Photon and change it’s name?

All the authentication of my product is handle by Particle. So that makes things easy from my end. Is anybody on the same boat?

Thanks!

I’m going to assume there’s no easy way to host this on an SSL encrypted site? I’ve had this working fine, but since I installed an SSL certificate I’m getting the following error from Chrome

Which I assume just means that chrome doesn’t want to allow you to access the photon over a non secure connection. Anyone have any ideas here, @nexxy?

So what did you actually do @G65434_2 to get the SoftAP hosted?

Did you just host the files in the Zip folder?

What does your custom site look like if you do have it online now?

@RWB, I basically used mebrunets code, messed around with the HTML a bit and added my own changes to the CSS, as well as a few tweaks to the JS. Nothing functionally different.
And yes I just dragged my updated files into the public_html folder on my webserver and was away.

Sorry I blacked out the URL to my test page above as there are a few IP considerations with my company that I need to be careful with at the moment. As soon as these are sorted I’ll be very happy to share, having said that there won’t be much different there from anyone elses SoftAP pages.

@G65434_2 So its easy to change the look of the page with custom images?

Is it a simple web page that I could edit in Dreamweaver or something similar?

Hi @RWB, sorry for the slow reply, it was getting late in New Zealand! Yes, using mebrunets example it’s quite simple to just change the styling using HTML and CSS alone without touching the JS.
I haven’t used dreamweaver sorry but I really recommend getting a basic knowledge of CSS. You could start with using a framework like Twitter Bootstrap, it’s pretty common now and makes it really easy to add nice looking responsive elements without having to do the hard yards in CSS. Perhaps we should keep this conversation on another thread so as not to clutter up this one, or feel free to PM me if you have any trouble :slight_smile:

@G65434_2 Thanks for the info.

I just looked at the Zipped files and it looks like you just need to throw the files on a server and customize as needed and then drive your customers to that link.

Were there any problems or was it just as easy as hosting the files on your own server? I saw you had issues with the HTTPS in another thread?

I can also confirm that the browser-ified library v3.0.2 works on an iPhone 5 (iOS 8.3) with Spark firmware 0.4.7. Thanks so much @msolters @mdma and @indraastra for your work fixing this! :+1: :+1: :+1:

2 Likes

I am trying the SoftAP on 0.4.7, when I point the browser to 192.168.0.1/ I get a blank page r"=-1}

@hine the link is broken, can you please repost the code?

Thanks

Here is a different version that I stripped out of the app we are building. Let me know if it works!

thanks i’ll download it and check it out…

I am working on a C# Photon setup library. I am using the HTTP commands for setup [enter link description here][1]

[1]: https://github.com/spark/firmware/blob/develop/hal/src/photon/soft-ap.md "docs"When I call configure-ap and connect-ap I get resturn code 0, but the photon still breathing blue and not connecting to the WiFi network. Wy do you think it’s not connecting?
Steps:

  1. Scan APs
  2. Get public key
  3. Configure selected AP with password (encrypted using public-key)
  4. connect-ap

Thanks

hey @msolters,

your meteor advertising campaign finally came to frution :stuck_out_tongue: (at least in my case).

I’m a JS beginner but have knowledge in other programming languages so hopefully i get to it.

I successfully cloned your (amazing!) git and it worked, However - since i am a beginner i am not so comfortable with coffe script neither with the rather “advanced” project structure i decided to start from scratch - which is better for learning purposes anyways.

I am already able to call functions on my photons - which is great - but i’m struggling to include the softap-js solution.

When i include the softap.browserify.js with

SoftAPSetup = require("softap-setup");

i get the follwing errors

W20160105-11:07:51.969(0)? (STDERR)           
W20160105-11:07:51.972(0)? (STDERR) /home/ubuntu/.meteor/packages/meteor-tool/.1.1.9.ltydx3++os.linux.x86_64+web.browser+web.cordova/mt-os.linux.x86_64/dev_bundle/server-lib/node_modules/fibers/future.js:245
W20160105-11:07:51.972(0)? (STDERR)                                             throw(ex);
W20160105-11:07:51.972(0)? (STDERR)                                                   ^
W20160105-11:07:52.384(0)? (STDERR) TypeError: undefined is not a function
W20160105-11:07:52.384(0)? (STDERR)     at Object.<anonymous> (../../../../../.meteor/packages/cosmos_browserify/.0.8.2.t3wlc6++os+web.browser+web.cordova/plugin.CosmosBrowserify.os/npm/CosmosBrowserify/node_modules/browserify/node_modules/stream-http/lib/capability.js:9:1)
W20160105-11:07:52.385(0)? (STDERR)     at Object.<anonymous> (../../../../../.meteor/packages/cosmos_browserify/.0.8.2.t3wlc6++os+web.browser+web.cordova/plugin.CosmosBrowserify.os/npm/CosmosBrowserify/node_modules/browserify/node_modules/stream-http/lib/capability.js:41:1)
W20160105-11:07:52.385(0)? (STDERR)     at s (../../../../../.meteor/packages/cosmos_browserify/.0.8.2.t3wlc6++os+web.browser+web.cordova/plugin.CosmosBrowserify.os/npm/CosmosBrowserify/node_modules/browserify/node_modules/browser-pack/_prelude.js:1:1)
W20160105-11:07:52.385(0)? (STDERR)     at ../../../../../.meteor/packages/cosmos_browserify/.0.8.2.t3wlc6++os+web.browser+web.cordova/plugin.CosmosBrowserify.os/npm/CosmosBrowserify/node_modules/browserify/node_modules/browser-pack/_prelude.js:1:1
W20160105-11:07:52.385(0)? (STDERR)     at Object.<anonymous> (../../../../../.meteor/packages/cosmos_browserify/.0.8.2.t3wlc6++os+web.browser+web.cordova/plugin.CosmosBrowserify.os/npm/CosmosBrowserify/node_modules/browserify/node_modules/stream-http/lib/request.js:2:1)
W20160105-11:07:52.386(0)? (STDERR)     at Object../capability (../../../../../.meteor/packages/cosmos_browserify/.0.8.2.t3wlc6++os+web.browser+web.cordova/plugin.CosmosBrowserify.os/npm/CosmosBrowserify/node_modules/browserify/node_modules/stream-http/lib/request.js:279:1)
W20160105-11:07:52.386(0)? (STDERR)     at s (../../../../../.meteor/packages/cosmos_browserify/.0.8.2.t3wlc6++os+web.browser+web.cordova/plugin.CosmosBrowserify.os/npm/CosmosBrowserify/node_modules/browserify/node_modules/browser-pack/_prelude.js:1:1)
W20160105-11:07:52.386(0)? (STDERR)     at ../../../../../.meteor/packages/cosmos_browserify/.0.8.2.t3wlc6++os+web.browser+web.cordova/plugin.CosmosBrowserify.os/npm/CosmosBrowserify/node_modules/browserify/node_modules/browser-pack/_prelude.js:1:1
W20160105-11:07:52.387(0)? (STDERR)     at Object../lib/request (../../../../../.meteor/packages/cosmos_browserify/.0.8.2.t3wlc6++os+web.browser+web.cordova/plugin.CosmosBrowserify.os/npm/CosmosBrowserify/node_modules/browserify/node_modules/stream-http/index.js:1:1)
W20160105-11:07:52.387(0)? (STDERR)     at s (../../../../../.meteor/packages/cosmos_browserify/.0.8.2.t3wlc6++os+web.browser+web.cordova/plugin.CosmosBrowserify.os/npm/CosmosBrowserify/node_modules/browserify/node_modules/browser-pack/_prelude.js:1:1)
=> Exited with code: 8
=> Your application is crashing. Waiting for file change.

Maybe you can help? Or am i supposed to include the whole locally browserified file? (which at least @ c9.io takes like forever to compile)

Thanks in advance for a short hint.

edit: i’m using meteor 1.2.0.2 and tried browserify 0.8.1 & 0.8.2

First off, let’s try to keep sidebar discussions off the main thread here – it’s epic enough as-is. Feel free to message me or to open an issue on the GitHub repo itself.

That being said, there’s two things you may be missing if you’re starting from scratch. Basically, to use cosmos:browserify to browserify an NPM package, you need to already have that NPM package.

  1. Install the NPM package for Meteor:

    meteor add meteorhacks:npm
    
  2. Define the NPM packages you need! Just make a packages.json file in your project root directory, and inside declare a JSON object containing each NPM package’s name (key) and an explicit version number (value). Here’s what mine looks like – the magic happens in line 3.

  3. For any package from the above list you want browserified, add a JS file to the client with the naming format packagename.browserify.js. Again, here’s mine: https://github.com/msolters/softap-setup-meteor/blob/master/client/softap.browserify.js. Note: The naming of this file is important – it must end in .browserify.js, and secondly, do not load it on the server side! Put it under the /client dir of your project.

  4. Finally, add the cosmos:browserify package. It will tick through your files that end like .browserify.js, find the dependencies, and browserify them.

2 Likes

That did the trick! (started off with a root folder only solution - so no client or server folders) Thank you!