Wifi Connect Change UI, blank page

Product support
1

Hello,

I wanted to change the wifi-connet UI design. So I checked some threads here on the forum, but I am not sure why it does not work for me.
I downloaded the wifi-connect master from GitHub.
Moved into ui and did npm install then I changed the logo and text. After this I moved it do Windows 18.04 Ubuntu Subsystem and did the same and ran npm run-script build. It builds me a folder inside the ui folder. Now I copy masted that whole ui folder into my balenaDash wifi connect folder an named it my_ui. Inside the start command of ./wifi-connect I add --ui-directory my_ui (./my_ui) and I get a blank page when accessing the wifi connect page from my mobile.
Does anyone know how to fix this? Thanks

2

Hi @rquant – thanks for your post. If I understand you correctly, you’re attempting to add a custom UI for the wifi-connect portion of balenaDash. You’ve taken the customized directory (named ui), copied it to a directory named my-wifi within the wifi-connect directory of your balenaDash project, and have modified start.sh to include the --ui-directory argument for the wifi-connect command. Is that correct?

If so, my first thought is to wonder if you have included the my-wifi directory in your Dockerfile via a COPY instruction. You can find details on that here. Can you give it a try and see if that solves your problem? If you’re still having problems after that, please post a copy of your Dockerfile from the wifi-connect directory.

All the best,
Hugh

4

I have used this in my Dockerfile.template:

RUN curl https://api.github.com/repos/balena-io/wifi-connect/releases/latest -s \
    | grep -hoP 'browser_download_url": "\K.*%%BALENA_ARCH%%\.tar\.gz' \
    | xargs -n1 curl -Ls \
    | tar -xvz -C /usr/src/app/

COPY ./start.sh .

COPY ./my_ui./my_ui

CMD ["bash", "start.sh"]

start.sh
./wifi-connect -a 600 -s myssid -p passsssss! -o 8000 --ui-directory ./my_ui

It also shows the folder when I access the terminal

This is the content of my_ui
rpi_ui

5

Hi @rquant – thanks for the additional details. I’ve tried this out locally, and what you want is the contents of the build directory to be copied to my-ui. If you look in that directory, you should see an index.html file and some minified Javascript files; these are the ones that you want to copy over. In other words, you would want to do:

cp -r path/to/original/ui/build path/to/balena-dash/wifi-connect/my_ui/

before building the application.

Can you give that a try and let us know how it works for you?

All the best,
Hugh

1 Like
7

Thanks that solved it!

9

Awesome, glad to hear it!

1 Like