Product visualization made easy with Angular – Duncan Alexander (@hypothete) – github.com/pollinate/HotdogCustomizer

View Github Repository Open presentation in a new window

pollinate

See all presentation from pollinate

Product visualization made easy with Angular – Duncan Alexander (@hypothete) – github.com/pollinate/HotdogCustomizer

0 1

HotdogCustomizer

Visualizer demo

On Github pollinate / HotdogCustomizer

Product visualization made easy with Angular

Duncan Alexander (@hypothete)

github.com/pollinate/HotdogCustomizer

Demo

How do you like your hot dog? rare well done choose an exotic locale: assets/coney-island.jpgassets/ground-zero-pentagon.jpgassets/Swords_of_qadisiyah.jpg add a condiment

Businesses want product customizers

What does our visualization provide?

Instant feedback for the customer

Specifications for the manufacturer

Richer web content

Early attempts

Canvas-based masking

Treat the Canvas as a destination

(most of the time)

SVG as the middleman

SVG paths for colorization canvg combine with all steps do this every time we make a change...

What if...

The SVG was made of directives?

Working with SVG-based directives

Namespace your elements

document.createElementNS('http://www.w3.org/2000/svg', 'svg');

<g> tags are the divs of SVG

Setting up your scope

Bidirectional binding (=) is your new best friend

ngAttr bindings

ngRepeat

Scope IDs will save you headaches

Images are asynchronous

$q.all([ajax requests]).then(function(aggregate){});

Preload your fonts

Still working out font issues in IE

How to know when your visualization has finished

Questions?

Duncan Alexander (@hypothete)

github.com/pollinate/HotdogCustomizer

0