Thursday, January 22, 2009

Shrink Image (JavaScript)

This function shrinks an image, so its dimensions are no bigger than the maximum dimensions you define.

// get new dimensions so it fits within the maximum
// o = original dimensions / image, m = maximum dimensions
function shrink(o, m)
{
    // r = resized
    var r = {width: o.width, height: o.height};
    // if an image, rather than an object, resize it
    if(o.nodeName && o.nodeName.toLowerCase() == "img") r = o;
    if(r.width > m.width)
    {
        r.height = r.height * (m.width / r.width);
        r.width = m.width;
        if(r.height > m.height)
        {
            r.width = r.width * (m.height / r.height);
            r.height = m.height;
        }
    }
    else if(r.height > m.height)
    {
        r.width = r.width * (m.height / r.height);
        r.height = m.height;
    }
    return r;
}

To use, simply supply the image and the dimensions to constrain it to:

var image = document.getElementById("image");
var max = {width: 1024, height: 768};
shrink(image, max);

It also works with an object instead of an image, for non-image related dimension calculation.

var original = {width: 1200, height: 960};
var max = {width: 1024, height: 768};
var shrunk = shrink(original, max);

Changing jQuery UI's Dialog widget's default options

While jQuery UI's Dialog widget has good default options, there may be circumstances when you want to change them. For instance, you may want all dialog windows to be modal windows, with a semi-transparent background and the bgiframe plugin applied. Place this code at the end of the page, or within $(document).ready.

$.extend($.ui.dialog.defaults, {
 overlay : { background: "#000", opacity: 0.8},
 modal: true,
 bgiframe: true
});

Saturday, January 10, 2009

Pixie – small, simple, website maker

Recently, I have been looking at Pixie, to see how it works as a simple system for managing websites. It is open source (GPL v3), written to web standards (XHTML Strict, Microformats) and powered by jQuery and PHP/MySQL.

It consists of several page types – dynamic (blog, news), static or module (e.g. contact form, events, links etc). Plugins add additional functionality to modules (like allowing comments on blog posts). Blocks allow you to add content alongside your content (e.g. display RSS content from BBC News).

Easy enough to extend, with detailed guides for module development (so you can create additional ones to those that are bundled with Pixie) block development and theme development.

A few additional blocks I have created: News (latest content from a page named ‘news’) and Google Maps. These can then be shown on any page (so you can see news on your home page for example).

Wednesday, January 07, 2009

Google Gears Desktop API - Working with files

The Google Gears Desktop API allows you to create shortcuts on your desktop (only to a page on the same site, not to another) and work with files. This example shows you how you can filter the file types when choosing files. gears_init.js required.

<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 <title>Google Desktop API - Working with files</title>
<script type="text/javascript" src="gears_init.js"></script>
<script type="text/javascript">
var fileformats = {

 // word document
 word: 'application/msword',
 // word 2007 document
 wpml: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',

 // excel spreadsheet
 excel: 'application/vnd.ms-excel',
 // excel 2007 spreadsheet
 ssml: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',

 // powerpoint presentation
 powerpoint: 'application/vnd.ms-powerpoint',
 // powerpoint 2007 presentation
 pml: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
 
 // jpeg
 jpeg: 'image/jpeg',
 
 // png
 png: 'image/png',
 
 // gif
 gif: 'image/gif',
 
 // tiff
 tiff: 'image/tiff'
}


// http://code.google.com/apis/gears/api_desktop.html
var desktop = google.gears.factory.create('beta.desktop');

function officeFiles()
{
 desktop.openFiles(openFilesCallback, {singleFile: false,
  filter: [fileformats.word, fileformats.wpml,
   fileformats.excel, fileformats.ssml,
   fileformats.powerpoint, fileformats.pml]
 });
}

function imageFiles()
{
 desktop.openFiles(openFilesCallback, {singleFile: false,
  filter: [fileformats.jpeg, fileformats.png,
   fileformats.gif, fileformats.tiff]
 });
}


function openFilesCallback(files)
{
 if(files.length == 0)
 {
  alert("No files selected");
 }
 else
 {
  var selectedFiles = [];
  for(var i = 0; i < files.length; i++)
  {
   selectedFiles.push(files[i].name + " (" + files[i].blob.length + " bytes)");
  }
  alert("Selected files: " + selectedFiles);
 }
}
</script>
 </head>
 <body>
  <p><a href="http://code.google.com/apis/gears/api_desktop.html">Google Gears Desktop API</a></p>
  <form action="" method="post">
   <input value="Select Office Files" type="button" id="selectofficefiles">
   <input value="Select Image Files" type="button" id="selectimagefiles">
  </form>
<script type="text/javascript">
var selectofficefiles = document.getElementById("selectofficefiles");
selectofficefiles.onclick = function()
{
 officeFiles();
 return false;
}

var selectimagefiles = document.getElementById("selectimagefiles");
selectimagefiles.onclick = function()
{
 imageFiles();
 return false;
}
</script>
 </body>
</html>

The benefit of using Google Gears is that you can get the file size before uploading the file, so a check can be done beforehand to see if the file is to big (e.g. if(files[i].blob.length > 1048576) alert(files[i].name + " too big (> 1MB)");.

Friday, January 02, 2009

Free Graph Paper (for printing)

There are a few sites that offer paper (graph, maths, speciality) you can print off (as PDF) for free. Usually with a credit to the site at the bottom of the page.

Konigi offers various storyboard and wireframe PDF's available in 8.5" x 11" (no A4 available). So they are useful when creating a site design mockup or a story.

Print Free Graph Paper offers Cartesian, Engineering, Polar, Isometric, Logarithmic, Hexagonal, Probability and Smith Chart templates available in Letter and A4 sizes.

MathSphere also has paper types the previous site doesn't.

Incompetech.com has various paper generators for different page sizes (you can create a custom size as well), not just graph paper, but speciality and writing as well (Chinese, Japanese, Fretboard, Cornell etc). You can even define what colour the lines should be.

Useful when you don't need a full pad, the stationer doesn't sell the paper you want, or the shops are closed and you need paper before they are open again (you have a deadline or late submission).