I have been showing animations using canvas in several blog posts lately and implemented a lot of this in my own homepage. Now, if you are doing animations you need to plan how the animations should execute so that the user does not miss the whole show. :)

You might want to kick off the animation on a click, or even on a long page – start the animation once the user scrolls down to the animations position. There would be little use in an animation if the show were over when the user gets to it, right?

Now, you can hook on to the browsers events using the window object or the document object. The click event I’ve already covered in this post.
For the scroll event you need to grab the window object.

The easiest way to do this is to use JQuery and extend the scroll event. In this example I’ve added a delay before kicking of the animation.

I’ve also calculated the position the user should scroll to before firing the event handler.

Friday, March 20, 2015

This post will be a short one attending a problem I briefly touched upon in my previous post on animation using canvas. We live in a "mobile first" world and need to pay attention to responsive designing.

Try as you might resizing your canvas using CSS you are in for a disappointing surprise. Especially if you are rendering text, it will look all chunky and broken.
My solution to this problem is to calculate a factor value based on the window and canvas width. Using this value, I can multiply it with all xes and ys and lengths and widths and so on and keep the relative positions all these shapes have to each other.

Object animation using JavaScript is fairly simple once you get the hang of it. In the three previous posts I've explained how to render shapes and how to render a series of shapes. To recap some of the steps I've included the part where I create the objects.

Creating classes

I've created a generic shape class called CShape, with a set of basic properties that I find relevant for any of the shapes I'm going to render. This also includes properties relevant to animation. Each property is explained in the comments below.

Further on I've extended the CShape creating another class called CCircle. Here I've added the properties minRaduis and maxRadius as these only apply to circular shapes. The radius values will be used for animating references, growing or shrinking.

A bit to the side, but indeed relevant to the mission we add a factor for resizing. You might know that resizing a canvas without rerendering the content might give you a poor result, so we'll do a calculation here and multiply all positions and sizes with it. I'll come back to this in a future blog post. Maybe even the next.

Creating objects

Now I am ready to create some shapes. For this demo I'll create a series of small circles like you can see on my home page. I add them straight away to the array to save some steps, but you can create the objects based on the classes and then add them later if you wish.

Rendering shapes

Now it is time for some logic. We need a function that can render a circle based on these objects. The function below takes an object, an id and the canvas context as an argument. I choose to send in the context because I want to use the same function rendering on several canvas elements in one page.
Other than that the function pretty much does what it says.

Animating the shapes

Oki, so now we can draw a circle. Now I'll add two functions. One for running the rendering based on the kind of shape, and one that runs through the array.

// Loops through the custom shape array calling renderShapes on every shape
function animationLoop() {
var i = customShapes.length;
while (i-- && i >= 0) {
var customShape = customShapes[i];
// Calling the rendering function
renderShapes(customShape, i, context);
if (customShapes[20].minRadius >= customShapes[20].maxRadius) {
//checking if the shape should continue animating in the next iteration
keepAminationAlive = false;
}
}
if (keepAminationAlive == true) {
// if the shape should be reredered, the function is called again
setTimeout(animationLoop, 50);
}
}

Now, for each object in the previous function we need to know which kind of shape to render. This is simply done by checking if the object contains one of the unique shape properties applied to the shape object. Since we are only rendering circles in this demo, this is not a problem. However, if your animation is based on several shapes like on my site (www.engvoldsen.net) - you have to tend to this.

In a previous blog post (Painting using Canvas and JS), I explained how to paint a figure using canvas. I explained how to paint the figure inside a single function by setting coordinates and calling stroke and fill. In the following post, (Create an interactive HTML5 Canvas using event handlers.) I presented the clickable area as an object. In this, post I am going to start up by combining the two like the snippet below.

I create an object called CustFigure. It has X and Y values and a height and width. This is all we need in order to place it in the grid and to get the size of the figure, say a box.

Wednesday, January 7, 2015

You can use HTML5 Canvas as an alternative approach designing info graphics, branding
graphics etc. Using the example in my previous blog post, I will add a
clickable area on the canvas and use a JavaScript event handler to execute some
logic.

This is the result of the previous example. I want to pop an alert Box when clicking inside the logo.

I need to create an object reflecting the coordinates I want my clickable zone to have. I’m also throwing in an id/name.

Tuesday, January 6, 2015

Lately I've been playing around with HTML5 and Canvas trying to render icons and graphics without the use of image files. This blog post is simply showing how to render the HTML5 logo using only code.

First up, we create a HTML5
canvas-tag where our logo will live. I’ll add some simple CSS to it for good measure,
creating a circular form for our logo. We make
sure to call our function rendering the logo as the page is loaded.

Now, for
the rendering-function, please see my inline code. My approach towards this is
to paint the logo in «layers», starting with the background and adding on layer
by layer until the logo is complete. By using semi-transparent colors, we get
the desired 3D-effect.

Friday, July 4, 2014

If you've read some of my previous posts, you've seen examples of using parameters when calling templates.
I earlier wrote about assigning XML structures to variables. Now we are going to use a variable as parameter for a template call.

Create the variable and send it as a parameter to your template of choice:

Wednesday, June 11, 2014

Term based navigation has been greatly improved in SharePoint 2013, but sometimes you want to open navigation URLs in a new window. However, the term store does not offer such a property so we'll solve it using JavaScript instead.

Friday, April 11, 2014

I stumbled over this one
the other day and I (luckily) discovered the solution by accident.

