PHP & SVG Templates: Instant Docs

Transcript

1. INSTANT DOCS PHP & SVG TEMPLATES

2. SINGLE PAGE DOCUMENTS Certificate Receipt Invoice

3. TOOLS FPDF ▸ Supports image, links, lines and page breaks,

   header and footer management, true type and type1 fonts and requires no extensions ▸ Line by line drawing with blind positioning ▸ Complex and dated API ▸ Page format, margins and measure are of your concern ▸ Really slow template design ▸ Really slow rendering for complex designs

4. TOOLS FPDF+FPDI ▸ Supports image, links, lines and page breaks,

   header and footer management, True Type and Type1 fonts and requires no extensions ▸ Fast templates using PDF ▸ Complex and dated API ▸ Page format, margins and measure are still on you

5. TOOLS WKHTMLTOPDF ▸ Supports image and links ▸ No line

   control, no header or footer management ▸ You may user any web font ▸ HTML+CSS ▸ Inconsistent media metrics (screen vs. paper) ▸ Paper size, margins and page breaks are on you

6. TOOLS SVG ▸ Vectors in a XML file ▸ Tons

   of desktop publishing tools ▸ Page attributes are managed by your publishing tool ▸ Supports bitmap images (which are kept base64 encoded) ▸ Supports multiple: fonts, encodings, languages and alphabets (including bi-di fonts) ▸ Dazzling light and fast ▸ No multipage support

7. EXAMPLE SIMPLE CIRCLE <g id=“some-layer"> <circle r="200" cy="500" cx="400" id=“my-circle“

   style="opacity:1;fill:#ff5792;fill-opacity:1;stroke:none"> </g>

8. EXAMPLE SIMPLE CIRCLE <g id=“some-layer"> <circle r="250" cy="500" cx="400" id=“my-circle“

   style="opacity:1;fill:#ff5792;fill-opacity:1;stroke:none"> </g>

9. EXAMPLE SIMPLE CIRCLE <g id=“some-layer"> <circle r="100" cy="500" cx="400" id=“my-circle“

   style="opacity:1;fill:#ff5792;fill-opacity:1;stroke:none"> </g>

10. HOW IS THAT GOING TO HELP ME WITH MY REALLY

    SPLENDID TEMPLATE? YOU, PROBABLY TEXTO

11. {{ NAME }} PLACEHOLDERS

12. PIECE OF CAKE SIMPLE PARSER 1 <?php 2 3 $template

    = file_get_contents('template.svg'); 4 $template = str_replace('{{name}}', 'Mr. Robot', $template); 5 file_put_contents('doc.svg', $template);

13. PIECE OF CAKE MULTIPLE VARS 1 <?php 2 3 $varset

    = array( 4 '{{name}}' => 'Mr. Robot', 5 '{{realName}}' => 'Christian Slater' 6 ); 7 8 $template = file_get_contents('template.svg'); 9 10 foreach ($varset as $key => $value) { 11 $template = str_replace($key, $value, $template); 12 } 13 14 file_put_contents('doc.svg', $template);

14. WHAT ELSE? ASTONISHING GRAPHS ▸ Dinamically Generated ▸ Pixel Perfect

    Design ▸ Image Effects ▸ Fonts of Choice ▸ Mixed Bitmaps

15. WHAT ELSE? PARTIALS ▸ Design once ▸ Infinite partial files

    ▸ Run-time include ▸ Add as many as needed ▸ Configure each object ▸ Change colors as needed ▸ Strech, Resize & Skew

16. WHAT ELSE? PARTIALS ▸ Design once ▸ Infinite partial files

    ▸ Run-time include ▸ Add as many as needed ▸ Configure each object ▸ Change colors as needed ▸ Strech, Resize & Skew

17. WHAT ELSE? PARTIALS ▸ Design once ▸ Infinite partial files

    ▸ Run-time include ▸ Add as many as needed ▸ Configure each object ▸ Change colors as needed ▸ Strech, Resize & Skew COMIC CORN PARTIAL

18. PDF PARSING INTO

