Kivy as a backend?

[lrq3000]

Kivy is a python based cross platform graphical backend for mobile and desktop apps. It can compile to both Android and iOS.

I would like to discuss this library as a potential backend for Zim Desktop Wiki on mobile phones, does someone with experience on it think it might be feasible? Do you Jan already considered it and rejected for any reason?

Btw there is also https://github.com/kivy/python-for-android if we only want a python to android packager and builder, but i think we can as well use kivy which is cross-platform aed provide the graphical backend.

[jaap-karssenberg]

In my reasearch Kivy come out as a candidate as well.

I do not anticipate using graphical parts of Kivy, just the packaging as a wrapper for an HTML view.

Please have a look at the wiki pages for this repository (link in README) for further notes.

• Jaap

On Thu, Dec 14, 2017 at 10:18 AM Stephen L. notifications@github.com wrote:

Kivy is a python based cross platform graphical backend for mobile and desktop apps. It can compile to both Android and iOS.

I would like to discuss this library as a potential backend for Zim Desktop Wiki on mobile phones, does someone with experience on it think it might be feasible? Do you Jan already considered it and rejected for any reason?

Btw there is also https://github.com/kivy/python-for-android if we only want a python to android packager and builder, but i think we can as well use kivy which is cross-platform aed provide the graphical backend.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/jaap-karssenberg/zim-android-mockapp/issues/4, or mute the thread https://github.com/notifications/unsubscribe-auth/ABMMHsnAYqU050fV7QAeUiysdNBekiLfks5tAOftgaJpZM4RBwhj .

[lrq3000]

Ah sorry I missed this part of the wiki, I guess you are referring to this.

I'm just starting with Kivy for my own apps, if I can get the hang of it I might give it a try for Zim Notes. Worth having a look for a starting point, beside the native embedded browser, is demo/kivycatalog in the kivy-examples package, this is a two-pane renderer for RST syntax, and it can render more complex objects than Zim supports (buttons, radio boxes, etc) so I guess Kivy is a very good candidate for Zim Notes rendering!

[lrq3000]

I have taken a look into this issue, I will now start documenting here because I begin to accumulate too much info and I risk losing some leads in case one fails.

Reading note (view webpage)

About integrating a webview widget (to see a webpage), I have found two ways: either via Kivy + pyJnius calling native Android Java WebView widget (more infos in the Kivy news here about performances and stuff), or a pure python approach using pyWebView + python-for-android (with the advantage that it should work the same on all platforms, not just Android, which could accelerate development as the app would be testable as-is on desktop).

Of interesting note, there is also Remi, to generate a GUI using only Python and no HTML, with a standalone webserver and it can interface with pyWebView using the argument start(myApp, standalone=True). This can be a lightweight interesting alternative to Kivy. There were also some attempts to port CEF-python (Chrome as embedded browser) to Kivy but they never went beyond alpha (see here and here).

About using Kivy to compile for Android, I have found a great tutorial. Basically, since we need webview, we need:

• pyJnius (make sure to follow the non trivial install instructions) to be able to call native Android Java class WebView widget.
• Buildozer to compile all Python requirements for our app into a nice APK.
• python-for-android for some bindings that were not yet ported to pyJnius.

However, Buildozer works only on Linux and OSX at the moment. But Kivy provides a VirtualBox virtual machine with Buildozer and python-for-android pre-installed.

Editing notes (editing webpage?)

This is the most tricky part. Although viewing a webpage won't be too problematic once we figure out how to build a webview apk, which was already done be several people, the tricky thing is how to manage edition of a note.

The easiest way is to just mimic what most apps (and even Kivy examples) do:

• either a two-pane window with one being the plain text editor (with all markup code) and the other being the realtime render. Works well for tablets, not so much on phones with limited screen space.
• either a full screen note view, and a "Edit" button to switch to "markup source code" editor mode. Should work well on phones too.

However, to be really perfect, we would need a WYSIWYG editor, similar to a rich text editor, where we can both see the markup render and modify on the same view.

Here are the solutions/issues I found to make a WYSIWYG editor in Android:

• it's rare to do that, most developers just use a simple TextView box.
• Kivy does not provide that except for a CodeInput widget, but it's only for highlighting. We would need to make a custom widget to manage that kind of thing natively.
• Another option is to use PyJnius and SpannableString to modify the rendering of a TextView. But this will lead to some python code snippets being close to Java because of PyJnius calls (see tutorial here and a project using this approach here and another one for Markdown called Markwon). Also another project provides a Java widget RichEditText extending EditText, probably callable using PyJnius.
• Lastly, we can simply continue using the WebView, and do the coding on the generated webpage, by using Javascript, and calling back and forth from Python. This is the approach used in this project. However, some developers raised concerns about the inherent issues, apparently there is then no text cursor, and no soft keyboard by default (user has to do a long press).

