http://excel.fit.vutbr.cz

PPTX to HTML ConversionHynek Vilı́mek*

AbstractPowerPoint is an excellent tool for creating presentations and people are accustomed to use it. Itsonly handicap is that it is not installed everywhere and it exists in numerous versions. But thereis an application that is installed almost everywhere and that application is the web browser. Thiswork aims to create the PowerPoint presentation viewer for the web browser. With the internetas the environment, it may have a wide range of applications from the content sharing point ofview. The solution is the web application that allows to upload the PowerPoint file and then theapplication displays the content of the file. The application also offers functionality such as thenavigation between slides and the full-screen mode. The rendered slides in the web browser arevery similar to the slides in the PowerPoint. It clearly does not support advanced features, but itsupports displaying text, pictures, video and audio. Further, it supports basic styling options suchas colours, margins, position and line height. This work shows current possibilities of the webenvironment and the web development. Moreover, this application may be a core of some start-upproject.

Keywords: PowerPoint converter — PowerPoint to HTML — PowerPoint presentation viewer

Supplementary Material: Demonstration Video*xvilim04@stud.fit.vutbr.cz, Faculty of Information Technology, Brno University of Technology

1. IntroductionMy work allows people to view the PowerPoint pre-sentation on each computer, which has a newer webbrowser version. This can fulfil the need of portabil-ity and flexibility, because no one will be forced tocheck if the PowerPoint is installed and in what ver-sion. The application also gives the presentations theshare-ability. Each presentation is possible to addressby URL and the same is true for each slide.

The solution consists of three parts. The first partextracts the information from the presentation file.This results in the part with a clearly specified inputand output. The input is the presentation file and theoutput is the internal representation of the presentation.This can be easily evaluated by the unit tests. The

second part interprets the internal representation of thepresentation and displays it as PowerPoint. This partresults in the application that takes the internal repre-sentation and visually interprets it. The precision ofthe interpretation can be evaluated by the comparisonof the reference image generated by the PowerPointand the image of the actual result. The third part isthe part of the application that surrounds the secondpart and adds features like a full-screen mode, naviga-tion and asynchronous data loading. This can be alsoevaluated by the unit tests.

The existing solutions do not offer the same levelof user experience as my application. The first foundsolution is the web application called Zamzar. It offersa PowerPoint to HTML conversion, but it generates a

actioncreator

dispatcher reducer

applicationstate

user interaction

changeapplication state

render connected components

connectedcomponents

application

Figure 1. Processing the synchronous action through the application

zip archive, which is delivered to the previously filledemail. The main difference is in the result of the con-version. It converts slides into images and places textover it. It does not support video, audio and the methodof conversion is not suitable for display scaling. Thisservice fulfils the function of partly viewing the con-tent of the presentation file, but clearly does not fulfilthe function to view it in the presentation mode. Thesecond solution is from Microsoft itself and it is of-fered in the package called Office 365. But it alsorenders slides into images and uses SVG technology toset the correct position. The result of this applicationis better, but it still renders text into image, which isnot optimal solution. In addition, this is a paid so-lution. The third solution is from Google and it isimplemented as part of the Google Drive and GoogleSlides. These applications are not usable, because theyhave for example problems with fonts and margins.They clearly do not aim to the same use cases, butthey aim to fulfil the need of a simple viewer for thePowerPoint presentations and they also allow to createnew ones.

My solution is the web application and it consistsof the server side part and the client side part. Theserver side part is responsible for extracting the infor-mation from the uploaded file and for their transfor-mation to the internal representation. The client sidepart visually displays this representation and offerssome functionality of the presentation mode from thePowerPoint. It supports timed transitions, full-screenmode with content scaling, navigation between slidesand it partly supports an animated transition.

The achieved results are very clear because theycan be very easily measured and tested. The accuracyof displaying the slide is very high. The full-screenscaling is also working. Each presentation and eachslide has their own URL and that gives many options totransform this application into a start-up. It can be forexample the application that allows to remotely controlthe presentation by smart-phone or the application thatallows to distribute the content in the network. The

