Posts by shauser67

I would like to include HTML elements inside an HTML layer. The elements should be styled through individual CSS classes. According to the documentation one can use the attribute htmllinkcolor to either enable a general link color (by setting a color value) or disabling general link colors (by setting an empty value). Unfortunately this seems not to work in version 1.23.3. I tested both a color value and an empty value, but krpano always added style="color: inherit;" to the link. As an easy workaround !important can be added to the CSS class. However it would be better if htmllinkcolor is working as expected. In the example below the link is neither blue nor green, but has the default text color.

<cssstyles>
    .container-class
    {
        background-color: #666666;
    }
    .heading-class
    {
        color: #FF0000;
    }
    .link-class
    {
        color: #0000FF;
    }
</cssstyles>

<data name="test_data"><![CDATA[
    <div class="container-class">
        <h1 class="heading-class">Heading</h1>
        <p>This is a <a href="#" class="link-class">sample link</a>.</div>
    </div>
]]></data>

<layer
    name="test_layer"
    type="html"
    x="100"
    y="200"
    width="200"
    height="100"
    htmllinkcolor="#00FF00"
    keep="true"
    html="get:data[test_data].content"
/>

Thanks for the advice, Tuur!

Unfortunately, I didn’t express myself quite correctly earlier. The container only adapts automatically to the children because I used `flowchildren` and `childflowspacing`. This causes layout shifts when a child is slightly scaled during a hover effect.

Now I’m doing away with `flowchildren` and calculating the children’s positions myself. In this case the container size doesn't change during hover effects.

I have a container layer (toolbar) in krpano that contains several icon buttons. The container’s width is dynamic, so it initially adjusts to the width of its children. Now I’d like to add a hover effect to the buttons: They should slightly change their size WITHOUT changing the size of the container. Unfortunately, animating the scale property also changes the size of the container. Is there a simple solution? Perhaps the container’s size could be frozen after all children have been added within an action? When is a good time to read the values of pixelwidth and pixelheight and assign them to width and height?

Thanks for any hints!

Steffen

The code above works well if event.ctrlKey is replaced by e.g. event.shiftKey. As ctrl+wheel is used by most browsers as page zoom there is probably some sort of compensation for this effect inside krpano which caused the problem.

I finally came up with a solution by manually handling wheel events and setting new field of view values through the javascript API:

var krpano = null;


var number = container.getAttribute ('data-number');


embedpano
({
  mwheel: false,
  target: "viewer-container",
  onready : krpano_onready_callback,
  [..]
});


function krpano_onready_callback (krpano_interface)
{
  krpano = krpano_interface;
}


container.addEventListener ('wheel', function (event)
{
  if (krpano)
  {
    if (event.ctrlKey)
    {
      event.preventDefault ();


      var fovdiff = 20.0;


      var hlookat = Number (krpano.get ("view.hlookat"));
      var vlookat = Number (krpano.get ("view.vlookat"));
      var fov     = Number (krpano.get ("view.fov"));


      fov += fovdiff * Math.sign (event.deltaY);


      krpano.call ("lookto (" + hlookat + ", " + vlookat + ", " + fov + ", tween (), true, true);");
    }
  }
});

By default mouse wheel events are used for scrolling through an HTML page. So I would like to use control key + mouse wheel for zooming in and out of an embedded panorama. Here is what I got so far using the javascript API:

var container = document.getElementById ('viewer-container');


var krpano = null;


embedpano
  ({
    mwheel: false,
    target: "viewer-container",
    onready : krpano_onready_callback,
    [..]
 });


function krpano_onready_callback (krpano_interface)
{
  krpano = krpano_interface;
}


container.addEventListener ('wheel', function (event)
{
  if (krpano)
  {
    event.stopPropagation ();


    if (event.ctrlKey)
    {
      event.preventDefault ();


      krpano.set ('control.disablewheel', false);
      krpano.set ('control.mousefovchange', "1.0");
    }
    else
    {
      krpano.set ('control.disablewheel', true);
    }
  }
});

Unfortunately it doesn't work as expected. The field of view changes for each wheel movement by far more than 1 degree (very large changes on Firefox, large changes on Chrome). What might be wrong here? Maybe there is an even simpler solution using krpano's scripting language?

Many thanks for any help in advance!