19. PARSING INTO PDF LIBRSVG $ sudo apt install librsvg2-bin $

    rsvg-convert -f pdf -o doc.pdf doc.svg

20. PARSING INTO PDF LIBRSVG 1 <?php 2 3 $varset =

    array( 4 '{{name}}' => 'Mr. Robot', 5 '{{realName}}' => 'Christian Slater' 6 ); 7 8 $template = file_get_contents('template.svg'); 9 10 foreach ($varset as $key => $value) { 11 $template = str_replace($key, $value, $template); 12 } 13 14 file_put_contents('doc.svg', $template); 15 `rsvg-convert -f pdf -o doc.pdf doc.svg`;

21. PARSING INTO PDF INKSCAPE $ sudo apt-get install inkscape $

    inkscape doc.svg --export-pdf=doc.pdf

22. PARSING INTO PDF INKSCAPE 1 <?php 2 3 $varset =

    array( 4 '{{name}}' => 'Mr. Robot', 5 '{{realName}}' => 'Christian Slater' 6 ); 7 8 $template = file_get_contents('template.svg'); 9 10 foreach ($varset as $key => $value) { 11 $template = str_replace($key, $value, $template); 12 } 13 14 file_put_contents('doc.svg', $template); 15 `inkscape doc.svg --export-pdf=doc.pdf`;

23. PAGES DOCS WITH MULTIPLE

24. DOCS WITH MULTIPLE PAGES THE GLUE $ sudo apt-get install

    pdftk $ pdftk *.pdf cat output doc.pdf

25. PARSING INTO PDF PDFTK 1 <?php 2 3 $varset =

    array(…); 8 $page = 1; 9 10 while (file_exists("template_page_{$page}.svg")) { 11 $template = file_get_contents("template_page_{$page}.svg"); 12 13 foreach ($varset as $key => $value) { 14 $template = str_replace($key, $value, $template); 15 } 16 17 file_put_contents('doc.svg', $template); 18 `inkscape doc.svg --export-pdf=doc_page_{$page}.pdf`; 19 $page++; 20 } 21 `pdftk doc_page_*.pdf cat output doc.pdf`

26. DOCS WITH MULTIPLE PAGES DON’T FORGET TO CLEAN UP $

    rm doc_page_*.pdf $ rm doc.svg

27. COMPLEX LET’S GET A LITTLE MORE

28. LET’S GET A LITTLE MORE COMPLEX PARTIAL GRAPH <g id="graph">

    <path style="opacity:1;fill:#eacf5e;fill-opacity:1" d="m 123.08957,203.14072 (…) 4.16357,-3.64112 z" /> <path style="opacity:1;fill:#748cb2;fill-opacity:1" d="m 123.15627,203.14123 (…) -7.10603,-4.2013 z" /> <path style="opacity:1;fill:#9cc677;fill-opacity:1" d="m 130.29744,207.39937 (…) -1.01079,-3.9424 z" /> </g>

29. LET’S GET A LITTLE MORE COMPLEX PARTIAL GRAPH <g id="graph">

    <path style="opacity:1;fill:#eacf5e;fill-opacity:1" d="m 123.08957,203.14072 (…) 4.16357,-3.64112 z" /> <path style="opacity:1;fill:#748cb2;fill-opacity:1" d="m 123.15627,203.14123 (…) -7.10603,-4.2013 z" /> <path style="opacity:1;fill:#9cc677;fill-opacity:1" d="m 130.29744,207.39937 (…) -1.01079,-3.9424 z" /> </g>

30. LET’S GET A LITTLE MORE COMPLEX CREATE DASHBOARDS & REPORTS

31. GOT APPS? NOT EVERYTHING NEEDS PAPER

32. NOT EVERYTHING NEEDS PAPER. GOT APPS? CREATE COMPLEX DASHBOARDS AND

    APPS

33. ANIMATED LET’S GET

34. None
35. None

36. THANK YOU! FOLLOW ME AROUND: @RAMCOELHO speakerdeck.com/ramcoelho

37. {{QUESTION}}? FOLLOW ME AROUND: @RAMCOELHO speakerdeck.com/ramcoelho