questions about approach to krPano implementation

  • Hello all. My company finally picked up the license yesterday, and after a couple weeks of on again/off again fiddling with KrPano, I have some questions. Hopefully this will all make sense.

    Overview
    We are working on a home tour product and will be using the HTML5 option for KrPano 100% of the time. Each room of a house will be its own distinct scene in KrPano, and there will no linking between scenes (though I’ve seen that mechanism in heavy use in some of the examples/demos). The scene will have multiple hotspots. These hotspots will not be used for scene linking - instead, the hotspots will represent an advertiser/sponsor/brand product which is shown in the krpano scene.

    Example: a hotspot centered over a Vitamix mixer on the counter of the kitchen. Hovering (on non-touch devices at leaset) should result in a tooltip (text only), while a click would launch an overlay displaying the various properties of the product like hotspot id, product title, image, click thru url, and description. This properties data is currently housed in a JSON array in the tour.html page.

    Current Setup
    Tour.html
    - JSON data
    - some javascript vars, console.log calls and functions that I’ve been playing with, triggering from tour.xml hotspot events.
    - the krpano embed:

    Code
    embedpano({xml:"tour.xml", target:"pano", html5:"prefer", passQueryParameters:true});

    Tour.xml
    - skin settings
    - textstyle settings
    - the single scene we’re working with
    - hotspot elements (two distinct sets to test out different approaches)
    - hotspot type 1:

    Code
    <hotspot name="simple1" style="skin_hotspotstyle" url="skin/sni_vtourskin_hotspot_active.png" ath="-135.175" atv="-19.701" onover="js(showTooltip(1))" onout="js(hideTooltip(0))" tooltip="hotspot tooltip 1" onclick="js(showOverlayV2(0))" linkedscene="" />
    }


    Vtourskin.xml
    - Tons of stuff here obviously. But specifically of inters are style definitions and actions tied to events defined in the style:
    - Definition for the style I’ve applied to one set of 3 hotspots “skin_hotspotstyle”:

    Code
    <style name="skin_hotspotstyle" scale=".5" edge="top" oy="0" distorted="false"
     onover="onOverHotspot"
     onhover="onHoverHotspot"
     onout="onOutHotspot"
     onclick="if(linkedscene, skin_hidetooltips(); tween(scale,0.25,0.5); tween(oy,-20,0.5); tween(alpha,0,0.5); looktohotspot(); loadscene(get(linkedscene),null,MERGE,BLEND(1)); skin_updatescroll(); );"
     onloaded="if(skin_settings.tooltips_hotspots, if(linkedscene, copy(tooltip,scene[get(linkedscene)].title); loadstyle(skin_tooltips); ));" />

    - I’ve got a few simple actions set up as I begin testing. Right now just getting console.log feedback as I interact with the hotspots… but I’m not having any luck getting basic tooltip data .


    Goals
    1. A user hovering over a hotspot causes a tooltip to render anchored at the hotspot. The hover also changes the hotspot image (or the CSS styles on the image, that’s fine too).
    2. A click fires a function which renders an overlay containing elements referenced by data specific to the hotspot’s product, contained in a JSON array. The click would need to pass a reference to the hotspot to the overlay function so it knows which product to display.

    Questions

    1. I saw in the docs that hotspot clicks are only supported if the hotspot has a ‘linked scene’ attribute. Is that true? Since I’m not linking scenes I’m not sure why I’d need it, but I have included it on one of the two sets of hotspots for testing. How does this attribute work, or rather how does having it or not (and its value) work re: hotspot hovers (i.e. Tooltips) or clicks (i.e. Kicking off a more complex function such as rendering a carousel of products).
    2. I saw in the docs (https://krpano.com/docu/xml/) that attributes which were defined in a style can NOT be overwritten in the layer / plugin / hotspots definition. So if I want to change out the url of the hotspot (i.e.. change the hotspot image ‘on over’), I would need to define the url property on the hotspot itself vs in the vtourskin.xml style definition? If that’s the case, how the heck can I specify a different asset for the hover state?
    3. From vtourskin.xml I can call javascript native methods ala js(console.log('over action recorded via skin action')); but I can’t seem to reference functions in tour.html ala js(doOnce());. I’m guessing a scope issue, but perhaps it’s something specific to how the vtourskin.xml is handled?
    4. Is it possible to embed my product data (currently housed in JSON in the tour.html) in the tour.xml instead, or will this result in parsing errors due to KrPano not recognizing the custom tags? In that case I guess I’d need to leave my product data in the html layer (which IS doable if needed).

    JSON:

    Code
    var tour_products = [
    {"product_id": "1", "title": "Sherwin-Williams&reg; Black Fox &mdash; SW 7020", "logo_img": "http://img.diynetwork.com/DIY/2011/12/09/BC12_HG-SW-Three-Color-Horizontal_s124x64.gif", "descr": "Create beautiful, foolproof color flow for your home &mdash; inside and out &mdash; with designer inspired HGTV HOME&trade; by Sherwin-Williams interior & exterior paint, wallpaper and decals.", "sponsor_url": "http://adsremote.scrippsnetworks.com/event.ng/Type=click&FlightID=&AdID=&TargetID=&Values=2095857&Redirect=http://www.sherwin-williams.com/homeowners/color/find-and-explore-colors/paint-colors-by-family/SW7020-black-fox/", "product_img": "http://hgtv.sndimg.com/HGTV/2012/06/06/RX-UO2012_hgtv-home-sherwin-product-shot_s266x200.jpg”},
    {object 2},
    {object 3}
    ]

    XML:

    Code
    <products>
         <product id="1" title="Sherwin-Williams&reg; Black Fox &mdash; SW 7020" logo_img="absolute-path-to-image.jpg" descr="Create beautiful, foolproof color flow" sponsor_url=“http://www.sherwin-williams.com/" product_img=“absolute-path-to-image.jpg" />
  • Hi,

    I saw in the docs that hotspot clicks are only supported if the hotspot has a ‘linked scene’ attribute. Is that true? Since I’m not linking scenes I’m not sure why I’d need it, but I have included it on one of the two sets of hotspots for testing. How does this attribute work, or rather how does having it or not (and its value) work re: hotspot hovers (i.e. Tooltips) or clicks (i.e. Kicking off a more complex function such as rendering a carousel of products).

    No, that's not true - that 'linkedscene' is a custom attribute that will be used only by the 'skin_hotspotstyle' <style> script codes from the vtourskin.xml. That style have a onclick event that is used that linkedscene setting to load that scene by using the loadscene() action.

    I saw in the docs (https://krpano.com/docu/xml/) that attributes which were defined in a style can NOT be overwritten in the layer / plugin / hotspots definition. So if I want to change out the url of the hotspot (i.e.. change the hotspot image ‘on over’), I would need to define the url property on the hotspot itself vs in the vtourskin.xml style definition? If that’s the case, how the heck can I specify a different asset for the hover state?

    Use no or a custom style for your hotspot. You could use the onover and onout events to change the url of the hotspot, but to avoid a delay when the 'over' image will be the loaded the first time, I would recommend using 'sprite images' and the 'crop' settings for different state images:
    https://krpano.com/docu/xml/#layer.crop

    Here an example:
    https://krpano.com/examples/117/e…/crop/crop.html

    From vtourskin.xml I can call javascript native methods ala js(console.log('over action recorded via skin action')); but I can’t seem to reference functions in tour.html ala js(doOnce());. I’m guessing a scope issue, but perhaps it’s something specific to how the vtourskin.xml is handled?

    Please see here for calling from JS to krpano:
    https://krpano.com/docu/js/#top

    Is it possible to embed my product data (currently housed in JSON in the tour.html) in the tour.xml instead, or will this result in parsing errors due to KrPano not recognizing the custom tags? In that case I guess I’d need to leave my product data in the html layer (which IS doable if needed).

    That depends on your system - but by using a <data> element and CDATA tags any kind of data could be embedded into the xml:
    https://krpano.com/docu/xml/#data

    Best regards,
    Klaus

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!