Skip to content
Permalink
Browse files

Fixed image resizing, started to implement orientation handling.

  • Loading branch information...
shimniok committed Apr 18, 2014
1 parent 1f61c83 commit 8f60dd8bc18b908d767591209392069e589f9f3d
Showing with 29 additions and 9 deletions.
  1. +1 −1 RPiTeleRover/www/rover.html
  2. +28 −8 RPiTeleRover/www/rover.js
@@ -17,7 +17,7 @@

<img id="imagestream" src=""/>

<table id="buttontable" padding=5>
<table class="button" padding=5>
<tr align="center">
<td></td><!--<td id="FL" class="button">FL</td>-->
<td id="F" class="button">F</td>
@@ -1,22 +1,42 @@
// Resize buttons and image
//
function doResize() {
var ww = $(window).width();
var wh = $(window).height();
var ww;
var wh;
var margin = 60;
var ratio = 320/240;
var winportion = 0.6; // portion of vertical space taken up by image
var tblportion = (1-winportion) * 0.9 * wh / 3;

$("table#buttontable td").width( tblportion );
$("table#buttontable td").height( tblportion );

$("img#imagestream").attr('height', winportion * wh);
// need to check to see if image is wider than window, ie, winportion * wh results in width > ww
if (window.orientation == 90 || window.orientation == -90) {
ww = $(window).height();
wh = $(window).width()-margin;
} else {
ww = $(document).width();
wh = $(document).height()-margin;
}

var iw = ww - margin*2;
var ih = wh*winportion - margin;

// Resize Image Stream
if (ih * ratio > iw) {
$("img#imagestream").height(iw/ratio);
$("img#imagestream").width(iw);
} else {
$("img#imagestream").width(ih*ratio);
$("img#imagestream").height(ih);
}

// Resize Table
$("table.button").width(wh - ih);
$("table.button").height(wh - ih);
}


$(window).load(function() {
doResize();
$(window).on('resize', doResize);
$(window).on('orientationchange', doResize);
});


0 comments on commit 8f60dd8

Please sign in to comment.
You can’t perform that action at this time.