CenarioVR and Lectora talking

gsl4958

Hi.

I'm developing a project where I have to show lot of information related to diferent points of the 360º photo. I want to show the info when the use click the hotspots but with CenarioVR is quit difficult to manege with large object that have to be sinchronized with others. At this point I would like to know if there is any possibility for CenarioVR to talk with Lectora (via JavaScript) to show pop-ups designed in Lectora.

 

Tanks in advance.

fprieto3143

Just looking for a little bit more info on what you want to do. But it sounds like what you want to do is create a hotspot for each area of your scene where you want to display information to the user. Then you want to either use an info card or image or both, and unset the visible option. now in your hotspot, you can show the info card/image by adding a "Show" action on the objects you want to show.

You can add a duration to the show action so that they go away after a certain amount of time. you can also create a hotspot to show with the info card/image on the top right corner that can be used to close the info card, just like a dialog.

hope this helps, please post back if your situation is different or more complex

gsl4958

Thanks a lot for your answer.

Yes, is that want to do but I will prefer to do it with Lectora elements instead of using the info cards of CenarioVR that are limitated. Using Lectora elements to display information is more confortable and a lot more easy to group items.

Also I would like to add a hotspot where I could download a file... is this possible?

 

 

fprieto3143

I understand better now thank you! Here is an article with sample code on what you want to do.

https://cenariovr.com/blog-posts/communicating-between-cenariovr-and-other-content.html

There is some sample code to get you started as well. Hope that helps!

gsl4958

Yeah! thats great! Thanks a lot. I've got this working in html but when I export the Lectora title to SCORM and I pusblis ther SCORM in my LMS (Moodle) this behaivor doesn't work...

I'm trying to put the JS in different parts of the lectora title but nothing...

Any idea? I have checked and window.addEventListener(...) is not executing when a click is performed in the CenarioVR content...

Maybe the problem is in the iframes?

 

Thanks in advances.

fprieto3143

Not sure why, but one thing I always like to try is clearing your cache before anything.

Please post any javascript errors as well as the code for listening to CenarioVR clicks.

Does the issue happen on all browsers? I know you may need it to work on one specific browser, but if it works on another browser I can get a better idea of what the issue might be.

Try putting it on SCORM cloud. Another great way to determine if there is something special with your LMS that is causing this.

Is the cenariovr content packaged with your lectora publish? or are you linking it externally on a different domain?

 

 

gsl4958

Hi Felipe, thanks for your answer.

I have tried in Mozilla Firefox and Chrome (last versions) and in both the same javascript error is reported (attached image). The error is reported when I click the hot spot in CenarioVR.

I also try in the ScormCloud and the same error is reported.

 

/****************My JS code for the listener******************/
window.addEventListener('message', function(event) {
var data = JSON.parse(event.data);
console.log(data);

var messagedatatype = data.type;
if (messagedatatype=='cenariovr:clicked') {
if(data.object == 'cabina - tensiometro'){
callActionGroup('showtensiometro');
}else if(data.object == 'cabina - medidor'){
callActionGroup('showmedidor');
}else{
console.log("Hotspot Clicked: " + data.object );
}
}
}
);

/****************************************************/

 

I've checked that the JS (listener) is loading correctly and I set a breakpoint into the function of the listener but never gets at that point. It seems that the event of CenarioVR is not being recognised....

 

Any idea?

 

 

 

gsl4958

Hello! I finally solve the problem!

My listener was not listening (obviously) to the CenarioVR events so I thought that might be reason of the depth of the iframes generated for the SCORM content.

 

Finally I changed the listener to the parent window and it works correctly:

window.parent.addEventListener('message', function(event) {
var data = JSON.parse(event.data);
console.log(data);

var messagedatatype = data.type;
if (messagedatatype=='cenariovr:clicked') {
if(data.object == 'cabina - tensiometro'){
callActionGroup('showtensiometro');
}else if(data.object == 'cabina - medidor'){
callActionGroup('showmedidor');
}else{
console.log("Hotspot Clicked: " + data.object );
}
}
}
);

 

Thanks for all!

fprieto3143

I just tried a simple example on my machine, published to scorm cloud, and received the messages. I placed a break point in the listener and it indeed received the clicked message.

In my Lectora title, I have an external html object set to "header script" with your code. I also created a WebWindow set to point to "Local Web Based Content". I downloaded an html5 publish from Cenario VR, extracted the zip into a directory, and I pointed the WebWindow to the index.html in that directory. I also checked the "Include all files and sub folders" checkbox. published to scorm, imported to scorm cloud, and launched.

Is that similar to what you did?

fprieto3143

Just saw your post. Im glad you got it going!

gsl4958

Hello.

Is there any option to send actions to the cenarioVR content via Javascript?

I will like to hide elements of cenariovr using a lectora action and i don't know if it is possible...

 

Kind regards

gsl4958

Hello!

I have already communicate Lectora with Cenario listening to the Cenario events. Now I would like to send and event to Cenario from a click on the Lectora content... is this posible for the moment? how could I perform it?

 

 

Kind regards!