Hello. I'm working on a pano with lookto buttons so that when you click a button, it looks at a different area of the pano. I have that part working as expected.
I also want to add in a before/after slider. I have that working as well, but now when I click a button it zooms all the way into the pano and then resets once it gets to its rotation point.
I am trying to get it to just look without zooming, but I can't figure out what to change.
Look to buttons working as expected:
https://steelblue.media/Testing/Travis…okAt/index.html
When I add the before/after slider, it zooms all the way in before getting to the view angle:
https://steelblue.media/Testing/Travis…fter/index.html
Thanks for any help,
Travis
Here is the XML for the version with the before&after...
<krpano>
<!--
Compare Panos Example
- use krpano-layers for the pano-display and sync their view
- any two kind of pano images can be used, multires, different resolutions
- provide side-by-side / top-bottom / splitscreen / overlap-blending modes
- a slider-control for the splitscreen
- a blending-control for the overlap-mode
-->
<!-- the two pano images to compare -->
<scene name="pano1" title="p01_Aerial_Existing" onstart="" thumburl="panos/p01_Aerial_Existing.tiles/thumb.jpg" lat="" lng="" alt="" heading="">
<control bouncinglimits="calc:image.cube ? true : false" />
<view
hlookat="0.0"
vlookat="0.0"
fovtype="DFOV"
fov="90"
maxpixelzoom="0"
fovmin="90"
fovmax="90"
limitview="auto"
/>
<preview url="panos/p01_Aerial_Existing.tiles/preview.jpg" />
<image>
<cube url="panos/p01_Aerial_Existing.tiles/pano_%s.jpg" />
</image>
</scene>
<scene name="pano2" title="p01_Aerial" onstart="" thumburl="panos/p01_Aerial.tiles/thumb.jpg" lat="" lng="" alt="" heading="">
<control bouncinglimits="calc:image.cube ? true : false" />
<view hlookat="0.0"
vlookat="0.0"
fovtype="DFOV"
fov="90"
maxpixelzoom="0"
fovmin="90"
fovmax="90"
limitview="auto" />
<preview url="panos/p01_Aerial.tiles/preview.jpg" />
<image>
<cube url="panos/p01_Aerial.tiles/pano_%s.jpg" />
</image>
</scene>
<!-- the startup view -->
<view hlookat="0" fovtype="dfov" fov="90" maxpixelzoom="0" fovmin="90" fovmax="90" limitview="auto"/>
<layer
name="krpano1container" type="container" safearea="false" x="0%" width="50%" height="100%" maskchildren="true" enabled="false" zorder="0" >
<layer name="krpano1" type="krpano" align="left" width="200%" height="100%"
onloaded="krpano.actions.loadxml(('<krpano>' + scene[0].content + '</krpano>'),null,IMAGEONLY);"
/>
</layer>
<layer name="krpano2container" type="container" safearea="false" x="50%" width="50%" height="100%" maskchildren="true" enabled="false" zorder="0">
<layer name="krpano2" type="krpano" align="right" width="200%" height="100%"
onloaded="krpano.actions.loadxml(('<krpano>' + scene[1].content + '</krpano>'),null,IMAGEONLY);"
/>
</layer>
<events onresize="resize_viewers();"
onviewchange="sync_viewers();"
/>
<action name="resize_viewers" scope="local">
w = stagewidth;
h = stageheight;
if(display.safearea_inset, // iPhone 'notch' fullscreen mode support
w = display.safearea_inset.sw;
h = display.safearea_inset.sh;
);
layer[krpano1].width = w;
layer[krpano1].height = h;
layer[krpano2].width = w;
layer[krpano2].height = h;
</action>
<action name="sync_viewers" type="js">
var viewFrom = krpano.view;
var viewTo1 = krpano.layer.getItem("krpano1").krpano.view;
var viewTo2 = krpano.layer.getItem("krpano2").krpano.view;
viewTo1.hlookat = viewTo2.hlookat = viewFrom.hlookat;
viewTo1.vlookat = viewTo2.vlookat = viewFrom.vlookat;
viewTo1.camroll = viewTo2.camroll = viewFrom.camroll;
viewTo1.fovtype = viewTo2.fovtype = viewFrom.fovtype;
viewTo1.fov = viewTo2.fov = viewFrom.fov;
viewTo1.fisheye = viewTo2.fisheye = viewFrom.fisheye;
viewTo1.architectural = viewTo2.architectural = viewFrom.architectural;
viewTo1.pannini = viewTo2.pannini = viewFrom.pannini;
viewTo1.tx = viewTo2.tx = viewFrom.tx;
viewTo1.ty = viewTo2.ty = viewFrom.ty;
viewTo1.tz = viewTo2.tz = viewFrom.tz;
viewTo1.ox = viewTo2.ox = viewFrom.ox;
viewTo1.oy = viewTo2.oy = viewFrom.oy;
viewTo1.oz = viewTo2.oz = viewFrom.oz;
viewTo1.rx = viewTo2.rx = viewFrom.rx;
viewTo1.ry = viewTo2.ry = viewFrom.ry;
</action>
<style name="button" type="text" zorder="2"
css="text-align:center;"
padding="4 8"
bgborder="4 0xFFFFFF 1"
bgroundedge="1"
bgshadow="0 1 4 0x000000 1.0"
onover="set(bgcolor, 0xC7E4FC);"
onout="calc(bgcolor, pressed ? 0x90CAF9 : 0xFFFFFF);"
ondown="set(bgcolor, 0x90CAF9);"
onup="calc(bgcolor, hovering ? 0xC7E4FC : 0xFFFFFF);"
/>
<style name="button_selected"
css="text-align:center; text-decoration:underline;"
/>
<action name="set_split_screen" scope="local" args="mode, split">
%1(layer[krpano1container].alpha, 1.0);
%1(layer[krpano1container].x, 0%);
%1(layer[krpano1container].y, 0%);
%1(layer[krpano1container].width, ((1-split) * 100 + '%'));
%1(layer[krpano1container].height, 100%);
%1(layer[krpano1].x, 0%);
%1(layer[krpano2container].alpha, 1.0);
%1(layer[krpano2container].x, ((1-split) * 100 + '%'));
%1(layer[krpano2container].y, 0%);
%1(layer[krpano2container].width, ((split * 100 + '%')));
%1(layer[krpano2container].height, 100%);
%1(layer[krpano2].x, 0%);
</action>
<!-- Split line-->
<layer name="split_slider" type="container" safearea="false" zorder="1"
x="50%" edge="top" width="20" height="100%" bgcapture="true" cursor="ew-resize" enablechildren="false" autoalpha="true"
ondown="asyncloop(pressed, x=(mouse.x/stagewidth * 100) + '%'; set_split_screen(set, (1-mouse.x/stagewidth),true) );"
>
<layer type="container" align="top" width="2" height="100%" bgcolor="0xFFFFFF" bgshadow="0 0 16 0x000000 .5" bgalpha="1" />
</layer>
<layer name="blend_slider" type="container" zorder="1" autoalpha="true" alpha="0"
align="bottom" y="200" width="200" height="16" bgalpha="0.5" bgcolor="0xFFFFFF" bgborder="1 0xFFFFFF 0.2" bgroundedge="9" bgblur="5"
>
<layer name="blend_grip" align="left" edge="center" style="button" width="48" height="28" bgroundedge="20" padding="0" textalign="center" text="50%" x="50%"
ondown.addevent="asyncloop(pressed,
pos = (mouse.stagex - parentobject.stagex) / parentobject.pixelwidth;
clamp(pos,0,1);
x = 100*pos + '%';
text = (100-floor(100*pos)) + ':' + floor(100*pos);
layer[krpano2container].alpha = pos;
);"
/>
</layer>
<!--
Here a special and optional hack:
- The example is created with WebGL disabled (by webgl=false in the html).
- That's because the panos are in sub-layers (with WebGL) and so
no WebGL-layer in the main viewer is required.
- This safes a few computer resources (but is normally not noticeable).
- And to have still the context-menu items for the distorted views,
which are only available with WebGL, here temporary the device.webgl
setting is enabled and then restored again.
-->
<set var="backup_device_webgl" val="device.webgl" />
<set var="device.webgl" val="true" />
<include url="%VIEWER%/plugins/contextmenu.xml" />
<set var="device.webgl" val="backup_device_webgl" />
<!-- select the startup mode -->
<action autorun="onstart">
//side_by_side(set);
//top_bottom(set);
split_screen(set,0.5);
//overlap_blending(set);
</action>
<!-- MENU NAVIGATION BELOW -->
<layer name="Orchards"
type="text"
keep="true"
visible="true"
align="lefttop" x="30" y="300"
html="[b]Orchards[br] [/b]"
css="font-family:Arial; font-size:20px; color:#000000;"
autowidth="auto"
autoheight="auto"
vcenter="false"
padding="10"
wordwrap="true"
bg="true"
bgcolor="0xFFFFFF"
bgalpha="0.75"
bgborder="0"
bgroundedge="0"
bgshadow=""
txtshadow=""
mergedalpha="true"
interactivecontent="false"
onautosized=""
onclick="looktohotspot(ShepardGlen);
lookto(0,12,0,smooth(100,50,60));"
/>
<layer name="Shepard's Glen"
type="text"
keep="true"
visible="true"
align="lefttop" x="30" y="350"
html="[b]Shepard's Glen[br] [/b]"
css="font-family:Arial; font-size:20px; color:#000000;"
autowidth="auto"
autoheight="auto"
vcenter="false"
padding="10"
wordwrap="true"
bg="true"
bgcolor="0xFFFFFF"
bgalpha="0.75"
bgborder="0"
bgroundedge="0"
bgshadow=""
txtshadow=""
mergedalpha="true"
interactivecontent="false"
onautosized=""
onclick="looktohotspot(ShepardGlen);
lookto(-165,20,0,smooth(100,50,60));"
/>
<layer name="Sycamore"
type="text"
keep="true"
visible="true"
align="lefttop" x="30" y="400"
html="[b]Sycamore[br] [/b]"
css="font-family:Arial; font-size:20px; color:#000000;"
autowidth="auto"
autoheight="auto"
vcenter="false"
padding="10"
wordwrap="true"
bg="true"
bgcolor="0xFFFFFF"
bgalpha="0.75"
bgborder="0"
bgroundedge="0"
bgshadow=""
txtshadow=""
mergedalpha="true"
interactivecontent="false"
onautosized=""
onclick="looktohotspot(ShepardGlen);
lookto(175,10,0,smooth(100,50,60));"
/>
<layer name="City Green"
type="text"
keep="true"
visible="true"
align="lefttop" x="30" y="450"
html="[b]City Green[br] [/b]"
css="font-family:Arial; font-size:20px; color:#000000;"
autowidth="auto"
autoheight="auto"
vcenter="false"
padding="10"
wordwrap="true"
bg="true"
bgcolor="0xFFFFFF"
bgalpha="0.75"
bgborder="0"
bgroundedge="0"
bgshadow=""
txtshadow=""
mergedalpha="true"
interactivecontent="false"
onautosized=""
onclick="looktohotspot(ShepardGlen);
lookto( 130,72,0,smooth(100,50,60));"
/>
</krpano>
Alles anzeigen