361 Lotus blogs updated hourly. Who will post next? Home | Downloads | Events | Pods | Blogs | Search | myPL | About 
 
Latest 7 Posts
Multiple Chrome Incognito browsers share the same data
Sun, Nov 23rd 2014 109
x$ – now a part of XPages Extension Library
Tue, Nov 18th 2014 213
Got non-XPages design elements? You really should use WebContent.
Mon, Nov 17th 2014 238
XPages and Bluemix: How to create a Websockets message without being connected to the application
Sun, Nov 16th 2014 239
One way to make a responsive XPages viewPanel
Tue, Nov 11th 2014 291
Creating an XPages Websockets chat client using Bluemix
Sun, Nov 9th 2014 1125
Finding your localStorage values – Chrome Developer Tools
Thu, Nov 6th 2014 141
Top 10
Creating an XPages Websockets chat client using Bluemix
Sun, Nov 9th 2014 1125
Create your own Watson Q and A example with Bluemix, Webstorm and Jazz Hub
Sun, Oct 12th 2014 508
Integrating the Bluemix Watson Translation service into an XPages application
Sun, Oct 19th 2014 456
Binding jQuery code to an XPages partialRefresh using DOM Mutation events
Wed, Oct 29th 2014 319
One way to make a responsive XPages viewPanel
Tue, Nov 11th 2014 291
Arguably the most dangerous thing you could ever do in XPages – let other people use your eval() in their SSJS
Tue, Jun 18th 2013 279
Oh duh, that is why Node Package Manager (npm) is so cool
Tue, Oct 14th 2014 261
Simple examples of how Google Developer Tools can aid Mobile Development
Thu, Oct 30th 2014 250
XPages and Bluemix: How to create a Websockets message without being connected to the application
Sun, Nov 16th 2014 239
Got non-XPages design elements? You really should use WebContent.
Mon, Nov 17th 2014 238


jQuery in XPages #6 – watermark.js
MarkyRoden    

In this article I will demonstrate how to implement watermark.js by Patrick Wied. Using the power of HTML5 image manipulation we are able to add a watermark graphic to another image and determine position and opacity - even with a JPG!! Of course that means no IE but hey we’re looking forward not backward people!

Introduction

This week I am only going to use one article because this hopefully won’t be too long. I am also going to try and break the article down into a simpler format than before, highlighting the XPages techniques as well as the jQuery techniques. Thanks to David Leedy for the feedback on article format and content.

Demonstration

The effect is demonstrated here

Download

The demonstration database can be downloaded from the link above or from here

Opacity in images

JPEG has been the standard web format for many years and was fantastic when we were able to reduce the size of images to (good enough) over a slow connection. Nowadays though the need to have image capability is opacity. PNG files are now the go to image format for the web and like GIF they support an A(lpha) channel which allows for an opacity to be applied to the image directly.

watermark.js

Looping through all pixels in an image – using JavaScript!

watermark.js uses a new feature in HTML5 whereby each pixel of a graphic can be manipulated from JavaScript, including the addition of an alpha (opactiy) value. The original article by Patrick explains how some very simple loop code can be written to go through each pixel in an image and apply an opacity.

First we have to create a canvas element, add it to the document’s body, set the canvas size to the image size (we have a 500×200 img) and add the image to the canvas.

// get the image
var img = document.getElementById("your-image");
// create and customize the canvas
var canvas = document.createElement("canvas");
canvas.width = 500;
canvas.height = 200;
document.body.appendChild(canvas);
// get the context
var ctx = canvas.getContext("2d");
// draw the image into the canvas
ctx.drawImage(img, 0, 0);

“Ok this is the more interesting part of the solution. We have to access the image data, loop thru all pixels of the image and set the alpha values to the value of our choice. A pixel in the imagedata is represented by four values: red, green, blue, alpha (rgba) therefore we have to change every fourth value.”

// get the image data object
var image = ctx.getImageData(0, 0, 500, 200);
// get the image data values
var imageData = image.data,
length = imageData.length;
// set every fourth value to 50
for(var i=3; i < length; i+=4){
    imageData[i] = 50;
}
// after the manipulation, reset the data
image.data = imageData;
// and put the imagedata back to the canvas
ctx.putImageData(image, 0, 0);

