B4A Library WebViewExtras

deboerr · Sep 2, 2022

I know this thread is old, but I would like to add my 2cents here. Advice in this thread from Warwound, Erel and others made my life a breeze to implement accessing localstorage from javascript in a webpage. Thanks guys. The only thing to be careful of is to not put the code in the Initialize sub. Put your code it in B4XPage_Created ... as per below. My B4A app has a webview display avionic data (alt, airspeed, heading, groundspeed etc) which is collected and collated by an ESP32 microcontroller and pushed to the mobile device.

B4X:

Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
    Private WebView1 As WebView
    Dim wvx As WebViewExtras
    Dim wvs As WebViewSettings

End Sub

Public Sub Initialize
'    B4XPages.GetManager.LogEvents = True
End Sub

'This event will be called once, before the page becomes visible.
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("MainPage")
    
    wvx.addWebChromeClient(WebView1, "wvx")
    wvs.setDatabaseEnabled(WebView1, True)
    wvs.setDOMStorageEnabled(WebView1, True)
    
    WebView1.LoadUrl("http://192.168.137.1:8000/")
End Sub

max123 · Sep 2, 2022

Hi @deboerr , please can this help to solve my problem I've posted here ? Maybe permisson problem ?
https://www.b4x.com/android/forum/threads/download-files-from-webview-local-storage.141068/

What I need to do is click a button created by javascript and download the file that javascript pass as blog. This is done internally by threejs library, just use it to export 3D models created by code or by user, in this case it export an STL file. If I click this button on my pc or Android phone browser, it save the file in Download folder where browser store all downloads, but I cannot do the same in a B4A WebView.

deboerr · Sep 3, 2022

The only other change that I made to my project was to add the following 2 lines to the project manifest file. I'm not sure if this is actually needed.

B4X:

AddManifestText(<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />)
AddManifestText(<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />)

Erel · Sep 4, 2022

These permissions are irrelevant on newer versions of Android. You cannot directly access the secondary storage.

max123 · Sep 4, 2022

Hi Erel, so how I can do this unresolved please ?
I'm pretty confused.
If we cannot access files directly, I suppose that handle a file from JS and save it cannot be done...

Maybe using File Provider ?

https://www.b4x.com/android/forum/threads/download-files-from-webview-local-storage.141068/

Thanks

Erel · Sep 4, 2022

I haven't seen all posts in this thread. Generally speaking you can directly access files in XUI.DefaultFolder = File.DirInternal.

Other places require the usage of SaveAs or ContentChooser or ExternalStorage.

SaveAs - Let the user select a target folder + list of other related methods

B4A + B4i example: https://www.b4x.com/android/forum/threads/b4x-texteditor-save-and-load-external-files.132731/#post-838166 List of classes or libraries that can be used to access secondary storages: ContentChooser (Phone libray) - allows the user to select a resource or file using external...

www.b4x.com

max123 · Sep 4, 2022

Many thanks Erel,

the problem for my question is that JS send a file in blob format, it do not expets user intervention and Save dialog, on normal browser it just save the file in browser downloads folder.

Anyway put a Save dialog is not a problem, but just I cannot know how to receive the file and handle it to be saved.

arjian · Nov 20, 2023

hello,
when a site includes several pages like the attached pic

the method "B4A.CallSub('processHTML',true, document.documentElement.outerHTML)" just save the first page, but the browser save all pages in one html file
how can save all pages in one html file?
any help would be appreciated

max123 · Nov 20, 2023

Sorry @arjian , I cannot help you because I've no knowledge on this.

My quetion remains open to all members.
I not yet solved it.

I've created with B4A a sort of 3D CAD with ThreeJS, I can manage complex 3D with boolean subtraction, addition, and some advanced things, but after I create a 3D object I cannot save the resulting 3D model as STL file to be sliced and printed on my 3D print. With browser it works, by default it saves the STL file as blob in Android Download folder, where Chrome save files. I can change it if it is not allowed, just to save the model.

After a lot of work (2 years) this is the last step to get all working.

Please help to know how manage it.

byz · Nov 21, 2023

max123 said:
Sorry @arjian , I cannot help you because I've no knowledge on this.

My quetion remains open to all members.
I not yet solved it.

