Click here to Skip to main content
12,761,078 members (32,363 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

17.4K views
514 downloads
20 bookmarked
Posted 4 Sep 2014

Super Simple AngularJS Web App, Realtime vCard Creator

, 4 Sep 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Super simple AngularJS web app, realtime vCard creator

Screenshot of vCard creator

Introduction

In this example, I've implemented a very simple vCard creator using some JavaScript libraries including AngularJS. Though here in this application, AngularJS did a very small job compared to other libraries, the motivation and the idea came from that little yet powerful functionality of AngularJS.

Background

In this application, we need to do some simple tasks. First, we need to design the vCard using CSS. Then, we need to let the users enter and edit their data in real time where we will need AngularJS. And then, we need to convert the vCard HTML div into a canvas and download that as a PNG image. That's it.

Using the Code

Here, I will explain the blocks of code.

<!DOCTYPE html>
<html>
<head>
    <title>vCard Creator demo</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>

<div id="wrapper" ng-app>
    <h1>Real time vCard Creator</h1>
<div id="editor">
    <input placeholder="Company name" ng-model="cname"/>
    <input placeholder="Company tag line" ng-model="tagline"/>
    <input placeholder="Your full name" ng-model="name"/>
    <input placeholder="Your designation" ng-model="desig"/>
    <input placeholder="Phone number" ng-model="phone"/>
    <input placeholder="Email address" ng-model="email"/>
    <input placeholder="Website url" ng-model="url"/>
    <button id="saveBut">Download vCard as PNG</button>
   
</div>
     
<div id="card">
   
    <header>
        <h4>{{cname}}</h4>
        <p>{{tagline}}</p>
    </header>
    <div id="theBody">
        <div id="theLeft">
            <h2>{{name}}</h2>
            <h5>{{desig}}</h5>
        </div>
        <div id="theRight">
            <p>{{phone}}</p>
            <p>{{email}}</p>
            <p>{{url}}</p>
        </div>
    </div>    
    
</div>
    
</div>

<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript" src="canvas2image.js"></script>
<script type="text/javascript" src="base64.com"></script>

</body>
</html>

This is the HTML structure of our application. There are two parts of the structure. One is the editor div and another is the card div. Editor div is for letting the users enter their information and card div is for showing the information on the card. These two divs are enclosed by a wrapper div where we put the ng-app attribute because inside that div, we will use angular. We can put the ng-app into the HTML tag so that we can use angular anywhere in the webpage. Next, we create some input tags for taking input from the users. Check that every input tag has a ng-model data attribute where we are passing a corresponding value of the input tag. We are placing this ng-model here because we want to update the values in realtime inside the card div. Now, inside the card div, check that we have placed some weird looking double curly braces and inside the braces we put the values from the ng-model. Basically, what we will write inside the input tags will be updated inside these curly braces instantly. So editing the vCard is done here. Our target is, when a user clicks the download button, then the current card will be converted into an image and it will be downloaded into the users computer.

#editor{
    width:350px;
    background: silver;
    margin:0 auto;
    margin-top:20px;
    padding-top:10px;
    padding-bottom:10px;
}
input{
    width:90%;
    margin-left:5px;
}
button{
    margin-left:5px;
}
#card{
    width:350px;
    height:200px;
    background:whitesmoke;
    box-shadow: 0 0 2px #323232;
    margin:0 auto;
    margin-top:20px;
}
header{
    background:#323232;
    padding:5px;
}
header h4{
    color:white;
    line-height:0;
    font-family:helvetica;
    margin:7px;
    margin-top:20px;
    text-shadow: 1px 1px black;
    text-transform:uppercase;
}
header p{
    line-height:0;
    color:silver;
    font-size:10px;
    margin:11px;
    margin-bottom:20px;
}
#theBody{
    background:blue;
    width:100%;
    height:auto;
}
#theLeft{
    width:50%;
    float:left;
    text-align:right;
}
#theLeft h2{
    margin-right:10px;
    margin-top:40px;
    font-family:helvetica;
    margin-bottom:0;
    color:#323232;
}
#theLeft h5{
    margin-right:10px;
    font-family:helvetica;
    margin-top:5px;
    line-height:0;
    font-weight: bold;
    color:#323232;
}

#theRight{
    width:50%;
    float:right;
    padding-top:42px;
}
#theRight p{
    line-height:0;
    font-size:12px;
    color:#323232;
    font-family:Calibri;
    margin-left:15px;
}

This is the CSS of the application where we have simulated a vCard design and created the editor panel for the users to input the data.

<script>
    $(function() { 
    
    $("#saveBut").click(function() { 
        
        html2canvas($("#card"), {
            
            onrendered: function(canvas) {
                
                theCanvas = canvas;

                Canvas2Image.saveAsPNG(canvas); 
               
            }
        });
    });
}); 
</script>

Finally, insert this script just before closing the body tag of the HTML file. This contains the event for the download button where html2canvas function is converting the card div into an HTML canvas and after finishing rendering the canvas, we are saving the canvas as a PNG file. After adding this script, we are done.

Limitation

The canvas2image.js doesn't append a .png extension after the file name. So if you cannot open the image with anything, then please rename the file and add .png after the file name.

jsFiddle

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

saadixl
Student
Bangladesh Bangladesh
No Biography provided

You may also be interested in...

Pro
Pro

Comments and Discussions

 
Bugbug in library loading? Pin
Jeffrey Fox16-Jan-15 10:53
memberJeffrey Fox16-Jan-15 10:53 
QuestionMy vote of 10 out 5 Pin
Peter D. Munro9-Sep-14 14:37
memberPeter D. Munro9-Sep-14 14:37 
AnswerRe: My vote of 10 out 5 Pin
saadixl9-Sep-14 20:36
membersaadixl9-Sep-14 20:36 
GeneralGood Explanation Pin
kansee8-Sep-14 0:20
memberkansee8-Sep-14 0:20 
GeneralRe: Good Explanation Pin
saadixl8-Sep-14 1:22
membersaadixl8-Sep-14 1:22 
Generalnice article Pin
waqar906-Sep-14 1:06
memberwaqar906-Sep-14 1:06 
GeneralRe: nice article Pin
saadixl6-Sep-14 4:50
membersaadixl6-Sep-14 4:50 
GeneralMy vote of 5 Pin
diponsust5-Sep-14 7:33
memberdiponsust5-Sep-14 7:33 
GeneralRe: My vote of 5 Pin
saadixl5-Sep-14 7:39
membersaadixl5-Sep-14 7:39 
GeneralMy vote of 5 Pin
Sanjay K. Gupta4-Sep-14 20:18
professionalSanjay K. Gupta4-Sep-14 20:18 
GeneralRe: My vote of 5 Pin
saadixl4-Sep-14 20:25
membersaadixl4-Sep-14 20:25 
GeneralMy vote of 5 Pin
newton.saber4-Sep-14 15:07
membernewton.saber4-Sep-14 15:07 
GeneralRe: My vote of 5 Pin
saadixl4-Sep-14 20:11
membersaadixl4-Sep-14 20:11 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170217.1 | Last Updated 4 Sep 2014
Article Copyright 2014 by saadixl
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid