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

:computer: 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.

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

:package: Package name: com.gordonlu.webviewprogress.aix

:book: Documentation

Event Blocks

ProgressChanged

image

image

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

image

image

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

Parameters: webViewer = component

:duck: Sample Program

image

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.

:inbox_tray: Downloads

:us: :uk: If you speak English:

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

TXT: WebViewProgress.txt (2.2 KB)

:fr: 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.

:+1: Rate my extension! :-1:

  • Good extension!
  • Bad extension.

0 voters


Made with Niotron IDE.

Kindly :email: PM me if you have any questions! Also, if you like my extension, please :heart: 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 image button.

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


Gordon Lu

:speech_balloon: Message :earth_africa: Website :e-mail: E-mail

8 Likes

I recommend you to make it open-source.

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);
    }
}
1 Like

:question:

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

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

1 Like

Need " " in source

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);
    }
}
2 Likes

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.

1 Like

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

image

image

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!

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)

1 Like