Deals

Thursday, May 5, 2016

Create Dynamic Half Circular Progress Bar With HTML 5 CSS 3 - Create Gauge Chart In HTML 5

Recently in one of my project there was a requirement to create half circle gauge chart to show progress of some actions. Something like below image


So first of all I decided to use some charts library to create UI like this but since this was mobile application I do not find any suitable chart library. So I decided to build UI from scratch. So here is the step by step guide. 

First our basic HTML and CSS

<div style="visibility: hidden" class="container" id="container">
                       <div id="border" class="active-border">
                            <div id="circle" class="circle">
                               <div id="needle" class="needle"></div> 
                            </div>
                        </div>
                      </div>

Now the basic CSS.

.container{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    top: -25%;
}

.circle{
    position: relative;
    top: 5px;
    left: 5px;
    text-align: center;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background-color: rgba(0,0,0,1);
}

.border{
    position: relative;
    text-align: center;
    width: 210px;
    height: 210px;
    border-radius: 100%;
    top : 50%;
    background-color:#00a651;
}

.needle {
    position: absolute;
    background-color: #f0566f;
    height: 100%;
    width: 0.5%;
    left: 50%;
}

.needle:before {
    content: "";
    position: absolute;
    top: 0px;
    left: -10px;
    width: 0px;
    height: 0px;
    border-top: 10px solid transparent;
    border-right: 20px solid #f0566f;
    border-bottom: 10px solid transparent;
    -webkit-transform: rotate(90deg);
}

Now here comes the dynamic things. first of we have to set height and width of all the elements inside container to screen width and height.

var containerWidth = 0;

if(document.getElementById('container').clientHeight > document.getElementById('container').clientWidth){
containerWidth = document.getElementById('container').clientWidth;
}
else{
containerWidth = document.getElementById('container').clientHeight;
}

var circleWidth =  containerWidth - 10;
var activeBorderWidth =  containerWidth;
var padding = (document.getElementById('container').clientWidth - document.getElementById('container').clientHeight) / 2;

document.getElementById('circle').style.width = circleWidth + 'px';
document.getElementById('circle').style.height = circleWidth + 'px';
document.getElementById('container').style.paddingLeft = padding + 'px';

document.getElementById('border').style.width = activeBorderWidth + 'px';
document.getElementById('border').style.height = activeBorderWidth + 'px';

So as you can see we are setting border with to container width and make it fit inside container and setting inner circle width to bit less than border width to create circular progress bar. Now we calculate transform degrees to set up liner gradient to show progress. 

var degree = (180 * Number(count)) / (Number(total));

document.getElementById('border').style.background = '-webkit-linear-gradient('+degree+'deg, #9a9a9a 50%, #00a651 50%)';

As you can see since we have half circle we are calculating degrees by 180. If you want full circle progress bar then calculate it with 360 degree.                 

Now set needle transformation.

var needleTransformDegree = 180 - degree;

document.getElementById('needle').style.webkitTransform = 'rotate('+needleTransformDegree+'deg)';
               
document.getElementById('container').style.visibility = 'visible'

That's it and end result look something like below.


Hope this helps you.

CSS Border Radius Not Working in Android WebView or Chrome

Recently while working on mobile app project which was cross platform application we were creating pie shaped menu where we faced a very strange issue.

Actually I was trying to create following menu and I created that successfully while I was working in Xcode and iPhone simulator.



And it worked fine but as soon as I checked it in Android phone it came up like following.


Now that was so embarrassing. Off course, after spending couple of days to make such menu and it came up like this, that is so disappointing. How ever after spending some time over it I found out a solution, in this blog I am going to explain this. There more than one solutions so I posting each one. 

1) Some older version does not support percentage value. 

Some older version of chrome does not support percentage values for border radius. So instead of percentage give pixel values.

Use border-radius : 50px in stead of border-radius : 10%

2) Specify top, left right and bottom property separately. 

some Chrome does understand single value like border-radius : 50px. So here you have to specify each border radius saperately.


Use 
border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;


In stead of 

border-radius : 50px

3) Now here comes the issue which I have faced,  background-color "leaking" outside of a border when border-radius is present. In my case there were few div tags which was having background color and was going out side of main container because of transformation.  So here are the two solutions you can do.

Apply overflow: hidden property to main container

If that does not work apply following CSS property to main container.

-webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box;

This should solve your all border radius related problem in all the versions of Chrome. Hope this helps you.

Sunday, April 24, 2016