When
configuring MySite in SharePoint 2013 you are prompted to give up the URL for
your search center. Now, if you’ve set up an Enterprise Search Center as I’ve
done redirecting you to the correct result pages will fail when doing a search
from MySite. Leaving you with an “The page you're looking for doesn't exist”-error.
(Yes, another of MS meaningful errors).

Sunday, September 30, 2012

As you might already know you won't get anywhere without XPath when working with XSLT. As scary as it might sound (at least I thought it sounded scary), it is no more than the pattern you need to learn to find the information you're looking for. Now you might argue that it can be more complicated than that, but we'll keep it simple in this blog post. We'll use the music XML structure from a previous post.

Let’s see some examples:

<!-- This code will give you a copy of the XML root of the current structure.-->

<xsl:templatename="giveMeTheRoot">

<xsl:copy-ofselect="//"/>

</xsl:template>

<!-- This template will give you a COPY of the current node. That means that you will also get the subnodes of the current nodes as well.-->

<xsl:templatename="giveMeTheCurrentNode">

<xsl:copy-ofselect="."/>

</xsl:template>

<!-- This template will give you the VALUE of the current node. This will give you the ONLY the value of the current element, and ignore any subnode value.-->

<xsl:templatename="giveMeTheCurrentNodeValue">

<xsl:value-ofselect="."/>

</xsl:template>

<!-- For the next example we need to do some changes to the original XML. Let's say we wanted to include the date when the album was released and that we would put this information in an attribute of the record node. That would look something like this.-->

<recordCollection>

<recordreleased="01.01.1982">

<artist>Madonna</artist>

<title>Like a prair</title>

</record>

<recordreleased="01.01.2001">

<artist>Gorillaz</artist>

<title>Gorillaz</title>

</record>

...

...

</recordCollection>

<!-- This template will return the value of the node attribute called -->

There are a couple of things that make XSLT hard to manage and recursion is indeed one of them. There is just no way of running a traditional for loop. In order to solve this we need either a structure to iterate on, or we can create a template that calls itself with a counter and control number.

If you simply need to iterate on an XML structure, you can do a for-each loop like this:

<xsl:for-eachselect=".//child::title">

<!-- Do you thing-->

</xsl:for-each>

However, if you know that you need to iterate on a procedure "i" times, then we need to complicate things a bit.

<xsl:templatename="test3">

<xsl:paramname="counter"/>

<xsl:paramname="i"/>

<!--We do our thing...-->

<xsl:copy>

<xsl:text>Hello Nerd!</xsl:text>

</xsl:copy>

<xsl:iftest="$i &gt; $counter">

<xsl:call-templatename="test3">

<xsl:with-paramname="counter"select="$counter+1"/>

<xsl:with-paramname="i"select="$i"/>

</xsl:call-template>

</xsl:if>

</xsl:template>

To call the template we need to provide it with the starting parameters:

<xsl:call-templatename="test3">

<xsl:with-paramname="counter">0</xsl:with-param>

<xsl:with-paramname="i">10</xsl:with-param>

</xsl:call-template>

Make sure that you take into consideration that the if test checks if the $i is still greater than the $counter variable. If you write greater or equal you will get 10 + 1 runs of the template. Also make sure that the call comes after you've done your magic in the loop. Otherwise you just won't get anything. The template executes line by line, so if you include any code after the template call, it will execute once(!) no matter how many iterations you initially ask for.

Sunday, September 23, 2012

Working with variables can get you into any kind of delight or trouble. It brings in many scenarios making it tricky in ways you don't experience with other programming languages.

First of all you need to remember that xsl variables are STATIC. That means that you cannot change them once they are set. Also you need to make sure that they are in the correct scope. If you create a variable inside a template, it will only be available inside the template. However, you can create GLOBAL variables outside a template as well.

Now on to the code examples. This post is using the XML example from an earlier post on XML and XSLT.

<!-- The following example creates variables in different ways. -->

<!-- This variable is a simple string, hardcoded inside the variable node.-->

<xsl:variablename="myString">

<xsl:text>Hello Nerd!</xsl:text>

</xsl:variable>

<!-- In order to print the variable we do a simple value-of call. -->

<xsl:value-ofselect="$myString"/>

This will give us the following output:

Hello Nerd!

<!-- The next variable is created by looking up the artist 'Michael Jackson' in the example XML, and assigning the record title as value to the variable.-->

<!-- Sometimes we need to load an intire XML structure into a variable. The following exmaple loads a document by using the document() function and the filepath(./music/recordCollection.xml) as an argument. On load we set the xml files root node as the root node in the variable.-->

Sunday, August 5, 2012

Using .Net and C# you can do XSL transformations using XslCompiledTransform(). As input to the XSLT engine we use an XSLT sheet, settings (optional), parameters (optional), an XML source and the output path.

Note: Please note that if you need to use XSLT 2.0 or XPath 2.0 you should use a third party XSLT engine.

12: // As there is no way of generating e.g. date objects inside XSLT 1.0

(the only one supported by .Net) we do this outside the code and include

it as a parameter.

13: // Argument list (Params)

14: var xslArg = new XsltArgumentList();

15: // Grabbing current DateTime

16: DateTime time = DateTime.Now;

17: // Create a parameter which represents the current date and time.

18: xslArg.AddParam("date", "", time.ToString("s"));

Now, as we create the result file we want the transformed output to populate, we apply the source XML, arguments (params) and XML writer to the XSLT engines Transform() function. This is when/where the transforation is performed and the end of any C#/.Net involvement for now.