Web wok » scripts and tips

Rotate and zoom images with Javascript

3guineas — Mon, 17 Nov 2008 12:11:38 +0000

A Javascript script to rotate and zoom images using the canvas element.

Installation

in the BODY of your html page insert the commands which will trigger the transformations and the image you want to rotate, embedded in a canvas element:

<body onload="CanvasOnload()">

<h1>Image rotate and zoomh1>
    <span style="text-align: center; width: 65px">
        <a href="javascript: location.href = 'index.html'" style="text-decoration: none">
            <img src="reset.png" alt="Reset the image" border="0" />
        a>
    span>

<p>
	rotate:
	<input type="button" value="0°" onclick="rotate(0);">

	<input type="button" value="90°" onclick="rotate(90);">
	<input type="button" value="180°" onclick="rotate(180);">
	<input type="button" value="-90°" onclick="rotate(-90);">
p>

<div>
    <span style="text-align: center; width: 65px">
        <a href="#"
           onmousedown="mousedown = true; ZoomOut(document.getElementById('myimage'))"
           onmouseout="mousedown = false"
           onmouseup="mousedown = false"
           style="text-decoration: none">
            <img src="minus.jpg" alt="Zoom out" border="0" />
        a>

    span>
    <span style="text-align: center; width: 65px">
        <a href="#"
           onmousedown="mousedown = true; ZoomIn(document.getElementById('myimage'))"
           onmouseup="mousedown = false"
           onmouseout="mousedown = false"
           style="text-decoration: none">
            <img src="plus.jpg" alt="Zoom in" border="0" />
        a>
    span>
div>

<canvas id="ff_canvas" width="159" height="198">
    <img src="/js-tests/rotateImage/fashionable.jpg"
         alt="Zend"
         width="159"
         height="198"
         id="myimage"
         style="margin-left: 50px; position: absolute; top: 110px; left: 250px; cursor: hand" />

canvas>

In the HEAD of your html page, you need to insert the references to your scripts:

<script type="text/javascript" src="imgRotateCanvas.js">script>
<script language="javascript" src="imgZoomCanvas.js">script>

This is the code in “imgRotateCanvas.js”:

/*Author: Val Cartei,  val.cartei@gmail.com.
Year:2008
Description: rotates an image embedded in a canvas element.

This script is an adaptation of a script by: Benoit Asselin | http://www.ab-d.fr. The original script can be found at:
The JavaScript Source!! http://javascript.internet.com
*/

/**
*function: rotate
* @param int p_deg - the degrees of the rotation (e.g. -90,180,270,0).
*/
function rotate(p_deg) {
	if(document.getElementById('ff_canvas')) {
		/*
		Ok!: Firefox 2, Safari 3, Opera 9.5b2
		No: Opera 9.27
		*/
		var image = document.getElementById('myimage');
		var canvas = document.getElementById('ff_canvas');
		var canvasContext = canvas.getContext('2d');

		switch(p_deg) {
			default :
			case 0 :
				canvas.setAttribute('width', image.width);
				canvas.setAttribute('height', image.height);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, 0, 0);
				break;
			case 90 :
				canvas.setAttribute('width', image.height);
				canvas.setAttribute('height', image.width);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, 0, -image.height);
				break;
			case 180 :
				canvas.setAttribute('width', image.width);
				canvas.setAttribute('height', image.height);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, -image.width, -image.height);
				break;
			case 270 :
			case -90 :
				canvas.setAttribute('width', image.height);
				canvas.setAttribute('height', image.width);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, -image.width, 0);
				break;
		};

	} else {
		/*
		Ok!: MSIE 6 et 7
		*/
		var image = document.getElementById('myimage');
		switch(p_deg) {
			default :
			case 0 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';
				break;
			case 90 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
				break;
			case 180 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
				break;
			case 270 :
			case -90 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
				break;
		};

	};
};

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
	var image = document.getElementById('myimage');
	var canvas = document.getElementById('ff_canvas');
	if(canvas.getContext) {
		image.style.visibility = 'hidden';
		image.style.position = 'absolute';
	} else {
		canvas.parentNode.removeChild(canvas);
	};

	rotate(0);
});

This is the code in “imgZoomCanvas.js”:

/*Author: Val Cartei,  val.cartei@gmail.com.
 Year:2008
 Description: rotates an image embedded in a canvas element.

This script is an adaptation of a script that can be found at:
 http://www.phpguru.org/downloads/image_rotate/rotate.html
 )*/

These are image files used. Put them in the root directory together with your html page and the .js scripts.

Zoom in:

ZoomOut:

and the sample image:

Jquery, Ajax forms, PHP and Mysql at the table

3guineas — Mon, 03 Nov 2008 16:26:06 +0000

Before starting, if you have PHP.x < PHP.2, you need to put into your includes folder the library jsonwrapper (this encodes/decodes json objects).

