Make captive page look the same a deviceinfo page?

Project help
,
1

I’m not sure if this has been asked before but I’d like the captive portal page in the balena-starter-interface to look the same as the main “Device info” page. Most of our users’ time will be spent in hotspot-AP connected mode using their smart-device, so the device operations information is important in this mode. (Checking battery level, camera view and storage space etc). I started redesigning the captive page, but maybe it is simpler to redirect AP clients to the deviceinfo page?
Cheers,
Mark

3

I ended up modifying the CaptivePortal.vue layout. I tried replacing the captive layout with the Main layout, but it didn’t work very seamlessly. I think the redesign was a better approach anyway.
M

1 Like
4

@msudul feel free to contribute!

5

I’d be happy to! My design added a camera feed and some GPS details to the captive page, so not much different from the original. The challenging part for me was hooking up our flask backend to the vue.js frontend through expressjs and then axios (replicating what was done for wifi-connect on port 9090). I don’t fully understand the need for both express and axios. It’s a steep learning curve for someone with no vue.js (or any recent) frontend framework experience! The part that is the most unreliable seems to be the hostname.local resolution. I added nuclear’s mDNS service to advertise the hostname on the local network. Still hit and miss perhaps because my wifi router is old.
The bottom line is that the UI looks way better than I could have designed from scratch! Thankyou balenalabs team!
Cheers,
M

6

@msudul what are you using for the hostname ressolution?

Thanks for sharing your successes and pains :slight_smile:

8

I’m just using mDNS. The device will go out into the field and operate on users’ local wifi, so I can’t rely on DNS.
M