Showpano and Popup feature

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

Islander

Trainee

Posts: 103

Sunday, August 28th 2022, 6:58am

Showpano and Popup feature

I noticed in the maps2 example, the pano can open in a modal window by the showpano code. Comparing that with the Popup.xml code they seem quite similar but in my view the showpano is a better choice ;
the pano to be opened doesn't need an html file
the size of the modal window can be set a percentage of the browser screen
the lines of code is shorter.
The thing that is missing for showpano is a close button (X) which the popup actually has in option.

If you could add the close button to the showpano code that would be very helpful.
Or the other way round, if these 2 first features mentioned above could be added to the popup.xml as an improvement, that would make it much better.

This post has been edited 1 times, last edit by "Islander" (Aug 29th 2022, 2:32pm)

Go to the top of the page

Tuur

Sage

Posts: 3,769

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

Tuesday, August 30th 2022, 11:37am

Hi,

here a simple example for a close button.
I used a red textfield ball, but that can be a png or svg of course...

Source code

	<action name="showpano" type="Javascript"><![CDATA[

        // showpano(xml, url) - a load a xml
        // showpano(panotype, url) - a load a pano image
        var panotype = args[1];
        var url = args[2];

        var bg = krpano.addlayer();

        bg.type = "container";
        bg.width = "100%";
        bg.height = "100%";
        bg.safearea = false;
        bg.bgalpha = 0.3;
        bg.bgcapture = true;
        bg.handcursor = false;
        bg.zorder = 1;
        bg.alpha = 0;
        bg.onloaded = "tween(alpha,1);" 
        bg.onclick = "set(enabled,false); tween(alpha,0.0,0.5,default,removelayer("+bg.name+",true));";

        var l = krpano.addlayer();
        l.type = "krpano";
        l.width = "80%";
        l.height = "80%";
        l.align = "center";
        l.bgroundedge = 17;
        l.maskchildren = true;
        l.bgcolor = 0;
        l.bgalpha = 0.5;
        l.bgshadow = "0 0 20 0 1.0";
        l.parent = bg.getfullpath();
        l.onloaded = function()
        {
            if (panotype == "xml")
            {
                l.krpano.actions.loadpano(url);
            }
            else
            {
                l.krpano.image.reset();
                l.krpano.image[panotype] = {url:url};
                l.krpano.actions.loadpanoimage();
            }
        }

        var sw = krpano.get("stagewidth");
        var sh = krpano.get("stageheight");

        var c = krpano.addlayer();
        c.type = "text";
        c.width = "24";
        c.height = "24";
        c.x = sw /10 - 12;
        c.y = sh /10 - 12;
        c.align = "righttop";
        c.bgroundedge = 12;
        c.bgcolor = 0xff0000;
        c.bgalpha = 1;
        c.parent = bg.getfullpath();
        c.onclick = function(){ krpano.call("set(layer["+bg.name+"].enabled, false);tween(layer["+bg.name+"].alpha,0.0,0.5,default,removelayer("+bg.name+",true));"); }

	]]></action>

Hope it helps,

Tuur *thumbsup*