Information Hotspots

Help & Support
,
1

I have noticed something strange with the tutorial example for the Information Hotspots. The number of times that a user has to click on the generated HTML /CSS button is directly proportional to the number of hotspots in the scene, Can the horspot script be updated to remove this error? I could be missing something in my set up, but I can’t find anything and have been bashing at the problem for a while. Here is my example PlayCanvas 3D HTML5 Game Engine

2

Hey, just checked, your onShow function is calling twice whenever you click on the hotspot. That’s why two container are made.

You need to add a check on the hotspot.js making sure onShow function is called only once and didn’t make any new container if already one container is created.

image
image797×31 2.46 KB

1 Like
3

Oh yes so it is…the number of containers created is directly related to the number of buttons! I’m looking at how those containers are created, thanks. I don’t see how they are created?

4

Fixed! Did a count in the Ui script and deleted all but one of the containers

var Ui = pc.createScript('ui');

Ui.attributes.add('css', { type: 'asset', assetType: 'css', title: 'CSS Asset' });
Ui.attributes.add('html', { type: 'asset', assetType: 'html', title: 'HTML Asset' });

Ui.prototype.initialize = function() {
    // Check if the div container already exists
    this.div = document.querySelector('.container');

    // Initialize counter
    if (typeof Ui.containerCount === "undefined") {
        Ui.containerCount = 0;
    }

    // Create the div container only if it doesn't exist
    if (!this.div) {
        var style = document.createElement('style');
        document.head.appendChild(style);
        style.innerHTML = this.css.resource || '';

        this.div = document.createElement('div');
        this.div.classList.add('container');
        this.div.innerHTML = this.html.resource || '';
        document.body.appendChild(this.div);

        Ui.containerCount++;  // Increment the container count
        console.log("Total number of containers created: " + Ui.containerCount); // Log the count
    } else {
        console.log("Container already exists. Total number created: " + Ui.containerCount);
    }

    this.div.style.display = 'none';
    this.bindEvents();
};
2 Likes