Building A Tshirt Designer Application (works in progress)

I was given the task to build a t-shirt designer application in HTML, CSS, JS and PHP.

There are a few out of the box solutions available for this but the main issue is to be able to generate the final designs that are ready for print in a format that the client can feed straight to the printer. And we are not talking about a regular printing press. These designs are iron on based designs. The printer takes in a coloured sheet and cuts out the clipart and text (like stencil). So I decided to build everything from scratch. This way, I’ll have the maximum freedom in-terms of how everything would tie together and not waste time on trying to understand someone else’s code.

Client Requirements

Customers should be able to:

  • Select from a range of vector clipart (sorted into different categories)
  • Change the colour of the clipart.
  • Add text to the shirt (3 lines maximum with character limitation)
  • Change text colour, font and size.
  • Place an order, checkout … yada yada

Client (website owner) should be able to:

  • Receive the the design generated by the customer as a print ready file (PDF or EPS)
  • These PDF or EPS files should be saved and organized on server based on the date or the order and the colour of the clipart. It is important for the client to sort customer generated designs by colour so they can process all same colour designs on a single sheet. E.g. they would put all red coloured clip art on the red sheet. That way, they will be able to save printing costs.

Approach

So here is the general idea and steps:

  1. The customer selects a piece of clipart (SVG) that they want on their shirt
  2. On the next screen, they select the colour of the clip art, place text, its colour and font.
  3. Place order. The final design PDF gets saved on the server with a notification sent to the website sales rep.

Front-End

I have built a very basic front-end t-shirt designer for testing purposes. I chose Twitter Bootstrap as my basic UI framework (which is excellent for rapid prototyping).

The first step is to present the customer with a selection of clipart.

selecting-clipart-step1

When the user selects a clipart, it goes the next step carrying the path of the SVG clipart as a PHP GET variable.

<a href="index-step2.php?clipart_src=img/clipart/image1.svg">
<img class="clipart-item" width="100" src="img/clipart/image1.svg" id="image1" />
</a>

Now we have the SVG loaded in a div to work with.

Tshirt-application-step2

Using jQuery .css() function, the user can change the fill colour of the SVG. In addition to applying the fill as css, I found that it was a good idea to apply the fill as the tag attribute as well. Applying fill only via CSS may result in inconsistent results later when we try to process the SVG in PDF.

$(".tshirt-clipart svg path").css("fill", selected_color_art);
$(".tshirt-clipart svg path").attr("fill", selected_color_art);

The text is placed on the design using the jQuery .html() function. This simply sets the text in the div which is properly positioned on the t-shirt mockup. The text colour, font and size is changed via jQuery .css() functions.

Back-End

Now this is the crucial part. We have setup our SVG and text on the client-side  and its time to take it to server side where we can take this information and create the desired PDF. When the customer clicks on the submit button, the following happens:

  1. The SVG code is converted to a data string and sent to server as a POST variable (you must be wondering why I did it this way … more on this later).
  2. The text, its colour, size and font information is also sent to server as a POST variable.
  3. The server side PHP grabs all this information as $_POST variables and begins setting up the PDF.

For PDF generation, I have chosen tcpdf. I have worked with html2pdf before but I really love the tcpdf library as well. I think its quite flexible when it comes to setting up various kinds of content such as HTML/CSS and ability to bring in vector files such as SVG, EPS and even custom TTF font files.

After setting up the basic tcpdf parameters, its time to populate our design on the PDF.

First up, the SVG.  As I mentioned earlier, I am sending the SVG to server side as data string. The other way would be pass the SVG file path and load it using the tcpdf ImageSVG() function. But, that will load the SVG which does not have the colour changes applied by the customer on the front-end. So, using the customer generated SVG saved me a lot of trouble otherwise I would have to use another PHP SVG library (such as ImageMagick) to apply the colour changes (PHP or tcpdf does not have in-built functions to manipulate SVG colours). ImageSVG() accepts the SVG as either a direct path to the SVG file or as a data string. SVG data string is simply the HTML SVG code that starts with <svg> and ends with </svg>. Below is an example of printing the SVG on the PDF canvas.

$pdf->ImageSVG('@'.trim(stripslashes($_POST['svg'])), $x=0, $y=0, $w='220', $h='110', $link='', $align='T', $palign='C', $border=0, $fitonpage=false);

A few things to note here:

  • The stripslashes() PHP function is used to take out character escaping. If you don’t do this, you will get an error.
  • The trim() PHP function removes the whitespace from the start and end of SVG.
  • The ‘@’ in the beginning of the SVG is a syntax requirement as per tcpdf documentation.

Putting text up is very simple as well. I used the writeHTMLCell() to print the text.

// Setting HTML content
$html = <<<EOD
<p style="text-align:center; font-size:{$font_size}px; line-height:1em; color:{$_POST['text_color']}">{$_POST['line1']}<br>{$_POST['line2']}<br>{$_POST['line3']}</p>
EOD;
// Print text using writeHTMLCell()
$pdf->writeHTMLCell(0, 0, '', '110', $html, 0, 1, 0, true, '', true);

And from there, you go ahead and save your pdf using the tcpdf Output() function.

tshit-app-pdf

A note about using SVG files generated from Adobe Illustrator or alike

Its possible that Illustrator or similar programs will append <xml> or other tags before the actual <svg> tag. You need to get those removed from the SVG or you will get errors when you supply tcpdf with the SVG as a data string. I wasted countless hours on figuring out why I was getting parsing errors and this turned out to be the culprit. Just open your SVG in a text editor and delete anything before the <svg> tag.

A note about using external fonts with tcpdf

You might also get TTF parsing errors if you supply tcpdf with an external TTF font file. To solve this problem, I converted my fonts from .ttf to .php and .z format using this site. The converted fonts worked fine.

This is just the beginning

You might be thinking “oh, why didn’t you do it like this … or that” and you are right. I know, there are better ways out there. This was only to test of I can create the PDF in a format which is completely vector in nature and is print-ready (provided the given circumstances and printing process limitations). Once the basics are sorted out, I will be off to building a proper user-interface with more editing options and bind it with an ecommerce platform like Magento for handling orders and payments. So, more is coming on this topic 🙂

Thanks for reading!