Beginner: How to set zoom ratio for Chrome TV browser?

JavaScript
1

From Implementation Tips - Google TV Web Developer’s Guide - Google Code they give the following js snippet.

function init() {

  var w = screen.width;
  var h = screen.height;

  var bw = window.innerWidth;
  var bh = window.innerHeight;

  var wRatio = bw/w;
  var hRatio = bh/h;
  var ratio = (wRatio + hRatio) / 2;

  document.getElementsByTagName('body')[0].style.zoom = ratio;
}

Can somebody explain to me what I manipulate in the js to change the zoom ratio? I don’t want my webpage for Chrome TV to zoom as much. I’m a designer and have little js experience. Thanks!

2

Is there something you want to change it to? What this is doing is actually changing a css property for body, so if you want a static zoom property, you don’t even need javascript for this. Otherwise, it’s just about calculating the zoom ratio that you do want, and putting that value in the ratio var. We could help you more with the code if you let us know what kind of zoom you want.

3

If the ratio is 1, you don’t want that to change much.
When it’s 0.5 we might want the ratio to go up to somewhere like 0.65 instead.

So, what we can do is to take the difference between 1 and the current ratio, and increase it by a little bit.


var ratioFactor = 0.3;
var ratio = (wRatio + hRatio) / 2;
ratio += (1 - ratio) * ratioFactor;

So, if the ratio starts out as being 1, 1-ratio is 0, so there is no change there.

If the ratio is 0.8, it will be 0.2 that is multiplied by 0.3, which add 0.06 on to is, resulting in a slightly larger ratio of 0.86
If the ratio is 0.5, there will be 0.5*0.3 added on to it, that being 0.15, so the ratio will end up being 0.65

Here’s a table to summarise the increase in the ratio, where the ratio brought 30% closer towards 1

Before  After
1       1
0.9     0.93
0.8     0.86
0.7     0.79
0.6     0.72
0.5     0.65
0.4     0.58
0.3     0.51
0.2     0.44
0.1     0.37

I don’t have Chrome TV to test with, so you might need the effect to be stronger (increase it from 30% to something larger) or you might need the complete opposite to occur, for the zooming effect to become weaker, in which case you can use a negative zoom factor.

4

Thank you for all the helpful responses. My developer or JS skills are so limited and appreciate the help.

What I first did was take an existing page layout and set the ratio like:

document.getElementsByTagName('body')[0].style.zoom = .75;

via window.onload or body.onload. But because I used the onload event trigger, it zoomed to size after loading and that behavior wasn’t desired. Fortunately the Chrome TV browser supports CSS Zoom, and I simply added a zoom style and percentage to the body tag (other PC browsers ignore this).