OK, my first Web project and I feel like a n00b. In my project we will run a web UI displaying temperature and pressures from in a lab setup in the university.
The UI will be running on iPad Minis that are connected over Wifi to the equipment. I noticed that the Xojo Web App works very well when added to the Home Page, hiding the Safari toolbar and maximizing the screen real estate. This in combination with the iOS Guided Access would make it the perfect solution. The only issue I see now is that the “Disconnected” page doesn’t allow a reconnect, making it impossible to use Guided Access.
I have tried adding the link to the Web-page in the “gone off-line” message, but that field is html-encoded so the link won’t work…
Any ideas on a work-around?
Safari has a refresh button so the fallback would be to use Safari in Guided Access mode and lose the top of the screen.
I use a few techniques with my WebApps that require a Login:
if the user clicks log out, you can store the URL in a string, do a Session.Quit then a ShowURL to the String. This fully logs out all variables and screens and displays the login window.
if the user is logged in and I want them to access a related Xojo WebApp in a new window, I create a random token string, add it to their User record, then run a ShowURL with /#token=ABCD1234DEF5678. If the login routine finds this hashtag in the URL it looks for a user with that token and will auto-log them in. After this it clears the hashtag from the URL and the token from the User record so it can’t be used again.
it is possible that on login you could write a token to a cookie on login so that if the user refreshed the screen it would re-log in using the above technique.
I set up a Session.ConfirmMessage string to warn the user whether to leave the page or stay, should they decide to refresh or click on another link.
Hi David,
thank you for your feedback. This setup is more relaxed and does not require any authentication.
It is a lab setup at a university where we will have a RPi measuring process temperatures and displaying the values and graphs on a iPad Mini connected to the WiFi generated by the RPi.
My concerns are:
The RPi may be powered up independently of the iPad (i.e. as part of the process equipment). The Web UI may not be available at all times, requiring some reconnect function on the iPad.
Lock down the iPads as much as possible (“kiosk” mode). I was really happy to see that the Full Screen Web App worked very well, but to reconnect, the student require access to the home page, thus I cannot use the Guided Mode.
For the time being I will have to use iOS Safari browser in Guided Mode so the students stay in Safari. If time and budget would permit I could possibly have written an iOS App with a simple HTMLViewer and an out-of-band pinger checking if the RPi is up and then trying to reconnect.
@Mattias Sandström Thank you for filing the feature request. In the mean time, you could use Javascript to modify the disconnect screen:
[code]dim sa() as string
// Change this to the URL of your app
dim url as string = “http://www.xojo.com/” + app.URL
// Change the disconnect caption into a link
sa.Append “var el = document.getElementById(”“XojoDisconnectCaption”");"
sa.append “if(el) {”
sa.append “el.innerHTML = '<a href=”"" + url + “”">Touch Here to Reconnect’;"
sa.Append “}”
// Send it to the browser
dim js as string = join(sa,EndOfLine)
ExecuteJavaScript js[/code]
If you’re retyping this code, be very careful about quote marks. There are a couple of places in there that you need to use single quotes to wrap a string so you can use double quotes within…
Thanks for this tip!! Really clever.
I modified the A tag to use onClick=“javascript:document.location=document.location;” so I don’t have to handle the URL.
Works perfectly in a full screen web-app from the Home Screen. And also allowing me to lock down the iPad using Guided Access.
Working like a charm (knock on wood…) The web app is running very stable on the RPi 3 and getting values from the sensors. Connection with the iPad (using hostapd to create a separate WiFi) also very stable, running over-night with out any hick-ups.
Will contact @Marc Zeedar about a possible article for xdev, but here’s some details about this quick project.
I’ll post additional pictures from the actual lab next week when we install it on-site.
The system will be installed in a lab in a university where students will spend a day working on a installation of a geo-thermal heat-pump. They will adjust temperatures, get the system stable and then calculate the output power and Coefficient of Performance (output power / electric energy consumption). The heat-pump has a brine system with separate heater and a system taking care of the generated hot water.
The RPi will measure 9 temperatures and two pressures using two different add-on boards connected over I2C. A Xojo Web App runs the UI that is presented for the students where they have the information required for the calculations.
Main-screen. A simple process-image with all values.
Large values so they can work on the unit and calibrate the water flows but still see the read-outs.
Graphing screen where different values can be selected for plotting.
I’m a bit weak with javascript, but I wonder if the Xojo disconnected message is in a div and if a javascript callback to reload the page could be added.
I’m useless at javascript. I thing that the script needs to know if the disconnected message has been shown or not and only try to reconnect if disconnected.
If I use the above method to run a “location.reload(true)” it just keeps reloading the app as it starts running on session.open.
I’m OK with Javascript but it’s been a while since I was really embedded in it.
I think the most reliable method for reconnection is probably to have a JS script execute when the disconnected message appears. The contents of that script could vary a bit and are a separate discussion so first things first, is there a way to execute a JS call on disconnection? Greg?
I tried that once, some time ago. Automatically performing a location.reload once the disconnect screen appears was working fine, but that doesn’t help. At that time, the sever is likely actually unreachable. As a result the page with the disconnect message is replaced by a browser generated error page telling the host is unreachable. For a proper solution one would need to do asynchronous AJAX like pings to the server and only after a successful reply, issue the reload. That wasn’t worth the effort when I tried last time…
The server doesn’t have to be unreachable for the user to be disconnected. Safari tends to close the connection to the app if idle for some time. It would be way better if the app just reloads at that point, rather than showing a disconnected message
Firefox is way better at maintaining the connection.
[quote=337309:@Albin Kiland]I’m useless at javascript. I thing that the script needs to know if the disconnected message has been shown or not and only try to reconnect if disconnected.
If I use the above method to run a “location.reload(true)” it just keeps reloading the app as it starts running on session.open.[/quote]
The following will reload the page if the disconnected message is showing.
It checks every 5 seconds, you can change that using a different setInterval.
I only tried this on Safari - your mileage may vary.
<script>
function doReload() {
xojoDis = document.getElementById("XojoDisconnect");
if (xojoDis.style.display == "block") {
location.reload();
}
}
setInterval(doReload, 5000);
</script>
