Hi @rowifi, totally understandable. Coming from web land, that’s how I felt trying to digest embedded C!
I’ll try to help where I can.
To customize the app, just clone the repository and then search-replace all instances of the word “Photon” with “Foobar.” I swear, it’s that easy. Consider how little you’d have to change: https://github.com/msolters/softap-setup-meteor/search?utf8=✓&q=Photon In fact, some of those results don’t affect the user; renaming all instances of a function doesn’t change the actual front-end (not the “branding,” anyway). For the most part you can constrain yourself to replacing instances of “Photon” inside HTML files. If you’re using this app as a native executable, and you want to catch your device’s custom SSIDs, take special notice of the WiFi scan result filter. That’s how we filter out the “Photon-XXXX” or “Foobar-YYYY” or whatever from nearby AP sources.
I can really only answer as far as using the Meteor app – you can use Meteor’s free hosting service to put up your tool for free. While in your directory of the repo, just run meteor deploy yourwebsitehere.meteor.com. Please keep in mind, that this tool includes the Meteor package arboleya:electrify, which is designed to generate an executable of the Meteor app. It is irrelevant for a web server, so you must remove that package before running meteor deploy. So, in summary, to deploy the Meteor app:
If this doesn’t work, I recommend trying Node v0.10 or v0.12. Someone else had this exact same problem
Sorry, insufficient data to answer that query.
Sorry, insufficient data to answer that query.
I’m sorry the length of this post is probably evidence that this is harder than it has to be. Being forced to build my own implementation from scratch and then go on a merry bug squashing perambulation into the gooch-crack of WICED hell, I would tend to agree with you.
I wish there was an official browser-based tool and example, just as there is on the firmware side.
But then, I wish there was a local Particle cloud with the features we were promised. I wish there was a transparent hardware abstraction for the wireless interface. I wish there were a great many things provided out-of-the-box with this product. All I can say is, the Particle team certainly isn’t idle – they have a lot to do – and in these matters we are obligated to construct our own solutions for the present time. But that’s what the forums are for!
Let me know if there’s anything in particular I can help you with. I’d be more than happy to change the Meteor app if it helps developers such as yourself get a working SoftAP up and running. If anything, I think what I could do is write a more friendly README (as you are looking for a guide).
@msolters can you confirm the meteor app is working on mac safari and iOS? I cannot get it to work in either case. Photon is running 0.4.7, iOS 9.1, el capitan. It does work however with chrome on my mac.
@rowifi I hear you about the world of web being overwhelming coming from another programming background.
I have a very simple connection page here. It is built using nothing more that elementary javascript, html, and css. It’s extremely simple, since I made it to be embedded into the Photon’s memory. (Which it can be if you’re willing to use custom system firmware.)
To use/modify, unzip it somewhere on your machine, and open index.html with a browser and the whole thing should just work. Make changes to the html and css (and possibly the alert messages in the JS), then refresh your browser to see the changes.
When you’re happy with the changes and want to make it available to your clients just host it with any 3rd party service, e.g. GoDaddy.
No Git, no Node, no JS framework to learn. Haha, not that I’m saying those things are bad, on the contrary, they’re just a lot to learn…
Hey Thanks for sharing that.
I’ll try it later.
Not sure what you mean about embedding it into the phtoton memory - you mean as in serving up its own web page?
The custom firmware sounds like a step too far right now though , here’s where there should be a dummies guide and if I crack it I’ll write one!
Yeah, the idea behind browser-based setup means that your setup page is hosted somewhere, right? Secondly, you must at some point connect to the Photon’s SoftAP SSID in order to communicate with it!
With these two requirements in mind, you have a choice: host the setup page from some server on the web, or from the Photon itself.
Hosting the page from the Photon is indeed what @mebrunet is recommending, and figured out how to do! The upsides are, since the user is connected to the Photon, your page will never not be able to load resources. On the flip side, the size of resources the Photon can hold and serve are more constrained than your typical web server.
Regarding simplicity, I can sort of agree with custom firmware being another level of complexity – but hey, you said you’re a C developer right? The idea is that you take the symbols that represent your web page, store them in some buffers, and then send them to a browser that connects to your Photon’s SoftAP. It might be a good way to cross the bridge from C world to web world!
Finally, @mebrunet’s implementation is definitely far simpler, so it’ll be easier to parse. There’ll be no “is this a Meteor thing?” or “why does this HTML have braces in it?” confusion because it will be as he said just vanilla JS/HTML/CSS.
To clarify. I had originally written that SoftAP connect package so it could be hosted by the Photon. (i.e. the setup process would involve connecting to the Photon’s hotspot then visting 192.168.0.1 in your browser) See earlier posts in this thread for details.
The version of my SoftAP connect package running here (that I zipped for you) is tweaked to be hosted somewhere other than the Photon. Eg. A Digital Ocean or AWS instance running a Node or Apache server, Go Daddy or anywhere else that serves static files.
FYI you can also change the Photon’s SSID name with these instructions (Note doing this doesn’t prevent you from using standard System Firmware or OTA Firmware upgrades, since it’s a separate spot in memory)
@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.
@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:
Go to the web page
When it’s loaded, change your computer/smartphone WiFi to connect to the Photon’s SoftAP
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.
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.
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?
@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.
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
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!
