I was going to say that you seem to be running v1.1 of the extension, the latest being v12.
This is available on github HERE
Well I used that link and downloaded the one in /out and it said the version is v13 so i was wondering if you were gonna release that
The beta (V13) is available HERE
This is as released as you can get at the moment. For stability/reliability, best to use V12.
I needed to use v13 to download blobs
Sorry, @brandonh , I confused you with another user who was running 1.1 of the extension.
What is you issue with using V13 ?
There is no problem with V13, I just wondered when you are gonna release V13 because the last release was on March 9, 2023
It'll be released very soon.
Users are welcome to test the improved features.
1 Like
i am trying to load glb file in html webviewer from file picker but not working for me i tried 3 methods but i am doing something wrong please guide me if anyone know how to do it
view3D_copy.aia (754.6 KB)
The key concept here is that the properties not available in designer should be changed only after SetWebView method. Mostly just after it such as EnableJs, FileAccess or SupportMultipleWindows.
i can't understand what you are trying to say . is there any solution for this
-
Why are you using WebViewExtra as well as Customwebview?
-
Haven't your problem been already solved here?
here is the different case i am trying to load glb file in html webviewer from file picker not predifined location, how can i
Let me rephrase this.
You can see there are some properties in the designer who have a predefined value and can be changed easily. Now these properties must be changed before creating any webview. For example zoom support or follow links property.
On the other hand, most properties can be changed only via blocks so these should be applied after Creating and Setting that webview active. For example, FileAccess property must be placed after SetWebView block. Otherwise it may not work as in your case like putting it in Screen Initialise or After Picking event of FilePicker.
Have a look at the snippets and examples. You'll understand easily.
Your glb files would need to be in the same directory as the html files for this to work.
You can simplify by using SAF (which will behave much like a FilePicker), pick the file and copy it to your ASD, having copied the html file from your assets to your ASD. Then the html file can load the glb file from a relative path in the html.
(On testing doesn't seem to want to load glb files from the ASD, works fine with other file types. I believe the js requires an http:// scheme to work, not a file:/// scheme. Should be OK if you use http urls for your glb files, in which case no need for the above)
There may be a method to do this by converting the selected file to a blob url in the webview, I would need to go off and remind myself how this can be done (if it can).
1 Like
OK, have a working "solution": The html file, getModel.html provides an input button to select a glb file from the shared directories (Download/Documents/Pictures etc.). The selected glb file is converted to a blob, and its url is fed into the model viewer. I placed a glb file in the Download directory for testing. I used webviewextra (needed for the file input button) and a webviewer, but it should also work with customwebview.
I will leave you to play around with layout/sizing/css enhancements
AIA
view3d.aia (30.3 KB)
BLOCKS
(yes, that's all folks 
)
HTML
<!DOCTYPE html>
<!--REF:https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications#example_using_object_urls_to_display_images-->
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet">
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<head>
<title>Get Model</title>
<style>
#fileElem {
padding: 10px;
color:white;
}
#mv-model {
display:none;
}
body {
background: #111;
}
#main {
margin: 0;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background: #111;
}
model-viewer {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<input type="file" id="fileElem"/>
<div id="main">
<model-viewer id="mv-model" src=""
camera-controls
auto-rotate
min-camera-orbit="auto auto 0.001m"
max-camera-orbit="auto auto 1000m"
shadow-intensity="1"
min-field-of-view="10deg"
max-field-of-view="80deg">
</model-viewer>
</div>
<script>
const fileSelect = document.getElementById("fileSelect"),
fileElem = document.getElementById("fileElem");
fileElem.addEventListener("change", simpleFile);
function simpleFile() {
const blobUrl = URL.createObjectURL(this.files[0]);
document.getElementById("mv-model").src = blobUrl;
document.getElementById("mv-model").style.display = 'block';
}
</script>
</body>
</html>
SCREEN
This method will also work for selecting and viewing images:
VIEW IMAGES
<!DOCTYPE html>
<!--REF:https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications#example_using_object_urls_to_display_images-->
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet">
<head>
<title>Demo</title>
<style>
#fileElem, #display {
padding: 30px;
}
#display {
display:none;
}
</style>
</head>
<body>
<input type="file" id="fileElem"/><br><br>
<img id="display" alt="Selected image" />
<script>
const fileSelect = document.getElementById("fileSelect"),
fileElem = document.getElementById("fileElem");
fileElem.addEventListener("change", simpleFile);
function simpleFile() {
const blobUrl = URL.createObjectURL(this.files[0]);
document.getElementById("display").src = blobUrl;
document.getElementById("display").style.display = 'block';
}
</script>
</body>
</html>
A bug in the extension is preventing me from loading certain sites that reply with their loading progress, like https://studio.penguinmod.com, running on a Chromebook.
I am getting an ArrayIndexOutOfBoundsException crash when loading https://studio.penguinmod.com. This seems to be caused by the site reporting its loading progress, and I can confirm this is happening on a Chromebook.
Using this extension is there a way for me to add webg compatability?
webg ?
Thank you it is working well. But it is not work with customwebview by the way
1 Like