This is continuation of article Login With Twitter Using Java. By using Twitter OAuth features, If you want to update status of user from your java web application, This article will help you. Suppose if you create a news sharing website, Your website will get more traffic if users share those news on their twitter's timeline. They can do that directly from your application if they given access to your application. Twitter is having java library twitter4j to access twitter services. Download twitter4j and add those jars to WEB-INF folder.
---   Click here to see demo  ---  Download eclipse code ---

Project

I have provided sample project here, download it. Open Setup.java and give your twitter app credentials, database credentials. Create MySQL database schema with name "demos". Created below specified table. Import this project into Eclipse, add it to tomcat server, run index.html

There are 2 types of Update Status features are there.  
  1. Update status to your own profile using access token and access token secret which were generated manually
  2. Update status on user's timeline using oauth access token and access token secret that were saved in database

Process - Oauth Status Update

  1. Register your application in twitter developers page
  2. Provide access link to user ( Generate link using Twitter4j ) 
  3. User will be redirected to twitter access page. User will give permission to application
  4. Access token will be sent to Callback URL
  5. Get access token and store it in database
  6. Whenever you want to update status on user's timeline, get access token from access token secret from database and update status using them
   // configure twitter object with consumer key and consumer secret 
   ConfigurationBuilder cb = new ConfigurationBuilder();
   cb.setDebugEnabled(true)
     .setOAuthConsumerKey(Setup.CONSUMER_KEY)
     .setOAuthConsumerSecret(Setup.CONSUMER_SECRET); 
   TwitterFactory tf = new TwitterFactory(cb.build());
   Twitter twitter = tf.getInstance();
   
   // get user details from by user id
   UserPojo user = TwitterDAO.selectUser(4);
   // set access token and access token secret and user id
   AccessToken accessToken1 = new AccessToken(user.getAccess_token(), user.getAccess_token_secret(), user.getTwitter_User_id());
   twitter.setOAuthAccessToken(accessToken1);
   
   // update status from
   twitter.updateStatus("Sample tweet from standalone java");

Process - Status Update To Your Own Profile

If you want to update status to your own profile, you can do it with default access token and access token secret. Observe below screenshot.  
Build AccessToken object with above access token and access token secret and user id. Update status as like above
Read More
If you implement "Login With Twitter" for your website, users don't need to remember  password for your website, so users will feel comfortable to use your website. In advance, you can access users  timeline feed. Twitter is providing Twitter4J to implement twitter api using java, download this twitter4j and add it to build path

Project

I have provided sample project here, download it. Open Setup.java and give your twitter app credentials, database credentials. Create MySQL database schema with name "demos". Created below specified table. Import this project into Eclipse, add it to tomcat server, run index.html

Implementation

  1. When user click on Login with twitter button, Provide them access link which is generated by Twitter4j with your app credentials. 
  2. User will be redirected to twitter api page
  3. Once user gives permission, access token and oauth verifier will be sent to callback URL
  4. Now verify the access token with oauth verifier. It will generate access token object which will have access token and access token secret 
  5. Now save access token and access token secret in database with user details like twitter user id and screen name.
User cant change their twitter user id, so we can use this to identify user. If user login again, we can process user's account using twitter user id. Whenever you want to update status on user's timeline, you can do with these saved access tokens.

Create App In Twitter Developer Page

Open twitter apps webpage.  Create your app and get Consumer Key and Consumer Secret Key. Observe below diagram.

Database Table

Created database table like below.

CREATE TABLE `demos`.`twitter_user` (
  `user_id` INT NOT NULL AUTO_INCREMENT COMMENT '',
  `twitter_user_id` INT NULL COMMENT '',
  `screen_name` VARCHAR(45) NULL COMMENT '',
  `access_token` VARCHAR(100) NULL COMMENT '',
  `access_token_secret` VARCHAR(100) NULL COMMENT '',
  `created_date` DATETIME NULL DEFAULT CURRENT_TIMESTAMP COMMENT '',
  PRIMARY KEY (`user_id`)  COMMENT '',
  UNIQUE INDEX `twitter_user_id_UNIQUE` (`twitter_user_id` ASC)  COMMENT '');

Prepare Signin Link