And here’s what we are going to build – an image with another opaque image surfaced on top of is as a watermark.

Our watermarked image

Our watermarked image

The watermark custom control

We are going to build an XPages watermark custom control whereby the developer can determine all the parameters of the effect through the custom properties of the control and therefore not have to change any of the underlying code.

There are 5 parameters which go with the jQuery plugin for watermark.js

  1. “className”: the class of the elements which should get a mark. (Optionally) Default: “watermark”
  2. “position”: “top-left”|”top-right”|”bottom-right”|”bottom-left”. (Optionally) Default: “bottom-right”
  3. “watermark”: an img element which represents your watermark. (Optionally)
  4. “path”: the path to your watermark image. (Optionally)
  5. “opacity”: opacity percentage, no “%” only the number [0-100] (Optionally) Default: 50

So we create the custom control in our database and under the “Property Definition” section we add our “properties”. Each property is a string except the position which is a combobox with pre-defined parameters.

Property Definition of a Custom Control

formWatermark Property Definitions

formWatermark Property Definitions

Entering custom properties to your custom control

And when we add the custom control to our XPage we are able to fill in the parameters for the control

Adding parameter values to our custom control in the XPage

Adding parameter values to our custom control in the XPage

Accessing the custom properties through the XPage

Accessing the custom properties through the XPage is achieved using compositeData.whateverParameterName. As you can see from the above example though not all the fields need to be filled in – so we need to compute their inclusion on the plugin instantiation.

This is the code used to create the effect. It must be added through and output script in the XPage because we need access to the Server Side variable computation which is not available through a Client Side library.

<xp:scriptBlock id="scriptBlock1">
		<xp:this.value><![CDATA[
		$(document).watermark({
			path: '#{compositeData.path}',
			className: '#{compositeData.className}',
			opacity: '#{compositeData.opacity}',
			position: '#{compositeData.position}',
			watermark: '#{compositeData.watermark}'
		});
		]]></xp:this.value>
	</xp:scriptBlock>

Watermark these images
Unless otherwise stated in the parameters the watermark.js effect is applied to all images with the class=”watermark”. Here are my images from the database.

	<xp:table style="width:100%" id="table1">
		<xp:tr>
			<xp:td style="width:50%">
				<xp:image url="/Nin9TV.jpg" id="image1" styleClass="watermark">
				</xp:image>
			</xp:td>
			<xp:td>
				<xp:image url="/xpages.jpg" id="image2" styleClass="watermark">
				</xp:image>
			</xp:td>
		</xp:tr>
	</xp:table>

Demonstration

The demonstration site shows a number of possibilities and allows the developer to change the variables and see the effect.

Demonstration of using watermark.js in an XPage

Demonstration of using watermark.js in an XPage




---------------------
http://xomino.com/2012/04/17/jquery-in-xpages-6-watermark-js/
Apr 17, 2012
21 hits



Recent Blog Posts
109


Multiple Chrome Incognito browsers share the same data
Sun, Nov 23rd 2014 7:15p   Mark Roden
In a previous post I talked about how going porn-mode on your browser is great for a developer. What I didn’t realize until today is that incognito mode is not as unique as I want it to be. We use localStorage in one of the applications we are developing and I had issues when I was opening up multiple Chrome Incognito mode browsers, assuming they were unique….I wanted to compare separate instances in separate windows Mr. Genius (Toby) pointed out to me that localStorage is shared a [read] Keywords: applications
213


x$ – now a part of XPages Extension Library
Tue, Nov 18th 2014 9:16p   Mark Roden
I am very flattered to find out that not only is my x$ OpenNTF xSnippet being used more widely than I realized (over 600 downloads). It now being used in the latest release of the OpenNTF Extension library. If you look here – http://bootstrap4xpages.com/xsp/.ibmxspres/.extlib/responsive/xpages/js/xsp-mixin.js and search for it you will find //jQuery selector that works with XPages IDs //See - http://openntf.org/XSnippets.nsf/snippet.xsp?id=x-jquery-selector-for-xpages function x$(id [read] Keywords: xpages community openntf
238


