Browser support

[ashes999]

Hi,

Kivy looks interesting. Are there any plans to support outputting projects against HTML5/Javascript?

This might be naive (I don't know much about these technologies), but if Kivy is based on Cython, it might be possible to use Emscripten to compile it into Javascript. I know they discussed this in a Skulpt issue.

[hunternet93]

While probably technically possible, it would require hundreds of developer-hours and doesn't really fall in Kivy's scope. While I'm not involved in the project, I'm pretty sure the devs don't have any plans for transpilation features.

[matham]

This has also been talked about at https://groups.google.com/forum/#!searchin/kivy-dev/html5/kivy-dev/xBeaPv1aXWo/PLGdnCAOAwAJ. And as mentioned we have no current plans to do this.

[dgym]

I'm also very interested in deploying Kivy apps via the web, running directly in the browser. It would be a great additional platform for some apps.

Looking through the groups discussion and a few others there seems to be two ideas here. One is to make the apps run completely in the browser (either by transpiling Python or using emscripten). Another is to have the app run on the server but render its display in the browser (this is a thin client set up).

I don't think the thin client idea scales very well, I would much prefer to have the whole app running in the browser. So I gave it a try: pong demo. Please note that the page loads very slowly, and I have only seen it work with Firefox, but if it does work you should see the Pong demo running, and if you open up the developer tools console some familiar Kivy startup output. This is the real Pong demo too, with a Python file and a kv file. I may have changed two lines of code at most.

To get this far I started by compiling Python 3.5.2 with emscripten. This work can be found here.

Kivy has a number of Cython extensions in packages and they proved quite difficult to statically link (an emscripten requirement) but I now have a solution for that which I need to write up. I'll be adding an example to my project.

With the compiled parts in place I made the Python sources available to the virtual file system and then started working though a bunch of import errors. Emscripten doesn't support pthreads so those libraries gave some trouble. The same for sockets as used by tuio. However the number of changes to get Pong working were encouragingly small. Emscripten has support for SDL2 and OpenGL ES so graphics just sort of worked, which is nice.

I have some experiments to run (trying more apps, working out what fails in some browsers), some steps to write up and some code to check in. I just wanted to offer some hope for people who really wanted this and to share my progress. I don't see any reason why support for this platform couldn't end up in master, even if the build instructions are maintained separately (they are quite involved).

Hope it works for at least one other person out there...

[KeyWeeUsr]

Yeah, seems like it's Firefox only thing. Also I noticed multitouch is broken. The rest however seems to be quite smooth if you have just that tab/page opened. Also if you try to open console or inspect an element, it'll start masively lagging until the console is open. Probably a reaction to changing the screen size. Yet it's really fancy to see Kivy work at least in some browser! Was it compiled with GCC or CL/MSVC?

[tshirtman]

i'm prety sure emcascripten is a frontend to llvm. so neither gcc or cl/msvc.

Anyway, i agree it's a promising path, if the changes are minimal in the framework, and there is a documented procedure to package, i don't see any reason not to include it, although i'd be worry of giving people the impression it's going to deliver a good experience, save for a lot of optimisations, i don't see how it could deliver something as smooth as a native app, but as long as it's marked as experimental, and there is a note/warning about potential performances issue (startup time and in app performances).

[dgym]

I have had emscripten compiled projects working on other browsers before, including Chrome, Android, Safari, iOS and IE. I hope the problem(s) with my current build can be tracked down and fixed.

Yes, that would be llvm doing the compiling.

Out of the box no mouse input was working, I had to make some small changes to the WindowSDL class to create the touch events based off SDL2 events. If browsers support multitouch (I'm sure they do) there should be no issue adding another input provider.

Audio does not work at all yet. I'm not sure that there is an emscripten port of the SDL2 mixer.

The lag when opening the developer tools is because the compiled javascript source is massive and takes a long time to render. I avoid the source code tab and everything seems fine. This situation might get much better if WebAssembly support becomes mainstream. WebAssembly should also reduce the size of the program being downloaded and its parse+start up time.

As for performance of the app - some emscripten compiled code has been shown to run at up to 50% of the speed of natively compiled code. That was the best case but I think we might hope for only 5-10 times slower than a native app over all for CPU stuff. Some of this could be regained by compiling everything through Cython when doing a web release. Rendering shouldn't take such a hit as it is still handled by the GPU.

I guess we will see as we get more stuff working.

[ashes999]

@dgym does this mean that there are now "official" plans for Kivy to support HTML5?

[dgym]

I'm just trying to make it work at all. It would be up to others to decide if adding this support to Kivy master is the best way forward.

[inclement]

This is great, very nice work!

Personally, I'd love to have this working smoothly in kivy master - I'm not sure if we'd be able to officially support it much, but I don't think that should get in the way of making it as easy as possible.

[dessant]

Let's reopen, we are very much in favor of seeing this integrated in some form, though as others noted, it will most likely happen as a community effort.

[dgym]

I have added my work so far to this branch: https://github.com/dgym/kivy/tree/emscripten-wip

It breaks some things and I'm not convinced that the build process should even be in the Kivy repo. The submodule I added certainly shouldn't be. However it should hopefully give anyone interested a way to reproduce my work and builds.

So those caveats are quickly adding up, here are some things I'm having to deal with:

Building this is horribly slow Linking with emcc takes a long time, and any project with pyx modules will have to go through this. I have managed to separate out all the .py files though - they get transferred in zip files so rebuilding them is quick.

The generated files are huge The whole thing is about 40MB of javascript files, and although they compress well (~5MB over the network) it is still a lot of source for the client to process. In fact it is too much for Chrome to process (see below).

The page takes a long time to load Firefox on my desktop takes many seconds to load the page. Mobile devices would presumably suffer even more.

It doesn't work with Chrome Chrome has a hard coded limit for the size of a single js file. The current builds exceed that limit. It is possible to work around this by switching to dynamically linked modules instead of the current static linking process but calling functions in another module is slow, this could really hurt performance.

Many of these issues should be considerably improved once WebAssembly (wasm) gets widespread support. Emscripten will have wasm support too so everything done on this proof-of-concept branch is well worth having.

I'm thinking the next steps would be to:

• Package up all the examples, this should give a good idea of what isn't working.
• Add multi touch support.
• Add sound support.

[dgym]

@helenst kindly put together builds for lots of the examples: https://dgym.github.io/kivy-browser-demo/

It seems there is a text input rendering problem - another thing to add to the list.

[dessant]

@dgym, you've been invited to the Contributor team, this gives you write access in case you'd like to work in a branch directly. Thanks a million times for your work, your demo is truly amazing.

[dgym]

Some updates, but sadly no progress:

I was looking into Chrome support, but although I got a simple Python+SDL2 small enough to run I have had no such luck when adding Kivy. I have also tried using Emscripten's dynamic linked library support to split things up but without success so far.

I have found some build flags that reduce the js file size from ~40MB to ~30MB, unfortunately at the cost of link times, which end up at tens of minutes.

The TextInput rendering issue looks like a npot texture problem to me. IIRC WebGL doesn't support non-power-of-two textures and yet something is clearly visible even if a little squashed. I don't know if this is something being handled in Emscripten's GL stack or in Kivy's internals so more investigation is required.

For multitouch the browser does indeed have support. SDL2 has touch events but I don't know if they are hooked up by default. Unfortunately I don't have a multitouch device that will run this stuff, so I haven't figured out how to develop this feature yet.

[Tset-Noitamotua]

The Pong demo from here did not work for me with latests Firefox on Windows 7 :-(

But nice work and great project! Can't await to have Python in browser(s) and JavaScript buried ... my biggest dream --> prowser ;-)

[yaki29]

@dgym That was really awesome, your demo, repository, ... it was too good. I liked it and would love to work further in it. Thanks for your contribution. :+1:

[rtorresj]

Maybe this is crazy or maybe it has already been discussed, but about the pong demo, maybe a chrome or firefox extension with the kivy library could help it load faster

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Tset-Noitamotua]

❤️❤️❤️ Python in the browser ❤️❤️❤️

The initial version of WebAssembly has reached cross-browser consensus. -->

How are chances now for WebAssembly to make Kivy live in the browser?

WebAssembly Home wasm High-Level Goals wasm Use Cases wasm Github wasm spec draft

... still dream of it and love the idea of Python in the browser ... This would make the world a better place! 😀

[tito]

@dgym Great job to bring back this project to life :) You've gone further than my POC, which is great! The website is awesome. Again, good job :)

[lrq3000]

What about brython and skulpt as backends?

[cromat]

@lrq3000 Brython could be probably a better option as it works with python 3.x

[cromat]

Maybe this is something that could help.

PyPy.js is an experiment in building a fast and compliant python environment for the web. It uses the PyPy python interpreter, compiled for the web via emscripten, with a custom JIT backend that emits asm.js code at runtime. Try it out below, or see the links above for benchmarks and download information.

[tytgatlieven]

Hi everybody

I'm about to write a thesis proposal to work on the issue of kivy running in the browser. All possible additional info about possible approaches is certainly welcome!

kind regards

Lieven

[ghost]

Since Pyodide used cpython-emscripten for run python in browser, i think that it will be possible to run Kivy Apps in Browser

https://hacks.mozilla.org/2019/04/pyodide-bringing-the-scientific-python-stack-to-the-browser/

Has someone already tried ?

[matham]

No one tried this to my knowledge. After having tried getting kivy in the browser to work with vispy's backend, I'm actually wondering why someone would want to run kivy in the browser other than curiosity or to scratch an itch?

I was interested in this purely for educational reasons so people can try simple kivy demos in the browser, but I can't see how this would work with any real app. E.g., Pyodide, even though it could potentially run kivy and other python code there's many things it cannot do and would need some js code to be able to do something useful. E.g. threading, files (except virtual files), and asyncio (meaning no network stuff) doesn't work. So to interact with the outside world you'd need to write some js code for these missing things. And at that point why not just write the app in js completely?

Also, it seems like a kivy app in the browser would have a completely different feel than normal web apps, which users may not like. And that's not including the initial loading time, which isn't faced by normal webapps, or if running kivy natively (as you download only once, not every time you load the website).

Are there situations where kivy wouldn't work normally so you'd want to use a browser instead? I did look briefly at pyodide when it came out and just now again and it looks fairly doable. But besides the issues I mentioned, it's at such an alpha stage that you can't really write a real app. E.g. there's no easy way afaict to download arbitrary pure python packages from pypi, except by adding it manually to the pyiodide repo.

[matham]

Here's a experimental implementation of kivy running in Pyodide. You can explore with it here: https://alpha.iodide.io/notebooks/2882/.

A few things to keep in mind:

• Pyodide is still highly experimental and so is my implementation of kivy it.
• Read the explanation text in the notebook.
• The kivy window is shown at the bottom of the text to the right, so scroll all the way down after you run the app.
• Make sure to wait a little before running each cell, especially the first time before you run the actual app. Otherwise you may get OSError: broken data stream when reading image file. If you do get that error, just refresh the page and try again, or run the code again.
• There seems to be a transparency issue where the background is not cleared.
• Text looks awful.
• This is run using native js api (I wrote a new window and gl provider using the js native API), while this prevents any compilation issues it probably (maybe) is slower than the sdl2.
• I did not implement the keyboard and clipboard yet. Keyboard should be easy, clipboard we'll have to work out the permissions.

[Epse]

@matham is it just me or does your notebook no longer work? I've been trying just about every approach to get kivy in the browser recently for my thesis, so I'd love to get your attempt working and look into improving it.

For reference, this is the error appearing in my browser console when executing the block which defines kpy:

LinkError: import object field '_hiwire_get_bool' is not a Function iodide.eval-frame.js line 2 > eval:312:45

[psederberg]

@matham, @Epse, et al.: I'm very interested in getting Kivy working in the browser and it sure looks like Pyodide may be a solid means for achieving this goal. It looks like you've already made some amazing progress.

If you're no longer working on it, would you be willing to share how far you got and your basic approach (I'm new to Pyodide, so am just getting familiar with porting simple packages)?

If you're still interested and working on it, I'd be happy to help out in whatever way I can (and will try and recruit colleagues to join the fun). This is certainly going to entail a good bit of work with many decision-points along the way, so I figure putting a lot of minds together might help make it happen.

[tytgatlieven]

Hi @psederberg

@Epse is a thesis student I'm mentoring. Though the corona crisis makes mentoring significantly harder.

It seems to me there is a need for a vast body of knowledge in order to get this working properly. In that regard: The more the merrier!

I'll discuss things with @Epse and get back to you.