Solve Magento Error MySQL: Can't create/write to file '/tmp/#sql_3c6_0.MYI'

Recently one our client called me and said Magento Site is not working so I checked the site and found following error.

MySQL: Can't create/write to file '/tmp/#sql_3c6_0.MYI'

So what's the meaning of this error. At first it looks like a permission issue that tmp folder does not have necessary permissions. I checked through SSH and permission was ok. But still it's not working. 

Second issues could be tmp folder owner is not web root, hence it's not allowing to create files from web users. I checked that also and owner was correct. 

After few checks through SSH, I found out that it was actually an issue of Inodes on server. Disk was almost full and there were no enough space to create new files. So have to delete some files to create space. 

This you can do through SSH, but make sure you what are the files you are deleting and will that create any issues. If you don't know much about magento files and folders, PLEASE CONTACT YOUR HOSTING PROVIDER to delete it for you.

In my case I deleted old backups of database and deleted magento caches and sessions files from /var folder and then my site was up and working normally. 

Hope this helps you.

Laravel 5.x Dispaly Custom Error Page on Exception and Error

In this quick and small blog I am going to explain how to create custom error page for your Laravel 5.x project.

Laravel 5.x have custom exception handler class which you will find in app/Exceptions/Handler.php

If you open this file, you will see below code.

/**
* Render an exception into an HTTP response.
*
* @param  \Illuminate\Http\Request  $request
* @param  \Exception  $e
* @return \Illuminate\Http\Response
*/
public function render($request, Exception $e)
{
return parent::render($request, $e);
}

This code renders exceptions on your HTTP response and your end users will actually see following pages.


That's really embarrassing for your end users as they don't understand what is this all about. So best practice is to hide this types of errors and show custom error page to users. For that add a error page view in your project and render it on exception. Modify above function as follow.

/**
     * Render an exception into an HTTP response.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Exception  $e
     * @return \Illuminate\Http\Response
     */
    public function render($request, Exception $e)
    {

        return response()->view('errors.index');
    } 

That's it and now you will have custom error page in your laravel app.

Laravel Swagger Integration for API and Code Documentation

I know, I know, all developers hate documentation. Even I also don't like it but it's an industry practice and we have to follow this. In this blog I am going to explain how you can integrate swagger most popular framework for API with Laravel for creating API docs. Swagger is an incredible way to easily document and test your APIs. So here is the step by step guides.

1) Go to your laravel project on Terminal and include Swagger PHP package with composer.

composer require zircote/swagger-php

This will install swagger php package to laravel and will update your vendor folder. Now we have to create documentation.

2) There is standard syntax for creating docs with swagger. For each API functions and classes you have to add swagger config and config have all the standard keys to define what kind of information you will include in docs. You can check this on following URL.


Hover mouse on left side object and it will give you information on right side.


This you have to add in add in your controllers and models in your laravel project. So lets define some basic info. For example see following swagger config we have added. This we have added a comments to top of the controller function.

@SWG\Swagger(
     *     basePath="",
     *     schemes={"http"},
     *     @SWG\Info(
     *         version="1.0",
     *         title="Sample API",
     *         @SWG\Contact(name="Hiren Dave", email="hdave10@gmail.com"),
     *     ),
     *   @SWG\Get(
     *     path="/",
     *     description="Returns basic information",
     *     produces={"application/json"},
     *     @SWG\Response(
     *         response=200,
     *         description="Application Overview"
     *     )
     *   )
     * )

And following is my API function.

        public function index()
{
              return Response::json(array('success'=>false,'message'=>'This is Basic Info of API'));
}

It have basic info like API info and API path and output information.

3) Build Swagger Docs.

Go to your laravel project in terminal and run following command.

./vendor/bin/swagger ./app/Http

It will generate swagger.json file in your root folder with all the swagger config you have added in your controller. 

4) Add swagger UI to project to show this docs.

Go to following link to download swagger UI.


Download it and copy all the files from dist folder to your public/docs folder. Now open public/docs/index.html page and update path of your swagger.json file in following code.

if (url && url.length > 1) {
        url = decodeURIComponent(url[1]);
      } else {
        url = "http://petstore.swagger.io/v2/swagger.json";
      }

Change URL to url your own swagger.json URL, for example in my case it was http://localhost/laravel-swagger/swagger.json

5) Read the Docs. Now go to public docs folder. In my case URL was

http://localhost/laravel-swagger/public/docs/index.html

When you run, you will see following output page.


That's it and you have your API docs minimum efforts. Hope this helps you.

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.