Concept Print L&L

Talk.md

Concept Print L & L

Overview

http://conceptprint.com/

http://www.neue.no/

Simple, minimalist design that focuses on the product. Shouldn't look like this: https://www.zazzle.com/create_your_own_paper_cup-256219456465905357

Heavily compared to https://www.lumi.com/make/editor?product=corrugated-mailer-boxes&sku=d4a269f396

https://beta.templi.com/

• Templi name
• Fast color changes
• Inline Resizing
• Rotation
• White background removal
• Simple Artwork upload
• Template upload

Tech Stack

First question we had to answer... "How do we do renders?"

Server or client?

Server:

• Consistent across browsers
• Can reuse for thumbnails
• Can use more powerful libraries
• Slow and Clunky

Client:

• Uncharted water, not many people do this. Lumi does this with simple 2D SVG transforms, but we need to wrap artwork around cups, in 3D!
• If you are rendering client side, how do you get a thumbnail for later use if it's not all one solid image?
• Browser consistency?
• x10 user experience

Solution:

• Transparent images for color changes
• Three.js for renders

Three.js rendering

https://threejs.org/ - JS library on top of WebGL

window._test_3D.show3D()

Approach:

1. Create 3D model which matches product image exactly in Blender, saved as JSON
2. Import that 3D model into THREE.js as a "geometry"
3. Apply the users artwork as a "texture"
4. "UV Map" determines HOW artwork is applied to the geometry
5. "Model" file with camera tweaks, etc. to line up 3D with image

• Built 3D models in Blender, to match product images: https://github.com/shiftlab/concept-print-3d-models
• Process video

Template upload handling

Simple vs Template uploads -- Solved with UV Maps

Thumbnailing

• Screenshot URLs
• URLBox + Sidekiq
• https://beta.templi.com/project-item-thumbnail/c7f4f931-8f75-4314-ad56-549ba7929968?version=1
• UUID in url
• version cache buster

https://docs.google.com/drawings/d/13NgbVeqnrHw3SLs7wAXT_UsYIcPfLFGbe9b8MfYt2vQ/edit

Image transformations (I.e., dealing with the shortcomings of Imgix)

Original idea for approach... any transformations we needed to do, like artwork color changing, removing white from images, resizing, and format changes, would be done via imgix.

Things we found it does well:

• Actually converts PDF and AI to PNG images, which we can easily use for renders.
• Resizing

Things we couldn't do:

• Any sort of transforms OR resizing on SVG images
• Removing white backgrounds
• Changing colors within the image
• Hiding layers inside of templates

Had to introduce Imagemagick. We have to do white background removal + changing image formats as a pre-upload to S3 task.

Cloudinary could actually accomplish all of these things we think for a purely api based approach.

Heroku Workflow

• Pipeline
  • Review Apps
  • Auto deploy to staging
  • Promote to production
• Run migrations on deploy
• Building JS on deploy

Spree

• Super standard checkout flow
  • Doesn't use jquery
  • Vue.js help here?
• Customizations
  • Line Item statuses with emails
  • Volume pricing: https://github.com/shiftlab/concept-print/commit/d0621f1466ad1cd775ffbfaa13e817f77a5fb34b.
    • Override Spree to use "volume price" field instead of price everywhere, can't update via Spree admin
  • Spree can't handle large quantities
  • Creating 30,000 InventoryUnit records is asinine
  • Have to butcher Spree to stop this - Have to change Spree to only ever use 1 InventoryUnit - Have to disable shipment splitting - "Fix" for this in latest Spree: spree/spree#8228
  • Can't REALLY turn off inventory tracking
  • Each product is heavily custom, can do very little product management through Spree

Performance

https://www.webpagetest.org/result/170918_FR_3faad9b9a948be0e551145d26ee18876/