Hi All,
Int his article, rather a tip, I am going to explain how to rotate an image in an media field clockwise and anti clock wise. It is very easy to do but sometimes we look around different stuffs to achieve this. Here is a small method that will rotate an image attach to an media field.
Steps :
Int his article, rather a tip, I am going to explain how to rotate an image in an media field clockwise and anti clock wise. It is very easy to do but sometimes we look around different stuffs to achieve this. Here is a small method that will rotate an image attach to an media field.
Steps :
- Place a media field in servoy form and place two buttons for clockwise and anti clockwise rotation.
- Attach an data provider to the media field. You can add a form variable or a database column.
- Attach the code here to the buttons. Make sure to name the button as 'btn_clockwise' and 'btn_anticlockwise' respectively.
- Define a form variable 'rotatingOrientation' which holds the initial angle of rotation. Initially define it as 0*.
- That is all. you can also copy the code below.
/*************************************************************
* This method will rotate the image in clockwise and
* anticlockwise on two button click respectively
**************************************************************/
/**
* @properties={typeid:35,uuid:"9450ACA1-6BC6-4310-B013-F28FE4D96936",variableType:-4}
*/
var imageData = null;
/**
* @properties={typeid:35,uuid:"CB1ABE68-C4E9-4367-82E5-38AF9BE27509",variableType:-4}
*/
var $image = null;
/**
* Hold the angle the image will be rotated to
*
* @type {Number}
*
* @properties={typeid:35,uuid:"E59FFF2E-2AC5-494B-8134-4CB1E39C39F9",variableType:8}
*/
var rotatingOrientation = 0;
/**
* Rotate an image clockwise and anti clockwise
*
* @author sovanm
*
* @param {JSEvent} event the event that triggered the action
*
* @properties={typeid:24,uuid:"50BA214F-8548-42EB-884C-BCB0A6979779"}
*/
function rotateImageClockWiseAndAnticlockwise(event) {
// If desired to rotate clockwise
if(event.getElementName() == 'btn_clockwise') {
rotatingOrientation += 90; // Add 90' to the angle
if(rotatingOrientation >= 360){
rotatingOrientation = 0; // If angle greater than 360', reset to 0'
}
$image = $image.rotate(rotatingOrientation); // Rotate the image
imageData = $image; // Save it in a variable
} else if(event.getElementName() == 'btn_anticlockwise') {
rotatingOrientation -= 90; // Subtract 90' from the angle
if(rotatingOrientation <= -360) {
rotatingOrientation = 0; // If angle less than -360', reset to 0'
}
$image = $image.rotate(rotatingOrientation); // Rotate the image
imageData = $image; // Save the image
}
}
/**
* Callback method when form is (re)loaded.
*
* @param {JSEvent} event the event that triggered the action
*
* @properties={typeid:24,uuid:"3BDA02C0-4EB5-4004-BC4B-6AE195DE6FE3"}
*/
function onLoad(event) {
$image = plugins.images.getImage('C:/Users/sovanm/Desktop/images/house.jpg');
imageData = $image;
}
Hope this will be helpful.
Thanks
Sovan
Thanks
Sovan