client side application is so called single page appli-cation and therefore it delivers great user experience,because there is no need to reload whole applicationduring the navigation process.

2. Theoretical background

2.1 ReactJS Components as the Key elementof Building the Client-side Part

ReactJS components can be imagined as simple func-tions that take parameters called props and state andtheir output is a HTML mark-up. ReactJS automat-ically keeps the interface up-to-date when the datachanges. This might normally lead to the unnecessaryredrawing and to the performace issues, but ReactJSsolves this with the mock DOM. Mock DOM is theinternal representation of the current DOM. When theredrawing is going to happened, ReactJS takes thecurrent and new mock DOM, compares them and com-putes the most efficient DOM mutation [1].

2.2 Handling the Application state with Reac-tJS and Redux libraries

The application state is the core of the client part ofthe application. The application state is only one andis stored in an object tree within one Store. Store isan object that allows manipulation with the state. Thestate is read-only and the only way of mutating thestate is to emit an action. An action is a simple objectthat describes what happened. The state mutating isperformed by reducers, functions that take the previousstate and action and return the next state. Reducershave to be subscribed to Store to process dispatchedactions. The way of processing a synchronous actionis shown in Figure 1.

It all starts with an interaction. This can be a userinteraction such as a click or it can even be a timedinteraction. In the callback, which is hooked to theinteraction, is called the action creator. The result ofthis call is an action. This action is dispatched by thedispatcher. The store automatically passes the actionto the reducers. All this results in the new application

state and may lead to redrawing of connected com-ponents. While the component is connecting to theStore, it may specify which part of the application stateaffects the component [2].

This procedure is not applicable to an asynchronousaction. This can be supported by an additional librarycalled Redux thunk. This library allows action creatorsto return not only an action object, but also a function.The whole asynchronous process can be built fromthree synchronous actions inside this function. Thefirst action describes the action that starts the asyn-chronous action. The second one is fired when theasynchronous action is successful and the third one isfired when the asynchronous action failed [3].

2.3 Presentational and Container ComponentsThis division of ReactJS components is convenientfor the cooperation with Redux library and also withother libraries that handle the application state. Thesummary of their features is shown in Table 1.

This approach is good for the following reasons.Firstly, it offers better re-usability, because the presen-tational components have no application logic. Thatallows to have more container components with dif-ferent logic for one presentational component. It alsooffers a better separation of concerns. It separates ap-plication logic from UI components, which is betterfor testing the components [4].

2.4 Higher-order Components as the Way ofthe Composing Components together

This principle allows to share functionality that some-how interacts with life-cycle hooks across many com-ponents. It is based on the idea of composing function-alities together. It is a function that takes one param-eter, which is the inner component, and the result isa new component, which implements new functional-ity and renders the inner component. This approachallows to apply a higher-order principle to any compo-nent many times [5].

2.5 Routing in the Application with React-routerlibrary

React-router library keeps the UI synchronized withthe URL. The key object from this library is the Routeobject and it specifies which component has to be dis-played according to the URL. If the URL has someparameters, then this parameters are passed to the com-ponent. Other parts of the library allow for example toprogrammatically move the application to the differentURL, to create links to URLs, handle the web browserhistory and allow server-rendering [6].

VIEW5.

Welcome in PowerPointPerfect presentations and slideshow in a easy way

VISUALIZE4.

</>

PROCESS3.

UPLOAD

2.1.

CREATE

PPTX

Figure 2. The general use case of the application

3. Application Design

There are several ideas behind the application design.The first one is that the client has to be as minimal aspossible. This is advantageous for many reasons. Themain ones are that it reduces the requirements for theprocessing power on the client and exposes only thenecessary parts of the application on the client. Thesecond one is to have a user-friendly web interface.This means that there has to be an option to addressthe presentation by its name and also slides by somenumber. This is convenient because it allows to sharethe presentations through the internet and this extendsthe usability of the application to more use cases. Thelast one is that the web client has to be a single pageapplication. The reason is to have the best possibleuser experience from the application.