I've created with B4A a sort of 3D CAD with ThreeJS, I can manage complex 3D with boolean subtraction, addition, and some advanced things, but after I create a 3D object I cannot save the resulting 3D model as STL file to be sliced and printed on my 3D print. With browser it works, by default it saves the STL file as blob in Android Download folder, where Chrome save files. I can change it if it is not allowed, just to save the model.

After a lot of work (2 years) this is the last step to get all working.

Please help to know how manage it.

Perhaps you should try using JavaScript to create objects to save text formatted stl, and then pass it to b4a through JavaScript, which then saves it to your phone.

max123 · Nov 21, 2023

byz said:
Perhaps you should try using JavaScript to create objects to save text formatted stl, and then pass it to b4a through JavaScript, which then saves it to your phone.

Yes thanks @arjian this is what Isearch to do, but without success. I will try the @JohnC code posted here, may I have some success.
ThreeJS save it as 'blob' by default, I'm not sure I can change it. Here the related thread.
https://www.b4x.com/android/forum/t...from-webview-local-storage.141068/post-966871

byz · Nov 21, 2023

max123 said:
Yes thanks @arjian this is what Isearch to do, but without success. I will try the @JohnC code posted here, may I have success.
ThreeJS save it as 'blob' by default, I'm not sure I can change it.
https://www.b4x.com/android/forum/t...from-webview-local-storage.141068/post-966871

js can get blob

max123 · Nov 21, 2023

byz said:
js can get blob

And how to do it? I'm not JS expert. I now do not have here the JS class code because it is on another PC.
May I will search it inside online threejs distribution and if I find it post here or in a new thread.

I remember that I had to use theejs 138 and changed one class to adapt it with an older theejs version to get read working, this way I can open any file like 3D models, textures etc. But only read worked, I cannot save.

The class internally works in a way similar to this.... so at the end download a blob. So may I've to extract Blob back to string or binary.
Note that there are two types of STL files, text based and binary. The binary is more suitable, it cannot textually read, but make smaller files by removing spaces and other things.

JavaScript:

var exporter = new THREE.STLExporter();
var str = exporter.parse( scene ); // Export the scene
var blob = new Blob( [str], { type : 'text/plain' } ); // Generate Blob from the string
//saveAs( blob, 'file.stl' ); //Save the Blob to file.stl

//Following code will help you to save the file without FileSaver.js
var link = document.createElement('a');
link.style.display = 'none';
document.body.appendChild(link);
link.href = URL.createObjectURL(blob);
link.download = 'Scene.stl';
link.click();

Here the relevant JS main code:

JavaScript:

            function exportASCII() {
                Log ("Export ASCII STL file");
                const result = exporter.parse( mesh );
                saveString( result, 'box.stl' );
            }

            function exportBinary() {
                Log ("Export bynary STL file");
                const result = exporter.parse( mesh, { binary: true } );
                saveArrayBuffer( result, 'box.stl' );
            }

            const link = document.createElement( 'a' );  // CREATE DOWNLOAD LINK
            link.style.display = 'none';
            document.body.appendChild( link );

            function save( blob, filename ) {
                Log ("Save the file: " + filename);
                link.href = URL.createObjectURL( blob );
                link.download = filename;
                link.click();
            }

            function saveString( text, filename ) {
                Log ("Save string: " + filename);
                save( new Blob( [ text ], { type: 'text/plain' } ), filename );
            }

            function saveArrayBuffer( buffer, filename ) {
                Log ("Save array buffer: " + filename);
                save( new Blob( [ buffer ], { type: 'application/octet-stream' } ), filename );
            }

Here the example I working on to test STL save:
https://threejs.org/examples/misc_exporter_stl
https://github.com/atnartur/three-STLexporter
https://threejs.org/docs/#examples/en/exporters/STLExporter

JohnC · Nov 21, 2023

Please start a new thread and continue this particular issue there so this thread doesn't fill with too many off-topic posts.

max123 · Nov 21, 2023

I will do it, thanks fo your help @JohnC .

B4A Library WebViewExtras

Attachments

deboerr

New Member

max123

Well-Known Member

deboerr

New Member

Erel

B4X founder

max123

Well-Known Member

Erel

B4X founder

SaveAs - Let the user select a target folder + list of other related methods

max123

Well-Known Member

arjian

Member

max123

Well-Known Member

byz

Active Member

max123

Well-Known Member

byz

Active Member

max123

Well-Known Member

JohnC

Expert

max123

Well-Known Member

Similar Threads