Posted on Leave a comment

PHP: How to fix Image rotation issue in img tag because of EXIF

Photos captured by some smartphones especially iPhones are automatically rotated when we use it in <img> tag which is mostly not acceptable as we don’t need such unwanted rotation. This happens because of EXIF Data stored in that image. But we can easily fix it using PHP by following these steps:

function autorotate($src)
{
// check if extension exists or not
if(extension_loaded('imagick'))
{
    try
    {       
        $image= new Imagick($src);
        switch ($image->getImageOrientation()) {
        case Imagick::ORIENTATION_TOPLEFT:
            break;
        case Imagick::ORIENTATION_TOPRIGHT:
            $image->flopImage();
            break;
        case Imagick::ORIENTATION_BOTTOMRIGHT:
            $image->rotateImage("#000", 180);
            break;
        case Imagick::ORIENTATION_BOTTOMLEFT:
            $image->flopImage();
            $image->rotateImage("#000", 180);
            break;
        case Imagick::ORIENTATION_LEFTTOP:
            $image->flopImage();
            $image->rotateImage("#000", -90);
            break;
        case Imagick::ORIENTATION_RIGHTTOP:
            $image->rotateImage("#000", 90);
            break;
        case Imagick::ORIENTATION_RIGHTBOTTOM:
            $image->flopImage();
            $image->rotateImage("#000", 90);
            break;
        case Imagick::ORIENTATION_LEFTBOTTOM:
            $image->rotateImage("#000", -90);
            break;
        default: // Invalid orientation
            break;
      }
      $image->setImageOrientation(Imagick::ORIENTATION_TOPLEFT);

      $image->stripImage(); // if you want to get rid of all EXIF data
        $image->writeImage();
        $image->clear();
        $image->destroy();
      return $image;

    }
    catch(Exception $e) {
        return 'Exception caught: ',  $e->getMessage(), "\n";
    }  
  }
  else
  {
      return "Imagick extension is not installed.";
  }
}
  

// now run autorotate() function with source of file as parameter
autorotate('my_img.jpg');

Or you can also fix it with just one line if you have root access to your linux server. Just run following shell command:

convert image.jpg -auto-orient output.jpg

 

Posted on Leave a comment

Angular.js How to remove hash from url?

Configuration:

$locationProvider
  .html5Mode(true);

.htaccess file in root directory:

RewriteEngine On 
 # If an existing asset or directory is requested go to it as it is
 
 RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
 RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
 RewriteRule ^ - [L]

 # If the requested resource doesn't exist, use index.html
 RewriteRule ^ /index.html

In this mode you can use links without the # in HTML files

<a href="/path">link</a>

Link in Browser:

http://www.example.com/base/path

Source: http://stackoverflow.com/questions/16677528/location-switching-between-html5-and-hashbang-mode-link-rewriting

Posted on Leave a comment

How to Change Bootstrap Carousel Slide Speed

The speed cannot be controlled by the API. Though you can modify CSS that is in charge of that. find in the bootstrap.css file:

.carousel-inner > .item {
    position: relative;
    display: none;
    -webkit-transition: 0.6s ease-in-out left;
    -moz-transition: 0.6s ease-in-out left;
    -o-transition: 0.6s ease-in-out left;
    transition: 0.6s ease-in-out left;
}

and change 0.6s to the time you want. You also might want to edit time in the function call below:

.emulateTransitionEnd(2000)

at bootstrap.js in function Carousel.prototype.slide. That synchronize transition and prevent slide to disapear before transition ends.

Source: http://stackoverflow.com/questions/17332431/how-can-i-control-the-speed-that-bootstrap-carousel-slides-in-items/17332516#17332516

Posted on Leave a comment

How to lock screen orientation to portrait or landscape?

This article will show you how to lock screen orientation to one direction.
Environment Details:
– Phonegap Build – cli-5.2.0
– Device: iPhone S5 9.3.2

For locking orientation to portrait add following code into your config.xml:

<gap:config-file platform="ios" parent="UISupportedInterfaceOrientations" overwrite="true">
    <array>
        <string>UIInterfaceOrientationPortraitOmg</string>
    </array>
</gap:config-file>

For Landscape:

<gap:config-file platform="ios" parent="UISupportedInterfaceOrientations" overwrite="true">
   <array>
       <string>UIInterfaceOrientationLandscapeLeft</string>
       <string>UIInterfaceOrientationLandscapeRight</string>
   </array>
</gap:config-file>

Source: https://github.com/phonegap/build/issues/263

Posted on Leave a comment

SSH: How to stop a script running in the background?

  1. Open/Login SSH into the server
  2. Type in ps x
  3. See the list of processes currently on your server
  4. Get the PID(process id) from that list and type kill xxxxx
  5. That should do it.

Source: StackOverflow
Tested on Linux / CentOS 6.7 x 64

Posted on Leave a comment

Cordova: How to download file and get download progress?

var assetURL = 'http://www.anywebsite.com/test.mp3';
var store = cordova.file.externalRootDirectory; // output in android: file:///storage/emulated/0/
// or
// var store = "cdvfile://localhost/persistent/";
var fileName = 'Sounds/test.mp3';
// NOTE: Sounds folder should already be there in order to download file in that folder

var fileTransfer = new FileTransfer();
fileTransfer.download(assetURL, store + fileName, 
        function(entry) {
            console.log("Success!");
            //appStart();
        }, 
        function(err) {
            console.log("Error");
            console.dir(err);
        });
fileTransfer.onprogress = function(result){
     var percent =  result.loaded / result.total * 100;
     percent = Math.round(percent);
     console.log('Downloaded:  ' + percent + '%');    
};

 

Posted on Leave a comment

Cordova: How to check if a file exists or not?

document.addEventListener("deviceready", init, false);

//The directory to store data
var store;

//File name of our important data file we didn't ship with the app
var fileName = "testfile.txt";

function init() {
    
   

    console.log("Checking for data file.");
    // output in android: file:///storage/emulated/0/
    store = cordova.file.externalRootDirectory;
   // or
   // store = "cdvfile://localhost/persistent/";
    //Check for the file. 
    window.resolveLocalFileSystemURL(store + fileName, onSuccess, onFail);

}

function onSuccess() {
   console.log("Great! This file exists");
}

function onFail() {
    console.log('Sorry! File not Found');
}

Above code works for both files and directories.

For Full article with extended features visit Following:
Cordova Sample: Check for a file and download if it isn’t there

Click here for Complete Documentation of cordova.file plugin

 

Posted on Leave a comment

Cordova: How to get list of all Files/Directories in a directory?

function success(entries) {
    var i;
    for (i=0; i<entries.length; i++) {
        console.log('En - ', entries[i]);
    }
}
function fail(error) {
    console.log("Failed to list directory contents: ", error);
}
// output in android: file:///storage/emulated/0/Sounds
var directory_path = cordova.file.externalRootDirectory+"Sounds";
window.resolveLocalFileSystemURL(directory_path , function(dirEntry) {
    var directoryReader = dirEntry.createReader();
    console.log(dirEntry);

    // Get a list of all the entries in the directory
    directoryReader.readEntries(success,fail);
});

Tested in Android.

Click here for more details.

Another link Mobile File Explorer with PhoneGap/Cordova has examples.

Posted on Leave a comment

Cordova: How to create directory?

/*
############
# Method 1 #
############
*/

// output in android: file:///storage/emulated/0/
var base_url = cordova.file.externalRootDirectory;
// or 
// var base_url = "cdvfile://localhost/persistent/";
var new_directory = 'TEST';

// To Create a sub Directory inside a folder
// var new_directory = 'Sounds/Test';  // Here 'Sounds' is the name of existing parent directory. Parent Directoy must exist to work fine

window.resolveLocalFileSystemURL(base_url, function (fileSystem) {
   
   dir.getDirectory(new_directory, { create: true }, function (file) {
          alert("got the file: "+ file.name + ', ' + file.fullPath);
   });
});

/*
############
# Method 2 #
############
*/

var new_directory = 'TEST';
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
 fileSystem.root.getDirectory(new_directory, { create: true }, function (file) {
 alert("got the file: "+ file.name + ', ' + file.fullPath);
 });
}, function(error) {
 alert("can't even get the file system: " + error.code);
});

For Documentation Visit: https://www.npmjs.com/package/cordova-plugin-file#android-file-system-layout