The application design aims to fulfil the processbehind the use case of running the PowerPoint pre-sentation in the web browser. This process is shownin Figure 2. It consists of uploading the presentationfile to the server, analysing the file and converting thepresentation into the internal representation, sendingthis representation to the client side application, vi-sualizing this representation and reacting to the useractions such as moving between slides and viewingthe presentation in the full screen mode.

3.1 The Server side Part of the ApplicationThe primary functionality of the server is to transformthe presentation file to the internal representation. Itconsists of several tasks such as parsing the presenta-tion files, extracting the relevant information and trans-forming it into the internal representation. The formatof the presentation file specifies standard ECMA-376 1.The parsing part contains numerous file readings and

1http://www.ecma-international.org/publications/standards/Ecma-376.htm

Table 1. Features overview of the presentational and container components

Presentational components Container componentsPurpose How things look (markup, styles) How things work (data fetching, state updates)Aware of redux No YesTo read data Read data from props Subscribe to Redux stateTo change data Invoke callbacks from props Dispatch Redux actionsAre written By hand Generated by React Redux or written by hand

Page

Slideshow controller

Interactive slideshow view

Slide view / Transition

Figure 3. Overview of the components composition

therefore it is convenient to read them asynchronously.It also has to follow the standard specification. Thismakes the implementation more difficult, but on theother hand it is easily testable by unit tests. The nextpart is the transformation. This part is important, be-cause the specifications of the objects in the data fromthe parsing part are distributed into numerous modules.This part transforms the data so that each object holdsits own complete specification.

3.2 The Components in the Client side PartThe overview of the components is shown in Figure 3.The root component is named Page. It is simple com-ponent, which holds the other components together.This component is addressed from the Route compo-nent from react-router library and accepts parametersfrom the URL as they were set in the Route compo-nent. The last responsibility of this component is thatit specifies the data used for server rendering. Everyaction that should be fired during the server render-ing, has to be assigned to the component’s field calledfetchActions. This approach is used because the actionis asynchronous. The server has to wait with renderingthe static mark-up for the response from this action.

The following component is the Slideshow con-troller. Due to its simplicity, it reacts to the applicationstate changes and also defines its visual appearance. Itcontains one button, which switches the presentationto the full-screen mode.

The next component is called Interactive slideshowview. It is the container component for the presenta-tional component called Slideshow view with the full-

screen and the navigation functionality. The Slideshowview component is the presentational component andit is responsible only for displaying the presentation.The full-screen and the navigation functionality are im-plemented by the higher-order components principleand they are also the presentational components. Thisseparates the application logic from displaying logicand on top of that also helps re-usability.

The Interactive slideshow view component maycontain either the Slide view component or the Transi-tion component. The Slide view component containsthe logic that displays one slide and the Transitioncomponent contains the logic of performing the tran-sition between the slides. The Transition componentinternally consists of the components performing theanimation and two Slide view components. The anima-tion components are from the library called Velocity-react2.

The Slide view component overview is shown inFigure 4. It consists of many Shape view componentsand many Media view components. The Shape viewrepresents a positioned rectangular object. It may dis-play shape related styles such as a background colour.The Shape view may contain the Text view component.This component displays text with all the margins andindentations between text runs and paragraphs. TheMedia view component is very similar to the Shapeview component. It is also a positioned rectangularobject. The difference is that it displays media filessuch as images, video and audio. The video and audiofiles are not delivered with the internal representation,but they are delivered on a demand from player.

3.3 Automated Integration Testing and Com-paring with the Reference Images

The automated testing is the key aspect of continualdeveloping because they can validate certain use cases.Tests can check if a change is actually the improvementor the deterioration and do it in bigger scope. Thismay not sometimes be faster than the developer, butit is repeatable. The key part of the application isvisualizing the slide and therefore it is the first part that

