Adding Custom UI Raspios Buster Lite ARMV61

General
, ,
1

Hi there! I am relatively new to wifi-connect. I am currently having problems with the -u argument for adding custom UI’s for the captive portal. Using curl I was able to install wifi-connect on my RPI. Before setting up a service to autostart wifi-connect, I first started wifi-connect manually to test using the following command:

sudo wifi-connect -s SSID -u /home/pi/ui`

[About the ui folder] I cloned the wifi-connect repository on my laptop and customized it. I was able to get a production build and transferred the built ui folder via pscp. The problem I am currently encountering is that the SSID appears but the captive portal is not appearing. I have seen the related issues and tried all of them but they used dockers in their setup. I am only following the Raspbian/Debian Stretch setup.

*Note: Without the ui argument the wifi-connect works without any problems. I am guessing that it fails to locate the ui folder.

Hope to hear from you guys! Thank you!

4

Hey, are there any relevant logs from wifi-connect that may indicate a problem? In the meantime I’ll see if I can get more information for you.

7

Hi @CameronDiver, the problem is that I can’t seem to get a hold of any logs when I run

sudo wifi-connect -s SSID -u /home/pi/ui

It simply runs at the default ip address and port number, the SSID appears on my phone and my laptop but when I try to connect to it, the captive portal does not open. Even manually typing the ip address and port on my browser does not do anything.

Is there an argument in wifi-connect where I could get logs?

Thank you so much for helping me, I appreciate it!

11

Hi, so it is not working when you pass a custom UI folder as command line argument, but it is working when you leave it with the default UI - can you please double check this is the case? Can you please also verify that there is an index.html in the /home/pi/ui folder that you are passing as a command line argument?

Thanks,
Zahari

14

Hi there @majorz!

so it is not working when you pass a custom UI folder as command line argument, but it is working when you leave it with the default UI - can you please double check this is the case?
Yes! Exactly.

Can you please also verify that there is an index.html in the /home/pi/ui folder that you are passing as a command line argument? Just checked it now, Yes there is, inside the public folder.

Thank you so much!

15

Thanks for the clarification. I will try to reproduce now and get back to you shortly.

17

Thank you so much for the swift response. I don’t know if this helps but I first cloned the wifi-connect repository and then did the ff:

npm install

Customized the ui, and then did an

npm build

Thank you so much! Hope to hear from you.

18

I tried this locally, but could not reproduce. Let’s see whether the problem is with the -u argument, or with the compiled UI. Can you please place a tiny hello world type of HTML as index.html in that folder and see whether it will show up? This way we will know whether it is an issue with the compiled UI, or the code that serves it. Something like:

<!doctype html>
<html>
    <head></head>
    <body>
        <h1>Hello</h1>
    </body>
</html>
20

Hi there! I used the snippet you gave below

and I used that as my index.html inside the public folder. Before I transfer it into my RPI Zero W, I make sure that it compiles and builds successfully. Right now, it’s throwing off

image

Thank you so much for the help, I think I might have misunderstood your comment tho.

Cheers

22

So the current final ui folder that is produced from the build has an index.html file, some .js files next to it and a static folder. For this test you do not need to build the ui - just place the hello world type of index.html file inside the ui folder. The folder that you are pointing to it with the -u argument. That folder needs to contain only this index.html file. Please let me know if you have any questions.

24

Hi there! Just got back to this now, Transferring the new ui folder to the RPI is really slow cause of the node_modules, I would just like to ask if it’s still needed? or is it better to transfer without the node modules and just do an npm install in the rpi via ssh? Thank you so much!

25

Hi @majorz! Update on the hello world type of index.html on the ui folder. I changed the index.html found in the build folder and used the hello world template. I then transferred it to my rpi w zero via filezilla. Unfortunately, the same issue persists. I can connect to the access point but the captive portal does not appear. Reverting back to the default ui argument (not using the new_ui folder) worked perfectly without issues.

Hope this helps, with much thanks!

27

Hi @FaitAccompli,

What does happen if you use the --ui, but point it to the default UI folder - /usr/local/share/wifi-connect/ui?

Thanks,
Zahari

29

[UPDATE]

Hi @majorz, I tried running wifi-connect manually by typing in

sudo wifi-connect --ui-directory ui -s SmarterMeter

Where ui is a folder located

/home/pi/

I attached a photo of what the ui folder directory looks like
send

After running it manually, the AP appears. Once connected it automatically redirects the browser to the default IP 192.168.42.1 but it throws off an HTTP Error 404.

I’ll be updating once I have done some tweaks. Thank you!

30

Hi! Thank you for the swift response. I tried using that as the --ui argument and it worked! I am currently attempting to replace the default ui folder with my customized ui folder. I hope it works. Thanks!

31

I think you need to pass it as --ui-directory /home/pi/ui/build. The actual built UI directory is in the build folder.

1 Like
33

Hi @majorz!

Thank you so much, I already got it working using this file path.

This solved my issue! Thank you.

34

Awesome, glad that it worked for you!

1 Like