Android nativ webview as kivy widget

[Heiko Baumann]

Hi,

i'm new to kivy and android app development. So maybe it is a dumb question.

I try to write a kivy app to control an rc car via an raspberry pi 3. I was able to design a simple UI with 4 Buttons to control the car. This was straightforward.

But now i also want to show the live video from the raspi cam via an native android webview.

For this i use the great pistreaming https://github.com/waveform80/pistreaming to get a live stream with just about 0.5 sec. delay.

I googled a lot and found different posts about the same issue.

I used this sample code to get the webview started from my app:

https://github.com/kivy/kivy/wiki/Android-native-embedded-browser

But the problem is, it is always fullscreen. After some reading i figured out how to resize the webview widget and i also the activity window. But there is still something that hides the other kivy stuff like buttons etc.

Here is my current webview class:

class Wv(Widget):
    def __init__(self, **kwargs):
        super(Wv, self).__init__(**kwargs)
        Clock.schedule_once(self.create_webview, 0)

    @run_on_ui_thread
    def create_webview(self, *args):
        webview = WebView(activity)
        #webview.setInitialScale(1);
        settings = webview.getSettings()
        #settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN)
        settings.setJavaScriptEnabled(True)
        settings.setUseWideViewPort(True) # enables viewport html meta tags
        settings.setLoadWithOverviewMode(True) # uses viewport
        settings.setSupportZoom(True) # enables zoom
        settings.setBuiltInZoomControls(True) # enables zoom controls
        wvc = WebViewClient()
        webview.setWebViewClient(wvc)
        #activity.setContentView(webview)
        activity.setContentView(webview, LayoutParams(200, 400))
        params = activity.getWindow().getAttributes()
        params.height = 400
        params.width = 200
        activity.getWindow().setAttributes(params)
        webview.loadUrl('http://raspi:8082/')


And this is my current .kv file:

<Button>:
        font_size: 40
        color: 0,1,0,1
        size_hint: 0.3, 0.16

<FloatLayout>:
        BoxLayout:
                orientation: 'vertical'
                size_hint: [1,0.5]
                pos_hint: {"top": 1, 'left': 1}
                BoxLayout:
                        size_hint: [1,0.5]
                        pos_hint: {"top": 1, 'left': 1}
                        Wv:
                                id: webview

        #size_hint: [1,0.5]
        Button:
                id: connect
                text: "Connect"
                font_size: 15
                size_hint: 0.25, 0.05
                pos_hint: {"right": 1, 'y': 0.45}
                on_press: root.playPause()

        Button:
                id: up
                text: "Up"
                pos_hint: {"right": 0.66, 'y': 0.26}
                on_press: root.key_press("up")
                on_release: root.key_release("up")

        Button:
                id: left
                text: "Left"
                pos_hint: { 'x': 0.06, 'y': 0.1}
                on_press: root.key_press("left")
                on_release: root.key_release("left")

        Button:
                id: down
                text: "Down"
                pos_hint: { 'right': 0.66, 'y': 0.1}
                on_press: root.key_press("down")
                on_release: root.key_release("down")

       Button:
                id: right
                text: "Right"
                pos_hint: { 'right': 0.96, 'y': 0.1}
                on_press: root.key_press("right")
                on_release: root.key_release("right")


I am not sure if its possible what i want to accomplish but after if found kivy-gmaps i guess it should be possible.

https://github.com/tito/kivy-gmaps

I tried to understand the kivy-gmaps code but i was not able to find where the magic happens.

Is there anyone who was able to use a webview with kivy that is not fullscreen and does not overlap any other kivy elements?

Regards
Heiko

[Melantone14]

From a rapid read of googlemap code, it puts the android view under the kivy window and makes the kivy window transparent setting at 0,0,0,0 the color field