### Configure Presentation Timer Source: https://github.com/g21589/pptx2html/blob/master/reveal/plugin/notes/notes.html Initializes a timer and clock display that updates every second. It calculates elapsed time from the start and formats the output for the speaker interface. ```javascript function setupTimer() { var start = new Date(), timeEl = document.querySelector( '.speaker-controls-time' ); function _updateTimer() { var diff = new Date().getTime() - start.getTime(); /* ... calculation logic ... */ } setInterval( _updateTimer, 1000 ); } ``` -------------------------------- ### Define PHP Function Syntax Source: https://github.com/g21589/pptx2html/blob/master/reveal/plugin/markdown/example.html A simple PHP function example demonstrating array initialization. This snippet is used to show syntax highlighting capabilities within the presentation. ```php public function foo() { $foo = array( 'bar' => 'bar' ); } ``` -------------------------------- ### Initialize Presentation Sync and UI Components Source: https://github.com/g21589/pptx2html/blob/master/reveal/plugin/notes-server/notes.html Sets up socket connections, initializes iframes for current and upcoming slides, and configures event listeners for keyboard inputs and state changes. It ensures the speaker view remains synchronized with the main presentation. ```javascript (function() { var notes, notesValue, currentState, currentSlide, upcomingSlide, connected = false; var socket = io.connect( window.location.origin ), socketId = '{{socketId}}'; socket.on( 'statechanged', function( data ) { if( data.socketId !== socketId ) { return; } if( connected === false ) { connected = true; setupKeyboard(); setupNotes(); setupTimer(); } handleStateMessage( data ); } ); setupIframes(); window.addEventListener( 'message', function( event ) { var data = JSON.parse( event.data ); if( data && data.namespace === 'reveal' ) { if( /ready/.test( data.eventName ) ) { socket.emit( 'new-subscriber', { socketId: socketId } ); } } if( data && data.namespace === 'reveal' ) { if( /slidechanged|fragmentshown|fragmenthidden|overviewshown|overviewhidden|paused|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) { socket.emit( 'statechanged-speaker', { state: data.state } ); } } } ); })(); ``` -------------------------------- ### PPTX Conversion Entry Point - JavaScript Source: https://context7.com/g21589/pptx2html/llms.txt The `processPPTX` function initiates the conversion of a PPTX file to HTML. It's designed to be run within a Web Worker, receiving the file data as an ArrayBuffer from the main thread. The process involves parsing the ZIP archive, content types, themes, and then iterating through each slide. ```javascript var worker = new Worker('./js/worker.js'); var reader = new FileReader(); reader.onload = function(e) { worker.postMessage({ "type": "processPPTX", "data": e.target.result // ArrayBuffer of the PPTX file }); }; reader.readAsArrayBuffer(pptxFile); // Inside worker.js: // var zip = new JSZip(data); // var filesInfo = getContentTypes(zip); // var slideSize = getSlideSize(zip); // themeContent = loadTheme(zip); // For each slide: processSingleSlide(zip, filename, i, slideSize); ``` -------------------------------- ### Initialize Reveal.js Configuration Source: https://github.com/g21589/pptx2html/blob/master/reveal/plugin/markdown/example.html The JavaScript configuration object for Reveal.js. It defines global presentation settings and loads necessary dependencies like Markdown parsers and syntax highlighters. ```javascript Reveal.initialize({ controls: true, progress: true, history: true, center: true, dependencies: [ { src: '../../lib/js/classList.js', condition: function() { return !document.body.classList; } }, { src: 'marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: 'markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: '../highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, { src: '../notes/notes.js' } ] }); ``` -------------------------------- ### Initialize Reveal.js Speaker Notes Messaging Source: https://github.com/g21589/pptx2html/blob/master/reveal/plugin/notes/notes.html Sets up an event listener to handle cross-window messages using the postMessage API. It coordinates connections and state updates between the presentation and the notes interface. ```javascript window.addEventListener( 'message', function( event ) { var data = JSON.parse( event.data ); if( data && data.namespace === 'reveal-notes' ) { if( data.type === 'connect' ) { handleConnectMessage( data ); } else if( data.type === 'state' ) { handleStateMessage( data ); } } } ); ``` -------------------------------- ### JavaScript for Loading and Initializing Reveal.js Presentation Source: https://github.com/g21589/pptx2html/blob/master/reveal/demo.html This JavaScript code snippet handles the loading and decompression of presentation slides from local storage and initializes the Reveal.js framework. It checks for browser support for Web Storage, decompresses slide data using LZString, and configures Reveal.js with specified dimensions, controls, and a highlight.js dependency. ```javascript if (localStorage) { document.getElementById("target").innerHTML = LZString.decompressFromUTF16(localStorage.getItem("slides")); } else { alert("Browser don't support Web Storage!"); } Reveal.initialize({ width: +localStorage.getItem("slideWidth"), height: +localStorage.getItem("slideHeight"), controls: true, progress: true, history: true, center: true, transition: 'convex', dependencies: [ { src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector('pre code'); }, callback: function() { hljs.initHighlightingOnLoad(); } } ] }); ``` -------------------------------- ### XML Parsing and Simplification Source: https://github.com/g21589/pptx2html/blob/master/test/xmlTest.html This snippet demonstrates parsing an XML string and then simplifying the parsed structure. It utilizes functions like tXml and simplefy. The output is then stringified for display. Performance is measured using performance.now(). ```JavaScript var a = performance.now(); var output2 = simplefy(tXml(xml)); var b = performance.now(); document.getElementById("output1").innerHTML = JSON.stringify(tXml(xml)); document.getElementById("output2").innerHTML = JSON.stringify(output2); document.getElementById("rt").innerHTML = 'It took ' + (b - a) + ' ms.'; ``` -------------------------------- ### Implement Speaker Timer and Clock Source: https://github.com/g21589/pptx2html/blob/master/reveal/plugin/notes-server/notes.html Creates a live timer and clock display for the speaker interface. It calculates elapsed time since initialization and updates the DOM elements every second. ```javascript function setupTimer() { var start = new Date(), timeEl = document.querySelector( '.speaker-controls-time' ), clockEl = timeEl.querySelector( '.clock-value' ), hoursEl = timeEl.querySelector( '.hours-value' ), minutesEl = timeEl.querySelector( '.minutes-value' ), secondsEl = timeEl.querySelector( '.seconds-value' ); function _updateTimer() { var diff, hours, minutes, seconds, now = new Date(); diff = now.getTime() - start.getTime(); hours = Math.floor( diff / ( 1000 * 60 * 60 ) ); minutes = Math.floor( ( diff / ( 1000 * 60 ) ) % 60 ); seconds = Math.floor( ( diff / 1000 ) % 60 ); clockEl.innerHTML = now.toLocaleTimeString( 'en-US', { hour12: true, hour: '2-digit', minute:'2-digit' } ); hoursEl.innerHTML = zeroPadInteger( hours ); minutesEl.innerHTML = ':' + zeroPadInteger( minutes ); secondsEl.innerHTML = ':' + zeroPadInteger( seconds ); } setInterval( _updateTimer, 1000 ); } ``` -------------------------------- ### Initialize Web Worker for PPTX Processing Source: https://context7.com/g21589/pptx2html/llms.txt Handles file input via FileReader and initializes a Web Worker to process PPTX files asynchronously. It listens for various message types from the worker to update the UI, including progress, slide content, and metadata. ```javascript $(document).ready(function() { if (window.Worker) { var $result = $("#result"); var isDone = false; $("#uploadBtn").on("change", function(evt) { isDone = false; $result.html(""); var fileName = evt.target.files[0]; var reader = new FileReader(); reader.onload = function(e) { var worker = new Worker('./js/worker.js'); worker.addEventListener('message', function(e) { var msg = e.data; switch(msg.type) { case "progress-update": $("#load-progress").text(msg.data.toFixed(2) + "%").css("width", msg.data.toFixed(2) + "%"); break; case "slide": $result.append(msg.data); break; case "pptx-thumb": $("#pptx-thumb").attr("src", "data:image/jpeg;base64," + msg.data); break; case "slideSize": localStorage.setItem("slideWidth", msg.data.width); localStorage.setItem("slideHeight", msg.data.height); break; case "globalCSS": $result.append(""); break; case "ExecutionTime": $("#info_block").html("Execution Time: " + msg.data + " (ms)"); isDone = true; worker.postMessage({ "type": "getMsgQueue" }); break; case "processMsgQueue": processMsgQueue(msg.data); break; } }); worker.postMessage({ "type": "processPPTX", "data": e.target.result }); }; reader.readAsArrayBuffer(fileName); }); } }); ``` -------------------------------- ### Export PPTX to Reveal.js Presentation Source: https://context7.com/g21589/pptx2html/llms.txt Provides functionality to store converted slides in localStorage for immediate viewing or to download them as a standalone HTML file configured for Reveal.js. ```javascript $("#to-reveal-btn").click(function() { if (localStorage) { localStorage.setItem("slides", LZString.compressToUTF16($result.html())); window.open("./reveal/demo.html", "_blank"); } }); $("#download-reveal-btn").click(function() { if (!isDone) { return; } $.get("css/pptx2html.css", function(cssText) { var revealConfig = ""; var headHtml = ""; var bodyHtml = "
" + $result.html() + "
"; var html = revealConfig + headHtml + bodyHtml; var blob = new Blob([html], { type: "text/html;charset=utf-8" }); saveAs(blob, "slides.html"); }); }); ``` -------------------------------- ### Process and Embed Images with processPicNode (JavaScript) Source: https://context7.com/g21589/pptx2html/llms.txt The `processPicNode` function extracts images from a PPTX file, converts them to base64 data URIs, and generates an HTML `div` element for inline display. It determines image type, extracts data from a ZIP archive, and applies positioning and sizing styles. Dependencies include `extractFileExtension`, `getPosition`, `getSize`, and `base64ArrayBuffer`. ```javascript function processPicNode(node, warpObj) { var order = node["attrs"]["order"]; // Get image reference from relationships var rid = node["p:blipFill"]["a:blip"]["attrs"]["r:embed"]; var imgName = warpObj["slideResObj"][rid]["target"]; var imgFileExt = extractFileExtension(imgName).toLowerCase(); // Extract image from ZIP as ArrayBuffer var zip = warpObj["zip"]; var imgArrayBuffer = zip.file(imgName).asArrayBuffer(); // Determine MIME type var mimeType = ""; switch (imgFileExt) { case "jpg": case "jpeg": mimeType = "image/jpeg"; break; case "png": mimeType = "image/png"; break; case "gif": mimeType = "image/gif"; break; } // Get position and size var xfrmNode = node["p:spPr"]["a:xfrm"]; // Return HTML with base64 image return "
" + "
"; } ``` -------------------------------- ### Zero-Pad Integer in JavaScript Source: https://github.com/g21589/pptx2html/blob/master/reveal/plugin/notes/notes.html Formats an integer by prepending leading zeros to ensure it has a minimum length of two digits. This is useful for displaying numbers like hours or minutes. ```javascript function zeroPadInteger( num ) { var str = '00' + parseInt( num ); return str.substring( str.length - 2 ); } ``` -------------------------------- ### Styling reveal.js Speaker Notes and Controls (CSS) Source: https://github.com/g21589/pptx2html/blob/master/reveal/plugin/notes/notes.html This CSS code styles the various components of the reveal.js speaker notes interface. It defines the layout for current and upcoming slides, speaker controls, timers, and clocks. It also includes responsive adjustments for different screen sizes. ```css body { font-family: Helvetica; } #current-slide, #upcoming-slide, #speaker-controls { padding: 6px; box-sizing: border-box; -moz-box-sizing: border-box; } #current-slide iframe, #upcoming-slide iframe { width: 100%; height: 100%; border: 1px solid #ddd; } #current-slide .label, #upcoming-slide .label { position: absolute; top: 10px; left: 10px; font-weight: bold; font-size: 14px; z-index: 2; color: rgba( 255, 255, 255, 0.9 ); } #current-slide { position: absolute; width: 65%; height: 100%; top: 0; left: 0; padding-right: 0; } #upcoming-slide { position: absolute; width: 35%; height: 40%; right: 0; top: 0; } #speaker-controls { position: absolute; top: 40%; right: 0; width: 35%; height: 60%; overflow: auto; font-size: 18px; } .speaker-controls-time.hidden, .speaker-controls-notes.hidden { display: none; } .speaker-controls-time .label, .speaker-controls-notes .label { text-transform: uppercase; font-weight: normal; font-size: 0.66em; color: #666; margin: 0; } .speaker-controls-time { border-bottom: 1px solid rgba( 200, 200, 200, 0.5 ); margin-bottom: 10px; padding: 10px 16px; padding-bottom: 20px; cursor: pointer; } .speaker-controls-time .reset-button { opacity: 0; float: right; color: #666; text-decoration: none; } .speaker-controls-time:hover .reset-button { opacity: 1; } .speaker-controls-time .timer, .speaker-controls-time .clock { width: 50%; font-size: 1.9em; } .speaker-controls-time .timer { float: left; } .speaker-controls-time .clock { float: right; text-align: right; } .speaker-controls-time span.mute { color: #bbb; } .speaker-controls-notes { padding: 10px 16px; } .speaker-controls-notes .value { margin-top: 5px; line-height: 1.4; font-size: 1.2em; } .clear { clear: both; } @media screen and (max-width: 1080px) { #speaker-controls { font-size: 16px; } } @media screen and (max-width: 900px) { #speaker-controls { font-size: 14px; } } @media screen and (max-width: 800px) { #speaker-controls { font-size: 12px; } } ``` -------------------------------- ### Styling reveal.js Speaker Controls and Slides Source: https://github.com/g21589/pptx2html/blob/master/reveal/plugin/notes-server/notes.html This CSS code styles the various components of the reveal.js presentation framework, including the main slides, speaker controls, timers, and notes. It ensures a responsive and organized layout for presenter-facing information. ```css body { font-family: Helvetica; } #current-slide, #upcoming-slide, #speaker-controls { padding: 6px; box-sizing: border-box; -moz-box-sizing: border-box; } #current-slide iframe, #upcoming-slide iframe { width: 100%; height: 100%; border: 1px solid #ddd; } #current-slide .label, #upcoming-slide .label { position: absolute; top: 10px; left: 10px; font-weight: bold; font-size: 14px; z-index: 2; color: rgba( 255, 255, 255, 0.9 ); } #current-slide { position: absolute; width: 65%; height: 100%; top: 0; left: 0; padding-right: 0; } #upcoming-slide { position: absolute; width: 35%; height: 40%; right: 0; top: 0; } #speaker-controls { position: absolute; top: 40%; right: 0; width: 35%; height: 60%; font-size: 18px; } .speaker-controls-time.hidden, .speaker-controls-notes.hidden { display: none; } .speaker-controls-time .label, .speaker-controls-notes .label { text-transform: uppercase; font-weight: normal; font-size: 0.66em; color: #666; margin: 0; } .speaker-controls-time { border-bottom: 1px solid rgba( 200, 200, 200, 0.5 ); margin-bottom: 10px; padding: 10px 16px; padding-bottom: 20px; cursor: pointer; } .speaker-controls-time .reset-button { opacity: 0; float: right; color: #666; text-decoration: none; } .speaker-controls-time:hover .reset-button { opacity: 1; } .speaker-controls-time .timer, .speaker-controls-time .clock { width: 50%; font-size: 1.9em; } .speaker-controls-time .timer { float: left; } .speaker-controls-time .clock { float: right; text-align: right; } .speaker-controls-time span.mute { color: #bbb; } .speaker-controls-notes { padding: 10px 16px; } .speaker-controls-notes .value { margin-top: 5px; line-height: 1.4; font-size: 1.2em; } .clear { clear: both; } @media screen and (max-width: 1080px) { #speaker-controls { font-size: 16px; } } @media screen and (max-width: 900px) { #speaker-controls { font-size: 14px; } } @media screen and (max-width: 800px) { #speaker-controls { font-size: 12px; } } ``` -------------------------------- ### getTextByPathList - XML Path Navigation Source: https://context7.com/g21589/pptx2html/llms.txt Navigates through nested XML objects using an array of keys to safely retrieve values. ```APIDOC ## FUNCTION getTextByPathList ### Description Navigates through a nested JavaScript object (parsed from XML) using a path array to retrieve specific values without manual null checking. ### Parameters - **node** (Object) - Required - The root XML node object to traverse. - **path** (Array) - Required - An array of strings representing the keys to traverse in order. ### Returns - **value** (*) - The value found at the specified path, or undefined if the path does not exist. ### Usage Example ```javascript var fontSize = getTextByPathList(node, ["a:rPr", "attrs", "sz"]); ``` ``` -------------------------------- ### CSS Styling for Presentation Layout Source: https://github.com/g21589/pptx2html/blob/master/reveal/demo.html This CSS defines various layout and alignment properties for presentation slides and their content. It includes styles for sections, blocks, content alignment (vertical and horizontal), text blocks, slides, and footers. It also contains styles for tables and SVGs used within the presentation. ```css section { width: 100%; height: 690px; position: relative; text-align: center; overflow: hidden; } section div.block { position: absolute; top: 0px; left: 0px; width: 100%; } section div.content { display: flex; flex-direction: column; } section div.v-up { justify-content: flex-start; } section div.v-mid { justify-content: center; } section div.v-down { justify-content: flex-end; } section div.h-left { align-items: flex-start; text-align: left; } section div.h-mid { align-items: center; text-align: center; } section div.h-right { align-items: flex-end; text-align: right; } section div.up-left { justify-content: flex-start; align-items: flex-start; text-align: left; } section div.up-center { justify-content: flex-start; align-items: center; } section div.up-right { justify-content: flex-start; align-items: flex-end; } section div.center-left { justify-content: center; align-items: flex-start; text-align: left; } section div.center-center { justify-content: center; align-items: center; } section div.center-right { justify-content: center; align-items: flex-end; } section div.down-left { justify-content: flex-end; align-items: flex-start; text-align: left; } section div.down-center { justify-content: flex-end; align-items: center; } section div.down-right { justify-content: flex-end; align-items: flex-end; } section span.text-block { } li.slide { margin: 10px 0px; font-size: 18px; } div.footer { text-align: center; } section table { position: absolute; } section table, section th, section td { border: 1px solid black; } section svg.drawing { position: absolute; overflow: visible; } section img { all: initial; } ``` -------------------------------- ### Parse and Simplify XML Source: https://github.com/g21589/pptx2html/blob/master/test/xmlTest.html The tXml function parses an XML string into a hierarchical array of nodes, while the simplefy function transforms this array into a more accessible object format, adding an 'order' attribute to each element. ```javascript var _order = 1; function tXml(S) { "use strict"; var openBracket = "<"; var openBracketCC = "<".charCodeAt(0); var closeBracket = ">"; var closeBracketCC = ">".charCodeAt(0); var minusCC = "-".charCodeAt(0); var slashCC = "/".charCodeAt(0); var exclamationCC = '!'.charCodeAt(0); var singleQuoteCC = "'".charCodeAt(0); var doubleQuoteCC = '"'.charCodeAt(0); var questionMarkCC = '?'.charCodeAt(0); var nameSpacer = "\r\n\t>/= "; var pos = 0; function parseChildren() { var children = []; while (S[pos]) { if (S.charCodeAt(pos) == openBracketCC) { if (S.charCodeAt(pos+1) === slashCC) { pos = S.indexOf(closeBracket, pos); return children; } else if (S.charCodeAt(pos+1) === exclamationCC) { if (S.charCodeAt(pos+2) == minusCC) { while (!(S.charCodeAt(pos) === closeBracketCC && S.charCodeAt(pos-1) == minusCC && S.charCodeAt(pos-2) == minusCC && pos != -1)) { pos = S.indexOf(closeBracket, pos+1); } if (pos === -1) { pos = S.length; } } else { pos += 2; for (; S.charCodeAt(pos) !== closeBracketCC; pos++) {} } pos++; continue; } else if (S.charCodeAt(pos+1) === questionMarkCC) { pos = S.indexOf(closeBracket, pos); pos++; continue; } pos++; var startNamePos = pos; for (; nameSpacer.indexOf(S[pos]) === -1; pos++) {} var node_tagName = S.slice(startNamePos, pos); var attrFound = false; var node_attributes = {}; for (; S.charCodeAt(pos) !== closeBracketCC; pos++) { var c = S.charCodeAt(pos); if ((c > 64 && c < 91) || (c > 96 && c < 123)) { startNamePos = pos; for (; nameSpacer.indexOf(S[pos]) === -1; pos++) {} var name = S.slice(startNamePos, pos); var code = S.charCodeAt(pos); while (code !== singleQuoteCC && code !== doubleQuoteCC) { pos++; code = S.charCodeAt(pos); } var startChar = S[pos]; var startStringPos= ++pos; pos = S.indexOf(startChar, startStringPos); var value = S.slice(startStringPos, pos); if (!attrFound) { node_attributes = {}; attrFound = true; } node_attributes[name] = value; } } if (S.charCodeAt(pos-1) !== slashCC) { pos++; var node_children = parseChildren(); } children.push({ "children": node_children, "tagName": node_tagName, "attrs": node_attributes }); } else { var startTextPos = pos; pos = S.indexOf(openBracket, pos) - 1; if (pos === -2) { pos = S.length; } var text = S.slice(startTextPos, pos + 1); if (text.trim().length > 0) { children.push(text); } } pos++; } return children; } _order = 1; return parseChildren(); } function simplefy(children) { var node = {}; if (children === undefined) { return {}; } if (children.length === 1 && typeof children[0] == 'string') { return children[0]; } children.forEach(function (child) { if (!node[child.tagName]) { node[child.tagName] = []; } if (typeof child === 'object') { var kids = simplefy(child.children); if (child.attrs) { kids.attrs = child.attrs; } if (kids["attrs"] === undefined) { kids["attrs"] = {"order": _order}; } else { kids["attrs"]["order"] = _order; } _order++; node[child.tagName].push(kids); } }); for (var i in node) { if (node[i].length == 1) { node[i] = node[i][0]; } } return node; }; ``` -------------------------------- ### PPTX Node Type Router - JavaScript Source: https://context7.com/g21589/pptx2html/llms.txt The `processNodesInSlide` function acts as a router, directing different types of XML nodes found within a slide (shapes, pictures, charts, tables, groups) to their specific processing functions. This allows for modular handling of various presentation elements. ```javascript function processNodesInSlide(nodeKey, nodeValue, warpObj) { var result = ""; switch (nodeKey) { case "p:sp": // Shape, Text result = processSpNode(nodeValue, warpObj); break; case "p:cxnSp": // Connection Shape result = processCxnSpNode(nodeValue, warpObj); break; case "p:pic": // Picture result = processPicNode(nodeValue, warpObj); break; case "p:graphicFrame": // Chart, Diagram, Table result = processGraphicFrameNode(nodeValue, warpObj); break; case "p:grpSp": // Group result = processGroupSpNode(nodeValue, warpObj); break; } return result; } // Node types and their HTML output: // p:sp ->
with text spans // p:pic ->
// p:grpSp ->
containing nested elements ``` -------------------------------- ### Implement Debounce Utility in JavaScript Source: https://github.com/g21589/pptx2html/blob/master/reveal/plugin/notes-server/notes.html A higher-order function that wraps a callback to ensure it only executes after a specified number of milliseconds have passed since the last invocation. It manages internal timing using setTimeout and Date.now to handle execution context and arguments correctly. ```javascript (function() { window.debounce = function(fn, ms) { var lastTime = 0, timeout; return function() { var args = arguments; var context = this; clearTimeout(timeout); var timeSinceLastCall = Date.now() - lastTime; if (timeSinceLastCall > ms) { fn.apply(context, args); lastTime = Date.now(); } else { timeout = setTimeout(function() { fn.apply(context, args); lastTime = Date.now(); }, ms - timeSinceLastCall); } }; }; })(); ``` -------------------------------- ### genTextBody - Text Content Generator Source: https://context7.com/g21589/pptx2html/llms.txt Processes PowerPoint text body elements to generate HTML divs and spans with proper formatting, including font styles, colors, alignment, and bullet points. ```APIDOC ## genTextBody - Text Content Generator ### Description Processes PowerPoint text body elements, generating HTML divs and spans with proper formatting including font styles, colors, alignment, and bullet points. ### Method ```javascript function genTextBody(textBodyNode, slideLayoutSpNode, slideMasterSpNode, type, warpObj) ``` ### Parameters - `textBodyNode` (object) - The node representing the text body. - `slideLayoutSpNode` (object) - Slide layout specific node. - `slideMasterSpNode` (object) - Slide master specific node. - `type` (string) - Type of element being processed. - `warpObj` (object) - Object containing slide master text styles and resource objects. ### Request Example ```json { "textBodyNode": { ... }, "slideLayoutSpNode": { ... }, "slideMasterSpNode": { ... }, "type": "body", "warpObj": { "slideMasterTextStyles": { ... }, "slideResObj": { ... } } } ``` ### Response Example ```html
First paragraph text
• Bullet point item
``` ``` -------------------------------- ### Generate HTML Table from PowerPoint Data (JavaScript) Source: https://context7.com/g21589/pptx2html/llms.txt The genTable function converts PowerPoint table structures into HTML `` elements. It handles positioning, sizing, row spans, and column spans using data extracted from the PowerPoint XML. Dependencies include helper functions like getTextByPathList, getPosition, getSize, and genTextBody. ```javascript function genTable(node, warpObj) { var order = node["attrs"]["order"]; var tableNode = getTextByPathList(node, ["a:graphic", "a:graphicData", "a:tbl"]); var xfrmNode = getTextByPathList(node, ["p:xfrm"]); // Create positioned table element var tableHtml = "
"; // Process table rows var trNodes = tableNode["a:tr"]; for (var i = 0; i < trNodes.length; i++) { tableHtml += ""; var tcNodes = trNodes[i]["a:tc"]; for (var j = 0; j < tcNodes.length; j++) { var text = genTextBody(tcNodes[j]["a:txBody"], ...); var rowSpan = getTextByPathList(tcNodes[j], ["attrs", "rowSpan"]); var colSpan = getTextByPathList(tcNodes[j], ["attrs", "gridSpan"]); if (rowSpan !== undefined) { tableHtml += "
``` -------------------------------- ### Individual Slide Processing - JavaScript Source: https://context7.com/g21589/pptx2html/llms.txt The `processSingleSlide` function handles the conversion of a single PPTX slide into an HTML `
` element. It parses slide relationships, layout, master slide data, and slide content XML to extract shapes, text, images, charts, and tables, then generates the corresponding HTML structure with styling. ```javascript function processSingleSlide(zip, sldFileName, index, slideSize) { var resName = sldFileName.replace("slides/slide", "slides/_rels/slide") + ".rels"; var resContent = readXmlFile(zip, resName); var slideLayoutContent = readXmlFile(zip, layoutFilename); var slideMasterContent = readXmlFile(zip, masterFilename); var slideContent = readXmlFile(zip, sldFileName); var nodes = slideContent["p:sld"]["p:cSld"]["p:spTree"]; var result = "
"; for (var nodeKey in nodes) { result += processNodesInSlide(nodeKey, nodes[nodeKey], warpObj); } return result + "
"; } // Output example: //
//
// Slide Title //
//
``` -------------------------------- ### Navigate XML with Array Path - JavaScript Source: https://context7.com/g21589/pptx2html/llms.txt Safely retrieves nested values from parsed XML objects using an array of keys as a path. Handles undefined nodes and invalid path types, returning the value at the specified path or undefined if not found. Useful for extracting specific attributes or elements from complex XML structures. ```javascript /** * Navigate through nested object using path array * @param {Object} node - Root XML node object * @param {Array} path - Array of keys to traverse * @returns {*} Value at path or undefined */ function getTextByPathList(node, path) { if (path.constructor !== Array) { throw Error("Error of path type! path is not array."); } if (node === undefined) { return undefined; } for (var i = 0; i < path.length; i++) { node = node[path[i]]; if (node === undefined) { return undefined; } } return node; } // Usage examples: var fontSize = getTextByPathList(node, ["a:rPr", "attrs", "sz"]); // Returns font size in hundredths of a point (e.g., 1800 = 18pt) var fillColor = getTextByPathList(node, ["p:spPr", "a:solidFill", "a:srgbClr", "attrs", "val"]); // Returns hex color value (e.g., "4472C4") var shapeType = getTextByPathList(node, ["p:spPr", "a:prstGeom", "attrs", "prst"]); // Returns shape preset name (e.g., "rect", "ellipse", "roundRect") ``` -------------------------------- ### Generate SVG Shapes with genShape (JavaScript) Source: https://context7.com/g21589/pptx2html/llms.txt The `genShape` function generates SVG elements for various PowerPoint shapes like rectangles, ellipses, and lines. It handles shape type, fill color, and border styles, outputting a complete SVG string with positioning and sizing information. Dependencies include helper functions like `getTextByPathList`, `getShapeFill`, `getBorder`, `getPosition`, and `getSize`. ```javascript function genShape(node, slideLayoutSpNode, slideMasterSpNode, id, name, idx, type, order, warpObj) { var shapType = getTextByPathList(node, ["p:spPr", "a:prstGeom", "attrs", "prst"]); var fillColor = getShapeFill(node, true); var border = getBorder(node, true); // SVG container with positioning var result = ""; break; case "ellipse": result += ""; break; case "roundRect": result += ""; break; case "line": case "straightConnector1": result += ""; break; } result += ""; return result; } ``` -------------------------------- ### PPTX Slide XML Structure Source: https://github.com/g21589/pptx2html/blob/master/DevNote.md Represents the hierarchical structure of a PowerPoint slide element, including common slide data, shape containers, and non-visual properties. It highlights the use of placeholder attributes for linking shapes across slide types. ```xml ``` -------------------------------- ### genSpanElement - Text Span with Styling Source: https://context7.com/g21589/pptx2html/llms.txt Creates HTML span elements with CSS classes for text formatting including font color, size, family, weight, style, and decoration. Handles hyperlinks. ```APIDOC ## genSpanElement - Text Span with Styling ### Description Creates HTML span elements with CSS classes for text formatting including font color, size, family, weight, style, and decoration. Handles hyperlinks. ### Method ```javascript function genSpanElement(node, slideLayoutSpNode, slideMasterSpNode, type, warpObj) ``` ### Parameters - `node` (object) - The node representing the text run. - `slideLayoutSpNode` (object) - Slide layout specific node. - `slideMasterSpNode` (object) - Slide master specific node. - `type` (string) - Type of element being processed. - `warpObj` (object) - Object containing slide master text styles and resource objects. ### Request Example ```json { "node": { ... }, "slideLayoutSpNode": { ... }, "slideMasterSpNode": { ... }, "type": "run", "warpObj": { "slideMasterTextStyles": { ... }, "slideResObj": { ... } } } ``` ### Response Example ```html Regular text Link text ``` ``` -------------------------------- ### Calculate Pixel from EMUs Source: https://github.com/g21589/pptx2html/blob/master/DevNote.md Calculates the pixel value from English Metric Units (EMUs) based on a specified screen resolution. The formula uses a standard conversion factor of 914400 EMUs per inch. ```mathematics Pixel = EMUs * Resolution / 914400; ``` -------------------------------- ### base64ArrayBuffer - Binary to Base64 Conversion Source: https://context7.com/g21589/pptx2html/llms.txt Converts binary ArrayBuffer data into a base64 encoded string, commonly used for embedding images as data URIs. ```APIDOC ## FUNCTION base64ArrayBuffer ### Description Converts raw binary data from an ArrayBuffer into a standard base64 string format. ### Parameters - **arrayBuffer** (ArrayBuffer) - Required - The binary data to be converted. ### Returns - **string** (string) - The base64 encoded representation of the input buffer. ### Usage Example ```javascript var imgData = base64ArrayBuffer(zip.file("ppt/media/image1.jpg").asArrayBuffer()); var imgTag = ""; ``` ``` -------------------------------- ### Generate HTML for PowerPoint Text Body - JavaScript Source: https://context7.com/g21589/pptx2html/llms.txt The genTextBody function processes PowerPoint text body nodes to generate HTML divs and spans. It handles multiple paragraphs, bullet points, and applies horizontal alignment. Dependencies include helper functions like getHorizontalAlign and genBuChar. ```javascript function genTextBody(textBodyNode, slideLayoutSpNode, slideMasterSpNode, type, warpObj) { var text = ""; var slideMasterTextStyles = warpObj["slideMasterTextStyles"]; if (textBodyNode["a:p"].constructor === Array) { // Process multiple paragraphs for (var i = 0; i < textBodyNode["a:p"].length; i++) { var pNode = textBodyNode["a:p"][i]; var rNode = pNode["a:r"]; // Run elements (text with formatting) // Paragraph container with horizontal alignment text += "
"; text += genBuChar(pNode); // Bullet character if present if (rNode.constructor === Array) { // Multiple text runs with different formatting for (var j = 0; j < rNode.length; j++) { text += genSpanElement(rNode[j], ...); } } else { text += genSpanElement(rNode, ...); } text += "
"; } } return text; } ``` -------------------------------- ### Generate Chart from PowerPoint Data (JavaScript) Source: https://context7.com/g21589/pptx2html/llms.txt The genChart function extracts chart data from embedded Excel files within PowerPoint presentations. It creates placeholder divs and prepares data structures for rendering interactive D3.js/NVD3 charts. Dependencies include helper functions like getTextByPathList, getPosition, getSize, readXmlFile, and extractChartData, along with a global MsgQueue and chartID counter. ```javascript function genChart(node, warpObj) { var order = node["attrs"]["order"]; var xfrmNode = getTextByPathList(node, ["p:xfrm"]); // Create chart container div var result = "
"; // Get chart data from embedded file var rid = node["a:graphic"]["a:graphicData"]["c:chart"]["attrs"]["r:id"]; var refName = warpObj["slideResObj"][rid]["target"]; var content = readXmlFile(warpObj["zip"], refName); var plotArea = getTextByPathList(content, ["c:chartSpace", "c:chart", "c:plotArea"]); // Determine chart type and extract data var chartData; for (var key in plotArea) { switch (key) { case "c:lineChart": chartData = { "type": "createChart", "data": { "chartID": "chart" + chartID, "chartType": "lineChart", "chartData": extractChartData(plotArea[key]["c:ser"]) } }; break; case "c:barChart": chartData = { ... "chartType": "barChart", ... }; break; case "c:pieChart": chartData = { ... "chartType": "pieChart", ... }; break; case "c:scatterChart": chartData = { ... "chartType": "scatterChart", ... }; break; } } // Queue chart for rendering MsgQueue.push(chartData); chartID++; return result; } // Chart is rendered in main thread using NVD3: // d3.select("#chart0") // .append("svg") // .datum(data) // .call(nv.models.barChart()); ``` -------------------------------- ### Debounce Function Calls in JavaScript Source: https://github.com/g21589/pptx2html/blob/master/reveal/plugin/notes/notes.html Limits the rate at which a function can be called. It ensures that a function is only executed after a specified delay has passed since the last invocation. This is commonly used for event handlers like window resizing or input field changes to improve performance. ```javascript function debounce( fn, ms ) { var lastTime = 0, timeout; return function() { var args = arguments; var context = this; clearTimeout( timeout ); var timeSinceLastCall = Date.now() - lastTime; if( timeSinceLastCall > ms ) { fn.apply( context, args ); lastTime = Date.now(); } else { timeout = setTimeout( function() { fn.apply( context, args ); lastTime = Date.now(); }, ms - timeSinceLastCall ); } } } ```