A blog by the Brick Factory The Brick Factory

How to Create Dynamic SVG’s with Raphaël

Over the last few years I have heard more and more good things about the javascript library Raphaël. A project I was working on recently afforded me the opportunity to experiment with it fully. I discovered that it is really powerful and actually fun and easy to work with. In fact, it feels like it replaces a lot of the functionality you could create in Flash, when that was the standard for robust, dynamic interfaces. But unlike Flash, mobile browsers are starting to support SVG across the board (from a few years ago) and Raphaël will convert the SVG code to VML for IE8 and below.

In this tutorial I walk through some basic examples of using Raphaël and then include code for a more complex example where I create a custom pie graph. This tutorial assumes that you have a basic knowledge in JavaScript code and that you are familiar with using jQuery. But before I get into the tutorial, let’s go through the basics.

What is Raphaël?

Raphaël is a JavaScript library that allows for creating SVG’s on the web. For browsers that do not support SVG, it will automatically convert the code to VML (IE8 and below).

What makes Raphaël awesome is how it fits very well with responsive design. Since it creats vector graphics, it can scale without losing clarity or stretching out pixels, like you find in raster graphics.

Getting Started

The first thing you will want to do is download the raphael.js file. I recommend using jQuery to help work with the dom, but jQuery is not required to use Raphaël. You will also want to bookmark the documentation page, as that will be useful in accessing different functionality and options for the library. I also recommend going through the examples they have on their site to get a feeling for what you can do with the library. In fact, if you can find an example that sends you in the right direction in what you are trying to do, I recommend starting from there.

When using Raphaël, you will always need to create a canvas to draw on. This defines the total area we have to work with. You will be referencing this object when you draw lines and shapes, so make sure you call this before those samples. With the Raphael() call, we are sending the id of the <div> where we want to draw the canvas.

Below is the basic html structure for a page that uses Raphaël, including creating the canvas, that I’m using with these examples. Note that the CSS here is very important, as we are using it to define the size of the canvas.

Drawing Lines

A key concept when using Raphaël is understanding how lines are drawn. There are different ways you can do this, and you will want to understand the different options. For the examples in this section, we will simply use Paper.path().

Keep in mind that all of the commands we are sending to this method are SVG commands. So as another option, you could use several software programs to generate these commands. You can reference the W3 SVG standards if you want a more in depth and technical description in what you can do.

Here is a sample command that draws a line. Underneath the code, I explain what each part of the command is doing.

M: This tells the system where to move the cursor. It then is followed by a 0 and 240, which are x,y coordinates. In human terms it is saying “From the top left corner of the canvas, move the cursor 0 pixels to the right and 240 pixels down”.

l: This is a lowercase “L” and specifies that we want to draw a line, relative to where the cursor is at. An uppercase “L” uses an absolute position from the top left corner of the canvas. With the code above, the command is saying “From where the cursor is at, draw a line 640 pixels to the right and 0 pixels down.”

With both of these commands you can use negative numbers. For the x coordinate, this would make it go to the left and for the y coordinate, this would tell it to go up.

Here are a few additional examples:

You can combine all of these into one path value. The only reason you might want to separate them is if you wanted to apply different styling or effects to each line. But in most cases in dealing with lines, you will want to combine them into one path, like this:

See the code in action.

Just like the “L” call, you can make the “M” call lower case. This makes the cursor move relative to where it is at currently. So we could draw a triangle in the center of a rectangle with this command:

See the code in action.

Drawing Shapes and Text

You could create shapes and text manually using the path() method. But there are much simpler ways for drawing basic shapes and text using the library. A few examples are circle(), rect() and text(). See an example that draws all of them on the same canvas below.

See the code in action.

Attributes

At this point we haven’t customized the look of the objects we have been drawing. What if you want to change the fill color of the object? Or the border? Or the cursor when the mouse goes over the object? For customizing the look of any object you draw in Raphaël, you will want to use Element.attr().

Here is some code that creates a circle and changes the fill color.

Or you could make the code look like this to accomplish the same thing.

You can change as many properties of the object as you want.

Once you have drawn an object, you can also add click, mouseover or any other jQuery events onto that object very easily. Take a look at this code to see a modified example that changes the attributes of the object and also modifies one of the objects when the text is clicked. From here you see the benefits in using jQuery with Raphaël.

Custom Pie Graph

Recently we created a custom pie graph directly in SVG. But the problem was that the SVG would not load in IE8. To get this working in IE8, we decided to redo this using Raphaël.

