Change the loader image?

Home Forums Programming Change the loader image?

This topic contains 17 replies, has 5 voices, and was last updated by tcdoe tcdoe 2 weeks, 3 days ago.

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #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

    #2345
    Will Welker
    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.

    #2347

    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.

    Co-founder and CTO at Soft8Soft

    #2359

    jem
    Customer

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

    I will experiment with a custom preloader

    Thanks again,
    Jem

    #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:

    All of the available parameters are listed in the user manual.

    Thanks,
    Jem

    #3277

    Glad it was helpful :good:

    Co-founder and CTO at Soft8Soft

    #9019
    tcdoe
    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.

    • This reply was modified 3 weeks ago by tcdoe tcdoe.

    CEO, ABĒMIS LLC
    visit: abemis.com

    #9024
    tcdoe
    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

    #9029

    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.

    Founder & CEO at Soft8Soft
    LinkedIn | FB | Twitter | VK | 新浪微博

    #9128
    tcdoe
    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

    #9129

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

    Founder & CEO at Soft8Soft
    LinkedIn | FB | Twitter | VK | 新浪微博

    #9135
    tcdoe
    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

    #9136
    tcdoe
    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.):

    mgon_intro not 100

    • This reply was modified 2 weeks, 3 days ago by tcdoe tcdoe.

    CEO, ABĒMIS LLC
    visit: abemis.com

    #9138
    tcdoe
    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

    #9139
    tcdoe
    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.

    https://i.imgur.com/IdAJPuZ.png

    CEO, ABĒMIS LLC
    visit: abemis.com

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

You must be logged in to reply to this topic.