Got non-XPages design elements? You really should use WebContent.
Mon, Nov 17th 2014 7:20p   Mark Roden
Recently I was able to help explain an issue Russ Maher was having with his application png files - http://xpagetips.blogspot.com/2014/11/got-png-you-may-get-problems.html. It got me thinking that as modern web developers (which is what XPage developers need to be), we should not be using Domino database elements for “web elements”. Back before R8 we all used the Database Files, Style sheets and Database Images as a way to reference files as part of the database. I now believe w [read] Keywords: domino R8 xpages application applications css database development server
239


XPages and Bluemix: How to create a Websockets message without being connected to the application
Sun, Nov 16th 2014 6:32p   Mark Roden
In this article I demonstrate how to create a Websocket message to be broadcast, from a website which is not connected to the Websocket directly. This will be achieved by using a http POST request of the message to a node.js server hosted on Bluemix and having that server then emit a Websocket message out to the application. Introduction In the previous article I demonstrated how to create an XPages chat client using a Bluemix hosted node.js server. I was able to do this by porting the node. [read] Keywords: ibm xpages ajax application javascript security server
291


One way to make a responsive XPages viewPanel
Tue, Nov 11th 2014 7:41p   Mark Roden
In this article I will demonstrate a method for hiding columns using CSS and making an XPages view Panel pseudo-responsive. What is Responsive Design? Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries. The goal of responsive design is to build web pages that detect the visitor’s screen size and orientation and change the layout accordingly. http://whatis.techtarget.com/definition/responsive-des [read] Keywords: xpages css mobile xml
1125


Creating an XPages Websockets chat client using Bluemix
Sun, Nov 9th 2014 7:53p   Mark Roden
In this article I will demonstrate how I was able to take an example Bluemix, node.js based, websocket chat program and re-purpose it to be used in XPages. Introduction Earlier this year I was very excited to find the Websockets in XPages project on OpenNTF published by Mark Ambler. The concept behind that project is to be able to create a notes document in a queue which is processed and then send out to all users. As much as I promised to help out and use the project, life and a business need [read] Keywords: domino ibm notes xpages ajax application applications css database dojo interface javascript mobile openntf server xml




141


Finding your localStorage values – Chrome Developer Tools
Thu, Nov 6th 2014 8:05p   Mark Roden
Just a quick tip – if you use localStorage and you need to find out what values you have in localStorage you can see them through developer tools easily. F12 to pull up developer tools Resources Local Storage is right there PS A similar feature will be release in the next Firefox (34) developer tools – https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector [read] Keywords: firefox
199


Because developers make mistakes – Webstorm Local History
Wed, Nov 5th 2014 10:24p   Mark Roden
Similar to Eclipse, Webstorm has a local history capability, allowing the developer who realizes they made an idiot mistake an hour ago, to go back to it and save their day. We’ve all been there and while committing to source control is a must for modern development, there are those times in between commits and then those when you are just too lazy to go through the repo looking for it. Local History Local History is always enabled in Webstorm – for the official help check here. U [read] Keywords: development eclipse
155


Conditional style loading in IE10+
Sun, Nov 2nd 2014 8:12p   Mark Roden
I learned this recently when trying to load a conditional stylesheet into an XPage. IE9 worked but IE11 failed on me and I couldn’t see why. It was only a small change so I ended up putting it in the main stylesheet as a media query. Apparently IE10 and above does not understand conditional HTML code like this http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx So to load a style conditionally in IE11 you can do it like this @media screen and (-ms-high-contrast: a [read] Keywords: css microsoft xml
250


Simple examples of how Google Developer Tools can aid Mobile Development
Thu, Oct 30th 2014 7:36p   Mark Roden
In this article I will show some simple examples of how Google Developer Tools can be used to help in mobile (responsive) development. Introduction Google Developer Tools (F12) within Chrome is one of those things which you *know* is way more powerful that you have ever cared to look at but this week I was introduced to a very cool new feature – thanks to @simonreid123. The ability to control the veiwport and size of the viewing window, as well as being able to throttle the speed of page [read] Keywords: development google iphone mobile network twitter




Created and Maintained by Yancy Lent - About - Blog Submission - Suggestions - Change Log - Blog Widget - Advertising - Mobile Edition