# Save properties to JSON, download - Import from JSON and apply settings Playground (using BJS GUI)

**URL:** <https://forum.babylonjs.com/t/save-properties-to-json-download-import-from-json-and-apply-settings-playground-using-bjs-gui/54227>\
**Category:** Questions\
**Tags:** gui, save, import, json\
**Created:** [October 20, 2024, 1:05pm UTC](https://forum.babylonjs.com/t/save-properties-to-json-download-import-from-json-and-apply-settings-playground-using-bjs-gui/54227 "2024-10-20T13:05:23Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [October 20, 2024, 1:05pm UTC](https://forum.babylonjs.com/t/save-properties-to-json-download-import-from-json-and-apply-settings-playground-using-bjs-gui/54227/1 "2024-10-20T13:05:23Z")

</div>

Dears,

You know the quality of my dev skills 😁 (I actually should start all my posts with this 😅 😂)…

For a small project I’m about to finalize, I needed this feature where I can (simply) save a number of properties by writing them to a json file, download the file and next allow the user to upload this file as ‘presets’ and apply it to the scene.

I had a few bits here or there and was trying to fill-in the missing parts from this forum… and next from other forums… and ended-up with ChatGPT… which I have proven wrong on some parts after identifying other bits.

So, I decided I would make a PG that I can later share here with an explicit name so that others who’d likely face the same situation would be able to have at least this source.

I believe the logic and method to be correct (and it works)… but I do have a small issue with it.  
I’m uploading and applying properties for the active camera. They all do load correctly, but - for the active camera only (camera1 in this PG), they ALL apply only if I load the file twice… for some unknown reason. On the first pass, it looks like some are ‘ignored’. So, I tried detaching, re-attaching the camera, re-instruct scene.activeCameras, make another scene.render… nothing seems to do the trick? 😢

Anyone of yours experts have a quick look at this PG and tell me where I messed it up?  
Also feel free to improve the script for write to json, export/download, import, parse, apply (if not the best). I’d like to keep it ‘explicit’ and ‘simple’ but I don’t want to share something that’s not 100% ‘recommendable’.

> **[Babylon.js Playground](https://playground.babylonjs.com/#EWMU1K%2322)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

The file upload ‘twist’ to also work in the Playground and using only the BJS GUI I tweaked (for JSON) from this source from @Evgeni_Popov (while ChatGPT was first saying it is not possible, lol 🤣) BTW ChatGPT v4 is thanking @Evgeni_Popov for his outstanding contribution 😁 😃

> [@UI button to upload image using external plugins](https://forum.babylonjs.com/t/ui-button-to-upload-image-using-external-plugins/43220/13):
>
> You can do it like this:

Thanks and meanwhile, have a great sunday 🕶

---

<div class="post-metadata">

**Author:** ![Heaust-ops](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/heaust-ops/32/45470_2.png) [@Heaust-ops](https://forum.babylonjs.com/u/Heaust-ops)\
**Post date:** [October 21, 2024, 3:52am UTC](https://forum.babylonjs.com/t/save-properties-to-json-download-import-from-json-and-apply-settings-playground-using-bjs-gui/54227/2 "2024-10-21T03:52:55Z")

</div>

I can’t repro this for me,  
I’ve logged the applied data in this PG

> **[Babylon.js Playground](https://playground.babylonjs.com/#EWMU1K%2323)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

and all the properties seem to be applied correctly for every camera, the active cam also seems to be returned to the same state as saved : O

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [October 21, 2024, 7:30am UTC](https://forum.babylonjs.com/t/save-properties-to-json-download-import-from-json-and-apply-settings-playground-using-bjs-gui/54227/3 "2024-10-21T07:30:27Z")

</div>

Did you try change all properties. Including target (panning) and the camera fov? That’s how I eventually encounter the issue. Could be because of the target. May be should use setTarget first 🤔… 'need to investigate… Anyways, thx for having a look at it and have a great day 🕶

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [October 21, 2024, 7:34am UTC](https://forum.babylonjs.com/t/save-properties-to-json-download-import-from-json-and-apply-settings-playground-using-bjs-gui/54227/4 "2024-10-21T07:34:28Z")

</div>

> [@mawa](#):
>
> You know the quality of my dev skills 😁 (I actually should start all my posts with this 😅 😂)…

We should ask a forum moderator to revoke your Jedi master badge then… 🤣

> [@mawa](#):
>
> they ALL apply only if I load the file twice…

It works for me at once.

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [October 21, 2024, 7:39am UTC](https://forum.babylonjs.com/t/save-properties-to-json-download-import-from-json-and-apply-settings-playground-using-bjs-gui/54227/5 "2024-10-21T07:39:23Z")

</div>

> [@roland](#):
>
> revoke your Jedi master badge

Don’t know how I got it in the first place 😆 I can assure you I didn’t bribe for it 😂 I’m just hoping I will never have to face a dark lord - or he’ll slice me with a single line of saber code ⚔ 🤣

> [@roland](#):
>
> It works for me at once.

That’s probably just ‘incidental’. Like most of the things I do 😅 😂 … As said above, I will have to check back on this… Thanks for taking the time to have a look at it 🙏 and have a great day 🕶

---

<div class="post-metadata">

**Author:** ![Heaust-ops](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/heaust-ops/32/45470_2.png) [@Heaust-ops](https://forum.babylonjs.com/u/Heaust-ops)\
**Post date:** [October 21, 2024, 7:44am UTC](https://forum.babylonjs.com/t/save-properties-to-json-download-import-from-json-and-apply-settings-playground-using-bjs-gui/54227/6 "2024-10-21T07:44:09Z")

</div>

go it, repro’d, it’s prolly cuz of position

> **[Babylon.js Playground](https://playground.babylonjs.com/#EWMU1K%2325)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

see if this works : )

steps to repro:

- save like so  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/f/5fcc2f75126d64849bd3a59e58b361c95d9d13e2.png)
- restart PG
- pan down till like this  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/7/6728b6a2ffafe7a89f30ddbe8fa4b2619f34083d.png)
- upload

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [October 21, 2024, 7:44am UTC](https://forum.babylonjs.com/t/save-properties-to-json-download-import-from-json-and-apply-settings-playground-using-bjs-gui/54227/7 "2024-10-21T07:44:54Z")

</div>

> [@mawa](#):
>
> he’ll slice me with a single line of saber code

What about this bad boy?

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/f/3f3712aba529581ca4a387efb104b1e10bbcf2ae.jpeg)

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [October 21, 2024, 7:47am UTC](https://forum.babylonjs.com/t/save-properties-to-json-download-import-from-json-and-apply-settings-playground-using-bjs-gui/54227/8 "2024-10-21T07:47:12Z")

</div>

Both PGs are working for me. I tried both several times. No issues here. MacOS/Chrome

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [October 21, 2024, 7:47am UTC](https://forum.babylonjs.com/t/save-properties-to-json-download-import-from-json-and-apply-settings-playground-using-bjs-gui/54227/9 "2024-10-21T07:47:39Z")

</div>

> [@roland](#):
>
> What about this bad boy?

I can only hope I manage to flee  
😨 😱 👻

---

<div class="post-metadata">

**Author:** ![Heaust-ops](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/heaust-ops/32/45470_2.png) [@Heaust-ops](https://forum.babylonjs.com/u/Heaust-ops)\
**Post date:** [October 21, 2024, 7:49am UTC](https://forum.babylonjs.com/t/save-properties-to-json-download-import-from-json-and-apply-settings-playground-using-bjs-gui/54227/10 "2024-10-21T07:49:07Z")

</div>

if nearly works

the final image is like so,

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/5/65c32475d65c35adeb1fbfaf8b7a920debe42a2b.png)

very close to the og position but not quite : )  
can you try the steps listed, if it still doesn’t happen for you it might be a platform thing : O  
I’m on firefox linux

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [October 21, 2024, 7:53am UTC](https://forum.babylonjs.com/t/save-properties-to-json-download-import-from-json-and-apply-settings-playground-using-bjs-gui/54227/11 "2024-10-21T07:53:10Z")

</div>

Yes, of course ‘position’. Stupid me completely forgot about it. Huh? Did I? I’m not sure; The position of the arc cam should be from the target (orbital) using alpha, beta and radius. 🤔… and I thought I had a perfect understanding of cameras 😅 As I said, need to check on this…

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [October 21, 2024, 7:53am UTC](https://forum.babylonjs.com/t/save-properties-to-json-download-import-from-json-and-apply-settings-playground-using-bjs-gui/54227/12 "2024-10-21T07:53:46Z")

</div>

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/f/cf813ed3d51e6979d2ec47f0f3540535c482cd30.png)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/1/e1713debebee49fc8eab2e78f51745f4acfe9fdf.png)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/e/9e4fc35686fb6dcf2a3c0ef21aa774b728ef2882.png)

Pixel perfect 🤣

```auto
{
  "cameras": {
    "cam1": {
      "pos": [
        -125.56967008124252,
        29.178128936089838,
        -3.943280117020711
      ],
      "alpha": 3.0572155675663497,
      "beta": 1.3686958455711484,
      "radius": 131.9706,
      "camlock": false,
      "fov": 0.8,
      "targetX": 3.255,
      "targetY": 2.688,
      "targetZ": -14.839
    },
    "cam2": {
      "pos": [
        8.660254037844386,
        5.000000000000001,
        0
      ],
      "alpha": 0,
      "beta": 1.0471975511965976,
      "radius": 10,
      "camlock": true,
      "fov": 0.8,
      "targetX": 0,
      "targetY": 0,
      "targetZ": 0
    },
    "cam3": {
      "pos": [
        8.660254037844386,
        5.000000000000001,
        0
      ],
      "alpha": 0,
      "beta": 1.0471975511965976,
      "radius": 10,
      "camlock": false,
      "fov": 0.8,
      "targetX": 0,
      "targetY": 0,
      "targetZ": 0
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![Heaust-ops](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/heaust-ops/32/45470_2.png) [@Heaust-ops](https://forum.babylonjs.com/u/Heaust-ops)\
**Post date:** [October 21, 2024, 7:55am UTC](https://forum.babylonjs.com/t/save-properties-to-json-download-import-from-json-and-apply-settings-playground-using-bjs-gui/54227/13 "2024-10-21T07:55:32Z")

</div>

> The position of the arc cam should be from the target (orbital) using alpha, beta and radius

It also works if you set the target the first thing and then the other stuff

---

<div class="post-metadata">

**Author:** ![Heaust-ops](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/heaust-ops/32/45470_2.png) [@Heaust-ops](https://forum.babylonjs.com/u/Heaust-ops)\
**Post date:** [October 21, 2024, 7:56am UTC](https://forum.babylonjs.com/t/save-properties-to-json-download-import-from-json-and-apply-settings-playground-using-bjs-gui/54227/14 "2024-10-21T07:56:11Z")

</div>

> Pixel perfect 🤣

yeah I have no clue lmao

---

<div class="post-metadata">

**Author:** ![Heaust-ops](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/heaust-ops/32/45470_2.png) [@Heaust-ops](https://forum.babylonjs.com/u/Heaust-ops)\
**Post date:** [October 21, 2024, 7:57am UTC](https://forum.babylonjs.com/t/save-properties-to-json-download-import-from-json-and-apply-settings-playground-using-bjs-gui/54227/15 "2024-10-21T07:57:00Z")

</div>

wait you’re using the latest PG, ofc that has the correct code, use the original!

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [October 21, 2024, 7:57am UTC](https://forum.babylonjs.com/t/save-properties-to-json-download-import-from-json-and-apply-settings-playground-using-bjs-gui/54227/16 "2024-10-21T07:57:35Z")

</div>

Well, the answer may be in my last question. If it is ‘from the target’ may be just need to set the target first 😁 That could explain why it works when you upload a second time… 🤔

Edit: typed and didn’t see your post

> [@Heaust-ops](#):
>
> It also works if you set the target the first thing and then the other stuff

That might be it. I’ll just quickly check on that. There’s a fair chance that would be it… don’t waste more time on this. I’ll sure let you know if it isn’t 😁 😅

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [October 21, 2024, 8:11am UTC](https://forum.babylonjs.com/t/save-properties-to-json-download-import-from-json-and-apply-settings-playground-using-bjs-gui/54227/17 "2024-10-21T08:11:36Z")

</div>

OK Guys,  
Thanks again and sorry for wasting your precious time 🤭.  
The above looks like the solution:  
**Set the target first.**

Here’s an updated playground that should work (does it? 😅 😂)

> **[Babylon.js Playground](https://playground.babylonjs.com/#EWMU1K%2327)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

Edit: Updated PG link. Uses ‘pointerUp’ observable to load the file which prevents from having to click twice (since the hidden DOM element is created dynamically).

---

<div class="post-metadata">

**Author:** ![Heaust-ops](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/heaust-ops/32/45470_2.png) [@Heaust-ops](https://forum.babylonjs.com/u/Heaust-ops)\
**Post date:** [October 21, 2024, 8:16am UTC](https://forum.babylonjs.com/t/save-properties-to-json-download-import-from-json-and-apply-settings-playground-using-bjs-gui/54227/18 "2024-10-21T08:16:31Z")

</div>

> Here’s an updated playground that should work (does it? 😅 😂)

yea, can’t repro on this : )