Skip to content

Commit

Permalink
Version 1.1.6 - Adds support for Issue #22 and Issue #25.
Browse files Browse the repository at this point in the history
  • Loading branch information
GitBrent authored and GitBrent committed Jan 19, 2017
1 parent c60c2e5 commit 837e2e9
Show file tree
Hide file tree
Showing 8 changed files with 188 additions and 145 deletions.
13 changes: 10 additions & 3 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,20 @@
# Change Log

## [v1.1.5](https://github.com/gitbrent/pptxgenjs/tree/v1.1.4) (2017-01-17)
[Full Changelog](https://github.com/gitbrent/pptxgenjs/compare/v1.1.3...v1.1.5)
## [v1.1.6](https://github.com/gitbrent/pptxgenjs/tree/v1.1.6) (2017-01-19)
[Full Changelog](https://github.com/gitbrent/pptxgenjs/compare/v1.1.5...v1.1.6)

**Implemented Enhancements:**
- Support for animated GIFs in `addImage()` [\#22](https://github.com/gitbrent/PptxGenJS/issues/22) ([shashank2104](https://github.com/shashank2104))
- Added new `slideNumber` option allowing `x` and `y` placement of slide number [\#25](https://github.com/gitbrent/PptxGenJS/issues/25) ([priyaraskar](https://github.com/priyaraskar))

## [v1.1.5](https://github.com/gitbrent/pptxgenjs/tree/v1.1.5) (2017-01-17)
[Full Changelog](https://github.com/gitbrent/pptxgenjs/compare/v1.1.4...v1.1.5)

**Fixed Bugs:**
- Trouble running in NW.js [\#19](https://github.com/gitbrent/PptxGenJS/issues/19) ([GregReser](https://github.com/GregReser))
- Supported usage via node program instead of HTML [\#23](https://github.com/gitbrent/PptxGenJS/issues/23) ([parsleyt](https://github.com/parsleyt))

## [v1.1.4](https://github.com/gitbrent/pptxgenjs/tree/v1.1.3) (2017-01-04)
## [v1.1.4](https://github.com/gitbrent/pptxgenjs/tree/v1.1.4) (2017-01-04)
[Full Changelog](https://github.com/gitbrent/pptxgenjs/compare/v1.1.3...v1.1.4)

**Fixed Bugs:**
Expand Down
195 changes: 109 additions & 86 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,14 @@ an HTML Table across one or more Slides with a single command.
- [Client-Side](#client-side)
- [Node.js (4.x and later)](#nodejs-4x-and-later)
- [Optional Library Files](#optional-library-files)
- [Creating a Presentation](#creating-a-presentation)
- [Master Slides and Corporate Branding](#master-slides-and-corporate-branding)
- [Slide Masters](#slide-masters)
- [Slide Master Examples](#slide-master-examples)
- [ProTip](#protip)
- [Slide Master Object Options](#slide-master-object-options)
- [Sample Slide Master File](#sample-slide-master-file)
- [Presentation Basics](#presentation-basics)
- [Library Reference](#library-reference)
- [Presentation Options](#presentation-options)
- [Available Layouts](#available-layouts)
- [Create Presentation](#create-presentation)
- [Presentation Options](#presentation-options)
- [Available Layouts](#available-layouts)
- [Creating Slides](#creating-slides)
- [Slide Options](#slide-options)
- [Slide Number Options](#slide-number-options)
- [Adding Text](#adding-text)
- [Text Options](#text-options)
- [Text Examples](#text-examples)
Expand All @@ -52,6 +49,11 @@ an HTML Table across one or more Slides with a single command.
- [Adding Images](#adding-images)
- [Image Options](#image-options)
- [Image Examples](#image-examples)
- [Master Slides and Corporate Branding](#master-slides-and-corporate-branding)
- [Slide Masters](#slide-masters)
- [Slide Master Examples](#slide-master-examples)
- [Slide Master Object Options](#slide-master-object-options)
- [Sample Slide Master File](#sample-slide-master-file)
- [Table-to-Slides Feature](#table-to-slides-feature)
- [Table-to-Slides Options](#table-to-slides-options)
- [Notes:](#notes)
Expand Down Expand Up @@ -100,7 +102,7 @@ include the `pptxgen.shapes.js` library. It's a complete PowerPoint PPTX Shape
```

**************************************************************************************************
# Creating a Presentation
# Presentation Basics
PowerPoint Presentations are created via JavaScript by following 4 basic steps:

1. Create the Presentation
Expand All @@ -117,95 +119,30 @@ pptx.save('Sample Presentation');
That's really all there is to it!

**************************************************************************************************
# Master Slides and Corporate Branding

## Slide Masters
Generating sample slides like those shown above is great for demonstrating library features,
but the reality is most of us will be required to produce presentations that have a certain design or
corporate branding.

PptxGenJS allows you to define Master Slides via objects that can then be used to provide branding
functionality.

Slide Masters are defined using the same object style used in Slides. Add these objects as a variable to a file that
is included in the script src tags on your page, then reference them by name in your code.
E.g.: `<script lang="javascript" src="pptxgenjs.masters.js"></script>`

## Slide Master Examples
`pptxgenjs.masters.js` contents:
```javascript
var gObjPptxMasters = {
MASTER_SLIDE: {
title: 'Slide master',
isNumbered: true,
margin: [ 0.5, 0.25, 1.0, 0.25 ],
bkgd: 'FFFFFF',
images: [ { path:'images/logo_square.png', x:9.3, y:4.9, w:0.5, h:0.5 } ],
shapes: [
{ type:'text', text:'ACME - Confidential', x:0, y:5.17, w:'100%', h:0.3, align:'center', valign:'top', color:'7F7F7F', font_size:8, bold:true },
{ type:'line', x:0.3, y:3.85, w:5.7, h:0.0, line:'007AAA' },
{ type:'rectangle', x:0, y:0, w:'100%', h:.65, w:5, h:3.2, fill:'003b75' }
]
},
TITLE_SLIDE: {
title: 'I am the Title Slide',
isNumbered: false,
bkgd: { data:'image/png;base64,R0lGONlhotPQBMAPyoAPosR[...]+0pEZbEhAAOw==' },
images: [ { x:'7.4', y:'4.1', w:'2', h:'1', data:'image/png;base64,R0lGODlhPQBEAPeoAJosM[...]+0pCZbEhAAOw==' } ]
}
};
```
Every object added to the global master slide variable `gObjPptxMasters` can then be referenced
by their key names that you created (e.g.: "TITLE_SLIDE").
# Library Reference

### ProTip
Pre-encode your images (base64) and add the string as the optional data key/val
(see the `TITLE_SLIDE.images` object above)
## Create Presentation

Client Browser:
```javascript
var pptx = new PptxGenJS();

var slide1 = pptx.addNewSlide( pptx.masters.TITLE_SLIDE );
slide1.addText('How To Create PowerPoint Presentations with JavaScript', { x:0.5, y:0.7, font_size:18 });
// NOTE: Base master slide properties can be overridden on a selective basis:
// Here we can set a new background color or image on-the-fly
var slide2 = pptx.addNewSlide( pptx.masters.MASTER_SLIDE, { bkgd:'0088CC' } );
var slide3 = pptx.addNewSlide( pptx.masters.MASTER_SLIDE, { bkgd:{ path:'images/title_bkgd.jpg' } } );
var slide4 = pptx.addNewSlide( pptx.masters.MASTER_SLIDE, { bkgd:{ data:'image/png;base64,tFfInmP[...]=' } } );

pptx.save();
```
Node.js:
```javascript
var pptx = require("pptxgenjs");
```

## Slide Master Object Options
| Option | Type | Unit | Default | Description | Possible Values |
| :----------- | :------ | :----- | :------- | :----------- | :-------------------- |
| `bkgd` | string | | `ffffff` | color | hex color code. Ex: `{ bkgd:'0088CC' }` |
| `bkgd` | object | | | image | object with path OR data. Ex: `{path:'img/bkgd.png'}` OR `{data:'image/png;base64,iVBORwTwB[...]='}` |
| `images` | array | | | image(s) | object array of path OR data. Ex: `{path:'img/logo.png'}` OR `{data:'image/png;base64,tFfInmP[...]'}`|
| `isNumbered` | boolean | | `false` | Show slide numbers | `true` or `false` |
| `margin` | number | inches | `1.0` | Slide margin | 0.0 through whatever |
| `margin` | array | | | Slide margins | array of numbers in TRBL order. Ex: `[0.5, 0.75, 0.5, 0.75]` |
| `shapes` | array | | | shape(s) | array of shape objects. Ex: (see [Shape](#shape) section) |
| `title` | string | | | Slide title | some title |

## Sample Slide Master File
A sample masters file is included in the distribution folder and contain a couple of different slides to get you started.
Location: `PptxGenJS/dist/pptxgen.masters.js`

**************************************************************************************************
# Library Reference

## Presentation Options
### Presentation Options
Setting the Title:
```javascript
pptx.setTitle('PptxGenJS Sample Presentation');
```
Setting the Layout (applied to every Slide in the Presentation):
Setting the Layout (applies to all Slides in the Presentation):
```javascript
pptx.setLayout('LAYOUT_WIDE');
```

## Available Layouts
### Available Layouts
| Layout Name | Default | Layout Slide Size |
| :------------- | :------- | :---------------- |
| `LAYOUT_16x9` | Yes | 10 x 5.625 inches |
Expand All @@ -220,10 +157,21 @@ Add a Slide to a Presentation
var slide = pptx.addNewSlide();
```

(*Optional*) Pass the name of a Master Slide to use
### Slide Options
Applying Master Slides
```javascript
var slide = pptx.addNewSlide(pptx.masters.TITLE_SLIDE);
```
Adding Slide Numbers
```javascript
slide.slideNumber({ x:1.0, y:'90%' });
```

### Slide Number Options
| Option | Type | Unit | Default | Description | Possible Values |
| :----------- | :------ | :----- | :-------- | :------------------ | :--------------- |
| `x` | number | inches | `0.3` | horizontal location | 0-n OR 'n%'. (Ex: `{x:'10%'}` places number 10% from left edge) |
| `y` | number | inches | `90%` | vertical location | 0-n OR 'n%'. (Ex: `{y:'90%'}` places number 90% down the Slide) |

## Adding Text
```javascript
Expand Down Expand Up @@ -456,6 +404,81 @@ slide.addImage({ path:'images/cc_license_comp_chart.png', x:6.6, y:0.75, w:6.30,
pptx.save('Demo-Images');
```

**************************************************************************************************
# Master Slides and Corporate Branding

## Slide Masters
Generating sample slides like those shown above is great for demonstrating library features,
but the reality is most of us will be required to produce presentations that have a certain design or
corporate branding.

PptxGenJS allows you to define Master Slides via objects that can then be used to provide branding
functionality.

Slide Masters are defined using the same object style used in Slides. Add these objects as a variable to a file that
is included in the script src tags on your page, then reference them by name in your code.
E.g.: `<script lang="javascript" src="pptxgenjs.masters.js"></script>`

## Slide Master Examples
`pptxgenjs.masters.js` contents:
```javascript
var gObjPptxMasters = {
MASTER_SLIDE: {
title: 'Slide master',
margin: [ 0.5, 0.25, 1.0, 0.25 ],
bkgd: 'FFFFFF',
images: [ { path:'images/logo_square.png', x:9.3, y:4.9, w:0.5, h:0.5 } ],
shapes: [
{ type:'text', text:'ACME - Confidential', x:0, y:5.17, w:'100%', h:0.3, align:'center', valign:'top', color:'7F7F7F', font_size:8, bold:true },
{ type:'line', x:0.3, y:3.85, w:5.7, h:0.0, line:'007AAA' },
{ type:'rectangle', x:0, y:0, w:'100%', h:.65, w:5, h:3.2, fill:'003b75' }
],
slideNumber: { x:0.3, y:'90%' }
},
TITLE_SLIDE: {
title: 'I am the Title Slide',
bkgd: { data:'image/png;base64,R0lGONlhotPQBMAPyoAPosR[...]+0pEZbEhAAOw==' },
images: [ { x:'7.4', y:'4.1', w:'2', h:'1', data:'image/png;base64,R0lGODlhPQBEAPeoAJosM[...]+0pCZbEhAAOw==' } ]
}
};
```
Every object added to the global master slide variable `gObjPptxMasters` can then be referenced
by their key names that you created (e.g.: "TITLE_SLIDE").

**TIP:**
Pre-encode your images (base64) and add the string as the optional data key/val
(see the `TITLE_SLIDE.images` object above)

```javascript
var pptx = new PptxGenJS();

var slide1 = pptx.addNewSlide( pptx.masters.TITLE_SLIDE );
slide1.addText('How To Create PowerPoint Presentations with JavaScript', { x:0.5, y:0.7, font_size:18 });
// NOTE: Base master slide properties can be overridden on a selective basis:
// Here we can set a new background color or image on-the-fly
var slide2 = pptx.addNewSlide( pptx.masters.MASTER_SLIDE, { bkgd:'0088CC' } );
var slide3 = pptx.addNewSlide( pptx.masters.MASTER_SLIDE, { bkgd:{ path:'images/title_bkgd.jpg' } } );
var slide4 = pptx.addNewSlide( pptx.masters.MASTER_SLIDE, { bkgd:{ data:'image/png;base64,tFfInmP[...]=' } } );

pptx.save();
```

## Slide Master Object Options
| Option | Type | Unit | Default | Description | Possible Values |
| :------------ | :------ | :----- | :------- | :----------- | :-------------------- |
| `bkgd` | string | | `ffffff` | color | hex color code. Ex: `{ bkgd:'0088CC' }` |
| `bkgd` | object | | | image | object with path OR data. Ex: `{path:'img/bkgd.png'}` OR `{data:'image/png;base64,iVBORwTwB[...]='}` |
| `images` | array | | | image(s) | object array of path OR data. Ex: `{path:'img/logo.png'}` OR `{data:'image/png;base64,tFfInmP[...]'}`|
| `slideNumber` | object | | | Show slide numbers | ex: `{ x:1.0, y:'50%' }` `x` and `y` can be either inches or percent |
| `margin` | number | inches | `1.0` | Slide margin | 0.0 through whatever |
| `margin` | array | | | Slide margins | array of numbers in TRBL order. Ex: `[0.5, 0.75, 0.5, 0.75]` |
| `shapes` | array | | | shape(s) | array of shape objects. Ex: (see [Shape](#shape) section) |
| `title` | string | | | Slide title | some title |

## Sample Slide Master File
A sample masters file is included in the distribution folder and contain a couple of different slides to get you started.
Location: `PptxGenJS/dist/pptxgen.masters.js`

**************************************************************************************************
# Table-to-Slides Feature
* With the unique `addSlidesForTable()` function, you can reproduce an HTML table - background
Expand Down
Loading

0 comments on commit 837e2e9

Please # to comment.