Observe below code. Configure twitter object with Consumer Key and Secret Key, Generate request token with callback URL, save it to session. Generate authentication URL and redirect to that URL
// configure twitter api with consumer key and secret key
ConfigurationBuilder cb = new ConfigurationBuilder();
cb.setDebugEnabled(true)
  .setOAuthConsumerKey(Setup.CONSUMER_KEY)
  .setOAuthConsumerSecret(Setup.CONSUMER_SECRET);
TwitterFactory tf = new TwitterFactory(cb.build());
Twitter twitter = tf.getInstance();
request.getSession().setAttribute("twitter", twitter);
try {
    
    // setup callback URL
    StringBuffer callbackURL = request.getRequestURL();
    int index = callbackURL.lastIndexOf("/");
    callbackURL.replace(index, callbackURL.length(), "").append("/callback");

    // get request object and save to session
    RequestToken requestToken = twitter.getOAuthRequestToken(callbackURL.toString());
    request.getSession().setAttribute("requestToken", requestToken);
    
    // redirect to twitter authentication URL
    response.sendRedirect(requestToken.getAuthenticationURL());

} catch (TwitterException e) {
    throw new ServletException(e);
}

Callback Servlet

Callback servlet will receive oauth_verifier parameter. Verify access token with that verification code, then you will get access token object, Now save or update access token or access token secret to database. Here we identify user with twitter user id that is always constant. TwitterDAO.selectTwitterUser method gives user object based on twitter user id.
// Get twitter object from session
Twitter twitter = (Twitter) request.getSession().getAttribute("twitter");
//Get twitter request token object from session
RequestToken requestToken = (RequestToken) request.getSession().getAttribute("requestToken");
String verifier = request.getParameter("oauth_verifier");
try {
    // Get twitter access token object by verifying request token 
    AccessToken accessToken = twitter.getOAuthAccessToken(requestToken, verifier);
    request.getSession().removeAttribute("requestToken");
    
    // Get user object from database with twitter user id
    UserPojo user = TwitterDAO.selectTwitterUser(accessToken.getUserId());
    if(user == null) {
       // if user is null, create new user with given twitter details 
       user = new UserPojo();
       user.setTwitter_user_id(accessToken.getUserId());
       user.setTwitter_screen_name(accessToken.getScreenName());
       user.setAccess_token(accessToken.getToken());
       user.setAccess_token_secret(accessToken.getTokenSecret());
       TwitterDAO.insertRow(user);
       user = TwitterDAO.selectTwitterUser(accessToken.getUserId());
    } else {
       // if user already there in database, update access token
       user.setAccess_token(accessToken.getToken());
       user.setAccess_token_secret(accessToken.getTokenSecret());
       TwitterDAO.updateAccessToken(user);
    }
    request.setAttribute("user", user);
} catch (TwitterException | DBException e) {
    throw new ServletException(e);
} 
request.getRequestDispatcher("/status.jsp").forward(request, response);

Read More
Observe below Image. HTML5 Video can be displayed through text, if text have 2 different stroke opacity and fill opacity properties. Normal HTML text won't provide stroke opacity and fill opacity features, Only SVG text does. So we have to implement this using SVG text.

SVG Text

<svg class="blur" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" width="1050" height="498">
      <text x="30" y="350" fill="white" stroke="darkkhaki" stroke-width="3" fill-opacity="0" stroke-opacity="1">SVG</text>
</svg>
fill-opacity is 0 means filling area of text is completely transparent. stroke-opacity is 1 means stroke width of text is completely visible. Whatever displayed in the background, it will be visible to user through text

Markup

Observe below markup. Here I placed video as background to this demodiv
<div class="demoDiv">
    <svg class="blur" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" width="1050" height="498">
      <text x="30" y="350" fill="white" stroke="darkkhaki" stroke-width="3" fill-opacity="0" stroke-opacity="1">SVG</text>
    </svg>
    <video id="work-letter-video-one" class="letter-video" autoplay="" preload="auto" loop="">
     <source src="letter-smoke.webm">
     <source src="letter-smoke.mp4">
   </video>
</div>

CSS

.demoDiv {
  position: relative;
  width: 883px;
  margin: auto;
}

.demoDiv text {
  font-size:400px;
}

.demoDiv video {
  width: 100%; 
  position: absolute;
  left:0px;
  top:0px;
  z-index:-1
}
Read More
I am going to create beautiful menu using CSS3 transition effect. Observe below image. When user hover the menu text, the text color will change gradually character by character.  This type of effect can be created by simple CSS3 transition

