Dealing with DeviceResolution

Monkey Forums/Monkey Programming/Dealing with DeviceResolution

Tibit

(Posted 2013) [#1]

I found this html snippet from ElectricBoogaloo and it is very useful! However it appears DeviceWith & DeviceHeight does not update?

So even tough things in my app "should" be resolution independant (and is) I can't test it "on the fly".

Any ideas on how to fix? Feels like that would be the end of the resolution testing hassle forever! :)

<!-- Thanks to ElectricBoogaloo -->

<!DOCTYPE html>

<html>
<head>

<style type="text/css">
body{
	width: 100%
	height: 100%;
	overflow: hidden; /* keeps scrollbar off IE */
	font-family: arial,sans-serif;
	font-size: 13px;
	color: #000;
	background-color: #dc9;
	padding:0px;
	margin:0px;
}

a  {color : #440000;  }
a:HOVER  {color : #448844;  }
a:VISITED  {color : #444400;  }
a:VISITED:HOVER  {color : #559955;  }

canvas:focus{
	outline:none;
}
</style>
<script type="text/javascript">
function size(nw,nh) {
	var mycanvas = document.getElementById("GameCanvas");
	mycanvas.width = nw;
	mycanvas.height = nh;
}

function full() {
  var mycanvas = document.getElementById("GameCanvas");
  mycanvas.width  = window.innerWidth-108;
  mycanvas.height = window.innerHeight-8;
  //...drawing code...
}
</script>

</head>

<body onload="full();">

<table width="100%" height="100%"><tr><td width="100px" valign="top">
Fullscreen<br>
<a href="#" onClick="full();return false;">Big as Possible</a><br>
<br>
Standard<br>
<a href="#" onClick="size(320,240);return false;">320x240</a><br>
<a href="#" onClick="size(640,480);return false;"><b>640x480</b></a><br>
<a href="#" onClick="size(800,600);return false;">800x600</a><br>
<a href="#" onClick="size(1024,786);return false;">1024x786</a><br>
<a href="#" onClick="size(1280,960);return false;">1280x960</a><br>
<br>
16:9</br>
<a href="#" onClick="size(320,180);return false;">320x180</a><br>
<a href="#" onClick="size(640,360);return false;">640x360</a><br>
<a href="#" onClick="size(800,450);return false;">800x450</a><br>
<a href="#" onClick="size(1024,576);return false;">1024x576</a><br>
<a href="#" onClick="size(1280,720);return false;">1280x720</a><br>
<br>
<br>
Crap Phone<br>
<a href="#" onClick="size(240,320);return false;">Tall</a> | <a href="#" onClick="size(320,240);return false;">Wide</a><br>
<br>
iPhone<br>
<a href="#" onClick="size(320,480);return false;">Tall</a> | <a href="#" onClick="size(480,320);return false;">Wide</a><br>
<br>
iPhone Retina<br>
<a href="#" onClick="size(640,960);return false;">Tall</a> | <a href="#" onClick="size(960,640);return false;">Wide</a><br>
<br>
iPhone 5<br>
<a href="#" onClick="size(640,1136);return false;">Tall</a> | <a href="#" onClick="size(1136,640);return false;">Wide</a><br>

</td>
<td width="*" valign="top">

  <table>
    <tr>
      <td>
	<canvas id="GameCanvas" onclick="javascript:this.focus();" width=640 height=480 tabindex=1></canvas>
      </td>
      <td valign="top">
	<textarea id="GameConsole" style="width:500px;height:480px;border:0;padding:0;margin:0" readonly></textarea><br>
      </td>
    </tr>
  </table>

</td>
</tr></table>

<script language="javascript" src="main.js">Javascript not supported!</script>

</body>
</html>

Tibit

(Posted 2013) [#2]

I'm rendering this to test:

Method OnRender()
DrawCircle 0, 0, 100
DrawCircle 0, DeviceHeight, 100
DrawCircle DeviceWidth, DeviceHeight, 100
DrawCircle DeviceWidth, 0, 100
End

It seems to work downwards. When initial resolution is higher width/height works even at smaller resolutions but not bigger?

Gerry Quinn

(Posted 2013) [#3]

Just a thought, based on my use of diddy.SetNativeGraphicsSize(): are you trying to read the new values during OnUpdate()? In the case of the diddy function, I don't know whether it only activates during OnRender(), or whether Monkey only reads the values then, but when I call it I don't get a new resolution until OnRender() is called.

Tibit

(Posted 2013) [#4]

Yeah, I also used the SetNativeGraphicsSize before, then I had the resolution set from code - which is OK, but this is much more handy imo.

Even if it takes a render, would that not mean it just takes a frame to get it "right" again? Or is there something manual. Like a MojoVerifyDevice?

ElectricBoogaloo

(Posted 2013) [#5]

Hmm.. I'm using DeviceWidth() and DeviceHeight() here, with no issues.

I tend to stick them into Global variables, though..

J_WW=DeviceWidth();J_WH=DeviceHeight()

inside OnRender() seems to work fine for me.
Perhaps, as Gerry suggests, it only works within OnRender()..?

Tibit

(Posted 2013) [#6]

Gerry, setting SetVirtual(DeviceWidth, DeviceHeight, True) in OnRender was one of the things I had missed. Thanks for that!

Now it "almost" always work. But like before it gets weird in certain cases.

It is the two rightmost circles that disappear so I assume it has to do with DeviceWidth/DeviceHeight, or is it only for me?

I'm testing on Chrome.

Tibit

(Posted 2013) [#7]

Hm... I have gotten it working now.

I'm updating the rez in OnUpdate. Tough seems like I have to set the size and position of every gui-element every frame.

However the corner-circle work now in all resolutions :)

Gerry Quinn

(Posted 2013) [#8]

"Tough seems like I have to set the size and position of every gui-element every frame."

Just store the last-known resolution, and if it hasn't changed since the last frame you don't have to change your layout.