How to serve local file content by using toga.WebView

[ccinsz]

I want to access the .html file in the local, how to serve local file content by using toga.WebView?

[freakboy3742]

You run a lightweight web server in a background thread, and then point your app's web browser at that server. The positron-static example demonstrates this.

Alternatively, if it's a single static page of content, you can read the HTML file and set the raw HTML content on the web page. However, this won't work if there are any local URL references on the page. Any images or CSS etc need to be embedded on the page, or linked from an external web server.

[ccinsz]

Read the HTML file and use set_content(root_url, content) to display in the app, but not fully displayed, left and right slide bars appear. How can I do to display fully without slide bars in the app by using toga.WebView?

[mhsmith]

If you want help with that, you'll need to provide:

• Your Toga source code
• Your HTML source code
• A screenshot of what you're seeing
• Which Toga version you're using, and which platform you're running on

[ccinsz]

This is the code.

import toga
from toga.style import Pack
from toga.style.pack import COLUMN

class demo1115(toga.App):

    def startup(self):
        self.main_window = toga.MainWindow(title=self.formal_name)
        main_box = toga.Box(style=Pack(direction=COLUMN))

        self.webview = toga.WebView(style=Pack(flex=1, direction=COLUMN))

        with open(self.paths.app / "templates/1.html") as f:
            content = f.read()
        self.webview.set_content("None", content)

        main_box.add(self.webview)
        self.main_window.content = main_box
        self.main_window.show()

def main():
    return demo1115()

This is the HTML file.
1.zip

This is the screenshot I see.

The version of toga is toga-android~=0.3.1 and the android version is 13.

[freakboy3742]

There have been a lot of bug fixes and improvements since toga-android 0.3.1. If you're having problems, I'd strongly suspect that they'll be fixed by upgrading to toga 0.4.0.

[ccinsz]

Use the toga 0.4.0, it displays nothing.

[freakboy3742]

I've tried your example; and I see the same. However, if I replace the content with a simple <h1>Hello World</h1>, the content is displayed. This suggests the problem is with your web page content.

I have no experience with Bokeh, so I can't provide any advice on what is going on here. My suspicion would be that JS block that is doing the rendering is either (a) not being invoked due to the exact events it is depending on, or (b) is rendering at a size or location that isn't on the page (e.g., zero size, or at an x,y coordinate that is off the page).

[ccinsz]

I try to use toga 0.4.0 and replace the content which is self.webview.set_content("None", "<h1>Hello World public class MainActivity extends AppCompatActivity</h1>"), that has the same problem.

[freakboy3742]

What problem are you trying to solve here? The content is there. If the issue is the size of the text... that's a CSS styling issue. There are hundreds of web pages that document how to style mobile-friendly content, and none of them are Toga specific.

At this point, I'm not sure what you're expecting from us. We've demonstrated that Toga's webview works. The problem is with the content you're putting in that web view. If you don't like the way the content is being displayed... you need to change the content you're putting in the web view, or apply different styling to that content.

[ccinsz]

You can compare the content of <h1>Hello World</h1> and the content of <h1>Hello World public class MainActivity extends AppCompatActivity</h1>. It’s very obvious, the font has been enlarged a lot. So I think there may be a problem in the toga WebView.

[freakboy3742]

I don't have any insight to add here. Toga's Webview is a wrapper around Android's android.webkit.Webview. We're not doing anything to modify the style of the page that is rendered. On the other hand, <h1>Hello<h1> isn't a full HTML5 document, so there's going to be ambiguity about how text is rendered. I'd be willing to bet that if you pass in a full HTML5 document, including style declarations, the rendering will be consistent.

[ccinsz]

Got it. Thank you for your help.