Stencil.js – (Applying a transparent CANVAS mask) – I need some suggestions

In this article I am going to show you how I created stencil.js – A technique for making a transparent mask on top of an image. But I am a little lost as to what to do with the technique now I have created it – any suggestions would be gratefully received and much appreciated.

Example

So I have been working on this idea for a couple of weeks and I finally figured out how to make the technique work whereby you can draw a picture ontop of a web font text (or make it look like that anyway)

Drawing a picture on top of web based text
Drawing a picture on top of web based text

I think it is kinda cool – shame the font has sharp edges and isn’t feathered but hey.

How does it work?

So what I am actually doing is taking an image

An image
An image

Drawing a “<CANVAS>” element on top of it and writing some text onto the canvas (so no IE)

Writing some text onto the canvas
Writing some text onto the canvas

Then I make all the red pixels on the canvas have opacity=0 (i.e. see through) and everything else color white with opacity 255 (not see through)

It is easier to see the effect if I make the white canvas slightly opaque – in this image you can JUST see the original as I have set it to 225 not 255.

This canvas manipulation was what I found Patrick Wied had used in making the watermark.js plugin which I wrote about earlier in the year. Each pixel in the canvas can be manipulated with the RGB value and Opacity – so I can make anything white and or transparent.

If you want to see it in actiion go to the jsFiddle I have created: http://jsfiddle.net/mdroden/aefh4/

Or if you think you can improve it – git it – https://github.com/markyroden/stencil

So I need suggestions….

The plan is to turn this into a jQuery plugin – but for what purpose? Other than a demonstration of it can be done – what’s the good practical usage for it. And then from that what variables are required to make the end result work?

In the jsFiddle example I pass in the Text, font and font-size. But there are also some tweaking to be done to position the text optimally over the image – and this varies based on the font and the size. I used Fascinate because it was a “fat” font and therefore showed a lot of the background image……Probably the transparency of the “white” mask could be a variable as well.

I am thinking something like this


