Scaling down embedded KeyShotVR's

[justin.linnert]

Does anyone know if this is possible?  I've tried editing the html to change the size but unless it matches the exact resolution that the renderings were created in, the loading countdown never gets passed 0.  I've also tried to scale down the VR in an iframe and have been unsuccessful, but my knowledge is somewhat limited here.  Any help would be appreciated, thanks!
Justin

[Morten Kristensen]

Either you have to generate your images in the desired resolution (which is the best thing to do and I would encourage it!) or you use some JavaScript after the fact, but we have not implemented any official approaches for this. The following might be a bit advanced and I have to stress the fact that this is a hack. 

A simple but crude way is to use CSS Transforms on the "backbuffer" DIV that is created dynamically after the invocation of initKeyShotVR():

Code Select Expand


var ksvr = document.getElementById("backbuffer");
ksvr.style["WebkitTransform"] = "scale(0.5)";

(Note that "WebkitTransform" only works for Safari and Chrome. For other browsers you have to use the prefixes "Moz", "ms", "Ms" or "0" instead.)

The transform style is overwritten every time a new frame is shown (and at other times) so you will have to edit KeyShotVR.js to not do this. The contents of the file might look different depending on what version you are using but the general idea is the same.

Find a portion that looks like the following:

Code Select Expand

q.style[J]="translate("+-w.width/2+"px,"+-w.height/2+"px) scale("+d.g+") translate("+0.5*v.width/d.g+"px,"+0.5*v.height/d.g+"px) translate("+d.j+"px,"+d.k+"px) scale("+d.p+")",
q.style["max-width"]="",q.style.height="",p.style["background-color"]=a.backgroundColor):(q.removeAttribute("height"),q.style[J]=""

The transform is changed when q.style[J] is accessed. So you could comment out these accesses, like so:

Code Select Expand


/*q.style[J]="translate("+-w.width/2+"px,"+-w.height/2+"px) scale("+d.g+") translate("+0.5*v.width/d.g+"px,"+0.5*v.height/d.g+"px) translate("+d.j+"px,"+d.k+"px) scale("+d.p+")",*/
q.style["max-width"]="",q.style.height="",p.style["background-color"]=a.backgroundColor):(q.removeAttribute("height")/*,q.style[J]=""*/


This hack will not position the VR correctly when using windowResizable = true, so I advise you to use windowResizable = false here.

[DriesV]

Hmm, this is exactly what we want to do too.

I think I would be comfortable with a simple hack that works.
However, the method posted above only works for Webkit browsers?

I found this:
"Fun with CSS Transforms in Firefox and Webkit"
http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html
Please check the section:
"Deciding Which Property to Use"

It describes a method for detecting which CSS transform property should be used, depending on the browser.
Can someone please update the posted hack to make it compatible with all browsers?
If possible at all.

Dries

[Morten Kristensen]

Hi Dries.

Yes it only works for Webkit but it is easily generalised.

(Note that "WebkitTransform" only works for Safari and Chrome. For other browsers you have to use the prefixes "Moz", "ms", "Ms" or "0" instead.)

Instead you can use this code:

Code Select Expand


var prefixArray = ['Webkit', 'Moz', '0', 'ms', 'Ms'];
var styleTransform = "Transform";
for(var i = 0; i < prefixArray.length; i++) {
  if (typeof(document.documentElement.style[prefixArray[i]+'Transform']) != 'undefined') {
    styleTransform = prefixArray[i] + 'Transform';
  }
}

var ksvr = document.getElementById("backbuffer");
ksvr.style[styleTransform] = "scale(0.5)";


[DriesV]

Awesome!

I'm going to let our website guys try this out.

Dries

[DriesV]

Help!
I'm a coding noob...

I added the script to the VR's HTML and edited the VR javascript.
I'm not seeing much scaling.
I must be doing something terribly wrong...

I attached my test in zip.

Dries

[Morten Kristensen]

Hehe.

Your problem was that the code was not executed at the right time. It has to be done after the initialisation of the VR.

Code Select Expand


// SNIP. The options are set before this line.

keyshotVR = new keyshotVR(nameOfDiv,folderName,imageWidth,imageHeight,backgroundColor,uCount,vCount,uWrap,vWrap,uMouseSensitivity,vMouseSensitivity,uStartIndex,vStartIndex,minZoom,maxZoom,rotationDamping,windowResizable,addResizableGUIButton,addPlayGUIButton,imageExtension,showLoading,loadingIcon,allowFullscreen);

// Here comes the hack.
var prefixArray = ['Webkit', 'Moz', '0', 'ms', 'Ms'];
var styleTransform = "Transform";
for(var i = 0; i < prefixArray.length; i++) {
  if (typeof(document.documentElement.style[prefixArray[i]+'Transform']) != 'undefined') {
    styleTransform = prefixArray[i] + 'Transform';
  }
}

var ksvr = document.getElementById("backbuffer");
ksvr.style[styleTransform] = "scale(0.5)";


[DriesV]

Aha, got it.
But now I see I cannot zoom in anymore.

The entire idea was to use hires images (2000 pixels sq) to allow for good quality of zoomed-in details, while the VR initially would be displayed at a more convenient size (scale factor 0.5).
I guess I cannot achieve this with KeyShotVR at the moment?

It would be nice if there were an option to have the VR initialized at the 'minZoom' value.

Maybe I should try pursuing a different strategy: one 'total product' VR and then additional VRs for some components.

Dries

[Morten Kristensen]

Exactly, this hack destroys the natural zooming behaviour unfortunately.
At the moment it is not directly possible as-is.

I've added a feature idea but I'll first look into it after KS 4.1.

Why don't you just use an iframe with a smaller width than the browser perhaps and use the "windowResizable" argument to allow down-scaling?
You could control the dimensions of the iframe dynamically according to your needs. And you'd have the normal zooming functionality.

[DriesV]

Thanks, Morten!

I did as you suggested and uploaded the attached sample VR to my personal webspace.
http://driesv.dommel.be

In the VR's HTML I have:

Code Select Expand

var windowResizable = true;

Then in index.html I have:

Code Select Expand

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Stelrad Novello ECO T21 TEST FOR SCALING</title>
</head>

<body>

<iframe src="http://driesv.dommel.be/KeyShotVR-contest/KeyShotVR_Novello-ECO_T21_L1000xH600_TEST-SCALING_20130620.html" width="800px" height="800px" frameborder="0">iframe is not supported</iframe>

</body>
</html>

I can't get the VR to down-scale as I change the iframe size.

Dries

[wolfstar]

Hi, I'm having a similar issue with rescaling, and I'm watching this thread to see what solutions arise here.    I'm planning on putting these Keyshot VR pieces into a web site that has a "responsive" design... in other words, the web site has a variety of widths depending on the user's browser width, device type, etc.

The maximum width of the web site is 1200 pixels across, so I'm having Keyshot VR output at 1200x.    The problem is when the site goes to a smaller width, the size of the iframe is reduced, and the Keyshot VR contents is simply CROPPED.  Not scaled.  (see attached image).

I guess one solution would be to render out a version at 1200x, one at 960x, and so on for all my possible responsive design breakpoints, but that's not really practical.     

Are the "hacks" presented here a solution to this question?  Has anyone tried them yet and does it work across popular modern browsers?

Thanks,
David

[Morten Kristensen]

These are hacks, not solutions.

They are "cropped" because it is not scaled when the windowResizable flag is not changed.
So no, not a solution. But you can tweak it.

We're looking into if we should make a general solution for this in a future release.

Thanks.

[cadjockey]

any news on updates for this?

Rich

[dean_007_b]

Hi Im new to keyshot and I have been supplied with some VR files to embed on to a website, but I have noticed that KeyshotVR doesn't scale the images to suit the iframe

I have used the following css code to resize my iframe to the correct aspect ratio size (16:9) depending on the screen size

Code Select Expand


/* IFRAME */
iframe {
   display:block; /* force the iframe to display as block */   
   border:none;

}

.content {
    width: 100%;
    margin: 0px auto;
}

.embed-container {
    height: 0;
    width: 100%;
    padding-bottom: 56.25%; //(9/16= 0.5625 x 100) for 16:9 ratio
    overflow: hidden;
    position: relative;
}

.embed-container iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

}

