Change the loader image?

This topic has 17 replies, 5 voices, and was last updated 6 years ago by tcdoe.

Viewing 15 posts - 1 through 15 (of 18 total)

1 2 →

Author

Posts
2018-02-22 at 10:35 pm #2343

jem
Customer

I like the new graphics in the V3D scene loader that ships with V2.0. The spinning hexagon is definitely an improvement over the one-step progress bar, but is it possible to change this image? Can I swap the PNG file? This would be useful for client-specific branding.

It looks like the hexagon (GearImage) is baked into the Verge3D library as a data URL. The only way that I see of changing this is to edit the loader.

Has anyone tried to change this?

Thank uou,
Jem

Jeremy Wernick

2018-02-23 at 7:08 am #2345

Will Welker
Customer

Yes it would be cool to be able to load a custom image. Also, due to the nature of loading large chunks of data at a time, the loading progress appears to stop. Being able to load an animated gif (like a little spinning gear icon) as part of the preloader would give the appearance of activity.

2018-02-23 at 7:57 am #2347

Alexander Kovelenov
Staff

Currently the only possible way to achieve this is implementing custom preloader which inherits directly from Preloader class (you can use SimplePreloader as an example). Regarding the parameter to assign a custom image, I will put that in my personal TODO list.

Soft8Soft Tech Chief
X | FB | LinkedIn

2018-02-23 at 3:46 pm #2359

jem
Customer

I think that this function will be useful for the community.

I will experiment with a custom preloader

Thanks again,
Jem

Jeremy Wernick

2018-03-30 at 2:21 am #3274
jem
Customer
Wow! It is easy to change the loader graphics in 2.2!

For my test, I used an animated gif and I did not want it to spin. Here are the steps:
1. Update you app’s v3d.js engine to 2.2 if it is not already.
2. Place your graphic in the app directory.
3. Edit the app’s main js file. You will see a line that says new v3d.SimplePreloader … . Edit that line.

Here is mine:
```
    var player = new V3DPlayer('container', null, 
           new v3d.SimplePreloader({ container: 'container' , imageURL:'my_logo.gif', imageRotationSpeed: 0}));
```
All of the available parameters are listed in the user manual.

Thanks,
Jem

Jeremy Wernick
2018-03-30 at 7:45 am #3277

Alexander Kovelenov
Staff

Glad it was helpful

Soft8Soft Tech Chief
X | FB | LinkedIn

2018-11-20 at 8:05 pm #9019

tcdoe
Customer

Hello,
I’ve been trying to implement this like Jem posted, and am a bit confused.
I’d like to change color and other parameters too. I looked at the manual, but can’t seem to figure out the right syntax. Can you post a quick example with changes to all the parameters? That would be great.

[edit] I should add that I want to not make it rotate, but actually just cycle through a set of frames like in a regular loading animation, if that’s possible.
thx.

CEO, ABĒMIS LLC
visit: abemis.com

2018-11-20 at 9:26 pm #9024

tcdoe
Customer

Also I really need the loading animation background to be black or gray, not white. Thx.

CEO, ABĒMIS LLC
visit: abemis.com

2018-11-21 at 8:20 am #9029

Yuri Kovelenov
Staff

Hi,

Since then we got the setup preloader puzzle which you can use for tweaking the preloader look and feel without engaging in JavaScript programming.

Check out our Industrial robot demo or the Teapot Heater demo for some examples.

Chief 3D Verger | LinkedIn | Twitter

2018-11-24 at 10:01 am #9128

tcdoe
Customer

Ok thanks, I’ve done exactly as in demos, but it’s just a black screen. I think I’m naming something wrong. I’ll work on it more and post a solution when I get something (or not :)

CEO, ABĒMIS LLC
visit: abemis.com

2018-11-24 at 11:12 am #9129

Yuri Kovelenov
Staff

You can use the debug puzzle to print any info or names in the console. Also look there for errors.

Chief 3D Verger | LinkedIn | Twitter

2018-11-24 at 7:42 pm #9135

tcdoe
Customer

I think I’m missing something very fundamental here (apologies). I looked hard at the teapot demo and I see the init puzzle, but how are these names ‘created’ or referenced? I see the text and the spinning pot, but they don’t appear in the .blend file, so they must be somewhere else. I see references to the names “progress_bar” and “teapot_hider” and “loading_percantage” etc. in the ‘index.html’ file, but I don’t have an index.html file in my application.

I have no idea right now what I’m supposed to do. It’s probably something very simple that being a novice I don’t understand.

CEO, ABĒMIS LLC
visit: abemis.com

2018-11-24 at 9:49 pm #9136

tcdoe
Customer

I’ve tried following the instructions and made an ‘index.html’. It displays but is all out of proportion. View is 100% width but height is not set and wrong.
(I tried using google designer but that fails for an number of reasons; no https, others).
I know I’m not doing this right at all for the index.html, but all I need is a head-start to get a viable loading screen like the industrial robot example. Everything else is looking good.

I’d like to just write the ‘index.html’ using a text editor (I use Sublime or notepad++) instead of using webform or such.
Here’s what I have bare-bones (below). Again please keep in mind (forgive!) that I’ve built basic webpages no-problem, but here I’m probably missing important steps (and code/etc) because I’m a novice at these issues.

<!DOCTYPE html>
<html>

<head>
<meta charset=”utf-8″>
<title>mgon-intro test01</title>
</head>

<body>

<iframe width=”100%” height=”100%” frameborder=”0″ allowfullscreen=”” src=”Mgon_intro.html”></iframe>

</body>

</html>

This is what I get (of course no preview, etc.):

CEO, ABĒMIS LLC
visit: abemis.com

2018-11-24 at 10:04 pm #9138

tcdoe
Customer

To be clear, there is a <div .

Here again is my super-basic index.html

<!DOCTYPE html>
<html>

<head>
<meta charset=”utf-8″>
<title>mgon-intro test01</title>
</head>

<body>

<iframe width=”100%” height=”100%” frameborder=”0″ allowfullscreen=”” src=”Mgon_intro.html”></iframe>

</body>

</html>

CEO, ABĒMIS LLC
visit: abemis.com

2018-11-24 at 10:07 pm #9139

tcdoe
Customer

Even this is super problematic for me. I can’t seem to even paste my code because the div gets wiped. Thus here is a screen-shot.

CEO, ABĒMIS LLC
visit: abemis.com
Author

Posts