CodablePPTX Tutorial

A tutorial of CodablePPTX, which is a tool to generate a PowerPoint Presentation from YAML specification. This tutorial itself is also made with CodablePPTX.

Transcript

1. CodablePPTX Tutorial
2. What is CodablePPTX? A tool to generate a Powerpoint presentation file (.pptx) from a YAML specification 2
3. Sample Input slides.yaml slides: - text: - frame: x: [20, 70] y: [40, 60] value: Hello, world! valign: middle halign: center - title: - frame: x: [5, 95] y: [5, 15] fontsize: 40 value: A slide with an image image: - frame: x: [5, 95] y: [20, 90] aspect: fit file: boy.png 3
4. Hello, world!
5. A slide with an image
6. GitHub Repository Download it from https://github.com/liwii/CodablePPTX 6
7. Template Formats
8. Template Sections slides import A list of slide objects in the presentation A list of layout files (stay tuned for more details) which are used in the presentation 8
9. Sample Input slides.yaml layouts.yaml import: - layouts.yaml slides: - theme: title_center title: - Hello, world! layouts: - id: title_center title: - frame: x: [5, 95] y: [18, 48] fontsize: 60 fontcolor: "#E65100" valign: bottom halign: center shape: - frame: x: [5, 95] y: [49.9, 50.1] type: rectangle color: "#FF9100" 9
10. Hello, world!
11. Slide Object An object which represents a slide in the presentation. Each slide object is converted into a sigle slide. 11
12. Slide Object: Properties text, title, subtitle: optional image: optional A list of text objects on the slide. You can use different properties (text, title, subtitle) to emphesize the different roles of the text objects. A list of image objects on the slide. 12
13. Slide Object: Properties shape: optional pagenum: optional A list of shape objects on the slide. A list of pagenum objects on the slide. 13
14. Slide Object: Properties vstack: optional hstack: optional theme: optional A list of horizontal stack objects on the slide. A list of vertical stack objects on the slide. An id of a layout object (stay tuned for more details) which is applied to the slide. 14
15. Text Object An object which represents a text box on the slide. 15
16. Text Object: Properties value: optional frame: required The text of the textbox. If you do not specify any "value", a blank text box is put on the slide. Specifies the position of the text frame with relative coordinates of the 4 corners. A whole slide corresponds to a frame: x: [0, 100] y: [0, 100] 16
17. Sample Input slides.yaml slides: - text: - frame: x: [10, 30] y: [10, 20] value: Top-Left - frame: x: [70, 90] y: [80, 90] value: Bottom-Right 17
18. Top-Left Bottom-Right
19. Text Object: Properties font: optional (default: Arial) fontsize: optional (default: 26) fontcolor: optional (default: "#4D4D4D") Specifies the font of the text in the textbox. Specifies the size of the text in the textbox with pt (points). Specifies the color of the text in the textbox with Hex color codes. 19
20. Sample Input slides.yaml slides: - title: - frame: x: [10, 90] y: [10, 40] value: Red Papyrus 42pt fontcolor: "#FF0000" font: Papyrus fontsize: 42 20
21. Red Papyrus 42pt
22. Text Object: Properties valign: optional (default: top) halign: optional (default: left) Specifies the vertical alignment of the text. 3 options are available: top, middle and bottom. Specifies the horizontal alignment of the text. 3 options are available: left, center and right. 22
23. Sample Input slides.yaml slides: - text: - frame: x: [5, 95] y: [10, 90] valign: bottom halign: left value: Bottom-Left - frame: x: [5, 95] y: [10, 90] valign: middle halign: center value: Middle-Center - frame: x: [5, 95] y: [10, 90] valign: top halign: right value: Top-Right 23
24. Bottom-Left Middle-Center
25. Image Object An object which represents an image on the slide. 25
26. Image Object: Properties frame: required file: required aspect: optional (default: fill) Same as the one in text objects Specifies a location of an image file Specifies the method to fill the frame. 2 options are available: fit and fill. 26
27. Sample Input slides.yaml slides: - image: - file: boy.png frame: x: [30, 50] y: [10, 90] aspect: fit - file: girl.png frame: x: [50, 70] y: [10, 90] aspect: fill 27
29. Shape Object An object which represents a basic shape such as a rectangle. 29
30. Shape Object: Properties frame: required color: required type: optional (default: rectangle) Same as the one in text objects Specifies the color of the shape with Hex color codes. Specifies the type of the shape. 2 options are available: rectangle and rounded_rectangle 30
31. Sample Input slides.yaml slides: - shape: - frame: x: [10, 20] y: [30, 40] type: rectangle color: "#F32245" - frame: x: [50, 55] y: [70, 90] type: rounded_rectangle color: "#45F322" 31
33. Pagenum Object A variant of the text object. It has the same properties as a text object has, but 'value' is automatically replaced by the page number of the slide. 33
34. Sample Input slides.yaml slides: - pagenum: - frame: x: [40, 60] y: [40, 60] valign: middle halign: center - pagenum: - frame: x: [40, 60] y: [40, 60] valign: middle halign: center 34
37. Stack Object (hstack or vstack) An object to put one kind of objects repeatedly in horizontal or vertical direction. It divides the frame of itself evenly and allocate to each child element. 37
38. Stack Object: properties frame: required margin: required The frame of the stack object itself. It is dividedly in horizontal direction if the object is a hstack, and in vertical ditection if it is vstack, then allocated to each child element. Relative size of margins between each child element. "margin: 100" is the height or width of a whole slide. 38
39. Stack Object: properties template: required type: required text, title, subtitle, image, shape, pagenum, vstack, hstack: optional A layout (stay tuned for more details) which is applied to all children elements. The type of the children. A list of children objects. You can use only one property among the list. Frames are allocated to the children so that all objects fit in to the frame of the stack, so you don't have to specify the frames of the children. 39
40. Sample Input slides.yaml slides: - hstack: - frame: x: [20, 80] y: [30, 70] type: shape margin: 1 template: type: rectangle shape: - color: "#FF3333" - color: "#33FF33" - color: "#FF3333" - hstack: - frame: x: [20, 80] y: [30, 70] type: shape margin: 1 template: type: rectangle shape: - color: "#FF3333" - color: "#33FF33" - color: "#FF3333" - color: "#33FF33" - color: "#FF3333" 40
43. Sample Input slides.yaml slides: - title: - value: Nested stacks frame: x: [20, 80] y: [10, 20] vstack: - frame: x: [20, 80] y: [30, 70] type: hstack margin: 1 template: type: shape template: type: rectangle margin: 1 hstack: - shape: - color: "#FF3333" - color: "#33FF33" - color: "#FF3333" - shape: - color: "#33FF33" - color: "#FF3333" - color: "#33FF33" 43
44. Nested stacks
45. Template Formats (Layout Files)
46. What is a layout file? A layout file is a file which includes frequently used patterns of slides (layouts). By using layout files effectively, you can easily generate a bunch of similar slides. 46
47. Template Sections (Layout Files) layouts masters A list of layout objects. A list of master objects (stay tuned for more details). 47
48. Layout Object A set of objects on a slide. If you apply a layout to a slide by 'theme' property of the slide, all the elements on the layout are inherited by the slide. 48
49. Layout Object: Properties id: required text, title, subtitle, image, shape, pagenum: optional An identifier of the layout. Almost the same as the ones in slides. In layouts, you can specify "fixed" property (stay tuned for more details). 49
50. Layout Object: Properties vstack, hstack: optional master: optional A list of vstack and hstack objects. In layouts, you cannot specify the children. An id of a master object (stay tuned for more details) which is applied to the slide. 50
51. Sample Input slides.yaml layouts.yaml import: - layouts.yaml slides: - theme: rectangle text: - frame: x: [5, 95] y: [10, 20] value: This is a rectangle - theme: rectangle text: - frame: x: [5, 95] y: [80, 90] value: This is also a rectangle layouts: - id: rectangle shape: - frame: x: [5, 95] y: [20, 80] type: rectangle color: "#DDDDDD" 51
52. This is a rectangle
53. This is also a rectangle
54. Tips: Override You can override properties of objects on a layout by properties of corresponding objects on a slide. 54
55. Sample Input slides.yaml layouts.yaml import: - layouts.yaml slides: - theme: normal title: - value: Orange title fontcolor: "#E65100" text: - value: text text text layouts: - id: normal title: - frame: x: [5, 95] y: [5, 15] fontsize: 40 value: Add title here text: - frame: x: [5, 95] y: [20, 90] value: Add text here 55
56. Orange title text text text
57. Tips: Implicit conversion from a string If you put a string to a place where an object should come, the string is converted to { value: "THE STRING" } or { file: "THE STRING" } automatically. 57
58. Sample Input slides.yaml layouts.yaml import: - layouts.yaml slides: - theme: normal title: - value: Same slides text: - value: These two slides are the same - theme: normal title: - Same slides text: - These two slides are the same layouts: - id: normal title: - frame: x: [5, 95] y: [5, 15] fontsize: 40 value: Add title here text: - frame: x: [5, 95] y: [20, 90] value: Add text here 58
59. Same slides These two slides are the same
60. Same slides These two slides are the same
61. Sample Input slides.yaml layouts.yaml import: - layouts.yaml slides: - theme: grid_image vstack: - hstack: - image: - boy.png - girl.png - boy.png - image: - girl.png - boy.png - girl.png - image: - boy.png - girl.png - boy.png layouts: - id: grid_image vstack: - frame: x: [5, 95] y: [20, 90] margin: 0 type: hstack template: margin: 0 type: image template: aspect: fit 61
63. Tips: fixed If you add "fixed: true" to an object in layouts, the properties of the object cannot be overriden in slides. 63
64. Sample Input slides.yaml layouts.yaml import: - layouts.yaml slides: - theme: boy image: - frame: x: [20, 40] y: [30, 70] file: girl.png - theme: boy_fixed image: - frame: x: [20, 40] y: [30, 70] file: girl.png layouts: - id: boy image: - frame: x: [40, 60] y: [30, 70] file: boy.png - id: boy_fixed image: - frame: x: [40, 60] y: [30, 70] file: boy.png fixed: true 64
67. Master Object A set of objects on a layout. If you apply a master to a layout by 'master' property of the layout, all the elements on the master are inherited by the layout. The objects in the master cannot be overriden in the layouts. The objects are added to the heads of the lists in the layout, so you can override them from a slide. 67
68. Master Object: Properties id: required text, title, subtitle, image, shape, pagenum: optional An identifier of the master. Almost the same as the ones in layouts. 68
69. Text Box This is a text box 69
70. A boy 70
71. GitHub Repository Download it from https://github.com/liwii/CodablePPTX 71