$('#image').stencil({
	text: 			"XOMINO",
	font-family: 	"fascinate",
	font-size: 		70,
	text-positionX:	10,
	text-positionY:	30,
	text-color:	"red",
	mask-opacity:	255
}

I have a lot of balls in the air what with MWLUG and a new job in the offing but I will come back to this and at least make a basic plugin for it….

So how would you use it?

Marky

Advertisements

Reviewing 3 JavaScript presentation libraries (for my MWLUG presentation)

As I previously mentioned my abstract for MWLUG2012 has been accepted and so I have gone about looking for an assessing different JavaScript presentation libraries to use as part of my demonstrations.

I am a firm believer in demonstrating the techniques I want to talk about rather than going through boring slide after boring slide. Any old vacuum cleaner salesman can blow smoke up your ass about how awesome their product is – but if I want to talk about how you use a JavaScript library then I want to be able to show it in action. Using a JavaScript presentation platform also negates the need for me to constantly flick back and forwards from PowerPoint to a Web Browser. I realize that sometimes that is a cruel necessity but it is not easy on the audience.

So I found these three examples – I am sure there are others but here we go – All these are firefox or chrome or safari to get the best out of the HTML5/CSS3 support

Turn.js

http://www.turnjs.com is a really nice look and feel “book-like” presentation format. It allows to the user to grab the corner of the page and turn it to the next one. I did not go with this one because I found some issues with the display and it was also quite finicky to use – not good for a presentation but might be good for an online advert or something of that ilk

turn.js screenshot: turning a page
turn.js screenshot: turning a page

 

Impress.js

http://bartaz.github.com/impress.js

This is just an amazing demonstration of CSS3 transitions – This would be my preferred presentation library because I was SO impressed (pun intended) with the demonstration and the flexibility of the usage. I started to pan out my slides using this capability (mimicking the example slide types) and I was really enjoying it.

The problem I ran into was that it did not play well with the demonstrations I wanted to do. I want to include XPage code and the dojo CSS created by the XPage really screwed up the presentation CSS 😦 It was also  really time consuming to manage the canvas and where all the slides were going to go – kinda disappointed this didn’t work out because the WOW factor would be worth every minute!

the only limit is your imagination

This would be great if I was not using demonstrations within the presentation and if I had more time to play with it….

impress.js infinite canvas
impress.js infinite canvas

 

Ascensor.js

http://kirkas.ch/ascensor/

Ascensor is a jquery plugin which aims to train and adapt content according to an elevator system

So this is the library I finally decided to go with. It is very simple one slide to the next you can use the arrow keys to move left and right up and down through the website. There are some nice examples of how this has been used in commercial sites and it struck me that it would make a very nice way of telling a story in a presentation. What I also liked was the simplicity of the stylesheet and the simplicity in which I could construct my slideshow.

Ascensor.js
Ascensor.js

In the main XPage I am able to just create a separate custom control for each presentation page and at any time I can jump from one slide to the next. This also allows me to ensure that each example can be treated individually. Unlike Impress where the content and positioning are controlled from the div attributes, Ascensor controls the slide order from the plugin attributes at creation.

<div>
	<div class="contenu">
		<!-- Narrowing the selection -->
		<xc:form2_4></xc:form2_4>
	</div>
</div>
<div>
	<div class="contenu">
	<!-- Returning the jQuery Object -->
		<xc:form2_5></xc:form2_5>
	</div>
</div>
<div>
	<div class="contenu">
	<!-- Chaining -->
		<xc:form2_6></xc:form2_6>
	</div>
</div>

Here is how the presentation is instantiated using the plugin call.

$(document).ready(function() {
    //google code prettyfier
    prettyPrint();

    var cCoord='1|1 & 1|2 & 1|3 & 1|4 & 1|5 & 1|6 & 1|7 & 1|8 & 1|9 & 1|10'
    	cCoord+=' & 2|1 & 2|2 & 2|3 & 2|4 & 2|5 & 2|6 & 2|7 & 2|8 & 2|9 & 2|10'
    	cCoord+=' & 3|1 & 3|2 & 3|3 & 3|4 & 3|5 & 3|6 & 3|7 & 3|8 & 3|9 & 3|10 & 3|11 & 3|12'
        cCoord+=' & 4|1 & 4|2 & 4|3 & 4|4 & 4|5 & 4|6 & 4|7 & 4|8 & 4|9'
        cCoord+=' & 5|1 & 5|2 & 5|3 & 5|4 & 5|5 & 5|6 & 5|7 & 5|8 & 5|9'
        cCoord+=' & 6|1 & 6|2'

	//ascensor
	$('#content').ascensor({
		AscensorName:'house',
		WindowsFocus:true,
		WindowsOn:0,

		NavigationDirection:'xy',
		Direction: 'y',
		Navig:true,
		Link:false,
		ReturnURL:true,
		PrevNext:true,
		CSSstyles:true,

		KeyArrow:true,
		keySwitch:true,
		ReturnCode:false,

		ChocolateAscensor:true,
		AscensorMap: '9|2',
		ContentCoord: cCoord
	});
});

More to come on the presentation as it comes together and I will certainly be blogging about the how as this goes along.

MWLUG Ascensor slideshow
Marky’s MWLUG Ascensor slideshow

jQuery 1.8beta2 – Compensating for vendor prefixed CSS3 properties (with demo)

In this article I will demonstrate a neat new capability within jQuery 1.8 (currently in beta2) which applies vendor specific CSS3 transformations without having to call out each one individually.

Introduction

The W3C specification for CSS3 allows for vendor specific style extensions which is a good thing and a bad thing. When attempting to do a transform for example it means increasing the size of your style sheet to try and accommodate all the possibilities.

For Example when trying to do a Transform we need to add -moz and -webkit to get the feature to work in those browsers
(code gleaned from http://www.html5rocks.com/en/tutorials/3d/css/)

	DIV {
		-moz-transform: rotate3d(0, 1, 1, 30deg);
		-webkit-transform: rotate3d(0, 1, 1, 30deg);
		transform: rotate3d(0, 1, 1, 30deg);
	}

Demonstration

You can see the issue for yourself at this link – try the different browsers and you will see – (no transform in IE)

As you can see from the examples below the style is specific to the browser (-moz = mozilla | -webkit chrome/safari)

3d transform using -moz in safari
3d transform using -webkit in chrome/safari
3d transform using -moz in firefox
3d transform using -moz in firefox

Using the new jQuery feature

Checking out the jQuery blog we can see that one of the new features of jQuery 1.8 is the browser compensation for applying vendor specific styles

VENDOR-PREFIXED CSS PROPERTIES

The W3C had its heart in the right place when it came up with the idea to use vendor prefixes for CSS features that were not yet standardized, but it hasn’t resulted in a fairy-tale ending. Web developers are faced with the nightmare of including all the vendor-prefixed property names in stylesheets. jQuery 1.8 eases the pain a bit. We automatically take the non-prefixed property name and generate the prefix that is appropriate for the current browser, so you don’t have to. For example, on Chrome the jQuery call $("#myscroll").css("marquee-direction", "backwards") will set the CSS to -webkit-marquee-direction: backwards.

On the demo site I have demonstrated a simple implementation of  it using the following  jQuery css method call.

	function jQTransform(){
		$("#jQiFrame").css('transform', 'rotate3d(0, 1, 1, 30deg)')
	}

On the demo page you can click the button and in each of the three browsers chrome/firefox/safari you will see the transformation

3d transform using jQuery1.8beta2
3d transform using jQuery1.8beta2 in chrome/safari/firefox

This is a simple demonstration but once again shows why browser compatibility continues to be a problem and how jQuery helps the developer correct for that.

Speaking at MWLUG 2012 – XPages, jQuery, and Dojo – a new paradigm in Client Side JavaScript

I am really excited that my abstract was accepted for MWLUG 2012

http://www.mwlug.com/mwlug/mwlug12.nsf/Sessions.xsp

AD111: XPages, jQuery, and Dojo – a new paradigm in Client Side JavaScript
Speaker: Mark Roden – PSC Group, Senior Developer

In this session we will take a deep look at how dojo and jQuery can be used to easily manipulate the Document Model of your XPage. This truly opens up a new paradigm for solving every day development problems. Take back your web browser and significantly reduce your compatibility issues. We will look at several useful Tools to use in building your CSJS code; identify resources and illustrate effective methodologies for Client Side JavaScript development in XPages. 

Since Lotusphere this January it has been my intention to speak at a conference and this is a great opportunity for me to spread the jQuery/Client Side JavaScript word.

Through this presentation I hope to encourage XPage developers to use CSJS libraries and to highlight the possibilities – we are only limited by what we know and what we think we know – there is always more out there just beyond the horizon if you know where to look for it.

I really appreciate the support and encouragement to speak at MWLUG from my new employer PSC Group.

This is going to be a lot of fun ! 🙂

jQuery in XPages #13 – Peity – Small charts in a big world

In this article I will demonstrate how you can easily include small charts inside your XPages. As the saying goes, sometimes a picture can speak louder than a thousand words and in this case it really can. Using Peity you can easily insert small, yet effective, charts into your XPages

Do  you know what percentage of  the blog posts on this site are XPages related?

 

Over 80% of them.

Demonstration

The XPages integration of Peity is demonstrated here

Download

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

Peity

Introduction

from the website

Peity

Peity is less than 5k in size and yet really imposes itself as a big visual improvement to any site. It is HTML5 based which as normal precludes any none-canvas supporting browser. But it does work in Chrome, Firefox, IE9+, Opera, Safari.  With it you can make pie, bar, line or even custom charts by simply adding your data to a <span> element and calling the plugin.

Check out the original Peity demo site for the full information on the plugin.

Peity is one of those jQuery plugins which does not itself use jQuery – but to make it available to the masses it has been wrapped as a jQuery plugin.

Examples

The basic format for creating a Pity image could not be simpler

	<span>1/5</span>

 

	$("span.pie").peity("pie")

How does it work?

The jQuery and Peity JavaScript libraries are added to the database through the WebContents folder. Change the Designer perspective to show the Package Explorer (Window–>Show Eclipse Views–>Package Explorer) and drag and drop the two libraries from your computer into the “js” folder. (You can see the demo database as an example)

The js libraries are added to our XPage Source as follows

	<script src="js/jquery-1.7.1.min.js" clientSide="true"></script>
	<script src="js/jquery.peity.js" clientSide="true"></script>

The examples given on the plugin homepage show that the following options are available:

  • Chart Type with options
    • pie
      •  colours,diameter and delimeter
    • line
      • colourstrokeColourstrokeWidthdelimetermaxmin,width and height.
    • bar
      • colourdelimetermaxminwidth and height
    • custom

Size and color attributes

as an alternate to setting the colour and size using the function call you can add attributes to the chart

	<span data-colour="red" data-diameter="40">1/7</span>

Adding it to your XPage

In the example on the demo site I reused the highCharts fruit custom control to give me some data on the page. I haev added a chart to the page in two ways:

  • Using a DbLookup()
  • Using some jQuery to add the charts after loading
Integrating Peity charts into your XPage

The line chart is created by adding a computed field to the form. using the readonly=”true” parameter a SPAN is created by the XPage which is exactly what we need for the Peity chart.

The source code to create the line chart looks like this:

	<xp:inputText styleClass="line" id="inputText1" readonly="true">
		<xp:this.defaultValue><![CDATA[#{javascript:@DbColumn(@DbName(), "vwFruit", 2)}]]></xp:this.defaultValue>
	</xp:inputText>
	<script>
		$("[id$=inputText1]").peity("line")
	</script>

The Pie Charts are inserted into the viewPanel by using the following process:

  • Select all the table cells  in the 2nd column of the table (except for the first row)
  • Cycle through the values and total the column
  • Cycle through the table cells again and replace the Table contents with
    • The existing text and a SPAN (class .pie) containing the value / the total
  • Create the Peity pie charts for all matching elements (.pie)

And that looks like this in the code:

	var total=0
	var sTemp=""
	//get the total
	$("TABLE[id$=viewPanel1] TR:gt(0) td:nth-child(2)").each(function(i){
		total += parseInt($(this).text())
	})
	//replace the cell with the new contents
	$("TABLE[id$=viewPanel1] TR:gt(0) td:nth-child(2)").each(function(i){
		sTemp = $(this).text()+':    <span data-colour="red" data-diameter="20" class="pie">'+ $(this).text()+"/"+total+"</span>"
		$(this).html(sTemp)
	})
	//create all the Peity pie charts based on the .pie selector
	$(".pie").peity("pie", {
		colours: function() {
		    	return ["#dddddd", this.getAttribute("data-colour")]
		  	},
		diameter: function() {
		    return this.getAttribute("data-diameter")
		}
	  })

What a year – and it gets better….!

It has been an amazing year so far since Lotusphere and things have been happening thick and fast for me:

All this has lead up to an opportunity which I felt was too good to pass up on.

  • I am going to work for the PSC Group as an XPage developer

In a few weeks I will be starting with PSC and I am flattered that they consider me good enough to work with the likes of John Head, Troy Reimer, Kathy Brown and the other fantastic programmers/consultants they have over there.

This is so cool 🙂