2https://github.com/twitter-fabric/velocity-react

Slide view

Shape view

Shape view

Shape view

Media view

Figure 4. The Slide view component displayingsample data

RUNNING APPLICATION

TEST

BROWSER

SELENIUM SERVER

1.

2.

3.

4.

5.

6.

Figure 5. The process of the automated testing

should be tested. That was achieved with Webdriver.IOlibrary3. The scheme of how it works is shown inFigure 5.

The running test is sending orders to the seleniumserver, which fulfils them through the web browser.The orders allow to request a screen-shot of some partof the web application. This part can be defined by aCSS selector. These screenshots can be compared anddetermine, how much they are identical. This purposefulfils the library called WebdriverCSS.

4. Experiments and ImplementationThe implementation process and experimenting withthe results are the key parts of this work. The experi-ments were done in parallel with the implementationprocess. This speeds up the implementation itself andit also gives earlier feed-back to the current state of theapplication.

4.1 The Tools used in the Implementation Pro-cess

The whole implementation is written in JavaScript.This is natural for the client side of the web appli-cation, but thanks to NodeJS technology, it is alsopossible in the server side. It allows sharing the codein between and allows to run the complete applica-tion as a standalone application in the browser. Theapplication uses new features that were introduced inECMAScript 2015 standard, such as arrow functions,function generators, classes and promises. Becausethis standard is not fully supported by some browsers

3http://webdriver.io/

and the old ones does not support them at all, thereis need to use some compiler. The used compiler isnamed Babel. The implementation is based on thelibrary called Este, which unites some useful librariestogether.

4.2 Comparing the Reference Images with theResults

The results of the application are shown in Figure 6.The images in the first column are the reference imagesgenerated by PowerPoint. The images in the secondcolumn are images from the application and the im-ages in the third column are showing the differencebetween them. As can be seen, there are some posi-tional errors with the text. This is due to difference inthe PowerPoint and the web browser with handling thefonts. The measured percentage difference is lowerthen 5% for all the images. The smallest difference is1.5% and the highest is 4.5%.

5. ConclusionsThis paper shows the application that allows to viewPowerPoint presentations in the web browser. Thisallows to view and share the content of the presentationthrough the web environment.

The precision of the conversion is the key aspectof this application. If the slides follow basic rules anddo not contain special effects, then the 5% differencebetween the original slide and the actual slide is easilyachievable. In addition the application also containsthe development tools to iteratively increase the levelof the precision.

This work shows how modern web applications arebuilt. The web environment is very dynamic and thereare numerous tools to choose from and to use. Thiswork shows one approach how the tools can be usedand combined together. The application can also bethe core of a start-up project, because the applicationextends the ability of editing the content in the webenvironment from the PowerPoint.

Except the application, the work introduces oneapproach of how to build modern web applications.This can be used by web developers to inspire anduse some tools or procedures in their project. Theidea of displaying the PowerPoint presentation in theweb browser also deserves to extend in some start-upproject.

Acknowledgements

I would like to thank my supervisor Prof. Ing. AdamHerout, Ph.D. for his help.

Figure 6. The comparsion of the reference images with the results

References[1] Facebook Inc. Why react? Web page,

2013. https://facebook.github.io/react/docs/why-react.html.

[2] Dan Abramov. Basics. Web page, 2015.http://redux.js.org/docs/basics/index.html.

[3] Dan Abramov. Async actions. Webpage, 2015. http://redux.js.org/docs/advanced/AsyncActions.html.

[4] Dan Abramov. Presentational and container com-ponents. blogpost, 2015. https://goo.gl/Cu8fud.

[5] Dan Abramov. Mixins are dead. long live com-position. blogpost, 2015. https://goo.gl/GocvhS.

[6] Michael Jackson. Introduction. Web page,2015. https://github.com/reactjs/react-router/blob/master/docs/Introduction.md.