When tackling a complex customization like this, you will want to break the task into simpler steps that you implement one at a time. I first got a basic pie graph to display. I then implemented the different colors for each slice of the pie. Next I modified how far each slice goes out, depending on the value. Finally I created each section slice (to make each section clickable).

If you take a look at the code, you will notice that I am getting the values of each slice from a hidden html table on the page. This opens up the possibility in how to get your data into something like a graph.

See the code in action.

Once you get over the initial learning curve using Raphaël, you begin to realize the potential this library has to create some really cool, dynamic interfaces. And when combined with jQuery, implementing this becomes even easier!

Custom PHP Programming to Drupal

I got started PHP programming before PHP frameworks were in widespread use. The first article that got me started with PHP programming was from SitePoint. Since then they have made the article into a book series. From there I worked on a few personal projects and ended up landing a few jobs at local web development firms who specialized in using PHP for building websites.

PHP was very new at this point and there wasn’t a lot of talent out there that knew how to best put things together. In other words, I was on my own. When you find yourself in a situation like this, the best thing you can do is learn as you go. If something doesn’t work, try again until you get it figured out. Learn from your mistakes and always look for ways in improving what you do.

Working in a fast paced environment and learning as I went had the advantage of teaching me the work ethic to thrive in a high stress and high turnaround environment. But it also provided a lot of hard lessons in regards to creating everything by hand. Lessons that I will benefit from throughout my career, but also lessons that taught me there is a better way.

That better way is open source. More specifically…Drupal.

Drupal has changed my life. What I wrote custom PHP code to handle a decade ago, Drupal handles about 95% of that work, out of the box. I no longer have to debug issues because I’m using custom code that I didn’t have time to fully test before releasing to the client, because of a tight deadline. Instead I have much more time in focussing on very custom programming work and refining the functionality that I work on, such as creating a custom AJAX interface for the Institute of 21st Century Energy.

And this is awesome! Don’t get me wrong, there is still the normal stress in regards to meeting deadlines and ironing out bugs, but the amount of features that come with Drupal saves a lot of time. But you may ask how is this practical in real world examples? Lets go through a list of functionality that is very common when you need a content management system.

  • User login system.
  • Ability for the client to update basic page content on a site (such as an about us page).
  • Ability for the client to update text content in blocks throughout the site (such as contact info).
  • Being able to handle content that is more customized than basic page content (such as a list of locations).
  • Being able to define and customize fine grain permissions in the admin.
  • Having full control over how url’s look for each page on the site.

This list of features takes a significant amount of time to develop with custom code. In Drupal, you have all of this functionality available out of the box without any programming required. And that is just the tip of the iceberg! You can also easily aggregate lists of different types of data entered into the admin and create customized forms for visitors to fill out….all of which do not require any programming to accomplish. With about 20,000 contributed modules available for Drupal, there are few things you can’t accomplish without finding a module that can handle whatever functionality you need.

With that said, there is a learning curve to becoming comfortable with Drupal. But once you get over this hump, the bright light of Drupal will warm your soul and ease your heart and you will enter the promise land. And it is worth the journey!

Splashify Update

At the end of January we launched Splashify, a module for Drupal 7 that allows developers to display a splash page on their website. Since the initial release I’ve had a lot of back and forth with the Drupal community, who identified some important improvements to the module that needed to be made. I’m proud to announce that a few days ago we released a new version of Splashify that addresses the major issues identified by the Drupal community.

Here is a breakdown of what is new with Splashify:

1. Page Caching

In the early stages of the project I was handling the page redirect and display through JavaScript. However, as our Brick Factory team used the module we quickly determined things broke when turning on the “Cache pages for anonymous users” option in Drupal 7.

This was annoying because enabling anonymous page caching greatly increases the performance of pages that anonymous users would go to (such as the homepage). It was also frustrating because Drupal 7 would not run hook_init() when anonymous page caching was turned on, which broke the functionality of the module.

The solution I came up with was to re-work the module by putting the programming logic that was in the PHP code into the JavaScript instead. This allowed the module to know when and where to display the splash page even when anonymous caching was turned on.

2.Page Redirect

One option for displaying a splash page is to have the visitor redirected to the splash page before viewing the page they originally intended to visit (usually the homepage). Since we do this through JavaScript, one downside in using this option was for a brief second or two visitors would see the homepage show up before you were redirected to the splash page. This was annoying, and I knew this was unacceptable.

The problem was that there were things the JavaScript needed to process before it could do the page redirect. The solution that was implemented was to hide the whole page before the redirect happens, which prevents the homepage from being displayed before redirecting to the splash page.