and this is inserted into the html page you would like to display your content in the iframe.

Code Select Expand

<div class="content">
    <div class="embed-container">
        <iframe src="keyshot_VR.html" frameborder="0" allowfullscreen="allowfullscreen" ></iframe>
    </div>
</div>

for this code to work you must set the following in the keyshot produced html file

Code Select Expand

var downScaleToBrowser = false; i'm not to sure what this variable does, it doesn't seem to do much?

The renders have been supplied at 1920x1080 for high res images, and image clipping occurs when you resize the browser but it seems there is a scale function in the javascript KeyShotVR.js code which can effect the zoom/ viewport size of the keyshot VR, if i manually override the values in chrome i can achieve the settings i would like. see the two scale settings under the backbuffer -webkit-transform attributes

Code Select Expand


<img id="backbuffer" style="top: 0px; left: 0px; position: absolute; -webkit-user-select: none; -webkit-transform: translate(-960px, -540px) scale(0.3509259259259259) translate(1946.2796833773089px, 540px) translate(-2.5550378754750227px, -1.2523874176508514px) scale(2.835391761287855);" width="1920" height="1080" src="keyshot_38.png">


the first scale is output by "scale("+c.g+")" in the javascript file
//This seems to only be effected by the height of the window

the second scale is output by "scale("+c.m+")"  in the javascript file
But this seems to be effected by the height and width of the window

the second scale seems to be the one of most use, how is the c.m value calculated? can it be linked to a ratio of the iframe width/original image width?

i.e if the image is 1920 wide, the view port is 960 the scale of the width should be set at 0.5
and if the image is 1920 wide, the view port is 640 the scale of the width should be set at 0.33333

the height of the image should be based on the correct aspect ratio i.e 1:1 1920x1920px or 16:9 1920x1080px

if anyone is good at javascript id love to hear your comments, With the amount of responsive websites and mobile platforms being used, I think with this small responsive upgrade to KeyshotVR.js you'd make a good product great.

[Brandon Davis]

Hello dean_007_b,

We've made some improvements to KeyShotVR when embedding within an iframe and viewing on mobile devices, but will require a new KeyShotVR.js along with a small snippet. To make the iframe responsive you can use the below snippet on the webpage that has your KeyShotVR. This snippet will also be included in the "instructions.html" that is output with your KeyShotVR from KeyShot.

Code Select Expand


var vrIframe=document.getElementsByTagName("iframe");
var fBody=document.body;for(var i=0;i<vrIframe.length;i++)
{vrIframe[i].dataset.aspectRatio=vrIframe[i].height/vrIframe[i].width;
vrIframe[i].dataset.maxHeight=vrIframe[i].height;
vrIframe[i].dataset.maxWidth=vrIframe[i].width}
window.addEventListener("resize",function(){var e=fBody.clientWidth;for(var t=0;t<vrIframe.length;t++)
{if(e<vrIframe[t].dataset.maxWidth){vrIframe[t].height=e*vrIframe[t].dataset.aspectRatio;vrIframe[t].width=e}}});
window.dispatchEvent(new Event("resize"))


Please email me directly to obtain the latest KeyShotVR.js since this is not yet in KeyShot 5: brandon(at)luxion.com