Create simple mobile UI to replicate CLI

[spwoodcock]

A UI would be nice for ODK -> OSM file format conversion.

• Kivy is a small, simple web framework for Python.
• We could use a Kivy UI to create a mobile interface for functions in osm-fieldwork.
• We could link the important functions to buttons with a few select / input fields.
• This would make data collection in the field easier.
• The app would compile to Android (and possibly iOS too).

Additional info:

• Many users only have a phone or tablet, no laptop.
• Phones often have a longer battery life too, which is useful for the field.
• XML data could be converted directly from the phone storage, so no internet would be needed (limited connectivity in the field).
• Optional extra: also upload data to OSM.

[spwoodcock]

I have used Kivy before and it's pretty neat. The kv file syntax for UI generation is a bit niche though and something new to learn for those wishing to contribute.

As an idea, I would like to consider making a very simple Vue (or React) PWA that could load the Python functions here using Pyodide (I.e. Python in the web browser using WebAssembly - cutting edge stuff!).

Lots of people know Python and JavaScript frameworks, making this reach a wider audience of developers that could contribute.
The downside is this is quite new. Loading speeds would also need to be assessed, as each web session requires installing dependencies during runtime (page load).

A simple example displaying this functionality: https://github.com/francoislanc/pyodide-vuejs-app-example

The PWA could then be used on web and mobile - any OS!

One question: is using osm-fieldwork on web a desirable use case, or is mobile the only intended purpose?

[spwoodcock]

As the main purpose of this UI is to work offline, perhaps this requires further thought. Kivy may be the best choice after all.

[joemaren]

Is developing natively for each platform out of the question? That will be for Android and iOS?

[robsavoye]

All the code is in Python. I guess it'd be possible to embed python in a flutter app to not get locked into one platform. Kivy and the python-for-android projects look like a common way to do this, but I'm open to suggestions. Right now I have to pull the files off my phone and convert them on my laptop. In many countries people only own a tablet, so it's a goal to to support mobile only mappers. I actually tried to get osm-fieldwork running under Termux recently, but Termux has issues with some of the dependencies.

[spwoodcock]

Another option could be WASM with Python code embedded in a JavaScript PWA.

I'm not sure how native development in Kotlin or Swift could work with the Python code here.

Open to ideas! 😄

[owolabioromidayo]

Hi @spwoodcock I'm thinking of mocking a simple Kivy UI for this purpose.

I want to start with a basic button list of each program. When a button is clicked, it should expand into a form for the required fields.
Then while the selected program is running, the terminal output can optionally be displayed.

[spwoodcock]

This is the planned internship task for the Outreachy intern, so doing something like creating comprehensive test cases would be preferred, but of course you are free to try any task you may like 😄

[owolabioromidayo]

Hi @spwoodcock ,
Since I have submitted PRs for the other tasks I could find, I didn't really know what else to work on asides maybe other modules in the hotosm org, so I just decided to work on a basic UI for osm-fieldwork.

It's still buggy and needs a lot of work, and has no UI design yet, but it can generate forms for the modules based on simple configurations and can also execute the modules based on formdata, with a logging window inside the application that shows the output.

More details and screenshots are here https://github.com/owolabioromidayo/osm-fieldwork-kivy-mock.

Would appreciate any feedback : )
Thank you.

[spwoodcock]

Neat! It's a good start 😄

There is the start of the kivy app under ui in this repo too 👍

Screenshots are very useful, thanks.
The only thing to keep in mind is that it needs to be a mobile ui, optimised for portrait screen orientation!

[owolabioromidayo]

Thank you!

I made the screen a bit too wide in the screenshots but the kivy UI is dynamic.

I have exported it to my phone, and there are some minor UI bugs to be worked on there.

Should I work on it further and maybe get a PR into the ui folder?

[spwoodcock]

Oh cool, sounds great!

It would be good if you can work on a branch on your fork & have a go with the config and build script I already made. If anything needs updating, feel free too.

But please don't make a PR until the first round of outreachy is complete, as the candidate has not been selected yet.

I know the UI is a pretty fun project, so no worries if you want to have a go at it. But it would be more valuable to the team to get some very comprehensive test cases for osm-fieldwork instead 🙏 we still need a lot more test coverage, particularly tests for edge cases.

To help with that it might be useful to read the docs for this repo & well acquaint yourself with the ODK ecosystem, particularly ODK Central.

[owolabioromidayo]

Understood 🫡.

It is fun, sorry I got carried away there.

I was trying to find more test cases to write but I thought some files were already covered.
Will investigate more thoroughly.

Thank you for the quick response!

[spwoodcock]

I don't think there is value including the ODK communication classes to the mobile app (as this is basically FMTM).

The main functionality I can think of that would be useful for the app are:

• Basemap download, with param selection.
• ODK format conversion: user downloads a submission from ODK Central or FMTM, then converts to another format on their phone.
• Possibly also bundling osm-rawdata for making and displaying data extracts from OSM.
• A small map widget to display the generated basemap, data extracts, and converted ODK data to GeoJSON format.