[F/OS] 🌐 WebViewProgress - Detect Loading Progress Of WebViewer!

gordonlu310 · March 8, 2022, 1:27am

Introduction

A non-visible extension that detects the progress loading of the WebViewer.

A sister extension of the ImageUtil extension, which provides additional tools to Images.

Release date: 2022-03-08T00:20:00Z

Package name: com.gordonlu.webviewprogress.aix

Documentation

Event Blocks

ProgressChanged

This event is fired when the progress of the WebViewer has changed.

Note: currently, there still isn't a method to detect which WebViewer's progress has changed. Hence, better use one WebViewProgress extension for each WebViewer.

Parameters: progress = number (int)

Method blocks

ApplyProgressChangedListener

Listens to all web viewer loading changes and fires the ProgressChanged event when it changes.

Parameters: webViewer = component

Sample Program

This program uses a Canvas as a progress bar, with the WebViewProgress detecting the progress changes. The height of the canvas is 7 pixels, and the LineWidth is also 7 pixels, so drawing the line at 7/2 pixels will fill the whole canvas height. The progress parameter returns a value between 0 and 100, so if the progress is 40, it means that 40% of the webpage is loaded. Since 40% = 40/100, we apply it to here. Then, we multiply the percentage with the width of the canvas, so that it fills 40% of the canvas.

Downloads

If you speak English:

AIX: com.gordonlu.webviewprogress.aix (7.0 KB)

TXT: WebViewProgress.txt (2.2 KB)

Pour les utilisateurs français:

AIX: com.gordonlu.webviewprogressfr.aix (7.3 KB)

TXT: WebViewProgressFr.txt (2.2 KB)

Unfortunately, because of AI2 translations, I have to remove all diacritics (e.g. á) from the French translation.

Rate my extension!

Good extension!
Bad extension.

0 voters

Made with Niotron IDE.

Kindly PM me if you have any questions! Also, if you like my extension, please like it! It takes some effort for me to make it...

Votes and likes tell me the general user feedback of my extension. If you read this extension, please take 20 seconds to drop by and give a vote / like!

If you have any features that you want to add and you know the code, PM me or directly reply below using the button.

By downloading my extension, you agree the terms and conditions in my website

Gordon Lu

Message Website E-mail

Hmmm · March 8, 2022, 5:58am

I recommend you to make it open-source.

gordonlu310 · March 8, 2022, 5:58am

It is already open source in post #1. Read the main post, and download the TXT file if you want it. You will find that the source code in the text document.

Usually for small extensions, I will make them open source.

P.S.: Now, you can also find the source code of the extension in my website, under Open Source.

But thank you for commenting - I appreciate it.

package com.gordonlu.webviewerprogress;

import android.app.Activity;
import android.content.Context;
import com.google.appinventor.components.annotations.*;
import com.google.appinventor.components.common.ComponentCategory;
import com.google.appinventor.components.runtime.AndroidNonvisibleComponent;
import com.google.appinventor.components.runtime.ComponentContainer;
import com.google.appinventor.components.runtime.EventDispatcher;

import android.webkit.WebView;
import android.view.View;
import com.google.appinventor.components.runtime.AndroidViewComponent;
import android.webkit.WebChromeClient;

@DesignerComponent(
        version = 1,
        description = "A non-visible extension that detects the progress loading of the WebViewer.",
        category = ComponentCategory.EXTENSION,
        nonVisible = true,
        iconName = "https://docs.google.com/drawings/d/e/2PACX-1vQCI87PHLBF0jb8QWyYmIRQSjjNW3EFXf-qpsWCvBYkUQ9vEgPAB8SpxcMpblxNpbIYrjCjLrRLIU2c/pub?w=16&h=16")

@SimpleObject(external = true)
//Libraries
@UsesLibraries(libraries = "")
//Permissions
@UsesPermissions(permissionNames = "")

public class WebViewProgress extends AndroidNonvisibleComponent {

    //Activity and Context
    private Context context;
    private Activity activity;

    public WebViewProgress(ComponentContainer container){
        super(container.$form());
        this.activity = container.$context();
        this.context = container.$context();
    }

    @SimpleFunction(description = "Listens to all web viewer loading changes and fires the ProgressChanged event when it changes.")
    public void ApplyProgressChangedListener(AndroidViewComponent webViewer){
        View view = webViewer.getView();
        WebView wv = (WebView) view;
        wv.setWebChromeClient(new WebChromeClient() {
            public void onProgressChanged(WebView view, int progress) {
                ProgressChanged(progress); 
    }
                    });
    }

    @SimpleEvent(description = "This event is fired when the progress of the WebViewer has changed.")
    public void ProgressChanged(int progress){
        EventDispatcher.dispatchEvent(this, "ProgressChanged", progress);
    }
}

Anke · March 8, 2022, 9:07am

gordonlu310 · March 8, 2022, 9:09am

Sorry, that's a copy and pasting mistake from Notepad. Will fix it right away!

Android_Builder · March 8, 2022, 9:13am

Hmm, I saw many miskates in open-source code.

Android_Builder · March 8, 2022, 9:14am

Need " " in source

gordonlu310 · March 8, 2022, 9:15am

This should be correct then. I copied the code to Notepad, then to here. Thank you for reporting;.