Concluding words

Per the specifications on the wiki and after my research, it seems that:

• displaying a webpage won't be an issue.
• editing a webpage is possible but has some usability issues (maybe we can fix them?)
• an alternative might be to play with the native SpannableString, but I did not find a native python way of doing it, it's only through Java calls via PyJnius.
• In any case, WYSIWYG editor on Android is quite a bit an uncharted territory. It will be challenging.

@jaap-karssenberg some questions for you: the wiki specification does not really detail the big plan: why do you want the app to work with HTML pages? I guess you plan the renderer and editor to be coded in Javascript? Or do you have something else in mind?

[lrq3000]

@jaap-karssenberg Ah I forgot my last and most important question: how do you plan the editor to work with the renderer? By converting back and forth from/to HTML and Zim code?

My current idea of something that would work fast would be to convert ZIM code to HTML for rendering, and then the editing would happen directly on the HTML page (using a specialized editor like CKEditor or maybe better Trix), and after change it would be converted back to ZIM. As there is already an HTML export from ZIM, the first part is covered. All that would remain would be to code a simple converter of HTML to ZIM.

Is this what you had in mind?

[lrq3000]

@jaap-karssenberg And lastly, can you outline how you accomplish the feat of having a WYSIWYG editor in Zim Desktop? In particular, how can you render, allow edition on the render, all the while saving the markup behind the scenes transparently to the user? Because maybe we can use the same trick even if the mobile app is using a different technology.

[lrq3000]

BTW, there are lots of HTML to Markdown javascript WYSIWYG editors:

• A Python based one to convert back and forth to Markdown (can be a good inspiration): http://md-wysiwyg.sourceforge.net/
• https://github.com/IonicaBizau/medium-editor-markdown
• https://github.com/sofish/pen#readme
• https://github.com/bergie/hallo
• http://marklighteditor.com/ (quite interesting as it allows on the fly rendering after typing markup, instead of highlighting and clicking on a button - this would be super useful on a mobile app)

Let me know if there is one that looks close to what you had in mind for Zim, this can be great for inspiration!

[lrq3000]

Update: I tried to compile an APK using the following steps:

• Use the Kivy VirtualBox machine image.
• Update python-for-android (to avoid the "Invalid or unsupported command list" error) by installing from github: pip install git+https://github.com/kivy/python-for-android.git. In case you have issues with the latest release, I used the commit 8829312fd187121384939627ec09354657821ae9 specifically.
• Install dependencies (replace openjdk-7-jdk by openjdk-8-jdk).
• Continue the python-for-android install tutorial from "Installing Android SDK" onwards.
• Note: be sure to clean up `/home/kivy/.local/share/python-for-android/dists/' whenever you want to recompile your APK cleanly (particularly if you had errors during compilation because of wrong arguments).

In the end, I ran into several issues and could not compile anything (see here for more infos).

I think that for the moment, python-for-android is not mature enough, it is probably better to postpone the project for now (unless if a python-for-android wizard pass by, feel free to give it a try).

[lrq3000]

I have advanced a bit, I made a theoretically functional app to display webpages generated from a background webserver as a service.

Why theoretically? Because I cannot test with Kivy Launcher, because even though Twisted is supported by Kivy, it is apparently not supported as a background service in Kivy Launcher (Kivy Launcher supports background services otherwise, such as OSC server).

Also, Kivy Launcher should be able to launch any pure python library, so I tried with native wsgiref and cherrypy and waitress, but none of them work, it seems Kivy Launcher is not 100% compatible with the basic CPython stack, it's only a partial implementation.

Thus, the only way is to compile via Python-For-Android, which should support this kind of application (webserver + webview client), using for example the flask backend.

All my work is available on my repo:

https://github.com/lrq3000/zim-android-mockapp

I left multiple implementations of the background service, just rename the folder you want to use to "service", and it should work the same. It's also testable under Windows, Linux and MacOSX by using python main_desktop.py, so once we figure out how to run the service under Android, it will be possible to develop & test most of ZimAndroid on desktop computers.

[lrq3000]

Also note that a current limitation of using webview on Android is that it's not possible to add any other widget on-screen, thus by going this route, ZimAndroid will need to have a purely web interface, to control parameters configuration, browsing to other notes etc

[lrq3000]

The specific test I did for twisted is here: https://github.com/lrq3000/kivy-twisted-android

The app connects but does nothing afterwards...

Also might be interesting:

• Python 3 compatibility for webview on Android: https://github.com/kollivier/pyeverywhere/blob/master/src/pew/kivy_pew/webview.py
• Background service + UI app, all in one and working in Kivy Launcher (using OSC): https://github.com/tshirtman/kivy_service_osc

[lrq3000]

Finally I could make it!

See PR #5 for PACK-1 & PACK-2 proposal :-)