Wednesday, April 20, 2016

Laravel Add Date Text in PNG and JPEG Image

In our recent project we have a requirement to add date as text in all the uploaded image. For example, check below image.


In this blog I am going to explain how you can do this.

First of open image from the path.

$publicPath = public_path();
$imagePath = $publicPath."/image/myImage.png"; //replace it with your own path

Create a date text.

$text = date('d-m-Y');

Setup font

$font = $publicPath."/fonts/RobotoCondensed-Bold.ttf"; //replace it with your own path

Now while working on this I faced two issues

1) PHP GD functions like imagecreatefrompng was not woking.
2) PNG image was having JPEG mime type.

To resolve first issue, first check your phpinfo(). It should have PNG support enabled.


If it's not enabled, enable it.

To solve second issue check mime type of image with file info function and use respective function to get image resources.

$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mime = finfo_file($finfo, $imagePath);

$image = null;
     
if($mime == "image/png"){

            $image = imagecreatefrompng($imagePath);
        
}else{

            $image = imagecreatefromjpeg($imagePath);       
}

Now we have image resource, we have to add text in image and save image.

$black = imagecolorallocate($image, 0, 0, 0);
imagettftext($image, 20, -45, 600, 20, $black, $font, $text);
imagepng($image,$imagePath);
imagedestroy($image);

That's it. Please note in my case all the images were of fixed width and height so I gave fix X = 600 and y = 20 coordinate for text. If you have variable width and height calculate it dynamically.

Hope this helps you.

Thursday, April 14, 2016

Laravel Share Some Variable with All Views

Hello,

Recently in one of my laravel project we have a requirement create side menu in app with some dynamic stats numbers like

Users   (12)
Managers  (10)
Questions  (25)

This menu is included in all the views and to set dynamic values in that we have to share this numbers globally. In this blog I am going to mention how to so this.

1) Create a BaseController class and extend it with controller and add a constructor.

class BaseController extends Controller {
       public function __construct() {
     
       }
}

2) Inside that constructor get all the numbers and share it with view

$users = DB::table('users')->count();
$managers = DB::table('managers')->count();
$questions = DB::table('questions')->count();

View::share('users',$users);
View::share('managers',$managers);
View::share('questions',$questions);

after adding this code your base controller should look like following.

class BaseController extends Controller {
       public function __construct() {
             $users = DB::table('users')->count();
             $managers = DB::table('managers')->count();
             $questions = DB::table('questions')->count();

            View::share('users',$users);
            View::share('managers',$managers);
            View::share('questions',$questions);
       }
}


3) Now extend this base controller to all other controllers.

class MyConttoller extends BaseController {

}

That's it now any view which you render from controller will have those variables by default. Now you just have to use those variables in views.

<ul>
       <li> Users  ({{$users}}) <li/>
       <li> Managers  ({{$managers}}) <li/>
       <li> Questions  ({{$questions}}) <li/>
<ul/>

Hope this helps you.


Saturday, March 26, 2016

Sencha Touch 2.2 Scrolling Issue in Android 5.1

Hello,

If your application is created with Sencha Touch 2.2 it must be having scroll issue for forms, list and carousels in android 5.1 on words.

The reason is some chrome updates have broken Sencha Touch scrolling logic and that's why it's not working so what is the solution, well the simple solution is to update your sencha touch version in the app. But what if the app is not created with Sencha CMD. Yes in my case previous developer have created app with loading sencha-touch-all,js and css. So I can not simply modify it with new version y sencha cmd and there were lots of CSS overrides. So what to do. In this blog I am going to explain.

First of all create folder with name util in your app folder. Now create new JS file in util folder and name it "PaintMonitor.js" and add following code to it.

/**
 * Created by hirendave on 3/7/16.
 */
Ext.define('SEOshop.util.PaintMonitor', {
    override: 'Ext.util.PaintMonitor',

    uses: [
        'Ext.env.Browser',
        'Ext.env.OS',
        'Ext.util.paintmonitor.CssAnimation',
        'Ext.util.paintmonitor.OverflowChange'
    ],

    constructor: function(config) {
        return new Ext.util.paintmonitor.CssAnimation(config);
    }

}, function () {
    //
    console.info("Ext.util.PaintMonitor temp. fix is active");
    //
});

Crete one more file with name "SizeMonitor.js" and add following code to it.

/**
 * Created by hirendave on 3/7/16.
 */
Ext.define('SEOshop.util.SizeMonitor', {
    override: 'Ext.util.SizeMonitor',

    uses: [
        'Ext.env.Browser',
        'Ext.util.sizemonitor.Default',
        'Ext.util.sizemonitor.Scroll',
        'Ext.util.sizemonitor.OverflowChange'
    ],
    constructor: function (config) {
        var namespace = Ext.util.sizemonitor;

        if (Ext.browser.is.Firefox) {
            return new namespace.OverflowChange(config);
        } else if (Ext.browser.is.WebKit) {
            if (!Ext.browser.is.Silk && Ext.browser.engineVersion.gtEq('535') && !Ext.browser.engineVersion.ltEq('537.36')) {
                return new namespace.OverflowChange(config);
            } else {
                return new namespace.Scroll(config);
            }
        } else if (Ext.browser.is.IE11) {
            return new namespace.Scroll(config);
        } else {
            return new namespace.Scroll(config);
        }
    }
}, function () {
    //
    console.info("Ext.util.SizeMonitor temp. fix is active");
    //
});

Now go to your app.js file and add following code to your application object.

requires: [
        'YOUR_APP.util.SizeMonitor',
        'YOUR_APP.util.PaintMonitor'
    ]

That's it and it should solve all the scrolling and rendering issue in Android 5.1 and above version.

Hope this helps you.