[solved] Is it possible for html layer to contain ALL the functionality of a WEB page?

Fernando · July 1, 2024 at 9:01 PM

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) ?

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="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>

Display More

indexofrefraction · July 1, 2024 at 9:26 PM

for that you would use an iframe layer

krpano.com - Documentation - XML Reference

krpano.com - Examples

Fernando · July 2, 2024 at 2:19 AM

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)

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>

Display More

indexofrefraction · July 2, 2024 at 8:17 AM

Access elements of parent window from iframe

I have a page we can call parent.php. In this page I have an iframe with a submit form and outside of that I have a div with the id "target". Is it possible to…

stackoverflow.com

Fernando · July 2, 2024 at 1:57 PM

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.

s-maier · July 2, 2024 at 3:23 PM

I am pretty sure it's made with krpnao layers, not html/css.

indexofrefraction · July 2, 2024 at 7:51 PM

srry, i don't really understand the problem.

an accordion menu can be done both inside or outside krpano

and both doesn't need a separate website with scripts (iframe).

outside you could use bootstrap for example. (https://getbootstrap.com/docs/5.2/components/accordion/)

inside you have the (old) krpano accordion plugin as a starting point.

you don't have to use a krpano html layer if you can do a html/css/js accordion better,

then it is better to just create it outside krpano.

you can always get the krpano object and control krpano from the outside.

Code

var krpano = document.getElementById('krpanoSWFObject');
krpano = krpano.get('global');
krpano.actions.loadscene(...); // etc etc

krpano.com - Documentation - Javascript Interface

EDIT: example for a non-krpano accordion menu using CSS3:

How to Create Accordion Menu in Pure CSS3 - Designmodo

Topic: CSS3 Difficulty: Intermediate Estimated Completion Time: 30 mins In this tutorial we will learn how to create an accordion menu in pure CSS3. As we

designmodo.com

CSS3 Accordion Menu

there are tons of options doing it with html/css/js,

but doing it "the krpano way" is also possible, of course.

whatever suits you better.

kme · July 3, 2024 at 8:48 AM

Something to consider is that when coding the menu in krpano, the menu will be displayed when using "full screen". When you use html, and the user goes full screen mode, the menu will not be visible as it is outside the canvas of krpano.

indexofrefraction · July 3, 2024 at 8:50 AM

you can use display.customFullscreenElement to solve that

krpano.com - Documentation - XML Reference

Fernando · July 13, 2024 at 3:35 PM

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)

Code

<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

indexofrefraction · July 13, 2024 at 8:13 PM

hi,

i personally would probably separate it from krpano and put it in the index.html,

but i guess your solution works fine as well and should work with fullscreen, too.

the other solution needs display.customFullscreenElement to be set to a wrapper <div>.

[solved] Is it possible for html layer to contain ALL the functionality of a WEB page?

Fernando July 1, 2024 at 9:07 PM

Fernando July 4, 2024 at 4:40 PM

Participate now!