Customizing the Wifi creds page?

Is it possible (and acceptable) to customize the web-page that let’s the user enter the Wifi credentials? By customize, I mean like adding some new fields and passing that data on to other steps…
Aanyadvice greatly appreciated!

What type of fields are you looking to add into the web page for WiFi credentials?

Just 2 simple text fields. But then I have to figure out how to get those 2 bits of data saved away somewhere. I’m very new to this stuff but I’m reading everything I can.

Can you please paste a screenshot of the page you are talking about? openBalena as a product does not have a web interface. Maybe you are talking about balenaCloud or WiFi Connect.

My apologies, I was referencing the “Wifi-Connect” utility that allows users to use their cell phone to configure (for example) a headless Raspberry Pi for their Wifi. Great utility, I just want to grab 2 more bits of data from the user. I found the ui folder and I’ve been able to add the page elements, I’m just now r reading through the code to see how best I can forward those 2 things on after the connection to Wifi is completed.
I’m learning a lot reading the forums but it’s way beyond me most of it.
Any advice much appreciated!@

This is indeed possible. Please check the following example application I created for doing exactly that: https://github.com/balena-io-playground/wifi-connect-api/

Do not hesitate to ask if you have any questions regarding this.

Thanks,
Zahari

Hey this looks great! Exactly what I need!
I have Wifi-Connect running fine right now on a Pi3 running Raspbian Buster. (I do not have the freedom to switch to Balena OS or I would. The client has mandated that.)
Can you possibly give me a few pointers about how I might integrate this into my standard install? I’m a little lacking in knowledge of “docker”(as in, I have no idea what it is). But I’ve been a programmer for 35yrs and write a lot with c#/dotnet so I’m not a complete newb. LOL
I’m wondering where my 2 new fields are going to be sent. I have a Windows Server running IIS and some WCF web-services I’ve written, so I’d love to have the data sent there in whatever way works.
I also have a Java app running on that Pi that uses Apache Axis2 and makes calls to that server, so I can do it that way too if need be.
Any advice would be greatly appreciated!

Hi David,

You do not need to use Docker to run this and you may integrate it in an environment to your liking. You may check the Dockerfile.template and you will see it runs standard Linux commands that are needed to setup the web application and WiFi Connect.

I advice for running first the included example Python web application in your Raspbian Buster environment and see how that all works before starting integration into your Java application.

So first make sure you are able to run the tiny example Python web application, play around with it, and check how it works by following the readme and reading through its sources. Since you already installed WiFi Connect and you are able to run it, now you only need to install the dependencies of the web application by doing what the Dockerfile.template does. (From that Dockerfile you need to omit the DBUS_SYSTEM_BUS_ADDRESS definition, since that only applies to balenaOS).

Now as for how to handle the extra fields you need to define, in the tiny example you may see a how it is handled here https://github.com/balena-io-playground/wifi-connect-api/blob/master/web-app.py#L13 in the /custom handler. You will have to implement a similar handler in your Java web application.

Data to the /custom handler is sent by the UI running on the phone from this place: https://github.com/balena-io-playground/wifi-connect-api/blob/master/ui/js/index.js#L37. As you may see there are two requests sent by the JavaScript - one that goes to WiFi Connect including the WiFi credentials and one to the included tiny Python web application (that would be your Java application when you integrate this).

If you have more questions along the way, please shoot.

Thanks,
Zahari

Hi Thanks for all the great information! I am happy to report 100% success! :smiley:
Essentially the goal was to combine 2 steps the user would normally have to take - get the wifi configured, then log in and register their product. Having both things on 1 page simplifies things a lot and I just had the python web app write the registration fields out to the actual file that my app will be watching for! I am absolutely thrilled with wifi-connect and the support I’ve gotten here. I’m going to take a look at everything Balena has going on. I didn’t realize that the app I used sometimes to burn SD cards was by you guys as well! LOL
Thanks again!