package com.gordonlu.webviewerprogress;

import android.app.Activity;
import android.content.Context;
import com.google.appinventor.components.annotations.*;
import com.google.appinventor.components.common.ComponentCategory;
import com.google.appinventor.components.runtime.AndroidNonvisibleComponent;
import com.google.appinventor.components.runtime.ComponentContainer;
import com.google.appinventor.components.runtime.EventDispatcher;

import android.webkit.WebView;
import android.view.View;
import com.google.appinventor.components.runtime.AndroidViewComponent;
import android.webkit.WebChromeClient;

@DesignerComponent(
        version = 1,
        description = "A non-visible extension that detects the progress loading of the WebViewer.",
        category = ComponentCategory.EXTENSION,
        nonVisible = true,
        iconName = "https://docs.google.com/drawings/d/e/2PACX-1vQCI87PHLBF0jb8QWyYmIRQSjjNW3EFXf-qpsWCvBYkUQ9vEgPAB8SpxcMpblxNpbIYrjCjLrRLIU2c/pub?w=16&h=16")

@SimpleObject(external = true)
//Libraries
@UsesLibraries(libraries = "")
//Permissions
@UsesPermissions(permissionNames = "")

public class WebViewProgress extends AndroidNonvisibleComponent {

    //Activity and Context
    private Context context;
    private Activity activity;

    public WebViewProgress(ComponentContainer container){
        super(container.$form());
        this.activity = container.$context();
        this.context = container.$context();
    }

    @SimpleFunction(description = "Listens to all web viewer loading changes and fires the ProgressChanged event when it changes.")
    public void ApplyProgressChangedListener(AndroidViewComponent webViewer){
        View view = webViewer.getView();
        WebView wv = (WebView) view;
        wv.setWebChromeClient(new WebChromeClient() {
            public void onProgressChanged(WebView view, int progress) {
                ProgressChanged(progress); 
    }
                    });
    }

    @SimpleEvent(description = "This event is fired when the progress of the WebViewer has changed.")
    public void ProgressChanged(int progress){
        EventDispatcher.dispatchEvent(this, "ProgressChanged", progress);
    }
}

gordonlu310 · March 8, 2022, 9:42am

I would like to add a new feature tomorrow that also returns the WebViewer's URL in the ProgressChanged event. The WebViewer is not returned, at least the URL is returned...

package com.gordonlu.webviewerprogress;

import android.app.Activity;
import android.content.Context;
import com.google.appinventor.components.annotations.*;
import com.google.appinventor.components.common.ComponentCategory;
import com.google.appinventor.components.runtime.AndroidNonvisibleComponent;
import com.google.appinventor.components.runtime.ComponentContainer;
import com.google.appinventor.components.runtime.EventDispatcher;

import android.webkit.WebView;
import android.view.View;
import com.google.appinventor.components.runtime.AndroidViewComponent;
import android.webkit.WebChromeClient;

@DesignerComponent(
        version = 1,
        description = "A non-visible extension that detects the progress loading of the WebViewer.",
        category = ComponentCategory.EXTENSION,
        nonVisible = true,
        iconName = "https://docs.google.com/drawings/d/e/2PACX-1vQCI87PHLBF0jb8QWyYmIRQSjjNW3EFXf-qpsWCvBYkUQ9vEgPAB8SpxcMpblxNpbIYrjCjLrRLIU2c/pub?w=16&h=16")

@SimpleObject(external = true)
//Libraries
@UsesLibraries(libraries = "")
//Permissions
@UsesPermissions(permissionNames = "")

public class WebViewProgress extends AndroidNonvisibleComponent {

    //Activity and Context
    private Context context;
    private Activity activity;

    public WebViewProgress(ComponentContainer container){
        super(container.$form());
        this.activity = container.$context();
        this.context = container.$context();
    }

    @SimpleFunction(description = "Listens to all web viewer loading changes and fires the ProgressChanged event when it changes.")
    public void ApplyProgressChangedListener(AndroidViewComponent webViewer){
        View view = webViewer.getView();
        WebView wv = (WebView) view;
        wv.setWebChromeClient(new WebChromeClient() {
            public void onProgressChanged(WebView view, int progress) {
                String webUrl = view.getUrl();
                ProgressChanged(progress, webUrl); 
    }
                    });
    }

    @SimpleEvent(description = "This event is fired when the progress of the WebViewer has changed.")
    public void ProgressChanged(int progress, String url){
        EventDispatcher.dispatchEvent(this, "ProgressChanged", progress, url);
    }
}

EDIT: I figured out that this does not work.

TIMAI2 · March 8, 2022, 10:00am

This can all be done without an extension....

gordonlu310 · March 8, 2022, 10:02am

I know. You can also use BeforePageLoaded to check whether the page has loaded, but I emphasize on the loading progress in this extension (e.g. it loaded 40% of the website), as defined by the title.

[FREE] WebViewProgress - Detect Loading Progress Of WebViewer!

StarredStare · March 8, 2022, 11:32am

here is a test report i made. will be published in aicode.

APK

Google Pixel 5 Emulator - Works

Google Pixel 5 - Works

Google Pixel 4 Emulator - Works

Companion

Google Pixel 5 - Works

aiStarter emulator - Works

Download AIA:

D.aia (7.9 KB)