Hi, an idea:
1) When entering the scene you initialize a variable, for example myclicks, with the value "0".
2) You create an action that when clicking, if myclicks=0, you show the hint and give myclicks a value of 1. If myclicks=1, then you run the other action and give myclicks the value of 0 again.
From 2 panoramas: One flat and the other equirectangular. I would need that when rotating the equirectangular, the cone of a radar located in the flat panorama would rotate. Please, could you publish this example?
Greets, Fdo
Hi, maybe using architecture view or a reduced fov value will improve.
Hi San7 .Thank you for your answer 
The option 1 runs ok.
About the option 2 (version 1.21 code) a question:
Why lr= layer[*mylayer]; ?
or
Why ondow="ampliar(*name);
I mean, What do you use "*"?
Greets,
Fdo.
This a code (based in Tuur code) for change layer width-height by dragging.
This variant works fine but I used the "placeholder-replacing older version method" :
<action name="ampliar">
copy(_cw, layer[%1].width);
copy(_ch, layer[%1].height);
copy(dsx, mouse.stagex);
copy(dsy, mouse.stagey);
asyncloop(pressed,
set(layer[%1].width, calc(_cw - (mouse.stagex - dsx)));
set(layer[%1].height, calc(_ch + (mouse.stagey - dsy)));
);
</action>This other variant fails (I don't kwnow why) and it was made by the method "argument-to-variable-mappings:
<action name="ampliar" scope="global" args="mylayer">
copy(_cw, layer[get(mylayer)].width);
copy(_ch, layer[get(mylayer)].height);
copy(dsx, mouse.stagex);
copy(dsy, mouse.stagey);
asyncloop(pressed,
set(layer[get(mylayer)].width, calc(_cw - (mouse.stagex - dsx)));
set(layer[get(mylayer)].height, calc(_ch + (mouse.stagey - dsy)));
);
</action>Please, Whats is wrong in second variant?
Hi indexofrefraction Thank you for your advices. I used an html layer linked with bootstrap and it worked well with fullscreen using Mozilla Firefox.
When you use bootstrap on a layer, should I worry about fullscreen or does it run normally? What is your experience?
this is my normal html layer (no parent)
<layer
name="mylayerhtml"
type="html"
align="leftop"
bgalpha="0.6"
width="300"
height="100%"
htmloverflow="auto"
html="get:data[data_ex].content"
/>Best regards,
Fdo
Thanks very much indexofrefraction solved!
Results:
Codes (adapted from krpano's popup included example):
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Demo Menu Lateral</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="mobile-web-app-capable" content="yes" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<style>
html { height:100%; }
body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
</style>
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css">
<script src="bootstrap/dist/js/bootstrap.min.js"></script>
</head>
<body>
<script src="tour.js"></script>
<div id="pano" style="width:100%;height:100%;">
<noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
<script>
embedpano({xml:"tour.xml", target:"pano", html5:"only", mobilescale:1.0, passQueryParameters:"startscene,startlookat"});
</script>
</div>
</body>
</html>tour.xml:
<krpano debugmode="true" title="" onstart="">
<preview type="grid(cube,32,32,512,0xCCCCCC,0xFFFFFF,0x999999);" />
<include url="popups.xml" />
</krpano>popups.xml:
<krpano>
<layer name="abrelistado"
url="skin/abreizq.png"
keep="true"
align="lefttop"
x="30"
y="10"
onover="tween(alpha,1)"
onout="tween(alpha,0.5)"
ondown="tween(alpha,1)"
onup="tween(alpha,0.5)"
onclick="popup('html', get(data[data_html_example].content), 340, calc(stagewidth - 0), true ); tween(layer[popup].x,13); tween(layer[popup].y,50);"
/>
<!-- onover="tween(alpha,1)"
onout="tween(alpha,0.5)"
ondown="tween(alpha,1)"
onup="tween(alpha,0.5)" -->
<action name="popup" scope="private:POPUP" args="type, content, width, height, scrollbars, onclose_callback"><![CDATA[
if(popup, break(); );
addlayer('popup_bg', popup_bg);
set(popup_bg,
type=container,
align=lefttop, width=100%, height=100%,
zorder=99,
handcursor=false,
bgcapture=true,
capture=false,
onclick='popup_close()'
);
addlayer('popup', popup);
set(popup,
type=container,
parent='popup_bg',
width=calc(min(width,global.stagewidth*0.9)),
height=calc(min(height,global.stageheight-60)),
align=lefttop,
bgborder='50,13,13,13 0x555555 1',
bgroundedge="13",
bgcolor=0x555555,
bgalpha=0.7,
bgshadow='0 10 20 0x000000 0.5',
bgcapture=true,
maskchildren=false,
capture=true,
handcursor=false,
x="-340",
alpha=100
);
// optional: add a close button
addlayer('popup_close_x', closex);
set(closex,
url='skin/closex.png',
parent='popup',
align=righttop,
edge=center,
x=20,
y=-25,
scale=1,
zorder=99,
alpha=0.5,
onover='tween(alpha,1)',
onout='tween(alpha,0.5)',
ondown='tween(alpha,1)',
onup='tween(alpha,0.5)',
onclick='tween(layer[popup].x,-500,1); wait(1); popup_close();'
);
//Titulo arriba del popup
addlayer('titulo', titulo);
set(titulo,
type=text,
html=Demo Popup,
bg=false,
css="font-family:Arial; font-size:20px; color:#ffffff;",
parent='popup',
align=centertop,
edge=center,
x=0,
y=-25,
scale=1,
zorder=99,
alpha=1
);
set(popup.type, html);
copy(popup.html, content);
copy(popup.htmlscrollbars, scrollbars);
// events when the popup should get closed automatically
set(global.events[popup].onremovepano, popup_close() );
]]></action>
<action name="popup_close" scope="private:POPUP">
if (onclose_callback,
callback = onclose_callback;
onclose_callback = null;
scope(global, get(callback) );
);
removelayer('popup_bg', true);
scope(private:POPUP, delete(popup); );
</action>
<data name="data_html_example">
<![CDATA[
<div style="padding:0px;">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
</div>
]]></data>
</krpano>Hi, from this post RE: Is it possible for html layer to contain ALL the functionality of a WEB page? everything seems to indicate that Bootstrap is a good solution to complement options that krpano does not have yet.
Please indexofrefraction or any advanced user: What is the correct way to connect krpano with Bootstrap? i.e connect HTML, CSS and JS
It may seem obvious but I can't find any precise information in this forum or on the internet. Some example and instructions would be very helpful 
Thanks!!!!
Hi, You can start using the vtourEditor that comes with the krpano installation, drag 3 or more panoramas, connect them and study the result. If you have questions about that, we will help you.
Hi, indexofrefraction Thank you for your answser. For me It looks a little complicated.
If you had to program an accordion menu like the one on this site: https://www.picosandshotel.com/pico-sands-hotel-360-view/
How would you do it?
Would you create your own plugin?
How complicated would it be to do it?
Maybe a solution could be to use CSS to style <details> and <summary> I don't like the idea that it is not compatible with older browsers, otherwise it would be fine.
Hi indexofrefraction thankyou for your answer.
This (using iframe) perfectly solves copying a web page (such as an accordion menu) but being an iframe makes it difficult to pass actions to the project. For example, how do I go from that iframe to a scene of the current project? That's why I was looking for the same functionality from a krpano html layer.
Krpano layer type correctly interprets (runs) style.css but ignores script.js (see below code)
<krpano debugmode="true" title="" onstart="startup();">
<preview type="grid(cube,32,32,512,0xCCCCCC,0xFFFFFF,0x999999);" />
<layer
name="mylayeriframe"
type="iframe"
keep="true"
align="lefttop"
iframeurl="demo/index.html"
width="400"
height="300"
/>
<layer
name="mylayerhtml"
type="html"
keep="true"
align="righttop"
html="get:data[test].content"
width="400"
height="300"
/>
<data name="test"><![CDATA[
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<ul class="accordion-menu">
<li>
<div class="dropdownHeader">
<i class="fa-solid fa-code"></i>
<span>Programming Languages</span>
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>
<a href="#">JavaScript</a>
</li>
<li><a href="#">Python</a></li>
<li><a href="#">C++</a></li>
</ul>
</li>
<li>
<div class="dropdownHeader">
<i class="fa-solid fa-pen-fancy"></i>
<span> UI/UX</span>
<i class="fa fa-chevron-down"></i>
</div>
<ul class="submenuItems">
<li><a href="#">Adobe XD</a></li>
<li><a href="#">Figma</a></li>
<li><a href="#">Sketch</a></li>
<li><a href="#">InVision Studio</a></li>
</ul>
</li>
<li>
<div class="dropdownHeader">
<i class="fa-regular fa-file-word"></i>
<span> Technical Writing </span>
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li><a href="#">Hashnode</a></li>
<li><a href="#">Medium</a></li>
<li><a href="#">FreeCodeCamp</a></li>
</ul>
</li>
<li>
<div class="dropdownHeader">
<i class="fa-solid fa-people-group"></i>
<span> Social Media </span>
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
</ul>
</li>
</ul>
]]></data>
</krpano>Hi, Is it possible to copy and paste the content of a web page and have it work in a html krpano layer? (See attachment)
If yes, How to insert in index.html the js code? (See attachment and code below) ?
<!DOCTYPE html>
<html>
<head>
<title>Demo Menu Lateral</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="mobile-web-app-capable" content="yes" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<style>
html { height:100%; }
body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
</style>
<link rel="stylesheet" href="accordion.css">
</head>
<body>
<script src="tour.js"></script>
<script>
Do Insert the code here ?
</script>
<div id="pano" style="width:100%;height:100%;">
<noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
<script>
embedpano({xml:"tour.xml", target:"pano", html5:"only", mobilescale:1.0, passQueryParameters:"startscene,startlookat"});
</script>
</div>
</body>
</html>Hi, see rx ry or rz hotspot properties for hotspot 3d rotation.
I have <view ... limitview="fullrange"/> in each scene as well as in the setup script.
But I am still seeing each pano scaled to window height. There must be some other adjustment. Bear in mind that that the main skin is the standard vtourskin.xml.
I think you should post a link to your project. Also share the .xml so I can help you. Did you see the .xml I posted? Does your project's .xml look similar? What version of krpano do you use?
I'm sorry, I had forgotten, even I participated
Hi,
I was testing AI on this site by the Spanish JS developer kiko palomares:
https://chatgpt.com/g/g-SoMIpfIfu-kiko-digital/c/49ed5691-8d59-481e-9fcd-c57d4319ce90
...And he gives very interesting programming answers in krpano .
Klaus would it be very difficult to have a help AI for the krpano forum?
<scene name="scene_maqueta" title="maqueta" onstart="" thumburl="panos/maqueta.tiles/thumb.jpg" lat="" lng="" heading="">
<control bouncinglimits="calc:image.cube ? true : false" />
<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="fullrange" />
<preview url="panos/maqueta.tiles/preview.jpg" />
<image hfov="1.00" vfov="0.135860" voffset="0.00">
<flat url="panos/maqueta.tiles/l%l/%00v/l%l_%00v_%00h.jpg" multires="512,4608x626,8960x1218,17920x2436,35840x4870,71680x9738" />
</image>
</scene>Please, paste your xml.
Hi, try with this:
<scene name=" ... ", etc... >
<view limitview="fullrange" />