Spreadshirt at 18. it2

On Tuesday (17. May 2011), we, Raik and me, visited the 18. it2 (“18. Industrietag Informationstechnologie”) in Halle, Germany. The program was quite interesting and we heard lots of good presentations. I did my talk about Spreadshirt’s platform architecture for providing Customized Apparel as a Service (CAaaS) at around 5:30 pm. You can see a picture of me and the audience below.

In my talk, I started with a short introduction to Spreadshirt’s platform vision and then got into the details auf our t-shirt designer’s and API architecture. You can click on the image below to see the presentation on slideshare.

It was fun to be at the it2 and we will try to be there next year again.

Cheers,
Martin

Mapping Coordinates from Spreadshirt’s SVG User Coordinate System to your Application’s Coordinate System (API Terminology Explained #10)

In this blog post, I will tell you how to translate product type, product, design and text coordinates correctly from Spreadshirt’s SVG user coordinate system to your application’s coordinate system. You need to understand how the translation works in case you want to display and manipulate Spreadshirt products in your own applications. Please read the Text and Design Positioning Guide to learn more about how to position text and designs on Spreadshirt products. Also read Product Model, ProductType Model, Design Model to learn more about them in case you don’t know already.

Preliminaries

When displaying a Spreadshirt product or creating a new one in your own application, you need to consider different coordinates and sizes from Spreadshirt product types, products, designs and text. The coordinates and sizes to be considered are as follows:

ProductType

  • View size – size of the view, e.g. front, back or left side on a shirt
  • ViewMap offset – position of the print area on the actual view
  • PrintArea size – size of the print area we can print on

Product

  • Configuration offset – position of the actual configuration on the print area

Design

  • Size – actual size of the design

Text

  • Position – start position of the text depending on the given text anchor
  • Font size – size of the font used for the text
  • Text anchor – alignment of the text, e.g. left, center, right

Spreadshirt does all internal calculations in Spreadshirt’s SVG user coordinate system in millimeters right now. That means all coordinates, sizes and font sizes are provided in millimeters! So when displaying a Spreadshirt product in a Web browser or creating a new one, you always need to translate the millimeter coordinates, sizes and font sizes to pixels and vice versa. Continue reading “Mapping Coordinates from Spreadshirt’s SVG User Coordinate System to your Application’s Coordinate System (API Terminology Explained #10)”

Positioning Text and Designs on Product Types (API Terminology Explained #9)

In this blog post, I will tell you more about how to position text and designs on product types using product configurations. To better understand what we discuss here, read the product type model and the product model first. Then have a look at the product model specification and the supported SVG subset specification.

Positioning Basics

So let’s start. We always want to place text or designs on a product type, e.g. a woman’s shirt. A shirt has different views, e.g. front, back or left arm. In our example we use the front view as you can see in the image above. A view has always a width and height, i.e. size, given in millimeter.

...
<view id="1">
   <name>Vorne</name>
   <size unit="mm">
      <width>697.9391560353288</width>
      <height>697.9391560353288</height>
   </size>
   <perspective>front</perspective>
   ...
</view>
...

Continue reading “Positioning Text and Designs on Product Types (API Terminology Explained #9)”

The Print Type Model (API Terminology Explained #8)

In my last blog post about the font model, I told you about how our font model works and how you can use it to display existing or create new products with text. In this blog post, I will tell you more about our print type model.

Understanding the Print Type Model


In our terminology, a print type or printing type basically defines the technology that is used to apply the layers of the selected print colors to a product type, e.g. a t-shirt, the appearance of the applied colors, e.g. smooth, velvety or pattern, and the colors that can be used for printing. The most common print types flock, flex, special flex and digital printing are illustrated in the picture above.

The common print types can be described as follows:

  • Flock Printing: For flock printing, a computerised blade is used to slice designs out of a soft, velvety material. Using high pressure and temperatures, this design is then pressed onto the fabric.
  • Flex Printing: With flex printing, a large computerised blade is used to cut designs out of a smooth, thin material. This design is then pressed onto the fabric, using high pressure and temperatures.
  • Special Flex Printing: With special flex printing, a large computerised blade is used to cut designs out of a smooth, thin material. This design is then pressed onto the fabric, using high pressure and temperatures.
  • Digital Printing: The colours are printed directly onto the material with a special ink-jet printer. The print places a very thin and soft layer over the material. When printing onto dark-coloured t-shirts, a thin layer of white is applied as a primer before the full design is printed.

A print type has the following characteristics:

  • Core Data: Each print type has right now the following core data: name, description, size, dpi, price and restrictions.
    Name
    and description can be used to display print type information in applications.
    The size defines the maximum size in which one color layer of a design or text can be printed on a product type in millimeter. The dpi attribute tells you with how many dpis the design or text will be printed on the product type, finally.
    The price contains the price of the print type in the currency of the shop that must be payed when using the print type in your product configurations.
    Finally, the restrictions information tell you about general print type restrictions and about restrictions when using the print type in combination with other print types.
    General print type restriction attributes are for example colorSpace, whiteSupported and transparencySupported. The colorSpace tells you about the color space used by this print type. This can be print_colors if only special colors defined for this print type can be used, e.g. for flex and flock printing, rgb if all colors in rgb color space can be used, e.g. for digital printing, or cmyk if all colors in cmyk color space can be used. WhiteSupported and transparencySupported tell you whether transpareny and white color can be printed with this print type.
    Print type restrictions required when using combinations of print types on a product type are maxPrintColorLayers, printableAlongWithPrintTypes and printableAbovePrintTypes. The maxPrintColorLayers attribute defines how many print color layers can be printed above each other when this print type is involved. PrintableAlongWithPrintTypes and printableAbovePrintTypes tells you which print types can be combined in general and which print types can be printed above each other, when printing text over a design for example.
  • Colors: Each print type that uses the print_colors color space also defines one or more colors. Each color has the following data: name, price, resources, fill and restrictions.
    The name attribute contains the name of the print color and can be used for displaying purposes. The price tells you how much the usage of this print color costs.  Fill and resources data can be used for displaying print color panels as well as text and design layers in the print color in your application. While the resources data contains a URL that points to a print color image, e.g. a special flex print color image, the fill attribute contains an rgb hex value that matches the print color image as best as possible. Use the fill data to display text and design layers with the defined color in your applications.
    The restrictions data of a color is basically the printableAbovePrintColors list that defines which other print colors can be printed above this print color.

Continue reading “The Print Type Model (API Terminology Explained #8)”

The Font Model (API Terminology Explained #7)

In my last blog posts, I told you about the essential models you need to understand in order to be able to display existing or create new products and allow your customers to buy them using our checkout. In the next blog posts of the series “API Terminology Explained”, I want to go a bit more into the details and tell you about our font and print type model as well as about how to position text and design on product types and how to calculate product prices. I will  start with the font model in this blog post.

Understanding the Font Model

In our terminology, a font family is a grouping of similar fonts that basically differ in their shape, i.e. regular, bold or italic. A typical font family, e.g. Arial, is illustrated in the picture above. A font family has right now the following characteristics:

  • Core Data: Each font family has a name, a deprecated attribute and a list of allowed print types.
    The  deprecated attribute indicates whether a font is outdated. If a font is outdated it can be used for displaying existing products and render product images but not for creating new products.
    The list of allowed print types contains those print types that allow to print text and use fonts from the font family therefore.
  • Fonts: Each font family also has a list of one or more fonts that belong to one font group, e.g. Arial. The fonts basically differ in their shape, e.g. regular, bold, italic.  A font therefore has a name, a style, a weight and a minimalSize attribute and a list of resources.
    The name is usually used to address a font when displaying existing products or creating new ones.
    Style and weight attribute indicate which special shape shall be used. Thereby, the style can contain values like normal (aka regular) or italic and the weight attribute values like normal (aka regular) or bold. All 4 combinations of the values are allowed.
    The minimalSize attribute defines the minimum size in which this font can be printed on apparel. This value is checked when creating new products.
    The list of resources contains links to the actual font assets required to render fonts in an Adobe Flash/Flex or Javascript application. Right now, we only provide font data in swf format for Flash/Flex applications.

Continue reading “The Font Model (API Terminology Explained #7)”

Grails plugin version 0.4 released

The days after the holidays have been rather quite so I could find some time to put effort in more Plugin features and to release a new version.

What’s new within version 0.4:

  • Create, retrieve, update and delete Baskets and BasketItems
  • Create, update and delete Designs including easy Design upload
  • Several bugfixes though more comprehensive test coverage

These are the first Plugin features that require a valid API key. Here’s how to configure it well.

Wish y’all a Happy New Year!

You link it, we print it! – Putting Photos on T-Shirts using Simplomat and Spreadshirt API

“You link it, we print it!” is not our new slogan. But those of you who are with Spreadshirt for a while might remember one of the old slogans we had: “You think it, we print it!”. I did my own intepretation of that and wrote a Simplomat demo that shows what I mean.

The Simplomat is a Javascript abstraction layer and simple Javascript shirt designer for Spreadshirt API v1. It is open source and available at SourceForge. In my last blog post “Putting News Headlines on T-Shirts is Easy as Pie”, I already described how easy it is to use the Simplomat to put news headlines on shirts.

What does “You link it, we print it!” mean?

In my interpretation, “you link it” means, you give the Simplomat a Web URL that points to an arbitrary pixel image (gif, png, jpg). The image is ideally the result of your own work and reflects what you thought of (“You think it …”). The Simplomat will load that image automatically and render it on the selected product type. It also allows to rotate, zoom and move the added image.

“We print it” means that when you click on “buy now!”, the Simplomat will submit the created product with the design automatically to Spreadshirt using our API and after you got through the checkout, we will print the design on the t-shirt and send it to you. Isn’t that simple?

Continue reading “You link it, we print it! – Putting Photos on T-Shirts using Simplomat and Spreadshirt API”

Spreadshirt at Barcamp 8 London

This weekend (13.-14. November 2010), we, Kate and me, attended  barcamp 8 in London. Being the sponsor of the barcamp’s shirts, it was interesting to see how people liked their shirts as well as what they put on their shirts. As far as I could see, people really liked them and put all kinds of crazy stuff on them – from things in braille font to lots of text with special flex and other crazy things.

As barcamp 8 also calls itself the “unconference for designers, developers and geeks of all types” with lots of IT related people there, I did my presentation on “Realizing your Ideas around Customized Apparel using Spreadshirt’s API” at around 4:10 pm in the afternoon. I had about 12 people attending my presentation (of about 150-200 people being there), with some of them being really interested in the topic. In advance, I asked
people about what they would like to know about Spreadshirt or Spreadshirt API. Interests
where very different. One guy wanted to know how he can earn money using Spreadshirt. Another guy was really interested in what products and integrations people are looking for wanting to use Spreadshirt for creating, selling and promoting customized apparel, e.g. WordPress integration, Facebook integration, white label fulfillment. Other people wanted to know more about the technical details and how they can make use of the API. And one guy wanted to know about the secret sauce behind Spreadshirt – which was apparently a question about how this mass customization thing works in the background. Continue reading “Spreadshirt at Barcamp 8 London”

Grails Plugin Version 0.3 released

For an internal project which transforms shop data into a format that’s readable by Amazon Selling Central I had to quickly add some core API features to the Spreadshirt Grails Plugin that weren’t available yet. Beyond that – I have to admit – there were a couple of bugs within the latest version (o.2) which have also been fixed.

These new features and bugfixes are now available via Grails Plugin Repository as Plugin Version 0.3:

Continue reading “Grails Plugin Version 0.3 released”