Markup

Observe below markup. menu-link-default-txt is default text. menu-link-over is text to be displayed from 0% to 100% on mouse over, menu-link-default-txt will be hidden from 100% to 0%. 

Left To Right Animation

<a href="http://flaticon.sodhanalibrary.com/" class="menu-link menu-link-left" target="_blank">
   <div class="menu-link-txt">
    <div class="menu-link-default">
        <div class="menu-link-default-txt">My Blog</div>
    </div>
    <div class="menu-link-hover">My Blog</div>
   </div>
</a>
Click here to see DEMO

Left To Right Animation

<a href="http://flaticon.sodhanalibrary.com/" class="menu-link menu-link-right" target="_blank">
   <div class="menu-link-txt">
    <div class="menu-link-default">
        <div class="menu-link-default-txt">My Blog</div>
    </div>
    <div class="menu-link-hover">My Blog</div>
   </div>
</a>

CSS

.menu-link {
    display: block;
    padding: 14px 5px;
    color: #fff;
    overflow: hidden;
    font-size:100px;
}

.menu-link:before, .menu-link:after {
    content: '';
    position: absolute;
    left: 5px;
    bottom: 4px;
    width: 35px;
    height: 1px;
    background-color: #e9a065
}

.menu-link:before {
    -moz-transform: translate(-50%, 0) scale(0, 1);
    -ms-transform: translate(-50%, 0) scale(0, 1);
    -webkit-transform: translate(-50%, 0) scale(0, 1);
    transform: translate(-50%, 0) scale(0, 1);
    -moz-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.menu-link:after {
    -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1)
}

.menu-link:hover:before {
    -moz-transform: translate(0%, 0) scale(1, 1);
    -ms-transform: translate(0%, 0) scale(1, 1);
    -webkit-transform: translate(0%, 0) scale(1, 1);
    transform: translate(0%, 0) scale(1, 1);
    -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1)
}

.menu-link:hover:after {
    -moz-transform: translate(50%, 0) scale(0, 1);
    -ms-transform: translate(50%, 0) scale(0, 1);
    -webkit-transform: translate(50%, 0) scale(0, 1);
    transform: translate(50%, 0) scale(0, 1);
    -moz-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.menu-link:hover .menu-link-default {
    width: 0%
}

.menu-link:hover .menu-link-hover {
    width: 100%;
    opacity: 1;
}

.menu-link-left .menu-link-txt {
    float: left;
    position: relative
}

.menu-link-left .menu-link-default {
    float: right;
    width: 100%;
    padding: 5px 0;
    white-space: nowrap;
    -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    overflow: hidden
}

.menu-link-left .menu-link-default-txt {
    float: right
}

.menu-link-left .menu-link-hover {
    position: absolute;
    left: 0;
    top: 0;
    opacity:0;
    width: 0%;
    padding: 5px 0;
    color: #e9a065;
    white-space: nowrap;
    overflow: hidden;
    -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1)
}

.menu-link-right .menu-link-txt {
    float: right;
    position: relative
}

.menu-link-right .menu-link-default {
    float: left;
    width: 100%;
    padding: 5px 0;
    white-space: nowrap;
    -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    overflow: hidden
}

.menu-link-right .menu-link-default-txt {
    float: right;
    width:100%;
}

.menu-link-right .menu-link-hover {
    position: absolute;
    right: 0;
    top: 0;
    width: 0%;
    padding: 5px 0;
    color: #e9a065;
    white-space: nowrap;
    overflow: hidden;
    opacity:0;
    width: 100%;
    -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1)
}
Read More
This article is continuation of previous artclejqImgBlurEffects plugin supports svg shapes - circle, ellipse, rectangle, path and polygon for step by step introduction feature. You can define delay time to hide displayed shape. Observe below hml markup and this is sample html markup
<img src="https://lh3.googleusercontent.com/-zJ3ijSNpElc/VyGE80Uo5PI/AAAAAAAADk4/w2cGycz0gIoGz5HDci02WU70uXqJnhYAgCCo/s912/inNature.JPG" class="myImg" width="750px">
Import jquery and jqImgBlurEffects
<script src="jquery-1.11.3.min.js"></script>
<script src="jqImgBlurEffects/jqImgBlurEffects.js"></script>

