cutom-pptxgenjs

<!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="author" content="https://github.com/gitbrent"> <meta name="website" content="https://github.com/gitbrent/PptxGenJS/"> <meta name="updated" content="2019-02-08"> <link rel="icon" href="images/favicon-32x32.png" sizes="32x32" type="image/png"> <link rel="icon" href="images/favicon-16x16.png" sizes="16x16" type="image/png"> <link rel="icon" href="images/favicon.png"> <title>PptxGenJS Examples/Demo Page</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.2.1/yeti/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism-okaidia.min.css"> <style> #infoBar .iconSvg { vertical-align: middle; margin-right: 5px; } #demo-sandbox:focus { /* Chrome draws a super-annoying outline around *each line* in the <code> tag, so NOPE! */ outline: none; /*-webkit-focus-ring-color auto 5px;*/ } /* -- brentstrap.css ---------- */ .bde-arrow-cont { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .bde-arrow-cont span.text-muted { font-size: 50% !important; color: #b9c9d9 !important; text-transform: none !important; margin-left: 4px; } .arrow { display: inline-block; height: 12px; width: 12px; border-top: 3px solid #0085C3; border-right: 3px solid #0085C3; margin-right: 10px; cursor: pointer; transition: all .25s ease; transform: rotate(45deg); } .arrow.active { transform: rotate(135deg); margin-bottom: 3px; } .text-nowrap { white-space: nowrap !important; } .text-muted { font-weight:normal; } .bg-light2 { background-color: #fcfcfc !important; } .bde-callout-info { padding: 1.25rem; margin-top: 1.25rem; margin-bottom: 1.25rem; border: 1px solid #eee; border-left-width: .25rem; border-radius: .25rem; border-left-color: #5bc0de; } /* -- brentstrap.css ---------- */ /* ------------------------------------------------------------------------- */ div.iconSvg { display: inline-block; background-size: contain; max-width: 256px; max-height: 256px; } div.iconSvg.size16 { width:16px; height:16px; } div.iconSvg.size20 { width:20px; height:20px; } div.iconSvg.size24 { width:24px; height:24px; } div.iconSvg.size32 { width:32px; height:32px; } div.iconSvg.size48 { width:48px; height:48px; } div.iconSvg.circle.question, div.iconSvg.question { background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUwIDUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MCA1MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxjaXJjbGUgc3R5bGU9ImZpbGw6IzQ4QTBEQzsiIGN4PSIyNSIgY3k9IjI1IiByPSIyNSIvPgo8bGluZSBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojRkZGRkZGO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwOyIgeDE9IjI1IiB5MT0iMzciIHgyPSIyNSIgeTI9IjM5Ii8+CjxwYXRoIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7IiBkPSJNMTgsMTYgIGMwLTMuODk5LDMuMTg4LTcuMDU0LDcuMS02Ljk5OWMzLjcxNywwLjA1Miw2Ljg0OCwzLjE4Miw2LjksNi45YzAuMDM1LDIuNTExLTEuMjUyLDQuNzIzLTMuMjEsNS45ODYgIEMyNi4zNTUsMjMuNDU3LDI1LDI2LjI2MSwyNSwyOS4xNThWMzIiLz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==); } div.iconSvg.circle.info, div.iconSvg.info { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgMzQ3LjYxMiAzNDcuNjEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzNDcuNjEyIDM0Ny42MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48Zz48cGF0aCBmaWxsPSIjMDA4OENDIiBkPSJNMTczLjgwNywwQzc3Ljk3LDAsMCw3Ny45NywwLDE3My44MDZDMCwyNjkuNjQsNzcuOTcsMzQ3LjYxMiwxNzMuODA3LDM0Ny42MTJjOTUuODMzLDAsMTczLjgwNi03Ny45NzMsMTczLjgwNi0xNzMuODA3IEMzNDcuNjEyLDc3Ljk3LDI2OS42NCwwLDE3My44MDcsMHogTTE5Ni40ODksMjY5LjQ0N2MwLDkuOTMzLTguMDcsMTcuOTk3LTE3Ljk5LDE3Ljk5N2MtOS45MTQsMC0xNy45NjktOC4wNjQtMTcuOTY5LTE3Ljk5NyBWMTM3LjM0MmMwLTkuODk4LDguMDU2LTE3Ljk2NiwxNy45NjktMTcuOTY2YzkuOTIsMCwxNy45OSw4LjA2OCwxNy45OSwxNy45NjZWMjY5LjQ0N3ogTTE3OS4yMzQsMTAxLjE1NyBjLTExLjI5NCwwLTIwLjQ5NC05LjE5My0yMC40OTQtMjAuNDk1czkuMTkzLTIwLjQ5NSwyMC40OTQtMjAuNDk1YzExLjMwNSwwLDIwLjQ5OCw5LjE5MywyMC40OTgsMjAuNDk1IFMxOTAuNTM5LDEwMS4xNTcsMTc5LjIzNCwxMDEuMTU3eiIgLz48L2c+PC9nPjwvc3ZnPg==); } div.iconSvg.yes, div.iconSvg.check { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaWQ9IkxheWVyXzEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDojMkJCNjczO30uc3Qxe2ZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6MzA7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTQ4OSwyNTUuOWMwLTAuMiwwLTAuNSwwLTAuN2MwLTEuNiwwLTMuMi0wLjEtNC43YzAtMC45LTAuMS0xLjgtMC4xLTIuOGMwLTAuOS0wLjEtMS44LTAuMS0yLjcgIGMtMC4xLTEuMS0wLjEtMi4yLTAuMi0zLjNjMC0wLjctMC4xLTEuNC0wLjEtMi4xYy0wLjEtMS4yLTAuMi0yLjQtMC4zLTMuNmMwLTAuNS0wLjEtMS4xLTAuMS0xLjZjLTAuMS0xLjMtMC4zLTIuNi0wLjQtNCAgYzAtMC4zLTAuMS0wLjctMC4xLTFDNDc0LjMsMTEzLjIsMzc1LjcsMjIuOSwyNTYsMjIuOVMzNy43LDExMy4yLDI0LjUsMjI5LjVjMCwwLjMtMC4xLDAuNy0wLjEsMWMtMC4xLDEuMy0wLjMsMi42LTAuNCw0ICBjLTAuMSwwLjUtMC4xLDEuMS0wLjEsMS42Yy0wLjEsMS4yLTAuMiwyLjQtMC4zLDMuNmMwLDAuNy0wLjEsMS40LTAuMSwyLjFjLTAuMSwxLjEtMC4xLDIuMi0wLjIsMy4zYzAsMC45LTAuMSwxLjgtMC4xLDIuNyAgYzAsMC45LTAuMSwxLjgtMC4xLDIuOGMwLDEuNi0wLjEsMy4yLTAuMSw0LjdjMCwwLjIsMCwwLjUsMCwwLjdjMCwwLDAsMCwwLDAuMXMwLDAsMCwwLjFjMCwwLjIsMCwwLjUsMCwwLjdjMCwxLjYsMCwzLjIsMC4xLDQuNyAgYzAsMC45LDAuMSwxLjgsMC4xLDIuOGMwLDAuOSwwLjEsMS44LDAuMSwyLjdjMC4xLDEuMSwwLjEsMi4yLDAuMiwzLjNjMCwwLjcsMC4xLDEuNCwwLjEsMi4xYzAuMSwxLjIsMC4yLDIuNCwwLjMsMy42ICBjMCwwLjUsMC4xLDEuMSwwLjEsMS42YzAuMSwxLjMsMC4zLDIuNiwwLjQsNGMwLDAuMywwLjEsMC43LDAuMSwxQzM3LjcsMzk4LjgsMTM2LjMsNDg5LjEsMjU2LDQ4OS4xczIxOC4zLTkwLjMsMjMxLjUtMjA2LjUgIGMwLTAuMywwLjEtMC43LDAuMS0xYzAuMS0xLjMsMC4zLTIuNiwwLjQtNGMwLjEtMC41LDAuMS0xLjEsMC4xLTEuNmMwLjEtMS4yLDAuMi0yLjQsMC4zLTMuNmMwLTAuNywwLjEtMS40LDAuMS0yLjEgIGMwLjEtMS4xLDAuMS0yLjIsMC4yLTMuM2MwLTAuOSwwLjEtMS44LDAuMS0yLjdjMC0wLjksMC4xLTEuOCwwLjEtMi44YzAtMS42LDAuMS0zLjIsMC4xLTQuN2MwLTAuMiwwLTAuNSwwLTAuNyAgQzQ4OSwyNTYsNDg5LDI1Niw0ODksMjU1LjlDNDg5LDI1Niw0ODksMjU2LDQ4OSwyNTUuOXoiIGlkPSJYTUxJRF8zXyIvPjxnIGlkPSJYTUxJRF8xXyI+PGxpbmUgY2xhc3M9InN0MSIgaWQ9IlhNTElEXzJfIiB4MT0iMjEzLjYiIHgyPSIzNjkuNyIgeTE9IjM0NC4yIiB5Mj0iMTg4LjIiLz48bGluZSBjbGFzcz0ic3QxIiBpZD0iWE1MSURfNF8iIHgxPSIyMzMuOCIgeDI9IjE1NC43IiB5MT0iMzQ1LjIiIHkyPSIyNjYuMSIvPjwvZz48L3N2Zz4=); } div.iconSvg.no, div.iconSvg.fail { background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUwIDUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MCA1MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxjaXJjbGUgc3R5bGU9ImZpbGw6I0Q3NUE0QTsiIGN4PSIyNSIgY3k9IjI1IiByPSIyNSIvPgo8cG9seWxpbmUgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDsiIHBvaW50cz0iMTYsMzQgMjUsMjUgMzQsMTYgICAiLz4KPHBvbHlsaW5lIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7IiBwb2ludHM9IjE2LDE2IDI1LDI1IDM0LDM0ICAgIi8+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=); } div.iconSvg.xmark { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ0OS45OTggNDQ5Ljk5OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDQ5Ljk5OCA0NDkuOTk4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij48Zz48Zz48cG9seWdvbiBwb2ludHM9IjQ0OS45NzQsMzQuODU1IDQxNS4xOTEsMCAyMjUuMDA3LDE5MC4xODQgMzQuODM5LDAgMC4wMjQsMzQuODM5IDE5MC4xOTIsMjI0Ljk5OSAgICAgMC4wMjQsNDE1LjE1OSAzNC44MzksNDQ5Ljk5OCAyMjUuMDA3LDI1OS43OTcgNDE1LjE5MSw0NDkuOTk4IDQ0OS45NzQsNDE1LjE0MyAyNTkuODMsMjI0Ljk5OSAgICIgZmlsbD0iI0Q4MDAyNyIvPjwvZz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+); } div.iconSvg.circle.info { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgMzQ3LjYxMiAzNDcuNjEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzNDcuNjEyIDM0Ny42MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48Zz48cGF0aCBmaWxsPSIjMDA4OENDIiBkPSJNMTczLjgwNywwQzc3Ljk3LDAsMCw3Ny45NywwLDE3My44MDZDMCwyNjkuNjQsNzcuOTcsMzQ3LjYxMiwxNzMuODA3LDM0Ny42MTJjOTUuODMzLDAsMTczLjgwNi03Ny45NzMsMTczLjgwNi0xNzMuODA3IEMzNDcuNjEyLDc3Ljk3LDI2OS42NCwwLDE3My44MDcsMHogTTE5Ni40ODksMjY5LjQ0N2MwLDkuOTMzLTguMDcsMTcuOTk3LTE3Ljk5LDE3Ljk5N2MtOS45MTQsMC0xNy45NjktOC4wNjQtMTcuOTY5LTE3Ljk5NyBWMTM3LjM0MmMwLTkuODk4LDguMDU2LTE3Ljk2NiwxNy45NjktMTcuOTY2YzkuOTIsMCwxNy45OSw4LjA2OCwxNy45OSwxNy45NjZWMjY5LjQ0N3ogTTE3OS4yMzQsMTAxLjE1NyBjLTExLjI5NCwwLTIwLjQ5NC05LjE5My0yMC40OTQtMjAuNDk1czkuMTkzLTIwLjQ5NSwyMC40OTQtMjAuNDk1YzExLjMwNSwwLDIwLjQ5OCw5LjE5MywyMC40OTgsMjAuNDk1IFMxOTAuNTM5LDEwMS4xNTcsMTc5LjIzNCwxMDEuMTU3eiIgLz48L2c+PC9nPjwvc3ZnPg==); } div.iconSvg.lock { background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU4IDU4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1OCA1ODsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxwYXRoIHN0eWxlPSJmaWxsOiNDN0NBQzc7c3Ryb2tlOiNDN0NBQzc7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLW1pdGVybGltaXQ6MTA7IiBkPSJNNDIsMzJIMTVWMTMuNjAxQzE1LDYuNjUyLDIxLjA1NiwxLDI4LjUsMSAgUzQyLDYuNjUyLDQyLDEzLjYwMVYzMnogTTE5LDI4aDE5VjEzLjYwMUMzOCw4Ljg1OCwzMy43MzgsNSwyOC41LDVTMTksOC44NTgsMTksMTMuNjAxVjI4eiIvPgo8cmVjdCB4PSI4IiB5PSIyNiIgc3R5bGU9ImZpbGw6IzczODNCRjsiIHdpZHRoPSI0MiIgaGVpZ2h0PSIzMiIvPgo8cmVjdCB4PSIyOSIgeT0iMjYiIHN0eWxlPSJmaWxsOiM2ODc5QUY7IiB3aWR0aD0iMjEiIGhlaWdodD0iMzIiLz4KPHBvbHlnb24gc3R5bGU9ImZpbGw6I0VCQkExNjsiIHBvaW50cz0iNDIuNTg2LDU3IDQ5LDUwLjU4NiA0OSw0NyA0My40MTQsNDcgMzMuNDE0LDU3ICIvPgo8cG9seWdvbiBzdHlsZT0iZmlsbDojNEY1OTcwOyIgcG9pbnRzPSI5LDQ3IDksNTQuNTg2IDE2LjU4Niw0NyAiLz4KPHBvbHlnb24gc3R5bGU9ImZpbGw6IzQyNEE2MDsiIHBvaW50cz0iMzAuNTg2LDU3IDQwLjU4Niw0NyAzMS40MTQsNDcgMjEuNDE0LDU3ICIvPgo8cGF0aCBzdHlsZT0iZmlsbDojRUFDQzE4OyIgZD0iTTI4LjU4Niw0N2gtOS4xNzJsLTkuNzA3LDkuNzA3QzkuNTEyLDU2LjkwMiw5LjI1Niw1Nyw5LDU3aDkuNTg2TDI4LjU4Niw0N3oiLz4KPHBvbHlnb24gc3R5bGU9ImZpbGw6IzQyNEE2MDsiIHBvaW50cz0iNDksNTcgNDksNTMuNDE0IDQ1LjQxNCw1NyAiLz4KPHBvbHlnb24gc3R5bGU9ImZpbGw6IzRGNTk3MDsiIHBvaW50cz0iMjksNDkuNDE0IDIxLjQxNCw1NyAyOSw1NyAiLz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==); } div.iconSvg.reload, div.iconSvg.refresh { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MTIuMDAyIDUxMi4wMDIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMi4wMDIgNTEyLjAwMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIHN0eWxlPSJmaWxsOiMwMDg4Y2M7IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAyNTYgMjU2KSIgZD0iTTQzNi44NjYsNDM2Ljg3MWM0OC4zMTItNDguMzExLDc0LjkyMS0xMTIuNTQ2LDc0LjkyMS0xODAuODcxIGMwLTE0MS4wMzktMTE0Ljc0NC0yNTUuNzg1LTI1NS43ODMtMjU1Ljc4NnY0OS41MDdjMTEzLjc0MSwwLjAwMiwyMDYuMjc2LDkyLjUzOSwyMDYuMjc2LDIwNi4yNzljMCw1NS4xMDEtMjEuNDU4LDEwNi45MDItNjAuNDIsMTQ1Ljg2NGwtNy41NzEsNy41NzFsLTY3LjU1Mi02Ny41NTJsMC4wMjEsMTcwLjA3NmwxNzAuMDk2LDAuMDQxbC02Ny41NTktNjcuNTU5TDQzNi44NjYsNDM2Ljg3MXoiLz48cGF0aCBzdHlsZT0iZmlsbDojMDA4OGNjOyIgdHJhbnNmb3JtPSJyb3RhdGUoOTAgMjU2IDI1NikiIGQ9Ik00OS43MjQsMjU2LjAwMWMwLTU1LjEwMSwyMS40NTgtMTA2LjkwMiw2MC40Mi0xNDUuODY0bDcuNTcxLTcuNTcxbDY3LjU1Miw2Ny41NTJMMTg1LjI0NSwwLjA0MUwxNS4xNDgsMGw2Ny41NTksNjcuNTU5bC03LjU3MSw3LjU3QzI2LjgyNCwxMjMuNDM5LDAuMjE1LDE4Ny42NzUsMC4yMTUsMjU1Ljk5OWMwLDE0MS4wMzksMTE0Ljc0NCwyNTUuNzg1LDI1NS43ODMsMjU1Ljc4NnYtNDkuNTA3QzE0Mi4yNTgsNDYyLjI3OCw0OS43MjQsMzY5Ljc0Miw0OS43MjQsMjU2LjAwMXoiLz48L3N2Zz4=); } /* Flex modernTabs */ .flexTabs { width: 100%; margin: 20px 0 10px 0; border: 1px solid #d5d5d5; box-shadow: 0px 4px 10px -5px rgba(0,0,0,0.5); border-radius: 5px; } .flexTabs > ul { display: flex; background: #F6F6F6; list-style-type: none; margin: 0 !important; -webkit-margin-before: 0; -moz-margin-before: 0; -ms-margin-before: 0; padding: 0 !important; border-bottom: 1px solid #d5d5d5; border-radius: 5px 5px 0 0; } .flexTabs > ul > li { flex: 1 0 auto; box-sizing: border-box; cursor: pointer; text-shadow: 2px 2px #efefef; text-align: center; display: inline-block; list-style-type: none; padding: 15px; font-size: 14px; color: #a7a7a7; text-transform: uppercase; border-bottom: 3px solid #F6F6F6; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .flexTabs > ul > li.active { font-weight: bold; text-shadow: none; color: #0088CC; border-bottom: 3px solid #0088cc; } .flexTabs > div { display: none; margin: 0; padding: 1.5rem 2rem; background: white; border-radius: 0 0 5px 5px; } .flexTabs > div.active { display: block; } .flexTabs > div > .toolBar { width: 100%; min-height: 44px; display: table; margin-top: -20px; } .flexTabs > div > .toolBar > div:first-child { display:table-cell; width:75%; text-align: left; padding:10px 0; vertical-align:middle; color:#bcd; } .flexTabs > div > .toolBar > div:last-child { display:table-cell; width:25%; text-align:right; padding:10px 0; vertical-align:middle; white-space:nowrap; } .flexTabs > div > .toolBar button { border-radius: 2px; text-transform: none; } .flexTabs > div > .toolBar img { vertical-align:middle; margin:-3px 3px 0 0; } /* ------------------------------------------------------------------------- */ /* tabDemo */ .tabDemo { width: 100%; border-collapse: collapse; } .tabDemo thead th { border: 1px solid white; background: #4488DD; color: white; padding: 10px; margin: 0; } .tabDemo tbody td:first-child { background: #efefff; } .tabDemo tbody td { border: 1px solid #d7d7d7; background: white; padding: 10px; margin: 0; text-align: left; } .tabDemo tbody td:nth-child(1), .tabDemo tbody td:nth-child(2) { white-space: nowrap; } .tabHtmlToPpt thead th { background: #a7a7a7; color: white; font-weight: normal; } .tabHtmlToPpt tbody td { background: #eee; color: #666; } .tabHtmlToPpt th, .tabHtmlToPpt td { border: 1px solid white; padding: 4px 8px; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs/examples/images/base64Images.js"></script> <script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs/dist/pptxgen.colors.js"></script> <script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs/dist/pptxgen.shapes.js"></script>  <script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs@latest/dist/pptxgen.bundle.js"></script> <script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs@latest/examples/pptxgenjs-demo.js"></script>      <script> // ================================================================================================================== function doNav(intTab) { location.href = '#tab'+intTab; doNavRestore(); } function doNavRestore() { if ( window.location.href.toLowerCase().indexOf('#tab') > -1 ) { var tabNum = window.location.href.toLowerCase().split('#tab')[1]; $('#navTabs').find('> div, li').removeClass('active'); $('#navTabs li#nav'+tabNum).addClass('active'); $('#tab'+tabNum).addClass('active'); } } /* DESC: old/undocumented/unused */ function doTestSimple() { var pptx = new PptxGenJS(); var slide = pptx.addNewSlide(); var optsTitle = { color:'9F9F9F', marginPt:3, border:[0,0,{pt:'1',color:'CFCFCF'},0] }; pptx.setLayout({ name:'A3', width:16.5, height:11.7 }); slide.slideNumber({ x:0.5, y:'90%' }); slide.addTable( [ [{ text:'Simple Example', options:optsTitle }] ], { x:0.5, y:0.13, w:12.5 } ); //slide.addText('Hello World!', { x:0.5, y:0.7, w:6, h:1, color:'0000FF' }); slide.addText('Hello 45! ', { x:0.5, y:0.5, w:6, h:1, fontSize:36, color:'0000FF', shadow:{type:'outer', color:'00AAFF', blur:2, offset:10, angle: 45, opacity:0.25} }); slide.addText('Hello 180!', { x:0.5, y:1.0, w:6, h:1, fontSize:36, color:'0000FF', shadow:{type:'outer', color:'ceAA00', blur:2, offset:10, angle:180, opacity:0.5} }); slide.addText('Hello 355!', { x:0.5, y:1.5, w:6, h:1, fontSize:36, color:'0000FF', shadow:{type:'outer', color:'aaAA33', blur:2, offset:10, angle:355, opacity:0.75} }); // Bullet Test: Number slide.addText(999, { x:0.5, y:2.0, w:'50%', h:1, color:'0000DE', bullet:true }); // Bullet Test: Text test slide.addText('Bullet text', { x:0.5, y:2.5, w:'50%', h:1, color:'00AA00', bullet:true }); // Bullet Test: Multi-line text test slide.addText('Line 1\nLine 2\nLine 3', { x:0.5, y:3.5, w:'50%', h:1, color:'AACD00', bullet:true }); // Table cell margin:0 slide.addTable( [['margin:0']], { x:0.5, y:1.1, margin:0, w:0.75, fill:'FFFCCC' } ); // Fine-grained Formatting/word-level/line-level Formatting slide.addText( [ { text:'right line', options:{ fontSize:24, fontFace:'Courier New', color:'99ABCC', align:'r', breakLine:true } }, { text:'ctr line', options:{ fontSize:36, fontFace:'Arial', color:'FFFF00', align:'c', breakLine:true } }, { text:'left line', options:{ fontSize:48, fontFace:'Verdana', color:'0088CC', align:'l' } } ], { x:0.5, y:3.0, w:8.5, h:4, margin:0.1, fill:'232323' } ); // Export: pptx.save('Sample Presentation'); } /* The "Text" demo on the PptxGenJS homepage - codified here so we can quickly reproduce the screencaps, etc. as needed */ function doHomepageDemo_Text() { var pptx = new PptxGenJS(); pptx.setLayout('LAYOUT_WIDE'); var slide = pptx.addNewSlide(); slide.addText( 'BONJOUR - CIAO - GUTEN TAG - HELLO - HOLA - \nNAMASTE - OLÀ - ZDRAS-TVUY-TE - こんにちは - 你好', { x:0.0, y:0.0, w:'100%', h:1.25, align:'c', fontSize:18, color:'0088CC', fill:'F1F1F1' } ); slide.addText("Line-Level Formatting:", { x:0.5, y:1.5, w:'40%', h:0.38, color:'0088CC' }); slide.addText( [ { text:'1st line', options:{ fontSize:24, fontFace:'Courier New', color:'99ABCC', align:'r', breakLine:true } }, { text:'2nd line', options:{ fontSize:36, fontFace:'Arial', color:'FFFF00', align:'c', breakLine:true } }, { text:'3rd line', options:{ fontSize:48, fontFace:'Verdana', color:'0088CC', align:'l' } } ], { x:0.5, y:2.0, w:6, h:2.25, margin:0.1, fill:'232323' } ); slide.addText("Bullets: Normal", { x:8.0, y:1.5, w:'40%', h:0.38, color:'0088CC' }); slide.addText( 'Line 1\nLine 2\nLine 3', { x:8.0, y:2.0, w:'30%', h:1, color:'393939', fontSize:16, fill:'F2F2F2', bullet:true } ); slide.addText("Bullets: Numbered", { x:8.0, y:3.4, w:'40%', h:0.38, color:'0088CC' }); slide.addText( 'Line 1\nLine 2\nLine 3', { x:8.0, y:3.9, w:'30%', h:1, color:'393939', fontSize:16, fill:'F2F2F2', bullet:{type:'number'} } ); slide.addText("Bullets: Custom", { x:8.0, y:5.3, w:'40%', h:0.38, color:'0088CC' }); slide.addText('Star bullet! ', { x:8.0, y:5.6, w:'40%', h:0.38, color:'CC0000', bullet:{code:'2605'} }); slide.addText('Check bullet!', { x:8.0, y:5.9, w:'40%', h:0.38, color:'00CD00', bullet:{code:'2713'} }); var shadowOpts = { type:'outer', color:'696969', blur:3, offset:10, angle:45, opacity:0.8 }; slide.addText("Text Shadow:", { x:0.5, y:6.0, w:'40%', h:0.38, color:'0088CC' }); slide.addText( 'Outer Shadow (blur:3, offset:10, angle:45, opacity:80%)', { x:0.5, y:6.4, w:12, h:0.6, fontSize:32, color:'0088cc', shadow:shadowOpts } ); pptx.save('Demo-Text'); } function doTablePagingLogicCheck() { var pptx = new PptxGenJS(); var slide = pptx.addNewSlide(); slide.addText('Table Paging Logic Check', { x:0.0, y:'90%', w:'100%', align:'c', fontSize:18, color:'0088CC', fill:'F2F9FC' }); var numMargin = 1.25; slide.addShape(pptx.shapes.RECTANGLE, { x:0.0, y:0.0, w:numMargin, h:numMargin, fill:'FFFCCC' }); slide.addTable( ['short','table','whatever'], {x:numMargin, y:numMargin, margin:numMargin, colW:2.5, fill:'F1F1F1'} ); pptx.save('PptxGenJs-TablePagingLogicCheck'); } function buildDataTable() { // STEP 1: $('#tabAutoPaging tbody').empty(); // STEP 2: for (var idx=0; idx<$('#numTab2SlideRows').val(); idx++) { var strHtml = '<tr>' + '<td style="text-align:center">' + (idx+1) + '</td>' + '<td>' + gArrNamesL[ Math.floor(Math.random()*10) ] + '</td>' + '<td>' + gArrNamesF[ Math.floor(Math.random()*10) ] + '</td>' + '<td>Text:<br>' + gStrLoremIpsum.substring( 0, (Math.floor(Math.random()*10)+2)*130 ) + '</td>' + '</tr>'; $('#tabAutoPaging tbody').append( strHtml ); } // STEP 3: Add some style to table for testing // TEST Padding $('#tabAutoPaging thead th').css('padding','10px 5px'); // TEST font-size/auto-paging $('#tabAutoPaging tbody tr:first-child td:last-child').css('font-size','12px'); $('#tabAutoPaging tbody tr:last-child td:last-child').css('font-size','16px'); } function table2slidesDemoForTab(inTabId,inOpts) { var pptx = new PptxGenJS(); pptx.addSlidesForTable(inTabId,(inOpts||null)); pptx.save( inTabId+'_'+getTimestamp() ); } function table2slidesBullets() { var pptx = new PptxGenJS(); pptx.addSlidesForTable('tableWithBullets'); pptx.save( 'tabBullets_'+getTimestamp() ); } /* DESC: Test for backward compatibility with Slide Masters defined in `pptxgen.masters.js` */ function testOnly_LegacyMasterSlides() { // TEST-ONLY: DO NOT USE/COPY ME!! var pptx = new PptxGenJS(); pptx.setLayout('LAYOUT_WIDE'); var slide = pptx.addNewSlide( pptx.masters.TITLE_SLIDE ); pptx.save('Demo-LegacyMasterSlides_'+getTimestamp()); } // Table-to-Slides Demos ======================================================================= function addMasterDefs(pptx) { // 1: pptx.defineSlideMaster({ title: 'TITLE_SLIDE', bkgd: { data:BKGD_STARLABS }, objects: [ { 'line': { x: 3.5, y:1.00, w:6.00, line:'0088CC', line_size:5 } }, //{ 'chart': { type:'PIE', data:[{labels:['R','G','B'], values:[10,10,5]}], opts:{x:0.25, y:0.25, w:3, h:3} } }, { 'rect': { x: 0.0, y:5.30, w:'100%', h:0.75, fill:'F1F1F1' } }, { 'text': { text:'Global IT & Services :: Status Report', options:{ x:3.0, y:5.30, w:5.5, h:0.75, fontFace:'Arial', color:'363636', fontSize:20, valign:'m', margin:0 } } }, { 'image': { x:11.3, y:6.40, w:1.67, h:0.75, data:starlabsLogoSml } } ] }); // 2: pptx.defineSlideMaster({ title: 'MASTER_SLIDE', bkgd: 'EEEEEE', slideNumber: { x:1.0, y:7.0, color:'FFFFFF' }, margin: [ 0.5, 0.25, 1.25, 0.25 ], objects: [ { 'rect': { x:0, y:6.9, w:'100%', h:0.6, fill:'003b75' } }, { 'text': { text:'S.T.A.R. Laboratories', options:{x:0, y:6.9, w:'100%', h:0.6, align:'c', valign:'m', color:'FFFFFF', fontSize:12} } } ] }); // 3: pptx.defineSlideMaster({ title: 'THANKS_SLIDE', bkgd: '36ABFF', objects: [ { 'rect': { x:0.0, y:3.4, w:'100%', h:2.0, fill:'ffffff' } }, { 'text': { text:'Thank You!', options:{ x:0.0, y:0.9, w:'100%', h:1, fontFace:'Arial', color:'FFFFFF', fontSize:60, align:'c' } } }, { 'image': { x:4.6, y:3.5, w:4, h:1.8, data:LOGO_STARLABS } } ] }); } function table2slides1() { // FIRST: Instantiate new PptxGenJS instance var pptx = new PptxGenJS(); // STEP 1: Add Master Slide defs / Set slide size/layout addMasterDefs(pptx); pptx.setLayout('LAYOUT_WIDE'); // STEP 2: Set generated Slide options var objOpts = {}; //objOpts.debug = true; // DEBUG: if ( $('#selSlideMaster').val() ) objOpts.master = $('#selSlideMaster').val(); if ( $('input[name=radioHead]:checked').val() == "Y" ) objOpts.addHeaderToEach = true; if ( $('#checkStartY').prop('checked') ) objOpts.newPageStartY = Number($('#numTab2SlideStartY').val()); // STEP 3: Pass table to addSlidesForTable function to produce 1-N slides pptx.addSlidesForTable('tabAutoPaging', objOpts); // LAST: Export Presentation pptx.save('Demo-TableToSlidesMasterSlide_'+getTimestamp()); } function table2slides2() { // FIRST: Instantiate new PptxGenJS instance var pptx = new PptxGenJS(); // STEP 1: Add Master Slide defs / Set slide size/layout addMasterDefs(pptx); pptx.setLayout('LAYOUT_WIDE'); // STEP 2: Set generated Slide options var objOpts = {}; //objOpts.debug = true; if ( $('#selSlideMaster').val() ) objOpts.master = $('#selSlideMaster').val(); if ( $('input[name=radioHead]:checked').val() == "Y" ) objOpts.addHeaderToEach = true; if ( $('#checkStartY') ) objOpts.newPageStartY = Number($('#numTab2SlideStartY').val()); // STEP 3: Add a custom shape (text in this case) to each Slide // EXAMPLE: Add any dynamic content to each generated Slide // DESC: Add something you cant predefine in a master - like a username/timestamp for each slide, etc. // NOTE: You can do this for all other types as well: .addShape(), .addTable() and .addImage() objOpts.addText = { text:"(dynamic content - ex:user/datestamp)", options:{ x:1.1, y:0.6, color:'0088CC', fontFace:'Arial', fontSize:12 } }; // STEP 4: Pass table to addSlidesForTable function to produce 1-N slides pptx.addSlidesForTable('tabAutoPaging', objOpts); // LAST: Export Presentation pptx.save('Table2Slides-with-dynamic-text'); } function doAppStart() { // REALITY-CHECK: Ensure user has a modern browser if ( !window.Blob ) { alert("Unsupported Browser\n\nSorry, but you'll need a modern browser - (Chrome, Firefox, Edge, Opera) or IE11 - to enable this feature."); return; } else if ( typeof PptxGenJS === 'undefined' ) { alert("Oops!\n\n`PptxGenJS` is undefined - maybe a bad link to the 'pptxgen.js' file or something...?\n"); return; } /* FIXME: Abadoned: jquery cant parse `pptxgenjs-demo.js` for some reason... // If you're me: Load newest/local copy for dev/test work :-) if ( window.location.href.toLowerCase().indexOf('gitbrent') > -1 ) { // Dynamically load library as SharePoint Online is *BAD* about caching $.getScript("../SiteAssets/pptxgenjs/dist/pptxgen.js", function(){ console.log('DEBUG: local file loaded: `dist/pptxgen.js`'); $.getScript("../SiteAssets/pptxgenjs/examples/pptxgenjs-demo.js", function(){ console.log('DEBUG: local file loaded: `examples/pptxgenjs-demo.js`'); }) .fail(function(err){ console.error(err.statusText); console.log(err); }); }); } */ // STEP 1: Set UI (if you're me :-) if ( window.location.href.indexOf('brentely') > 0 ) { $('#tab1sec1').click(); $('#tab1sec2').click(); } // STEP 2: Show library info { if ( typeof Promise !== 'function' ) { $('#appHeader').after('<div class="alert alert-danger">Promise is undefined! (IE11 requires promise.min.js)</div>'); } else { // NOTE: Tooltips (span title below) only works with quote (not single quote) var pptx = new PptxGenJS(); $('#infoBar').append('<div class="col-6 px-0 text-primary"><div class="iconSvg size24 info"></div>Version: <span>'+pptx.version+'</span></div>'); $('#infoBar').append("<div class='col-2 text-success text-right text-nowrap'><span style='cursor:help' title='"+ JSON.stringify(pptx.charts) +"'><div class='iconSvg size24 circle check'></div>pptx.charts = "+ Object.keys(pptx.charts).length +"</span></div>"); $('#infoBar').append("<div class='col-2 text-success text-right text-nowrap'><span style='cursor:help' title='"+ JSON.stringify(pptx.colors) +"'><div class='iconSvg size24 circle check'></div>pptx.colors = "+ Object.keys(pptx.colors).length +"</span></div>"); $('#infoBar').append('<div class="col-2 text-success text-right text-nowrap"><span><div class="iconSvg size24 circle check"></div>pptx.shapes = '+ Object.keys(pptx.shapes).length +'</span></div>'); } } // STEP 3: Build UI elements buildDataTable(); var pptx = new PptxGenJS(); ['MASTER_SLIDE','THANKS_SLIDE','TITLE_SLIDE'].forEach(function(name,idx){ $('#selSlideMaster').append('<option value="'+ name +'">'+ name +'</option>'); }); // STEP 4: Populate code areas { $('#demo-basic').text('// STEP 1: Create a new Presentation\n' + 'var pptx = new PptxGenJS();\n' + '\n' + '// STEP 2: Add a new Slide to the Presentation\n' + 'var slide = pptx.addNewSlide();\n' + '\n' + '// STEP 3: Add any objects to the Slide (charts, tables, shapes, images, etc.)\n' + "slide.addText(\n" + " 'BONJOUR - CIAO - GUTEN TAG - HELLO - HOLA - NAMASTE - OLÀ - ZDRAS-TVUY-TE - こんにちは - 你好',\n" + " { x:0.0, y:0.25, w:'100%', h:1.5, align:'c', fontSize:24, color:'0088CC', fill:'F1F1F1' }\n" + ");\n" + '\n' + '// STEP 4: Send the PPTX Presentation to the user, using your choice of file name\n' + "pptx.save('PptxGenJs-Basic-Slide-Demo');\n" ); /* $('#demo-youtube').html("var pptx = new PptxGenJS();\n" + "var slide = pptx.addNewSlide();\n" + '\n' + "// Provide the usual options (locations and size), then pass the embed code from YouTube (it's on every video page)\n" + "slide.addText('TED Talks 2016: Top 10', { x:0.5, y:0.2, w:8.00, h:0.4, color:'0088CC' });\n" + "slide.addMedia({ type:'online', link:'https://www.youtube.com/embed/Dph6ynRVyUc', x:0.5, y:0.6, w:8.00, h:4.54 });\n" + '\n' + "pptx.save('PptxGenJs-YouTube-Demo');\n" ); */ $('#demo-sandbox').html("var pptx = new PptxGenJS();\n" + "pptx.setLayout('LAYOUT_WIDE');\n" + "var slide = pptx.addNewSlide();\n" + "\n" + "// Bullets with indent levels\n" + "slide.addText(\n" + " [\n" + " { text:'1st line', options:{ fontSize:24, bullet:true, color:'99ABCC' } },\n" + " { text:'2nd line', options:{ fontSize:36, bullet:true, color:'FFFF00', indentLevel:1 } },\n" + " { text:'3rd line', options:{ fontSize:48, bullet:true, color:'0088CC', indentLevel:2 } }\n" + " ],\n" + " { x:1.5, y:1.5, w:6, h:2, margin:0.1, fill:'232323' }\n" + ");\n" + "\n" + "pptx.save('PptxGenJS-Sandbox_'+getTimestamp());\n" ); $('#demo-master').html("pptx.defineSlideMaster({\n" + " title : 'MASTER_SLIDE',\n" + " margin: [0.5, 0.25, 1.00, 0.25],\n" + " bkgd : 'FFFFFF',\n" + " objects: [\n" + " {image: { x:11.45, y:5.95, w:1.67, h:0.75, data:starlabsLogoSml }},\n" + " {rect: { x:0, y:6.9, w:'100%', h:0.6, fill:'003b75' }},\n" + " {text: {\n" + " text:'S.T.A.R. Laboratories - Confidential',\n" + " options:{x:0, y:6.9, w:'100%', align:'c', color:'FFFFFF', fontSize:12}\n" + " }}\n" //+ " }},\n" //+ " {placeholder: { options:{ name:'title', type:'title', x:0.5, y:0.2, w:12, h:1.0 }, text:'' }}\n" //+ " {placeholder: { options:{ name:'body', type:'body', x:6.0, y:1.5, w:12, h:5.25 }, text:'' }}\n" + " ],\n" + " slideNumber: { x:1.0, y:7.0, color:'FFFFFF' }\n" + "});\n" ); } // STEP 5: Demo setup $('#tabCellLotsoText').text( gStrLoremIpsum.substring(0,3000) ); // LAST: Re-highlight code $('#tab1 code, #tab7 code').each(function(idx,ele){ Prism.highlightElement( $(ele)[0] ); }); // LAST: Nav across sessions doNavRestore(); } // ================================================================================================================== $(document).ready(function(){ doAppStart() }); </script> </head> <body class="bg-light mx-5 my-4"> <div data-desc="anchors"> <a href="#tab1"></a><a href="#tab2"></a><a href="#tab3"></a><a href="#tab4"></a><a href="#tab5"></a><a href="#tab6"></a><a href="#tab7"></a> </div> <div id="appHeader" class="container-fluid"> <div class="row align-items-top"> <div class="col-9"> <h1 class="text-primary"><a href="https://github.com/GitBrent/PptxGenJS" title="GitHub Project Page" target="_blank">PptxGenJS</a> Demos</h1> <h5 class="text-info">JavaScript PowerPoint Generation Library</h5> </div> <div class="col-3"> <div class="row mb-2"> <div class="col px-0"> <button id="btnRun" type="button" class="btn btn-lg btn-primary w-100" onclick="runEveryTest()">Run All Demos</button> </div> </div> <div class="row"> <div class="col-6 pl-0 pr-1"> <button id="btnGit" type="button" class="btn btn-sm btn-outline-info w-100" onclick="window.open('https://github.com/gitbrent/PptxGenJS')">GitHub Site</button> </div> <div class="col-6 pl-1 pr-0"> <button id="btnDoc" type="button" class="btn btn-sm btn-outline-info w-100" onclick="window.open('https://gitbrent.github.io/PptxGenJS/docs/installation.html')">API Documentation</button> </div> </div> </div> </div> </div> <div id="navTabs" class="flexTabs"> <ul> <li id="nav1" class="active" onclick="doNav(1)">Introduction</li> <li id="nav2" onclick="doNav(2)">HTML to PPTX</li> <li id="nav3" onclick="doNav(3)">Charts</li> <li id="nav4" onclick="doNav(4)">Images & Media</li> <li id="nav5" onclick="doNav(5)">Shapes & Text</li> <li id="nav6" onclick="doNav(6)">Tables</li> <li id="nav7" onclick="doNav(7)">Templates</li> </ul> <div id="tab1" class="active" data-title="Intro"> <h4 class="text-primary">Library Information</h4> <div class="container-fluid mb-4"> <div id="infoBar" class="row align-items-center"> </div> </div> <hr> <h5 id="tab1sec1" class="mt-4 text-primary bde-arrow-cont" onclick="$(this).next('div').toggle('slow'); $(this).find('.arrow').toggleClass('active');" title="Click to Show/Hide"> <div class="arrow active"></div>Simple Presentation </h5> <div class="text-center"> <pre class="mb-3"><code id="demo-basic" class="language-javascript"></code></pre> <button type="button" class="btn btn-success w-25" onclick="eval( $('#demo-basic').text() )">Basic Slide Demo</button> </div> <h5 id="tab1sec2" class="mt-4 text-primary bde-arrow-cont" onclick="$(this).next('div').toggle('slow'); $(this).find('.arrow').toggleClass('active');" title="Click to Show/Hide"> <div class="arrow"></div>Code Sandbox </h5> <div style="display:none"> <div class="bde-callout-info bg-light"> <div class="h5 mb-1">Editable Code</div> <div class="text-muted">Use the area below to easily try out various library features.</div> </div> <pre class="mb-3"><code id="demo-sandbox" class="language-javascript" contenteditable="true"></code></pre> <button type="button" class="btn btn-success w-25" onclick="eval( $('#demo-sandbox').text() )">Execute Sandbox Code</button> </div> </div> <div id="tab2" data-title="HTML to PowerPoint"> <h4 class="text-primary">HTML to PowerPoint</h4> <p class="text-muted"> Reproduces an HTML table into 1 or more slides (auto-paging) using the syntax <code class="p-1">pptx.addSlidesForTable('tableId');</code><br> View the <a href="https://gitbrent.github.io/PptxGenJS/docs/html-to-powerpoint.html" target="_blank">HTML to PowerPoint documentation</a> for full details and examples </p> <h5 class="mt-4 text-primary bde-arrow-cont" onclick="$(this).next('div').toggle('slow'); $(this).find('.arrow').toggleClass('active');" title="Click to Show/Hide"> <div class="arrow"></div>Usage Notes & Tips </h5> <div class="text-muted mb-4" style="display:none"> Usage: <ul> <li>Supported cell styling includes background colors, borders, fonts, padding, etc.</li> <li>Slide margin settings can be set using options, or by providing a Master Slide definition</li> </ul> Tips: <ul> <li>If you need to modify your table before creating the Presenation, use jQuery to clone() it and do the modifications on that table</li> <li>CSS styles are only supported down to the cell level (word-level formatting is not supported)</li> <li>Nested tables are not supported in PowerPoint, therefore they cannot be reproduced (only the text will be included)</li> </ul> </div> <h5 class="mt-4 text-primary bde-arrow-cont" onclick="$(this).next('div').toggle('slow'); $(this).find('.arrow').toggleClass('active');" title="Click to Show/Hide"> <div class="arrow active"></div>Demo: Options </h5> <div class="container-fluid m-0 p-2"> <div class="row mb-3"> <div class="col-3"> <div class="card"> <h6 class="card-header">Table Setup</h6> <div class="card-body"> <div class="row"> <div class="col"> <label for="numTab2SlideRows" class="text-muted">Table Rows</label> <input id="numTab2SlideRows" class="form-control" type="number" min="1" max="25" value="3" onchange="buildDataTable()"> </div> <div class="col"> <label for="numTab2Padding" class="text-muted">Cell Padding</label> <input id="numTab2Padding" class="form-control" type="number" min="0" max="25" value="5" onchange="$('#tabAutoPaging th, #tabAutoPaging td').css('padding',$('#numTab2Padding').val()+'px')">  </div> </div> <code> </code> </div> </div> </div> <div class="col-6"> <div class="card"> <h6 class="card-header">Paging Options</h6> <div class="card-body"> <div class="row"> <div class="col"> <label class="text-muted">Repeat Table Head on each Slide</label> <div class="form-control"> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="radioHead" id="radioHeadY" value="Y" checked> <label class="form-check-label" for="radioHeadY">Yes</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="radioHead" id="radioHeadN" value="N"> <label class="form-check-label" for="radioHeadN">No</label> </div> </div> <code>addHeaderToEach</code> </div> <div class="col"> <label class="text-muted">Starting top location (<code>y</code>) after first slide</label> <div class="form-check form-check-inline w-100"> <div class="col px-0 text-nowrap"> <div class="form-control"> <input class="form-check-input" type="checkbox" id="checkStartY" onclick="$('#numTab2SlideStartY').prop('disabled',function(i,v){ return !v; });"> <label class="form-check-label" for="checkStartY">Enable?</label> </div> </div> <div class="col px-0"> <input id="numTab2SlideStartY" type="number" class="form-control" min="0" max="10" step="0.5" value="1.5" disabled> </div> </div> <code>newPageStartY</code> </div> </div> </div> </div> </div> <div class="col-3"> <div class="card"> <h6 class="card-header">Master Slide</h6> <div class="card-body"> <div class="row"> <div class="col"> <label class="text-muted">Select a Master Slide</label> <select id="selSlideMaster" class="form-control"><option selected="selected">(None)</option></select> <div> </div> </div> </div> </div> </div> </div> </div> <table id="tabAutoPaging" class="tabDemo"> <thead> <tr> <th data-pptx-min-width="0.6" style="width:5%">Row</th> <th data-pptx-min-width="0.8" style="width:10%">Last Name</th> <th data-pptx-min-width="0.8" style="width:10%">First Name</th> <th style="width:75%; border-right:1px solid rgba(0,255,0,0.7);">Description</th> </tr> </thead> <tbody></tbody> </table> <div class="text-center p-3"> <button type="button" class="btn btn-success w-25 mr-3" onclick="table2slides1()">Demo Table Above</button> <button type="button" class="btn btn-outline-success w-25" onclick="table2slides2()">Demo Table Above (add dynamic text)</button> </div> </div> <h5 class="mt-4 text-primary bde-arrow-cont" onclick="$(this).next('div').toggle('slow'); $(this).find('.arrow').toggleClass('active');" title="Click to Show/Hide"> <div class="arrow"></div>Demo: Table Styles </h5> <div class="container-fluid m-0 p-2" style="display:none;"> <div class="card mb-4"> <h6 class="card-header">Plain/Unstyled Table</h6> <div class="card-body"> <table id="tabNoStyle" class="mb-3 w-100"> <thead> <tr> <th>Name</th> <th>Email</th> <th>Company</th> <th>Feedback</th> </tr> </thead> <tbody> <tr> <td>Elon Musk</td> <td>Elon@tesla.com</td> <td>Tesla Motors & SpaceX</td> <td>PptxGenJS is almost as good as rockets that can land themselves</td> </tr> <tr> <td>Tim Cook</td> <td>tim@apple.com</td> <td>Apple Inc.</td> <td>Jony Ive said the Keynote team needs to hire you</td> </tr> <tr> <td>Satya Nadella</td> <td>ceo@microsoft.com</td> <td>Microsoft Inc.</td> <td>The PowerPoint team needs to hire you</td> </tr> </tbody> </table> <div class="text-center"> <button type="button" class="btn btn-success w-25" onclick="table2slidesDemoForTab('tabNoStyle')">Unstyled Demo</button> </div> </div> </div> <div class="card mb-4"> <h6 class="card-header">CSS via <code><style></code></h6> <div class="card-body"> <table id="tabInheritStyle" class="tabHtmlToPpt mb-3 w-100"> <thead> <tr> <th>Company</th> <th>Contact</th> <th>Feedback</th> </tr> </thead> <tbody> <tr> <td>Tesla & SpaceX</td> <td>Elon@tesla.com</td> <td>PptxGenJS is almost as good as rockets that can land themselves</td> </tr> <tr> <td>Apple Inc.</td> <td>tim@apple.com</td> <td>Jony Ive said the Keynote team needs to hire you</td> </tr> <tr> <td>Microsoft Inc.</td> <td>ceo@microsoft.com</td> <td>The PowerPoint team needs to hire you</td> </tr> </tbody> </table> <div class="text-center"> <button type="button" class="btn btn-success w-25" onclick="table2slidesDemoForTab('tabInheritStyle')">Stylesheet Demo</button> </div> </div> </div> </div> <h5 class="mt-4 text-primary bde-arrow-cont" onclick="$(this).next('div').toggle('slow'); $(this).find('.arrow').toggleClass('active');" title="Click to Show/Hide"> <div class="arrow"></div>Demo: Rowspans/Colspans </h5> <div class="card-deck m-0 p-2" style="display:none;"> <div class="card"> <h6 class="card-header">Colspan</h6> <div class="card-body"> <table id="tabColspan" class="tabHtmlToPpt w-100"> <thead> <tr> <th class="tg-header">First Name</th> <th class="tg-header">Last Name</th> <th class="tg-header" colspan="2">Colspan TH</th> </tr> </thead> <tbody> <tr> <td>Jill</td> <td>Smith</td> <td>12</td> <td>34</td> </tr> <tr> <td>Eve</td> <td>Pilgrim</td> <td>56</td> <td>67</td> </tr> <tr> <td>Scott</td> <td>Jackson</td> <td>89</td> <td>99</td> </tr> </tbody> </table> <div class="mt-3 text-center"> <button type="button" class="btn btn-success w-75" onclick="table2slidesDemoForTab('tabColspan')">Colspan Demo</button> </div> </div> </div> <div class="card"> <h6 class="card-header">Rowspan</h6> <div class="card-body"> <table id="tabRowspan" class="tabHtmlToPpt w-100"> <thead> <tr> <th class="tg-header">Last Name</th> <th class="tg-header">First Name</th> <th class="tg-header">Count</th> </tr> </thead> <tbody> <tr> <td rowspan="3">Smith</td> <td>Liz</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>94</td> </tr> <tr> <td>Scott</td> <td>101</td> </tr> </tbody> </table> <div class="mt-3 text-center"> <button type="button" class="btn btn-success w-75" onclick="table2slidesDemoForTab('tabRowspan')">Rowspan Demo</button> </div> </div> </div> <div cl