programming | Tech Tips & Tricks

Trigger Event When User Finishes Typing In Input Field In Angular JS

March 10, 2016 by blogmeister·0 Comments

There is no more need to create your own code using timeout or whatever else you have in mind. Angular JS now has an attribute called ng-model-options with value debounce which will trigger the ng-change function that you specify based on the time in seconds.

Sample:

<input type="text" ng-change="run()" ng-model-options="{debounce: 1000}"/>

1	<input type="text" ng-change="run()" ng-model-options="{debounce: 1000}"/>

Annotationeer: My Web Application That Can Create Annotations In PDF.JS

March 6, 2016 by blogmeister·0 Comments

I had been receiving quite a number of inquiries regarding my video on how to create annotations in PDF.JS.

First and foremost, I call my web application Annotationeer. It is built on top of PDF.JS. It has the following annotations:

Square fill
Square border
Circle fill
Circle border
Stamp
Arrow
Sticky note
Measurement distance (like in Adobe Acrobat tool)
Measurement area (like in Adobe Acrobat tool)
Audio (in MP3 or OGG)
Free hand drawing
Free hand text (1 liner)
Text Underline
Text Highlight
Text Strike-through

All annotations come with a comment and properties like background and foreground color, measurement units in inches, centimeter or millimeter and font size to name a few. These same annotations can be accessed through the sidebar as a list where you can scroll through as well as a comments popup window to initiate a chat history for every annotation.

Some nifty features that can be configured based on the user’s preference:

Scales annotations based on zoom value
Rotates annotations based on page rotation angle
Tooltips
Showing annotation list in the left or right sidebar
Saving all annotations using the save button or through every action
Watermark in every page
Screenshot of a selected dragged area in the page converted to an image
Property popup to modify annotation properties
Comment popup to modify and add reply comments
Runs on any PDF.JS version.

These annotations are saved and retrieved through RESTful URLs that I created using Silex PHP Framework and using MySQL as database while producing outputs in JSON format.

The web application can run in IE and Webkit based browsers like Chrome and Firefox and works on mobile browsers and usable when integrated in hybrid apps.

Annotationeer also comes with a utility where users can import the annotations that they saved in PDF.JS to a physical PDF file using iText. I have managed to create code in both Java and C#.

How To Change Color Of An Image Drawn In An HTML Canvas

February 24, 2016 by blogmeister·0 Comments

User Jarrod from the StackOverflow forum posted a very useful function to change the color of the image drawn in an HTML Canvas.

I modified his function to take into account where the image’s current position is in the Canvas.

function changeColorOfDrawnImage(context, image, color, x, y, w, h, rotate) {
    context.save();
    context.translate(x, y);
    context.clearRect(0, 0, w, h);
    if (rotate)
        context.rotate(rotate);
    context.drawImage(image, 0, 0, w, h);
    context.fillStyle = color;
    context.globalCompositeOperation = "source-in";
    context.fillRect(0, 0, w, h);
    context.restore();
}

function changeColorOfDrawnImage(context, image, color, x, y, w, h, rotate) {

context.save();

context.translate(x, y);

context.clearRect(0, 0, w, h);

if (rotate)

context.rotate(rotate);

context.drawImage(image, 0, 0, w, h);

context.fillStyle = color;

context.globalCompositeOperation = "source-in";

context.fillRect(0, 0, w, h);

context.restore();

}

Tech Tips & Tricks

tech tips gadgets programming software

Category: programming

Trigger Event When User Finishes Typing In Input Field In Angular JS

Annotationeer: My Web Application That Can Create Annotations In PDF.JS

How To Change Color Of An Image Drawn In An HTML Canvas