Observe below syntax. sintros represents step by step introduction module. intromode has to be true for this mode. Follow this article for detailed syntax of srectangles,scircles, spaths, spolygons, stexts
var myOptns = {
     ......
     sintros:{
       intromode:<must be true for step by step introduction. false will not allow introduction mode>,
       delay:<delay time from one step to another step>,
       transitionDelay:<animation time for transition>,
       srectangles:<array of rectangle objects>,
       scircles:<array of circle objects>,
       sellipses:<array of ellipse objects>,
       spaths:<array of path objects>,
       spolygons:<array of polygon objects>,
       stexts:<array of text objects>
     }
     ....
};

$(".myImg").jqImgBlur(myOptns);

Example - Paypal mafia

Observe above given image. It consists of earlier employees of PayPal. Now they are very successful in Silicon Valley. I just wrote below code for their beautiful introduction. If you want  write description, make sure that you are writing same number of text objects and shape objects ( In this below code, number of srectangles are same as number of stexts). 
var myOptns = {
     stdDeviation:7,
     brightness : 0.4,
     sintros:{
       intromode:true,
       delay:250,
       transitionDelay:500,
       srectangles:[{
        x:0,
        y:0,
        width:158,
        height:'100%'
       },
       {
        x:158,
        y:0,
        width:144,
        height:'100%'
       },
       {
        x:301,
        y:0,
        width:173,
        height:'75%'
       },
       {
         x:473,
         y:0,
         width:168,
         height:'100%'
       },
       {
         x:641,
         y:0,
         width:158,
         height:'100%'
        }],
       stexts:[{
         text:'Jeremy Stoppelman, CEO of Yelp',
         style:'left:167px;top:147px;'
       },{
         text:'Peter Thiel, co-founded of Palantir',
         style:'left:317px;top:117px;'
       },{
         text:'Elon Musk, CEO and CTO of SpaceX, CEO and product architect of Tesla Motors and chairman of SolarCity',
         style:'left:11px;top:240px;'
       },{
         text:'Reid Hoffman, co-founder of LinkedIn',
         style:'left:11px;top:147px;'
        },{
         text:'Max Levchin, Corporate director at Yahoo!',
         style:'left:117px;top:147px;'
        }
        ]
     }
};

$(".myImg").jqImgBlur(myOptns);
Read More
This article is continuation of previous artcle. jqImgBlurEffects plugin is supports svg shapes - circle, ellipse, rectangle for mouse over and click event. You can define delay time to hide displayed shape. Observe below hml markup and this is sample html markup
<img src="https://lh3.googleusercontent.com/-zJ3ijSNpElc/VyGE80Uo5PI/AAAAAAAADk4/w2cGycz0gIoGz5HDci02WU70uXqJnhYAgCCo/s912/inNature.JPG" class="myImg" width="750px">
Import jquery and jqImgBlurEffects
<script src="jquery-1.11.3.min.js"></script>
<script src="jqImgBlurEffects/jqImgBlurEffects.js"></script>

Circle - MouseOver

var myOptns = {
    stdDeviation : 7,
    smouseover : {
        circle : {
            r : 100
        }
    }
};

$(".myImg").jqImgBlur(myOptns);

Ellipse - MouseOver

var myOptns = {
    stdDeviation : 7,
    smouseover : {
        ellipse : {
            rx : 100,
            ry : 50
        }
    }
};

$(".myImg").jqImgBlur(myOptns);

Rectangle - MouseOver

var myOptns = {
    stdDeviation : 4,
    smouseover : {
        rectangle : {
            width : 180,
            height : 60
        }
    }
};

$(".myImg").jqImgBlur(myOptns);
These below examples are for click event. Open demo and click on the blurred image 

Circle - Click

var myOptns = {
    stdDeviation : 7,
    smouseover : {
        circle : {
            r : 100
        }
    }
};

$(".myImg").jqImgBlur(myOptns);

Ellipse - Click

var myOptns = {
    stdDeviation : 7,
    smouseover : {
        ellipse : {
            rx : 100,
            ry : 50
        }
    }
};

$(".myImg").jqImgBlur(myOptns);

Rectangle - Click

var myOptns = {
    stdDeviation : 4,
    smouseover : {
        rectangle : {
            width : 180,
            height : 60
        }
    }
};