I realize this is not a perfect solution, and it is not as smooth as redirecting the page through PHP. However, compared to how it looked before, this is a huge improvement and I think it is a good compromise in having all the benefits that come with this approach (search engine optimization, page caching, etc…), and still allowing for the page redirect option.

On top of allowing the splash page to show up by redirecting the visitor, Splashify also includes the option of displaying the splash page in a lightbox.

There were people who attempted to use the module in the early stages and were frustrated by these two major issues. Since making these improvements I’ve seen an increase in people using the module, with less problems.

At this point the module has about 350 drupal sites that report to using the module and about 875 downloads. This confirms there are people out there who need a module like this, and we expect with these major issues resolved the growth rate will increase rapidly.

There have been a few other smaller features added since the initial launch of the project, but the above list covers the main things that allowed us to put out this first release candidate. Our goal is release a stable version within the next few months.

It feels great to provide a module to the community that people find useful. If you have used this module, let us know what you think about it!

Get Splashify

Three Takeaways from Drupalcon Denver

Anyone who has worked with Drupal much knows that one of the platform’s greatest strengths is its community.  With 3,100+ attendees and overflowing conference rooms the size of football fields, the recent Drupalcon Denver 2012 was probably the greatest gathering of drupalistas the world has ever seen.   Attending the conference was a real treat and I learned a ton.

While the pure scope of the conference was impressive, the quality of the sessions was the most impressive thing about Drupalcon Denver.  I took around 20 pages of typed notes during the conference, and have countless things I want to experiment with and follow up on.  Since no one is interested in reading my twenty pages of notes, I want to break out my three key takeaways from the conference.

1. Mobile

Everyone knows that mobile is becoming a more and more critical part of website development.  Drupalcon Denver really drove the point home for me.

In his keynote, Luke Wroblewski argued for developing for mobile first, desktop second.  In addition to the obvious fact that if you do that your website will work on all devices, mobile first development forces teams to focus on only critical functionality instead of bells and whistles.  This makes everything a bit simpler and more usable. The examples he gives in his presentation really demonstrate the positive impact a mobile first approach can have on a website.

It was also encouraging to hear that mobile is the #1 priority for Drupal 8, which Dries Buytaert talked about with the first keynote of the conference. (more…)

Need to Build a Splash Page in Drupal 7? Get Splashify

A splash page is an interim page on a site that asks a visitor to perform an action, such as making a donation or signing up for an email list, before visiting the page they intended.  While splash pages can be annoying to users, they work.  Given their effectiveness, we end up building splash pages for clients quite frequently in the CMS we specialize in, Drupal.

For Drupal 6 development, there is a module called Splash that we like to use.  The Splash module allows you to designate whether to use a single splash page or rotate through a series of options, set how often users see the pages (daily, weekly, etc.) and to control whether the splash page is shown as a webpage or lightbox.

When Drupal 7 was released a little over a year ago, the Splash module was not upgraded.   This left us in a bit of a bind, as we have transitioned most of our work to Drupal 7 and there wasn’t a simple way to create and manage splash pages.  To rectify the problem, we modified Splash to work with Drupal 7 for internal use, and waited to see if the owners of the modules would release an official Drupal 7 version. 

After many months of waiting, we decided it would be best if we took the reigns ourselves and launched a new splash module for Drupal 7. Over a few months, we put together the code (re-wrote all of it), tested it on our end and made it through the extensive Drupal project approval project process. We named the module Splashify, and it is ready for folks to use.

Splashify not only has all the features the Drupal 6 Splash module has, but it sports a few additional goodies:

  • Mobile Support: Do you not want the splash page to come up on mobile devices? Or maybe you need a custom splash page to come up for mobile devices? In either case, Splashify gives you full control by giving you specific options for mobile devices.
  • Search Engine Friendly: We noticed that with the Drupal 6 Splash module, it often times would end up indexing the splash page as the home page for the site. This is obviously bad for SEO, as you don’t want your home page linked to your splash page in Google. We determined the best way of fixing the problem was to redirect to the splash page through JavaScript. This would make the original home page come up in the search engines, but still show the splash page to site visitors. Problem solved!
  • Customize When the Splash Page Comes Up: The splash page can be configured to show up on a specific page of the site (or pages), or on all pages of the site. For example, this allows the splash page to come up when someone clicks on a link to an interior page from the search engines, if you desire. This gives you full control where the splash page shows up on your website.
  • Colorbox: Splashify supports using the lightbox jQuery plugin “Colorbox”. We found this lightweight lightbox solution to work well across browsers and to be an effective option for displaying a splash page.

The module is still in development, which means we can use help testing the module and making sure all of the major bugs are ironed out. Let us know if there are any features you would like to see in Splashify!