SHARPOID

Originally posted at fortmobile.com

This is the first post in the two part series. It points to some specific problems, and solutions I came up with, while making the mobile application for major event.

I have been contracted to develop mobile application for one of the biggest music festivals in the Europe - EXIT festival in Novi Sad, Serbia. In the year 2009, mobile apps were still kind of a new thing, so I felt the job had to be done perfectly to promote the this technology, especially on such a major event.

EXIT Festival app was developed for Java ME. Today this technology is below the radar and somewhat uncool, despite being the most widespread. Next year, Blackberry and Android phones were added and another team developed the iPhone version. All platforms used the solutions described later in this post.

Among many useful information about the event itself, venue and tourist information on Novi Sad, app shows info on performers and other "rich" documents. It downloads XML documents from the web service, containing artist name, bio, image, links to their website.

Event organizers were quite busy at the time, so they could not create separate set of data for mobile use. They let us pull existing documents and images from their Joomla-based web site and we had to figure out the way to "squeeze" them into small, constrained devices.

There were obvious problems. Back in 2009. there was no 3G and devices were constrained in terms of speed, memory and screen size. Most of the phones had 128x160 and 176x208 screens, some of which are present even today.

So, the loaded document pages and images had to load fast and had to be short. In the remainder of the document I will explain several server-based solutions* which we did to make the user experience on mobiles as good as possible.

Getting proper image size and orientation

Event website was full of hi-res images. But they were created with desktop browsers in mind, running on broadband internet and large screens. It is not practical (or possible) to download such images using mobile phones.

Further more, there are many different resolutions and screen layouts, and in order to get best results you have to properly scale and maybe rotate image. We created one routine called imgResize which handled all such cases and returned the adapted image. Every image was downloaded via this script.

$sourceURI = $_REQUEST["uri"];
$width = $_REQUEST["width"];
$height = $_REQUEST["height"];

$result = imgResize($sourceURL, $width, $height);
imagejpeg($result);

// ...

function imgResize($AFileName, $ATargetWidth, $ATargetHeight)
{
  // get the image dimensions and mime type
  $size = getimagesize($AFileName);
  $srcWidth = $size[0];
  $srcHeight = $size[1];
  $srcType = $size['mime'];

  // read source image
  if ($srcType == "image/jpeg")
    $srcImage = imagecreatefromjpeg($AFileName);
  else if ($srcType == "image/png")
    $srcImage = imagecreatefrompng($AFileName);
  else if ($srcType == "image/gif")
    $srcImage = imagecreatefromgif($AFileName);
  else
    return false;

  // check if image needs to be rotated to fit screen dimensions
  if ($ATargetWidth < $ATargetHeight && $srcWidth > $srcHeight)
  {
    // screen is in portrait mode, and image in landscape mode
    $imgScreenAdjusted = imagerotate($srcImage, -90, 0);
    $temp = $srcWidth;
    $srcWidth = $srcHeight;
    $srcHeight = $temp;
    imagedestroy($srcImage);
  }
  else if ($ATargetWidth > $ATargetHeight && $srcWidth < $srcHeight)
  {
    // screen is in landscape mode, and image in portrait mode
    $imgScreenAdjusted = imagerotate($srcImage, -90, 0);
    $temp = $srcWidth;
    $srcWidth = $srcHeight;
    $srcHeight = $temp;
    imagedestroy($srcImage);
  }
  else
  {
    // image matches the screen layout, no need to rotate
    $imgScreenAdjusted = $srcImage;
  }

  // calculate target dimensions, based on the canvas dimension and
  // real image size, while keeping aspect ratio
  $dW = $srcWidth / $ATargetWidth;
  $dH = $srcHeight / $ATargetHeight;
  if ($dW > $dH)
  {
    // we have to scale using width ratio
    $resultWidth = $srcWidth / $dW;
    $resultHeight = $srcHeight / $dW;
  }
  else
  {
    // we have to scale using height ratio
    $resultWidth = $srcWidth / $dH;
    $resultHeight = $srcHeight / $dH;
  }

  // create a blank image
  $imgScaled = imagecreatetruecolor($resultWidth, $resultHeight);

  // resample the original image
  imagecopyresampled($imgScaled, $imgScreenAdjusted, 0, 0, 0, 0,
  $resultWidth, $resultHeight, $srcWidth, $srcHeight);

  // cleanup
  imagedestroy($imgScreenAdjusted);
  return $imgScaled;
}

This may not be textbook PHP code, but I am not professional web developer. Still, this exact function has been used over and over again, for different apps and platforms. In the next part, I will share few other hacks which helped development of the EXIT festival app.