$(".myImg").jqImgBlur(myOptns);
Read More
jqImgBlurEffects plugin is supports svg shapes - circle, ellipse, polygon, path , rectangle. Lets start with an example. Find below markup for image
<img src="https://lh3.googleusercontent.com/-zJ3ijSNpElc/VyGE80Uo5PI/AAAAAAAADk4/w2cGycz0gIoGz5HDci02WU70uXqJnhYAgCCo/s912/inNature.JPG" class="myImg" width="750px">
Import jquery and jqImgBlurEffects
<script src="jquery-1.11.3.min.js"></script>
<script src="jqImgBlurEffects/jqImgBlurEffects.js"></script>

Circle

SVG circle needs center coordinates and radius. So just give those details in below format.
var myOptns = {
    stdDeviation : 7,
    scircles : [ {
        cx : 177,
        cy : 166,
        r : 150
    },  {
        cx : 477,
        cy : 166,
        r : 150
    }  ]
};

$(".myImg").jqImgBlur(myOptns);

Ellipse

SVG ellipse needs center coordinates and x-radius, y-radius. So just give those details in below format.
var myOptns = {
    stdDeviation : 7,
    sellipses : [ {
        cx : 390,
        cy : 225,
        rx : 300,
        ry : 150
    } ]
};

$(".myImg").jqImgBlur(myOptns);

Rectangle

SVG rectangle needs starting coordinates and width, height. So just give those details in below format.
var myOptns = {
    stdDeviation : 4,
    srectangles : [ {
        x : 100,
        y : 125,
        width : 580,
        height : 220
    } ]
};

$(".myImg").jqImgBlur(myOptns);

Path

SVG path needs d attribute values which consists of points and directions . So just give those details in below format.
var myOptns = {
    stdDeviation : 4,
    spaths : [ {
        d:"M100 125 L700 125 L700 350 L100 350 Z"
    } ]
};

$(".myImg").jqImgBlur(myOptns);

Polygon

SVG polygon needs points attribute values which consists of points. So just give those details in below format.
var myOptns = {
    stdDeviation : 4,
    spolygons : [ {
        points:"170 140 585 140 585 350 170 350"
    } ]
};

$(".myImg").jqImgBlur(myOptns);
Click here to see DEMO
Read More
Many websites are using blurred images in background. If you want to highlight part of the image, what will you do ? Maybe drawing some shape on the image with red marker. We can do this with SVG filter and mask components. UnBlurring the part of completely blurred image will give better and clean attention.
Please have look at below code.
<svg class="blur" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" width="750" height="498">
      <!-- Image that was blurred and half brightend -->      
      <image filter="url(#filter2)" xlink:href="https://lh3.googleusercontent.com/-zJ3ijSNpElc/VyGE80Uo5PI/AAAAAAAADk4/w2cGycz0gIoGz5HDci02WU70uXqJnhYAgCCo/s912/inNature.JPG" width="100%" height="100%"></image>
      <!-- filter to control blur and brightness -->      
      <filter id="filter2">        
        <!-- standard deviation to control blur -->
        <feGaussianBlur stdDeviation="7"></feGaussianBlur>
        <!-- standard deviation to control brightness -->         
        <feComponentTransfer>          
          <feFuncR  type="linear" slope="0.5"></feFuncR>
          <feFuncG type="linear" slope="0.5"></feFuncG>          
          <feFuncB type="linear" slope="0.5"></feFuncB>          
        </feComponentTransfer>      
      </filter>      
      <!-- mask to unblur the part of the image -->
      <mask id="mask1">       
        <circle cx="177" cy="166" r="150" fill="white" style="opacity: 1;"></circle>
      </mask>       
      <!-- image to show unblurred image part -->
      <image xlink:href="https://lh3.googleusercontent.com/-zJ3ijSNpElc/VyGE80Uo5PI/AAAAAAAADk4/w2cGycz0gIoGz5HDci02WU70uXqJnhYAgCCo/s912/inNature.JPG"
        width="100%" height="100%" mask="url(#mask1)"></image>    
</svg>
filter2 controls blur and brightness of the image. mask1 shows only specified part of the image. stdDevation attribute value represents the level of blur, If you want increase the blur effect, just increase stdDevation value. slope attribute value of feFunc effects the brightness of the image, this value should be in between 0 and 1. Decrease slope value to get darken blurred image in the background.  
Read More

Blogroll

Follow this blog by Email

Popular Posts