0
I have to insert new scenes at the end of the JSON object (which is inside a .js file), but I don’t know how to make the structure of a new scene dynamically/synchronously.
What happens. Every scene has title, text, sceneId, Yaw and pitch (properties) with different values. And my goal is to create new scenes without having to manually insert them into the.js file.
I thought of taking the values of each property (title,text,etc.) through inputs on the client side with a . hmtl and somehow add the data of the new scene at the end of the JSON object?
This is missing to finalize my TCC
NOTE: Panellum is a 360 image viewing library
That’s the file . js
viewer.setPitch(viewer.getPitch() + 15);
});
document.getElementById('pan-down').addEventListener('click', function(e) {
viewer.setPitch(viewer.getPitch() - 15);
});
document.getElementById('pan-left').addEventListener('click', function(e) {
viewer.setYaw(viewer.getYaw() - 15);
});
document.getElementById('pan-right').addEventListener('click', function(e) {
viewer.setYaw(viewer.getYaw() + 15);
});
document.getElementById('zoom-in').addEventListener('click', function(e) {
viewer.setHfov(viewer.getHfov() - 15);
});
document.getElementById('zoom-out').addEventListener('click', function(e) {
viewer.setHfov(viewer.getHfov() + 15);
});
document.getElementById('fullscreen').addEventListener('click', function(e) {
viewer.toggleFullscreen();
});
//Esse é o objeto JSON que deve ser atualizado e que está dentro do arquivo.js
viewer = pannellum.viewer('panorama', {
"default": {
"firstScene": "inicio",
"author": "Paula",
"sceneFadeDuration": 1000,
"showControls":false,
"compass": true,
"northOffset": 247.5,
},
"scenes": {
"inicio": {
"autoLoad": true,
"title": "Cristo Redentor",
"hfov": 500,
"pitch": 1.6473814187756146,
"yaw": 1.8343954817635746,
"type": "equirectangular",
"panorama": "https://firebasestorage.googleapis.com/v0/b/tour-virtual-2f2f5.appspot.com/o/img-tour%2Fchrist-redeemer.jpg?alt=media&token=479c7ed4-1041-4029-8713-c5a7988d19a3",
"autoRotate": -4,
"hotSpotDebug": false,
"hotSpots": [
{
"pitch": -10,
"yaw": -40,
"type": "scene",
"text": "Casa 1",
"sceneId": "casa1"
},
{
"pitch": -5,
"yaw": 70,
"type": "scene",
"text": "Casa 2",
"sceneId": "casa2"
},
{
"hfov": 110,
"pitch": 10.371935422677701,
"yaw": 177.39670728611372,
"type": "info",
"text": "Cristo Redentor é um cartão-postal famoso do Rio de Janeiro, por ser uma das Sete Maravilhas do Mundo Moderno.",
//"clickHandlerFunc": nodo
}
]
},
"casa1": {
"autoLoad": true,
"title": "Casa 1",
"hfov": 900,
"pitch": 10,
"yaw": 90,
"type": "equirectangular",
"panorama": "https://firebasestorage.googleapis.com/v0/b/tour-virtual-2f2f5.appspot.com/o/img-tour%2Fcasa1.jpeg?alt=media&token=7a76c46b-d40e-4967-9c4c-0d36373b8ae2",
"autoRotate": -10,
"hotSpotDebug": false,
"hotSpots": [
{
"pitch": -10,
"yaw": 90,
"type": "scene",
"text": "Inicio",
"sceneId": "inicio"
},
{
"hfov": 110,
"pitch": 4.829042691552391,
"yaw": -143.46120255227498,
"type": "info",
"text": "Rede",
//"clickHandlerFunc": nodo
},
{
"hfov": 110,
"pitch": 12.888179936636135,
"yaw": 30.27269057993482,
"type": "info",
"text": "Perto da Janela",
//"clickHandlerFunc": nodo
},
{
"hfov": 110,
"pitch": 10.05961813493795,
"yaw": 128.39392089966393,
"type": "info",
"text": "Cubo",
//"clickHandlerFunc": nodo
},
{
"hfov": 110,
"pitch": 3.9812879939194676,
"yaw": -91.89256054322145,
"type": "info",
"text": "Cortina",
//"clickHandlerFunc": nodo
}
]
},
"casa2": {
"autoLoad": true,
"title": "Casa 2",
"hfov": 900,
"pitch": 3.475773155626582,
"yaw": 1.2347982615142974,
"type": "equirectangular",
"panorama": "https://firebasestorage.googleapis.com/v0/b/tour-virtual-2f2f5.appspot.com/o/img-tour%2Fcasa2.jpeg?alt=media&token=d7726504-ab8d-4deb-8777-7bd414ca6cdc",
"autoRotate": -10,
"hotSpotDebug": false,
"hotSpots": [
{
"pitch": -2.1,
"yaw": 0.9,
"type": "scene",
"text": "Casa 1",
"sceneId": "casa1",
},
{
"pitch": 14.006656151319785,
"yaw": -64.7948786973273,
"type": "info",
"text": "Informação",
//"clickHandlerFunc": nodo
},
{
"pitch": 12.947035220693715,
"yaw": -144.83290999490745,
"type": "info",
"text": "Informação",
//"clickHandlerFunc": nodo
},
{
"pitch": 13.277115445823057,
"yaw": 98.80455676076535,
"type": "info",
"text": "Informação",
//"clickHandlerFunc": nodo
}
]
},
//As novas cenas devem ser inseridas a partir daqui.
}
});```
Are you saving the new scenes in JSON? On the client side you can use localStorage to save the new data. On the server, you can create a Scenes.json file, and save the scenes there. If you are using Node.js, you can read and write to the file using Fs.
– André Pereira
André, obg for the tip.
– Estudante