Imagine you have a form to add an item to a shop and you want to create a new category for that shop without leaving that page.

One way to do it is to have a link “add a new category” that when clicked, shows some input fields for adding the new category (e.g. name and description) and a button to submit these data.

When the button is clicked, javascript detects that you do not want to send the whole form, but instead it retrieves these fields and sends them as an Ajax request to the server. The php code on the server side will get the data, perform the request (adding the category) and return some data (e.g. the new category object) to the form. Javascript waits for the response and processes it.

This is the general idea, now let’s have a look at the code:

Client-side: form.php

in the HEAD insert javascript:

The first line imports jquery library

The second script tag includes Ajax interaction:

it dynamically displays the fields in the form that will be sent as Ajax (hidden at the beginning) and when submitted it discriminates between the whole form and the sending of these fields (‘action’).

it retrieves those fields within the form whose values we want to send to the server and encodes them as a json object.

it sends a simple POST request to a server with the data as json.

it handles the response by veryifing the data sent back by the server. If successful, it modifies the form and add a positive feedback, otherwise it shows a negative feedback.

in the BODY:

within the HTML form

....
 
.....

add a new category

Server-side: manage_data.php

PHP code:

0,
  'catname'   =>0,
);

require_once incpath("/jsonwrapper/jsonwrapper.php"); //encode/decode json objects for AJAX calls
//get the data from the post request sent through javascript
if(!empty($_POST["add"])){

$name=$_POST['catname'];
$description=$_POST['catdescription'];
$new_record_id= $ShopCategory->newRecord($data);
}

 //json object returned to the calling page
$foo= array(
 'idshopcategory'  =>1,
 'catname'   =>$name,
'catdescription'   =>$description,
);
// Now encode the array to JSON format
$json = json_encode($foo);
// encode array $json to JSON string
echo $json;
die();
?>

it creates an array of values to be returned

it encodes them as a json object (using json_encode as defined in the library jsonwrapper)

it sends the object to the page form.php.

Dev and Live version of a WordPress site

3guineas — Fri, 01 Aug 2008 11:52:05 +0000

Setting up the DEV and LIVE sites

Download the wordpress installation: http://wordpress.org/download/.

In the dev and live servers, create a new empty folder in your websites roots.

Unzip the wordpress installation and copy the files in the newly created folders.

Set up the Apache’s virtual host for your dev and remote sites.

Create a new empty database i.e. culturegeeks in the dev server and another with the same name in your remote server.

Rename wp-example.php in wp-config.php.

Open wp-config.php and set the database settings so that if you are in your dev server you will connect to the dev database, otherwise it will connect to the remote database. In my case that’s what I got:

switch($_SERVER['SERVER_NAME']){
 case '192.168.0.2':
 //dev site (fileserver)
 define('DB_USER', 'I am not gonna publish it here!');     // Your MySQL username
 define('DB_PASSWORD', 'I am not gonna publish it here!'); // ...and password
 define('DB_HOST', '192.168.0.2');    // 99% chance you won't need to change this value
 break;
 default:
 //live site (dl320) //remote user:admin pwd:*g11eiKu9Y#E
 define('DB_USER', 'I am not gonna publish it here!');     // Your MySQL username
 define('DB_PASSWORD', 'I am not gonna publish it here!'); // ...and password
 define('DB_HOST', '212.42.165.194');    // 99% chance you won't need to change this value
 break;
}
define('DB_NAME', 'culturegeeks');    // The name of the database

Go to your dev website address and run the installation script:
devyourwebsite/wp-admin/wp-install.php

This will set up the dev website.

Go to your live website address and run the installation script:
devyourwebsite/wp-admin/wp-install.php

This will set up the live website.

You will be asked to give your blog a title and an email address. Next, you will be prompted with a username and password. Save these details, as you’ll require them when you access the website’s dashboard (admin area).

Set up the new site in Dreamweaver, where the local settings refer to the dev site and the remote settings your remote site’s ftp details. Test the connection is successful.

The two sites have now been initialized and should be exactly the same.

Update your remote site

Let’s say we want to make some changes to the look&feel of the website. First, we will apply a new template to the dev site, twick it and then upload the changes to the live site.

First, download the new template. A range of free templates can be found at: WordPress Theme Viewer

Unzip the package i.e. dummy_Theme into the themes/ folder of your dev site.

Go to your dev site’s dashboard, the new theme should appear as one of the available templates.

Make changes, i.e. change the logo (which can be found in the images/ folder of the theme).

In Dreamweaver, right-click on your chosen theme, theme/dummy_Theme and click Put. This will automatically upload the folder in your live site.

Go to your remote site’s dashboard, the new theme should appear as one of the available templates.

References

http://codex.wordpress.org/Main_Page - wordpress guide

http://codex.wordpress.org/Installing_WordPress#Detailed_Instructions - detailed installation’s instructions