Silly hack to change BabylonJS version on mobile

I noticed that the button to change the BabylonJS version is not visible on mobile (tested on latest Android and iOS in their default browsers, Chrome and Safari respectively.)

To work around this, I made a JavaScript snippet you can drop into any playground that will allow you to swap your version. It works by manipulating the version dropdown which exists but is not visible.

Obviously, since it exists and simply isn’t visible, it would be fairly easy to update Playground so the version dropdown exists in the mobile interface. I don’t know who has control over the Playground codebase but I kindly ask that you do it :slight_smile: if I am able to contribute via pull request I sure can try.

Here’s the snippet:

// silly hack to switch BabylonJS version on mobile.
setTimeout( () => {
    if( window.innerWidth > 500 ) return;// rough targeting of mobile only
    const versions_available = [
        'Latest',
        '4.1.0',
        '4.0.3',
        '3.3'
    ];

    const desired_version = versions_available[1]; // change this to change the version it switches to!

    var dropdowns = document.getElementsByClassName('command-dropdown');
    console.log(dropdowns);
    for( var i = 0; i < dropdowns.length; i++ ){
        console.log('dropdown ' + i, dropdowns[i].attributes );
        if( dropdowns[i].attributes.getNamedItem('title').value === 'Versions' ){
            // alert('button exists')
            dropdowns[i].click();
        }
    }
    var current_version = document.getElementsByClassName('version-number')[0].innerHTML;
    // alert('current version: ' + current_version);

    var versions = document.getElementsByClassName('command-dropdown-label');
    console.log(versions);
    for( var i = 0; i < versions.length; i++ ){
        console.log('version ' + i, versions[i].attributes );
        if( versions[i].attributes.getNamedItem('title').value === desired_version ){
            if( current_version !== desired_version ){
                // alert('switching to ' + desired_version);
                versions[i].click();
            } else {
                break;
            }
        }
    }

},3000);

PS, I’m diving deep into BJS development for my job, so I expect to be around these forums on the regular. I’ve benefited from this forum already and look forward to contributing more. Cheers!

Nick Kramer
InnovatAR Inc.
https://yondar.me

1 Like

Well, this should work on mobile as well :slight_smile:
Thanks for the snippet! we’ll make it work on mobile as well.

1 Like

It was me actually blocking that feature :slight_smile:

if you want to add it, you need to add a new control in the hamburger menu for it. I thought it was not used enough to develop it but if someone wants to do a PR, please feel free

The code needs to be added here:

and you need to update that control to be able to work horizontally:

1 Like

I would love to do a PR but I don’t know Typescript. I planned on learning it someday… kinda busy right now though…

1 Like

Thanks for this!

Right now, the playground defaults to 5.0.0-alpha3, breaking the examples I was trying to view. Without the option to change it, you’re stuck.

Using that script above, I made a simple playground sketch that prompts for the version in case this is helpful for anyone!

(requires entering the text from the drop down, ie 4.2.0 or latest)

1 Like