Playground enhacements

Feature requests
1

Hello guys!

I would like to propose some changes to the BabylonJS Playground and implement them as well, if approved.

Create local backup of the code
I propose to create a local backup of the source code in certain situations. We can use IndexedDB over LocalStorage, so we have no size limit and IndexedDB is async, LocalStorage is not.

Local backup every X seconds (configurable)
I lost my work many times just because I accidentaly navigated away from the PG when I am working on my notebook and instead of FN + Left Arrow (like HOME on a full size desktop keyboard) I press ALT + Left Arrow which navigates back in history, or when I accidentaly close the browser. Autobackups will not overwrite the local backups created by Running or Saving (see below)

Local backup before Running
So if your scene freezes the browser you don’t lose your work

Local backup before Saving
To be in sync with the server side stored copy.

Dismiss the error banner by ESC
Sometimes you just don’t want to click on the banner and navigate away from your current cursor position in the editor. This is especially annoying when you forget to close a block of code somewhere in the begininng, but the error banner points to the end of the source code.

Quick display mode switching
Something like CTRL+SPACE in Unity, so you can quickly maximize the scene or SHIFT+F11 when writing a forum message (did you know about it?). I am using the maxmized mode just right now.

Keep track of my PGs
If we implement local copies on IndexedDB we can easily offer the user his PG history.

More code templates when creating a new PG
It would be cool to have templates without comments. Maybe we can add some more sophisticated templates also. I am adding some debug code to my PGs all the time, like displaying the World Axis, dipslaying FPS (usefull when in full screen), or we could even add a selection screen, where a user can select what features he wants in the PG.

EDIT:
Autoformat on run/save as a configurable option

The PG should compare timestamps of the local copy and the server side copy and ask the user whether to load the local one when local.timestamp > server.timestamp.

I think the backup is crucial, dismissal of the error banner and quick mode switching would make our lifes easier :slight_smile: and the other stuff is some fancy stuff.

What’s your opinion?

Thank you!

Have a nice day!

R.

3 Likes
2

Hey @roland,

great suggestions! thank you for that :slight_smile:

i’ll try answering some of your requests:

We do our best not to store anything locally. In most cases it is due to certain laws in some countries and regions which will force us to first get the user’s permission to store data in the browser itself (cookies/local storage).

We have safe mode especially for that:

image

If you turn it on the browser will ask before you close your playground or try to navigate to a different one.

Do you mean the red ribbon at the bottom?

That’s a nice suggestion. It works similarily on mobile (where you can switch between code and full-screen scene).

This will require some form of a login or identification mechanism. We have considered that in the past, but the answer to the first question prevents us from fully implementing that.

Code templates are a part of the project and can be added by the community. we would love to see more of them! and are waiting for PRs :slight_smile:

I like this one :slight_smile:

All in all - we accept PRs. the playground is an open source project, and as such can be changed by the community as well.

1 Like
3

Hellooo @RaananW!
Yes, I mean the red ribbon at the bottom.

I am sorry, but despite your detailed answers I am not sure which changes will be accepted, if properly implemented ofcourse. Can you give me a YES/NO answer to all the enhacements I suggested please? :slight_smile:

I lost my PG today once again, because I generated too many instances and the browser froze. So I decided to always use CTRL+S to save and run. That lead to another issue :frowning: I’ve saved a PG with code which always freezes the browser just right after the PG is loaded. So I was not able to fix it, so I had to revert to a previous one, so I practically lost my changes (I didn’t check, whether I can load the source code outside the PG, I believe a http request to the correct URL would do the work). Bad day@#*(@! :smiley:

Thanks a lot!

4

Or maybe we can leave the PG just for playing as the name suggests and use for example VS Code with the Live server extension for more serious work :alien:

5

Any change will be accepted, as long as it follows our guidelines in terms ofsaving data locally (i.e. - not saving anything locally :-)).

Dismissing the red ribbon - of course, more templates - be our guest :slight_smile:
Autoformat as a flag? works as well.

The display-switching mode might be a little trickier to implement, but as long as it doesn’t disturb the default playground behavior, i don’t see why we can’t support it.

Yeah, we’ve all been there…
I guess we could add a “do not run on load” flag (or a query param) that will only load the code but will not run it.

6

Got it :slight_smile: but one more try :stuck_out_tongue: wouldn’t the local storage stuff work even the user agrees to store the source locally as well?

7

You get 2 more! :wink:

Yes, you are right. We have discussed that internally a long time ago and have agreed not to do that. This was more related to user registration (which required gathering user information) and less about storing the latest code in local storage. I can gladly discuss this with the team later this week.

8

Thanks for the the clarification! Keep me posted please!

Have a nice day!

R.

9

Hi, I’m back! :clown_face:
I’ve just tried the Safe Mode switch and it doesn’t prevent me to navigate away by pressing ALT + Left Arrow. :frowning: No questions, just goes back in history.

10

I just tried and it worked for me. (You have to edit the code obviously to trigger the warning)

2 Likes
11

Hi,
it was not so obvious for me :smiley: I just checked the box and tried to navigate away. Yes, it is working after you make some changes in the source code.
Thanks!

1 Like
12

I never knew this is what safe mode did :sweat_smile: I just opened a PR to add tooltips explaining what the buttons do: Add tooltips to playground menu buttons by darraghjburke · Pull Request #10839 · BabylonJS/Babylon.js (github.com)

5 Likes
13

Same here :slight_smile: A Help/How to use window could be also handy.

14

Hello @RaananW!

Have you had chance to discuss the changes I’ve proposed? I am ready to make the approved changes, if any :see_no_evil: :slight_smile:

I switched to local development because I lost my work a couple of times in the PG again :frowning: but I think it’s more convenient for the masses to have a PG at hand than cloning a repo, so IMHO we need to make it safer. There is a specific very dangerous situation, when you open the same PG in two windows, one is for realtime NME updates and the other for changing the code without binding to NME. I’ve closed the wrong window (not the one bound to NME) a few times without saving the PG code. My bad though :smiley:

I’ve been thinking on a VS Code extension which could transpile the code between local and the online PG, but maybe your preference is to keep as much code on the PG as you can, so you have a larger code base to search in when using the docs. However this could be solved by making some sort of automatic background uploading to the PG. Just loudly thinking… :slight_smile:

@Deltakosh I’m sure, that there is a small bug lurking somewhere in the Safe mode functionality, because yesterday it happened to me again, I’ve made changes and navigated away from the PG without getting the prompt. I can check this issue as well, if it really exists, when implementing the changes.

Guys,
just ping me after you decide.

Thanks!
R.

1 Like
15

Please :smiley:

16

We are good to go with code in local storage. We’ll store the code every time you actively press save or run (i.e. not on load, because then it will lose its meaning), and there will be a button to recover the code from local storage that will just paste the code without running it.

Do you want to give it a try and develop it yourself? otherwise we’ll create an issue and handle it ourselves.

17

Hello!
Yes, I will gladly implement it to let you guys focus on the more important 3D stuff.
So let’s start with the most important local backup functionality.

Cheers!
R.

2 Likes
18

Hello!
the PR is nearly ready, I only need to add the icon so I’d like to know where and what icon do you want to put in the command bar.
Thanks!

19

@PatrickRyan is out for the week, I will be really happy to get his input on that. But I guess until he is back you can add it as a selectable line in the setting menu item?

1 Like
20

Yep, of course. :sunglasses: